Express4 で、テンプレートファイルの拡張子を変更するには

課題

MEAN スタックを試してみようと、express-generator でプロジェクト(EJS)を作成しました。
生成された views ファイルを、Bracket で編集し、ライブプレビューで見てみようとすると、

ライブプレビューのエラーが発生しました。

拡張子が、ejs となっているため Bracket のライブプレビューで、表示できませんでした。

どうする?

*Bracket のライブプレビューで、html 以外の拡張子を表示できるのか調べる
*Expressのテンプレートの拡張子を変更できるか調べる

対処

Bracket の設定など調べてみたのですが.... 分かりませんでした。

Express の拡張子を変更する方法を調べてみる

単純に、routes の view ファイルの指定と views ファイルの拡張子を変えてみる。

render のパラメーターを、index から index.html に変更

routes/index.js

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index.html', { title: 'Express' });
});

module.exports = router;

views　のファイル名を変更

index.ejs -> index.html

ブラウザで確認すると、下記のエラーになりました。

http

Cannot find module 'html'

undefined

Error: Cannot find module 'html'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:280:25)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Layer.handle [as handle_request] 

まずは、基本に返って express のページを見ると、変更方法が載っていました。

app.js に、拡張子と対応するテンプレートエンジンを、app.engine で指定

app.js

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var routes = require('./routes/index');
var users = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

//  拡張子 htm,htmlのテンプレートエンジンを指定
app.engine('htm', require('ejs').renderFile);  　//  <--追加
app.engine('html', require('ejs').renderFile);   //　<--追加

// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);
app.use('/users', users);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});

// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});

module.exports = app;

無事、表示する事が出来ました。
デザイナと協業する時などに必要になるかな?

参考URL