[React] Deploy React App Using Heroku

Heroku is a platform as a service that enables developers to build, run and operate applications entirely in the cloud. 

 

I decided to use Heroku for my portfolio react app since it is very confident to deploy applications and I can easily update code with heroku commands. 

 

You also don't need to know complex server settings since heroku provides everything through the cloud! 

 

In order to start heroku you need to make a heroku account.

 

Create Heroku Account

Enter below link to create your heroku account. 

Heroku | Sign up

 

Create New App in Heroku

New -> Create new app

Select app-name and create app

Add Buildpack

1. click setting

2. Under setting tab Go to Buildpacks and click buildpacks

3. we have to add two build pack. 

- heroku/nodejs

- https://github.com/mars/create-react-app-buildpack.git

 

Git setup

Now you have to upload your react app folder to heroku server by using heroku CLI

 

1. Download heroku CLI command line on below link: 

https://devcenter.heroku.com/articles/heroku-command-line

The Heroku CLI | Heroku Dev Center

*if you are using home brew, enter below command on command line for quick download

brew tap heroku/brew && brew install heroku

 

2. Now go to heroku web of your application and select deploy tab.

3. Under deploy tab select Heroku Git and follow below command.

 

3a. Open Visual Studio Code and then Open terminal

heroku login

 

3b. click login

 

3c. Create new git repository

git init
heroku git:remote -a [heroku app name]

 

3d. Deploy your application

$ git add .
$ git commit -am "make it better"
$ git push heroku master