Tweet
Tweet

Slide 1

Slide 1 text

Building web apps with Express Andy Appleton @appltn http://appleton.me

Slide 2

Slide 2 text

Express is a simple web application framework http://expressjs.com/

Slide 3

Slide 3 text

...built on Connect, the middleware framework http://www.senchalabs.org/connect/

Slide 4

Slide 4 text

Connect provides a bunch of handy utilities for dealing with HTTP requests

Slide 5

Slide 5 text

var app = connect() .use(connect.logger('dev')) .use(connect.static('public')) .use(function(req, res){ res.end('hello world\n'); }) .listen(3000);

Slide 6

Slide 6 text

But anyway, Express

Slide 7

Slide 7 text

$ npm install -g express Install express globally

Slide 8

Slide 8 text

$ npm install -g express Init a new express app in ./awesome-demo $ express awesome-demo

Slide 9

Slide 9 text

$ npm install -g express Install the app’s dependencies with npm $ express awesome-demo $ cd awesome-demo && npm install

Slide 10

Slide 10 text

$ npm install -g express Run it! $ express awesome-demo $ cd awesome-demo && npm install $ node app.js >> Express server listening on port 3000

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

// Get & set an app property app.set('name', 'value'); // Use a middleware function app.use(myMiddlewareFunction()); // Respond to an HTTP request app.get('/path', callbackFn); app.post('/path', callbackFn); app.put('/path', callbackFn); // ...etc

Slide 15

Slide 15 text

Routing

Slide 16

Slide 16 text

app.get('/', routes.index); app.get('/users', routes.users.index); app.get('/users/:id', routes.users.show); app.post('/users/:id', routes.users.create); app.put('/users/:id', routes.users.update);

Slide 17

Slide 17 text

Handling a route // /users routes.index = function(req, res) { res.send('Hello Bath'); }; // /users/:id routes.users.show = function(req, res) { var userId = req.params.id; res.send('Your userId is ' + userId); };

Slide 18

Slide 18 text

Rendering HTML templates

Slide 19

Slide 19 text

Rendering HTML templates routes.index = function(req, res) { res.render('index'); }; routes.users.show = function(req, res) { var userId = req.params.id; res.render('users/show', { id: userId }); };

Slide 20

Slide 20 text

doctype 5 html head ... body block content extends layout block content h1= title p Welcome to #{title} ./views/layout.jade ./views/index.jade

Slide 21

Slide 21 text

"dependencies": { ... "hbs": "*" } ./package.json $ npm install ./app.js app.configure(function(){ ... app.set('view engine', 'hbs'); ... }); app.configure(function(){ ... app.set('view engine', 'jade'); ... });

Slide 22

Slide 22 text

... {{{body}}} ./views/layout.hbs ./views/index.hbs

{{title}}

Welcome to {{title}}

Slide 23

Slide 23 text

routes.index = function(req, res) { res.render('index'); }; routes.users.show = function(req, res) { var userId = req.params.id; res.render('users/show', { id: userId }); };

Slide 24

Slide 24 text

Sessions

Slide 25

Slide 25 text

// must come before router app.use(express.cookieParser('secret')); app.use(express.session()); app.use(app.router); Session support is middleware

Slide 26

Slide 26 text

routes.users.show = function(req, res) { req.session.id || (req.session.id = 1); res.render('users/show', { id: req.session.id }); };

Slide 27

Slide 27 text

Andy Appleton @appltn http://appleton.me