Sign in
Log inSign up
Deploying MERN to Heroku (success)

Deploying MERN to Heroku (success)

Jake Foraker's photo
Jake Foraker
·May 14, 2016·

3 min read

Note for 2020: MERN stack is going out of style, as this was originally written in 2016 😱

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: 

     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!

18