Dev recipes: Integrate React frontend in a Java corporate environment
Tags: react, java, frontend
Published: 2018-09-25 13:34:16

---
title: Dev recipes: Integrate React frontend in a Java corporate environment
published: true
description: test 
tags: react,java,frontend
---

## 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](https://en.wikipedia.org/wiki/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

```javascript
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](https://github.com/tzehe/react-spring-example.git).

Thank you!

Sources:
Inspired me to write this.
[Creating a new web app using create-react-app and Spring Boot](http://matejsprogblog.blogspot.com/2017/06/creating-new-web-app-using-create-react.html)