bygaga63 / spring-boot-react-sample

Example of spring-boot application serving a reactjs application

Example spring-boot backend and react frontend

Usually frontend and java backend developers are used to their tools:

• frontend developers often uses npm/yarn + webpack and developer in javascript/typescript.
• java backend developers often uses maven/gradle and develop in any JVM languages.

In this scenario we will explore a typical use case where frontend developers will develop a web application that will use some REST services exposed by a JVM backend application.

In a microservice world in a cloud environment like Kubernetes, it's more likely that the frontend server will be developed in nodejs and proxy the API calls to the JVM backend.

But if you need to integrate with some spring-cloud and spring-cloud-netflix technologies such as Eureka and Spring cloud config, it's easier to deploy your react web application in a Spring Boot application as this integration comes for free.

This example will show you how to integrate a React web application and JVM backend application while using both the tools that frontend and backend developers used to.

---

NOTE

Do not hesitate to have a look at JHipster project which comes a awesome and more advanced integration between Angular (and soon React) and Spring Boot.

---

Root project

Initialize a gradle project with gradle wrapper init command

Backend

Go to spring-boot starter and fill the form to create your project.

Here I choose:

• gradle project
• kotlin
• group id: com.powple
• artifact id: backend
• dependencies: Web

Then create a web service that will be used by the frontend: GreetingControllger

Add in settings.gradle:

include 'backend'

Options

Caching static resources

Add spring.resources.cache-period: 126227704 in application.yml to enable caching headers for 4 years.

Frontend

We will create a new react application based on create-react-app utility:

npx create-react-app frontend

Then rename extension of file containing JSX from .js to .jsx to avoid IDE conflict with javascript code style.

Then change the react application to use that greeting service, see:

• App.jsx
• GreetingService.js

---

NOTE

The greeting service try to reach the API as it was exposed locally: /api/greetings. In development, we will request the development web server to act as a proxy in front our backend. In production, the react application will be served by Spring Boot so the API is actually exposed locally.

---

Add in settings.gradle:

include 'backend'

Development

In development, we will to our Webpack development server to proxy all unhandled request to the backend API.

We can do so by adding in package.json:

{
  //...
  "proxy": "http://localhost:8080"
}

You can find more information here

Production

We need to package the build result of yarn build command to the Spring Boot application.

In order to do that, we will use the gradle-node-plugin to allow us to run yarn/npm tasks from gradle so we can make build tasks from the backend to depends on frontend gradle assemble task.

1. First, add in settings.gradle before backend:

include 'frontend'

2. Map yarn/npm tasks to gradle tasks in builg.gradle in frontend.

3. Make backend gradle build tasks depending on frontend gradle assemble tasks in builg.gradle in backend and copy the frontend build output into /static folder in the jar file. More information on how spring-boot can serve static content

That's it! You can now serve your react application from a Spring Boot application using REST services in kotlin or any JVM languages.