How to Install MEAN on Ubuntu 16.04

Posted on: Oct 31, 2016by: Francisco S

Introduction

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.

Unlike the classic LAMP stack (Linux, Apache, PHP, MySQL), we don’t need to learn different programming languages to work both the client and server side. MEAN uses JavaScript for both.

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.

PREREQUISITES

MEAN uses git as a version control for packages. You can check if you have it already installed executing:

$ git

If you receive a “command not found” error, you should install it using apt:

$ sudo apt-get install git

Install MongoDB

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:

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 MongoDBFile Options manual for full specifications.

Install Node.js

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 thescript. 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.

npm is a package manager for JavaScript commonly used in Node. You can find a lot of packages with powerful code ready to use, so you don’t need to code it yourself. Some examples of npm packages are:

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.ioframework.

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:

$ gulp

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.

Conclusion

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.

What's next?

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.

Kurt M

10-31-2016

Very nice guide, Fran! :)

Francisco S

10-31-2016

Thanks Kurt! Glad you like my first guide here! :D

Kurt M

11-01-2016

You're welcome! I do have one request though.

Do you mind editing the title of your post to include the version of Ubuntu you used? For example, change it to something like: How to Install MEAN stack on Ubuntu 14.04

Francisco S

11-01-2016

Yeah Kurt, you're right (my bad). I'm unable to change the title, only the content (I don't know why). I opened a ticket about this issue and I will change it as soon as they answer me.

Kurt M

11-02-2016

Yeah, we don't have an Edit Title feature added yet, we need to work on that.

If you tell me what version of Ubuntu you used in a reply here, I can get that title changed for you.

By the way I just glanced at your MongoDB guide, I haven't had a chance to get all the way through it yet but it looks like another great guide!

Francisco S

11-02-2016

The new title should be "How to Install MEAN on Ubuntu 16.04". I've contacted technical support, but they told me that you can change it, so nice!

And thanks so much about the MongoDB guide! I'm doing my best, and Christophe is taking care that all is ok (english is not my mother tongue). I'm so happy to contribute with this community :D

Alket S

12-08-2017

Hello, I got the warning of movin away from bower to yarn. Is bower still used or yarn is better (the web says so)? THanks

Francisco S

12-08-2017

Hi @tuxalket ,

There are multiple people suggesting moving to npm (or yarn) + webpack instead of keep using bower (I suggest the same). You can read more about it on this link: https://bower.io/blog/2017/how-to-migrate-away-from-bower/

yarn as a few advantages over npm, so in my opinion is more how you feel about it (if you prefer one over another for any personal reason). I tried both, and I like both, but in my day-to-day I still use npm.