express & ejs & TypeScript にBootStrapを導入する

2295 ワード
TypeScript Express ejs Express テキストリンク

bootstrapをインストール

console.log
yarn add bootstrap

express-generaterで作られるapp.jsをTypeScript化したapp.tsにて、下準備。

app.ts
import express, { RequestHandler } from 'express';

// 略

// ejsファイル内でbootstrapを "bootstrap/css/bootstrap.min.css" などのパスで読み込めるようにする
app.use('/bootstrap', express.static(path.join(__dirname, '../node_modules/bootstrap/dist')) as RequestHandler);

ejsファイルにてbootstrapを読み込む

views/index.ejs
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" /> 
    </head>
    <body>
        <div class="container">
            <h1 class="text-primary">Hello World</h1>
        </div>
        <script src="bootstrap/js/bootstrap.min.js"></script>
    </body>
</html>