Deploy React App to Heroku Tutorial

This tutorial shows you how to deploy your React App to Heroku step by step. Follow the steps below and you will have your React App running live in Heroku cloud servers in less than 30 min. For this tutorial you can use any React app that you have build. I will be deploying a Local Business Site built using crete-react-app with Multiple Static Pages with SSR, Contact form with Multiple Image upload feature using Cloudinary and emailing that contact form straight to site owner using Sendgrid.

Actually the entire project is also available as a video course in Udemy. Feel free to check it out. But of course you can use any React app for this tutorial. 

 

Steps to deploy React app to heroku

 

1. Signup to heroku
2. Login to heroku
   
   After login you will be redirected to dashboard. On top right, click a button that says Create a new app
   Give it a unique name, for example react-local-business
3. On your dashboard, you can see the app that you just created called react-local-business
4. Click on the app name react-local-business
5. On top you see menu bar, click on settings
6. There you see a button that says Reveal config vars
7. There you will need to add your .env variables (in name > value pattern) one by one
   
   
   
   
8. Install Heroku cli so that you can run heroku commands in your computer. It is available for both macOS and windows.
9. Here is the official link to download heroku cli. https://devcenter.heroku.com/articles/heroku-cli
10. For macOS users, you can also install this cli using homebrew.
    
    

    brew tap heroku/brew && brew install heroku​

     

11. Now its time to get back to your project in your local computer.Create a file named Procfile in the root directory of your project.
12. Write the following code into your Procfile
    
    

    web: node server.js

     

13. Create server.js in the root of your react app (not inside src folder) with the following code. This is a basic node server that will return index.html from the build directory for all incoming requests(*). The production build will be generated by heroku so we dont have worry about that part.
    
    

    // server.js
    const express = require('express');
    const compression = require('compression');
    const path = require('path');
    const app = express();
    
    app.use(compression());
    app.use(express.static(path.join(__dirname, 'build')));
    
    app.get('*', function(req, res) {
        res.sendFile(path.join(__dirname, 'build', 'index.html'));
    });
    
    const PORT = process.env.PORT || 3000;
    
    app.listen(PORT, () => {
        console.log(`App is running on port ${PORT}`);
    });​

    
    
    
14. Now open a terminal window or command prompt and get inside your project folder. Once inside the project folder run:
    
    

    heroku login​

     

15. If you are curious to see a list of apps you have in heroku, you can run this command to see all your heroku apps.
    
    

    heroku apps​

     

16. Ok now its time to initialize your project with git. 
17. IMPORTANT - Make sure you have .gitignore file in the root of your project with following code below. 
    
    

    node_modules
    .env​

     

18. IMPORTANT - Keep only one lock file (package-lock.json). Delete yarn.lock
19. Now run the the following commands one by one. Make sure to replace the app name with your app name that you created in heroku dashboard. We named it react-local-business
    
    

    git init
    git add .
    git commit -m "first commmit"
    heroku git:remote -a react-local-business
    git push heroku master​

     

20. Awesome. Your react app is live now. You should see the live url in your terminal too somthing like so: https://react-local-business.herokuapp.com/. You can copy paste that url in the browser or optionally run the following command to automatically open your app in the browser:
    
    

    heroku open​

     

21. If you see the error on screen that says application error, Run this command in terminal to see the error logs. This will help you identify what is causing the error:
    
    

    heroku ps:restart; heroku logs --tail​

     

22. Now I can visit my React app running live in the heroku cloud by visiting the following url: https://react-local-business.herokuapp.com
    

 

Congratulations on successfully deploying your React APP to heroku. Feel free to post any comments below.

About me

I am Ryan Dhungel. I am a fullstack web developer and online instructor. I am active on platforms like Udemy, Packt and O'Reilly. You can checkout my Fullstack courses that will help you reach a new height in the world of web development.

List of all my published courses in Udemy

 

---

---