How To Develop and Build React App With Java Backend

Learn How you develop and build 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 NodeJS 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.

In this post, we will see the details and implementation with Java. We will go through step by step with an example.

• Introduction
• Prerequisites
• Example Project
• How To Build and Develop The Project
• How To Build For Production
• Summary
• Conclusion

Introduction

React is a javascript library for building web apps and it doesn’t load itself in the browser. We need some kind of mechanism that loads the index.html (single page) of React with all the dependencies(CSS and js files) in the browser. In this case, we are using java as the webserver which loads React assets and accepts any API calls from the React app.

If you look at the above diagram all the web requests without the /api will go to React router. All the paths that contain /api will be handled by the Apache Tomcat container.

Prerequisites

There are some prerequisites for this article. You need to have java installed on your laptop and how http works. If you want to practice and run this on your laptop you need to have these on your laptop.

• Java
• Create React App
• VSCode
• Eclipse IDE
• react-bootstrap
• Maven

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.

As you add users we are making an API call to the Java server to store them and get the same data from the server when we retrieve them. You can see network calls in the following video.

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 and Develop The Project

Usually, the way you develop and the way you build and run in production are completely different. Thatswhy, I would like to define two phases: Development phase and Production phase.

In the development phase, we run the java server and the React app on completely different ports. It’s easier and faster to develop that way. If you look at the following diagram 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.

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.

If you look at the above project structure, all the React app resides under the src/main/ui folder and Java code resides under the src/main/java folder. All the resources are under the folder /src/main/resources such as properties, static assets, etc

Java API

We use spring boot and a lot of other tools such as Spring Devtools, Spring Actuator, etc under the spring umbrella. Nowadays almost every application has spring boot and it is an open-source Java-based framework used to create a micro Service. It is developed by the Pivotal Team and is used to build stand-alone and production-ready spring applications.

We start with Spring initializr and select all the dependencies and generate the zip file.

Once you import the zip file in the eclipse or any other IDE as a Maven project you can see all the dependencies in the pom.xml. Below is the dependencies section of pom.xml.

Here are the spring boot file and the controller with two routes one with a GET request and another is POST request.

Configure H2 Database

This H2 Database is for development only. When you build this project for production you can replace it with any database of your choice. You can run this database standalone without your application. We will see how we can configure with spring boot.

First, we need to add some properties to application.properties file under /src/main/resources

Second, add the below SQL file under the same location.

Third, start the application, and spring boot creates this table on startup. Once the application is started you can go to this URL http://localhost:8080/h2-console and access the database on the web browser. Make sure you have the same JDBC URL, username, and password as in the properties file.

Let’s add the repository files, service files, and entity classes as below and start the spring boot app.

You can start the application in two ways: you can right-click on the UsersApplication and run it as a java application or do the following steps.

// mvn install
mvn clean install

// run the app
java -jar target/<repo>.war

Finally, you can list all the users with this endpoint http://localhost:8080/api/users.

React App

Now the java code is running on port 8080. Now it’s time to look at the React app. The entire React app is under the folder src/main/ui. You can create with this command npx create-react-app ui. I am not going to put all the files here you can look at the entire files in the above Github link or here.

Let’s see some important files here. Here is the service file which calls Java API.

Here is the app component which subscribes to these calls and gets the data from the API.

Interaction between Angular and Java API

In the development phase, the React app is running on port 3000 with the help of a create-react-app and Java API running on port 8080.

There should be some interaction between these two. We can proxy all the API calls to Java API. Create-react-app provides some inbuilt functionality and to tell the development server to proxy any unknown requests to your API server in development, add a proxy field to your package.json of the React. Have a look at the below package.json below. Remember you need to put this in the React UI package.json file.

With this in place, all the calls start with /api will be redirected to http://localhost:8080 where the Java API running.

Once this is configured, you can run the React app on port 3000 and java API on 8080 still make them work together.

// java API (Terminal 1)
mvn clean install
java -jar target/<war file name>

// React app (Terminal 2)
cd src/mamin/ui
npm start

How To Build For Production

As you have seen above, we run the React and Java server on different ports in the development phase. But, when you build the app for production you need to pack your React code with Java and run it on one port. We can use the maven plugin and gulp to package the application for production.

How To Build React with Java Backend For Production

Summary

• There are so many ways we can build React apps and ship them for production.
• One way is to build React with Java.
• In the development phase, we can run React and Java on separate ports.
• The interaction between these two happens with proxying all the calls to API.
• 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 can package the application for production with a maven plugin and gulp.

Conclusion

This is one way of building and shipping React apps. This is really useful when you want to do server-side rendering or you need to do some processing. In future posts, I will discuss more on building for production and deploying strategies.