Try   HackMD

node.js + Firebase + TypeScript 環境建置

新建 Git + node.js + Firebase + TypeScript 專案

youtube, ref

以下所有操作都位於專案資料夾下。

Step 1: (Optional) Git

請先確認安裝好 git,在終端機輸入 git 能正確識別,並建立好 Github 帳號。

  • 建立遠端 repo

    開啟 Github,建立遠端 Repository 並設定必要資訊、記下連結。

  • 本地

    • 初始化
      ​​​​​​​​git init
      
    • 若專案資料夾下有其他資料,可能會想先 first commit 一下
      ​​​​​​​​git add -A
      ​​​​​​​​git commit -m "First commit to initialize repository"
      
    • 加入遠端 repository 並上傳
      ​​​​​​​​git remote add origin <REPO_URL>
      ​​​​​​​​git push -u origin BRANCH_NAME # BRANCH_NAME is mostly "master"
      
  • (Optional) 至 Github 確認是否成功 push 上去

Step 2: node.js

請先確認安裝好 node.js,在終端機輸入 npmnpx 都能正確識別。

  • 初始化專案資料夾
    ​​​​npm init
    
  • (Optional, 搭配 Firebase) 安裝 firebase 套件
    ​npm install -g --save-dev firebase-tools
    

Step 3: Firebase

請先確認完成 node.js 的設定。

  • 確認已經申請並設定好遠端 Firebase
    • 建議都啟用開發模式
    • 可比如啟用以下功能
      • Authentication, 並啟用以 Google 帳號登錄
      • Realtime Hosting
      • Storage
  • 本地操作
    • 登入 Firebase
      ​​​​​​​​firebase login
      
      會透過瀏覽器登入驗證,若很久以前登入過且過很久,建議改用以下指令。
      ​​​​​​​​firebase login --reauth
      
    • 初始化 Firebase 專案
      ​​​​​​​​firebase init
      
      依照提示以空白鍵勾選設定遠端時啟用的功能,並設定專案細節。建議設定:
      • 若有使用 Realtime Hosting,則依照預設使用 database.rules.json 作為管理資料庫的設定檔
      • 多頁網站 (非 single page)
      • 不要初始化 git
    • 部署 Firebase
      ​​firebase deploy
      
      此時會提示 Firebase 部署到的網站連結,可使用瀏覽器開啟該連結並確認結果。

Step 4: TypeScript

請下載 TypeScript 編譯器,確認在終端機輸入 npxtsc 都可被正確識別。

  • 初始化 TypeScript 專案
    ​npx tsc --init
    
  • 調整生成的 tsconfig.json,比如調整
    • rootDir 決定來源的 .ts 放在哪
    • outDir 決定生成的 .js 要放在哪
  • 編譯
    設定好 tsconfig.json 後,編譯僅需簡單三字。
    ​tsc