node.js Express でHTMLとか確認できる簡単なローカルサーバー作ってみた

WEBサイトの制作のときならgulpでサーバー起動してCSS・JSを本番と同じようにコンパイルして確認するのが良いのですが、実験や学習用にでわざわざコンパイルまでしなくていいローカル環境が欲しかったのでexpressで作ってみました。

インストール

$ npm install --save express pug

HTMLはpugを使いたかったのでpugもインストールしています

ローカル環境を作る

ファイル構造

package.json
server.js
/root
  |- index.pug
  |- /sample
       |- index.pug
       |- sample.js

/root ディレクトリ内にpugファイルを作りそこで使うJSとかを直接置けるようにしたいと思います。

server.js

'use strict';
const express = require('express'),
      path    = require('path'),
      app     = express();

const rootPath = '/root';

// テンプレートエンジン
app.set('views', path.join(__dirname + rootPath) );
app.set('view engine', 'pug');

// 静的ファイル
app.use(express.static(__dirname + rootPath, { index: false }));

// Routing
app.get('/', (req, res)=> {
  res.render('index');
});

app.get('/:dir', (req, res)=> {
  console.log(req.params.dir);
  res.render(req.params.dir + '/index', {title: req.params.dir});
});

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

app.listen(3000, ()=> {
  console.log("Express Server\nopen: http://localhost:3000");
});