The Stack is a potent new concoction of javascript-flavored tooling, services, and frameworks including…
These ingredients all blend together rather nicely for a full-stack development experience that makes modern single-page application design a breeze.
Just like the classic LAMP stack, the MEAN stack is not an official standard – and it’s definitely not a vendor-specific product either. 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.
While traditional Linux users might intuitively know how to put a basic LAMP stack together, I’d like to offer a few quick introductory notes for those of you who are new to working with the MEAN stack.
As usual, you’ll need an OpenShift account and the rhc
command-line tools in order to follow along with some of the following sections.
Development Dependencies
Npm does a great job of handling most Javascript dependencies. It comes bundled with Nodejs, and can be used to prep your development environment on any major platform:
sudo npm install -g grunt grunt-cli bower yo generator-angular-fullstack
If this command doesn’t work for you, try it again without “sudo”. The sudo
command is not available on all platforms.
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 in development mode.
With your basic setup is completed – you should now be ready to Create, Develop, Deploy, and Scale your own open source MEAN Stack application!
1. Create your application
Yeoman (or “Yo”, for short) is an npm-installable application templating system. We will be using Yo’s angular-fullstack
generator to scaffold out our MEAN stack application:
yo angular-fullstack YOUR_APP_NAME
When prompted, I usually answer “yes” to every available option (except for Sass & Compass support) as the generator goes to work.
Now that your development environment is ready to go, initialize your remotely-hosted OpenShift environment like so:
yo angular-fullstack:openshift OPENSHIFT_APP_NAME
When these tasks are completed, additional usage notes will be printed to the screen. The second command can be run multiple times in order to setup additional OpenShift hosting environments (as long as your account includes sufficient capacity to carry out the request).
2. Develop
Grunt really provides a nice set of tools for assisting with dev task automation. It can be used to watch your files, and push edits out to any connected browsers – 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.
In the next section we’ll learn how to take advantage of a secondary git repository – automatically created by Yeoman and Grunt, in order to keep track of our project’s build results, and distribute them out to the cloud.
3. Deploy
Grunt can also help run your tests, and combine and minify your client-side sources in order to optimise your code:
grunt build
This generates a new build of your application, which will be placed in your project’s dist
folder:
cd dist
The dist
folder includes a separate deployment repo. Include a brief note about this release as youadd
and commit
it for deployment:
git commit -am "Launching our first BETA release - Ship it!"
Finally, use git push
to send updates your remote OpenShift hosting environment:
git push YOUR_OPENSHIFT_APP_NAME master
LAMP stack afficianados should pause and take note: Your old stack probably never included a build / optimization process, or a complete development workflow.
If you’re still not impressed, get ready to see the MEAN stack go from development mode into full-on “Hulk mode” when its let loose on an open platform:
4. Scale
Scaling 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 Online’s free plan includes support for running up to three containers concurrently. You can increase your account’s capacity by upgrading to OpenShift Online’s Silver or Bronze plans, or by setting up your own open source cloud.
What’s Next?
- Tell us about your experiences with MEANStack on OpenShift via Twitter or G+
- Find out how easy it is to assign a custom domain name to your applications
- Upgrade to OpenShift Online’s Bronze plan to access additional scaling capacity, and the ability to add your own custom SSL certificates
- Help us find your questions on StackOverflow by using the OpenShift and MEAN Stack tags
The post Yeoman serves up a real M.E.A.N. Stack appeared first on Platform as a Service Magazine.