A Quick-Start Guide to the MEAN Stack (on a Mac)

Want to get a web application up and running quickly? Consider using the MEAN stack – MongoDB, ExpressJS, AngularJS, and Node.js. In this quick-start guide I’ll walk you through the process of getting everything set up properly with a MEAN stack on your Mac, then we’ll jump right in to developing a simple web application.

What are the technologies in the MEAN stack?

The MEAN stack consists of:

  • MongoDB – a NoSQL database. Consists of a set of Collections, which hold a set of Documents. Each Document is a set of key-value pairs, and is analogous to a JSON object. One key difference between a Document and a JSON object is that a Document is in BSON format, which is a binary form of JSON.
  • ExpressJS - a Node.js web application framework. Provides robust set of features for building single, multipage, and hybrid web applications.
  • AngularJS – a Javascript UI framework for web apps. It lets you extend HTML’s syntax and works very well for single-page applications.
  • Node.js – a server-side Javascript runtime environment. Node.js uses an event-driven, non-blocking I/O model based on the V8 Javascript engine.

Set-up

Install Homebrew

Before installing the MEAN stack on your Mac, you’ll want to ensure Homebrew is installed. Homebrew is a package manager for Mac that will make installing everything in the MEAN stack much simpler. First, check if you have Homebrew installed by opening up the terminal and typing:

brew help

If it is installed, proceed to install Node and npm (node package manager). Otherwise, install it by running this code:

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Then run:

brew doctor

Finally, you may have to set up the permissions of your /usr/local folder by running this code:

sudo chgrp -R staff /usr/local
sudo chmod -R g+w /usr/local
sudo chgrp -R staff /Library/Caches/Homebrew
sudo chmod -R g+w /Library/Caches/Homebrew/

The code above assumes your user’s group is staff. You can check your usergroup by typing this in the terminal:

id

It should print out a long list of different variables, with the 2nd and 3rd ones being gid=xx(staff) groups=xx(staff). If your group is different from ‘staff’, then modify the provided code accordingly with your group name.

Install Node and npm

Run this:

brew update
brew install node

Check that it succeeded using:

node -v
npm -v

Install MongoDB

brew install mongodb

Next, create the data directory for the mongod process to write data:

[sourecode]sudo mkdir -p /data/db[/sourcecode]

Then update the permissions of the directory:

sudo chgrp -R staff /data
sudo chmod -R g+w /data
Check MongoDB is working

Run:

mongod --httpinterface

The –httpinterface part allows you to access the interface via your browser (which is disabled by default). Navigate to http://localhost:28017/. You should see a web interface that provides overview, clients, dbtop, and writelock % rows, as well as the log.

Go back to your terminal and hit control + c to shut down the server.

Install Bower

Next, install Bower, which you’ll use to manage your front-end packages:

npm install -g bower

Install Grunt

Up next is Grunt, which is a task runner that helps you automate your development process (minification, compilation, unit testing, etc.):

npm install -g grunt-cli

Install Yeoman

We’re not done installing programs yet. Let’s set you up with Yeoman, a generator that provides scaffolding for projects:

npm install -g yo

Install MEAN.js

You’re finally ready to install MEAN.js, a generator that helps you create a MEAN.js application, a CRUD (Create, Read, Update and Delete) module, Angular module, and other AngularJS/Express entities.

npm install -g generator-meanjs

Start creating your first application

Now that you have everything set up, let’s start working on a simple application. First, create a new project folder. My folder is located at /Users/ryanwolniak/Development/MEAN/p1.

cd /Users/ryanwolniak/Development/MEAN/p1

If you’re unfamiliar with how to create a new directory, you’ll want to run a command similar to this first:

mkdir -p /Users/ryanwolniak/Development/MEAN/p1

With your project directory created, generate your application with yo:

yo meanjs

You will be asked a number of questions. For the Mean.js version I chose 0.4.1. Press enter when asked for a folder, then call your project whatever you like. I called mine p1. For the description, describe it however you wish. Add simple keywords if you like, and put your name down as the author of the application. When asked if you want to generate a CRUD module and a chat example, type yes for both. Then wait for the files to be generated.

What to do if the generator fails

If the generator fails, try running the following code:

npm config set registry http://registry.npmjs.org/ --global
set NODE_TLS_REJECT_UNAUTHORIZED=0

Then ensure that you have accepted the XCode license by running:

sudo xcodebuild -license

Scroll all the way to the bottom of the license and type ‘agree’.

If prompted, close and reopen your terminal. Then install nvm:

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bash

Switch your node version to v0.12.7:

nvm install 0.12.7
nvm use 0.12.7

If prompted, close and reopen your terminal.

After running the above code, delete the mean folder that was created from the first time you ran ‘yo meanjs’ (it should be in the directory you ran ‘yo meanjs’ from). Then retry the generator:

yo meanjs

After that, you are almost ready to run your application. Change directories to the directory you generated the files at:

cd /Users/ryanwolniak/Development/MEAN/p1/mean

Then install the ruby gem sass:

sudo gem install sass

Run your application

Let’s start your application up!

First, start MongoDB:

mongod &

Note: the & symbol will allow mongod to run in the background so that you can start up your application. Speaking of which, run:

grunt

Your application should now be up and running. Navigate to http://localhost:3000/

You should see a screen similar to this one:

MEAN.JS Sample Application

Stopping your application

Want to end your application? If your terminal is still up, hit ‘control + c’. That should stop the application. But mongod will still be running in the background. To stop mongod, first run ‘ps’ to find a list of processes running on your machine:

ps

Then run:

kill 59178

where 59178 is the process id (PID). If it’s still hung, hit ‘control + c’.

Questions?

Since things sometimes vary from machine to machine, feel free to reach out if you’re having trouble getting any of this working via email or in the comments.

2 Comments

Leave a Comment.