Deploying React App to Heroku

Let’s get started to check out how a React App is deployed in Heroku in simple steps.

I have always wondered on how to build a production version of your react application and make it available to everyone by deploying it in a server. There are many sources available. Here, I have chosen Heroku wherein zero coding is present and making only few configurations.

In this article, we will see the following.

1. What is Heroku?
2. Adding configurations in React App.
3. Configuring Heroku application.
4. Continuous Delivery-Pipelines in Heroku

What is Heroku?

Heroku is a platform that enables developers to build, run, and operate applications entirely in the cloud. This means, it provides a server where you can run your applications. To start with , you need to hold an account which is entirely free. Sign up here.

Source code for this article can be found here!.

Adding configurations in React App:

It is necessary to ensure that the below scripts are added in your package.json file.

"scripts": {
"start": "npm install -g serve; serve -s build",
"heroku-postbuild": "npm run build",
"postinstall": "npm run build",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}

Hence the complete package.json file will look like this.

Configuring Heroku application:

Once you sign up for an account and login into Heroku, create an app as below. Choose region and name of your choice.

Creating an app in Heroku

Before we step into the dashboard, please ensure that node.js buildpack is selected under settings tab.

Now the app dashboard will look like below. Here,we need to set up a deployment method. We are opting Github method and connecting to our repository by providing its name.

Connecting to Github

Post this step, there are 2 options for deployment. We can either select auto deployment mode so that whenever any changes are made to github repository, automatic deployment to Heroku is triggered. Else, we can manually trigger the deployment after pushing our changes to the repository.

Automatic deployment

It’s really interesting!!!. Whenever you push any changes to Github,it will trigger deployment to Heroku. Heroku will try to install all the dependencies. Then it will run heroku-postbuild script which is specified in package.json file. This process will build your application. And finally it will run start script which will serve the content in build directory of your project. You can always check the build logs for reference!

Yayy! We have deployed our react application to Heroku. You can see the success message below.

Successful Deployment to Heroku

Now, enjoy hitting the view app to visualize your react application. Here you go!! 🏃🏻🏃🏻

The URL for this application will be https://react-lifecycle.herokuapp.com/

Look into the URL of the application

Continuous Delivery-Pipelines in Heroku:

A pipeline is a group of Heroku apps that share the same codebase. Each app in a pipeline represents one of the following stages in a continuous delivery workflow:

• Development
• Review
• Staging
• Production

You can find a detailed explanation here.

In order to establish a pipeline to a production app, we need to create a separate app by following the above steps.

Create a pipeline as below:

Post creation of production pipeline, the console looks like below. Here, we are adding the existing application to the staging stage which is going to get promoted to production on successful deployment.

After successful promotion, the app looks like below with the URL : URL :https://prod-react-lifecycle.herokuapp.com/

Production app after successful deployment

Hope this article was useful! If you really enjoyed, give a like by clicking a small clap🤗

Do visit my YouTube channel and subscribe for interesting tech videos!🔄