This demonstrates how to use Svelte with Google Apps Script using Clasp for seamless deployment. This demonstrates how to use Svelte with Google Apps Script.

Prerequisites

• Node.js installed on your machine
• A Google account
• Enable the Google Apps Script API at https://script.google.com/home/usersettings

Building

• npm run build - Build the Svelte application
• npm run preview - Preview the production build locally
• npm run check - Run TypeScript and Svelte checks

Images

Google Apps Script cannot host local files — the deployed web app only serves the CSS and JS that the build inlines into gas/Stylesheet.html and gas/Javascript.html. So every image must be baked into the bundle as a base64 data URI.

To add an image, import it from src/ (e.g. src/assets/):

<script lang="ts">
  import logo from './assets/logo.svg';
</script>
<img src={logo} alt="Logo" />

Vite inlines any imported asset under 50 KiB (see ASSETS_INLINE_LIMIT in vite.config.ts). If an image is larger, the build fails with a message naming the file — optimize/resize it so it inlines, raise ASSETS_INLINE_LIMIT, or reference it as an external https:// URL.

Do not reference images from public/ by URL (e.g. <img src="/logo.svg">) for anything that must appear in the deployed app — public/ files are copied as separate files that GAS cannot serve. public/ is for local-dev-only assets such as the dev favicon.

Developing

• npm install to install dependencies.
• npm run dev to start the development server.
• Open http://localhost:5173 in your browser to see the app.
• Edit the Svelte components in the src folder. The app will reload automatically

Running Locally with Mocked Google Apps Script

To test Google Apps Script interactions locally, the project includes a mock setup that simulates the google.script.run API.

To enable the mock setup, ensure that the mockSetup.ts file is imported and invoked in your main entry file (src/main.ts):

Then add your mock server functions in src/lib/mocks.ts.

Working with Clasp for automated deployment

Enable Clasp

Enable the Google Apps Script API: https://script.google.com/home/usersettings

Authenticate with Clasp

Login to your Google account:

npm run clasp:login

This will open a browser window for authentication.

Create or Connect to a Google Apps Script Project

Option A: Create a new project

npm run clasp:create

This creates a new Google Apps Script project and generates a .clasp.json file with your project credentials.

Option B: Connect to an existing project

If you already have a Google Apps Script project, create a .clasp.json file in the root directory:

{
  "scriptId": "YOUR_SCRIPT_ID_HERE",
  "rootDir": "gas"
}

Replace YOUR_SCRIPT_ID_HERE with your script ID (found in Project Settings in the Apps Script editor).

Build and Deploy

Build your Svelte app and push to Google Apps Script:

npm run clasp:push

This command builds the project and pushes all files to your Apps Script project.

Deploy as Web App

1. Open your Apps Script project:

   npm run clasp:open

2. In the Apps Script editor, click Deploy > New deployment

3. Select type Web app

4. Configure access settings as needed

5. Click Deploy

Clasp Commands

• npm run clasp:login - Authenticate with Google
• npm run clasp:logout - Logout from Google
• npm run clasp:create - Create a new Apps Script project
• npm run clasp:push - Push code to Apps Script
• npm run clasp:open - Open the Apps Script project in browser
• npm run clasp:deploy - Create a new deployment
• npm run clasp:deployments - List all deployments
• npm run deploy - Build and push to Apps Script (recommended)

Learn More about Clasp

• Clasp Documentation
• Google Apps Script Documentation
• Svelte Documentation

Project Structure

.
├── gas/                     # Google Apps Script files
│   ├── appsscript.json      # Apps Script manifest
│   ├── Code.js              # Server-side Apps Script code
│   ├── Index.html           # Main HTML template
│   ├── Javascript.html      # Generated from build (auto-generated, do not edit directly)
│   └── Stylesheet.html      # Generated from build (auto-generated, do not edit directly)
├── src/                     # Svelte source files
│   ├── lib/                 # Svelte components and utilities
│   │   ├── Counter.svelte   # Example Svelte component
│   │   ├── ServerDrivenComponent.svelte  # Example Svelte component interacting with GAS
│   │   ├── mockSetup.ts     # Proxy Mock setup for local testing
│   │   └── mocks.ts         # Add your mock server functions here
│   ├── App.svelte           # Main Svelte component
│   ├── app.css              # Global styles
│   └── main.ts              # Entry point
├── .claspignore             # Files to ignore when pushing
└── .clasp.json              # Clasp configuration (gitignored)

The main files you will want to start with are

• gas/Code.js
• src/App.svelte
• src/lib/mocks.ts

How to extend

• Add your Svelte components in the src/lib folder.
• Import and use them in src/App.svelte.
• If you need to call Google Apps Script functions from Svelte, use the google.script.run API. See testInvokationFromClient example in ServerDrivenComponent.svelte, mocks.ts and Code.js for reference.