Building web apps with Express

An introduction to the Express web framework for Node.js

Transcript

1. Building web apps with Express Andy Appleton @appltn http://appleton.me
2. Express is a simple web application framework http://expressjs.com/
3. ...built on Connect, the middleware framework http://www.senchalabs.org/connect/
4. Connect provides a bunch of handy utilities for dealing with HTTP requests
5. var app = connect() .use(connect.logger('dev')) .use(connect.static('public')) .use(function(req, res){ res.end('hello world\n'); }) .listen(3000);
6. But anyway, Express
7. $ npm install -g express Install express globally
8. $ npm install -g express Init a new express app in ./awesome-demo $ express awesome-demo
9. $ npm install -g express Install the app’s dependencies with npm $ express awesome-demo $ cd awesome-demo && npm install
10. $ npm install -g express Run it! $ express awesome-demo $ cd awesome-demo && npm install $ node app.js >> Express server listening on port 3000
13. var express = require('express'); ... var app = express();
14. // 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
15. Routing
16. 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);
17. 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); };
18. Rendering HTML templates
19. 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 }); };
20. doctype 5 html head ... body block content extends layout block content h1= title p Welcome to #{title} ./views/layout.jade ./views/index.jade
21. "dependencies": { ... "hbs": "*" } ./package.json $ npm install ./app.js app.configure(function(){ ... app.set('view engine', 'hbs'); ... }); app.configure(function(){ ... app.set('view engine', 'jade'); ... });
22. <!DOCTYPE html> <html> <head>...</head> <body> {{{body}}} </body> </html> ./views/layout.hbs ./views/index.hbs <h1>{{title}}</h1> <p>Welcome to {{title}}</p>
23. 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 }); };
24. Sessions
25. // must come before router app.use(express.cookieParser('secret')); app.use(express.session()); app.use(app.router); Session support is middleware
26. routes.users.show = function(req, res) { req.session.id || (req.session.id = 1); res.render('users/show', { id: req.session.id }); };
27. Andy Appleton @appltn http://appleton.me