The MEAN stack is a collection of technologies used to develop web applications. This stack is formed by four technologies where it takes the acronym: MongoDB as a database system, Node.js as a server system, Express as a server side framework and Angular as a client side framework.
This stack provides us mechanisms to create dynamic web applications. To achieve this, the MEAN stack uses a NoSQL database system where we define schemas for our models, but data can have variable sizes in the database. The stack also uses Angular which provides simple functions to handle data and synchronize data with client views using listeners.
In this guide, we will install all needed components, and create an example project using something called the Mean.io boilerplate.
MEAN uses git as a version control for packages. You can check if you have it already installed executing:
If you receive a “command not found” error, you should install it using apt:
$ sudo apt-get install git
Even though MongoDB is included in Ubuntu package repositories, they recommend us to use their repository in order to have the most updated version.
Ubuntu guarantees the authenticity of their packages by using the package’s distributor public key, so we need to import the MongoDB public key first using the following command:
$ sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv EA312927
Then we add their repository to our Ubuntu repositories list:
$ echo "deb http://repo.mongodb.org/apt/ubuntu trusty/mongodb-org/3.2 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-3.2.list
Now, we need to reload our local package database so Ubuntu can use our new repository when we look for the MongoDB package:
$ sudo apt-get update
And finally, we just install it by using the apt command:
$ sudo apt-get install -y mongodb-org
If everything goes well, MongoDB should be installed and automatically running as a service. To check if MongoDB is running correctly, we can execute the following command:
$ service mongod status
And it should return something like:
mongod start/running, process 8247
MongoDB has a configuration file located inside its installation folder (commonly /etc/mongod.conf) where we can define a lot of parameters like default port, the folder where the database will be stored, etc. If you need advanced features, you should check the MongoDB File Options manual for full specifications.
To install Node.js, we can download their code and compile it ourselves or install it directly from the repository. We are going to use the second option in this tutorial, but feel free to download it and compile it by yourself if you feel confident.
Node.js installation is quite similar to the MongoDB installation: we add a new repository and execute the apt command to install the package.
Node.js is more friendly because they provide us a script which will look for the best repository for our system. Using the following command will automatically read this script from a remote location and execute it:
$ curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
NOTE: if you are curious, you can visit the url and take a look at the
script. You will learn a lot.
As we add the repository, we just install it using apt as usual:
$ sudo apt-get install -y nodejs
Node.js has no dependencies, but some npm packages will probably throw errors when compiling. To fix this, we need to install the build-essentials package as well:
$ sudo apt-get install build-essential
Install package managers: npm and bower
If you are familiar with web development, you are probably aware of frameworks and libraries like jQuery or Bootstrap which allow us to create powerful websites in an easy way.
When an application starts to grow and we add more and more libraries, the maintenance of these libraries (versions, upgrades, etc) became more difficult. To fix this, MEAN stack uses two powerful tools which simplify this task: npm and bower.
s3: Amazon S3 high level client for handling S3 uploads (retries, secure requests, progress report, etc).
sharp: high performance image processing to manipulate images (resize, crop, extract regions, etc).
async: powerful library with functions to allow us asynchronous operations (multiple functions in parallel, mapping, execute a function until something occurs, create queues, etc).
mongoose: schema validation, high level functions for saving and much more for MongoDB.
If you have already installed Node.js on your system, npm should be installed as well. You can see what version of npm are you using executing the following:
$ npm -v
If you need more help with npm, you can check their page for further information about parameters, packages, etc.
On the other side, we have bower as a package manager for the client side. Some examples of bower packages widely used by a lot of web apps are:
Bootstrap: framework made by Twitter which provides elements like sliders, tooltips, etc.
moment: to parse and manipulate dates.
Font Awesome: font made of icons.
bower needs to be installed manually but…surprise! We need npm first, so be sure that you have already installed it on your system. If you have npm, execute this command to begin the bower installation:
$ sudo npm install -g bower
The -g option is a parameter to install this package as global. This means that you will be able to execute bower command from everywhere in your system. If you don’t want this behavior, just remove the -g option and bower will be installed in your current folder (we recommend to install bower as global).
Install gulp (optional)
There are several tasks which need to be done before a web app can go from development to production. More common tasks includes minify, lint, etc. To avoid wasting time on doing these tasks manually one by one, we can use gulp.
gulp is a task manager that helps us to define tasks and provide us a simple way to execute them in batch mode.
To install gulp, we use npm again as we did before with bower:
$ sudo npm install -g gulp
Our first MEAN application
Now that we have all technologies installed, let’s code something! You can use your own folder structure and create everything on your own (your own Node.js server, your own Angular controllers, etc), or use a third-party boilerplate. For this guide, we are going to use the Mean.io framework.
Mean.io creates a sample project with a Node.js server already setup and a lot of useful packages, such as Passport (for user login and registration), Angular, Express for Node.js, jQuery, Bootstrap, Mongoose, etc.
To start creating our first project with Mean.io, we need to install their command line interpreter first:
$ sudo npm install -g mean-cli
Then we use the mean command to create a new Mean.io project:
$ mean init myapp
Where “myapp” is the name of our application (a folder with this name will be created, so be sure that you’re not using a duplicate name).
Mean.io interpreter will ask us to name our app, but we can press the Return key to use the same name as the folder name. When all is set, we need to go in our project folder:
$ cd myapp
And install all dependencies using npm (server side):
$ sudo npm install
And bower (client side):
$ bower install
This will take a couple of minutes because packages need to be downloaded and installed, so be patient.
When everything is installed, execute gulp to initialize the project:
Mean.io has a powerful gulp file with a lot of tasks such as linter, minify (only in production environment), auto reload on changes, etc. If you want to go deeper and customize this, take a look at some gulp recipes to see how it works.
Finally, if you go to your browser and type http://localhost:3000, you will see something like this:
We have learned what MEAN stack means, and which technologies it is made up of.
We have installed MongoDB and Node.js in our system, along with both npm and bower as package managers.
We learned what npm and bower are, and how powerful and useful they can be.
We also created a sample project using the Mean.io framework.
This is an introduction guide on how to install all technologies which make up the MEAN stack, but we didn’t cover other aspects more related to building appications. In future guides, we will learn how we can interact with our Mongo database, create our own Angular controller, and more.