React + Spring Boot deployment

Question

I'm having problems deploying a react nodejs application with a spring boot. The spring application works fine with basic HTML/JS and I've got the react app running fine in dev mode, but I seem to be missing something as far as bundling the react and spring properly.

Currently, I can run/deploy my spring boot application with some simple HTML and javascript ajax calls (no react). It runs on my AWS ec2 with no problems.

I can also run my react application in dev mode through node JS "npm start" and point it at my local spring boot application. (I added "proxy": "http://localhost:8080" to manifest.json). I'm struggling with the next steps of actually bundling my react application into the war with the rest of my spring application and getting it working. I can't even get a react hello-world page to load without rest calls.

I've tried running npm run build and then copying all of the files generated in the /build directory to my spring project's /src/main/resources. Specifically I copied:

react-app/build/static/* -> spring-app/src/main/resources/static/.

react-app/build/* -> spring-app/src/main/resources/.

After building the war (mvn install) and running the war locally, I'm getting 404 errors when trying to load the server without any page specified. When I specify index.html, I'm getting errors that it's failing to load the JS and CSS files in my static directory. The same problems happen when I deploy the war to ec2 and try to load pages.

Are there more configuration steps that I'm missing? I'm aware there's probably some base URL config I'll need to do to consume the rest API outside of dev mode, but I can't even get a page to load without any rest calls. I tried moving index.html to various locations like /resources/static and /resources/public. Any help would be appreciated.

Answer 1

Look into this tutorial from Spring, there is a "frontend-maven-plugin" that you might find very useful. I would ditch the war and just build your spring boot app as a jar, then place your js files in src/main/js, and your index.html in /src/main/resources/static.

The tutorial is available here:

https://spring.io/guides/tutorials/react-and-spring-data-rest/

And the code is available here:

https://github.com/spring-guides/tut-react-and-spring-data-rest/tree/master/basic

Use a webpack.config.js config similar to the one used in the tutorial, and it will "just work" once you build using the maven front end plugin.

As others have suggested, you will be better off separating your front-end and back-end code (keep them in separate repositories).

Answer 2

I also had the same problem, Created a folder webapp/resources in src folder of the project and copied build folder content generated from npm install and run build. This solved the issue.

In my project i had the Ui files in src/main/app folder and ran npm install and run build commands on it. And then copied build folder content to src/main/webapp/resources https://github.com/Aditya260194/spring-boot-react-app

below is my pom part for build and war

        <plugin>
                <groupId>org.codehaus.mojo</groupId>
                <artifactId>exec-maven-plugin</artifactId>
                <executions>
                    <execution>
                        <id>npm install</id>
                        <phase>generate-sources</phase>
                        <goals>
                            <goal>exec</goal>
                        </goals>
                        <configuration>
                            <workingDirectory>${uiResourcesDir}</workingDirectory>
                            <executable>npm.cmd</executable>
                            <arguments>
                                <argument>install</argument>
                            </arguments>
                        </configuration>
                    </execution>
                    <execution>
                        <id>npm run build</id>
                        <phase>generate-sources</phase>
                        <goals>
                            <goal>exec</goal>
                        </goals>
                        <configuration>
                            <workingDirectory>${uiResourcesDir}</workingDirectory>
                            <executable>npm.cmd</executable>
                            <arguments>
                                <argument>run</argument>
                                <argument>build</argument>
                            </arguments>
                        </configuration>
                    </execution>
                </executions>
            </plugin>

Answer 3

I followed the same approach for Production purposes using frontend-maven-plugin and maven-antrun-plugin.

I used frontend-maven-plugin to generate the React bundle (npm install and than npm run build) and maven-antrun-plugin to copy the artifacts to spring boot's public folder.

A great sample project and tutorial can be found here