由於仍在早期開發階段,目前的內容較為零散。
這個專案使用了以下 Tech Stacks。 部分比較特別的 Tech Stack 會附上文件說明寫法:
- TypeScript
- React
- Tailwind CSS
- Ladle (Storybook)
- Nx (for monorepo)
- Nx CLI 的使用教學(英文)
- 原則上 nx 的命令都要以
pnpm
開頭,比如pnpm nx build types
。
- apps (App 區,包括各種前端微服務及 mock 後端)
- libs(放置組件及工具的地方)
- components(CourseAPI 的組件)
- icons(CourseAPI 用到的圖示)
- types(CourseAPI 用到的工具類型)
您可以選擇在 Gitpod 直接使用定義好的環境,無設定開始開發 CourseAPI; 您亦可可以根據下方的說明,在本機環境配置 CourseAPI 的開發環境。
點一下下方的按鈕即可直接開啟。這個 Gitpod 內含 VS Code、開發常用的 extensions, 以及預先配置好且已經安裝依賴的 Node.js 及 PNPM 環境:
TL;DR: 安裝 Node.js v16 版本,配置 corepack (corepack enable
) 然後安裝依賴 (pnpm install
)。
目前開發使用的 Node.js 版本為 v16.15.0
,但應該 v16
全系列都可以進行開發。
您可以使用 nvm
等工具安裝 Node v16:
nvm install 16
nvm use 16
如果是 Windows 的話,直接到 Node.js 的官網 下載 v16 安裝也行。
接下來,請 fork 後 clone 這個 repo。您可以點選 GitHub 專案首頁的 “Code” 按鈕, 找到這個專案的 clone 連結。fork 和 clone 部分不多贅述,可參考網路文章進行操作。
接著,您會需要安裝依賴管理工具。我們使用 corepack
管理依賴管理工具的版本。
首先,進到專案的根目錄,然後輸入:
# 一定要進到專案的根目錄!
corepack enable
啟用 corepack
,接著即可開始安裝依賴(本專案使用 PNPM 管理):
pnpm i
使用 VS Code 或其他文字編輯器或 IDE,即可開始貢獻及開發本專案。 此外,VS Code 會建議 推薦安裝的延伸模組,方便您進行程式編寫。
Ladle 可以讓您清楚看到組件實際顯示的模樣。輸入以下命令即可啟動 Ladle:
pnpm nx ladle (專案名稱)
假如想要看 icons
的組件,請輸入:
pnpm nx ladle icons