Here’s the third lesson in the Express.js tutorial. As always, there are a couple sneaky things, but overall, this isn’t that difficult.
NOTE: I found this blog post to be quite helpful for this lesson:
http://webapplog.com/jade-handlebars-express/
Let’s start with the Directions and Hints:
Again, the port to use is passed by expressworks to the application as process.argv[2].
The second to last line tells us that Jade is a package and that we need to install it via the npm (Node Package Manager). Here’s how we do that, and the ugly results we get back…
└── uglify-js@2.6.2 (uglify-to-browserify@1.0.2, source-map@0.5.6, yargs@3.10.0)
We’ll start with the variables. Note that they tell us that, as before, the port and filePath will be supplied in process.argv.
var express = require('express'); var path = require('path'); var port = process.argv[2]; var filePath = process.argv[3]; var app = express();
We also know that we are going to listen on a port, and they give us two app.set() statements as well, giving us:
var express = require('express'); var path = require('path'); var port = process.argv[2]; var filePath = process.argv[3]; var app = express(); app.set('views', path.join(__dirname, 'templates')); app.set('view engine', 'jade'); app.listen(port);
Finally, we’re serving a page, so we need an app.get() function, inside of which will be the page we are “rendering”. They give us this render statement, too, and so we have:
var express = require('express'); var path = require('path'); var port = process.argv[2]; var filePath = process.argv[3]; var app = express(); app.set('views', path.join(__dirname, 'templates')); app.set('view engine', 'jade'); app.get('/', function(req, res) { res.render('index', {date: new Date().toDateString()}) }) app.listen(port);
And………..it doesn’t work. It keeps saying “cannot get /home”. Yeah, I hate when I can’t get home too. Okay, so I thought this would be an easy fix. Remembering the first lesson, I changed the ‘/’ in the app.get statement to ‘/home’ and ran it again.
Still didn’t work.
I was a little frustrated now. What had I missed? I read and reread the instructions. Then I caught it – I hadn’t used the filePath variable anywhere, so the program didn’t know where to look for the Jade file. But the question was, where do I use it?
Well, see that app.set() with the path.join statement? That looked awfully familiar from the Static exercise, where we used:
app.use(express.static(process.argv[3]||path.join(__dirname, 'public')));
So, I added “process.argv[3]||” to my app.use() statement and, lo and behold, the program passed! Here’s the final program, for reference:
var express = require('express'); var path = require('path'); var port = process.argv[2]; var filePath = process.argv[3]; var app = express(); app.set('views', process.argv[3]||path.join(__dirname, 'templates')); app.set('view engine', 'jade'); app.get('/home', function(req, res) { res.render('index', {date: new Date().toDateString()}) }) app.listen(port);
See you next time!