An introduction to the MEAN developer’s stack

Welcome to get MEAN (MongoDb, ExpressJS, Angular.js and Node.js). Here’s a few great tutorials and resources to get you started with MEAN on Windows. Best of all, you can use Webmatrix 3 from Microsoft, which is entirely free.

First, What is MEAN? Valerbi Karpos of MongoDB’s post on MEAN here defining the stack.  I believe he’s credited with being the originator of the phrase –http://thecodebarbarian.wordpress.com/2013/04/29/easy-web-prototyping-with-mongodb-and-nodejs/ . Basically MEAN is a pure JavaScript stack conglomeration for full spectrum development.  Components areof MongoDB, ExpressJS (sometimes BackboneJS), AngularJS, and Node.Js. M-E-A-N. Valerbi does a good job of spelling out some of the synergies present.

So here’s my favorite links in each of the MEAN categories.  Enjoy.  Got extras talking about Azure + MEAN?  Post them in the comments and lets build the article base.

Via Azure – Why you gotta be so MEAN?

WebMatrix ships with site templates that make it easy to get started. The WebMatrix Node.js starter template is a starting point for a full Node.js application—it shows examples of routing, middleware, custom errors, and more. The WebMatrix Node.js starter template is built on express, a flexible framework for building web applications. For more information on express, visit http://expressjs.com.

Note: A full explanation of Node.js or express is beyond the scope of this article. For information on Node.js and express, see http://nodejs.org/ and http://expressjs.com.

via How to Use the Node.js Starter Template in WebMatrix

This article will guide you to start building up a website using Node.js using the MEAN stack. I will try to also help you with setting up your basic tools/infrastructure for developing the application like setting up node.js, mongodb etc. I am assuming you have some basic knowledge about Node.js and Javascript along with HTML etc. However even if you are new to node.js or the other technologies involved don’t worry, as the article involves a couple of different technologies, I’ll just try to scratch the surface.

What does the MEAN acronym stand for?

  • M – MongoDB (NoSQL document store database)
  • E – Express (Web framework for use in Node.js)
  • A – Angular.js (Client side Javascript MVC framework)
  • N – Node.js

The advantage of using this MEAN stack is all the components are very robust and popular and Javascript is used as the common language on both the client and server side. Also Node.js and MongoDB couple together very well.

I will define the popular technology stack below by category which is popularly used. I might not be using all the technology stated below in details but knowing the entire stack would help know what fits where.

Technology Stack Classified

  • Client
    • HTML5/CSS3
    • Angular.js as MVC framework
    • Javascript/Jquery
    • Bootstrap for responsive design
  • Server
    • Node.js
  • Data Access and ORM
    • Mongoose
  • Database
    • MongoDB

Keep in mind that although we are using the term ORM above in Data access, these NoSQL databases doesn’t define any schema so Mongoose might be a bit different than the other Object Relational Mappers like NHibernate or Entity Framework.

Via Node.js introduction using MEAN stack with WebMatrix

In this blog post, I will demonstrate how to build a web app with Node.js and MongoDB, and will deploy it on Windows Azure as a Windows Azure Web Site. Firstly, I will create a web site with Node.js, Express.js, Mongoose and MongoDB. Then I will create a MongoDB database on MongoLab, which is a MongoDB as a service hosted on Cloud, and finally deploy the web app to Windows Azure Web Site. The source code for the demo app is available on Github at https://github.com/shijuvar/NodeExpressMongo

About the Demo Web App

This is a simple Task management application which provide the functionality for add, edit, delete and list out the Tasks. The home page will list out the uncompleted  Tasks and List page will list out all tasks.

Node.js modules for the web app

The following NPM modules will be used for this demo web app.

  1. Express.js – A light-weight web application framework for Node.js
  2. Mongoose – MongoDB object modeling framework for node.js
  3. Jade – A server-side view engine for Node.js web apps, which will be used with Express application

Via Building and Deploying Windows Azure Web Site with Node.js and MongoDB by using Microsoft WebMatrix

The empty site provides a very basic example of using an http server – the same sample that’s available on nodejs.org. The Express Site is a basic application generated using the scaffolding tool in the Node.js framework express. The Node Starter Site is where things start to get interesting. This boilerplate is hosted on GitHub, and shows how to implement sites that include parent/child layouts with jade, LESS css, logins with Twitter and Facebook, mobile layouts, and captcha. When you create a new application using any of these templates, WebMatrix 2 is going to ensure node, npm, and IISNode are installed on your system. If not, it will automatically install any missing dependencies. This feature is also particularly useful if you are building PHP/MySQL applications on Windows.

Via NODE.JS MEET WEBMATRIX 2

 

Using Yeoman, Grunt and Bower with AngularJS

A fantastic tutorial that introduces you to AngularJS and some of the useful tools to help you to get to grips with it:

  • Generating a bare bones AngularJS app with Yeoman
  • Using Grunt to speed up development and help perform repetitive tasks
  • Using Bower to add third party plugins/frameworks
  • Making minor changes to your AngularJS app

via Kickstart Your AngularJS Development with Yeoman, Grunt and Bower – SitePoint.

Learn AngularJS With These 5 Practical Examples | Tutorialzine

By now you’ve probably heard of AngularJS – the exciting open source framework, developed by Google, that changes the way you think about web apps. There has been much written about it, but I have yet to find something that is written for developers who prefer quick and practical examples. This changes today. Below you will find the basic building blocks of Angular apps – Models, Views, Controllers, Services and Filters – explained in 5 practical examples that you can edit directly in your browser.

via Learn AngularJS With These 5 Practical Examples | Tutorialzine.