Deploy a MERN stack application to Heroku

Akhilesh Sharma
May 7, 2019 · 3 min read

I recently worked on a small personal project. I choose MERN stack as it would have been a good learning experience. Node is completely different beast when compared with Rails(working with rails for the past 6 years). So after developing some parts of the application which I think would work out for me, I thought I should

Deploy to production

For small apps I prefer heroku as I think it is the most time efficient PaaS system out there to work with. For a rails application, deploying on heroku is easier than having a piece of cake. But while deploying a MERN application I found out that it wasn’t going to be as easy as I thought it would be. So documenting the same below.

I have a setup in which I have a root project folder with a client folder serving react frontend and a backend folder for serving the node/express on dev.

If you are using some tool like nodemon or concurrently on your dev machine then you need to make some changes for deploying your code. The express server needs to serve both the frontend and the backend routes.

To start with,in your backend(express) index file you need to tell the express server where your frontend code is, so we need to add the code below to the backend index.js file.

/*express index.js*/const app = express();/*Adds the react production build to serve react requests*/app.use(express.static(path.join(__dirname, “../client/build”)));/*React root*/app.get(“*”, (req, res) => {res.sendFile(path.join(__dirname + “../client/build/index.html”));});

Note “../” is the relative path to my client(react) folder from the node/express backend index file.

In crude terms , now our backend express server is ready to handle react requests. But there is a small caveat here. Everytime we deploy the application we need production build for react.For this we need to change how our projects starts after deploying the application.

In my root project I have a package.json.(In many MERN implementations the backend is the root folder with a client folder for react scripts). To start our backend express server we will use the following hash in the file.

“scripts”: {“start”: “cd backend && npm install && node index.js”,“heroku-postbuild”: “cd client && npm install && npm run build”}

Using this script, after deployment the heroku client starts installing backend dependencies and then the express server. Post a build i.e post deployment Heroku checks for heroku-postbuild config for node applications. The script written here will tell the heroku client to cd into client from root folder, install frontend dependencies and then generate a production build for the react scripts.

So now the backend express knows where the client(react) production build is(code added in first step). We are set with the code changes here.

Now you can use the heroku CLI for pushing the code on heroku.

Make sure you don’t forget to add environment variables on the heroku correctly (under the settings-reveal config vars tab)

git add “Files to be commited”
git commit -m “Commit message”
git add remote heroku “heroku git path”
git push heroku master

Now your code is deployed on the server and can be checked with a
“heroku open” command on the CLI.

Bonus : Post deployment commonly faced CORS issue
This is just a bonus sample if you get stuck with CORS policy issue.

app.use(function(req, res, next) {res.header(“Access-Control-Allow-Origin”, “*”);res.header(“Access-Control-Allow-Methods”, “GET,PUT,POST,DELETE”);res.header(“Access-Control-Allow-Headers”,“Origin, X-Requested-With, Content-Type, Accept”);next();});app.options(“*”, cors());

You can change * to your domain name if you want.

Now sit back have a coffee and enjoy life. *Wink*

BTW would be happy to make edits in the post and help any one facing any issues in setting up MERN with heroku.

Akhilesh Sharma

Written by

Hey, I like working on new concepts and follow an approach of keeping things as simple as possible. Appreciates neat architecture and intelligent design.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade