How to Install MEAN on Ubuntu 16.04

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:

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

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

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:

  • 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:

  • jQuery: most popular JavaScript library with powerful high level functions to manipulate DOM elements, make Ajax calls, etc.

  • 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 minifylintetc. 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 gulpwe 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:

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

Finally, if you go to your browser and type http://localhost:3000you will see something like this:

user_54364_5817308253c07.png_800.jpg

Conclusion
  1. We have learned what MEAN stack means, and which technologies it is made up of.

  2. We have installed MongoDB and Node.js in our system, along with both npm and bower as package managers.

  3. We learned what npm and bower are, and how powerful and useful they can be.

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




  • post-author-pic
    Kurt M
    10-31-2016

    Very nice guide, Fran! :)

  • post-author-pic
    Francisco S
    10-31-2016

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

  • post-author-pic
    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

  • post-author-pic
    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.

  • post-author-pic
    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!

  • post-author-pic
    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

Looking For Team Training?

Learn More