Deploy an existing MERN app to Heroku

Before we begin, here is the folder structure we are working with to avoid any confusion.

├── _client (React app)
├── _node_modules
├── .env
├── .gitignore
├── index.js (server file)
├── package-lock.json
├── package.json

Now here are the 5 steps:

1. Edit server file.

In index.js, near the top add the following line

app.use(express.static(path.join(__dirname, '/client/build')));

so the server knows where to look for the React app.

Then near the bottom, before app.listen gets called add

app.get("*", (req, res) => {  res.sendFile(path.join(__dirname + '/client/build/index.html'))});

to ensure the server responds with that React app to user requests.


2. Configure scripts.

In package.json, in the “scripts” file add the following script

"heroku-postbuild": "cd client && npm install && npm run build"

so the server can run the React app.

3. Create a Heroku application.

Make sure the project contains a Git repository by looking for a .git folder.
If not, initialize a Git repository in the root directory by running

$ git init
$ git add .
$ git commit -m "initial commit"

Ensure that worked by running

$ git status
On branch master
Your branch is up to date with 'origin/master'.
nothing to commit, working tree clean // SUCCESS!

Then create a Heroku app, using either the dashboard

Dashboard > New > Create new app


Heroku CLI by running heroku create HEROKU_APP_NAME.

Assuming you’ve downloaded and installed the Heroku CLI, run

$ heroku git:remote -a [INSERT APP NAME HERE]

to add a remote where your code will be stored on Heroku.

Ensure that worked by running

$ git remote
heroku // SUCCESS!


4. Set config vars.

In development mode, you may have loaded environment variables from a .env file and accessed them using process.env.KEY.

On Heroku, environment variables are loaded using config vars. Add config vars, using either settings on the dashboard

Config var screen found in settings in the Heroku dashboard
Dashboard > APP NAME > Settings

Heroku CLI by running

$ heroku config:set [INSERT KEY HERE]=[INSERT VALUE HERE]

Ensure that worked by running

$ heroku config


5. Deploy.

Finally, push that baby up and onto Heroku by running

$ git push heroku master

If you ever need to make changes and deploy again, simply run

$ git add .
$ git commit -m "initial commit"
$ git push heroku master

to push the latest version of your code to the server.




Trying to remember what I coded @

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

My Creative Coding works

Data Types

React Native Navigational Child Component Updates

📢🔥 @DecentralGames now listed this week on #TheDapplist V2 🎉 A play-to-earn game + DAO at the…

Sally’s App Won’t Pay …

Web Dev Journey: Day 7~The Start of Javascript

Automating and optimizing npm login for scale

Action and an Action Creator in Redux.js?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jenny Xin

Jenny Xin

Trying to remember what I coded @

More from Medium

How to create an expressjs based RESTful API using express-ve package.

Lets Learn about Node Js…

Express vs Koa — A Quick Comparison

Node JS for Beginners