Deploy your React App to Heroku

In this article, I am going to tell you how to deploy your React App to Heroku. First of all you have to do some few things, before you jump into “Deploy your React App to Heroku 2021” article.

Follow the below requirements

After you install above requirements (If you already installed, just fine. skip this step. you are brilliant.) then start deploying your React project to Heroku. Follow the steps one by one.

Steps

Create an Account in Heroku
Setup your Requirements
Deploy
Errors and Bug fixed

1. Create an Account in Heroku -Deploy your React App to Heroku 2021

You can create an free Account in Heroku platform. This is totally free for 5 Apps. It means you can deploy or push 5 projects to this platform. If you want to deploy or push more than 5 projects you have to upgrade your account. Visit heroku.com/pricing for more details.

Once you create an Account, just sign in after confirm your email.

When you sign in, you can see this kind of a dashboard.

2. Setup your Requirements -Deploy your React App to Heroku 2021

Open your package.json file in your React project. Then find “Scripts”. Inside the scripts brackets, paste this code.

    "dev": "react-scripts start",
    "start": "serve -s build",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "heroku-postbuild": "npm run build"

After that, we have to implement the node version and the npm version. Copy this code and paste it above “Scripts” one.

 "engines": {
      "node": "v14.5.0",
      "npm":"6.14.5"
  },
 "scripts": {
    "dev": "react-scripts start",
    "start": "serve -s build",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "heroku-postbuild": "npm run build"
  },

If you can’t find node version and the npm version. Use your terminal and paste relevant code to find that version.

to find node version. type “node -v” in your terminal.

to find npm version. type “npm -v”.

After that, create a npm install command to install, uninstall packages.

3. Deploy your React App to Heroku -Deploy your React App to Heroku 2021

Most importantly make sure you installed heroku CLI and Git version Controller Then use your terminal and start deploy with commands.

heroku logins – use this command and log into your Heroku account.
git init – use this to create a repository to your project
git add . – use this to add files to above repository. make sure you type “.”
git commit -m “your commit message” – create a commit
heroku create – this is the command to create your project to heroku project. After you enter you can see a url link and a git repository link. we are going to deploy your React app to that git link. After deploying, you can use url link to see your project in alive.
git remote add heroku PASE THAT GIT LINK IN HERE
git push heroku master

You can see your project is deploying. After you get confirm message your project successfully deployed. you can use “heroku open” command to open your live link.

Also you can edit your project files. after your edit, Similarity you can use,

git add .
git commit -m "your commit"
git push heroku master

4. Errors and Bug fixed

React app runs locally, it crashes with heroku error code H10

If you get this similarity error, use “npm install serve –save” command to installed missing packages. and make sure, in your package.json file under “scripts”, these files are tyed.

 "scripts": {
    "dev": "react-scripts start",
    "start": "serve -s build",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "heroku-postbuild": "npm run build"
  },