Download - Node.js & Twitter Bootstrap Crash Course
![Page 1: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/1.jpg)
Node.js Web App
CRASH COURSEBy Aaron Silverman, Code Slinger at Video BlocksMarch 19, 2014
![Page 2: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/2.jpg)
Note: node.js is getting more and more popular every year!
Node.js - download and install it!
![Page 3: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/3.jpg)
var http = require('http');http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello World\n');}).listen(1337, '127.0.0.1');console.log('Server running at http://127.0.0.1:1337/');
Create simple server web serverserver.js
![Page 4: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/4.jpg)
Run simple web server
$ node server.jsServer running at http://127.0.0.1:1337/
![Page 5: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/5.jpg)
Connect to simple web server
![Page 6: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/6.jpg)
![Page 7: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/7.jpg)
Why reinvent the wheel?Packages FTW!
$ npm install -g [email protected] /usr/local/lib/node_modules/express-generator├── [email protected]└── [email protected] ([email protected])
![Page 8: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/8.jpg)
Create skeleton web application$ express --ejs myapp... create : myapp... install dependencies:... run the app:
![Page 10: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/10.jpg)
Start web application
$ npm start> [email protected] start /Users/aaron/Workspace/upenn/myapp> node ./bin/www
![Page 11: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/11.jpg)
Connect to web application
![Page 12: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/12.jpg)
![Page 13: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/13.jpg)
What’s going on?
automagically created folders and files
![Page 14: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/14.jpg)
package.json is key
started by npm start
installed by npm install
![Page 15: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/15.jpg)
require - import/include other files and packages
imports debug packageimports app file
what is exported
![Page 16: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/16.jpg)
Middleware Magic
view engine
modules
middleware
routing
![Page 17: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/17.jpg)
Route handlers
render view
![Page 18: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/18.jpg)
View - Embedded JavaScript
view variable
![Page 19: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/19.jpg)
Spice up our root page - route handler
exports.index = function(req, res){ res.render('index', { title: 'Express' }); res.render('index', {title: 'Express', name: 'Aaron'});};
routes/index.js
![Page 20: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/20.jpg)
Spice up our root page - view
<body> <h1><%= title %></h1> <p>Welcome to <%= title %></p> <p>“Welcome to <%= title %>”</p> <p>— <%= name %><p> </body>
views/index.ejs
![Page 21: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/21.jpg)
Restart and connect
$ npm start
![Page 22: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/22.jpg)
![Page 23: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/23.jpg)
Internet folks love cats
![Page 24: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/24.jpg)
Cat image
image file
![Page 25: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/25.jpg)
Cat view
<!DOCTYPE html><html> <head> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <h1>Cat</h1> <img src="/images/cat.jpg" /> </body></html>
views/cat.ejs
![Page 26: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/26.jpg)
Cat route handler
exports.index = function(req, res) { res.render('index', {title: 'Penn', name: 'Aaron'});};
exports.cat = function(req, res) { res.render('cat');}
routes/index.js
![Page 27: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/27.jpg)
Cat route
app.get('/', routes.index);app.get('/users', users.list);app.get('/cat', routes.cat);
app.js
![Page 29: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/29.jpg)
Tell nodemon what to run
"scripts": {"start": "node ./bin/www"
}, "main": "bin/www", "dependencies": {
package.json
![Page 30: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/30.jpg)
Start server using nodemon
$ nodemon[nodemon] v1.0.15[nodemon] to restart at any time, enter `rs`[nodemon] watching: *.*[nodemon] starting `node bin/www`
![Page 31: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/31.jpg)
Navigate to cat page
![Page 32: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/32.jpg)
![Page 33: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/33.jpg)
Name that cat
![Page 34: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/34.jpg)
Name that cat - route handler
exports.cat = function(req, res) { var name = req.param('name','Mr. Cat'); res.render('cat'); res.render('cat', {name: name});}
routes/index.js
![Page 35: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/35.jpg)
Name that cat - view
<body> <h1>Cat</h1> <h1>Meet <%= name %>, the Cat.</h1> <img src="/images/cat.jpg" /> </body>
routes/index.js
![Page 36: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/36.jpg)
Revisit cat page
![Page 37: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/37.jpg)
Pass name in query parameter
![Page 38: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/38.jpg)
![Page 39: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/39.jpg)
Moar Cats!
![Page 40: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/40.jpg)
Twitter Bootstrap - CSS for dummies
![Page 41: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/41.jpg)
Bootstrap grid and components
CSS classes also makes special components
CSS class “row” starts row of a 12 column grid
CSS class “col-md-N” starts a responsive N-column wide grid element
Note: rows can be nested inside columns for a nested grid
![Page 42: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/42.jpg)
Cat view - bootstrap css/js
<head> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" /> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css" /> <link rel='stylesheet' href='/stylesheets/style.css' /> </head>
…
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> </body></html>
views/cat.ejs
Note: instead of using external assets we could also have downloaded and extracted these files into the public/stylesheets and public/javscripts directories.
![Page 43: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/43.jpg)
Cat view - name jumbotron
<body> <div class="jumbotron"> <h1>Meet <%= name %>, the Cat.</h1> <p>Best cat in the land</p> </div>
views/cat.ejs
![Page 44: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/44.jpg)
Cat view - cat grid
<div class="container cat-grid"> <div class="row"> <div class="col-md-4"> <img src="/images/cat.jpg" /> </div> <div class="col-md-4">
...
</div>
<div class="col-md-4"> <img src="/images/cat.jpg" /> </div> </div> </div>
views/cat.ejs <div class="row"> <div class="col-md-6"> <img src="/images/cat.jpg" /> </div> <div class="col-md-6"> <img src="/images/cat.jpg" /> </div> </div> <div class="row"> <div class="col-md-6"> <img src="/images/cat.jpg" /> </div> <div class="col-md-6"> <img src="/images/cat.jpg" /> </div> </div>
![Page 45: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/45.jpg)
Cat view - cat style
.cat-grid img { height: 100px;}
public/stylesheets/style.css
![Page 46: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/46.jpg)
Moar, responsive, cats
![Page 47: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/47.jpg)
![Page 48: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/48.jpg)
Module Time
![Page 49: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/49.jpg)
Npm install and save
$ npm install --save express-partialsnpm http GET https://registry.npmjs.org/express-partialsnpm http 304 https://registry.npmjs.org/[email protected] node_modules/express-partials
![Page 50: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/50.jpg)
Added to package.json
newly installed package
![Page 51: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/51.jpg)
Use new middleware
var bodyParser = require('body-parser');var partials = require('express-partials');
var routes = require('./routes');var users = require('./routes/user');
var app = express();
// view engine setupapp.set('views', path.join(__dirname, 'views'));app.set('view engine', 'ejs');
app.use(partials());app.use(favicon());
app.js
![Page 52: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/52.jpg)
Create common view layoutviews/layout.ejs
<!DOCTYPE html><html> <head> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" /> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css" /> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body>
<%- body %>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> </body></html>
![Page 53: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/53.jpg)
Clean up cat viewviews/cat.ejs
<!DOCTYPE html><html> <head> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" /> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css" /> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body>
…
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> </body></html>
![Page 54: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/54.jpg)
Clean up index viewviews/index.ejs
<!DOCTYPE html><html> <head>
<title><%= title %></title><link rel='stylesheet' href='/stylesheets/style.css' />
</head> <body>
…
</body></html>
![Page 55: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/55.jpg)
Revisit Pages
$ nodemon
![Page 56: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/56.jpg)
![Page 57: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/57.jpg)
How can Grandma see the cat?
![Page 58: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/58.jpg)
Deploy on the interwebs!
![Page 59: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/59.jpg)
Transfer code to your server$ scp -i ~/.ssh/macbookair.pem -r myapp/ [email protected]:~/
Note: Ideally your code is checked into a source control repository such as git, and you would add your server’s public key to be allowed to access to the repository.
Then you would do something like:
$ ssh -i .ssh/macbookair.pem [email protected]$ git clone [email protected]:Username/myapp.git
![Page 60: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/60.jpg)
Install node.js on your server$ ssh -i .ssh/macbookair.pem [email protected]
$ sudo apt-get install python-software-properties$ sudo apt-add-repository ppa:chris-lea/node.js$ sudo apt-get update$ sudo apt-get install nodejs
$ node --versionv0.10.26
![Page 61: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/61.jpg)
Install dependencies$ cd myapp$ npm install
Note: If you transferred your node_modules folder (such as scp did in this presentation) this won’t be necessary. However typically that folder should be ignored by version control (e.g. in .gitignore) and you will have to do this step.
![Page 62: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/62.jpg)
Allow HTTP traffic for the server
![Page 63: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/63.jpg)
Allow port forwarding to listen port$ sudo vim /etc/sysctl.conf(uncomment net.ipv4.ip_forward)$ sudo sysctl -p /etc/sysctl.confnet.ipv4.ip_forward = 1$ sudo iptables -A PREROUTING -t nat -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 3000
![Page 64: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/64.jpg)
Start and connect to server$ npm start> [email protected] start /home/ubuntu/myapp> node ./bin/www
![Page 65: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/65.jpg)
Forever - run node as a daemon$ sudo npm install -g forever …[email protected] /usr/lib/node_modules/forever …$ forever start bin/wwwwarn: --minUptime not set. Defaulting to: 1000mswarn: --spinSleepTime not set. Your script will exit if it does not stay up for at least 1000msinfo: Forever processing file: bin/www
![Page 66: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/66.jpg)
Website now live forever!
![Page 67: Node.js & Twitter Bootstrap Crash Course](https://reader035.vdocuments.mx/reader035/viewer/2022062319/5557d4f7d8b42af2178b4d2d/html5/thumbnails/67.jpg)