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.
20. 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
29. Tell nodemon what to run
"scripts": {
"start": "node ./bin/www"
},
"main": "bin/www",
"dependencies": {
package.json
30. Start server using nodemon
$ nodemon
[nodemon] v1.0.15
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `node bin/www`
41. 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
42. 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.
43. 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
59. Transfer code to your server
$ scp -i ~/.ssh/macbookair.pem -r myapp/ ubuntu@ec2-23-
20-153-76.compute-1.amazonaws.com:~/
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 ubuntu@ec2-23-20-153-76.compute-1.amazonaws.com
$ git clone git@github.com:Username/myapp.git
61. 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.
63. 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
64. Start and connect to server
$ npm start
> application-name@0.0.1 start
/home/ubuntu/myapp
> node ./bin/www
65. 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