Intro to ExpressWeb Application Framework for Node

Created by / Jason Sich @jasich

Let's make a Web App! // Install the express generator$ npm install -g express-generator

// Create a new express app$ express helloGrNodeDev

$ cd ./helloGrNodeDev

// Install dependencies for express$ npm install

// Run it!$ npm start...Express server listening on port 3000

Well that was almost too easyWhile running the express generator I had 2 issues that I had to fix

before being able to load the main page.

Sidenote: ModulesThere are a ton of modules out there, but not all of them get updated in

a timely manner.When dependencies break your app it can be painful to fix.

Default Structure app.js => Express server package.json => NPM pacakge file public => Static directory to serve up files from - images - javascripts - stylesheets routes => Define your routing here views => Contains html views

This structure can be modified to suit your needs. Express does notforce any conventions on you.

Simple Server var express = require('express');var app = express();

app.get('/hello', function(req, res){ res.send('Hello World');});

var server = app.listen(3000, function() { console.log('Listening on port %d', server.address().port);});

Serving Files Statically var path = require('path');

// Serve static files directly from the 'public' directoryapp.use(express.static(path.join(__dirname, 'public')));

Using Dynamic Views // Sets the location of our template files for views// This is where all the jade templates goapp.set('views', path.join(__dirname, 'views'));

// Sets the view engine to 'jade' because we're so Emoapp.set('view engine', 'jade');

// For HTTP GET requests serve up the index view// Set the title to 'Express'app.get('/', function(req, res){ res.render('index', { title: 'Express' });});

All Together Now var express = require('express'), path = require('path');

var app = express();

app.set('views', path.join(__dirname, 'views'));app.set('view engine', 'jade');

app.use(express.static(path.join(__dirname, 'public')));

app.get('/', function(req, res){ res.render('index', { title: 'Express' });});

app.listen(3000, function() { console.log('Listening on port %d', server.address().port);});

Example Jade Template// index.jadedoctype htmlhtml head title= title link(rel='stylesheet', href='/stylesheets/style.css') body h1= title p Welcome to #{title}

It Needs an APILet's say we are using a front-end JS framework and need to serve up

some data in JSON.

Shut the Front Door, That Easy? // Registers a handler for an HTTP GET request to '/animals'app.get('/animals', function(req, res){ var animals = [ { name: 'Shark Owl' }, { name: 'Liger' }, { name: 'Zebroid' } ];

// Just send the array as a response res.send(animals);});

And a Post? .app.use(express.bodyParser());.// Registers a handler for an HTTP POST request to '/animals'app.post('/animals', function(req, res){ var newAnimal = req.body;

// Let the client know that things are cool with us res.send(201, {success: true});});

What's up with app.use()?It registers middleware in your Express application. Middleware is

additional functionality injected into request handling.There is an order to middleware. If one piece of middleware services a

request, the request is considered handled and the rest of themiddleware is not used.

For example we can register the 'express.static' middleware to serve upstatic files for requests.

app.use(express.static(path.join(__dirname, 'public')));

Or we can define our own: app.use(function(req, res, next) { if (!req.get('authorization')) { res.Send(403, "Not Allowed Son, Better Luck Next Time"); } else { next(); }});

The EndBY Jason Sich