How to Deploy a MERN Stack App on Heroku
By: Kheman Jain
Tags: Deployment, Heroku, Herokuapp, Web Development, Mern Stack

This article will guide you through the process of deploying your mern-app on Heroku.

Step - 1: Create a New Project Folder

Create a New Project Folder By and run npm init commad to initialize it .

Step - 2: Now Run the following command

→ npm create-react-app yourappnameHere

→ Example : npm create-react-app testapp

Step - 3 : Root Folder/Directory Structure

Since our app comprises of a client (the React app) and a Node server, the structure should be as follows for deployment on Heroku:

Step - 4 : Edit Your Server File

Add the following code to your Server.js (server) file. This tells the server to look for a build of the react app.

Step — 5: Configure you package.json (edit the file in the root folder i.e. server → package.json file)

Add the following to your server’s package.json. If a “script” key is already exists , add “start” and “heroku-postbuild” to that script block .

Step — 6: Create a Procfile (Required for Heroku)

Simply just Create a Procfile in you Root folder and add the following code to it , this file can be created by just a right click and give it the name “Procfile” (Note : No special extension is required for this ) .

Step — 7 : Creating a common path for all the axios Requests

Since we will be using the same URL for our API calls and for serving our app, hence, we’ll have to create a common-path specifically for all our axios Requests . This path needs to be specified in both our server file (Server.js) and our axios API calls.

While defining routes , add a parent sub-path ( /api ) to all routes. Make the following changes to your server file Server.js:

Your File Might be looking like show below ( You need to change this )

Your File Should look like this

When sending the axios from your react app , make sure that the axios request is directed to the correct path . Don’t define the full path or the server port (like localhost:3000/buyer) , this is done automatically by Heroku. For example, calling the /api/buyer route defined about, well call:

Step-8 : Setting up the Server Port

We saw above that we need not mention the server port in Heroku , as that is handled by the platform . We need to get this port and use it to serve our axios request . This can be done by simply using the port defined in the Heroku environment . Add the following to the top of your server Server.js:

Step-9 : Setting up the Proxy

we need to add a proxy to our client(React App) folder , so that when axios tries to reach our server in a local deployment it can reach our server. Install a new npm package named : http-proxy-middleware . Use the Command Below to Install .

Now Create a New File(SetupProxy.js) Inside your src folder of React App and the following code to it :

Step-10 : Build React App

Build your react app by running the following in your client folder:

Step-11 : Pushing you Code to GitHub

We will be using GitHub to deploy our code. Push your code, in the existing directory structure, to GitHub. Make Sure that you delete the hidden .git folder in your react app folder as this may lead to a error . By default this folder is hidden go to you folder and enable show hidden files and delete that .git folder .

Create a new repository in GitHub . Then execute the following commands in your root folder .

Step — 12 : Connecting Heroku to GitHub

Go to heroku.com

Create a new app, choose an app name.

Choose Connect to GitHub as the deployment method

If your GitHub account isn’t connected to Heroku, do so

Search for, and choose the project repository we created in the previous step

Enable automatic deployments and select the deployment branch

Click on Deploy Branch

That’s it Guys Your app is now Deployed on Heroku !!!