introduction to node js - from "hello world" to deploying on azure

Introduction toNode.JS

From “Hello, World!”to Deploying on Azure

#dunDDD29th November 2014

Colin Mackayhttp://colinmackay.scot

http://colinmackay.scot/

Overview

• What is node.js

• Obligatory Hello, World!

• Dependencies & node package manager

• Web applications in node

What is node.js?

Officially:

Node.js® is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

http://nodejs.org/

What is node.js, really?

• A platform for executing JavaScript

– Server-side

– Modular

– Non-blocking (async) code

– Built-in networking, HTTP & WebSockets

http://nodejs.org/

What are the advantages?

• All running on one environment– No worries about browser compatibility

– Google’s V8 Engine

• ECMAScript 5 – up-to-date JS

• Optimisation

• JIT compiled

• Non-blockinghttp://nodejs.org/

Typical Stack

MEAN• MongoDB (Database)• Express * (Web Framework)• Angular.js (UI Framework)• Node.js * (Platform)

* This talk will introduce these topics

http://www.mongodb.org/http://expressjs.com/https://angularjs.org/

http://nodejs.org/

Windows Installer

• Add to PATH ensure available at any command prompt

• I wish more windows installers would do this

http://nodejs.org/

IDEs for node.js

JetBrains Web Storm Visual Studio Add-in

http://nodejstools.codeplex.com/http://www.jetbrains.com/webstorm/

Hello World!

Splitting code across files

• One large file would be horrible

• Require(“./file.js”)

• Module.exports

• Can be hierarchical

DEMO #1

Require & module.exports

Requiring a folder

• Need a file to describe the folder– Index.js– Packages.json{ "name" : "my-library","main" : "./lib/my-library.js" }

• Exports from index/packages returned via requires

Node Package Manager

• Like NuGet, but for node.js

• Packages go in node_modules folder

• Install with npm install <name>

– Add --save to reference it in your app’s

package.json to exclude it from source control.

https://www.npmjs.org/

Package.json

• JSON formatted file

• Stores dependency information

• npm install to rebuild the

dependencies

– Useful after getting from source control

https://www.npmjs.org/doc/files/package.json.html

Package.json : example

{"name": "hello-world","version": "0.0.1","dependencies": {

"express": "^4.10.3"}

}

DEMO #2

Node Package Manager

Express

• Web Application Framework

• Related to

– Sinatra (Ruby)

– Nancy (.NET)

• “Fast, unopinionated, minimalist web framework for Node.js”

http://expressjs.com/

Installing Express

• npm install express

Express: Hello, World! (1)

// Requirements

var express = require("express");

var http = require("http");

// Set up the application

var app = express();

app.set("port", process.env.PORT || 3000);

// Run up the server

http.createServer(app).listen(app.get("port"), function(){

console.log("Express server listening on port " + app.get("port"));

});http://colinmackay.scot/2014/11/15/express-for-node-js-walk-through-hello-world/


module.exports =

function(req, res) {

res.send(

"<h1>"+

"Hello, World!"+

"</h1>");

};

http://colinmackay.scot/2014/11/15/express-for-node-js-walk-through-hello-world/


• Need to add routing details to app.js

• Supports most common HTTP verbs

– And some uncommon ones

app.get("/", routeGetFunc);

app.post("/", routePostFunc);

app.put("/", routePutFunc);

app.delete("/", routeDeleteFunc);

http://colinmackay.scot/2014/11/15/express-for-node-js-walk-through-hello-world/

DEMO #3

Express Hello World

Express IDE Support

• IDE Support

– VS AddIn has three templates

– WebStorm has one template, but it’s more configurable.

Express Template

• Express Template sets many things up for you

• Completely configurable

• Could throw most of this away for a basic app

Jade – View Engine

View Engines

• Handlebars.js

• JSHTML

• Mustache / Hogan.js

• Underscore templates

• Vash– Based on Razor Syntax

View Engines : EJS

• EJS = Embedded JavaScript

– Based on ERB (Embedded Ruby)

– Similar to ASP.NET WebForms view engine

• No master page/layout support

– Package for that!

http://colinmackay.scot/2014/11/16/express-for-node-js-view-engines/

Static Files

• Defaults to safty

• Configure directories to expose

• More complex rules possible

app.use(express.static(

__dirname + '/public'));


DEMO #4

View Engines and Static Files


Processing form data

• It’s a middleware

– Many parsers available

– Common: body-parser

• Values available in req.body

http://colinmackay.scot/2014/11/17/node-js-with-express-getting-form-data/

Body-parser setup & use

App.js

var bodyParser = require("body-parser");

…

app.use(bodyParser.urlencoded());

setLanguage.js

var language = req.body.language;


Processing Cookies

• Parsing cookies is middleware

– Common: cookie-parser

• Values available in req.cookies

• Write values with res.cookie()

• Clear cookie with res.clearCookie()

– Much easier than .NEThttp://colinmackay.scot/2014/11/18/node-js-with-express-come-to-the-dark-side-

we-have-cookies/

Cookie-parser setup & use

App.js setLanguage.js

var cookieParser = require("cookie-parser");

…

app.use(cookieParser());

var language = req.body.language;var cookieAge = 24*60*60*1000; // 1 day

res.cookie("flashcard-language",language,{ maxAge:cookieAge, httpOnly:true });

http://colinmackay.scot/2014/11/18/node-js-with-express-come-to-the-dark-side-we-have-cookies/

Cookie-parser setup & use

Flashcard.js Welcome.js

var language =req.cookies["flashcard-language"];

res.clearCookie("flashcard-language");


DEMO #5

Body & Cookie Parsing



Deploying to Azure

• Surprisingly easy

– Almost…

• Deploy via source control

DEMO #6

Deploying to Azure

http://colinmackay.scot/2014/11/23/deploying-a-node-js-with-express-application-on-azure/

Deploying to Azure (1)

An issue with the images


Diagnosing the issue

Missing image Missing resource

Fixing the web.config

<staticContent><mimeMap fileExtension=".svg" mimeType="image/svg+xml" />

</staticContent>


Finally working

Follow up information

• Blog: http://colinmackay.scot/

– Slide deck available soon

• Twitter: @colinmackay


Introduction to Node.JS

Question Time

http://colinmackay.scot/tag/node-js/

http://colinmackay.scot/tag/node-js/

Follow up information

• Blog: http://colinmackay.scot/

– Slide deck available soon

• Twitter: @colinmackay


introduction to node js - from "hello world" to deploying on azure

Software