Learn How to Install MEAN Stack on macOS

The following is a thorough guide that will showcase how to take advantage of the MEAN (MongoDB, Express.js, AngularJS & Node.js) Stack.

If you’re looking for an easy to follow MEAN Stack installation guide? MEAN.IO has a pretty legit one! But if you’re a Homebrew fan like me and don’t mind spending a few hours installing, configuring and troubleshooting packages; this guide will help you get started:

Note: This guide assumes a clean install of macOS, Command Line Tools and Homebrew.

If you’re still reading this; ha. I assume you’re a front-end developer? And, chances are you’re using a LAMP Stack! Which comprises of the following components:

Linux Server OS on which you’re running an
Apache web server with
MySQL as a database and
PHP as the backend language

And you maybe asking yourself why use the MEAN Stack? The idea is quite simple actually:

MongoDB as the database
Express as the web framework
AngularJS as the front-end framework, and
Node.js as the server platform

Also, the following are some of the advantages of the MEAN Stack:

Single language is used in the whole application
Support for the MVC pattern
JSON is used for tranferring data
Node.js’s hude module library
Open source so you can tweak it to your preferences if you’re an experienced user

Let’s begin, go ahead and open your terminal app of choice:

Install MongoDB

brew install mongodb

Let’s test our MongoDB installation:

mongod

mongod is the primary process for the MongoDB system. It handles data requests, manages data access, and performs background management operations.

If you get the following error: Failed to set up sockets during startup. Let’s troubleshoot before moving forward.

This error is caused by the mongodb service not yet started, you can fix this issue by starting the service with the following command:

brew services start mongodb

After starting mongodb services, let’s test it again:

mongod

If you still get the Failed to set up sockets during startup error, let’s continue troubleshooting:

brew services stop mongodb

And let’s type the following. Note: You will be asked to enter your system password:

sudo mkdir -p /data/db

Let’s continue with:

sudo chmod 0755 /data/db

And:

sudo chown $USER /data/db

Now, let’s restart mongodb services:

brew services restart mongodb

Finally, let’s test it one more time:

mongod

And there you have it; congratulations!

The reason of the issue is due to “System Integrity Protection” on macOS, I will not go into detail but you can go ahead and read about it on your own time.

Just for fun let’s go ahead on open the JavaScript shell interface to MongoDB:

mongo

Note: Remember that mongod is the primary daemon process for the MongoDB system, and mongo is the interactive JavaScript shell interface to MongoDB.

If you feel a bit more comfortable with using a GUI MongoDB management tool, I recommend using Robomongo.

Reading documentation is an essential part of being a developer, it might not sound sexy, it’s sometimes tedious, but it’s an essential job to understand what you do and how things work.

Install Node.js without NPM

Note: I prefer to install Node.js without NPM, if you would like to know why please read my NPM Housekeeping blog post.

Let’s install Node.js:

brew install node --without-npm

Now let’s add: ~/.node/bin to your PATH so commands you install globally are usable. I added this line to my ~/.path script, which gets run via ~/.bash_profile.

export PATH="$HOME/.node/bin:$PATH"

Install NVM (Node Version Manager)

Note: This is an optional step. Also, we’re not going to be using Homebrew since nvm does not like how it handles linking!

Using cURL:

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

Using Wget:

wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh | bash

Add the following command to your PATH:

export NVM_DIR=“$HOME/.nvm”
[ -s “$NVM_DIR/nvm.sh” ] && \. “$NVM_DIR/nvm.sh”

Nice! You now have nvm installed.

Install NPM

Let’s tidy things up:

echo prefix=~/.node >> ~/.npmrc

Now, let’s install NPM:

curl -L https://www.npmjs.com/install.sh | sh

Let’s test our NPM installation:

npm outdated -g

If you get the following error:

npm ERR! addLocal Could not install /private/var/folders/bd/2n75y0xx7_54sprgwhmflszr0000gn/T/npm.50276/package

You can fix the issue by running the following command:

npm install -g npm@latest

Now, let’s clean things up:

npm cache clean

Great, you now have NPM installed.

Install Express Using NPM

Note: The following will install express application generator.

npm install express-generator -g

Install NSP (Node Security Platform)

Note: This is optional, Node Security helps you keep your node applications secure.

npm install -g nsp

NSP makes use of the CLI (Command Line Interface) tool to help identify known vulnerabilities in your own projects.

You can run the following command within your project folder:

nsp check

Install AngularJS

AngularJS is a front-end JavaScript framework designed to build single-page applications using the MVC architecture.

Note: Before installing AngularJS let’s install Bower. Bower is a package manager which makes it easier to download and maintain your front-end libraries.

npm install -g bower

Once Bower is installed you can use the following command to install AngularJS:

bower install angular

Bower places all of its files in the bower_components folder in the root folder of your project application, namely in the folder where you executed the bower install command. To install your front-end packages in a different location, go to the root folder of your application and create a file name .bowerrc that contains the following lines of code:

{

directory: mydir/jsscripts

}

Bower, like Node.js uses a config file named bower.json where you can define your dependencies. In order to install AngularJS via the bower.json file, first put the following content in that file:

{

name: MEAN

version: 0.0.0,

dependencies:  {

angular: #version of your choice

}

}

And then execute:

bower install

This will fetch the AngularJS package files and place them under the mydir/jsscripts folder. If you get an ‘Unexpected token n’ error, try the suggestions from StackOverflow; ha.

Congratulations! You’ve learned how to install the MEAN Stack on macOS from scratch.

OceanLab

How to Install the MEAN Stack on macOS