fetimo/workshop-1

## workshop-1
[Ralph]

	$ npm install express --save

0

explain what we'll create
techniques used (routing)
how to use in real world

	locate and use server.js

	$ touch server.js
	console.log('hello world');

1

run file

	$ node server
	> hello world

2

Explain require, node_modules folder
Intro express (web framework, what jQuery is to JS)
Intro routing

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

	app.get('/', function (req, res) {
	    res.json('hey')
	});

3

listen to port

	var server = app.listen(3000, function () {
	    var host = server.address().address,
	        port = server.address().port;
	    console.log('App listening at http://%s:%s', host, port);
	});

4

test

	$ node server

5

Some libs work on both node & browser

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

	var prefixes = ['Total', 'Awesome', 'Finickety'];
	var suffixes = ['Wipeout', 'Badger', 'Peanut'];

	app.get('/api', function (req, res) {
	    res.status(200).send(_.sample(prefix), _.sample(suffix));
	});

	$ node server
	> Error: Cannot find module ‘underscore'

	$ npm install underscore --save


6

Can anyone spot the mistake?

	$ ctrl+c
	$ node server

See runtime error, explain, similar to a console error or yellow screen

	ReferenceError: _ is not defined
	   at app.listen.host (/Users/timstone/Projects/api/server.js:9:14)
	   at Layer.handle [as handle_request] (/Users/timstone/Projects/api/node_modules/express/lib/router/layer.js:82:5)
	   at next (/Users/timstone/Projects/api/node_modules/express/lib/router/route.js:110:13)
	   at Route.dispatch (/Users/timstone/Projects/api/node_modules/express/lib/router/route.js:91:3)
	   at Layer.handle [as handle_request] (/Users/timstone/Projects/api/node_modules/express/lib/router/layer.js:82:5)
	   at /Users/timstone/Projects/api/node_modules/express/lib/router/index.js:267:22
	   at Function.proto.process_params (/Users/timstone/Projects/api/node_modules/express/lib/router/index.js:321:12)
	   at next (/Users/timstone/Projects/api/node_modules/express/lib/router/index.js:261:10)
	   at expressInit (/Users/timstone/Projects/api/node_modules/express/lib/middleware/init.js:23:5)
	   at Layer.handle [as handle_request] (/Users/timstone/Projects/api/node_modules/express/lib/router/layer.js:82:5)

7

stopping and starting is tedious, intro nodemon (monitor, similar to sass watch)

	$ ctrl+c
	$ sudo npm install -g nodemon
	$ nodemon server.js

	var _ = require('underscore');

8

create some more routes

	app.get('/api/prefixes', function (req, res) {
	    res.status(200).send(prefixes);
	});

	app.get('/api/suffixes', function (req, res) {
	    res.status(200).send(suffixes);
	});


9

Request parameters

	app.get('/api/suffixes/:index', function (req, res) {
	    console.log(typeof req.params.index);
	    var index = parseInt(req.params.index, 10);
	    res.status(200).send(suffix[index]);
	});

10

Multiple installs

	$ sudo npm install multer body-parser --save

11

require, app.use to configure app

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

	app.use(bodyParser.json()); // for parsing application/json
	app.use(bodyParser.urlencoded({ extended: true })); // for parsing application/x-www-form-urlencoded


12

http verbs

	app.post('/api/suffixes', function (req, res) {
	    /* create new suffix */
	    var suffix = req.body.suffix;
	    if (suffix && suffixes.indexOf(suffix) === -1)
	        suffixes.push(suffix);

	    res.status(200).send(suffixes);
	});

13

test post in dev tools or fiddler

14

	$ npm install jade --save
	app.use(express.static('public'));
	app.set('view engine', 'jade');

by default looks in /views for layout files

15

render html

	app.get('/', function (req, res) {
	    res.status(200).render('index');
	});

16

may not need to install, setup basic web page

	$ bower install jquery

	<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Test</title>
	</head>
	<body>
		<script src="/bower_components/jquery/dist/jquery.min.js"></script>

		<label>Add suffix
			<input type="text">
		</label>
		<script src="/app.js"></script>
	</body>
	</html>

17

	$.post('http://localhost:3000/api/suffixes', {suffix: 'Tenacious' }, function (data) {
	    console.log(data);
	});

	http://localhost:3000/suffixes

see new one added in list, in memory

18

	<p>Random button text</p>
	<button></button>

19

	$.get('http://localhost:3000/api', function (data) {
	    $('button').text(data);
	});

