DEV Community

Thomas Zehe
Thomas Zehe

Posted on

Dev recipes: Integrate React frontend in a Java corporate environment

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!


Add frontend-maven-plugin to your pom.xml

Example pom.xml

  <?xml version="1.0" encoding="UTF-8"?>
<project xmlns="" xmlns:xsi=""



  <relativePath/> <!-- lookup parent from repository -->




      1. used for local installation of node and npm
      2. to install dependencies with npm install
      3. building the application
      <id>Install node and npm locally to the project</id>
      <id>npm install</id>
      <id>Build frontend</id>
       <arguments>run build</arguments>
      <id>Copy frontend build to target</id>
Enter fullscreen mode Exit fullscreen mode

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/"
Enter fullscreen mode Exit fullscreen mode

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 =
@types:registry =
Enter fullscreen mode Exit fullscreen mode

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!

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

Top comments (0)