Installing mean.io on Heroku

Installing MEAN.io on Heroku is incredibly fun, easy, fast and troubles free.

In this short tutorial I’ll walk you through checking out MEAN.io, connecting it to Heroku, and using an 3rd party MongoDB provider (MongoHQ in this case).

First thing first, you’ll need to create accounts on both Heroku and MongoHQ. Creating an account on both services is a matter of minutes all together.

1. Heroku

In order to work with Heroku, you also need to download Heroku’s toolbelt which will give you the needed command line tools to communicate with Heroku’s backend. Right after registering in Heroku and installing it’s toolbelt, run the following command and add your SSH key, to identify yourself with Heroku:

$ heroku login
Enter your Heroku credentials.
Email: zohar@linnovate.net      
Password (typing will be hidden): 
Found the following SSH public keys:
1) id_dsa.pub
2) id_rsa.pub
Which would you like to use with your Heroku account? 2
Uploading SSH public key /Users/zohar/.ssh/id_rsa.pub... done
Authentication successful.

2. MongoHQ

Once you are done with creating your account, proceed to adding a new DB. MongoHQ chose their biggest and most expensive package as default, but for the sake of this example, I chose a free AWS Sandbox. A few seconds later you’ll be redirected to the DB’s dashboard, where you should add a user and password with which to access the DB. Note that these credentials are different than the ones you registered with and need to be manually created.

MongoHQ > Add a new DB user

Go to the Admin tab on the left, then to Users, and add a user: MongoHQ - add users

MongoHQ > Get the connection string

Go back to the Admin > overview tab, and copy the connection string (username and password are masked): MongoHQ - user and password You’ll need this connection string later in the process.

3. Mean.io

Your next move is to prepare your MEAN application: If you don’t have an app yet, get a fresh copy of Mean.io from Github (git clone git@github.com:linnovate/mean.git or download the .tar.gz or .zip files). If you already have a ready made app, or after you have downloaded mean.io, your next move is to change the MongoDB connection string in the app.

Before you go ahead, just make sure your app sits on a git repository. If it isn’t, run this from the mean.io directory:

git init
git add .
git commit -a -m "Initializing my new mean.io app repository"

The connection string to be changed is found in the configuration files under config/env. By default, mean.io is delivered with three environments: development, test(ing) and production. The different configurations allow for easy development and deployment, without the hassle of changing config files each time. For our example, we’ll consider Heroku as production. Therefor, we need to edit the file config/env/production.js, and insert the MongoHQ connection string from earlier:

/var/www/mean-on-heroku$ cat config/env/production.js

'use strict';

module.exports = {
    // Replace <user>:<password> with your real user:pass
    db: "mongodb://<user>:<password>@paulo.mongohq.com:10095/mean-on-heroku",
    app: {
        name: "MEAN - A Modern Stack - Production"
    },
  .
  .
  .
}

Then git commit your changes.

4. All together now

Once the connection string is changed, you’re ready to push changes to Heroku:

/var/www/mean-on-heroku$ heroku create mean-on-heroku

This command creates an app on Heroku, and adds a remote git origin called heroku, to which you need to commit your changes hereafter. This is the response of the command:

Creating mean-on-heroku... done, stack is cedar
http://mean-on-heroku.herokuapp.com/ | git@heroku.com:mean-on-heroku.git
Git remote heroku added

To get Heroku to respect our grunt magic – we need to reference the a slightly altered node buildpack which supports grunt

heroku config:add BUILDPACK_URL=https://github.com/mbuchetics/heroku-buildpack-nodejs-grunt.git

Note the remote heroku origin, and the URL the app. You’ll need it later to see your app in action. Next step is to push your changes to heroku:

git push heroku master

When you push the app to Heroku it automagically identifies is as a node.js app, and will run the necessary npm install on the server. The very last thing to do is to let Heroku know that it needs to look for it’s configuration not in the default environment, but in the production one. This as well is done via the local toolbelt from the command line:

