Last updated: 2026-09-19

Integrating React with Spring Boot

React is the most popular frontend framework for developing single page applications (SPA). React can be combined perfectly with a Spring Boot app, where Spring Boot provides the backend with a REST API and React takes care of the frontend. What setup is required to combine these two technologies in the best possible way?

Using Bootify, Spring Boot applications in the current version 4.1.1 can be created online directly in the browser (start project). React 19 together with Bootstrap or Tailwind CSS can be selected as the frontend in order to have the setup described below directly available.

Backend adjustments

Let's assume we have created an empty Spring Boot application in Bootify and not selected any frontend stack. What customizations do we need to make in our backend first?

Similar to the integration with Angular, our application requires a special forward so that the index.html is served for all URLs that are not relevant for the backend. This allows our React client to take control and render the correct content depending on the given URL.

Serve index.html for all URLs relevant for React

Later during development, we will work with the DevServer under port 3000, while our backend runs under port 8080. For this reason, we also need a CORS exception, which must only be active under the local profile.

CORS exception for making API calls with the DevServer

To integrate the final JavaScript and CSS files into our build process, we need the frontend-maven-plugin for Maven or the gradle-node-plugin for Gradle. The plugin downloads the configured Node.js version, installs the dependencies and runs the production frontend build as part of Maven or Gradle.

React integration

Let's now take a look at the actual browser client. In the past, there was the helper create-react-app for using React as a library, but this is now officially deprecated. A small explicit Vite configuration provides the development server and production build without depending on a framework around React.

Our client code is stored under src/main/webapp to fit well into our existing code structure. Vite uses the index.html in this directory as its entry point, processes TypeScript with the React SWC plugin and copies public assets such as favicon.ico. Our vite.config.mts may look like this:

Vite config for React as a library

Vite provides SPA fallback and hot module replacement during development. The tsconfig.json is still the source of truth for TypeScript and path aliases. The production script should run tsc --noEmit before vite build, so type errors fail the build instead of being hidden by the fast transpilation step.

Client environment variables use Vite's standard VITE_ prefix. For example, .env.development can define VITE_API_PATH=http://localhost:8080, which is then available as import.meta.env.VITE_API_PATH. The production .env uses an empty path so requests target the same origin as the packaged Spring Boot application.

Webpack can still be used with the same React source code if an existing project or team prefers it. In Bootify this is an explicit Build tool choice; the manual configuration is described in Using Webpack with Spring Boot.

Additional libraries

In order to provide the functionality for a typical web application with React, additional libraries should be included. The library react-router takes care of the routing. We rely on the RoutingProvider here in order to use the hooks in our components.

Our simple routes.tsx

The handling and validation of forms is taken care of by React Hook Form together with yup. The method setYupDefaults() adds default validation messages and also a custom method emptyToNull(), so that the user input is trimmed and transformed to null if empty - behaving similar to our Java backend. A simple component could look like the following.

function getSchema() {
  setYupDefaults();
  return yup.object({
    name: yup.string().emptyToNull().max(255).required(),
    price: yup.string().emptyToNull().numeric(10, 2),
  });
}

export default function CarAdd() {
  const { t } = useTranslation();
  useDocumentTitle(t('car.add.headline'));

const navigate = useNavigate();

const useFormResult = useForm({
    resolver: yupResolver(getSchema()),
  });

return (<>
    <div className="d-flex flex-wrap mb-4">
      <h1 className="flex-grow-1">{t('car.add.headline')}</h1>
      <div>
        <Link to="/cars" className="btn btn-secondary">{t('car.add.back')}</Link>
      </div>
    </div>
    <form onSubmit={useFormResult.handleSubmit(createCar)} noValidate>
      <InputRow useFormResult={useFormResult} object="car" field="name" required={true} />
      <InputRow useFormResult={useFormResult} object="car" field="price" />
      <input type="submit" value={t('car.add.headline')} className="btn btn-primary mt-4" />
    </form>
  </>);
};

Adding a car in React

Calls to the REST API of our Spring Boot backend are handled by axios. For translations, we use react-i18next with its useTranslation() hook, whereby the actual texts are stored in translations.json.

Testing and starting

Our overall setup should also include a way to test our components. For this we use jest together with react-testing-library, for which we need the files jest.config.js and jest.setup.tsx. A simple test could now look like this, which is very straightforward thanks to the prepared setup.

A simple test of our Home component

Our packages.json should provide three scripts for us.

npm run build is directly integrated into the build process of our Spring Boot application
npm run devserver is used for local development
npm run test is running our tests which we have just defined

All files with the complete setup can be reviewed in a project in Bootify by selecting React as the frontend and Vite or Webpack as the build tool - available in the Free plan without registration. The Professional plan offers additional features such as the Spring Security setup for JWT or Keycloak.

Start Project
No registration required

‹

Setting the page title with Angular

Spring Boot CRUD Generator

›

Create new account

Log in with existing account

Reset your password

Integrating React with Spring Boot

Backend adjustments

React integration

Additional libraries

Testing and starting

General error