Express4 jadeからのjsファイル読み込みにハマる。

Express4系でjadeテンプレートを使いjadeでアプリ内のjavascriptファイルをscriptタグで読み込もうとしたら404になってハマってしまったのでメモ。
いわゆるスタティックファイルの読み込みです。

エラーになっていた状態

// app.js
var express = require('express'),
    path    = require('path'),
    logger  = require('morgan'),
    app     = express(),
    router  = require('./routes/app');

// log
app.use(logger('dev'));

// use jade Template
app.set('views', path.join(__dirname + '/views'));
app.set('view engine', 'jade');

// set static file dir
app.use(express.static(__dirname + '/assets'));

// Routing
app.get('/', router.index);

// Error
app.use(function(err, req, res, next) {
  console.log('>> ERROR >>', err);
  res.status(err.status || 500);
  res.send(err.message);
});
app.listen(3000);

jadeファイル

doctype html
html(lang= lang)
  head
    meta(charaset="utf-8")
    title= title
    script(src="/assets/js/myapp.js")
  body
    block body

この状態でアプリを起動してlocalhost:3000にアクセスすると

myapp.js GET 404

とjavascriptファイルが404になってしいました。

スタティック ファイルの指定に第１引数でディレクトリ名を指定する

express.static(root, [options])

express.static is the only built-in middleware in Express. It is based on serve-static, and is responsible for serving the static assets of an Express application.

The root argument refers to the root directory from which the static assets are to be served.

Express 4.x - API Reference - express.static

スタティック ファイルを指定するミドルウェアの第１引数でルートとなるディレクトリを指定してあげればOKでした。

// app.js

// set static file dir
app.use('/assets', express.static(__dirname + '/assets'));

今度は404になることなくjavascriptファイルがjadeテンプレートから読み込まれていました！
教訓。公式リファレンスを読もう... 　

---

Express 4.x - API Reference

ストライクウィッチーズ Operation Victory Arrow エーリカ・ハルトマン バニーstyle 1/8スケール ABS&PVC製 塗装済み完成品フィギュア