heroku config:set NODE_ENV=production

…And that’s about it! Your app is live and running on the above URL (in my case: http://mean-on-heroku.herokuapp.com/#!/ although don’t expect this URL to be functional as it’s only a test one…).

To wrap it all up:

Within minutes you can have a functional MEAN stack ready for development or production. The whole process takes only a few minutes. Really – reading this post should have taken you longer…

  • Ryan Latham

    I believe something must have changed with heroku or meanio, since these directions do not result in a successful deployment to heroku. I have tried several variations on multiple computers and the best I could end up with was a blank screen.

    Everything ran fine locally, but the boilerplate code is not sufficient to run a basic heroku app.

  • zohar

    Hi Ryan, thanks for the input. MEAN has changed a lot since.
    We should try to run the same procedure and update the post accordingly.

    • Ryan Latham

      @ zohar

      I was able to get it up and running by moving the grunt dependencies from “devDependencies” to “dependencies” in package.json. Definitely not an ideal solution, but it should work for anyone who wants to play around with it on heroku. Could possibly use a custom buildpack to get around this?

      I didn’t say it before but you guys have done an amazing job with MEAN.io! Thanks for providing this great framework for free.

  • Micah

    I was wondering if this has been updated? I noticed your instructions mention to set up a MongoDB first, but you’ll probably need to create the app before doing that. Also, Heroku gives you a number of environment variables which I have used to connect in the past… like: process.env.MONGOHQ_URL

    thanks
    micah

    • Ryan Latham

      Micah,

      You don’t actually need to create an app before creating a MongoDB. Heroku has some add-ons which automate some of the setup process for you. If you want to use one of those add-ons, then yes you will have to create an app first. However, as these directions outline, it is pretty easy to go set up a MongoDB without using Heroku.

      Personally, I prefer keeping my database as separate from my server system as possible. It doesn’t really matter either way though.

  • Mike Johnson

    Got this up and running after some trouble. Buried in the gruntfile was
    // For Heroku users only.
    // Docs: https://github.com/linnovate/mean/wiki/Deploying-on-Heroku
    grunt.registerTask(‘heroku:production’, [‘jshint’, ‘csslint’, ‘cssmin’, ‘uglify’]);

    Checking the link above link led to the buildpack for the dist folders.
    heroku config:add BUILDPACK_URL=https://github.com/mbuchetics/heroku-buildpack-nodejs-grunt.git

    After running that config and redeploying everything was as expected.

  • Just to second what Mike said, there’s an error with deploying if you have not yet added

    heroku config:set NODE_ENV=production

    before you do the git push. It errors out because the gruntfile has

    if (process.env.NODE_ENV !== ‘production’) {
    require(‘time-grunt’)(grunt);
    }

    and heroku can’t find time-grunt

    so just set production first, then you shouldn’t hit that line in the gruntfile.

    Other than that, this is a great post and very helpful. Thank you! I can’t wait to do my first Mean app!

  • Joel

    I’m not sure what I did wrong, but this is not working for me. Follow the instructions exactly. I get this error during install:

    —–> Found Gruntfile, running grunt heroku: task

    Warning: Task “heroku:” not found. Use –force to continue.

    Aborted due to warnings.

  • Tyler Shaw

    Is there a safer way to store the password as an environment variable in heroku??? I would like to push my changes to a public repo on github as well.

    • Eugene Zaretskiy

      Tyler, yes there is. Instead of putting your username/password right into the production.js configuration file, try this:


      'mongodb://' + process.env.DB_USER + ':' + process.env.DB_PASSWORD + '@dbhost.mongohq.com:10010/dbname'

      Note that you must still change the host and dbname to match your own but the credentials will be looked up from the environment at runtime.

      Then, run the following heroku commands:


      heroku config:add DB_USER=username
      heroku config:add DB_PASSWORD=password

      This will add these environment variables to your heroku app.

  • I pushed to heroku master but I end up with done with errors even with a –force. When I visit the url I get an application error. Should the production.js have /var/www/mean-on-heroku$ cat config/env/production.js or should I use my own /var/www/mytippingapp? I’m guessing this is the issue. I’ve tried it a couple of times with the same result.

  • mcrisp

    I have tried this process 4 times now using mongolab for hosting mongo and I always end up with an application that just does not run.

    I have updated the production config/env/production.js file with the uri for the mongolab mongo database.

    I have also set the three environment variables using the process outlined in this blog post.

    I am not sure what I am missing here.

    you can reach me at mcrisp at power-story.com

    • Suiko6272

      I’m new to heroku and Mean.IO so all I can say is, I only ran into in issue where I had to set “NODE_ENV=production” before pushing heroku master. Since this guide worked for me the obvious would be theirs a typo in say the uri or the production.env wasn’t commited to git & pushed to the server. Sorry I couldn’t help besides say this guide did work. (btw I was using mongo lab not hq)

      Edit: O right, you can use heroku logs to try and debug.

      • mcrisp

        Thanks for replying. I will take a look a the logs and see what I can find. Thank you.

        Martin.

        • Suiko6272

          Actually just wondering, did you go through the heroku start-up tutorial? Because I just realized if your simply following this tutorial you might not be telling the Server to run an instance of the program.

          This is a simple case for test apps, read up on dynos for more complex setup.
          To start: heroku ps:scale web=1
          To end: heroku ps:scale web=0

          • mcrisp

            I did go through the heroku tutorial for creating a node instance and it worked, but I have not yet been successful with mean.io. I will look into the dynos. Cheers and thank you.

  • kylebowerman

    Nah mcrisp you are right there is something wrong with the current build and the instructions and haven’t figured it out yet. You can load papertrail on heroku or type: heroku logs -t to see what heroku is complaining about. I have been running 3.2 on Heroku for 9 months and deployed many times. I just started a new project and here is how I got it to work. Set NODE_ENV=production on heroku, then push it — I get timeouts after 30001ms. So I remove the NODE_ENV and it works fine. I did not check to see if there was an open issue just looked here to see if I followed the procedure correct.

  • Brett

    This tutorial was super helpful in getting my app up and working. Much appreciated!

  • Oliver Khan

    Hi there, I have been able to deploy my app to heroku, however am running into memory issues. I’ve uploaded the boilerplate mean.io application to heroku to test it out, and in production mode it uses ~470MB of RAM. My app, which is really quite simple (www.givetu.com), ends up using ~520MB of RAM in production mode (the heroku limit is 512MB) so i’ve been running it in development mode using ~370MB RAM. I’ve spent quite a bit of time trying to research how to reduce the memory footprint (HEAP snapshots, installing NewRelic etc..), however I have had no success. Could you point me to what I can do to reduce the memory usage of my app? Thanks a lot in advance!

    • Ctg

      May i ask why you decided to go with the MEAN stack instead of pure Node.js for such a simple app? Seems a bit overkill to me.

      • Oliver

        Yeah for sure. The short answer is because i’m a noob. The longer answer is: i start with node, then i need a server so i need express. I need a database for all the gifts and might as well use mongodb. And angular seemed like a good way to do the front end. What kind of stack would you recommend for something like this?

        • Nick Wilson

          Yeah I don’t really understand what you would use instead. The whole point of MEAN (especially with Heroku) is that it’s supposedly to be fast and easy to deploy and perfect for rapid web app development. I’ve read blogs out there where people insist this is the only way to go for hackathons, which by nature are limited on time, because it’s so fast. Anything else seems like too much overhead to set up.

          PS – I like your app concept. Simple but useful.

  • Julio Sena

    How app deploy heroku with gulp? in the documentation only supports grunt http://learn.mean.io/

  • Bull Shit

    | Installing MEAN.io on Heroku is incredibly fun, easy, fast and troubles free.

    Bullshit.