The Fastest Way to Build a Quick Starter App with Express.js

Over the years I’ve used Express.js many times as a quick getting started example app. Since I often reference it I wanted to provide a short post that shows exactly what I do 99.9% of the time to start one of these quick Express.js reference apps. I’ve detailed in this post how to get started with Express.js the fastest way I know. There is one prerequisite, I’m assuming in this post you’ve already got Node.js installed. With that in mind, check out my installation suggestions for Node.js if you need to get that installed still. The other thing, is you’ll need to have git installed. On MacOS and Linux git is most likely installed already, if you’re on Windows I’ll leave that googling exercise up to you.

Create a directory and navigate into the directory.

mkdir quick-start-express
cd quick-start-express

Now in that directory execute the following command. Note, this command is available as of node.js 8.2.0.

npx express-generator
npm install

Inside that directory that you’ve navigated to, you’ll now have an Express.js skeleton app setup to run with the dependencies now downloaded with npm install. On MacOS or Linux run the following command to start the web app.

DEBUG=quick-start-express:* npm start

If you’re on Windows run the following command.

set DEBUG=quick-start-express:* & npm start

That’s it, one of the quickest ways to get a Node.js site up and running to start developing against!

If you’d like to dig in a bit deeper, here’s a great follow up post on creating APIs with Express. Give it a read, it’ll give you some great next steps to try out!

Cheers, and happy thrashing code!

Fixing Up Passport.js ‘passport-http’ for Express v4

Even though it isn’t in the primary trunk of code for the ‘passport-http’ Passport.js Strategy, I’ve upgraded the packages.json and app.js file for the basic username and passport authentication to Express.js v4. If you’re using Express.js and are looking to migrate to v4 from v3 or earlier a great starting place is to check out the “Migrating from 3.x to 4.x” wiki page. As for the passport-http strategy, here’s the updated example I put together in a commit here with my own fork here, with the code changes below.

First step was to bump to the latest Express.js v4 Module. I did this with a simple edit to the packages.json file. The original looked like this

[sourcecode language=”javascript”]
{
"name": "passport-http-examples-basic",
"version": "0.0.0",
"dependencies": {
"express": ">= 0.0.0",
"passport": ">= 0.0.0",
"passport-http": ">= 0.0.0"
}
}
[/sourcecode]

which I changed the depedency from >= 0.0.0 to >= 4.0.0 so that it would require something above v4.

[sourcecode language=”javascript”]
{
"name": "passport-http-examples-basic",
"version": "0.0.0",
"dependencies": {
"express": ">= 4.0.0",
"passport": ">= 0.0.0",
"passport-http": ">= 0.0.0"
}
}
[/sourcecode]

Technically the old file would have pulled the latest (which as of today I believe is 4.1.1) but it would also not do anything if you’d already pulled the example down. It just make sit more specific that the version is v4+ now.

After changing that dependency I added Morgan. Morgan is a replacement middleware for the logger. The final packages.json file looked like this when I was done.

[sourcecode language=”javascript”]
{
"name": "passport-http-examples-basic",
"version": "0.0.0",
"dependencies": {
"express": ">= 4.0.0",
"passport": ">= 0.0.0",
"passport-http": ">= 0.0.0",
"morgan": "~1.0.0"
}
}
[/sourcecode]

Once that was done I nuked my node_modules directory and ran npm install to pull down the latest bits. Once I did that, starting with the app.js I made a few changes. Below is what the app.js file looked like when I started with.

[sourcecode language=”javascript”]
var express = require(‘express’)
, passport = require(‘passport’)
, util = require(‘util’)
, BasicStrategy = require(‘passport-http’).BasicStrategy;

var users = [
{ id: 1, username: ‘bob’, password: ‘secret’, email: ‘bob@example.com’ }
, { id: 2, username: ‘joe’, password: ‘birthday’, email: ‘joe@example.com’ }
];

function findByUsername(username, fn) {
for (var i = 0, len = users.length; i < len; i++) {
var user = users[i];
if (user.username === username) {
return fn(null, user);
}
}
return fn(null, null);
}

// Use the BasicStrategy within Passport.
// Strategies in Passport require a `verify` function, which accept
// credentials (in this case, a username and password), and invoke a callback
// with a user object.
passport.use(new BasicStrategy({
},
function(username, password, done) {
// asynchronous verification, for effect…
process.nextTick(function () {

// Find the user by username. If there is no user with the given
// username, or the password is not correct, set the user to `false` to
// indicate failure. Otherwise, return the authenticated `user`.
findByUsername(username, function(err, user) {
if (err) { return done(err); }
if (!user) { return done(null, false); }
if (user.password != password) { return done(null, false); }
return done(null, user);
})
});
}
));

