霍爾筆記

全端網站設計範例：後端專案建立

2024-03-03 約 925 字 --

本篇為「全端網站架構」中的後端範例及細節。

所需工具及準備

  • Node.js，根據官方推薦可使用 v20.11.1 LTS
  • npm，建議版本為 npm v10
  • Docker 及 Docker Compose，用來避免不同環境的啟動及部署問題。後端程式的執行及資料庫等等，都會使用 Docker 來運行
  • Git，用來做版本控管

建立 Node.js 專案

此專案會搭配 Typscript, Prettier, ESLint 來做開發，API 框架則會使用 Apollo Server。

首先，初始化專案，使用 CLI 新建一個專案的目錄並進入。

$ git init # 初始化 Git
$ mkdir api && cd api # 在根目錄建立 api 資料夾
$ npm init # 初始化，產生 package.json
$ mkdir src
$ touch src/index.ts # 建立程式進入點

設定 TypeScript

安裝 TypeScript

$ npm install -D typescript ts-node nodemon

其中 typescript 是接下來開發使用的程式語言，簡單來講的就是加上型態、更嚴謹的 JavaScript。

而 ts-node 是基於 Node.js 的 TypeScript 執行引擎和 REPL (Read-Eval-Print Loop)；而 nodemon 則是自動偵測檔案的修改並且重新啟動程式，方便在開發 Node.js 程式時不用手動重啟。

再來是設定 TypeScript，透過 tsconfig.json 這支設定檔

$ touch tsconfig.json # 新增 TypeScript 設定檔

編輯此設定檔，相對前端有 React 等套件的情況下，後端 TypeScript 的設定內容會相對少一些

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

加上 package.json 的 Scripts 啟動 Dev Server 看看

{
  "scripts": {
    "start": "nodemon --exec ts-node src/index.ts"
  }
}

在 index.ts 加上一些程式碼來測試

console.log('Hello, World!');

下指令啟動 Dev Server 測試是否印出 Hello, World!

$ npm start
...
[nodemon] starting `ts-node src/index.ts`
Hello, World!

設定 Prettier，美化程式碼

安裝 Prettier

$ npm install -D prettier eslint-config-prettier eslint-plugin-prettier

其中 eslint 開頭的套件是為了讓接下來要安裝的 eslint 能和 prettier 一起使用（不會因為 prettier 的設定而使得 linter conflict）。 再來，新增 prettier 的設定檔。

$ touch .prettierrc.json

編輯其內容

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "printWidth": 140
}

設定 ESLint，檢查程式碼

安裝 ESLint，（可以用 npx eslint --init 下互動式指令來安裝 depenencies，但這次直接安裝）

$ npm install -D \
  eslint \
  eslint-config-airbnb-base \
  eslint-plugin-import \
  @typescript-eslint/eslint-plugin \
  @typescript-eslint/parser

再來，新增 eslint 的設定檔

$ touch .eslintrc.json

編輯其內容

{
  "env": {
    "browser": true,
    "commonjs": true,
    "es2023": true
  },
  "extends": ["prettier", "airbnb-base", "plugin:@typescript-eslint/recommended"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 14
  },
  "plugins": ["prettier", "@typescript-eslint"],
  "rules": {
    "prettier/prettier": "error",
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never"
      }
    ]
  },
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  }
}

其中 settings 及 rules 下的 import/extensions 為了避免以下問題而加上的，可參閱全端網站設計範例：後端新增 Apollo server

修改要執行的 Scripts

由於加上 ESLint 及 Prettier 的關係，在 package.json 下的 scripts 加上這兩行：lint 及 format 指令

"scripts": {
    "lint": "eslint \"./src/**/*.{js,jsx,ts,tsx,json}\"",
    "format": "prettier --write \"./src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\""
  },

.gitignore

將一般需要忽略的檔案寫入 .gitignore 中

# Node.js
/node_modules
npm-debug.log.*

# Misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

最後輸入 git add . 及 git commit -m "Init version" 將第一個版本納入 Git 控管，其中 add . 是納入當前目錄所有檔案、-m 是此版本的訊息（Message）。

參考資料

  1. How to setup ESLint and Prettier on Node

CHANGELOG

日期敘述
2024-03-03更新使用的工具版本、建立專案細節
2021-08-20初版
全端網站設計 #fullstack