重啟北護課程查詢系統 Day 2 - Fastify-HTMX-EJS-Tailwind

Posted on Fri, Feb 16, 2024 Node.JS Web JS

經過重啟北護課程查詢系統 Day 1 - 頁面爬蟲的小試身手，Day 2 要來決定如何實作網頁啦！

筆者自己想要學點新的東西，所以決定使用標題打的技術來實作~~ 可能有些框架大家不是很熟悉，下面我一一的請 GPT 介紹

📢

想少時間的大大建議可以選擇看 github 唷！ https://github.com/ntunhs-course-ecosystem/course-hub/tree/day2

建立專案

pnpm init

建立 nodejs 的 dev 腳本

修改 package.json

{
...
	"scripts": {
	    "dev": "npm-run-all -p dev:*",
	    "dev:fastify": "nodemon server/server.js | pino-pretty",
	    "dev:css": "tailwindcss -i client/bundle/main.pcss -o client/public/_compiled/main.bundle.css --postcss --watch",
	    "dev:js": "esbuild client/bundle/main.js --outfile=client/public/_compiled/main.bundle.js --bundle --watch",
	    "test": "echo \"Error: no test specified\" && exit 1"
	  },
	"nodemonConfig": {
	    "watch": [
	      "server/"
	    ]
	 }
...
}

拉出專案基本雛形

└─course-hub
    ├─client    
    │  └─bundle    # 儲存要進行 bundle 的檔案
		│  └─public    # 儲存前端靜態內容
    └─server
        ├─modules    # 放置以 Domain 為主命名的 routes
        ├─plugins    # 放置 fastify plugins
        ├─repository # 放置資料庫內容的地方
        └─views      # 放置 EJS 前端頁面

安裝基本套件

這章節將會安裝"基本”的套件，主要都是參照 fastify-starter 的套件

DEV 套件

pnpm i -D @tailwindcss/forms esbuild npm-run-all postcss postcss-import tailwindcss tailwindcss-debug-screens prettier eslint-config-prettier prettier-plugin-ejs nodemon

一般套件

pnpm i @fastify/autoload @fastify/formbody @fastify/static @fastify/view @fastify/sensible @fastify/under-pressure @fastify/cors dotenv ejs fastify fastify-plugin htmx.org better-sqlite3 desm env-var close-with-grace

初始化 tailwind

創建 tailwind config

module.exports = {
    content: ["./server/views/**/*.ejs"],
    theme: {
        container: {
            center: true,
            padding: "2rem"
        },
        debugScreens: {
            position: ["bottom", "right"]
        }
    },
    plugins: [
        require("@tailwindcss/forms"),
        require("tailwindcss-debug-screens")
    ]
};

創建 postcss config

module.exports = {
    plugins: [
        require("postcss-import"),
        require("tailwindcss/nesting"),
        require("tailwindcss")
    ]
};

創建 main.css

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@layer base {
    html, body {
        @apply w-full overflow-x-hidden antialiased font-sans;
    }
}

創建 .prettierrc.json

{
    "trailingComma": "none",
    "tabWidth": 4,
    "semi": true,
    "singleQuote": false,
    "quoteProps": "consistent",
    "plugins": [
        "prettier-plugin-ejs"
    ]
}

創建 .eslintrc

{
    "parserOptions": {
        "ecmaVersion": 2022,
        "sourceType": "module"
    },
    "env": {
        "browser": true,
        "node": true,
        "es2022": true
    },
    "extends": ["eslint:recommended", "prettier"],
    "rules": {
        "semi": ["error", "always"],
        "comma-dangle": ["error", "never"],
        "no-unused-vars": "off",
        "no-console": 0,
        "no-useless-escape": "off",
        "no-useless-catch": "off",
        "no-var": "error",
        "no-control-regex": "off"
    }
}

渲染第一個 Hello World 頁面

因為筆者是第一次接觸這個架構，所以就先鎖定在 Hello World 吧！

後端

.env

SERVER_HOST="0.0.0.0"
SERVER_PORT=3000

server/app.js

import fasitfy from "fastify";
import autoLoad from "@fastify/autoload";
import { join } from "desm";

export async function buildApp(options = {}) {
    const app = fasitfy(options);

    await app.register(autoLoad, {
        dir: join(import.meta.url, "plugins")
    });

    await app.register(autoLoad, {
        dir: join(import.meta.url, "modules"),
        encapsulate: false,
        maxDepth: 1
    });

    return app;
}

/** @type {import("fastify").FastifyServerOptions} */
const appOptions = {
    logger: {
        level: "info"
    }
};


// 我們希望只有在有人監看(開發)時才使用 pino-pretty
// 否則我們將以換行分隔的 JSON 形式進行記錄，以便輸入至 log 專用的 tool
if (process.stdout.isTTY) {
    appOptions.logger.transport = {
        target: "pino-pretty"
    };
}