var app = express.createServer();

// configure Express
app.configure(function() {
app.use(express.logger());
// Initialize Passport! Note: no need to use session middleware when each
// request carries authentication credentials, as is the case with HTTP Basic.
app.use(passport.initialize());
app.use(app.router);
app.use(express.static(__dirname + ‘/public’));
});

// curl -v -I http://127.0.0.1:3000/
// curl -v -I –user bob:secret http://127.0.0.1:3000/
app.get(‘/’,
// Authenticate using HTTP Basic credentials, with session support disabled.
passport.authenticate(‘basic’, { session: false }),
function(req, res){
res.json({ username: req.user.username, email: req.user.email });
});

app.listen(3000);
[/sourcecode]

First changes, add some requires, remove some requires.

[sourcecode language=”javascript”]
var express = require(‘express’)
, passport = require(‘passport’)
, util = require(‘util’)
, BasicStrategy = require(‘passport-http’).BasicStrategy;
[/sourcecode]

and changed it to

[sourcecode language=”javascript”]
var express = require(‘express’)
, passport = require(‘passport’)
, util = require(‘util’)
, BasicStrategy = require(‘passport-http’).BasicStrategy
, morgan = require(‘morgan’)
, app = express();
[/sourcecode]

Then I deleted the entire section shown below.

[sourcecode language=”javascript”]
var app = express.createServer();

// configure Express
app.configure(function() {
app.use(express.logger());
// Initialize Passport! Note: no need to use session middleware when each
// request carries authentication credentials, as is the case with HTTP Basic.
app.use(passport.initialize());
app.use(app.router);
app.use(express.static(__dirname + ‘/public’));
});
[/sourcecode]

I replace that with a nicely cleaned up Express.js v4 section of code and the replacement for logger, the morgan() library. Initializing passport however is still done in the same ole’ trusty way with initialize().

[sourcecode language=”javascript”]
app.use(morgan());
app.use(passport.initialize());
[/sourcecode]

Ordering of code has changed a bit for express.js, which meant I needed to have the app.use commands before the following section, which I moved right up underneath the two app.use statements.

[sourcecode language=”javascript”]
// curl -v -I http://127.0.0.1:3000/
// curl -v -I –user bob:secret http://127.0.0.1:3000/
app.get(‘/’,
// Authenticate using HTTP Basic credentials, with session support disabled.
passport.authenticate(‘basic’, { session: false }),
function(req, res){
res.json({ username: req.user.username, email: req.user.email });
});
[/sourcecode]

Finished app.js File

After those changes the app.js file should look like this.

[sourcecode language=”javascript”]
var express = require(‘express’)
, passport = require(‘passport’)
, util = require(‘util’)
, BasicStrategy = require(‘passport-http’).BasicStrategy
, morgan = require(‘morgan’)
, app = express();

app.use(morgan());
app.use(passport.initialize());

// curl -v -I http://127.0.0.1:3000/
// curl -v -I –user bob:secret http://127.0.0.1:3000/
app.get(‘/’,
// Authenticate using HTTP Basic credentials, with session support disabled.
passport.authenticate(‘basic’, { session: false }),
function(req, res){
res.json({ username: req.user.username, email: req.user.email });
});

var users = [
{ id: 1, username: ‘bob’, password: ‘secret’, email: ‘bob@example.com’ }
, { id: 2, username: ‘joe’, password: ‘birthday’, email: ‘joe@example.com’ }
];

function findByUsername(username, fn) {
for (var i = 0, len = users.length; i < len; i++) {
var user = users[i];
if (user.username === username) {
return fn(null, user);
}
}
return fn(null, null);
}

// Use the BasicStrategy within Passport.
// Strategies in Passport require a `verify` function, which accept
// credentials (in this case, a username and password), and invoke a callback
// with a user object.
passport.use(new BasicStrategy({
},
function(username, password, done) {
// asynchronous verification, for effect…
process.nextTick(function () {

// Find the user by username. If there is no user with the given
// username, or the password is not correct, set the user to `false` to
// indicate failure. Otherwise, return the authenticated `user`.
findByUsername(username, function(err, user) {
if (err) { return done(err); }
if (!user) { return done(null, false); }
if (user.password != password) { return done(null, false); }
return done(null, user);
})
});
}
));

app.listen(3000);
[/sourcecode]

If you execute either of the curl commands shown in the comments in the app.js code you should see the respective response when running the application.

[sourcecode language=”bash”]
curl -v -I http://127.0.0.1:3000/
curl -v -I –user bob:secret http://127.0.0.1:3000/
[/sourcecode]

…and that should get you running with Passport.js and Express.js v4.

