React App Deployment Using Heroku

Recently I was assigned to deploy a React app along with a Spring-boot application. We(Dev team of Sustainable Education Foundation) came up with the pros and cons of a few solutions and we decided to deploy the above-mentioned app on Heroku.

For starters, We’ll go through some basic questions

1. What is Heroku?
   - Heroku is a service platform that allows you to build, run and operate applications entirely in the cloud.
2. Which type of applications can be deployed on Heroku?
   - Node Js
   - Ruby
   - Java
   - Python
   - PHP
   - Go etc.
3. What are the advantages of using Heroku?
   - Easy to use
   - It has both free and paid plans
   - Flexible and Elegant

In this blog post, I'll be mainly focusing on Github deployment along with Heroku. For those who haven’t heard about Github, it’s a version control system along with a code hosting platform. Simply it helps to store your codes.

Step 1- Upload your existing React app to Github

I assume at this point you already have your developed React app. If not install Node.js and run the following command.

npx create-react-app my-app

This command will automatically generate a new React application named “my-app”. After running the above command, you will see a folder named “my-app” with the following files.

(File Structure)

Once you have your react app, You can upload your app to a Github repository. If you wanna learn how to do it, I’ll attach documentation here.

Step 2 - Create a Heroku account and Connect your application

Visit the URL https://www.heroku.com/ and signup. After you are done with the signup, you’ll have a dashboard similar to this.

(PS:- Ignore the existing applications :) )

Click on “New” and select “New app." Once you’ve done it, give a name to your application, as shown below.

(Use an available App name for your application)

After clicking on “Create App,” you’ll have a view similar to the below image.

Now let’s link our uploaded React application via GitHub. Follow the below four steps.
1. Click on the "deploy" tab.
2. Click on “Connect to GitHub” (Then connect to your GitHub)
3. Search your uploaded React app by the GitHub repository name
4. Click on Connect

(Now you’ve successfully linked your react application to Heroku)

Step 3 - Configure React buildpack and Run your application

This is the final step to successfully deploying your React application. Click on the “Settings” tab.

1. In the “Buildpacks” section, click on the “Add buildpack” button.
2. In the “Add buildpack” dialog, enter the following URL: https://github.com/mars/create-react-app-buildpack.git and click on the “Add buildpack” button.
3. Click on the “Deploy” tab.
4. In the “Manual Deploy” section, click on the “Deploy Branch” button to manually deploy your application.
5. After the deployment process has been completed, click on the “Open app” button to view your deployed React application.

That’s it! You have now successfully deployed your React application on Heroku using the React buildpack and Github as the deployment method. You can make changes to your application and deploy them again by pushing the changes to the selected branch in your Github repository.

P.S. - This blog post was written a year ago and was saved as a draft :)