React JS With Spring Boot In Production

3 min readAug 15, 2018

React is one of the most popular libraries for creating web application front ends. With Spring Boot it’s easier than ever to create a production ready applications. Spring Boot makes development environment and production environment as an exact copy. In this tutorial, we’ll tie those together and Deploy React Js With Spring Boot in Production.

Follow My Blog :- https://frugalisminds.com

Now I was developing a react app with spring back-end . Once my first phase of development got over and we had to move our code to production. We wanted to deploy React JS With Spring Boot In Production

We’d like to be able to publish one jar file to production, and that jar file should contain both the backend and the frontend. Lets look at the project folder structure

But the problem was react app is running on http://localhost:3000 and my spring boot is running on http://localhost:8080 . So we decided to add fronted build as a static resources inside spring boot app.

There are few changes i had to do , as i was using react-router in my app.I have described about the issue i faced in react while deploying to sub-directory.

we are going to use frontend-maven-plugin and Configure our pom.xml to build frontend folder.

<plugin>
    <groupId>com.github.eirslett</groupId>
    <artifactId>frontend-maven-plugin</artifactId>
    <version>1.6</version>
    <configuration>
        <workingDirectory>frontend</workingDirectory>
        <installDirectory>target</installDirectory>
    </configuration>
    <executions>
        <execution>
            <id>install node and npm</id>
            <goals>
                <goal>install-node-and-npm</goal>
            </goals>
            <configuration>
                <nodeVersion>v8.11.3</nodeVersion>
                <npmVersion>5.6.0</npmVersion>
            </configuration>
        </execution>
        <execution>
            <id>npm install</id>
            <goals>
                <goal>npm</goal>
            </goals>
            <configuration>
                <arguments>install</arguments>
            </configuration>
        </execution>
        <execution>
            <id>npm run build</id>
            <goals>
                <goal>npm</goal>
            </goals>
            <configuration>
                <arguments>run build</arguments>
            </configuration>
        </execution>
    </executions>
</plugin>

This plugin runs frontend build by executing npm install and npm run build . Once it runs successfully you can see a build folder which has production ready build to be deployed.

But we want this build files to be deployed alongside a jar . Hence , lets go ahead and include the build folder in spring boot source while we do a build. We need to add another maven plugin maven-antrun-plugin to copy these build contents . Lets add the plugin in our pom.xml.

Have a look at my blog for detailed discussion on How to Deploy Only React JS app in tomcat .

<plugin>
    <artifactId>maven-antrun-plugin</artifactId>
    <executions>
        <execution>
            <phase>generate-resources</phase>
            <configuration>
                <target>
            <copy todir="${project.build.directory}/classes/static">
            <fileset dir="${project.basedir}/frontend/build"/>
                    </copy>
                </target>
            </configuration>
            <goals>
                <goal>run</goal>
            </goals>
        </execution>
    </executions>
</plugin>

This plugin copy the files to classes/static folder in order to serve them as static resources from the Spring Boot application. Now run the code by following command .

$mvn clean install$mvn spring-boot:run

Open your web browser, and navigate to http://localhost:8080. You can now check react app up and running with Spring Boot for Production . If you want to deploy react app with Spring Boot in production , you can simply run

java -jar target/Spring-Boot-React-0.0.1-SNAPSHOT.jar

Here is the Complete Code in my Github Repository .

Please Follow my blog for regular posts

Spring Cloud Tutorials

Spring Boot Tutorials

Thanks !!! This Completes My First Post !! Hurray !!!

Tutorials You Can Follow

React JS With Spring Boot In Production

My Preferred Tools

Written by Sanjay Y