from How to create an http server with Express in Node.js

前篇 提到 「語言框架 framework」 提供了 伺服器的架設、路由系統規劃及資料庫操作 等產品地基，以協助我們能快速有效地搭建伺服器的基礎核心。

從這篇筆記開始，將會是一連串的實作演練，以迅速上手這些新工具。

Node.js 的套件管理系統 npm

npm logo from wikipedia

在開始使用 Express 前，首先得安裝到專案上。在正式安裝前，先特別介紹接下來會頻繁使用的 Node Package Manager（npm）。

nvm vs npm

npm 是附屬於 Node.js 的套件管理系統，在安裝 Node.js 即內建呼叫的指令。在剛接觸時容易跟 Node Version Manager (nvm) 搞混。他們的遞進關係如下：

• nvm 用以管理並切換個版本的 Node.js
• 各版本的 Node.js 上搭載了各個專案
• 各專案由 npm 來管理專案相關的套件

Express 專案初始化

在成為工程師的路上，我們會越來越常使用 Terminal。未來各個套件都會以 npm install 的指令來安裝。而在正式安裝前，我們需要先進行初始化，以生成能自動追蹤套件安裝的管理文件 package.json。步驟如下：

建立專案資料夾

[~] $ mkdir express_app
[~] $ cd express_app
[~/express_app] $

確認專案需求後，首先建立專案資料夾。

npm 初始化

[~/express_app] $ npm init -y

啟動初始化程序，以自動建立 package.json。在未來的協作，此檔案能幫助我們了解各個專案需要用到的套件，用簡單清單來呈現，以避免將大量套件資料一併上傳到 GitHub 的 remote repo。屆時，僅需在專案下載後，以 npm install 指令下載所有被引入專案的套件即可。

安裝 Express

[~/express_app] $ npm i express

初始化完畢分別會有這些畫面：

Express Server 快速上手

from Writing basic web/HTTP server using Express.JS framework

在 Node.js & nvm 初步上手 中提過：

在本機環境下架設伺服器，大致上都可以分成三個步驟：

• 載入框架、工具、模組並定義伺服器相關變數
• 設定伺服器如何處理請求及回應
• 啟動伺服器以監聽請求

我們慣例上會建立一個 app.js 的檔案來當作 controller，接下來就是 分三階段、大量刻意練習！

載入框架並定義伺服器相關變數

// Require packages and define server related variables
const express = require('express')
const app = express()
const port = 3000

與單純用 Node.js 架設伺服器相比，我們省去 HTTP 及 Hostname 的引入，因為在 Express 中這些都已為我們內建好了。

設定路由如何處理請求及回應

// Set routes
app.get('/', (req, res) => {
  res.send('This is my first Express Web App')
})

同樣與 Node.js 架設伺服器相比，Express 已為我們定義好 statusCode，並且會自動判別 Content-Type。另外最重要的部分是，多了可以傳入 URL 的參數，以讓我們建立大量的路由。

Express route from Alpha Camp's material

啟動伺服器以監聽請求

// start and listen on the Express server
app.listen(port, () => {
  console.log(`Express is running on http://localhost:${port}`)
})

最後的步驟相去不遠，只差不必傳入已被定義好的 Hostname。

Express 刻意練習時的注意事項

使用前記得 nvm use

在 Node.js 的筆記 提過，但這點很重要所以再次提醒，每次繼續專案進度時，都要記得輸入 nvm use ${version number} ，才得以操作 node 的相關指令及 npm，否則會看到的錯誤通知。

安裝全域 Nodemon

每次修改並存檔後，都必須要在 Terminal 透過 Ctrl + C 把伺服器停掉，再以 node js檔案 這個指令重新啟動，才會執行更新的程式碼。

為了解決 Node.js 在存檔後需手動重啟的這個機械化問題，在接下來的專案開發中，我們會在整個環境下安裝 Nodemon。它能自動偵測開發者專案內的檔案，一旦在專案資料夾內的檔案有被修改變更，就會自動重啟伺服器。

[~/express_app] $ npm install -g nodemon
[~/express_app] $ nodemon app.js

持續擴充專案初始化備忘錄

在此之前我們已學過如何利用 git 進行版本控制，並且能用 Express 快速搭建好用的伺服器。接下來就可以用 MVC 設計原則，並適當導入 packages 以逐步搭建我們的產品。

在進入下一步之前，首先彙整我們每次初始化專案時都會走過的步驟：

Init Server

1. 新增專案資料夾
2. npm init -y 並設定 package.json

"start": "node app.js"
"dev": "nodemon app.js"

3. 安裝 Express：npm i express

4. 設定主程式 app.js

   • 載入框架、工具、模組並定義伺服器相關變數
   • 設定伺服器如何處理請求及回應
   • 啟動伺服器以監聽請求

5. 初始化版本控制：git init，並新增 .gitignore 排除不必載入版本控制的檔案

# OS X
.DS_Store*
Icon?
._*

# npm
node_modules
*.log
*.gz

6. 新增版本紀錄

[~/express_app] $ git add .
[~/express_app] $ git commit -m "feat: project init"

閱讀更多

關於本系列更多內容及導讀，請閱讀作者於 Medium 個人專欄 【無限賽局玩家 Infinite Gamer | Publication – 】 上的文章 《用 JavaScript 打造全端產品的入門學習筆記》系列指南。