[NodeJS] Template Engines

이애진·2022년 7월 14일

Node

목록 보기
3/12
post-thumbnail

base template engine: pug (구. jade)

install pug

npm install pug --save

express가 template engine을 렌더링하려면 다음과 같은 설정이 필요하다

  • views: template가 있는 directory
  • view engine: 사용할 template
app.set("view engine", "pug");
app.set("views", __dirname + "\\views"); // for window
app.set("views", __dirname + "/views"); // for linux

view engine을 설정하면 view를 추후에 수정할 때 서버를 재시작할 필요 없이 단순 view refresh 해주면 된다

sample code

  • index.ts
import express, { ErrorRequestHandler } from "express";
import dotenv from "dotenv";
import { Main } from "@interface/render";
import { StringOrNumber } from "@customTypes/union";

dotenv.config({path: __dirname + "\\.env"});

const PORT: StringOrNumber = process.env.PORT || 3000;

const app: express.Application = express();

app.set("view engine", "pug");
app.set("views", __dirname + "\\views");

app.get("/", (req: express.Request, res: express.Response, next: express.NextFunction): any => {
    res.render("main", { _desc: "Hello Typescript" } as Main);
});

app.use(((err, req, res, next) => {
    res.status(500).send(err.message);
}) as ErrorRequestHandler);

app.listen(PORT, () => console.log("Running on TS-Express Server"))
    .on("error", (err) => { throw new Error(`${err.name}: ${err.message}`) });
  • main.pug
doctype html
html
    head
        meta(charset="utf-8")
        title Typescript Application

    body
        p #{_desc}
  • result
profile
Frontend Developer

0개의 댓글