20

	app.use(function(req, res, next) {
	    res.status(404).send('No page here (╭ರ_•́)');
	    next(res);
	});
	[Ralph]

	$ npm install express --save

	0

	explain what we'll create
	techniques used (routing)
	how to use in real world

	locate and use server.js

	$ touch server.js
	console.log('hello world');

	1

	run file

	$ node server
	> hello world

	2

	Explain require, node_modules folder
	Intro express (web framework, what jQuery is to JS)
	Intro routing

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

	app.get('/', function (req, res) {
	res.json('hey')
	});

	3

	listen to port

	var server = app.listen(3000, function () {
	var host = server.address().address,
	port = server.address().port;
	console.log('App listening at http://%s:%s', host, port);
	});

	4

	test

	$ node server

	5

	Some libs work on both node & browser

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

	var prefixes = ['Total', 'Awesome', 'Finickety'];
	var suffixes = ['Wipeout', 'Badger', 'Peanut'];

	app.get('/api', function (req, res) {
	res.status(200).send(_.sample(prefix), _.sample(suffix));
	});

	$ node server
	> Error: Cannot find module ‘underscore'

	$ npm install underscore --save


	6

	Can anyone spot the mistake?

	$ ctrl+c
	$ node server

	See runtime error, explain, similar to a console error or yellow screen

	ReferenceError: _ is not defined
	at app.listen.host (/Users/timstone/Projects/api/server.js:9:14)
	at Layer.handle [as handle_request] (/Users/timstone/Projects/api/node_modules/express/lib/router/layer.js:82:5)
	at next (/Users/timstone/Projects/api/node_modules/express/lib/router/route.js:110:13)
	at Route.dispatch (/Users/timstone/Projects/api/node_modules/express/lib/router/route.js:91:3)
	at Layer.handle [as handle_request] (/Users/timstone/Projects/api/node_modules/express/lib/router/layer.js:82:5)
	at /Users/timstone/Projects/api/node_modules/express/lib/router/index.js:267:22
	at Function.proto.process_params (/Users/timstone/Projects/api/node_modules/express/lib/router/index.js:321:12)
	at next (/Users/timstone/Projects/api/node_modules/express/lib/router/index.js:261:10)
	at expressInit (/Users/timstone/Projects/api/node_modules/express/lib/middleware/init.js:23:5)
	at Layer.handle [as handle_request] (/Users/timstone/Projects/api/node_modules/express/lib/router/layer.js:82:5)

	7

	stopping and starting is tedious, intro nodemon (monitor, similar to sass watch)

	$ ctrl+c
	$ sudo npm install -g nodemon
	$ nodemon server.js

	var _ = require('underscore');

	8

	create some more routes

	app.get('/api/prefixes', function (req, res) {
	res.status(200).send(prefixes);
	});

	app.get('/api/suffixes', function (req, res) {
	res.status(200).send(suffixes);
	});


	9

	Request parameters

	app.get('/api/suffixes/:index', function (req, res) {
	console.log(typeof req.params.index);
	var index = parseInt(req.params.index, 10);
	res.status(200).send(suffix[index]);
	});

	10

	Multiple installs

	$ sudo npm install multer body-parser --save

	11

	require, app.use to configure app

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

	app.use(bodyParser.json()); // for parsing application/json
	app.use(bodyParser.urlencoded({ extended: true })); // for parsing application/x-www-form-urlencoded


	12

	http verbs

	app.post('/api/suffixes', function (req, res) {
	/* create new suffix */
	var suffix = req.body.suffix;
	if (suffix && suffixes.indexOf(suffix) === -1)
	suffixes.push(suffix);

	res.status(200).send(suffixes);
	});

	13

	test post in dev tools or fiddler

	14

	$ npm install jade --save
	app.use(express.static('public'));
	app.set('view engine', 'jade');

	by default looks in /views for layout files

	15

	render html

	app.get('/', function (req, res) {
	res.status(200).render('index');
	});

	16

	may not need to install, setup basic web page

	$ bower install jquery

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Test</title>
	</head>
	<body>
	<script src="/bower_components/jquery/dist/jquery.min.js"></script>

	<label>Add suffix
	<input type="text">
	</label>
	<script src="/app.js"></script>
	</body>
	</html>

	17

	$.post('http://localhost:3000/api/suffixes', {suffix: 'Tenacious' }, function (data) {
	console.log(data);
	});

	http://localhost:3000/suffixes

	see new one added in list, in memory

	18

	<p>Random button text</p>
	<button></button>

	19

	$.get('http://localhost:3000/api', function (data) {
	$('button').text(data);
	});

	20

	app.use(function(req, res, next) {
	res.status(404).send('No page here (╭ರ_•́)');
	next(res);
	});