Deploy a Framework Friday #3 with node.js + express.js

Time for the node.js “Deploy a Framework Friday”. First get node.js and express.js installed (i.e. npm install express) and then create your node.js application.

[sourcecode language=”bash”]
adron$ express nodejs

create : nodejs
create : nodejs/package.json
create : nodejs/app.js
create : nodejs/public
create : nodejs/public/javascripts
create : nodejs/public/images
create : nodejs/public/stylesheets
create : nodejs/public/stylesheets/style.css
create : nodejs/routes
create : nodejs/routes/index.js
create : nodejs/views
create : nodejs/views/layout.jade
create : nodejs/views/index.jade

dont forget to install dependencies:
$ cd nodejs && npm install
[/sourcecode]

Once the app is installed open up the app.js file and edit the code so that it reflects what is shown below.

[sourcecode language=”javascript”]
var express = require(‘express’)
, routes = require(‘./routes’);

var app = module.exports = express.createServer();

// Configuration

app.configure(function(){
app.set(‘views’, __dirname + ‘/views’);
app.set(‘view engine’, ‘jade’);
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(__dirname + ‘/public’));
});

app.configure(‘development’, function(){
app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
});

app.configure(‘production’, function(){
app.use(express.errorHandler());
});

// Routes

app.get(‘/’, routes.index);

// Cloud Foundry Environment Variables
var port = (process.env.VMC_APP_PORT || 3000);

app.listen(port);
console.log("Cloud Foundry Demo Express server listening on port %d in %s mode.", app.address().port, app.settings.env);
[/sourcecode]

The emphasis is the port variable added for the VMC_APP_PORT. This variable is needed by the Cloud Foundry system to know which port that node will use to host on, which Cloud Foundry will then intelligently map to so you will get the standard default port 80 activity you expect. For more information about all this hosting mess with node.js check out one of my previous write ups on the topic on the New Relic Blog.

Once you’ve setup this file, then just deploy using the with npm support option that states the version of node.

[sourcecode language=”bash”]
vmc push –version=node06
[/sourcecode]

For more information about deploying node apps with npm module dependencies check out this blog entry on “Cloud Foundry supports node.js modules with NPM“.

All done. Yes, there is more Deploy a Framework Fridays coming up, so stay tuned!

Building a Node.js + Express.js + Jade CoderWall + Geekl.st Portfolio

If you’re looking for Part 2…

Alright, diving right in. First, get an express.js application setup and install all the dependencies.

Creating the Express.js Web Application

[sourcecode language=”bash”]
$ express codingWall

create : codingWall
create : codingWall/package.json
create : codingWall/app.js
create : codingWall/public
create : codingWall/public/javascripts
create : codingWall/public/images
create : codingWall/public/stylesheets
create : codingWall/public/stylesheets/style.css
create : codingWall/routes
create : codingWall/routes/index.js
create : codingWall/views
create : codingWall/views/layout.jade
create : codingWall/views/index.jade

dont forget to install dependencies:
$ cd codingWall && npm install

$ cd codingWall/
$ npm install
npm http GET https://registry.npmjs.org/express/2.5.8
npm http GET https://registry.npmjs.org/jade
npm http 200 https://registry.npmjs.org/express/2.5.8
npm http GET https://registry.npmjs.org/express/-/express-2.5.8.tgz
npm http 200 https://registry.npmjs.org/jade
npm http 200 https://registry.npmjs.org/express/-/express-2.5.8.tgz
npm http GET https://registry.npmjs.org/mime/1.2.4
npm http GET https://registry.npmjs.org/mkdirp/0.3.0
npm http GET https://registry.npmjs.org/qs
npm http GET https://registry.npmjs.org/connect
npm http GET https://registry.npmjs.org/commander/0.5.2
npm http 200 https://registry.npmjs.org/qs
npm http 200 https://registry.npmjs.org/mkdirp/0.3.0
npm http GET https://registry.npmjs.org/mkdirp/-/mkdirp-0.3.0.tgz
npm http 200 https://registry.npmjs.org/mime/1.2.4
npm http GET https://registry.npmjs.org/mime/-/mime-1.2.4.tgz
npm http 200 https://registry.npmjs.org/commander/0.5.2
npm http GET https://registry.npmjs.org/commander/-/commander-0.5.2.tgz
npm http 200 https://registry.npmjs.org/connect
npm http 200 https://registry.npmjs.org/mkdirp/-/mkdirp-0.3.0.tgz
npm http 200 https://registry.npmjs.org/mime/-/mime-1.2.4.tgz
npm http 200 https://registry.npmjs.org/commander/-/commander-0.5.2.tgz
npm http GET https://registry.npmjs.org/formidable
npm http 200 https://registry.npmjs.org/formidable
jade@0.26.0 ./node_modules/jade
├── commander@0.5.2
└── mkdirp@0.3.0
express@2.5.8 ./node_modules/express
├── qs@0.4.2
├── mime@1.2.4
├── mkdirp@0.3.0
└── connect@1.8.7
$
[/sourcecode]

