https://github.com/itzg/spring-boot-with-reactjs
https://github.com/itzg/spring-boot-with-reactjs
Last synced: 28 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/itzg/spring-boot-with-reactjs
- Owner: itzg
- Created: 2021-06-12T02:11:26.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2021-06-12T02:11:47.000Z (about 5 years ago)
- Last Synced: 2026-01-20T13:44:29.447Z (6 months ago)
- Language: JavaScript
- Size: 401 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
This is a sample project that goes along with [my Medium article](https://medium.com/@itzgeoff/including-react-in-your-spring-boot-maven-build-ae3b8f8826e) that shows how to build a [ReactJS](https://reactjs.org/) UI and Spring Boot backend with Maven. [This Spring Guide](https://spring.io/guides/tutorials/react-and-spring-data-rest/) provides a similar description of a hybrid technology/build.
## Build
To build a jar that includes the production build of the ReactJS code, run
```shell
./mvnw package
```
## Bootstrapping your own project like this one
### Spring Boot + Maven content
Initialize your project with [Spring Initializr](https://start.spring.io/) or the integration thereof in your favorite IDE.
### ReactJS module setup
From a terminal, go into the `src/main` directory of this project and use [create-react-app](https://create-react-app.dev/) to bootstrap the ReactJS content:
```shell
npx create-react-app ui
```
In the created `ui` directory, create the file `.env` with the content
```
BUILD_PATH = ../../../target/classes/public
```
### Frontend Maven Plugin setup
In the `pom.xml` add the following two properties where `node.version` should be changed to the desired NodeJS version:
```xml
${project.basedir}/src/main/ui
16.1.0
```
In the build->plugins section of the `pom.xml` add [the frontend maven plugin](https://github.com/eirslett/frontend-maven-plugin) with the version updated to the latest:
```xml
frontend-maven-plugin
com.github.eirslett
1.12.0
install node and npm
install-node-and-npm
react test
npm
test
test
${ui.directory}
true
react build
npm
prepare-package
run build
${ui.directory}
v${node.version}
${project.build.directory}
```