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

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

• Fastify: 是一個高性能、可擴展、開發人員友好的 Node.js 後端 web server 框架。

  其主要特性包括：

  • 高性能：每秒可處理 3 萬個請求。
  • 可擴展：通過 hook、plugin 和 decorator 提供可擴展性。
  • 開發人員友好：提供簡潔易用的 API 和豐富的文檔。

• HTMX: 是一個輕量級的前端框架，旨在讓開發人員使用 HTML 和 CSS 輕鬆構建動態且交互性強的 Web 應用程序。

• EJS: 是一個 JavaScript 的模板語言，用於生成 HTML、XML、JSON 等各種文本格式的內容。

  其主要特性包括：

  • 語法簡潔易學，類似於 JavaScript。
  • 支持 JavaScript 條件語句和循環等控制結構。
  • 可與 Express 等 Web 框架無縫整合。

• Tailwind: 是一個 CSS 框架，旨在幫助開發人員快速構建具有現代化 UI 設計的 Web 應用程序。

  其主要特性包括：

  • 原子級 CSS：提供一系列可組合的 CSS 類，可快速構建複雜的 UI 元素。
  • 響應式設計：提供響應式媒體查詢，可根據屏幕尺寸自動調整 UI 布局。
  • 可定制性：提供主題和自定義配置，可打造個性化的 UI 設計。

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

</aside>

建立專案

• 在電腦找個舒適的位置創建資料夾命名為 course-hub
• 初始化專案

pnpm init

• 記得要在 package.json 新增 “type”: “module”

建立 nodejs 的 dev 腳本

• 我們在開發情境下，通常會需要監看檔案是否更改，實時更新重啟專案
• 這時，就需要為 node.js 專案新增 scripts，達到上面提到的需求

修改 package.json

• 修改 package.json，加入與 dev 相關的 scripts
• nodemonConfig 則是用到 node.js 常用的重啟工具，在這邊我們只監看 server 底下的檔案

{
...
	"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/"
	    ]
	 }
...
}