Deploy an existing MERN app to Heroku

The easiest way to get an app up and running on a live server in just 5 steps

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

1. Edit server file.

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

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

2. Configure scripts.

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

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

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"
$ git status
On branch master
Your branch is up to date with 'origin/master'.
nothing to commit, working tree clean // SUCCESS!
Dashboard > New > Create new app
$ heroku git:remote -a [INSERT APP NAME HERE]
$ git remote
heroku // SUCCESS!
origin

4. Set config vars.

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

Config var screen found in settings in the Heroku dashboard
Dashboard > APP NAME > Settings
$ heroku config:set [INSERT KEY HERE]=[INSERT VALUE HERE]
$ heroku config
[KEY]: [VALUE]

5. Deploy.

Finally, push that baby up and onto Heroku by running

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

--

--

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