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.
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:
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)"
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:
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
brew update brew install node
Check that it succeeded using:
node -v npm -v
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
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.
Next, install Bower, which you’ll use to manage your front-end packages:
npm install -g bower
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
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
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.
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:
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:
After that, you are almost ready to run your application. Change directories to the directory you generated the files at:
Then install the ruby gem sass:
sudo gem install sass
Run your application
Let’s start your application up!
First, start MongoDB:
Note: the & symbol will allow mongod to run in the background so that you can start up your application. Speaking of which, run:
Your application should now be up and running. Navigate to http://localhost:3000/
You should see a screen similar to this one:
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:
where 59178 is the process id (PID). If it’s still hung, hit ‘control + c’.
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.