Getting Started on Node.js and MEAN stack

I have heard enough good things about Node.js and finally gave it a go. Let me tell you - it's awesome!

If you are in a hurry, get this: I created a simple To-do list web app using MEAN stack by following a great tutorial. I have put all my codes in github. And this is how a MEAN stack generally looks like:

Generic MEAN stack

Node.js? Huh?

For those who don't know, Node.js is a technology started in 2009 and has gained a lot of traction particularly for building real-time web apps.

I have had more experience with traditioal web serving technology stack such as LAMP, i.e. Linux, Apache, MySQL, PHP. With Node.js, similar stack known as MEAN stack has been created to serve web requests. MEAN stands for

  • MongoDB - a NoSQL-based database
  • ExpressJS - a module of Node.js that provides a framework to serve web requests
  • AngularJS - a JavaScript library
  • Node.js - "a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications".

LAMP and MEAN stacks are both open, free and scalable. So why spend the time and energy to pick up a new set of tools? There are many reasons. These two are what I found compelling:

  1. Potential cost savings. The same hardware can serve a lot more concurrent web requests using MEAN stack compared to using the tranditional stack. $avings means business!
  2. MEAN stack allows end-to-end data creation, processing and storage to be done in JSON format. This reduces development/debugging/testing effort required in converting data from one format to another. $avings means business!

A Simple Web App - a To-do List

There are many ways to start learning Node.js. Perhaps too many. In the end I followed this tutorial, both part 1 and part 2.

It is a great intro because it provides all source codes of a small but complete web app, and also explains in high level how various components work together. At the end of the tutorial I have created a simple yet working todo-list web app. To quote from the author - how badass is that?

Before I started, I thought, won't it be great if I know how this web app would look like after I finish? Well, here is my contribution for you all: The to-do list in action. I've shared the codes in GitHub with a generous doze of comments, and created the diagram below to illustrate how the components work together.

MEAN stack of a todo list sample app

The tutorial was good, however, there were still some minor problems when I followed it. I suppose you may hit these issues too and my notes below may help. I did the following in my local environment in a MacBook Pro.

  • Installed Homebrew
    • After installing, ran brew doctor to look for outstanding issues.
    • Some minor issues were found:
      • There was a warning saying Mono.framework may cause issues later on. This can be ignored.
      • There was a warning saying /usr/local/etc isn't writable, I ignored it too.
  • Installed mongodb using Homebrew
    • After installing, ran mongod to start the database process, and ran mongo test try connecting to it.
    • There were permission errors and I had to changed ownership from root to myself for these directories
      • /usr/local/var/log/mongdb
      • /usr/local/var/mongdb
  • Installed ExpressJS globally
  • Installed bower globally
    • Ran into an issue that the bower executable is sitting in /usr/local/lib/node_modules/bower/bin, but it is not in the system path and therefore cannot be excuted anywhere.
    • I'm not really sure why this happened. It may have been due to the fact that I installed Node.js manually before, and installed bower manually before as well, before installing Homebrew.
    • To resolve this issue, I uninstalled bower sudo npm uninstall -g bower and changed ~/.npm ownership to myself sudo chown -R 'whoami' ~/.npm ("whoami" in open apostrophe), and then reinstalled bower globally again.
    • This time I can see the bower executable linked from /usr/local/bin directory.
  • Installed AngularJS using bower.
  • Created blank ExpressJS app and modified it according to the tutorial to make it a To-do List management tool.
    • In step 5 of Part 2 tutorial, for some reason the end-to-end test runner would give the error Unknown provider: $animateProvider <- $animate. This was in the test step browser navigate to '/'. However, the website can still be browsed.
    • In step 7, I initially missed out a change in app.js, where routes.index needs to be given a parameter and become routes.index(todos). That made a frustrated me debugging a blank browser screen for quite some time!
    • In step 9, instead of having datepicker(ng-model="newTodo.due"), it should be div(ng-model=”newTodo.due”): datepicker() or the selected date will not be effective.
    • After step 12, for some reason, the website still will not refresh the data automatically at the set time interval.

How It Works

  • The todolist.js is the entry point of the application and carries out various bootstrapping tasks.
    • Most importantly, it uses Express facility to set up the handling of various GET and POST http requests, so that they will be handled by other scripts, e.g. routes/index.js and user.js.
  • When a GET request is sent to root path,
    • index() in /routes/index.js will be called to handle it.
    • Todo.find() will be called to retrieve todo items in database.
    • render() will use index.jade to construct the final HTML page.

Reflection

Web development landscape has evolved so much in the last few years, dynamic, sophisticated and beautiful web app can be created so much more easily now.

However, the variety of tools that need to be learnt and mastered have also exploded. With this simple To-do list web app, we have come across the following tools/technologies:

  • Homebrew
  • Node.js
  • Jade
  • ExpressJS
  • bower
  • Bootstrap
  • AngularJS
  • mongoDB

This can be daunting for newbie. Fortunately they are also not too difficult to learn. My learning process follows the following path, it may help you on yours:

  1. Understand which tools are used for backend and which are for frontend.
  2. Find out where unfamiliar syntaxes come from. E.g. {{some variable}} is used by AngularJS. title= pageTitle is used by Jade.
  3. Understand how variables are passed from backend to frontend and vice versa.
Getting Started on Node.js and MEAN stack
Share this