Deploy MERN App to Heroku

Introduction

This tutorial assumes you have a MERN application built. If you don't, you can build one with my two part tutorial: Build an API with Node.js, Express and MongoDB and Integrate React into a Node application.

Dotenv Package and environmental variables

Heroku requires you to use a cloud database platform for MongoDB. MongoDB's Atlas cloud service requires a user name and password as part of the URL. To keep these private you should use environmental variables so that they are not explicitly in your application's code. Assuming you are using Atlas for both development and production, you should add the dotenv package for your development environment if you expect to expose the file in a place like a public github repository. From the project's root directory:

In Node, environment variables can be accessed on the process.env object. The dotenv middleware looks for a file called .env and loads it's contents into the process.env variable for use in your code.

Create a .env file in the project's root directory:

Add environmental variables on new lines in the form of NAME=VALUE. By convention, use names in all upper case with words separated by underscores like MONGODB_URI. Add your MongoDB Atlas database link since it contains your user name and password. Something like this:

# .env
MONGODB_URI=mongodb+srv://user:password@cluster-number.mongodb.net/test?retryWrites=true&w=majority

We are only using the .env file in our development environment. When you deploy your app on Heroku you need to add this as an environmental variable on Heroku at that time.

Server.js Update

Update the server.js file with changes related to Heroku highlighted and explained below.

// server.js

const express = require('express');
const mongoose = require('mongoose');
const router = require('./routes/index');
const path = require('path');           #1
const PORT = process.env.PORT || 3001;  #2
require('dotenv').config();             #3

const app = express();

app.use(express.urlencoded({ extended: true }));
app.use(express.json());
app.use('/api', router);

mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true }); #4
mongoose.connection.once('open', () => {
  console.log('Connected to the Database.');
});
mongoose.connection.on('error', err => {
  console.log('Mongoose Connection Error : ' + err);
});

if (process.env.NODE_ENV === 'production') {           #5
  app.use(express.static('client/build'));

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

app.listen(PORT, () => {
  console.log(`Server listening on port ${PORT}.`);
});

1. Path is a module within Node so we don't install it with npm. The path module provides utilities for working with file and directory paths and is needed to work on Heroku.
2. Heroku will assign a port via the PORT environmental variable. We'll use the or operator || to assign that as the port or 3001 if it is null (i.e., if we are in the dev environment).
3. Require and configure dotenv middleware.
4. Connect to the database URI taken from the environmental variable.
   You could use a local MongoDB instance for your development environment and use the cloud for production. If you take that route then you would would set it up like this:
   const LOCAL_DB = "mongodb://127.0.0.1:27017/my_local_db";
mongoose.connect(process.env.MONGODB_URI || LOCAL_DB, { useNewUrlParser: true });
5. When you deploy your app to Heroku, Heroku will run the build command on the React app and move the finished version to the build folder. This conditional statement tells Heroku that your React files will be in the client/build folder and URL requests will go to the client/build/index.html file where your SPA React app is served from.