Express Generator

On Monday, we began talking about Node and Express.
We showed how to install both Node and Express and how to create a single-file application using them.
There is a command line tool that can be used with Express, express-generator, that creates a standard folder file organization for a new express app.
It can be installed via the command:
```
npm install express-generator -g
```
You can see this tool's options by executing:
```
express -h
```
To create a skeleton web app using this tool you can type:
```
express --view=pug test_app
```
Pug is a templating engine that can be used to make HTML pages without having all the cruft of Javascript you might need if you were directly trying to output them in Express.

Getting the Express Generator App Running

The express command of the previous slide outputs the following (output shows your the folder structure):

   create : test_app
   create : test_app/package.json
   create : test_app/app.js
   create : test_app/public
   create : test_app/routes
   create : test_app/routes/index.js
   create : test_app/routes/users.js
   create : test_app/views
   create : test_app/views/index.pug
   create : test_app/views/layout.pug
   create : test_app/views/error.pug
   create : test_app/bin
   create : test_app/bin/www
   create : test_app/public/javascripts
   create : test_app/public/stylesheets
   create : test_app/public/stylesheets/style.css

   install dependencies:
     $ cd test_app && npm install

   run the app:
     $ DEBUG=test-app:* npm start

   create : test_app/public/images

To get a working app one can then type:
```
cd test_app
npm install
```
Then to run the app in debug mode from a bash shell type:
```
DEBUG=myapp:* npm start #Alternatively use: node ./bin/www
```
From a Windows (command or power) shell type:
```
set DEBUG=myapp:* & npm start
```
You can then point your browser at: http://localhost:3000/ to the app.
The file bin/www is actually a text file and can be used to configure what port the app runs on, etc.

Skeleton app.js file

app.js is the main entry point into an express-generator created web app.
For now we don't have to understand it too much, but the lines:
```
var index = require('./routes/index');
var users = require('./routes/users');

//...

app.use('/', index);
app.use('/users', users);
```
Set up that the "/" and "/users" routes should be handled via the modules in ./routes/index.js and ./routes/users.js

The folder in which views live and the view engine used by the app is set up with the lines:

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

index.js and Router Modules

Express makes use of Router Modules which can handle a set of request paths.

One such module is created in the index.js file created by express-generator:

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

Notice on the route "/" this says to draw the template "index" using the JSON object included.
From our app.js setting of views, we know to look for this in the file views/index.pug.

index.pug

extends layout

block content
  h1= title
  p Welcome to #{title}

These files don't especially look like HTML. They are compiled to HTML as part of the install process of the app.
The first line say this pug file is a sub class of layout.pug.
block refers to a block of Pug that a child template is allowed to replace. So we are replacing the content block of layout.pug with the code that follows.
h1= titlesays put in an h1 tag the following expression, in this case property of JSON object supplied when we called res.render.
p Welcome to #{title} says output the following interpolated string in a paragraph tag.
Pug Code shows a variety of different command you can use to format and output HTML.

Customizing Generated Coded

To create our own custom apps using the express generated code:

We can create new Router modules in the routes folder.
We can use these new route by calling app.use for them in the app.js file.
We can create new pug files for our views and layouts in the views folder.
When we want to draw such a pug file, we call res.render for the appropriate route in our Router.
To further explore using Express, let's switch back to non-generated express applications to demonstrate certain functionality.

Serving Static Pages in Express

Suppose we are creating a simple express web app and we want to serve certain static files.

Our folder structure looks like:

app.js
/media
/node_modules
package.json
/public

We imagine /media might contain images and /public might contain static HTML pages.

We could write our app.js as follows to serve those files:

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

app.use('/media', express.static(__dirname + '/media'));
app.use(express.static(__dirname + '/public'));

// routes from last day
app.get('/', function (req, res) {
  res.send('This is an express app using route /')
})
app.get('/foo', function (req, res) {
  res.send('Foo route ')
})

app.listen(8888, function () {
  console.log('Server up!')
})

So if a route is unknown, but doesn't contain /media, a static file will be looked for in the /public subfolder.
So if a route is unknown, but does contain /media, a static file will be looked for in the /media subfolder.

Basic Routing in Express -- Handling Post Data

A general route definition takes the format:
```
app.METHOD(PATH, HANDLER)
```
So if we want to handle posted data, we set method to post, if we want to do a put, delete we set it to put, delete, etc.

For example, we could have the following route to receive foo-post data:

var bodyParser = require('body-parser');
app.use( bodyParser.json() ); // this is needed if json data posted (not really current case)
app.use(bodyParser.urlencoded({ // this is needed for usual form posted data
  extended: true
}));
app.post('/foo-post', function (req, res) {
    res.send('Foo data '+ req.body.foo)
});

In-Class Exercise

Install Node and Express.
Make a single-file, Express app which listens to port 8888.
It should have two routes:
1. The "/" route should produce an HTML 5 page with a form with a button named "something" with value "something". When clicked the form should be posted to the "/something".
2. The "/something" should handle post requests and should output an HTML 5 page with "Something handled" on it output in an h1 tag.
Post your solution to the May 3 In-Class Thread.

More on Node.js, Express.js

Outline