Last updated: 2025-02-21

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 3.4.3 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. All the details on their setup are available in this article.

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. Our application should therefore provide the webpack configuration with all scripts and libraries required for development.

Our client code is stored under src/main/webapp to fit well into our existing code structure. In this article the general setup of webpack is described in detail. There are a number of very useful enhancements for the use of React:

the plugin dotenv-webpack allows us to store environment-specific parameters in the files .env and .env.development - here we specify that our API is accessible under localhost:8080 during development
the plugin html-webpack-plugin extends a given index.html with the output scripts from webpack
the plugin copy-webpack-plugin allows specifying an asset folder whose contents are publicly available in the client (e.g. favicon.ico)

Our webpack.config.js may then look like this:

module.exports = (env, argv) => ({
  entry: 'index.tsx',
  output: {
    path: path.resolve(__dirname, './build/resources/main/static'),
    filename: 'js/bundle.js',
    publicPath: '/'
  },
  devtool: argv.mode === 'production' ? false : 'eval-source-map',
  performance: {
    maxEntrypointSize: 976000,
    maxAssetSize: 976000
  },
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin(),
      new CssMinimizerPlugin()
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/bundle.css'
    }),
    new Dotenv({
      path: argv.mode === 'production' ? '.env' : '.env.development'
    }),
    new HtmlWebpackPlugin({
      template: './src/main/webapp/index.html'
    }),
    new CopyWebpackPlugin({
      patterns: [{
        from: './src/main/webapp/public'
      }],
    }),
    new WarningsToErrorsPlugin()
  ],
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: ['ts-loader']
      },
      {
        test: /\.scss$/,
        use: [
          argv.mode === 'production' ? MiniCssExtractPlugin.loader : 'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              sourceMap: true
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  require('autoprefixer')
                ]
              },
              sourceMap: true
            }
          },
          {
            loader: 'sass-loader',
            options: { sourceMap: true }
          }
        ]
      },
      {
        test: /\.(woff2|woff|ttf|png|jpg|jpeg|gif|svg|webp)$/,
        type: 'asset'
      }
    ]
  },
  resolve: {
    plugins: [new TsconfigPathsPlugin({})],
    extensions: ['.js', '.jsx', '.ts', '.tsx', '.json']
  },
  devServer: {
    port: 3000,
    compress: true,
    historyApiFallback: {
      disableDotRule: true
    },
    hot: true,
    static: false,
    watchFiles: [
      'src/main/webapp/**',
    ]
  }
});

Webpack config for React as library

For the DevServer, historyApiFallback should be activated together with disableDotRule so that as many pages as possible can be displayed correctly as a 404 page using the client. Since we process Typescript with the help of ts-loader, we also need a tsconfig.json. The jsx setting should be set to react.

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 for which React was selected as the frontend stack - 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