Next get a basic app with a message built. This will make sure all the Jade, Express.js and of course Node.js bits are all installed and running.

[sourcecode language=”bash”]
$ node app.js
[/sourcecode]

Build The UI With Jade Templates

At this point you should be able to navigate to http://localhost:3000 in a browser and view the default express.js web app. So now let’s add something relevant to the page. First, I’m just going to stick my name on the page in the index.jade file. My method for editing the file is usually to just use a text editor such as TextMate.

[sourcecode language=”bash”]
$ mate views/index.jade
[/sourcecode]

There isn’t really a whole lot to the file yet. One thing you’ll notice though, is the Jade Templating.

[sourcecode language=”vb”]
h1= title
p Welcome to #{title}
[/sourcecode]

This might seem strange at first, but here’s an example of the HTML mess we normally see and then the same thing cleaned up. So here’s the some HTML goo…

[sourcecode language=”html”]
<header id="header" class="container">
<div id="socialLinks" class="span-24">
<ul class="right">
<li>Follow us:</li>
<li><a title="Twitter" href="http://www.twitter.com&quot; target="_blank"><img src="images/Twitter_32x32.png" alt="" /></a></li>
<li><a title="Facebook" href="http://www.facebook.com&quot; target="_blank"><img src="images/Facebook_32x32.png" alt="" /></a></li>
</ul>
</div>
<div id="titleContent" class="span-24">
<div id="textLogo">
<a title="GoldMind" href="/">
<span id="companyName">GoldMind</span>
</a>
</div>
<span id="textLogoSubtitle">What do you have to learn?</span></div>
</header>
[/sourcecode]

…and the Jade Template of the same.

[sourcecode language=”vb”]
header.container#header
div.span-24#socialLinks
ul.right
li Follow us:
li
a(href=’http://www.twitter.com&#8217;)
| <img src="images/Twitter_32x32.png" alt="" />
li
a(href=’http://www.facebook.com&#8217;)
| <img src="images/Facebook_32x32.png" alt="" />
div.span-24#titleContent
div#textLogo
a(href=’/’, title=’GoldMind’)
span#companyName GoldMind
span#textLogoSubtitle What do you have to learn?
[/sourcecode]

Much shorter, much cleaner, and lots less noise when one yanks away all the repetitive chevrons. Now that we’ve looked at an example of nasty HTML and clean Jade, let’s step through how to get certain markup with Jade.

The first thing to note is that each tag is indented below the tag it is included within. That’s how things are nested in Jade, and intelligently, no closing tag is needed. But what if you need the id or class added to the tag. That’s also extremely easy. To add the id just add a hash between the tag and the id parameter like this.

[sourcecode language=”vb”]
div#theIdName
[/sourcecode]

For a class added to the tag.

[sourcecode language=”vb”]
div.className
[/sourcecode]

To add both an id and a class.

[sourcecode language=”vb”]
div.className#theIdName
[/sourcecode]

If you open up the layout.jade file you’ll fine some other parts of the Jade Templating I haven’t covered, variables. In the layout.jade file you’ll find the following code.

[sourcecode language=”vb”]
!!!
html
head
title= title
link(rel=’stylesheet’, href=’/stylesheets/style.css’)
body!= body
[/sourcecode]

The title is set to title. Which is actually set in the index.js file. The index.js file has the routing functions that are called from the app.js file that launches the web application. Looking in the index.js file you’ll find the value that is passed in as the title. Change that to something custom for our app example. I changed mine as follows.

[sourcecode language=”javascript”]
exports.index = function(req, res){
res.render(‘index’, { title: "Adron’s Coder Portfolio Site" })
};
[/sourcecode]

Also, to get a little closer to the HTML5 Spec, I changed the layout.jade page as follows.

[sourcecode language=”html”]
doctype 5
html(lang="en")
head
title= title
link(rel=’stylesheet’, href=’/stylesheets/style.css’)
body!= body
[/sourcecode]

With those two changes we should have a custom message that is processed and also HTML5 compliance. Be sure to kill node.js if it is still running and restart it so all the changes are taken into account.

Mashing it Up!

Now it is time to mash this CoderWall & Geekli.st stuff up, but alas, that’s coming in the NEXT blog entry. Stay tuned, I’ll have it up in the morning!

Added: Part 2