background

In the last two years, most of the projects I have participated in are based on SpringBoot [back end] + Vue or React [front end]. It is said that the front end is separated from the front end, but in fact it is still full stack, just static resources are connected with the front end framework.

So the question is, how do you debug the front end if it’s not pure front end separation? How to build a project framework without opening multiple ideas and switching between multiple projects during development?

Maven’s exec-Maven-plugin, combined with the front-end package directory eg :React appBuild parameter, solves this problem perfectly.

The module planning

In this paper, a simple multi-module application as an example, based on SpringBoot and React multi-module project construction processdemo. The parent project name iswood-multi-proContains two complete submodulesorder-web 和 user-web, a public modulecommon. order-view 和 user-viewThe React directory houses the front-end framework created by React.

The first step is to create a folder with the structure shown above

Step 2, create the parent project

IDEA menu “new Project” select maven Project and empty, directory specified in the first step create parent directory address:As the parent project container, no code is needed, so delete SRC directory and open IDEA project directory as follows:This achieves the visual effect of putting the front and back project directories together.

Step 3: Create submodules

Creating submodulesorder-web, directory directly select already built:Take a look atorder-webView becomes the Maven project icon:Do the same to create the other two submodulesuser-web 和 common, the constructed frame structure is as follows:

Step 3, the back-end package plug-in configuration

Because of the separation of the front and back ends, the static resource files of the order-Web and User-Web pages come from the output of the corresponding front-end engineering packaging. Maven’s packaging plug-in can be used to complete the front-end automatic packaging process.

Configure its packaging plug-in in the pom. XML file of order-Web, and execute the NPM run build command to complete the packaging of the front-end module in the stage before the big package:

<plugin>
    <groupId>org.codehaus.mojo</groupId>
    <artifactId>exec-maven-plugin</artifactId>
    <executions>
        <execution>
            <id>exec-npm-run-build</id>
            <phase>prepare-package</phase>
            <goals>
                <goal>exec</goal>
            </goals>
            <configuration>
                <executable>cnpm</executable>
                <arguments>
                    <argument>run</argument>
                    <argument>build</argument>
                </arguments>
                <workingDirectory></workingDirectory>
            </configuration>
        </execution>
    </executions>
</plugin>
Copy the code

Similarly, modify the pom.xml of the User-Web module to add the front-end packaging configuration above and change the directory to.. / user – the view.

This solves the backend packaging problem.

Fourth, modify the front-end output directory

For the React project, the default output directory is build, which we need to change to the Static directory of the Web project.

Taking order-view as an example, the execution flow is as follows:

  1. Enter theorder-viewDirectory, executenpm run ejectGenerate a configuration file for the project.Note that this configuration file cannot be copied, it must be generated by command, otherwise it will not take effect when packaging.
  2. Into generatedconfigDirectory, modifypath.jsIn the fileappBuildFor its upper directory:appBuild: resolveApp('.. /order-web/src/main/resources/static'),The purpose is to set up the package output file to the static resources directory of the Web project, so that it can be used in conjunction with the packaging of the third step back end.

Step 5: Configure the front-end operating environment

There are two ways to run the front-end engineering when developing the front and rear ends separately:

  1. First, run independently and usenpm run startIf the front-end independent port is enabled, its Ajax access is cross-domain access to the back-end project.
  2. The second, packaged to the back end, starts with the back end, and there is no cross-domain.

Solving front-end startup requires two steps:

  1. Back-end project adds cross-domain interceptor configuration.
  2. The front endaxios 的 BASE_URLSet, distinguish development and production with environment variables:
let {hostname, port} = window.location; Const ADDRESS = '${hostname}:${port}'; let BASE_URL = `http://${ADDRESS}`; If (process.env.node_env === 'production') {BASE_URL = ''; } // Create an axios instance const service = axios.create({baseURL: BASE_URL, timeout: 50000, changeOrigin: WithCredentials: true, // withCredentials: true, // With cookies})Copy the code

At this point, a complete framework is in place for both front and back end development and packaging and integration.