background

For a project based on the separation of SpringBoot and React, you usually need to configure the React project package directory as resources/static of the SpringBoot project. After configuring the prepare-package in pom. XML package plug-in, NPM run build is executed to package the front-end React project.

This is much easier than copying front-end files from the dist directory to the static directory. This article describes two ways to configure the React package directory with different front-end packaging plug-ins.

Node-based projects

The project created contains a scripts directory, and the scripts in package.json are configured as follows:

  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js"
  },
Copy the code

The modification procedure is as follows:

First, execute NPM run eject to export the configuration file first.

Second, change the appBuild configuration in config/paths.js to the static file directory of the Web project, for example:

appBuild: resolveApp('.. /xxx/src/main/resources/static'),Copy the code

React-app-rewired engineering

The script configuration in package.json is:

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }
Copy the code

In this scenario, you need to modify the creation configuration file config-overrides. Js and add the appBuild configuration as follows:

First, create a file named config-overrides. Js in the root directory. Step 2, edit the file and write the orientation configuration:

const {override, fixBabelImports} = require('customize-cra'); Const path = require('path') const paths = require('react-scripts/config/paths') // Modify the path to the resources directory of the web project paths.appBuild = path.join(path.dirname(paths.appBuild), '.. /xxx/src/main/resources/static') module.exports = override(fixBabelImports('import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }) );Copy the code

The revelation of

A React project uses a different package.json script. The react-app-rewired plugin is used later, so the appBuild configured earlier does not take effect.

This method is used to modify the React package directory because the package scripts used before and after the backup project are different.

Compared to node scripts, the React-app-rewired plugin doesn’t need to export configuration files. It’s much easier to add appbuilds directly!