Deploy React App on Heroku

Hi Friends,

Here I'm going to show how to deploy React Apps on Heroku from GitHub.

Nowadays we have more platforms to host our apps. Some of the platforms are

Heroku
Netlify
AWS
Firebase
GitHub and etc

Heroku is a container-based cloud Platform as a Service (PaaS). It's quite simple and fast to deploy and manage.

First, we have to install the create-react-app and open the account in Heroku.

Heroku _ Login.png

After Login, we can see our Heroku dashboard with our project List in dashboard.heroku.com/apps.

Select New -> Create new app, to create a new app and host it.

Personal apps1 _.png

Give the App name, select region, and click a Create app. Here react-tailwindcss added as App name.

Create New App _.png

Add Buildpacks

Once App created, we have to add Buildpacks in Settings -> Buildpacks -> Add Buildpacks.

Here I'm going to add Buildpack as github.com/mars/create-react-app-buildpack react-tailwindcs (2).png

react-tailwindcs (3).png

Finally, we have added Buildpack.

Set up Environment Variables

In my react app, I configured the Environment variable as client ID in .env file. If you have any API keys, secret keys or tokens, you have to add that in Heroku Config Vars.

Goto Settings -> Config Vars-> Reveal Config Vars, add your Key and Value

react-tailwindcs (8).png

Deploy the App

In Heroku, we can deploy our apps by 3 methods

Heroku Git
GitHub
Container Registry

Here integrate the app's repo from GitHub. Select Deploy -> Deployment method -> GitHub.

So I have already pushed my project in Github(github.com/ramyamahi/React-Tailwindcss-Imag..). Now search this Github repository and Connect it from Heroku.

react-tailwindcs (4).png