Node

pratiktest

6/12/2016 - 3:14 AM

express_course.md

Rendered
Source

Install nvm

use brew to install nvm

brew install nvm

make sure you have this line added to your bash_profile file

export NVM_DIR=~/.nvm

source $(brew --prefix nvm)/nvm.sh

install version of node you want

nvm install v4.0.0

use the appropriate node version

nvm use v4.0.0

Express intall empty express application

npm install -g express-generator

This will create a symlink in bin which points to express module in ~/.nvm/versions/v4.0.0/lib/node_modules/ ~/.nvm/bin/express is the symlink created. This is automatically sourced since .nvm/bin is in the path mentioned in .bash_profile or .bashrc dependending on the shell you use

create a empty dir to install express app

mkdir express

install a default express app

express

This will create the folder structure of the app

install express

in the express folder type

npm install

Start a Project

Create empty dir project1

mkdir project1

cd project1

type express --help

express --help

css option stylus

We will use stylus css option so when we create an app using express use

express --css stylus

package.json

package.json has all the dependencies of the project. it is similar to maven

vim package.json

install app using package.json

npm install

npm install will install app using package.json. It will include all depdencies on package.json

launch the application

npm start

localhost 3000

app starts on localhost 3000 do a curl -i (-i is the get response headers). node js and express have an inbuilt server which launches on port 3000 after npm start

curl -i localhost:3000

What does package.json do

package.json has a dependency section

npm install looks at these dependecies and installs them in node_modules. Do not checkin node_modules

stylus files

.styl files are css preprocessors which have code to generate css. node will read these files and generate css files. These files are in the public/stylesheets

routes

routes is a switch board. currently when you start app it will just have the index view

views

views are present in /views folder. It will have a index.jade which extends from layout.jade

app.js

first block is requires. the next instantiates app and next sets config option. app.use is middleware code. Note the app.use("/", "routes") This says routes has the root index, which will render index.js route

JADE

Jade is a templating engine processed on server side. It has syntax built on indentation

STYLUS

stylus is a css language. It can assign variables to to constants

eg link:color = #FFFFFF. a{color: link-color} instead of repeating FFFFF all around code (similar to public static String in java)

check style.styl in project created

BOOTSTRAP

stacked to horizontal(one of the mostly used features)

we can create a row and in the row can have div with classes .col-mid-1 etc. Search stacked to horizontal in bootstrap site

Bootstrap too comes with less and saas version apart from its css version

STATIC FILES

static files are served using the public folder in the project. If I create a file named hello.html in public folder it can be accessed as http://localhost:3000/hello.html. Basically public is root for static files

TEMPLATES OTHER THAN JADE AND STYLUS

moustache

moustace is tamplating engine which uses curly braces {}. One of the main things in moustache is that it can be used with many languager

Handlebars.js

build only for javascript. it is build over moustache and provides server side and client side templating

to use handlebars put express-handlebars in package.json and install it using npm install, then change your views engine in app.js and then make sure you name views with .handlebars extension

Saas

saas is another preprocessor option built with ruby. with epxress you can use it using express --css compass

less

less is another css preprocessor built with javascript

INTRO TO SOME COMMONLY USED JS LIBRARIES

Passport js

passport js is used to login user basically to authenticate
you can login via facebook, twitter etc
we can also use local username and password system

Mongoose js

Used to access mongo db

Karma Test Runner

Test runner for node js

Mocha js

Testing framework for node js*

Chai

An assertion library for node*

Sinon js, supertest

Sinon js is mocking library, supertest is a helper utility

CREATING APPLICATION

package.json

{
  "name": "project1",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.13.2",
    "cookie-parser": "~1.3.5",
    "debug": "~2.2.0",
    "express": "~4.13.1",
    "jade": "~1.11.0",
    "morgan": "~1.6.1",
    "serve-favicon": "~2.3.0",
    "stylus": "0.42.3",
    "passport": "0.2.*",
    "mongoose": "3.8.*"
  },
  "devDependencies": {
    "chai": "1.10.*",
    "karma": "0.12.*",
    "mocha": "2.0.*",
    "sinon": "1.11.*",
    "supertest": "0.10.*"
  }
}

versioning in node

version is specified as "somemodule": "major:minor:revision"
eg "express": "2.10.3"
2 is major version which signifies incomaptible release change, 10 is minor version which signifies incremental feature release, 3 is revision number which rignifies a bug fix

routes

