# HTTP, Connect, Express

> Date 23/09/2014

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

```javascript
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`:

```javascript
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:

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

app.use(responseTime());
```

The [`response-time` middleware](https://github.com/expressjs/response-time) 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](https://github.com/expressjs/body-parser) once such a form has been submitted.

```javascript
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:

```bash
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](https://help.github.com/articles/permission-levels-for-a-user-account-repository).

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](https://developer.github.com/v3/gists/#create-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](https://github.com/jukra/nodejsform/)
* [Oona, Joose, Maxim](https://github.com/tariel/connect-feedback)
* [HeikkiAlanen, olemstrom, tuunanen](https://github.com/HeikkiAlanen/node-form-submit)
* [Marko H, Markus I](https://github.com/Markoham/Lecture-5-WebServer)

## Links related to the lecture subject

* [Better logging in Node.js](https://medium.com/@garychambers108/b3cc6fd0dafd)
* [Connect](https://github.com/senchalabs/connect)
* [Express](https://github.com/strongloop/express)
* [`http` API documentation](http://nodejs.org/api/http.html)
* [GitHub Help - About gists](https://help.github.com/articles/about-gists)
* [Express Routing - The Beginners Guide](http://jilles.me/express-routing-the-beginners-guide/)
* [Video: Fluent 2014 Introduction to ExpressJS](https://www.youtube.com/watch?v=LB32jTKzJkE)

## Examples related to the tasks

```javascript
// 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);
```

```javascript
// 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);
```

```bash
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`

```javascript
// 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);
```