Setup React.js with sprint boot

In this post I'm going to setup Reactjs project and integrate it with SpringBoot project.

Prerequisites 

1. You should have install java 1.8 or above.
2. You should have Eclipse installed in your PC.
3. Your PC should setup Maven installed and configured.

First of all lets create maven project by click on File-> New -> Maven Project then provide project details (I select create simple project). My project details as follows.

Lets add required dependencies in to the pom file first. I will use the similar pom structure with my inital spring boot project setup.

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">

  <modelVersion>4.0.0</modelVersion>

  <groupId>com.nirmal.blog</groupId>

  <artifactId>ReacjsApp</artifactId>

  <version>0.0.1-SNAPSHOT</version>

  <packaging>war</packaging>

<parent>

        <groupId>org.springframework.boot</groupId>

        <artifactId>spring-boot-starter-parent</artifactId>

        <version>2.0.5.RELEASE</version>

    </parent>

 <dependencies>

  <!-- Compile -->

  <dependency>

   <groupId>org.springframework.boot</groupId>

   <artifactId>spring-boot-starter-web</artifactId>

  </dependency>

  <dependency>

   <groupId>javax.servlet</groupId>

   <artifactId>jstl</artifactId>

  </dependency>

  <!-- Provided -->

  <dependency>

   <groupId>org.apache.tomcat.embed</groupId>

   <artifactId>tomcat-embed-jasper</artifactId>

   <scope>provided</scope>

  </dependency>

  <!-- Runtime -->

  <dependency>

   <groupId>mysql</groupId>

   <artifactId>mysql-connector-java</artifactId>

   <version>5.1.6</version>

  </dependency>

 </dependencies>

 <build>

  <plugins>

   <plugin>

    <groupId>org.springframework.boot</groupId>

    <artifactId>spring-boot-maven-plugin</artifactId>

   </plugin>

  </plugins>

 </build>  

</project>

But still project will not be able to perform maven install since we have not added springboot initialization class with main method.
Lets add that class with main method in to our project I'll call it as MyApp class. It will contain following details.

package com.nirmal.blog;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.builder.SpringApplicationBuilder;
import org.springframework.boot.web.servlet.support.SpringBootServletInitializer;

@SpringBootApplication
public class MyApp extends SpringBootServletInitializer {

@Override
protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {
return application.sources(MyApp.class);
}

public static void main(String[] args) {
SpringApplication.run(MyApp.class, args);
}

}


After our springboot initialization class lets add the spring boot configuration file "application.properties". it should be added it to resource folder.

spring.mvc.view.prefix: /.
spring.mvc.view.suffix: .html



Then lets start develop the Reacjs part of the project. First of all you need to install node in your local machine. You can download nodejs from following location. In my application I'm using node version node-v8.11.3-x64. Install it in your local machine.

Then I  created new folder call "reactjs" and then use following command to create new reactjs project inside our maven project structure.

npx create-react-app my-app

after successful installation you should be able to see similar output to following

Then you can go inside the my-app folder and enter following command

npm run-script build

This will build the web application for us on the build folder in our reactjs project as show in bellow. 

Then lets start reactjs app by entering following command

nmp start

Then your newly created project should started and you should able to see similar output on your browser.

So far our project structure should be similar to bellow image.

First of all lets set the our application context path. Here we have to set context path in two places. One is for ReactJs and other one is for spring boot.

To set context path on ReactJs we have to modify homepage variable in package.json file.

In my example I set as bellow. you can access whole package json on github location.

"homepage": "http://localhost:8080/ReacjsApp/"


Then lets set the context path on Spring boot application we just need to add that configuration in to application.properties file. For my application configuration would be similar to bellow. 

server.servlet.context-path=/ReacjsApp

Then we have to add following configuration to specify the location for static resources which required for the reactjs app to start.

spring.resources.static-locations=classpath:/

Whole pplication.properties file can be access on github location.

Then lets modify this default application application to perform the react installation and build when project perform the maven install. In order to do that we have to add following command in the pom file.

 <build>
  <plugins>

   <plugin>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-maven-plugin</artifactId>
    </plugin>
    <plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>1.6</version>
        <configuration>
            <workingDirectory>src/main/reactjs/my-app</workingDirectory>
<installDirectory>target</installDirectory>
</configuration>
<executions>
<execution>
<id>install node and npm</id>
<goals>
<goal>install-node-and-npm</goal>
</goals>
<configuration>
<nodeVersion>v10.11.0</nodeVersion>
<npmVersion>6.4.1</npmVersion>
</configuration>
</execution>
<execution>
<id>npm install</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>install</arguments>
</configuration>
</execution>
<execution>
<id>npm run</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>run-script build</arguments>
</configuration>
</execution>
</executions>
   </plugin>
   <plugin>
        <artifactId>maven-resources-plugin</artifactId>
        <version>2.6</version>
        <executions>
          <execution>
            <id>copy-resources</id>            
            <phase>validate</phase>
            <goals>
              <goal>copy-resources</goal>
            </goals>
            <configuration>
              <outputDirectory>${basedir}/src/main/webapp</outputDirectory>
              <resources>          
                <resource>
                  <directory>src/main/reactjs/my-app/build</directory>
                  <filtering>true</filtering>
                </resource>
              </resources>              
            </configuration>            
          </execution>
        </executions>
      </plugin>   
  </plugins>


 </build> 

Now we are ready to install our application using maven. When performing the maven install you can see its executes the npm install and npm run-script build as show in bellow.

After successful maven installation you can see the war file generated on the target folder and you can run the we application using following command without any servlet container.

java -jar ReacjsApp-0.0.1-SNAPSHOT.war

Then you will be able to see spring application starting run and after its completed you will be able to access first reactjs app on SpringBoot on following http://localhost:8080/ReacjsApp/.

Project source can be access on following github location.