ReactOnAppsScript

這個專案旨在使用Google Apps Script這個(免費)伺服器框架下，進行React網站的開發建置，並以Google Sheet作為簡易型資料庫，Google Drive作為內容儲存庫，讓網頁可以動態呈現並方便管理。

使用MIT協議釋出本專案，由於專案逐步建構中，若有建議歡迎提出。

最新資訊

2025-08-15 遷徙到Mirochiu/React-Google-Apps-Script 3.1.0版本

Demo

各項功能說明(舊版)

建議搭配我寫的一系列文章：Apps Script用Sheet生成動態網頁，分別查看說明：

• Apps Script用Sheet生成動態網頁(30): 套用Bootstrap 5浮動標籤

• Apps Script用Sheet生成動態網頁(29): 表單input動態候選清單(auto-complete)

• Apps Script用Sheet生成動態網頁(28): 整合Google登入

• Apps Script用Sheet生成動態網頁(27): 整合LINE登入

• Apps Script用Sheet生成動態網頁(26): 移植註冊會員及確認信

• Apps Script用Sheet生成動態網頁(25): 登入才能使用的功能分項

• Apps Script用Sheet生成動態網頁(24): 移植刪除HTML連結功能

• Apps Script用Sheet生成動態網頁(23): 移植HTML連結列表

• Apps Script用Sheet生成動態網頁(22): 移植上傳HTML功能

• Apps Script用Sheet生成動態網頁(21): 移植會員登入頁面

使用本專案

第一次使用, 請先做以下項目

1. 先安裝pnpm, jq
2. pnpm install 安裝本專案相依套件
3. pnpm run login登入Apps Script

新Apps Script專案發布成Web App

1. pnpm run setup自動建立新的Apps Script專案
2. 到Apps Script網站中將建立好得Apps Script發布成Web App,可參考YT影片: Apps Script作為Web App
3. 紀錄發布的部署作業 ID,在dist/.clasp.json中加入deploymentId鍵值來指定部屬ID
4. pnpm run deploy發布新版本,記下新發布版本號碼
5. pnpm run open選擇剛發布的版本號碼,瀏覽器上確認結果

使用既有發布成Web App的Apps Script專案

1. 移除dist目錄和.clasp.json檔案
2. pnpm exec clasp clone --rootdir dist選擇你要用的App Script
3. 拷貝dist/.clasp.json到本專案根目錄
4. 在dist/.clasp.json中加入deploymentId鍵值發布到部署作業 ID
5. pnpm run deploy發布新版本,記下新發布版本號碼
6. pnpm run open選擇剛發布的版本號碼,瀏覽器上確認結果