Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building web apps with Express

Andy Appleton
February 06, 2013

Building web apps with Express

An introduction to the Express web framework for Node.js

Andy Appleton

February 06, 2013
Tweet

More Decks by Andy Appleton

Other Decks in Technology

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