Fast, Cheap, and MEAN.JS: Dev/Stage/Prod with Heroku

11 May 2014 - - -

or building a dev/stage/production environment for your MEAN.JS project using Heroku.

If you're building websites, your probably familiar with the standard dev->stage->prod environment configuration:

  • dev on your local machine
  • stage for collaboration with other developers and/or QA testing
  • production the live data for users.

Using the hosting service Heroku we can quickly setup a dev/stage/prod environment and deploy with git.

This is a great Lean Startup way to get your project up and in front of users with very little effort and cost.

Here's a gist of what we're going to do.

> Hey! There's alot of different ways to do something like this. > Know a better way?> Please leave a comment below!

About MEAN.JS and Heroku

Heroku is a great application hosting service.

  • Their free tier is generous
  • Configuration can be done from the command line.
  • Deployment is done with git

MEAN.JS is a full-stack application framework for Node.js.

> Note: this isn't JavaScript specific. This would work just as well for a Rails app. This tutorial is about configuring > git> and using the > heroku> toolbelt.

Part 1: Setting up a Dev Server

This is about setting up a server on your laptop or desktop. For MEAN.JS:

  1. Setup our dev environment.
  2. Get some code:
    a. Clone MEAN.JS git clone https://github.com/meanjs/mean.git.
    OR
    b. Setup our project like this to get updates and push changes to/from MEAN.JS.
  3. Run npm install to download our projects dependencies
  4. Run grunt to start our local dev server
  5. Visit http://localhost:3000

It's not necessary to have or run the MEAN.JS project, but it offers an excellent case study.

In the previous post, we setup our local git repository to:

  1. Get official updates and bug fixes from remote upstream.
  2. Push code to remote fork so we could make GitHub pull requests.
  3. Use a private repo origin for our project's code.

These commands will quickly setup our repo. Or simply git clone the main repo and ignore the upstream, origin, and fork remotes and repositories in the diagrams.

We're going to use git and heroku to create our production and staging servers.

Part 2: Setting up a Production Server

1. Create a Heroku account.

Remember your email and password for the next step.

2. Install the Heroku Toolbelt and login

cd PROJECT  
heroku login  

3. Create our app.

We could use the website, but the command line interface is interesting and easier to document

# From our repo's directory, create a heroku app
heroku create YOURAPPNAME  --buildpack  
https://github.com/mbuchetics/heroku-buildpack-nodejs-grunt.git

heroku labs:enable user-env-compile  

Come up with a unique app name or leave it blank to get a random one:

$ heroku create YOURAPPNAME
Creating YOURAPPNAME... done, stack is cedar  
http://YOURAPPNAME.herokuapp.com/ | git@heroku.com:YOURAPPNAME.git  
Git remote heroku added  

This did several things:

  • Created our app on the Heroku service. Check your apps.
  • Added a DNS entry where our app will be hosted.
  • Created a git repository at Heroku.
  • Created a remote heroku pointing to this Heroku app.

Now, every time we push to this remote, Heroku rebuilds and deploys our app.

This is our production server. Let's rename the heroku remote to production.

git remote rename heroku production  

Now, we have five repos:

Add a MongoHQ db server

Our MEAN app needs a database. Heroku integrates with many add-ons which you can browse online. We can add a MongoDB database right from the CL:

heroku addons:add mongohq --app YOURAPPNAME  

Configure MEAN.JS to use the MongoDB server

By default, MEAN uses the database server at localhost. To configure our server to use MongoHQ's server, we need to set the server to production mode

heroku config:set NODE_ENV=production --app YOURAPPNAME  

TASK: Deploy our app to production

Because we're using git flow, our production code is kept in the master branch.

> NOTE: Before deploying your app in production mode, compile and commit the minified js and css files.

grunt build  
git commit -am 'Compile distribution js and css'  

To deploy our app, we use git:

git push production master  

We should get the usual git output, followed by a git post-commit hook deploying the app on Heroku's server. Here's some example output.

To see our app in action, open a browser:

heroku open --app YOURAPPNAME  

Hurray, you're live!

Part 3: Setting up a Stage Server

Here we rinse and repeat. We can use Heroku's fork feature to copy our application and it's add-ons.

# Create a new Heroku app:
heroku fork -a YOURAPPNAME YOURAPPNAME-stage

# Add a remote called 'stage'
git remote add stage git@heroku.com:YOURAPPNAME-stage.git

# Set app to use forked MongoDB database
heroku config:set NODE_ENV=production --app YOURAPPNAME-stage  

TASK: Deploy your app's dev branch to stage

Our 'stage' code is kept in the 'dev' branch. Again, we can use git to deploy:

# Syntax  [remote] [local branch]:[remote branch]
git push stage dev:master  
heroku open --app YOURAPPNAME-stage  

This adds a sixth repo and final remote:

Good Job!

You now have a MEAN.JS dev->stage->prod development environment.

This doesn't go into moving data from prod->stage or backups or a variety of other issues, but it is a fast and lean way to get started.

Here's a gist of what we did.

> Hey! There's alot of different ways to do something like this. > Know a better way?> Please leave a comment below!