Summary

The article provides a guide on building a React application with a Java backend for production deployment, including detailed steps and project structure.

Abstract

The article "How To Build React with Java Backend For Production" offers a comprehensive step-by-step guide for integrating a React frontend with a Java backend, ensuring the application is ready for production. It begins by acknowledging the various approaches to building React apps and emphasizes the importance of serving static content through a Java backend. The author outlines the prerequisites, including familiarity with React and Java development, and references a previous article for foundational knowledge. An example project is presented, complete with a GitHub repository for readers to clone and run. The guide delves into the project structure, emphasizing the separation of Java and React codebases for clean architecture. It explains how to build the application for production, which involves packaging both the React and Java code into a WAR file for deployment in a Tomcat container, contrasting with the separate port configuration used during development. The article highlights the use of Maven plugins, such as frontend-maven-plugin and exec-maven-plugin, to compile React code and manage asset placement. It concludes with a summary of the process and the benefits of this approach, particularly for server-side rendering and server-side processing.

Opinions

The author believes that serving React applications with a Java backend is a viable method for production environments.
Separation of concerns is important, as evidenced by the recommendation to maintain separate folders for Java and React codebases.
The use of Maven plugins is advocated for streamlining the build process and ensuring that the React application is correctly integrated with the Java backend.
The article suggests that this method of deployment is particularly useful for applications that require server-side rendering or server-side processing.
Cloning and running the provided example project is encouraged as a practical learning tool.
The author implies that understanding the entire build process, from development to production, is crucial for developers working with React and Java.

How To Build React with Java Backend For Production

A step by step guide with an example project

There are so many ways we can build React apps and ship for production. One way is to build React with or Java and another way is to build the React and serve that static content with NGINX web server. With Java we have to deal with the server code as well, for example, you need to load index.html page with java controller.

In this post, we will see the details about building a React app with Java Backend for production. We will go through step by step with an example.

Prerequisites
Example Project
How To Build For Production
Summary
Conclusion

Prerequisites

I have written an article on how to build and develop a React app with Java Backend. If you are not familiar with it and go through the whole process here is the article.

How To Develop and Build React App With Java Backend

Example Project

This is a simple project which demonstrates developing and running React application with Java. We have a simple app in which we can add users, count, and display them at the side, and retrieve them whenever you want.

Here is a Github link to this project. You can clone it and run it on your machine.

// clone the project
git clone https://github.com/bbachi/react-java-example.git

// Run React on port 3000
cd /src/main/ui
npm install
npm start

// Run Java Code on 8080
mvn clean install
java -jar target/users-0.0.2-SNAPSHOT.jar

How To Build For Production

Usually, the way you develop and the way you build and run in production are completely different. As you have seen in the prerequisite project, in the development phase, we run the java server and the React app on completely different ports. The React app is running on port 3000 with the help of a webpack dev server and the java server is running on port 8080.

But in the production, we package the whole application into a war file and deploy that on the tomcat container which usually runs on the port 8080.

Project Structure

Let’s understand the project structure for this project. We need to have two completely different folders for java and react. It’s always best practice to have completely different folders for each one. In this way, you will have a clean architecture or any other problems regarding merging any files.

The only thing that is different between development and production phases is that all the compilation React code goes to this folder /src/main/resources/static. Whatever static assets you put under the static folder you can directly redirect from your Java Controller as below.

Now we need a maven plugin to compile the React code as part of the build process. We have a plugin called frontend-maven-plugin that can be used to compile all the React source code. Here is the link to know more about this plugin.

There is another plugin called exec-maven-plugin which executes commands in our case we are running gulp to place all the compiled source code from folder /src/main/ui/build to /src/main/resources/static.

Here is the gulpfile.js that is used in this project. What it does copy all the compiled React code to the static folder.

We need to make sure you have these plugins included as part of the pom.xml with all the necessary executions.

When you run the build you can directly access the whole application on http://localhost:8080/.

// build the project
mvn clean install

// Run the application
java -jar target/users-0.0.2-SNAPSHOT.jar

Summary

There are so many ways we can build React apps and ship for production.
One way is to build React with Java.
In the development phase, we can run React and Java on separate ports.
In the production phase, we packed the entire React source code and Java code into a deployable war file.
In the production phase, you can build the React app and put all the assets in the build folder and load it with the java code.
We should use two maven plugins: frontend-maven-plugin which compiles angular code and put it in the dist folder, exec-maven-plugin which runs gulp file to place the compiled angular code to the appropriate location src/main/resources/static.
We use gulp to copy all the React UI assets from the /src/main/ui/build to /src/main/resources/static

Conclusion

This is one way of shipping React apps. This method is really useful when you want to do server-side rendering or you need to do some processing on the server-side.