MEAN Stack Tutorial For Beginners

This tutorial is intended for beginners to understand the MEAN stack and all its components. It will not dive deep into technical subjects and will offer only a beginner’s approach to it. By the end of this tutorial you will be able to build a basic API with the MEAN stack. It is assumed the reader has some programming background (better in JavaScript).

What is the MEAN stack?

The MEAN stack is an acronym with the initials of the 4 technologies used in the stack. There are many alternative choices to many of them but in this tutorial we will approach to the classic MEAN, this is:

• MongoDB for the database management.
• ExpressJS for the web framework.
• Angular for the front-end framework
• NodeJS for the application server.

MEAN is being used by full stack developers because all of their technologies are JavaScript based. With this, you don’t need to learn many programming languages and you can do almost everything with the same knowledge. It is much preferred the reader has some background in JavaScript because of that, but we will explain everything so complete newbies are welcome as well.

SETTING THINGS UP

We will use an open source full stack solution for MEAN applications from meanjs.org. It will be useful for us because it has the templates we need as we will use as many templates as possible in order to save time and energy.

• First thing you need to download and install GIT. Get always the latest version of it because previous versions may fail and report errors.
• We will use the Node 0.12.0 version. You can download it here: Node.js
• And also we will use MongoDB.
• Bear in mind the installation of MongoDB may require some configuration.
• MongoDB Windows installation docs for windows users.
• MongoDB OXS installation docs. For Mac.

 Next we will have to install some packages with the NPM Package Manager. This will be installed as a part of Node.js and it is just useful to download the packages we need. We will have to install the following packages:

• Bower: This is another package manager to manage the packages for Angular.
• Grunt-cli: As we will run some Grunt tasks from the CLI we will need this package. This is used mostly to automate tasks.
• yo: We will use this to run Yeoman generators from the CLI. Yeoman is used to scaffold projects or useful parts with the yo command.
• generator-meanjs: This is a Yeoman generator used for Meanjs. We will scaffold components of our app with this. This is all to save us typing and time.

Once you are in the terminal you have to run the following commands assuming you are on a Windows machine and you are using the Git bash emulator:

npm install -g bower

npm install -g grunt-cli

npm install -g yo

npm install -g generator-meanjs@0.1.12

Also, you will need a place to put your stuff on. So, choose it and create the directory or folder NorthwindNode and get into it. On the console, you can do it with the following commands:

mkdir NorthwindNode

cd NorthwindNode

Now enter the following CLI command so start templating the app with the generator-meanjs package we previously installed:

yo meanjs --skip-install

There you are going to have to answer a very simple series of questions but in order to not bore you with the simple things just choose the name you want for your app, choose NO for the option “Would you like to generate the article example CRUD module?” and leave the rest by default. You can change anything at your own will if you know what you are doing. This will take some moments to generate the app and then you will have the following folders and files created:

• app: Here is the place for the server side code.
• Config: Here there will be different settings.
• Node_modules: All the packages from NPM will be saved in this folder.
• Public: Here is the place for the front-end code.
• Other files for configuration and setup.

Pay close attention to the following files, because they are the most important for the API:

/server.js – this is used to start the API on the server.

/ config/express.js – Used to start the Express web framework we will be using with all the configuration.

/gruntfile.js – The grunt task runner needs this for configuration.

Now, with the NPM we will install the dependencies of our app with the following commands:

npm install --dev

bower install

RUN THE APP

We will have to start up the processes for the database and the web server prior to run the app, first to start the database you have to open a new CLI window and prompt the following assuming you are on Windows:

C:\mongodb\bin\mongod.exe

So, if you get the following message as the last line of the mongod output, everything went fine:

[initandlisten] waiting for connections on port 27017

And then we will start the server in a new terminal window by entering:

npm start

And if all went right you will get the following message:

MEAN.JS application started on port 3000

If you want to see the default page you can browse to http://localhost:3000.

As you can see there is already a lot of functionality for you to explore and this will save us a lot of time and effort. Get used to use templates and reuse code as much as you can, because this is the wisest part of programming. Don’t do yourself what others did for you is a general rule of thumb you should follow at all times, when programming in MEAN or not.

Actually what the npm start is doing is just running the command Grunt. You can verify this by opening the package.json file and taking a look at the section saying:

  "scripts": {

    "start": "grunt",

    "test": "grunt test",

    "postinstall": "bower install --config.interactive=false"

  }

Then run the following command to perform some tests:

npm test

If for whatever reason they fail and you get an error “cannot find module socket.io-client” re-install the karma test runner by entering:

npm install karma

You will see different tests to be performed as long as you still have your database running. Testing is beyond the scope of this tutorial so we will not explain what’s going on here.

The last thing remaining is a text editor. You can use any of your preference but we recommend Sublime Text.

Continue on Part 2