I'm following the documentation is https://spring.io/guides/tutorials/react-and-spring-data-rest/ to build a React app that uses Spring. The spring part was fine until it gets to the part where recommends to install the node and npm modules with a plugin. I have the problem that this plugin does not do what it supposed to do. I've checked the documentation and it establish some executions (I don't really know how the plugins work). I introduce those executions, but I still can't see the React app render in the brower at localhost:8080.
This is the plugin that they use in the spring documentation. Just like that. I hope anybody who has followed this tutorial could help me.
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
</plugin>
You can run React Frontend and SpringBoot Backend on the same port and Package them as a single artifact !!
Here is the Github link of the demo project that I am going to
explain here
Spring Boot can serve static content from src/main/resources/static folder. We will exploit the above mentioned feature of Spring Boot to serve the single page of the react project. We will serve a html page from the static folder in the target directory, not in the source directory.
The Project structure-
First, create a spring boot project with https://start.spring.io. Add the Web dependency. Set the groupId and artifactId to whatever you want. Generate the project and unzip it into your project directory.
Or, if you are using Spring Tools Suite you can simply click
File->New->Spring Starter Project and mention the required details to create a spring boot project.
The frontend folder inside src/main should have your react application build using create-react-app.
So, there are two steps-
create a production build of the frontend.
copy the production build into ${target/classes/}.
We we will use two maven plugins and Thymleaf for that.
frontend-maven-plugin for step 1.
maven-resources-plugin for step 2.
For frontend-maven-plugin at Step 1-- If you closely look at the pom.xml there I have mentioned the src directroy from where frontend-maven-plugin will take the files, create the production build and place the contents inside the output directory mentioned(inside src/main/frontend/build).
<workingDirectory>${frontend-src-dir}</workingDirectory>
<installDirectory>${project.build.directory}</installDirectory>
For maven-resources-plugin at step 2-- It will take the production build that was just created by frontend-maven-plugin and place it inside your root directory then target/classes/static.
Then we will use Thymleaf to serve the static content from the target/classes/static using a rest endpoint in the controller. Or else you have to type in the name of the html file, like http://localhost:8080/index.html
Your pom.xml should look like this-
<?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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.4.2</version>
<relativePath /> <!-- lookup parent from repository -->
</parent>
<groupId>com.springreact</groupId>
<artifactId>demo</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>demo</name>
<description>Run React Frontend and SpringBoot Backend on the same port.</description>
<properties>
<java.version>1.8</java.version>
<frontend-src-dir>${project.basedir}/src/main/frontend</frontend-src-dir>
<node.version>v14.15.4</node.version>
<yarn.version>v1.16.0</yarn.version>
<frontend-maven-plugin.version>1.7.6</frontend-maven-plugin.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<excludes>
<exclude>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</exclude>
</excludes>
</configuration>
</plugin>
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>${frontend-maven-plugin.version}</version>
<configuration>
<nodeVersion>${node.version}</nodeVersion>
<yarnVersion>${yarn.version}</yarnVersion>
<workingDirectory>${frontend-src-dir}</workingDirectory>
<installDirectory>${project.build.directory}</installDirectory>
</configuration>
<executions>
<execution>
<id>install-frontend-tools</id>
<goals>
<goal>install-node-and-yarn</goal>
</goals>
</execution>
<execution>
<id>yarn-install</id>
<goals>
<goal>yarn</goal>
</goals>
<configuration>
<arguments>install</arguments>
</configuration>
</execution>
<execution>
<id>build-frontend</id>
<goals>
<goal>yarn</goal>
</goals>
<phase>prepare-package</phase>
<configuration>
<arguments>build</arguments>
</configuration>
</execution>
</executions>
</plugin>
<plugin>
<artifactId>maven-resources-plugin</artifactId>
<executions>
<execution>
<id>position-react-build</id>
<goals>
<goal>copy-resources</goal>
</goals>
<phase>prepare-package</phase>
<configuration>
<outputDirectory>${project.build.outputDirectory}/static</outputDirectory>
<resources>
<resource>
<directory>${frontend-src-dir}/build</directory>
<filtering>false</filtering>
</resource>
</resources>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
</build>
</project>
Here is the Controller code.
package com.springreact.demo.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.servlet.ModelAndView;
#Controller
public class IndexController {
#GetMapping("")
public ModelAndView home() {
ModelAndView mav=new ModelAndView("index");
return mav;
}
}
If you follow the above mentioned steps , you should see your React App being spun up on http://localhost:8080/.
If you still have some doubts then you can checkout the comprehensive blog that I have written on it. Here are the links of the blog on two different platforms, you can choose whichever you are comfortable with.
Dev Community- https://dev.to/arpan_banerjee7/run-react-frontend-and-springboot-backend-on-the-same-port-and-package-them-as-a-single-artifact-14pa
Medium- https://arpan-banerjee7.medium.com/run-react-frontend-and-springboot-backend-on-the-same-port-and-package-them-as-a-single-artifact-a790c9e10ac1
If your project structure looks like the following:
frontend/ -> React application
src/ -> Spring Boot application
You can bundle the React application with the frontend-maven-plugin with the following configuration:
<build>
<resources>
<resource>
<directory>${project.basedir}/frontend/build</directory>
<filtering>false</filtering>
<targetPath>public/</targetPath>
</resource>
<resource>
<directory>${project.basedir}/src/main/resources</directory>
<filtering>false</filtering>
</resource>
</resources>
<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.8.0</version>
<executions>
<execution>
<id>install node and npm</id>
<goals>
<goal>install-node-and-npm</goal>
</goals>
<phase>generate-resources</phase>
</execution>
<execution>
<id>npm install</id>
<goals>
<goal>npm</goal>
</goals>
<phase>generate-resources</phase>
<configuration>
<arguments>install</arguments>
</configuration>
</execution>
<execution>
<id>npm build</id>
<goals>
<goal>npm</goal>
</goals>
<phase>generate-resources</phase>
<configuration>
<environmentVariables>
<CI>true</CI>
</environmentVariables>
<arguments>run build</arguments>
</configuration>
</execution>
</executions>
<configuration>
<workingDirectory>frontend</workingDirectory>
<nodeVersion>v12.18.0</nodeVersion>
</configuration>
</plugin>
</plugins>
</build>
If your project structure differs, you have to adjust the workingDirectory and the first resources configuration and point it to your folder.
This plugin basically executes several npm commands to test and build your React application and with the resources configuration, you extend the standard directory to include inside your .jar. Your frontend application is then accessible at http://localhost:8080.
You can find a running example for this here.
I followed the same tutorial and stuck at the same point: the frontend-maven-plugin seems not working. In addition, the codebase that author provided looks not well organized to me, e.g. two pom.xml files, one in project root folder, the other in basic folder.
Here is what I figured out, and finally worked:
In pom.xml add the frontend-maven-plugin in plugins along with the scripts you want it to execute. Make sure you include the version tag and supply the latest version (you can find the version information in Maven Repository), otherwise the plugin won't be resolved.
<build>
<plugins>
<!-- For the sake of simplicity, -->
<!-- other plugins are omitted. -->
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>1.12.0</version>
<configuration>
<installDirectory>target</installDirectory>
</configuration>
<executions>
<execution>
<id>install node and npm</id>
<goals>
<goal>install-node-and-npm</goal>
</goals>
<configuration>
<nodeVersion>v14.17.3</nodeVersion>
<npmVersion>7.18.1</npmVersion>
</configuration>
</execution>
<execution>
<id>npm install</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>install</arguments>
</configuration>
</execution>
<execution>
<id>webpack build</id>
<goals>
<goal>webpack</goal>
</goals>
</execution>
</executions>
</plugin>
</plugins>
</build>
Create package.json file in the project root folder, i.e. same location as pom.xml and paste following content:
{
"name": "spring-data-rest-and-reactjs",
"version": "0.1.0",
"description": "Demo of ReactJS + Spring Data REST",
"repository": {
"type": "git",
"url": "git#github.com:spring-guides/tut-react-and-spring-data-rest.git"
},
"keywords": [
"rest",
"hateoas",
"spring",
"data",
"react"
],
"author": "Greg L. Turnquist",
"license": "Apache-2.0",
"bugs": {
"url": "https://github.com/spring-guides/tut-react-and-spring-data-rest/issues"
},
"homepage": "https://github.com/spring-guides/tut-react-and-spring-data-rest",
"dependencies": {
"react": "^16.5.2",
"react-dom": "^16.5.2",
"rest": "^1.3.1"
},
"scripts": {
"watch": "webpack --watch -d --output ./target/classes/static/built/bundle.js"
},
"devDependencies": {
"#babel/core": "^7.1.0",
"#babel/preset-env": "^7.1.0",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.2",
"webpack": "^4.19.1",
"webpack-cli": "^3.1.0"
}
}
Create webpack.config.js file in project root folder, i.e. the same location as pom.xml and paste following content:
var path = require('path');
module.exports = {
entry: './src/main/js/app.js',
devtool: 'sourcemaps',
cache: true,
mode: 'development',
output: {
path: __dirname,
filename: './src/main/resources/static/built/bundle.js'
},
module: {
rules: [
{
test: path.join(__dirname, '.'),
exclude: /(node_modules)/,
use: [{
loader: 'babel-loader',
options: {
presets: ["#babel/preset-env", "#babel/preset-react"]
}
}]
}
]
}
};
Copy client.js and the whole api folder in the same directory to your project. The app.js uses client.js which uses the two .js files in the api folder. You can find the source code of the three files in the tutorial repository.
Now you should have everything in order to make React work in this project. While depending on what IDE you're using, it may still "NOT WORK". Let me explain more about what I mean:
if you are using command line to run the project, then simply type ./mvnw spring-boot:run in the project root folder and it should work like a charm.
if you are using the little green triangle to run application in IntelliJ like me, you have to edit run/debug configuration in order to make it work; otherwise the application can run successfully but there is no bundle.js generated whatsoever:
First, open IntelliJ -> Run -> Edit Configurations
Secondly, click on the + button in Before Launch section and select Run Maven Goal
Thirdly, type generate-resources in command line and click OK. We choose this command as mentioned in frontend-maven-plugin git repo, if not sepecified, the goal is executed in generate-resources phase.
Finally, you can create a maven goal to clean everything before build. Here is what Before launch looks like:
Now click on the green triangle to run application and you will get the same result as mentioned in the tutorial (except there is no boarders in the employee list since we don't have the .css file).
Some final thoughts:
You add frontend-maven-plugin to use node and npm in your project.
You add package.json to install necessary JavaScript modules, e.g. React.js.
You add webpack.config.js to instruct webpack to transpile the javascript files into a single file named bundle.js and output it to the static folder of the project
You add many execution and goal tags in pom.xml to automate step 2 and 3.
You execute the maven goals to start the automation process.
I have two different part of the web application, that is a public site and admin site. And I want to create different independent react application for both of them. For the API I use Spring-Boot.
Can I do that in my case?
And what I need to add to the webpack.config.js file?
I tried to create one more HTML page and render to that application. But that does not work. Because one react application render only one time.
I expected to run two different react application using one API.
There are 2 main options:
Split up the 3 applications (spring-boot, react-public, react-admin) into separate repositories and deploy things separately as well.
Use 1 repo for all with a Maven multi-module build
I am going to assume from your question you want to do option 2.
In that case, create a structure like this:
+ project
| - backend-api
| - frontend-public
| - frontend-admin
The parent pom.xml should refer to the 3 modules:
<modules>
<module>backend-api</module>
<module>frontend-public</module>
<module>frontend-admin</module>
</modules>
Each of the modules should refer to the parent pom:
<parent>
<groupId>com.mycompany.myproject</groupId>
<artifactId>myproject</artifactId>
<version>0.0.1-SNAPSHOT</version>
</parent>
Your Spring Boot project will no longer be able to use the Spring Boot parent, so you need to import the BOM dependency:
<dependencyManagement>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-dependencies</artifactId>
<version>${spring.boot.version}</version>
<type>pom</type>
<scope>import</scope>
</dependency>
</dependencies>
</dependencyManagement>
In the frontend-* modules, you should create a zip file, that you can then pull into your Spring Boot module using the maven-dependency-plugin:
<plugin>
<artifactId>maven-dependency-plugin</artifactId>
<executions>
<execution>
<id>unzip-webapp-public</id>
<phase>process-resources</phase>
<goals>
<goal>unpack</goal>
</goals>
<configuration>
<artifactItems>
<artifactItem>
<groupId>com.mycompany.myproject</groupId>
<artifactId>frontend-public</artifactId>
<version>${project.parent.version}</version>
<classifier>distribution</classifier>
<type>zip</type>
</artifactItem>
</artifactItems>
<outputDirectory>${project.build.directory}/classes/static/public</outputDirectory>
</configuration>
</execution>
<execution>
<id>unzip-webapp-admin</id>
<phase>process-resources</phase>
<goals>
<goal>unpack</goal>
</goals>
<configuration>
<artifactItems>
<artifactItem>
<groupId>com.mycompany.myproject</groupId>
<artifactId>frontend-admin</artifactId>
<version>${project.parent.version}</version>
<classifier>distribution</classifier>
<type>zip</type>
</artifactItem>
</artifactItems>
<outputDirectory>${project.build.directory}/classes/static/admin</outputDirectory>
</configuration>
</execution>
</executions>
</plugin>
This will unzip the react applications to /static/public and /static/admin. As a result, Spring Boot will serve them at /public and /admin in your application.
For some reason my client needs my artifacts without version in their names (MyArtifact.jar instead of MyArtifact-1.23.345.jar)
Therefor I added this configuration to my parent pom:
<build>
<pluginManagement>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-jar-plugin</artifactId>
<version>3.0.2</version>
<configuration>
<finalName>${project.artifactId}</finalName>
</configuration>
</plugin>
</plugins>
</pluginManagement>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-jar-plugin</artifactId>
</plugin>
</plugins>
</build>
This works as expected, meaning that I get jars of the child projects without versions generated in target folder.
However.
One of my jars is an executable jar which depends on the others. Currently I have the maven-jar-plugin configured for that subproject:
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-dependency-plugin</artifactId>
<version>2.7</version>
<executions>
<execution>
<phase>compile</phase>
<goals>
<goal>build-classpath</goal>
</goals>
</execution>
</executions>
<configuration>
<fileSeparator>/</fileSeparator>
<pathSeparator>;</pathSeparator>
<outputProperty>bundle.classPath</outputProperty>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-jar-plugin</artifactId>
<configuration>
<archive>
<index>true</index>
<manifestEntries>
<Class-Path>${bundle.classPath}</Class-Path>
</manifestEntries>
</archive>
<finalName>${project.artifactId}</finalName>
</configuration>
</plugin>
</plugins>
</build>
The problem is that this generated classpath contains absolute paths to the artifacts on my PC.
Therefore I added the <prefix> tag to the configuration:
<configuration>
<prefix>lib</prefix>
<fileSeparator>/</fileSeparator>
<pathSeparator>;</pathSeparator>
<outputProperty>bundle.classPath</outputProperty>
</configuration>
But then the generated classpath includes the version numbers of the jars.
How can I omit the version numbers and the absolute paths in the classpath?
Problem is: I only want to remove Version numbers from my own artifacts, not from third party libs.
To remove the version from copied dependencies, you can use the stripVersion option of the maven-dependency-plugin.
In the aggregator pom use the dependency:copy-dependencies to copy your jars to some intermediate location.
For you internal dependencies use <stripVersion>true</stripVersion>.
For you 3rd party libraries use <stripVersion>false</stripVersion>.
You may in-/exclude artifacts based on the group id.
For more detail you may look here.
EDIT:
This is to explain how the finalname works.
finalName: This is the name of the bundled project when it is finally built
(sans the file extension, for example: my-project-1.0.jar). It defaults to
${artifactId}-${version}. The term "finalName" is kind of a misnomer,
however, as plugins that build the bundled project have every right to
ignore/modify this name (but they usually do NOT). For example, if the
maven-jar-plugin is configured to give a jar a classifier of test, then the
actual jar defined above will be built as my-project-1.0-test.jar.
Basically it includes almost always the version in your .jar.
In the version (2.6 >), in the <configuration> it allows you to specify the <fileNameMapping>no-version</fileNameMapping>.
The jar plugin alone is able to compute and write the manifest classpath.
This produces a working jar with the desired name
<build>
<finalName>${project.artifactId}</finalName>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-jar-plugin</artifactId>
<version>2.4</version>
<configuration>
<archive>
<index>true</index>
<manifest>
<addClasspath>true</addClasspath>
<classpathPrefix>lib/</classpathPrefix>
</manifest>
</archive>
</configuration>
</plugin>
</plugins>
</build>
I have Izpack installer which packs a pre-configured server and installs in target directory. This server is around 500Mb. Currently I have checked in this src/main/resources folder of installer maven project.But having this big server in git is making the git pulls very slow. So i am planning to keep this server as maven artifact in nexus and add its dependency to installer maven project. This way i can create a maven profile to pull this server from nexus on demand. I am yet to figure out how to copy this dependency to staging folder using a maven plugin(any help would be greatly appreciated). My question here, is it a right approach? or is there any better way to do this. Thanks in advance.
You can use the maven dependency plugin to copy a dependeny to a specific folder.
You can use it to either copy all dependencies or even unpack those dependencies.
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-dependency-plugin</artifactId>
<version>2.10</version>
<executions>
<execution>
<id>unpack</id>
<phase>package</phase>
<goals>
<goal>unpack</goal>
</goals>
<configuration>
<outputDirectory>${izpack.staging}/content/ninjolibs</outputDirectory>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
This is what i did. I uploaded wso2.zip to nexus as zip artifact and configured pom.xml of my installer module to use this dependency.
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-dependency-plugin</artifactId>
<version>2.10</version>
<executions>
<execution>
<id>copy-binaries</id>
<phase>prepare-package</phase>
<goals>
<goal>copy</goal>
</goals>
<configuration>
<artifactItems>
<artifactItem>
<groupId>org.wso2</groupId>
<artifactId>wso2is</artifactId>
<version>5.0.0</version>
<type>zip</type>
<overWrite>true</overWrite>
<outputDirectory>src/main/resources/wso2/binary</outputDirectory>
<destFileName>wso2is-5.0.0.zip</destFileName>
</artifactItem>
</artifactItems>
</configuration>
</execution>
</executions>
</plugin>
Basically I'm having to 2 maven modules and one should start the application by inherit the client source from the other one (because the client includes the EntryPoint).
Therefore I have 2 .gwt.xml files and to pom.xml files.
gwt.gwt.xml
<module>
<!-- Inherit the core Web Toolkit stuff. -->
<inherits name='com.google.gwt.user.User' />
<inherits name='org.fusesource.restygwt.RestyGWT' />
<!--Specify the app entry point class. -->
<entry-point class='com.myapp.admin.client.EntryPoint'/>
<source path='client'/>
<source path='rest'/>
<source path='consts'/>
</module>
web.gwt.xml
<!-- Inherit the core Web Toolkit stuff. -->
<inherits name='com.google.gwt.user.User' />
<inherits name='com.myapp.admin.gwt' />
POM client (gwt), packaging: jar
<plugins>
<plugin>
<artifactId>maven-source-plugin</artifactId>
<executions>
<execution>
<id>attach-sources</id>
<phase>verify</phase>
<goals>
<goal>jar-no-fork</goal>
</goals>
</execution>
</executions>
</plugin>
</plugins>
POM web, packaging: war
<!-- GWT Maven Plugin -->
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>gwt-maven-plugin</artifactId>
<executions>
<execution>
<goals>
<goal>compile</goal>
</goals>
</execution>
</executions>
<!-- Copy static web files before executing gwt:run -->
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
</plugin>
plus it includes a dependency with the gwt-module <classifier>sources</classifier>. I can compile my application without errors but I cannot run it because
[ERROR] [web] - Unable to find type 'com.myapp.admin.client.EntryPoint'
[ERROR] [web] - Hint: Check that the type name 'com.myapp.admin.client.EntryPoint' is really what you meant
[ERROR] [web] - Hint: Check that your classpath includes all required source roots
Which is reasonable because there is no source in the directory. but why is there no source ?
thanks for any help.
When using M2Eclipse with "resolve dependencies from the workspace", dependencies with a type different from jar (e.g. java-source) or a classifier all resolve to the target/classes of the Eclipse project, so you don't actually get the sources in your classpath.
AFAIK, Google Plugin for Eclipse takes the classpath from M2Eclipse, so you won't have the sources there. You need to edit the launch configuration to add the source directories (src/main/java and possibly others) of the projects you depend on to the classpath.