Introduction toNode.JS
From “Hello, World!”to Deploying on Azure
#dunDDD29th November 2014
Colin Mackayhttp://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/
Splitting code across files
• One large file would be horrible
• Require(“./file.js”)
• Module.exports
• Can be hierarchical
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"}
}
Express
• Web Application Framework
• Related to
– Sinatra (Ruby)
– Nancy (.NET)
• “Fast, unopinionated, minimalist web framework for Node.js”
http://expressjs.com/
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/
Express: Hello, World! (2)
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/
Express: Hello, World! (3)
• 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/
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
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'));
http://colinmackay.scot/2014/11/16/express-for-node-js-view-engines/
DEMO #4
View Engines and Static Files
http://colinmackay.scot/2014/11/16/express-for-node-js-view-engines/
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;
http://colinmackay.scot/2014/11/17/node-js-with-express-getting-form-data/
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");
http://colinmackay.scot/2014/11/18/node-js-with-express-come-to-the-dark-side-we-have-cookies/
DEMO #5
Body & Cookie Parsing
http://colinmackay.scot/2014/11/17/node-js-with-express-getting-form-data/
http://colinmackay.scot/2014/11/18/node-js-with-express-come-to-the-dark-side-we-have-cookies/
DEMO #6
Deploying to Azure
http://colinmackay.scot/2014/11/23/deploying-a-node-js-with-express-application-on-azure/
Deploying to Azure (3)
http://colinmackay.scot/2014/11/23/deploying-a-node-js-with-express-application-on-azure/
Deploying to Azure (4)
http://colinmackay.scot/2014/11/23/deploying-a-node-js-with-express-application-on-azure/
An issue with the images
http://colinmackay.scot/2014/11/23/deploying-a-node-js-with-express-application-on-azure/
Fixing the web.config
<staticContent><mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
</staticContent>
http://colinmackay.scot/2014/11/23/deploying-a-node-js-with-express-application-on-azure/
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/
Follow up information
• Blog: http://colinmackay.scot/
– Slide deck available soon
• Twitter: @colinmackay