Deploying MERN to Heroku (success)

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!

Write your comment…

6 comments

Awesome work @jakeforaker ! Send a PR to mern-starter after adding a link to your story in readme.

High Five1

Hashnode is building a friendly and inclusive dev community. Come jump on the bandwagon!

  • 💬 A beginner friendly place

  • 🧠 Stay in the loop and grow your knowledge

  • 🍕 >500K developers share programming wisdom here

  • ❤️ Support the growing dev community!

Register ( 500k+ developers strong 👊)

when adding your mongo url be sure to remove the <<>> around your username and password

I get the error Error: Cannot find module './dist/server.bundle.js'. I checked the dist folder and no server.bundle.js was generated. Any idea what could be going wrong?

Show all replies

Aha! Was finally able to deploy successfully after including these missing asset tags!

Reply to this…

Hello!

I deployed my MERN app to Heroku, it is rendering properly and my third-party API search function works well. However, it seems like my GET and POST methods to add new data is not working now. I also lost the datas that were originally stored on my database. I got the below errors:

GET https://localhost:3001/api/projects net::ERR_CONNECTION_REFUSED OPTIONS https://localhost:3001/api/projects net::ERR_CONNECTION_REFUSED Uncaught (in promise) Error: Network Error at createError (createError.js:15) at XMLHttpRequest.handleError (xhr.js:87)

Originally I had the Mixed-Content error and I fixed that by adding the below to my index.html's head section: <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

Here is link to my app: https://fierce-sierra-67905.herokuapp.com/

This is my first time deploying MERN app on Heroku and have struggled for a while. Any help would be much appreciated!

Show all replies

So it looks like you are trying to point to localhost again. You need a hosted instance of your database, with a connection string (url) that is accessible to the outside world (the interwebs). Luckily, Heroku makes this extremely easy with the mLab addon elements.heroku.com/addons/mongolab. All you have to do is add it, and you get a free tier instance.

You will replace your current MONGO_URL env variable with the new one provided by Heroku.

Reply to this…

Hi,

Great tutorial, I've successfully deployed my app, but there is no CRUD functionality. Can you provide any insight as to why? There seems to be little consensus as to why that is, and with fewer solution. Any help would be appreciated. Thanks!

kicksstarter.herokuapp.com

Show all replies

I'm going to try this when I get a chance, thank you so much!

Reply to this…

Load more responses