概要
Express + ejsでの環境構築手順をまとめました。
インストール
npm i express ejs
index.jsの設定（全体）
index.js
const express = require('express');
const app = express();
const path = require('path');
// cssなど静的ファイルの配置場所を設定
app.use(express.static(path.join(__dirname, 'public')))
// node.jsの実行場所に関わらず、viewsが参照するディレクトリを設定する
app.set('views', path.join(__dirname, 'views'));
// テンプレートにejsを使う設定
app.set('view engine', 'ejs');
// ルーティングを設定
app.get('/', (req, res) => {
res.render('home')
})
// localhost:3000でサーバーを起動
app.listen(3000, ()=>{
console.log('watching...')
})
viewsディレクトリの設定
index.js
app.set('views', path.join(__dirname, 'views'));
app.set('views') でviewディレクトリを設定。
デフォルトはprocess.cwd() + '/views'なのでルートディレクトリ以外からNode.jsを実行するとエラーになる。
そこでpath.join(__dirname, 'views')を設定することで、どこからNode.jsを実行してもエラーにならないようにしておく。
静的ファイルの参照先を設定
index.js
app.use(express.static(path.join(__dirname, 'public')))
viewsと同様に__dirnameを設定しておく。
ルーティングの設定
第2引数にデータを渡すこともできる。動的なルーティングは以下のようにする。
app.get('/post/:category', (req, res) => {
const { category } = req.params;
const data = { posts: [...] };
res.render('category', { ...data });
});
ejsファイルを作成
viewsディレクトリにhome.ejsを作成することで、localhost:3000でページが表示される。