05-express.md

Lecture 5. - HTTP, Connect, Express

Date 23/09/2014

Setting up a minimal HTTP server with connect is just a matter of few lines:

var connect = require('connect');
var http = require('http');

var app = connect();

app.use('/', function(req, res){
  res.end('Welcome to Connect!\n');
});

http.createServer(app).listen(6500);

Similar approach can be take with express:

var express = require('express');

var app = express();

app.get('/', function (req, res) {
  res.send('Welcome to Express!\n');
});

app.listen(6500);

Adding a middleware in both connect and express is pretty trivial:

var responseTime = require('response-time');

app.use(responseTime());

The response-time middleware adds back end execution time header on the request, which can be used for testing.

Another perhaps more useful middleware is called body-parser which can be used to retrive the form values once such a form has been submitted.

var bodyParser = require('body-parser');

app.use(bodyParser.urlencoded());

Please note that in order to have the above middlewares available to your application, as well as connect or express, they need to be installed locally first, for example:

npm install --save body-parser

The task for the day

Create a group of three members, of which one is the owner of the given new repository, and the two others are marked as its contributors.

Half of the class will use Connect for the given task, while the other half shall use Express.

Application requirements:

• Run a web server that shows a feedback form in its index page, started with a command npm start
• The feedback form contains these items:
  • Name
  • Email
  • Feedback content
  • Submit button
• The form should be sent to the back end with a post request
• The input fields needs to be validated both front end and back end for not being empty and email being valid
• Valid feedback should be send to an email address configured via package.json OR send as a Gist
• On successful form sending the page should show a suitable gif animation
• On any error cases, the form should remain usable and point out the possible errors
• Use of existing npm modules is encouraged
• All self made JavaScript code should be under linting rules, which can be run with npm test
• Application logic is separated to different files and used as modules

Divide the work for all the three members and work together in the same repository.

Once the work has started, add a link to the main repository in the list below.

List of projects

Links to the project repositories, along with the group member names.

• Jukka Rautanen, Sopheak Kong, Joonas Meriläinen
• Oona, Joose, Maxim
• HeikkiAlanen, olemstrom, tuunanen
• Marko H, Markus I

Links related to the lecture subject

• Better logging in Node.js
• Connect
• Express
• http API documentation
• GitHub Help - About gists
• Express Routing - The Beginners Guide
• Video: Fluent 2014 Introduction to ExpressJS

Examples related to the tasks

// connect-example.js
var connect = require('connect');
var http = require('http');
var responseTime = require('response-time');
`
var app = connect();

app.use(responseTime());

app.use('/', function(req, res){
  res.end('Welcome to Connect!\n');
});

http.createServer(app).listen(6500);

// body-parsing.js
var express = require('express');

// https://github.com/expressjs/body-parser
var bodyParser = require('body-parser');

var app = express();

app.use(bodyParser.urlencoded());

app.get('/', function (req, res) {
	res.type('html');
	res.write('<form method="post">');
	res.write('<input name="email" value="hello@there">');
	res.write('<button>Send</button>');
	res.write('</form>');
	res.end();
});

app.post('/', function (req, res) {
  res.setHeader('Content-Type', 'text/plain');
  res.write('you posted:' + req.param('email'));
  res.write('\n');
  res.write('you posted:\n');
  res.end(JSON.stringify(req.body, null, 2));
});

app.listen(6500);

npm start
// https://www.npmjs.com/doc/cli/npm-start.html
// http://browsenpm.org/package.json#scripts.start

HTML5 validation via required and pattern properties. http://html5pattern.com/

Reading values from package.json

// read-package-author.js
var fs = require('fs');
var json = fs.readFileSync('package.json');
var pkg = JSON.parse(json);
// http://browsenpm.org/package.json#author

console.log('Package author: ' + pkg.author);