This weekend I’ve started learning the MEAN stack. In this post I will discuss how to set up a server with Node and Express, and create templates with Jade. This whole get-up looks really simple, but I’ve spent an inordinate amount of time troubleshooting and guessing at things and I hope this can help you.
This work is adapted from Bradley Daley’s Node.js MongoDB and AngularJS Web Development book. I had tried this other book, but I started running into deprecated functionality problems in chapter six. The Daley book is very thorough and helpful. I had some issues with the Jade templates, but I’ve worked them out in this example.
So, in my root folder I have app.js
,
#!/usr/bin/env node // app.js var express = require('express'), http = require('http'), jade = require('jade') ; var app = express() ; app.set( 'views', './views' ) ; app.set( 'view engine', 'jade' ) ; app.engine( 'jade', jade.__express ) ; app.locals = { title: 'Big Long Title', myname: 'Connor', hobby: 'Complooters' } ; app.get( '/jade', function( req, res ) { res.render( 'user_jade' ) ; }) ; var server = app.listen( 3000, function() { var host = server.address().address ; var port = server.address().port ; console.log( 'App is listening at http://%s:%s, host, port ) ; }) ;
In a ./views/
directory I have two documents. The first is main_jade.jade
,
doctype html html head title #{title} body block content
The second is user_jade.jade
extends main_jade block content h1 Level One Heading p Paragraph lorem ipsum etc. ul li Name #{myname} li Hobby: #{hobby}
What’s neat is that the user_jade.jade
inserts itself into main_jade.jade
and then fills in all of the #{}
fields using the app.locals
object in app.js
. Routing and rendering is achieved through the app.get()
call in app.js
, and then the whole thing is hosted using the app.listen()
call.