We will not require the users routes so in app js comment out the following
- var users = require('./routes/users');
- app.use('/users', users);
- delete users.js file in routes folder
build a contact route
- create a file contact.js in routes
- start off with 2 requires to bring in necessary modules
```
var express = require('express');
var router = express.Router();
```
- now we need to make our contact route and export it since we want to make it public
```
  router.get('/',function(req,res){
      res.send("it worked");
  });
  
  module.exports = router
  
```
- note the second arg to get is a anonymous function
- Even if we write code in routes/{app}.js it dosent work until we make changes in app.js
app.js changes
- Where we have the index route import the contact route
```
var contacts = require('./routes/contacts')
```
- Also include use where we have specified index use
```
app.use('/contacts', contacts);
```
supervisor
- restart the server after changing javascript. To void restarting the server again and again we will use supervisor. supervisor just does a ctrl +c and npm start again after we save a file
```
// add supervisor in devdependencies
"devDependencies":{
  "supervisor": "*"
}
```
- Then run npm install
- now supervisor is in your node_modules in bin
- put this script in the scripts section of package.json
```
  "scripts": {
  "start": "node ./node_modules/.bin/supervisor ./bin/www"
},
```
- then say npm start

create user interface

we will use bootstrap to create nice user interfaces for our application
in order to use bootstrap we need to import it in style.styl file in public/stylesheets folder
put the below 2 lines in "style.styl*
also make sure to download the css version of bootstrap and put it in public/stylesheet folder
your stylesheet folder should now contain
- style.styl
- style.css
- bootstrap.min.css
- bootstrap.theme.css

import "bootstrap.min.css"
import "bootstrap.theme.css"

create contacts html for project

create a file list.jade in views folder and put in the contact information html
contact information html file list.jade (note the pipe character | on line 8. This means continue with the name p tag in jade, if that wasnt there the 2 buttons will be squisshed side by side)

create 3 files in views folder

editform.jade

.form-group
  label(for="fullname") Full Name
  input#fullname.form-control(name="fulname", type="text")
.form-group
  label(for="job") Job/position
  input#job.form-control(name="jon", type="text")
.form-group
  label(for="nickname") nickname
  input#nickname.form-control(name="nickname", type="text")
.form-group
  label(for="email") E-mail Address
  input#email.form-control(name="email", type="text")

add.jade

extends layout

block content
  .row
    .col-md-6
      h1 Add a contact
      form(role="form", method="post", action="")
        include editform
        button.btn.btn-primary(type="submit") Add user

edit.jade

extends layout

block content
  .row
    .col-md-6
      h1 Add a contact
      form(role="form", method="post", action="/contacts/1")
        include editform
        button.btn.btn-primary(type="submit") Edit user
    .col-md-6
      h2 Notes
      form(roles="form", method="post", action="/contacts/1")
        dl
          dt Jan 2 2014
          dd Prefers italian food
          dt Jan 19 2014
          dd Just moved into a new office
        .form-group
          label(for="notes")
          textarea#notes.form-control(name="notes")
        button.btn.btn-default(type="submit", value="addnote") Add note

note we have followed DRY principle. Do not repeat yourself, by extracting the common in add.jade and edit.jade into editform.jade

** put the new jade templates in contact.js **

open contacts.js
change res.send to res.render()
render takes 2 parameters
- name of the jade template
- object that needs to be passed in
in short replace the below in contact.js
- res.send("it worked"); with res.render("list", {});
also add a template for add to render the add template

modify contact.js and add the edit and add templates using render

var express = require('express');
var router = express.Router();

router.get('/',function(req,res){
     res.render("list", {});
 });

 router.get('/add', function(req,res){
   res.render('add', {});
 });

 router.route('/contact_id')
  .all(function(req,res,next){
    contact_id = req.params.contact_id;
    next();
  })
  .get(function(req,res){
    res.render('edit', {});
  })
  .post(function(req,res){
    res.send('Post for contact '+ contact_id);
  })
  .put(function(req,res){
    res.send('Put for contact '+ contact_id);
  })



 module.exports = router

add the Contacts button to index.jade

extends layout

block content
  h1= title
  p Welcome to #{title}
  p
    a.btn.btn-default(href="/contacts/") View Contacts

When to use template and when not to (Logic-Less Templates)

Logic is code that makes a decision and acts upon it
JADE takes dynamic data and converts it into html
routes make complicated decisions and chooses what template to show

Dynamic data in jade

we dont have a database so we will create in memory database by using javascript objects
first install the underscore library . cd into the project directory and execute below

npm install underscore --save

You will see that underscore is created in

underscore@1.8.3 node_modules/underscore

--save will install it and automatically add to the package.json as well
now in contact.js add the following line

var _ = require('underscore');

also include two helper functions

function lookupContact(contact_id){
  return _.find(contacts, function(c){
    return c_id = parseInt(contact_id);
  });
}

function findMaxId() {
  return _.max(contacts, function(contact){
    return contact.id;
  });
}

