Introduction to node js - From "hello world" to deploying on azure

Introduction toNode.JSFrom “Hello, World!” to Deploying on Azure#dunDDD29thNovember 2014Colin 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 & WebSocketshttp://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 StackMEAN•MongoDB(Database) •Express *(Web Framework) •Angular.js(UI Framework) •Node.js *(Platform) * This talk will introduce these topicshttp://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 thishttp://nodejs.org/

IDEs for node.jsJetBrainsWeb StormVisual Studio Add-inhttp://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

DEMO #1Require & 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_modulesfolder•Install with npminstall <name> –Add --saveto reference it in your app’s package.jsonto exclude it from source control. https://www.npmjs.org/

Package.json•JSON formatted file•Stores dependency information•npminstallto rebuild the dependencies–Useful after getting from source controlhttps://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/

Installing Express•npminstall express

Express: Hello, World! (1) // Requirementsvarexpress = require("express"); varhttp = require("http"); // Set up the applicationvarapp = express(); app.set("port", process.env.PORT|| 3000); // Run up the serverhttp.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 onesapp.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 AddInhas three templates–WebStormhas 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 WebFormsview 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 #4View Engines and Static Fileshttp://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.bodyhttp://colinmackay.scot/2014/11/17/node-js-with-express-getting-form-data/

Body-parser setup & useApp.js
varbodyParser=
require("body-parser");
…
app.use(
bodyParser.urlencoded()); setLanguage.js
varlanguage = 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 & useApp.jssetLanguage.js
varcookieParser=
require("cookie-parser");
…
app.use(cookieParser());
varlanguage = req.body.language;
varcookieAge= 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 & useFlashcard.jsWelcome.js
varlanguage =
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 #5Body & Cookie Parsinghttp://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/

Deploying to Azure•Surprisingly easy–Almost…  •Deploy via source control

DEMO #6Deploying to Azurehttp://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 imageshttp://colinmackay.scot/2014/11/23/deploying-a-node-js-with-express-application- on-azure/

Diagnosing the issueMissing imageMissing resource

Fixing the web.config
<staticContent>
<mimeMapfileExtension=".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.JSQuestion Timehttp://colinmackay.scot/tag/node-js/

Introduction to node js - From "hello world" to deploying on azure

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Introduction to node js - From "hello world" to deploying on azure (20)

Recently uploaded (20)

Introduction to node js - From "hello world" to deploying on azure