from Serving Static Files in Express Framework - Codeforgeek
本篇筆記將解決以下問題：
誰適合閱讀：
from Level Up!
前篇 提到的 .handlebars 檔案須先經過伺服器處理過，才能被正確使用；相對於此，「靜態檔案（static files）」就是可以直接提供瀏覽器使用的文件。
靜態檔案存放位置 from Alpha Camp's material
慣例是將靜態檔案存放在名為 public 的檔案夾中，並且用 javascripts 和 stylesheets 來整理。
如果對 HTML 熟悉，一定知道我們會將 CSS 檔案放在 </head> 前、把 JavaScript 檔案放在 </body> 前。
值得注意的是，路徑只會使用 /public/ 後的部分，並且要在 app.js 檔案中設定。
// app.js
...
// setting static files
app.use(express.static('public'))
// routes setting
...
from Bootstrap
我在 《JavaScript 全端網頁工程師的系統化養成》#2–1 前端開發入門學習的有效策略 中，完整提過 Bootstrap 這類的工具如何使用。
Bootstrap 是一個由 HTML、CSS 和 JavaScript 寫成的前端框架。最初是通用於 Twitter 內部的框架，後釋出為 OpenSource 專案。核心設計目的是達成響應式與行動優先，讓網站自動適應螢幕大小。之所以熱門是因為：不用寫 CSS，只需適當架構 HTML 並加上幾個 Bootstrap class 就能搭建網頁。
導入的方式跟在瀏覽器環境寫程式時一樣，按 Getting Started 的指示，放在 <head> 及 <body> 內即可。
為了不讓類似格式的大量資料佔據 app.js 文件，我們通常將資料打包在 .json 的檔案中，以提高程式碼的管理效能。
JSON 存放位置 from Alpha Camp's material
只有一個檔案時，我們會將 JSON 放在根目錄，並且在 app.js 以 require() 引用：
// app.js
// Require packages related to server
// ...
const movieList = require('./movies.json')
// setting template engine
// ...
關於本系列更多內容及導讀，請閱讀作者於 Medium 個人專欄 【無限賽局玩家 Infinite Gamer | Publication – 】 上的文章 《用 JavaScript 打造全端產品的入門學習筆記》系列指南。
iThome鐵人賽
看影片追技術