now we want to add a list to show all the contacts

In contact.js
router.get('/',function(req,res){
     res.render("list", {contacts: contacts});
 });

method to post a contact should be updated. We will get the last id and then get data from form and post the data

In contact.js
router.post('/', function(req,res){
      var new_contact_id = findMaxId() + 1;
      var new_contact = {
        id: new_contact_id,
        name: req.body.fullname,
        job: req.body.job,
        nickname: req.body.nickname,
        email: req.body.email
      }

      contacts.push(new_contact);

      res.send('New contact created with id: ' + new_contact.id);
      //res.redirect('/contacts/');
 });

the get method for contacts is same but in order to be compatible we will add the data section

 router.get('/add', function(req,res){
   res.render('add', {contact:{}});
 });

and then we will add lookup_contact method in .all method
Every router needs that so we will avoid code duplication and do it only once

router.route('/contact_id')
  .all(function(req,res,next){
    contact_id = req.params.contact_id;
    contact = lookupContact(contact_id);
    next();
  })

edit method will have the contact as the data to be passed

 .get(function(req,res){
    res.render('edit', {contact:contact});
  })

post method will be to add notes

.post(function(req,res){
  if(!contact.notes){
    contact.notes = [];
  }
  contact.notes.push({
    created: Date(),
    note: req.body.notes
  });
  res.send('Created new note for contact id '+ contact_id);
  //res.redirect('/contact'+contact_id);
})

.put method will be used to update the contact

put(function(req,res){
  contact.name = req.body.fullname;
  contact.job = req.body.job;
  contact.nickname = req.body.nickname;
  contact.email = req.body.email

  res.send('Update succeeded for contact id '+ contact_id);
  //res.redirect('/contacts/');
})

changes to JADE file for dynamic content

initial jade file

  extend layout

block content
    h1 Your contacts
    p Here is the list of your contacts
    p
      a#delete.btn.btn-default(href="#") Delete
      | 
      a#add.btn.btn-default(href="/contacts/add") Add new
      table.table
        thead
          tr
            th
            th Name
            th Nickname
            th Email
          tbody
            tr
              td
                input(type="checkbox", id="1")
              td
                a(href="/contacts/1") Joe Smith 
                | Plumber
              td Joe
              td
                a(href="mailto:joe@gmail.com") joe@gmail.com
            tr
              td
                input(type="checkbox", id="2")
              td
                a(href="/contacts/2") pratik kale 
                | Carpenter
              td Joe
              td
                a(href="mailto:joe@gmail.com") pratikkale@gmail.com
            tr
              td
                input(type="checkbox", id="3")
              td
                a(href="/contacts/3") litesh sajnani 
                | engineer
              td Joe
              td
                a(href="mailto:joe@gmail.com") liteshsajnani@gmail.com

new jade with dynamic content

 extend layout

block content
  h1 Your contacts
  p Here is the list of your contacts
  p
    a#delete.btn.btn-default(href="#") Delete
    | 
    a#add.btn.btn-default(href="/contacts/add") Add new
    table.table
      thead
        tr
          th
          th Name
          th Nickname
          th Email
        tbody
          if !contacts.length
            tr
              td(colspan=4) You should add a contact
          else
            each contact in contacts
              tr
                td
                  input(type="checkbox", id =contact.id)
                td
                  a(href="/contacts/#{contact.id}") #{contact.name}
                  | #{contact.job}
                td #{contact.nickname}
                td
                  a(href="mailto:#{contact.email}") #{contact.email}

Testing

** Full stack testing **

Selenium is a popular Full stack testing tool
it takes control of the browser and takes control of your application as user would
it tests the entire website from css to JS to html to infrastructure to backend to database
Its end to end testing from browser to database
full stack testing is slow
protractor(javascript) and sst(python) can write code to run selenium (we can code tests to invoke selenium)
Also selenium will not make it clear where in code the problem lies. eg we might get error on UI but the problem might be network connectivity at backend or just a temp network glitch or a code error ..we dont know
Hence we write unit tests

Test tools

in package.json check devDependencies we have karma(test runner), mocha(test framework) and chai(assertion library)
We also have sinon which is mocking library
We have supertest which is a test client to test middleware and routes without starting the node app
notice the script section
- we have a start script.so npm start will just help us to start the app
- There is no magic it will just execute stuff in ./bin/www and will start the app
similarly we need something like test
- so in script section add the following
- "test":"./node_modules/.bin/mocha -u tdd"
- scripts will now look like

    "scripts": {
    "start": "node ./node_modules/.bin/supervisor node ./bin/www",
    "test": "./node_modules/.bin/mocha -u tdd"
    },

