Deploying a universal MERN application to Heroku

If you haven't checked out the MERN project, do yourself a favor and check it now http://mern.io/ 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:

public/*  
static/dist  
static/css/app.min.css  

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

3) Change the entry line in webpack.config.prod 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 modulus.io (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!