In this tutorial I will show you how to setup a spring boot app with react.
First you will need to start by going to: start.spring.io and make a simple app.
Our app will have the name MySpringBootReactApp.
1) Setting up the base project with start.spring.io
After setting your group and artifact you will need to add some extra configurations you should now click the green text that says switch to full version. You should select Web, H2 and posgresql. Your dependencies should look like this.
Now you can download the app and open the zip in your IDE I will be using Intellij IDEA community edition but if you follow this tutorial the result should work with any IDE. Once the project is open you can test it by running the following command in the project’s root directory.
$ ./mvnw spring-boot:runThis is will build and run your project. You should see the logs in your console and your app should be running in http://localhost:8080. You should expect to see Whitelabel Error Page when you open the url in your browser. This is because we have not yet setup any mappings or template. But we won’t need these in this tutorial. Instead we will add make spring serve a React web app.
2) Setting up the react app
Now we want to setup a react app that will be served by tomcat(spring’s web server). If you have not installed it yet, get the create-react-app cli. This will allow you to effortlessly create react application and skip a lot of very common settings. Now in src we will create a folder named webapp and inside this folder we should create our react app. This can be done with the following commands, from the projects root directory.
$ mkdir src/webapp
$ create-react-app src/webapp --use-npmIf you would like to use yarn instead of npm you can remove the flag but you will have to make some adjustments further down the road.
If you want to run or develop your web app you can do it from this directory running from the webapp directory. React will reload the page whenever we make changes to the webapp source.
$ npm run startYou should now see the classic create-react-app screen by visiting http://localhost:3000 from your web browser.
3) Serving the production build in the tomcat server
So far we have initialized two separate projects one with spring boot and this one with create-react-app. Now we have to make spring serve the react app. For this we want to set the production build of the react app in the static files folder that our spring boot app will serve. This folder is located in the path: src/main/resources/static but instead of building the web app and moving it manually we want to automate this with a postbuild script in react. You should now add the clean-old-build, move-build, clean-new-build and postbuild to your package.json scripts.
Now if you run npm run build from the command line and the production version of the react app should be placed in the static folder that our spring boot app will use. At this point you can go back to the root directory of the spring boot app and run ./mvnw spring-boot:run and our spring boot app is almost done. So far we have a production build of our webapp being served through localhost:8080. However, a problem with this current setup is that every time we want to run spring we have to build the webapp in case any changes were made. We can automate this process with maven plugins.
4) Adding the maven front end plugin
We will use eirslett’s maven front-end plugin. We will add a build plugin to the spring projects pom.xml file. First add the <plugin> tags in the <build> tags in pom.xml.
Now we need to add some extra settings to out plugin to make this work. First we add <configuration> tags. In which we specify our working and install directory.
Everything that’s left to do now is to add our build dependencies and specify the build scripts. We do this with execution tags.
The execution tags are very self explanatory. The first one installs our dependencies npm and node in the directory specified in <installDirectory> with specified versions. Then the other two executions run the commands npm install and npm run build . Now every time we build and run the spring boot app our web app source code is automatically built for production. yay! Now run ./mvnw spring-boot:run and enjoy watching the logs.
5) Conclusion
Now we have a setup that will allow us to easily run a production build of our web app whenever we start the spring boot app. This is very convenient for deploying your app to web services like Heroku. Additionaly you may want to add the contents of the static files folder to your git ignore since these are generated in every build.
Now you may have noticed we didn’t use H2 or PostgreSQL. Stay tuned for the next part.
Source code:
https://github.com/CarlosBalladares/spring-boot-react-setup/
