How To Develop and Build React App With Java Backend

Learn How you develop and build with an example project

Bhargav Bachina
Jun 17, 2020 · 7 min read
Image for post
Image for post
Photo by Hello I'm Nik 🎞 on Unsplash

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

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.

Image for post
Image for post
React with Java

If you look at the above diagram all the web requests without the will go to React router. All the paths that contain 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.

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.

Image for post
Image for post
Example Project

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.

Image for post
Image for post
Network Calls

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 3000cd /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 3 with the help of a webpack dev server and the java server is running on port .

Image for post
Image for post
Development Environment

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.

Image for post
Image for post
Project Structure
Image for post
Image for post
Project Structure

If you look at the above project structure, all the React app resides under the folder and Java code resides under the folder. All the resources are under the folder 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 applications.

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

Image for post
Image for post
Spring Initializer

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 Below is the dependencies section of pom.xml.

pom.xml

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

controller and the main file

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

application.properties

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

data.sql

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.

Image for post
Image for post
h2 in-memory database

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

repository, service, and entity files

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
Image for post
Image for post
Starting the Spring Boot App

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

Image for post
Image for post
Java code running on port 8080

React App

Now the java code is running on port . Now it’s time to look at the React app. The entire React app is under the folder . 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.

UserService.js

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

App.js

Interaction between Angular and Java API

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

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.

package.json

With this in place, all the calls start with will be redirected to where the Java API running.

Once this is configured, you can run the React app on port and java API on 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.

Bachina Labs

Tutorials Ranging from Beginner guides to Advanced | Never…

Sign up for BB Tutorials & Thoughts

By Bachina Labs

Tutorials Ranging from Beginner guides to advanced on Frontend, Backend, Blockchain, Docker, k8s, DevOps, Cloud,AI, ML. Thank you for subscribing and let me know if you want me cover anything?  Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Bhargav Bachina

Written by

Software Architect — Sharing Experiences With Examples | Frontend, Backend, Blockchain, Docker, k8s, DevOps, Cloud,AI, ML | https://www.linkedin.com/in/bachina/

Bachina Labs

Tutorials Ranging from Beginner guides to Advanced | Never Stop Learning

Bhargav Bachina

Written by

Software Architect — Sharing Experiences With Examples | Frontend, Backend, Blockchain, Docker, k8s, DevOps, Cloud,AI, ML | https://www.linkedin.com/in/bachina/

Bachina Labs

Tutorials Ranging from Beginner guides to Advanced | Never Stop Learning

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store