How to deploy SpringBoot with ReactJs using PCF.

GitHub Link: https://github.com/PraseelaRadhakrishnan/Spring-Boot-ReactJS

Technologies Used:

· Java 1.8

· Spring Boot for API

· Spring Boot JPA.

· Swagger UI.

· Java Docs.

· ReactJS

· Axioms

· PCF

· MySQL for Database

Steps to follow:

· Setting up Spring Boot Rest Api for basic CRUD operations

· Setting up MySQL database

· Installing React and setting up the frontend

· Make executable jar build of the project

· Deploying the application

· Verifying the deployment

We will use a step by step approach to be creating the full stack application.

• Create a Spring Boot Application with Spring Boot Initializer
• Create a React application using Create React App
• Create the Retrieve Person details REST API and Enhance the React Front end to retrieve the Person using the axios framework
• Add feature to delete a Person in React front end and Spring Boot REST API
• Add functionality to update Person details in React front end and Spring Boot REST API
• Add feature to create a Person in React front end and Spring Boot REST API

Step 1: Setting up Spring Boot Rest API for basic CRUD operations.

We require spring Boot, MySQL and spring web for this project. Below is the final spring boot project structure that we will be building.

· Group: com.demo.in

· Artifact: SpringBoot_ReactJs

· Dependencies: Web, DevTools, MySql, Jpa, Springfox-Swagger2, Springfox-Swagger-ui

Project Structure

Backend endpoints:

POST: http://localhost:8080/Person

GET: http://localhost:8080/Person

GET: http://localhost:8080/Person/{id}

PUT: http://localhost:8080/Person/{id}

Delete: http://localhost:8080/Person/{id}

Sample Request:

{

“name”: “Aadhi”,

“age”: 10,

“address”: “Chennai”,

“email”: “aadhi@email.com”

}

Step 2: Setting up MySQL database:

USE DATABASE <your-db-name>;

CREATE TABLE `person` (

`id` INT (11) NOT NULL,

`address` VARCHAR (255) NULL DEFAULT NULL,

`age` INT (11) NULL DEFAULT NULL,

`email` VARCHAR (255) NULL DEFAULT NULL,

`name` VARCHAR (255) NULL DEFAULT NULL,

PRIMARY KEY (`id`)

);

insert into ` person ` (`id`, `address`, `age`, `email`,`name`) values('1','Chennai','10','abc@gmail.com','Aadhi');

Step 3: Installing React and setting up the frontend

Open the directory you were working on and use create-react-app to create a new react project

npx create-react-app sample-react

After the creation is successful, switch into the folder and start the app.

cd sample-react
npm start

I’m going to be installing two packages: React Router and Material UI. So, we’ll just install them.

npm install react-router
npm install @material-ui/core
npm install @material-ui/icons
npm install react-scripts
npm add axios
npm add react-router-dom
To be able to enhance the React Application to consume the REST API, we would need to

• Create an Application Component — to represent the structure of the complete application and include it in App.js — ListPerson.js, AddPerson.js, EditPerson.js.
• Add the frameworks need to call the REST API — axios and support routing — react-router-dom
• Create a view component for showing a list of person details and include it in the Application Component — ListPerson.js
• Invoking Retrieve Person REST API from React Component — To enable this we will create a service to call the REST API using the axios framework — ApiService.js. ListPerson.js will make use of ApiService.js.

Frontend Project Structure

Once we created the frontend stuffs and call the backend API through http://localhost:8080.

we’ll do npm start on the frontend website and with the backend, we’ll run as JAVA application.

Sure enough, the application should be working perfectly with API calls happening,

D:\ReactJS\sample-react> npm start
Compiled successfully!

You can now view sample-react in the browser.

Local:            http://localhost:3000
On Your Network:  http://192.168.56.1:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
When you launch up the application in the browser at http://localhost:3000/, you would see the following User Details on the screen.

User Application

We are defining a Router around all the components and configuring paths to each of them.

• http://localhost:3000/ takes you to home page
• http://localhost:3000/persons takes you to person details listing page
• http://localhost:3000/add-person/ takes you to create a person details page
• http://localhost:3000/edit-person/ takes you to edit a person details page

Step 4: Make executable jar build to configure ReactJs with SpringBoot

Getting build from frontend (React) as to execute this command with latest changes.

npm run build

Build information

You will get the Production build it will be placed in your package under build folder like this.
Copy the production build of frontend and paste it to /src/main/app/ (build_information).
To build and package your React app with Maven, you can use the frontend-maven-plugin and Maven’s profiles to activate it. Add properties for versions, and a <plugins> section to your pom.xml.

Added Plugin for frontend

All set let’s build a fat jar file for React and Spring Boot.

We’ll first remove the files generated at build-time from last time, with maven clean. Once done, select Run As -> Java Application and head to http://localhost:8080/ (default) to check if the app is running properly. You can check your fat jar file generated inside the target folder of your app.

Frontend jar added to backend

Step 5: Deploying the application

For my cases, I’m going to deploy the latest jar in PCF. I can already create PCF account.

Open the command terminal and use the following command

cf login

It will ask for Cloud Foundry API. Enter The following API value-

https://api.run.pivotal.io

And then you will enter your credentials. Go to the project root location and using the following command push the SpringBoot_React jar file to PCF for deployment.

cf push SpringBoot-ReactJS -p /SpringBoot_ReactJs/target/SpringBoot_ReactJs-0.0.1-SNAPSHOT.jar

We have pushed the spring boot jar file to PCF and deploy it for us.

If we now go to the PWS web console, we will see that there is one application running in our development space.

Select the application and we will be taken to another page which has the route on which this application has been deployed.

Step 6: Verifying the deployment

Open this URL-