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!

Hassle-free blogging platform that developers and teams love.
  • Docs by Hashnode
    New
  • Blogs
  • AI Markdown Editor
  • GraphQL APIs
  • Open source Starter-kit

© Hashnode 2024 — LinearBytes Inc.

Privacy PolicyTermsCode of Conduct