if we do an npm test now we will get an error since we dont have a folder called test
now say npm test you will see a message saying 0 test passing
In test folder create a file called demo.js. It dosent matter what its called it should just have a .js extension
We will first import chai in demo.js

** First Test **

var chai = require('chai');
var assert = chai.assert;

//test are grouped into suite using describe function
//typically we put suite into a file as same name of module it loads
//so typically we will have 1 describe for a file
//we cannot have a describe inside describe

describe('First test suite', function(){
  x = 0;
  it('Should pass', function() {
    assert.equal(1,x);
  });
});

it function takes a label and a function
label begins with should keyword to describe what the test should do
lets create a beforeEach function in our test suite
beforeEach function runs before every test


var chai = require('chai');
var assert = chai.assert;

beforeEach(function(){

x = x+1

})


describe('First test suite', function(){
  x = 0;
  it('Should pass', function() {
    assert.equal(1,x);
  });
});

now with above the test should pass
lets see another example of beforeEach function
The below test should fail since beforeEach is run for every test. so one test passes but other fails

var chai = require('chai');
var assert = chai.assert;

beforeEach(function(){

x = x+1

})


describe('First test suite', function(){
  x = 0;
  it('Should pass', function() {
    assert.equal(1,x);
  });
  
  it('Should also pass', function(){
    assert.equal(1,x);
  });
  
});

afterEach function runs after every test
lets use after each and fix the above.. we will set x to 0 after each test

var chai = require('chai');
var assert = chai.assert;

beforeEach(function(){

x = x+1

});

afterEach(function(){

x = 0;

});


describe('First test suite', function(){
  x = 0;
  it('Should pass', function() {
    assert.equal(1,x);
  });
  
  it('Should also pass', function(){
    assert.equal(1,x);
  });
  
});

Documentation for chai assert library

chaijs assert

So this is how it goes
- We write a module
- Then we test the module
- Check if things work as expected

** Testing some real code: test-Jade**

This time we will require jade and call a test called jade render
We will add a jade template and make the test fail first
- add a div with word hello
- check the expected result

var chai = require('chai');
var assert = chai.assert;

var jade = require('jade');

beforeEach(function(){

x = x+1

});

afterEach(function(){

x = 0;

});


describe('First test suite', function(){
  x = 0;
  it('Should pass', function() {
    assert.equal(1,x);
  });

  it('Should also pass', function(){
    assert.equal(1,x);
  });


  it('Jade test', function(){
    var template = "#container hi";
    var expected = '<div id = "container"></div>';
    var result = jade.render(template);
    assert.equal(expected,result);
  });

});

In out Project instead of importing jade we will import our module
Otherwise the principles are the same

** Testing http requests **

We need to require supertest for this
We also need to ** require our app ** file
We need to use relative path to our module to get the app file ../app

** Test contact and expect 200 ok **


var chai = require('chai');
var assert = chai.assert;

var jade = require('jade');

var request = require('supertest');

var app = require('../app');

beforeEach(function(){

x = x+1

});

afterEach(function(){

x = 0;

});


describe('First test suite', function(){
  x = 0;
  it('Should pass', function() {
    assert.equal(1,x);
  });

  it('Should also pass', function(){
    assert.equal(1,x);
  });


  it('Jade test', function(){
    var template = "#container";
    var expected = '<div id = "container"></div>';
    var result = jade.render(template);
    assert.equal(expected,result);
  });

  it('Supertest test', function(done){
    request(app).get('/contacts')
    .expect(200,done);
  });


});

** note done above us used for asyn testing **

** expect expects a 200 when stuff is done **

Karma client side testing

karma loads browser runs test and reports
karma is installed in ./node_modules/karma/bin
to initialize karma run the below

./node_modules/karma/bin/karma init

It will ask me a bunch of questions
For which framework to use? press tab till it says Mocha
Do you want to use requirejs press no
We can capture Chrome automatically
next line just press enter since we will only test in chrome..we can also use multiple browsers
We need to tell karma where our javascript files are , they are in public/javascripts/**/*.js
We will also place some files in
so we will also tell karma to include files in browser-tests/**/*.js
we currently dont have any files..hit enter on blank line after entering all files
Now we have the option to exclude files. You can just press enter to leave this blank
Press no -> to run tests automatically if files change
to run karma run ./node_modules/karma/bin/karma start --single-run
we will make it easy to run karma by adding run configuration in package.json file
add karma to the scripts in package.json

"scripts": {
    "start": "node ./node_modules/.bin/supervisor node ./bin/www",
    "test": "./node_modules/.bin/mocha -u tdd"
    "karma": "./node_modules/karma/bin/karma start --single-run"
  },

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster