Deploying mean.io to Heroku with ease

The world of servers, releases and deployments used be an arcane land of grumpy IT guys and red tape, but fear no longer, we have evolved past that. Deploying a MEAN stack to heroku is actually very easy and devs no longer have to jump through hoops to deploy their apps.

First thing to do is to head to heroku.com and sign up. Second install the heroku toolbelt.

Once you have done that, you have your cloud hosting secured, but you still don’t have a MongoDB host. Truly any mongo host can do, but if you want to do this quickly and freely, I discovered 2 ways to go about this, you can either use an add-on in Heroku┬álike for example MongoLab or MongoHQ or go to their respective websites and make a database there. Either way you will end up being provided a mongo url looking something like this:

mongodb://user:pass@paulo.mongohq.com:10042/dbname

Once obtained you can now go to your config/config.js in your mean project and you will notice that there are different environments specified by the creators of mean. Here is the development environment by default:

    development: {
        db: 'mongodb://localhost/mean-dev',
        root: rootPath,
        app: {
            name: 'MEAN - A Modern Stack - Development'
        }
...

the db string is what concerns us, you can see by default it looks at your default localhost mongodb and saves to the mean-dev db. I liked this to remain this way for dev, so I modified the ‘production’ environment with the afore mentioned mongodb url string as such:

 production: {
        db: 'mongodb://user:pass@paulo.mongohq.com:10042/dbname'
...

Now you are ready to push your app to heroku. I found this sequence of commands to work well:

git init
git add .
git commit -m "initial version"
heroku apps:create myMeanApp
git push heroku master
heroku config:set NODE_ENV=production

Git knowledge is assumed here, but it’s not rocket science, just don’t be confused, this git repo is within heroku, not on github. The last line tells heroku which NODE_ENV variable in Express ┬áto pull from your config and this tells your app in production to use the production url for your online mongodb host while your local dev app still uses your local mongodb host.

Believe it or not, this really is it. This process is explained in more detail here. You are now ready to hit your hosted app in the browser by running:

heroku open

If your app is broken and you get an error and you wonder why, in your terminal type:

heroku logs

5 thoughts on “Deploying mean.io to Heroku with ease

  1. Permalink  ⋅ Reply

    Matt Ross

    February 7, 2014 at 8:17pm

    I found Heroku’s heroku-config plugin to be useful here. You can use this in tandem with grunt-env and include something like heroku : { src : ".env" } to have it parsed in when you’re running locally. This way you could keep some environmental config vars in sync with heroku. Obviously you could just write your own .env file.

  2. Permalink  ⋅ Reply

    Ryan Latham

    April 15, 2014 at 12:25am

    This process no longer works and instead causes a blank screen to be displayed when you visit the app on heroku.

    Any ideas why this might be happening?

Leave a Reply

Your email will not be published. Name and Email fields are required.