Spring 启动服务器未加载 React 网页

Question

问题：

您好！我现在已经花了相当多的时间试图让 Spring 启动服务器来托管 React 应用程序。除了最后一个问题，我已经能够解决几乎所有问题，那就是让 React 页面呈现。

页面（称为“库”）已由服务器打开。我知道服务器的这部分工作正常有两个原因。

浏览器选项卡的名称已按应有的方式设置为“图书馆”。
当我将页面设置为仅打开带有简单 h1 header 的 HTML 页面时，显示“你好”，它也能正常工作。

想法：

~~问题似乎来自 Thymeleaf 但我找不到问题的原因。~~ 问题似乎不是 Thymeleaf after-all 而是配置中的另一个问题。尽管我对此可能不正确。我已经尝试了多种设置和配置，而我现在使用的那个似乎总体上效果最好。

似乎不是 React 应用程序的原因。我正在构建 React 项目，在构建过程中没有出现明显的问题。所有文件都在预期的位置生成。当我在浏览器中将生成的 Webpack 包作为独立文件打开时，它会打开并正常运行。

服务器本身，尽管有这个问题，运行完全符合预期。

当前没有使用 REST 功能。截至目前，该服务器的唯一目标是简单地打开 React 应用程序。

Files/Configuration:

这些是我认为相关的所有文件。如果需要，我会添加更多。

文件结构

+-- src
   +-- \main
      +-- \java
      +-- \react
      +-- \resources
         +-- \templates
            +-- bundle.js
            +-- index.html
            +-- bundle.js.License.txt
         +-- application.properties
   +-- \test
+-- package.json
+-- pom.xml
+-- webpack.config.js

Webpack.Config.js

var path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: './src/main/react/index.js',
    mode: 'development',
    output: {
        path: path.resolve(__dirname, "src/main/resources/templates/"),
        filename: "bundle.js",
        },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /(node_modules)/,
                use: [{
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-env", "@babel/preset-react"]
                    }
                }]
            },
            {
                test: /\.css$/,
                exclude: /(node_modules)/,
                use: ["style-loader", "css-loader"],
            }
            
        ]
    },
    plugins: [
    new HtmlWebPackPlugin({
      template: "./src/main/react/index.html",
    }),
  ],
};

package.json

{
  "name": "website",
  "version": "0.1.0",
  "main": "index.js",
  "dependencies": {
    "acorn": "^8.7.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-table": "^7.7.0",
    "react-tabulator": "^0.16.1",
    "rest": "^1.3.1",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "npm start",
    "build": "webpack",
    "watch": "webpack --watch -d --output ./target/classes/static/built/bundle.js"
  },
  "proxy": "http://localhost:8080",
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.13.16",
    "@babel/preset-env": "^7.13.15",
    "@babel/preset-react": "^7.13.13",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.2.7",
    "html-webpack-plugin": "^5.3.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.35.1",
    "webpack-cli": "^4.6.0",
    "webpack-dev-server": "^3.11.2"
  }
}

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.6.6</version>
        <relativePath/>  <!-- lookup parent from repository -->
    </parent>
    
    <groupId>jweber.code</groupId>
    <artifactId>Library</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>Library</name>
    <description>Library Website</description>
    
    <properties>
        <java.version>11</java.version>
    </properties>
    
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-rest</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
        </dependency>
        <dependency>
            <groupId>com.h2database</groupId>
            <artifactId>h2</artifactId>
            <scope>runtime</scope>
        </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>
            </plugin>
        </plugins>
    </build>

</project>

aplication.properties

spring.thymeleaf.cache=false  
spring.thymeleaf.suffix: .html

收盘价：

在此期间，我会继续寻找解决方案，并且一定会用我遇到的任何发现更新 post。谢谢你的帮助！

跟进：

4/24 8:22 美国东部时间

我在 webpack.config.js 中添加了一个“模式”字段，并从 React 构建过程中删除了一个警告，但仅此而已。我还修改了 pom.xml 文件中的依赖项，以查看是否存在由订单或不需要的订单引起的问题。我做了运行全新安装，但这也没有任何作用。我已经用新信息更新了上面显示的文件。

Answer 1

好吧，经过一个星期的思考这个问题，（由于强烈的挫败感，我停了一段时间）我找到了一个我觉得好多了的方法。

部分解决方案是同时删除 Thymeleaf 和 Webpack。另一个是项目的广泛重组。

我已将较大的项目分成两个独立的域。一个用于前端，另一个用于后端。

文件结构：

+-- Website
    +-- \Backend
        +-- \src
            +-- \main
                +-- \java
                +-- \resources
            +-- \test
        +-- \target
            +-- \classes
                +-- \static
        +-- pom.xml
    +-- \Frontend
        +-- \build
        +-- \public
        +-- \src
        +-- package.json
        +-- build.bat
        +-- build_script.ps1

标准 npm 运行 build 命令将创建在 Spring 引导服务器上托管 React 应用程序所需的所有文件。 Webpack 不是必需的，Thymeleaf 也不是必需的。所需要做的就是将 \Frontend\build 文件夹中的结果文件 copy/paste 放入 \Backend\target\classes\static 文件夹中.我创建了一个名为 build_script.ps1 的 Powershell 文件，其中运行是 React 应用程序的构建脚本，然后将新构建的文件复制到后端的预期文件夹。 build.bat 文件只是运行的 Powershell 文件，我不需要在命令提示符下输入很多内容。

build_script.ps1:

#Variables
$Directory = "{dir}\LibraryWebsite\Frontend"
$sourceDirectory = "{dir}\LibraryWebsite\Frontend\build\*"
$targetDirectory = "{dir}\LibraryWebsite\Backend\target\classes\static"

#test

#Build the application and then copy it to the server's 
cd $Directory
npm run-script build
Copy-Item -Force -Recurse $sourceDirectory -Destination $targetDirectory

所有这些都使程序结构更加简洁，并且我的工作量没有明显增加。一切都通过 ./build.

完成

我可能会 return 在未来的某个时候去 Thymeleaf（如果我讨厌自己）但这暂时满足我的需求。

Spring 启动服务器未加载 React 网页

Spring Boot Server not loading React webpage

java

maven

reactjs

spring-boot

webpack

问题：

想法：