Google Apps Script Starter

A starter template for Google Apps Script development with TypeScript, Vite, and Tailwind CSS.

Quick Start

You can create a new project using npx:

npx create-gas-starter my-gas-project

Features

A professional boilerplate for developing Google Apps Script (GAS) web applications using modern web development standards. This starter leverages Vite for rapid development and Tailwind CSS v4 for sophisticated styling, while maintaining a single-file deployment optimized for the GAS environment.

🛠 Tech Stack

The project integrates high-performance tools to ensure a robust developer experience and clean code quality.

Category	Technology	Description
Runtime	Google Apps Script	V8 Engine environment.
Bundler	Vite 7	Next-generation frontend tooling for HMR and optimized builds.
Styling	Tailwind CSS v4	High-performance, CSS-first design framework.
Language	TypeScript	Type-safe development for both frontend and server-side.
Tooling	Biome	High-speed, all-in-one tool for linting and formatting.
Deployment	clasp	Command-line utility to manage Apps Script projects.
Manager	Bun	Fast JavaScript all-in-one toolkit.

✨ Key Features

• Optimized Assets: Automatically inlines JS and CSS into a single HTML file using vite-plugin-singlefile, ensuring seamless integration with GAS HtmlService.
• Modern Workflow: Local development server with Hot Module Replacement (HMR) for the UI.
• Strict Quality Control: Pre-configured Biome rules and Husky git hooks to maintain high standards for every commit.
• Unified Structure: All source files (Frontend, Backend, Configuration) are co-located in the src/ directory for better maintainability.

🚀 Getting Started

Prerequisites

• Bun installed on your machine.
• Access to script.google.com.

Installation

1. Clone the repository and install dependencies:

   bun install

2. Authenticate with clasp (if not already):

   bunx clasp login

Development

Start the Vite development server to work on the UI:

bun run dev

Deployment

To build the project and push the assets to Google Apps Script:

bun run push

Important

The dist/ directory is the source of truth for clasp push. Avoid modifying files in dist/ directly, as they are overwritten during the build process.

📖 Command Reference

Command	Action
bun run build	Compiles source files and generates the dist/ bundle.
bun run push	Executes build and pushes files to the GAS project.
bun run deploy	Pushes changes and creates a new immutable version/deployment.
bun run open	Opens the deployed Web App in your default browser.
bun run lint:fix	Runs Biome's linter and applies automatic fixes.

📁 Project Structure

.
├── src/
│   ├── index.html       # Web App entry point
│   ├── main.ts          # Client-side TypeScript
│   ├── style.css        # Tailwind CSS imports
│   ├── main.gs          # Server-side GAS logic
│   └── appsscript.json  # Manifest file
├── dist/                # Optimized build artifacts (Clasp target)
├── biome.json           # Biome configuration
├── vite.config.ts       # Vite build configuration
└── .clasp.json          # Clasp project settings