jekyll
nodejs + heroku

Adding a small backend to a static site

Presented by Tom Friedhof

Tom Friedhof

What are we going to talk about?

  • Briefly talk about jekyll.
  • Intro to Nodejs and Express.
  • Pushing your node app to the cloud automatically

Stuff we're going to breeze past.

  • HTML, CSS, JS, etc...
  • Git... and Github.
  • The mechanics of jekyll.
  • Templating with jade.

If you're brand new to nodejs

THIS PRESENTATION IS FOR YOU!

Not this jekyll.


http://jekyllrb.com

How do you handle forms on a static site?

We'll get to that in a sec...

Why would you want to use jekyll?

  • The site works on any web server
  • Super Fast! There are no moving parts
  • No security updates to apply, there is no backend.

Questions about jekyll?

How do you do dynamic stuff
on a static site?

  • Comments
  • Inquiry Forms

Use a webservice

A light web framework that handles taking a Request and returning a Response.

an unopinionated framework for node.js.

Lets make a simple node app!


$ mkdir myapp
$ cd myapp

$ npm init
$ npm install express --save

Lets make a simple node app!

app.js


var express = require('express')

app = express()

app.get('/', function (req, res) {
  res.send('Hello World!')
})

var server = app.listen(process.env.PORT || 3000, function () {

  var host = server.address().address;
  var port = server.address().port;

  console.log('Example app listening at http://%s:%s', host, port);

});

Then start the server: 


$ node app.js

DEMO

Form handling requires CSRF protection

Middleware

Think of middleware as plugins

Middleware examples

add to app.js


function iDoNothingAtAll(req, res, next) { 
  console.log("Tom was here.")
  next() 
}

function iLikeErrorMessages(req, res, next) {
  next("Stop the app from working.") 
}

app.use(iDoNothingAtAll)
app.use('/error', iLikeErrorMessages)

Error handling is done via middleware

with an arity of 4


function myErrorHandler(err, req, res, next) { 
  res.send('This error was caught. ') 
}

app.use(myErrorHandler)

All error handling middleware should be defined after all other middleware and route calls.

What can you do with Middleware?

  • Logging
  • Serve Static Files
  • Error Handling
  • CSRF

Built-in middleware


app.use(express.static('public'));

Node will now server up static assets in the public directory.

Lets go get a CSRF middleware


npm install csurf --save
npm install cookie-parser --save
npm install body-parser --save
npm install jade --save

DEMO

Catch error specifically for CSRF


// csrf error handler
app.use(function (err, req, res, next) {
  if (err.code !== 'EBADCSRFTOKEN') return next(err)

  // handle CSRF token errors here
  res.status(403)
  res.send('Your session has expired, please refresh page and submit form again.')
})

Ship it! to heroku

Cloud based PAAS

  • Instant Deployment with Git push
  • Tons of Add-on resources (database, memcache, etc...)
  • Isolation - each process is completely isolated from each other
  • Totally free of charge for one Dyno (one process)

Download the heroku toolbelt

https://toolbelt.heroku.com/

Add a Procfile to the repo


web: node app.js

Then push it up and watch the magic!


$ heroku create
$ git push heroku master

$ heroku ps:scale web=1

You now have a form that you can embed into your jekyll site via iframe.

Questions?

Need a team of experienced developers?

call 310.943.0246