export default await buildApp(appOptions);

server/env-class.js

// 抓取 env 的設定
// 使用 env-var 來驗證以及針對數值轉換 env 的設定

import envVar from "env-var";
import dotenv from "dotenv";

dotenv.config();

export const ServerEnv = function () {
    return {
        host: envVar.get("SERVER_HOST").required().default("0.0.0.0").asString(),
        port: envVar.get("SERVER_PORT").required().default(3000).asPortNumber()
    };
};

server/plugins/

👉🏻

以下檔案都會建立在 server/plugins 內

import fp from "fastify-plugin";
import cors from "@fastify/cors";

async function createCorsPlugin(fastify, opts) {
    fastify.register(cors, {
        origin: false
    });
}

export default fp(createCorsPlugin, {
    name: "cors"
});
import fp from "fastify-plugin";
import formBody from "@fastify/formbody";

export default fp(async (fastify, opts)=> {
    fastify.register(formBody);
}, {
    name: "form-body"
});
import fp from "fastify-plugin";
import sensible from "@fastify/sensible";

export default fp(async (fastify, opts) => {
    await fastify.register(sensible);
}, {
    name: "sensible"
});
import fp from "fastify-plugin";
import { join } from "desm";
import fStatic from "@fastify/static";

export default fp(async (fastify, opts) => {
    fastify.register(fStatic, {
        root: join(import.meta.url, "../../client/public")
    });
}, {
    name: "f-static"
});
import fp from "fastify-plugin";
import underPressure from "@fastify/under-pressure";

export default fp(async (fastify, opts) => {
    /**
     * 這個 plugin 會在你的應用程序處於高負載時特別有用
     * 你如果有使用 express 或其餘的 web framework，你會發現 1 秒一起發送上萬個 request 可能會造成 timeout 的問題
     * 此 plugin 會根據 nodejs event loop, heap memory, rss memory (Resident set size, 作業系統分配到application的記憶體)的狀況(過度壓力無法處裡)來響應 503 (Server Unavailable) 狀態
     */
    await fastify.register(underPressure, {
        maxEventLoopDelay: 1e3,
        maxHeapUsedBytes: 1e9, // 約 1GB
        maxRssBytes: 1e9,
        maxEventLoopUtilization: 0.98
    });
}, {
    name: "under-pressure"
});
import fp from "fastify-plugin";
import { join } from "desm";
import fView from "@fastify/view";
import ejs from "ejs";

export default fp(async (fastify, opts) => {
    fastify.register(fView, {
        engine: {
            ejs: ejs
        },
        root: join(import.meta.url, "../views")
    });
}, {
    name: "view-engine"
});

server/module/

👉🏻

以下檔案都會建立在 server/module 內

/**
 * 
 * @param {import("fastify").FastifyInstance} fastify 
 * @param {import("fastify").FastifyPluginOptions} opts 
 */
export default async function (fastify, opts) {
    fastify.get("/", async (request, reply) => {
        return reply.view("components/layout", {
            page: {
                file: "../home",
                data: {}
            }
        });
    });
}

server/views/

👉🏻

以下檔案都會建立在 server/views 內

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <% if (title) { %>
    <title><%= title %></title>
    <% } else { %>
    <title>NTUNHS CourseHub</title>
    <% } %>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="/_compiled/main.bundle.css" rel="stylesheet" />
    <script defer src="/_compiled/main.bundle.js"></script>
</head>
<!doctype html>
<html>
    <%- include("components/head.ejs", {title: "NTUNHS CourseHub | Home"}) %>
    <body hx-boost="true">
        <%- include(page.file, page.data) %>
    </body>
</html>
<h1 class="text-3xl font-bold underline">Hello world!</h1>

訪問網頁

啟動專案

訪問 127.0.0.1:3000

最後的專案結構

|-- client
|   |-- bundle
|   |   |-- main.js
|   |   `-- main.pcss
|   `-- public
|       `-- _compiled
|           |-- main.bundle.css
|           `-- main.bundle.js
|-- package.json
|-- pnpm-lock.yaml
|-- postcss.config.cjs
|-- server
|   |-- app.js
|   |-- env-class.js
|   |-- modules
|   |   |-- course-hub
|   |   |   |-- index.js
|   |   |   `-- routes
|   |   `-- home.js
|   |-- plugins
|   |   |-- cors.js
|   |   |-- formBody.js
|   |   |-- sensible.js
|   |   |-- static.js
|   |   |-- under-pressure.js
|   |   `-- view-engine.js
|   |-- repository
|   |-- server.js
|   `-- views
|       |-- components
|       |   `-- head.ejs
|       `-- home.ejs
`-- tailwind.config.cjs

參考資料