Goal: To learn how to build a simple website using MEANS stack

Pre-requisites: Understanding on how to code (if you know how to code, that’s fine enough)

Requirements: Windows Machine (MacOSX or Linux is fine… we just need to install Node JS differently… please approach me on how to install it)

What to do:

1. Download nodejs installer at http://nodejs.org/

2. Download mongodb zip file at http://www.mongodb.org/downloads

3. Install nodejs to PC… To know if it’s working…

Go to command line,

and type node

then type console.log("Hello World");

then when you press enter, it will show "Hello world"

4. Unzip mongodb to C:\mongodb (rename the long mongodb folder name to mongodb)

What to do next?

Go to workshop…

We will do the following…

Install Express JS

Create an Express JS website

Create an Express JS API call

Create an Express JS webpage using Jade

Install Sails JS

Install MongoDB-Sails connector

Run MongoDB

Create a Sails JS website

Create a Sails Model

Create a Sails Controller

Create a Sails View

————————————–

1) Once node.js is installed, you go to start menu to launch the command line prompt.

image

 

1) Install express framework to your system
npm install -g express

(instantly create webserver for you in just one line)

2) Go to the exercise folder and type
express

This will install the following files as shown below (install an express webserver on your system) 

  create : .
  create : ./package.json
  create : ./app.js
  create : ./public
  create : ./public/javascripts
  create : ./public/images
  create : ./public/stylesheets
  create : ./public/stylesheets/style.css
  create : ./routes
  create : ./routes/index.js
  create : ./routes/user.js
  create : ./views
  create : ./views/layout.jade
  create : ./views/index.jade

3) then switch to the local folder you want to perform the exercise, then type “npm install” to install express and jade to that local folder

npm install

This will install the express and jade to that local folder for you to run the webserver

image

4) Once these packages are installed on the local folder, you can setup a webserver just using one line of code

node app.js

You will see the following response from the console

E:\Research\Learning\MeansExercise>node app.js
Express server listening on port 3000
GET / 200 304ms – 170b
GET /stylesheets/style.css 200 7ms – 117b

 

Here are the items you will see in app.js

/**
* Module dependencies.
*/

var express = require(‘express’); //the requirement
var routes = require(‘./routes’);
var user = require(‘./routes/user’);
var http = require(‘http’);
var path = require(‘path’);

var app = express();

// all environments
app.set(‘port’, process.env.PORT || 3000);
app.set(‘views’, path.join(__dirname, ‘views’));
app.set(‘view engine’, ‘jade’);
app.use(express.favicon());
app.use(express.logger(‘dev’));
app.use(express.json());
app.use(express.urlencoded());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, ‘public’)));

// development only
if (‘development’ == app.get(‘env’)) {
  app.use(express.errorHandler());
}

app.get(‘/’, routes.index);
app.get(‘/users’, user.list);

http.createServer(app).listen(app.get(‘port’), function(){
  console.log(‘Express server listening on port ‘ + app.get(‘port’));
});

Next, we install sails

This is how to install sails: go back to one folder before, then type the comments below to install sails.

 

E:\Research\Learning\MeansExercise>cd ..

E:\Research\Learning>npm install -g sails
npm http GET https://registry.npmjs.org/sails
npm http 200 https://registry.npmjs.org/sails
npm http GET https://registry.npmjs.org/sails/-/sails-0.9.8.tgz
npm http 200 https://registry.npmjs.org/sails/-/sails-0.9.8.tgz

 

Using sails, you can easily create a new model (in the database) by typing the following.

E:\Research\Learning\NewExercise>sails generate model Person
warn: For the record :: to serve the blueprint API for this model,
warn: you’ll also need to have an empty controller.
info: Generated model for Person!

 

Next,  you can generate a controller by typing:

E:\Research\Learning\NewExercise>sails generate controller PhoneSystem login log
out register delete sendmessage
info: Generated controller for PhoneSystem!

This will great a file for you in the controller folder, and you can access the functions by first starting the server by typing

sails lift

image

 

Now you can access the function by typing the following in the line below

image

Written by Shengdong Zhao

Shen is an Associate Professor in the Computer Science Department, National University of Singapore (NUS). He is the founding director of the NUS-HCI Lab, specializing in research and innovation in the area of human computer interaction.