かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

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になってしいました。

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

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

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

// app.js

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

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


Express 4.x - API Reference