Create and Host a web application with React, SpringBoot, MongoDB and Heroku - Part 2

Hello guys! Are you doing well? This is the second part of my article written on deploying a web application developed using React JS and Java(SpringBoot). In the previous article, we have created the REST API with Java and deployed it into Heroku platform. So now we have to complete the front end part with React JS.

Previous article - Part 1
https://salitha94.blogspot.com/2019/03/create-and-host-web-app-with-react-springboot-mongodb-heroku-part1.html

In this previous article, I have used an already created API from my GitHub since I had already explained it in a earlier article. So, here also I will use another project from my GitHub to setup front-end.

Project Source - https://github.com/SalithaUCSC/MERN-Stack-UserBook
Article - https://salitha94.blogspot.com/2019/01/create-simple-mern-stack-application.html

Step 1 - Download the needed files

First you need to download this project and extract. There is a folder called client in this project folder. It has all the files we need. Take out this folder separately as a separate project. If you want to change the name, edit the package.json file and hit npm update to update the changes. Open this folder.

Step 2 - Edit the first component to be matched with API

Within src/components folder, we can see all the components we are going to use. Among them, Users component is the file we are looking at first. Open it in a text editor.
Path - 
https://github.com/SalithaUCSC/MERN-Stack-UserBook/blob/master/client/src/components/Users.js

Normally in React we do Ajax calls with Axios to fetch data from an API. So, you can see the axios function implemented for a GET request. There I call to an endpoint like this.

http://localhost:4000/api/users

This is a local endpoint which was running on my laptop. So we have to change it now. We have already deployed a REST API matches for this on Heroku. Get that url and insert here. All the endpoints will be same as local ones. Only the domain will be the difference. In my case, deployed REST API endpoints will be like this.
https://javaspring-api.herokuapp.com/api/users

/api/users is reserved for fetching all the users from database hosted in mLab. So I will replace http://localhost:4000/api/users with this Heroku URL.

Then replace all _id values with id...  That underscore mark is not needed. This is a MUST!

NOTE: I created this UI earlier for a NODE JS back-end. So It takes ID as _id from mongo database. But now I connect this front-end with JAVA back-end. Java doesn't need that..It takes the record ID as id.

You can test out whether your API is giving the results you want or not. Run the react app locally with internet connection!

Before running this you can confirm your installed dependencies by hitting a npm install on terminal. Then all the missing ones also will be installed.

Step 3 - Replace the API endpoints in all the components

Now we have to replace all the endpoints in the project.
1. Open User component and modify it.
Path -
https://github.com/SalithaUCSC/MERN-Stack-UserBook/blob/master/client/src/components/User.js
This component also will the same functionality. Replace http://localhost:4000/api/users with this Heroku URL ;
https://javaspring-api.herokuapp.com/api/users

2. Open AddUser component and modify it.
Path -
https://github.com/SalithaUCSC/MERN-Stack-UserBook/blob/master/client/src/components/AddUser.js
This component also will the same functionality. Replace http://localhost:4000/api/users with this Heroku URL ;
https://javaspring-api.herokuapp.com/api/users

3. Open EditUser component and modify it.
Path -
https://github.com/SalithaUCSC/MERN-Stack-UserBook/blob/master/client/src/components/EditUser.js
This component also will the same functionality. Replace http://localhost:4000/api/users with this Heroku URL ;
https://javaspring-api.herokuapp.com/api/users

Step 4 - Deploy to Heroku

Since our application endpoints have been already established, we can now deploy the application. Go to http://heroku.com/ and login. Then open your terminal. In think you have already installed Heroku CLI. If not, refer this documentation.

https://devcenter.heroku.com/articles/heroku-cli

In your terminal and go into the front-end folder. Type this command to initialize the process. Heroku uses GIT technology for version controlling and deployment.

git init

Then we need to send node_modules folder into .gitignore to avoid inserting into the project files, since it's very heavy. 

echo node_modules > .gitignore

When Heroku builds the application, it automatically runs npm install and setup all the dependencies included in the package.json file.

Then add all the files and commit to GIT.

git add . git commit -m "Add app to Heroku"

Now it's time to create an application on Heroku with a preferred name. It will create an application with a URL like https://app_name.herokuapp.com... If it says that this name is already taken, give another! I will create my app like this.

heroku create react-java-app

Now all are set to push the application to Heroku. Perform this command!

git push heroku master

It will take some time to create..After sometime, Heroku CLI will prompt you that the application has been deployed an ready to be used. Now get the URL and open it in a browser.

react-java-app.herokuapp.com

I think now the application should be shown on your browser. Check whether all the functionalities we have created are working or not!

NOW YOU HAVE A WEB APPLICATION DEVELOPED USING REACT AND JAVA!!!

Feeling awesome? When I first did this kind of deployment, I felt so. Heroku provides a great and easy opportunity to test by hosting applications developed in any technology. And the best thing is this platform is free. No need to pay for the domain or hosting.. All the free version projects will have the herokuapp.com sub-domain part. For me it's ok.

This is the end of the article guys! I think you have enjoyed this, I got some time to write this article - part 2 since I had the willingness to give the best thing to you.

Try this! Good Luck guys!!!