📖

express-handlebars(hbs)の使い方

2022/07/05に公開

Node.js

Express

handlebars

tech

ディレクトリを作成して初期化します。

md hbs
cd hbs
md views
cd views
md layouts
cd ../
npm init -y

expressとexpress--handlebarsのインストール

npm install express express-handlebars

hbs直下にapp.jsを作成

app.js

var express = require('express');
const handlebars = require('express-handlebars')
const app = express();
app.engine('handlebars', handlebars.engine());
app.set('view engine', 'handlebars');
app.set('views', './views');
app.get('/', (req, res) => {
    res.render('home');
});
app.listen(3000, () => console.log('listening on port 3000!'))

hbs/views下にhome.handlebarsを作成

home.handlebars

<h1>Example App: Home</h1>

hbs/views/layouts下にmain.handlebarsを作成

main.handlebars

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Example App</title>
</head>
<body>
    {{{body}}}
</body>
</html>

ファイル構成は以下の感じになります。

node app.js を起動する
コンソールに以下が表示したら、listening on port 3000!
ブラウザーを起動して表示する

Example App: Home

が表示されたらhandlebarsでhome.handlebarsの文字の更新内容をmain.handlebarsにマージしhtmlで出力できたことになります。

Discussion