More than 1 year has passed since last update.

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

Posted at 2021-12-30

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>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up