Node.js & Twitter Bootstrap Crash Course

50 %
50 %
Information about Node.js & Twitter Bootstrap Crash Course

Published on March 20, 2014

Author: Zugwalt



Slides from Node.js and Twitter Bootstrap crash course given to Penn Graduate Computing Club. Covers creating basic node app, using the bootstrap grid, and deploying to an EC2 machine.

Node.js Web App CRASH COURSE By Aaron Silverman, Code Slinger at Video BlocksMarch 19, 2014

Note: node.js is getting more and more popular every year! Node.js - download and install it!

var http = require('http'); http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello Worldn'); }).listen(1337, ''); console.log('Server running at'); Create simple server web server server.js

Run simple web server $ node server.js Server running at

Connect to simple web server

Why reinvent the wheel? Packages FTW! $ npm install -g express-generator ... express-generator@3.0.0 /usr/local/lib/node_modules/express-generator ├── mkdirp@0.3.5 └── commander@1.3.2 (keypress@0.1.0)

Create skeleton web application $ express --ejs myapp ... create : myapp ... install dependencies: ... run the app:

Install dependencies $ cd myapp $ npm install … express@3.4.8 node_modules/express ...

Start web application $ npm start > application-name@0.0.1 start /Users/aaron/Workspace/upenn/myapp > node ./bin/www

Connect to web application

What’s going on? automagically created folders and files

package.json is key started by npm start installed by npm install

require - import/include other files and packages imports debug package imports app file what is exported

Middleware Magic view engine modules middleware routing

Route handlers render view

View - Embedded JavaScript view variable

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

Spice up our root page - view <body> <h1><%= title %></h1> <p>Welcome to <%= title %></p> <p>&ldquo;Welcome to <%= title %>&rdquo;</p> <p>&mdash; <%= name %><p> </body> views/index.ejs

Restart and connect $ npm start

Internet folks love cats

Cat image image file

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

Cat route handler exports.index = function(req, res) { res.render('index', {title: 'Penn', name: 'Aaron'}); }; = function(req, res) { res.render('cat'); } routes/index.js

Cat route app.get('/', routes.index); app.get('/users', users.list); app.get('/cat',; app.js

Enough manual restarting - nodemon $ sudo npm install -g nodemon ... nodemon@1.0.15 …

Tell nodemon what to run "scripts": { "start": "node ./bin/www" }, "main": "bin/www", "dependencies": { package.json

Start server using nodemon $ nodemon [nodemon] v1.0.15 [nodemon] to restart at any time, enter `rs` [nodemon] watching: *.* [nodemon] starting `node bin/www`

Navigate to cat page

Name that cat

Name that cat - route handler = function(req, res) { var name = req.param('name','Mr. Cat'); res.render('cat'); res.render('cat', {name: name}); } routes/index.js

Name that cat - view <body> <h1>Cat</h1> <h1>Meet <%= name %>, the Cat.</h1> <img src="/images/cat.jpg" /> </body> routes/index.js

Revisit cat page

Pass name in query parameter

Moar Cats!

Twitter Bootstrap - CSS for dummies

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

Cat view - bootstrap css/js <head> <link rel="stylesheet" href="//" /> <link rel="stylesheet" href="//" /> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> … <script src="//"></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.

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

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>

Cat view - cat style .cat-grid img { height: 100px; } public/stylesheets/style.css

Moar, responsive, cats

Module Time

Npm install and save $ npm install --save express-partials npm http GET npm http 304 express-partials@0.2.0 node_modules/express-partials

Added to package.json newly installed package

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 setup app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'ejs'); app.use(partials()); app.use(favicon()); app.js

Create common view layout views/layout.ejs <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="//" /> <link rel="stylesheet" href="//" /> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <%- body %> <script src="//"></script> </body> </html>

Clean up cat view views/cat.ejs <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="//" /> <link rel="stylesheet" href="//" /> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> … <script src="//"></script> </body> </html>

Clean up index view views/index.ejs <!DOCTYPE html> <html> <head> <title><%= title %></title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> … </body> </html>

Revisit Pages $ nodemon

How can Grandma see the cat?

Deploy on the interwebs!

Transfer code to your server $ scp -i ~/.ssh/macbookair.pem -r myapp/ ubuntu@ec2-23- 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 $ git clone

Install node.js on your server $ ssh -i .ssh/macbookair.pem ubuntu@ec2-23-20-153-76. $ 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 --version v0.10.26

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.

Allow HTTP traffic for the server

Allow port forwarding to listen port $ sudo vim /etc/sysctl.conf (uncomment net.ipv4.ip_forward) $ sudo sysctl -p /etc/sysctl.conf net.ipv4.ip_forward = 1 $ sudo iptables -A PREROUTING -t nat -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 3000

Start and connect to server $ npm start > application-name@0.0.1 start /home/ubuntu/myapp > node ./bin/www

Forever - run node as a daemon $ sudo npm install -g forever … forever@0.10.11 /usr/lib/node_modules/forever … $ forever start bin/www warn: --minUptime not set. Defaulting to: 1000ms warn: --spinSleepTime not set. Your script will exit if it does not stay up for at least 1000ms info: Forever processing file: bin/www

Website now live forever!

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

GitHub - primaryobjects/Node.js-Bootstrap-Starter-Template ... Node.js Bootstrap Starter Template. A quick and easy Node.js + Jade template project, using Twitter Bootstrap. Usage. Clone repository.
Read more

[twitter] Bootstrap | LinkedIn

... [twitter] Bootstrap posts, ... Node.js & Twitter Bootstrap Crash Course. ... Premium Twitter Bootstrap. 4 Members. Twitter Developers ...
Read more

Bootstrap | LinkedIn

Twitter Bootstrap is one of the most used HTML/CSS/JavaScript ... Do more with LESS in Bootstrap. In this course, ... Node.js & Twitter Bootstrap Crash Course.
Read more

Node Cellar Sample Application with Backbone.js, Twitter ...

Sample application built with Backbone.js, Twitter Bootstrap, Node.js, Express, MongoDB
Read more

A Simple Web App With Node.js, Express, Bootstrap ...

Building your first simple web app with Node.js, Express, Bootstrap and Stormpath in under 15 minutes. Building your first simple web app with Node.js, ...
Read more

node.js - Twitter boostrap.less in Express - Stack Overflow

I followed this a link to try to configure Twitter's boostrap.less ... The error causes node to crash after ... Twitter Bootstrap LESS with Node.js ...
Read more

Bootstrap Tutorial For Beginners - [Part 20] - Customizing ...

During this Twitter Bootstrap for beginners tra ... 10 Courses, 43+ hours of ... Customizing Bootstrap Site Using Themes Simon Sez IT. ...
Read more

Twitter Bootstrap Tutorial - SitePoint – Learn HTML, CSS ...

× All Ajax AngularJS APIs ES6 jQuery Node.js npm Raw JavaScript ... In addition to the Twitter Bootstrap ... Twitter bootstraps ois really making ...
Read more