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
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

6. But anyway, Express
   

   View Slide

7. $ npm install -g express
   Install express globally
   

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

11. View Slide

12. View Slide

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

    View Slide

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
    

    View Slide

15. Routing
    

    View Slide

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);
    

    View Slide

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);
    };
    

    View Slide

18. Rendering HTML templates
    

    View Slide

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
    });
    };
    

    View Slide

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

    View Slide

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');
    ...
    });
    

    View Slide

22. 
    
    ...
    
    {{{body}}}
    
    
    ./views/layout.hbs
    ./views/index.hbs
    {{title}}
    Welcome to {{title}}
    

    View Slide

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
    });
    };
    

    View Slide

24. Sessions
    

    View Slide

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

    View Slide

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

    View Slide

27. Andy Appleton
    @appltn
    http://appleton.me
    

    View Slide