Dev recipes: Integrate React frontend in a Java corporate environment

Thomas Zehe — Tue, 25 Sep 2018 13:34:16 +0000

The Problem

You find yourself in a Java environment and want to write a frontend or testpage with React? You want to bootstrap your application with create-react-app but don't know how to integrate it in the current build steps? Then this is for you!

Requirements

Maven Frontend Plugin (https://github.com/eirslett/frontend-maven-plugin)
Maven 3
a react application

Add frontend-maven-plugin to your pom.xml

Example pom.xml

  <?xml version="1.0" encoding="UTF-8"?>
<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.zehethomas</groupId>
 <artifactId>react-spring-example</artifactId>
 <version>0.0.1-SNAPSHOT</version>

 <packaging>jar</packaging>

 <parent>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-parent</artifactId>
  <version>2.0.4.RELEASE</version>
  <relativePath/> <!-- lookup parent from repository -->
 </parent>


 <properties>
  <java.version>1.8</java.version>
 </properties>

 <dependencies>
  <dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-web</artifactId>
  </dependency>
 </dependencies>

 <build>
  <plugins>
   <plugin>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-maven-plugin</artifactId>
   </plugin>


   <!--
      1. used for local installation of node and npm
      2. to install dependencies with npm install
      3. building the application
    -->
   <plugin>
    <groupId>com.github.eirslett</groupId>
    <artifactId>frontend-maven-plugin</artifactId>
    <version>1.6</version>
    <configuration>
     <nodeVersion>v10.0.0</nodeVersion>
     <npmVersion>6.1.0</npmVersion>
     <workingDirectory>src/main/js/frontend</workingDirectory>
    </configuration>
    <executions>
     <execution>
      <id>Install node and npm locally to the project</id>
      <goals>
       <goal>install-node-and-npm</goal>
      </goals>
     </execution>
     <execution>
      <id>npm install</id>
      <goals>
       <goal>npm</goal>
      </goals>
     </execution>
     <execution>
      <id>Build frontend</id>
      <goals>
       <goal>npm</goal>
      </goals>
      <configuration>
       <arguments>run build</arguments>
      </configuration>
     </execution>
    </executions>
   </plugin>
   <plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-resources-plugin</artifactId>
    <executions>
     <execution>
      <id>Copy frontend build to target</id>
      <phase>process-resources</phase>
      <goals>
       <goal>copy-resources</goal>
      </goals>
      <configuration>
       <outputDirectory>${basedir}/target/classes/resources</outputDirectory>
       <resources>
        <resource>
         <directory>${basedir}/src/main/js/frontend/build</directory>
         <filtering>true</filtering>
        </resource>
       </resources>
      </configuration>
     </execution>
    </executions>
   </plugin>
  </plugins>
 </build>
</project>

Uses maven-frontend-plugin to install node and npm locally. Afterwards runs npm install to load all dependencies and builds the application with npm run build

maven-resources-plugin is used to copy the frontend build to target.
Important is to change <directory>${basedir}/build</directory>
to the location where your frontend code is located.

Connecting React app with Backend

If you encounter errors this is probably because of the same-origin-policy Same-origin policy.

You can fix this easily by adding "proxy": "http://localhost:8080/" to your package.json file which proxies the routes to your backend.

Example package.json

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-scripts": "1.1.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:8080/"
}

Create a .npmrc file

This is necessary if your company uses a private npm registry to prevent npm 404 errors when fetching dependencies

Example .npmrc

registry = http://<your.local.registry>/  
@babel:registry = https://registry.npmjs.org/
@types:registry = https://registry.npmjs.org/

Build and run application

You can now run maven clean package to build react-spring-example-0.0.1-SNAPSHOT.jar which resides in your target folder.

Run java -jar react-spring-example-0.0.1-SNAPSHOT.jar to start your application.

Go to localhost:8080 and hurrraii you are done !:>

Source Code

You can find an example project on github react-spring-example.

Thank you!

Sources:
Inspired me to write this.
Creating a new web app using create-react-app and Spring Boot

DEV Community: Thomas Zehe