MEAN Part 1 - Setting up a development environment for the MEAN stack

8 years ago

Summary

In this tutorial we will be setting up a development environment for the MEAN stack. If you already have a development environment, you can skip ahead to Part 2 of this tutorial.

What is MEAN?

For those of you unfamiliar with the MEAN stack, here is a very brief description. I won’t be providing a deep dive in this tutorial, but will be adding additional content going forward. For further information, please check back often at my site johnlivingston.io.


Primary Tools

  • M - MongoDB - a popular open source NoSQL database. For the naysayers out there, you should know that Google, Amazon, and Microsoft all provide MongoDB instances in the cloud.
  • E - Express - a web application framework that works in conjunction with Node.js. You can think of this as middleware for handling things like requests, responses, and routing.
  • A - AngularJS - a JavaScript framework developed by a team at Google for patterning MV* type of web applications. In the last couple years it has eclipsed a number of similar frameworks in popularity.
  • N - Node.js - a light-weight platform for creating network applications and it was built employing Google’s V8 JavaScript engine. For our purposes here, this is simply a way to create a web server using only JavaScript.

Additional Tools

  • Grunt - a tool for building, previewing, and testing your web application
  • Bower - a package manager for handling front end dependencies like AngularJS, Bootstrap, or Lo-Dash.
  • Yeoman (Optional) - used for scaffolding and creating workflows for web app"lications.
  • Git (Optional) - Git is used for source control and for deploying to Heroku.
  • Heroku CLI (Optional) - Heroku CLI for common Heroku tasks.

Code Editor Considerations You will be editing JavaScript, HTML, and CSS, so you are welcom to use any text editor or IDE that supports your OS. I always recommend using something you’ll feel most productive with. Lately I have been partial to JetBrains WebStorm (Mac / Windows), but I have also used SublimeText (Mac / Windows), and Microsoft Visual Studio (Windows). You will also be using the command line, so are welcome to use any alternative command line tools.


Package Manager Installation (Optional)

For the Mac I recommend using a package manager where possible Not only does it streamline the process so you don’t have to go to multiple websites and download files separately, but it also makes uninstalling more straightforward. That being said, Node.js, MongoDB, Git, and Heroku Toolbelt all provide installation packages for both Mac and Windows. You will just need to run the npm commands to install the remaining tools.

Windows has a package manager called Chocolatey that has a ton of potential, but I just can’t recommend it as the packages tend to be outdated versions.

  1. Installation - From the terminal, run the following command:
ruby -e "$(curl -fsSL //raw.github.com/Homebrew/homebrew/go/install)"
  1. Uninstallation - Use the following script: gist.github.com/mxcl/1173223. If you’re also uninstalling Node.js and MongoDB and used HomeBrew to install them, I recommend using HomeBrew to uninstall those first.
  1. Installation - From the command line, run the following command:
@powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-object net.webclient).DownloadString('//chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%systemdrive%\chocolatey\bin
  1. Uninstallation - Remove the folder created during the install, and remove the Environmental Variable. (A bit odd way to uninstall for Windows in my opinion.)

Tools Installation

Node needs to be installed before you run any npm commands. All NPM commands below use the -g or global option, but this is entirely optional. I have also provided a matrix below of basic commands for HomeBrew, Chocolatey, and NPM.

Tool Mac Windows Installer? URL
Node.js* brew install nodejs cinst nodejs.install download and install Mac / Windows nodejs.org
MongoDB* brew install mongodb cinst mongodb download and install Mac / Windows mongodb.org
Grunt npm install -g grunt-cli npm install -g grunt-cli N/A gruntjs.com
Bower npm install -g bower npm install -g bower N/A bower.io
Git (Optional) brew install git cinst git download and install Mac / Windows git-scm.com
Yeoman (Optional) npm install -g yo npm install -g yo N/A yeoman.io
Heroku CLI (Optional) brew install heroku cinst heroku download and install Mac / Windows Heroku CLI

Note (Windows Only): You might need to add the Environmental Variable for MongoDB, so will have the MongoDB commands available globally when you open the command prompt. Right click Computer and click Properties. Advanced System settings → Advanced → Environmental Variables, open up Path and append the following: C:\Program Files\MongoDB 2.6 Standard\bin


QA or Production Environment (Optional)

  • Heroku is an robust cloud service for creating and deploying web applications. With very little effort, you can create a QA or staging environment for testing or even a production environment with a few additional DNS tweaks. Signing up is free and does not require a credit card.
  • mLab or a target="blank" title="MongoHQ" href="//mongohq.com">MongoHQ - These are both “MongoDB as a service” providers that provide free services for hosting your MongoDB environment. You can sign up independently, or add them as features using Heroku’s Add-On functionality. I will be using mLab in this tutorial, but setting up MongoHQ should be very similar.

Appendix

Installation Troubleshooting and Validation

  • MongoDB - You need to always ensure that MongoDB is running, and this project assumes you are running on the default port of 27017. If it is not running, here are a number of ways to start it.
  • Running Ad Hoc - You can create a directory anywhere you’d like for storing the data. Once you have done this, run the following from the command line:
mongod --dbpath <path>

Instructions: From the command line run c:\program files (x86)\git\bin\ssh-keygen When prompted enter: c:\users[yourusername].ssh\id_rsa Use passphrase if desired Run heroku keys:add and follow the prompts.

Package Manager Basic Commands

Action HomeBrew (Mac) Chocolatey (Windows) NPM (Mac / Windows)
Search brew search <name> choco search <name> npm search <name>
Package Install brew install <name> cinst <name> npm install -g <name>
Package Upgrade brew upgrade <name> cup <name> npm update -g <package
Package Uninstall brew uninstall <name> cuninst <name> npm uninstall <name>

Training Resources

Pluralsight

  • Building AngularJS and Node.js Apps with the MEAN Stack (Joe Eames) - I can’t say enough about Joe’s excellent course and he does a much more detailed job of digging into every aspect of the MEAN stack. The patterns and organization in his course are very similar to what you’ll see in the MEANJS.org implementation.
  • There are a number of other courses on MondoDB, ExpressJS, AngularJS, and Node.js. I have taken a number of them and they come very highly recommended.

References

AngularJS angularjs.org
Bower bower.io
Chocolatey (Windows Install) chocolatey.org
Chocolatey (Windows Uninstall) github.com/chocolatey/chocolatey/wiki/Uninstallation
ExpressJS expressjs.com
Git git-scm.com
Grunt gruntjs.com
Heroku heroku.com
Heroku CLI devcenter.heroku.com/articles/heroku-cli
Homebrew (Mac Install) brew.sh
HomeBrew (Mac Uninstall) gist.github.com/mxcl/1173223
MEANJS.org meanjs.org
MongoDB mongodb.org
MongoDB (Run as Window Service) Configure a Windows Service for MongoDB
MongoDB (Start automatically on Mac) How to Start MongoDB Automatically When Starting Your Mac OSX
MongoHQ mongohq.com
mLab mlab.com
Node.js nodejs.org
Pluralsight MEAN Course (Joe Eames) pluralsight.com/training/Courses/Description/building-angularjs-nodejs-apps-mean
Yeoman yeoman.io

* Node.js and MongoDB both provide installation packages for Mac and Windows.

** NPM uses -g as an option for global installation.

Discuss on Twitter