makkham-appscript-react

A React + TypeScript app bundled as a single file and deployed to Google Apps Script using clasp.

Tech Stack

• React 19 — UI framework
• Vite — build tool with vite-plugin-singlefile to inline all assets into one HTML file
• vite-plugin-google-apps-script — GAS-compatible build output
• clasp — CLI to push code to Google Apps Script
• TypeScript

Project Structure

app-script/   # GAS project files (pushed to Google)
src/          # React source code

Setup

1. Install dependencies:

   pnpm install

2. Authenticate with Google:

   npx clasp login

3. Clone an existing GAS project (or create one at script.google.com first):

   npx clasp clone PROJECT_ID --rootDir ./app-script

Development

pnpm dev

Build & Deploy

Build the React app into app-script/:

pnpm build

Push to Google Apps Script:

npx clasp push

Test

https://script.google.com/macros/s/AKfycby_9iwf45mA-AVPhS5r2pQQ8FFcIi4SRAUWrI99XZNe/dev