reactjs - 如何将 React webapp 集成到带有 jar 包装的 Spring Boot 应用程序中

Question

我们有一个 react webapp 和一个 spring boot 应用程序(用 maven 构建)正在开发中。
React 应用程序(在 npm 上)和引导应用程序是分开运行的，但现在是时候将它们集成起来并将其放入 QA/staging 中了。
我们正在使用 webpack 来捆绑 react 应用程序。
启动应用程序是一个带有 REST API(由 react 前端消耗)的单个模块，具有用于数据库持久性的休眠功能。
问题

react 和 boot 应用程序的目录结构应该是什么？我们希望将整个应用程序(前端和后端)部署为 .jar(spring boot uberjar)

什么是 react 应用程序开发工作流程？每次进行小的 css、html 或 .js 更改时，无需运行 maven 和运行 java -jar 的工作流程。

我在网络上找到了资源，其中 react 和引导应用程序都位于单独的存储库/目录中，没有任何集成，这不是最佳的；我还没有找到一个资源，其中 webapp 资源和引导资源都在同一个目录树中，这也说明了开发生命周期和生产生命周期。
奖励:react 开发人员只知道 html/js/css。他们的 vscode/webstorm 项目中是否只有 react 应用程序资源？

Answer 1

您可以在同一端口上运行 React 和 SpringBoot 并将它们打包为单个工件!
请按照我在此处解释的步骤进行操作，这应该可以帮助您启动并运行。
回答你的问题——

目录结构如下所示。两者都将位于同一根目录下。

关于 react 应用程序开发工作流程 - 您可以像开发前端 react 项目一样开发它，使用热重载(保存文件，更改将自动反射(reflect))和有意义的错误消息。您将不得不使用代理进行通信。

Here is the Github link of the demo project that I am going toexplain here

Spring Boot 可以提供来自 src/main/resources/static 的静态内容文件夹。我们将利用 Spring Boot 的上述特性来服务于 react 项目的单页。我们将从目标目录中的静态文件夹中提供一个 html 页面，而不是在源目录中。
项目结构 -

首先，用 https://start.spring.io创建一个spring boot项目.添加 Web 依赖项。将 groupId 和 artifactId 设置为您想要的任何内容。生成项目并将其解压缩到您的项目目录中。
或者，如果您使用的是 Spring Tools Suite，您只需单击 File->New->Spring Starter Project并提及创建 Spring Boot 项目所需的详细信息。 frontend src/main 内的文件夹应该使用 create-react-app 构建您的 react 应用程序.
所以，有两个步骤-

创建前端的生产版本。

将生产版本复制到 ${target/classes/}。

我们将使用两个 maven 插件和 Thymleaf为了那个原因。

frontend-maven-plugin第 1 步。

maven-resources-plugin第 2 步。

对于frontend-maven-plugin在步骤 1-- 如果您仔细查看 pom.xml那里我提到了 src来自哪里 frontend-maven-plugin将获取文件，创建生产版本并将内容放在提到的输出目录中(在 src/main/frontend/build 内)。

 <workingDirectory>${frontend-src-dir}</workingDirectory>
 <installDirectory>${project.build.directory}</installDirectory>

对于maven-resources-plugin在第 2 步——它将采用 frontend-maven-plugin 刚刚创建的生产版本。然后把它放在你的根目录下 target/classes/static .
然后我们将使用 Thymleaf 提供来自 target/classes/static 的静态内容在 Controller 中使用休息端点。否则您必须输入 html file 的名称，如 http://localhost:8080/index.html您的 pom.xml 应该看起来像这样-

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.4.2</version>
        <relativePath /> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.springreact</groupId>
    <artifactId>demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>demo</name>
    <description>Run React Frontend and SpringBoot Backend on the same port.</description>
    <properties>
        <java.version>1.8</java.version>
        <frontend-src-dir>${project.basedir}/src/main/frontend</frontend-src-dir>
        <node.version>v14.15.4</node.version>
        <yarn.version>v1.16.0</yarn.version>
        <frontend-maven-plugin.version>1.7.6</frontend-maven-plugin.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId> 
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <version>${frontend-maven-plugin.version}</version>

                <configuration>
                    <nodeVersion>${node.version}</nodeVersion>
                    <yarnVersion>${yarn.version}</yarnVersion>
                    <workingDirectory>${frontend-src-dir}</workingDirectory>
                    <installDirectory>${project.build.directory}</installDirectory>
                </configuration>

                <executions>
                    <execution>
                        <id>install-frontend-tools</id>
                        <goals>
                            <goal>install-node-and-yarn</goal>
                        </goals>
                    </execution>

                    <execution>
                        <id>yarn-install</id>
                        <goals>
                            <goal>yarn</goal>
                        </goals>
                        <configuration>
                            <arguments>install</arguments>
                        </configuration>
                    </execution>

                    <execution>
                        <id>build-frontend</id>
                        <goals>
                            <goal>yarn</goal>
                        </goals>
                        <phase>prepare-package</phase>
                        <configuration>
                            <arguments>build</arguments>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
            <plugin>
                <artifactId>maven-resources-plugin</artifactId>
                <executions>
                    <execution>
                        <id>position-react-build</id>
                        <goals>
                            <goal>copy-resources</goal>
                        </goals>
                        <phase>prepare-package</phase>
                        <configuration>
                            <outputDirectory>${project.build.outputDirectory}/static</outputDirectory>
                            <resources>
                                <resource>
                                    <directory>${frontend-src-dir}/build</directory>
                                    <filtering>false</filtering>
                                </resource>
                            </resources>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>
</project>

这里是 Controller 代码。

package com.springreact.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class IndexController {

    @GetMapping("")
    public ModelAndView home() {
        ModelAndView mav=new ModelAndView("index");
        return mav;
    }

}

如果您按照上述步骤操作，您应该会看到您的 React 应用程序在 http://localhost:8080/ 上启动。 .

有关更多详细信息，您可以查看我在上面写的博客。以下是两个不同平台上的博客链接-
开发社区- https://dev.to/arpan_banerjee7/run-react-frontend-and-springboot-backend-on-the-same-port-and-package-them-as-a-single-artifact-14pa
中- https://medium.com/codex/run-react-frontend-and-springboot-backend-on-the-same-port-and-package-them-as-a-single-artifact-a790c9e10ac1