How to deploy React.js App on Heroku

Uday Yadav

Jun 6, 2020·2 min read

It’s super easy !!!

Step 1: Install dependencies

You will be needing the following packages

npm i express dotenv

Step 2: Create a server file in Project Folder

Inside your project folder, create a file named “server.js” and copy the following contents inside it.

const path = require('path');const express = require('express');const app = express();const port = process.env.PORT || 3000;app.use(express.static(path.join(__dirname, 'build')));app.get('/*', (req, res) => {res.sendFile(path.join(__dirname, 'build', 'index.html'));});app.listen(port, () => {console.log('Server is up!');});

Step 3: Push to GitHub

Add git add all your files, commit them and push them to GitHub, we will deploy the automatically from their

Step 4: on Heroku

Create a new App
In deploy section, connect your GitHub account :

and select the repository containing your react project

3. In settings, configure your environment variables, if you have them.

4. Deploy setting :

you can keep automatic deploy setting ON on Heroku if you want, but it’s better to return it off because free tier gives u only 5 builds and if you git push more than 5 times, 6th time you won’t be able to deploy your project. Better keep it off.