mean_logo The MEAN Stack on OpenShift

The MEAN stack is a potent new concoction of javascript-flavored tooling, services, and frameworks that make modern, single-page application design a breeze:

MEAN

A complete stack for Javascript, comprised of MongoDB, Express, Angular, and Node.

mongodb

MongoDB for a schema-optional, "NoSQL" data store - perfectly suited for working with JSON data

Express

The Express Javascript framework, with a large library of middleware and add-ons - including Mongoose, an ORM for MongoDB

Angular

AngularJS for declarative templating, and easy client-side application design

nodejs

Nodejs, for an event-driven, server-side Javascript runtime - powered by the V8 engine

Just like the classic LAMP stack, the MEAN stack is not an official standard or vendor-specific product. Both stacks simply represent a loose collection of best-of-breed open source solutions that can be easily customized, reconfigured, and replaced as needed. In fact, as LAMP became more popular and it’s related community grew, the "P" which originally just stood for Perl was redefined and expanded to represent PHP and Python as well.

Getting Started

This guide uses Yeoman and the angular-fullstack-generator to set up your development environment. The folks at MEAN.io also provide a nice distribution of MEAN that will run well on OpenShift.

$ npm install -g grunt grunt-cli bower yo generator-angular-fullstack

You’ll also need access to the git command-line tools, and a MongoDB datastore - which can be installed locally, provided as-a-service (see MongoLab or MongoHQ), or made available via port-forwarding. This particular distribution of the MEAN stack is configured to look for a local installation of MongoDB when started in a development mode.

yo-man 1. Create your Application

Scaffold up a new MEAN stack application with Yeoman ("Yo", for short) and the angular-fullstack generator:

$ yo angular-fullstack YOUR_APP_NAME

When prompted, answer "yes" to every available option except Sass & Compass support.

Now that your development environment is ready to go, initialize your remotely-hosted OpenShift environment:

$ yo angular-fullstack:openshift OPENSHIFT_APP_NAME

This command can be run multiple times in order to setup additional OpenShift hosting environments if your OpenShift account has sufficient capacity.

grunt_logo 2. Develop

Grunt provides a nice set of tools for assisting with dev task automation. It includes livereload support for refreshing connected browsers during development - No need to reload the page!

Run grunt serve to give it a try:

$ grunt serve

It’s usually a good idea to store your resulting project source in a version control system. Feel free to add your own top-level git repository by running git init at the root of your project. GitHub, or similar hosting accomodations can be used at this level, to help facilitate source code collaboration.

git-logo 3. Deploy

The initial setup should create a secondary git repository to track of the project’s build results, where client-side sources are combined, minified, and optimised for production use.

Generate a new build of your application in your project’s dist folder:

$ grunt build

Include a brief note about this release as you`add` and commit the new build for deployment:

$ cd dist
$ git commit -am "Launching our first BETA release - Ship it!"

Finally, use git push to send the release to your remote OpenShift hosting environment:

$ git push openshift master

LAMP stack afficianados should pause and take note: Your old stack probably never included a build / optimization process, or a complete development workflow.

4. Scale

Scaling the MEAN stack on OpenShift is easy - especially when working with the angular-fullstack generator, which enables scaling by default during the earlier yo angular-fullstack:openshift step.

You can check your application’s current list of container environments (or gears) with the following command:

$ rhc app show OPENSHIFT_APP_NAME --gears

The command output should include one front-end environment for running nodejs, and a back-end environment for MongoDB.

Scale up your front-end by adding a second instance to your application cluster:

$ rhc app scale-up OPENSHIFT_APP_NAME

Scaling limits can be set via the command line:

$ rhc cartridge scale nodejs -a OPENSHIFT_APP_NAME --min=2 --max=5

Or, in the OpenShift web console:

OpenShift web console scaling

Next Steps

  1. Tell us about your experiences with MEANStack on OpenShift

  2. Find out how easy it is to assign a custom domain name to your applications

  3. Upgrade to OpenShift Online’s Bronze plan to access additional scaling capacity, and the ability to add your own custom SSL certificates

  4. Help us find your questions on StackOverflow by using the OpenShift and MEAN Stack tags