Deploying a universal MERN application to Heroku

If you haven't checked out the MERN project, do yourself a favor and check it now and enjoy some next level javascript architecture and tooling!

Though installation and firing up a dev environment were a piece of cake, I struggled getting the project to run in any sort of production environment. I tried zeit/now but got tons of npm errors on upload. Then went back to old faithful - Heroku.

Here is how to successfully deploy it to Heroku:

1) Create your app on Heroku and add your new git remote to your project.

2) Remove the following lines from the .gitignore:


Heroku obviously needs to see those files, and since it relies on git we must include them.

3) Change the entry line in to this:

  entry: ['babel-polyfill', __dirname + "/client/index.js"] ,

4) In package.json copy ALL of the devDependencies to the normal dependencies tree.

Heroku has a configuration to avoid this, but I haven't looked into it much.

5) Also in package.json change the start script to this:

"start": "cross-env NODE_ENV=production MONGO_URL=yourMongoURL node index.js",

6) Not sure this next step is 100% necessary but I'm using (free for small projects yay!) and this tutorial suggests it. So I added this line in server.js just above the mongoose.connect(..) bit:

const db = mongoose.connection;

db.on('error', console.error);  
db.once('open', function (res) {  
    dummyData();  //put this here instead of inside mongoose.connect

7) Generate a minified bundle with npm run build

8) git add . and git commit -m 'heroku prep'

9) git push heroku master

takes sip of beer...

And there you have it! An isomorphic JavaScript app using React and Redux on Heroku!

P.s. Thanks to the #Hashnode crew for putting out the awesome mern project, it is very very cool!