Expressは、サーバー側のテンプレートエンジンを処理できます。テンプレートエンジンを使用すると、ビューにデータを追加し、HTMLを動的に生成できます。
Expressは、サーバー側のテンプレートエンジンを処理できます。
テンプレートエンジンを使用すると、ビューにデータを追加し、HTMLを動的に生成できます。
ExpressはデフォルトとしてJadeを使用します。 JadeはPugの古いバージョン、特にPug1.0です。
プロジェクトがバージョン2をリリースした2016年に商標の問題が発生したため、名前がJadeからPugに変更されました。Jade、別名Pug 1.0は引き続き使用できますが、今後はPug2.0を使用することをお勧めします。
Jadeの最後のバージョンは3年前(執筆時点、2018年夏)ですが、下位互換性の理由から、Expressでは依然としてデフォルトです。
新しいプロジェクトでは、Pugまたは選択した別のエンジンを使用する必要があります。パグの公式サイトはhttps://pugjs.org/。
Pug、Handlebars、Mustache、EJSなど、さまざまなテンプレートエンジンを使用できます。
パグの使用
Pugを使用するには、最初にPugをインストールする必要があります。
npm install pug
Expressアプリを初期化するときは、次のように設定する必要があります。
const express = require('express')
const app = express()
app.set('view engine', 'pug')
これで、テンプレートの作成を開始できます。.pug
ファイル。
アバウトビューを作成します。
app.get('/about', (req, res) => {
res.render('about')
})
とのテンプレートviews/about.pug
:
p Hello from FlavioThis template will create a p
tag with the content Hello from Flavio
.
You can interpolate a variable using
app.get('/about', (req, res) => {
res.render('about', { name: 'Flavio' })
})
p Hello from #{name}This is a very short introduction to Pug, in the context of using it with Express. Look at the Pug guide for more information on how to use Pug.
If you are used to template engines that use HTML and interpolate variables, like Handlebars (described next), you might run into issues, especially when you need to convert existing HTML to Pug. This online converter from HTML to Jade (which is very similar, but a little different than Pug) will be a great help: https://jsonformatter.org/html-to-jade
Also see the differences between Jade and Pug
Using Handlebars
Let’s try and use Handlebars instead of Pug.
You can install it using npm install hbs
.
Put an about.hbs
template file in the views/
folder:
Hello from {{name}}and then use this Express configuration to serve it on /about
:
const express = require('express')
const app = express()
const hbs = require('hbs')
app.set(‘view engine’, ‘hbs’)
app.set(‘views’, path.join(__dirname, ‘views’))
app.get(’/about’, (req, res) => {
res.render(‘about’, { name: ‘Flavio’ })
})
app.listen(3000, () => console.log(‘Server ready’))
You can also render a React application server-side, using the express-react-views
package.
Start with npm install express-react-views react react-dom
.
Now instead of requiring hbs
we require express-react-views
and use that as the engine, using jsx
files:
const express = require('express')
const app = express()
app.set(‘view engine’, ‘jsx’)
app.engine(‘jsx’, require(‘express-react-views’).createEngine())
app.get(’/about’, (req, res) => {
res.render(‘about’, { name: ‘Flavio’ })
})
app.listen(3000, () => console.log(‘Server ready’))
Just put an about.jsx
file in views/
, and calling /about
should present you an “Hello from Flavio” string:
const React = require('react')
class HelloMessage extends React.Component {
render() {
return <div>Hello from {this.props.name}</div>
}
}
module.exports = HelloMessage
Download my free Express.js Handbook
More express tutorials:
- Express, a popular Node.js Framework
- Retrieve the GET query string parameters using Express
- Validating input in Express using express-validator
- Express Templates
- Serving Static Assets with Express
- Send a JSON response using Express
- Express Sessions
- Send a response using Express
- Send files using Express
- Sanitizing input in Express using express-validator
- Routing in Express
- An Express HTTPS server with a self-signed certificate
- Express, Request Parameters
- Retrieve the POST query parameters using Express
- Handling redirects with Express
- Express Middleware
- Setup Let's Encrypt for Express
- Work with HTTP headers in Express
- Handling forms in Express
- Handling file uploads in forms using Express
- Handling CORS in Express
- Manage Cookies with Express