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
Top comments (0)