使用Spring Boot和create-react-app结合进行开发

根据以下文章的参考，尝试使用create-react-app与Spring Boot进行开发。

将从Spring Initializr下载的Spring Boot模板导入到Eclipse中。

导入 > Maven > 现有的 Maven 项目

只需要指定解压缩后的zip文件即可。

请进入src/main目录。

create-react-app app --verbose

执行。

然后，src/main/app中将创建适用于React开发的模板。

接下来，我们要编辑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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.example</groupId>
    <artifactId>websocket</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>jar</packaging>

    <name>websocket</name>
    <description>Demo project for Spring Boot</description>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.5.9.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>

            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <version>1.2</version>
                <executions>
                    <execution>
                        <id>Install Node and Yarn</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>Frontend production build</id>
                        <phase>package</phase>
                        <goals>
                            <goal>yarn</goal>
                        </goals>
                        <configuration>
                            <arguments>run build</arguments>
                        </configuration>
                    </execution>
                </executions>
                <configuration>
                    <nodeVersion>v7.2.0</nodeVersion>
                    <yarnVersion>v0.18.0</yarnVersion>
                    <installDirectory>.mvn</installDirectory>
                    <workingDirectory>src/main/app</workingDirectory>
                </configuration>
            </plugin>
            <plugin>
                <artifactId>maven-resources-plugin</artifactId>
                <version>3.0.1</version>
                <executions>
                    <execution>
                        <id>Copy frontend production build to resources</id>
                        <phase>package</phase>
                        <goals>
                            <goal>copy-resources</goal>
                        </goals>
                        <configuration>
                            <!--  
                            <outputDirectory>${basedir}/target/classes</outputDirectory>
                            -->
                            <outputDirectory>${basedir}/src/main/resources/static</outputDirectory>
                            <resources>
                                <resource> 
                                    <directory>src/main/app/build/</directory>
                                    <filtering>true</filtering>
                                </resource>
                            </resources>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>

</project>

在默认模板的中添加。
以下描述是默认的。

    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>

在其下方，我们将追加以下XML内容。

            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <version>1.2</version>
                <executions>
                    <execution>
                        <id>Install Node and Yarn</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>Frontend production build</id>
                        <phase>package</phase>
                        <goals>
                            <goal>yarn</goal>
                        </goals>
                        <configuration>
                            <arguments>run build</arguments>
                        </configuration>
                    </execution>
                </executions>
                <configuration>
                    <nodeVersion>v7.2.0</nodeVersion>
                    <yarnVersion>v0.18.0</yarnVersion>
                    <installDirectory>.mvn</installDirectory>
                    <workingDirectory>src/main/app</workingDirectory>
                </configuration>
            </plugin>
            <plugin>
                <artifactId>maven-resources-plugin</artifactId>
                <version>3.0.1</version>
                <executions>
                    <execution>
                        <id>Copy frontend production build to resources</id>
                        <phase>package</phase>
                        <goals>
                            <goal>copy-resources</goal>
                        </goals>
                        <configuration>
                            <!--  
                            <outputDirectory>${basedir}/target/classes</outputDirectory>
                            -->
                            <outputDirectory>${basedir}/src/main/resources/static</outputDirectory>
                            <resources>
                                <resource> 
                                    <directory>src/main/app/build/</directory>
                                    <filtering>true</filtering>
                                </resource>
                            </resources>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>


</project>

最初我是在参考的网站上将React的构建文件复制到${basedir}/target/classes，但我修改为复制到${basedir}/src/main/resources/static下方。

                        <configuration>
                            <!--  
                            <outputDirectory>${basedir}/target/classes</outputDirectory>
                            -->
                            <outputDirectory>${basedir}/src/main/resources/static</outputDirectory>

在项目的根目录执行`mvn clean package`命令。
这样，React的源代码会被构建，并复制到`${basedir}/src/main/resources/static`目录下。

只需在Eclipse中执行Java，接着连接到http://localhost:8080/，就可以看到React App的界面。