Template for Google Apps Script™ Projects.

• Template for Google Apps Script™ Projects.
  • Overview
  • Getting Started
    • Installation
    • Clasp Authentication
    • Scripts
      • Start Development Server
      • Code Formatting
      • Code Linting
      • Run Tests
      • Project Build
        • Build Apps Script only (Backend):
        • Build WebApp only (Frontend)
      • Deployment
    • Git Hooks
    • Project structure
  • Tasks
  • Changelog
  • License

Overview

Getting Started

Ensure that you have npm, git, and clasp installed by running:

npm --version

git --version

clasp --version

Back to Top

Installation

Clone the repository and install the necessary dependencies:

git clone https://github.com/MaksymStoianov/apps-script-template.git
cd apps-script-template

npm install

Back to Top

Clasp Authentication

Authenticate with Google to enable project deployment:

npx clasp login

After logging in, link the local project to your GAS project (you can create a new one or clone an existing one):

Back to Top

Scripts

Use these standard npm scripts to manage your development workflow:

Start Development Server

npm run dev

Starts the Vite Dev Server for React frontend development.

Code Formatting

Automatically formats the project's code using Prettier, ensuring a consistent style.

npm run format

Code Linting

Performs code inspection for style errors and potential issues using ESLint.

npm run lint

Run Tests

Runs tests using Vitest.

npm run test

# OR For more granular testing:
npm run test:unit
npm run test:integration
npm run test:e2e

Project Build

A complete project build for production. Note that both the frontend and backend will be compiled and ready for upload to the Google Apps Script project.

npm run build

# Alternatively, use the Development mode build:
npm run build:dev

Build Apps Script only (Backend):

npm run build:appsscript

# Alternatively, use the Development mode build:
npm run build:appsscript:dev

Build WebApp only (Frontend)

For hosting on a third-party resource (if full GAS upload is not required):

npm run build:webapp

# Alternatively, use the Development mode build:
npm run build:webapp:dev

Deployment

Uploads the compiled code to the Google Apps Script project using clasp push.

npm run deploy

Back to Top

Git Hooks

• pre-commit.sh
• pre-push.sh

Back to Top

Project structure

The structure clearly separates GAS backend logic from the React frontend code, ensuring a clean and maintainable codebase.

.
├── config/                       # Configuration files (tsconfig, vite, storybook)
├── dist/                         # Output directory for compiled build results
├── public/                       # Static assets (e.g., images, locales)
├── src/
│   ├── main/
│   │   ├── resources/
│   │   │   └── appsscript.json   # Manifest file
│   │   ├── appsscript/           # Backend (Google Apps Script .gs logic)
│   │   │   └── main.ts           # Main Apps Script file (e.g., doGet, doPost)
│   │   └── webapp/               # Frontend
│   └── test/                     # Test files
├── index.html                    # HTML template to render the React app
└── package.json                  # Project dependencies and scripts

Back to Top

Tasks

More

• Set up CI/CD for automated deployment.
• Implement tests.

Back to Top

Changelog

For a detailed list of changes and updates, please refer to the CHANGELOG file.

Back to Top

License

This project is licensed under the LICENSE file.

Back to Top