# 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][0] 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][1] 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][2] 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][3] 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][4] 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][5].
1. Get some code:
a. Clone MEAN.JS git clone https://github.com/meanjs/mean.git.
OR
b. [Setup our project like this][6] to get updates and push changes to/from MEAN.JS.
1. Run npm install to download our projects dependencies
1. Run grunt to start our local dev server
1. Visit [http://localhost:3000][7]

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

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

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

![][8]

[These commands][9] 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][10].

Remember your email and password for the next step.

#### 2. Install the [Heroku Toolbelt][11] 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][12].
* 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:

![][13]

#### 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][14], 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][15].

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][16] 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:

![][17]

## Good Job!

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

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

Here’s a [gist][2] 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!

[0]: http://dltj.org/article/software-development-practice/
[1]: http://heroku.com
[2]: https://gist.githubusercontent.com/MichaelJCole/323df245392a963207f1/raw/128c5838e3fe25acc04aaa00bf99784bf19412df/heroku.sh
[3]: https://www.heroku.com/features
[4]: http://meanjs.org
[5]: https://github.com/meanjs/mean#prerequisites
[6]: http://blog.powma.com:/git-you-some-mean-js-setup-advanced-git
[7]: http://localhost:3000
[8]: http://blog.powma.com/content/images/2014/May/Repo-s—Step5-3.png
[9]: https://gist.githubusercontent.com/MichaelJCole/323df245392a963207f1/raw/ecf6e8d5479c94ff3934d03b320f5951bbb20ac3/setup.sh
[10]: https://id.heroku.com/signup/www-home-top
[11]: https://toolbelt.heroku.com/
[12]: https://dashboard.heroku.com/apps
[13]: http://blog.powma.com/content/images/2014/May/Repo-s—Part2-2.png
[14]: http://nvie.com/posts/a-successful-git-branching-model/
[15]: https://gist.github.com/MichaelJCole/5246e94409f16243ca0d
[16]: https://devcenter.heroku.com/articles/fork-app
[17]: http://blog.powma.com/content/images/2014/May/Repo-s—Part3.png
[18]: https://devcenter.heroku.com/articles/mongohq#upgrading-your-database
[19]: https://devcenter.heroku.com/articles/mongohq#backups