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 @yunosukeyoshino/google-apps-script-starter my-gas-project

Or if you prefer a shorter command after it's published:

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