Google Apps Script Starter Kit

A modern development environment for building Google Apps Script projects with modern web development tools.

This starter kit provides a boilerplate for developing Google Apps Script projects using modern JavaScript (ES6+) and a local development environment. It includes a curated selection of tools to enhance your development workflow, including code bundling, linting, testing, and deployment.

Please follow the 👉 step-by-step video tutorial 👈 for quickly getting started with Apps Script development inside Visual Studio Code. It is recommended that you install the Extension Pack for working with Apps Script files in VS Code.

You can build Google Workspace add-ons (for Google Docs, Slides, Gmail and Google Sheets), web applications and workflow automation routines with next-generation JavaScript.

The starter kit is used by Digital Inspiration for building popular Google add-ons including Gmail Mail Merge, Google Forms Notifications and Document Studio.

What's Included

This starter kit comes with a pre-configured set of tools to help you write high-quality Google Apps Script code:

• Vite: A next-generation build tool that provides a fast and lean development experience.
• Jest: A delightful JavaScript testing framework with a focus on simplicity.
• ESLint: A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript.
• Prettier: An opinionated code formatter that enforces a consistent style.
• clasp: The official command-line tool for managing Google Apps Script projects.

Getting Started

Follow these steps to get your development environment set up and running.

Prerequisites

Before you begin, ensure you have the following installed on your system:

• Node.js (which includes npm)
• A Google account

Installation

1. Clone the repository:

   npx degit labnol/apps-script-starter my-project
   cd my-project
   

2. Install dependencies:

   npm install
   

3. Log in to clasp:

   Authorize clasp to manage your Google Apps Script projects using your Google account.

   npx clasp login
   

4. Create a new Google Apps Script project:

   Create a new script project bound to a Google Sheet or as a standalone script.

   npx clasp create --type sheets --title "My Apps Script Project" --rootDir ./dist
   

   This will create a new Google Sheet and a bound script project in your Google Drive.

Development

This starter kit provides a streamlined development workflow to help you build your Google Apps Script projects efficiently.

Development Server

To start the development server, run the following command:

npm run dev

This command will watch for changes in your source files and automatically rebuild the project.

Code Structure

The main source code for your application is located in the src directory.

• src/index.js: The main entry point for your application.
• src/html/: Contains the HTML files for your user interface.
• src/server/: Contains the server-side code for your application.

Writing Code

You can write your code using modern JavaScript (ES6+) features. Vite will automatically transpile your code to a format that is compatible with the Google Apps Script V8 runtime.

Testing

This starter kit uses Jest for unit testing.

Running Tests

To run the tests, use the following command:

npm run test

Writing Tests

You can write tests for your code in files with a .test.js extension. The tests are located alongside the files they are testing.

Note: You cannot directly test code that has dependencies on Google Apps Script services (e.g., SpreadsheetApp, Logger). You will need to mock these services in your tests.

Deployment

To deploy your project to Google Apps Script, run the following command:

npm run deploy

This command will build your project and then use clasp to push the bundled code to your Google Apps Script project.

Configuration

The starter kit includes several configuration files to customize the development environment:

• appsscript.json: The manifest file for your Google Apps Script project. You can use this file to specify dependencies, OAuth scopes, and other settings.
• .clasp.json: The configuration file for clasp. This file specifies the scriptId and rootDir for your project.
• vite.config.js: The configuration file for Vite. You can use this file to customize the build process.
• .prettierrc: The configuration file for Prettier. You can use this file to customize the code formatting rules.
• eslint.config.js: The configuration file for ESLint. You can use this file to customize the linting rules.

Contributing

Contributions, issues, and feature requests are welcome. If you are using this starter kit and have fixed a bug for yourself, please consider submitting a pull request!

Development Conventions

• Coding Style: The project uses Prettier for code formatting and ESLint for linting. The configuration for these tools can be found in .prettierrc and eslint.config.js respectively.
• Testing: The project uses Jest for unit testing. Test files are located alongside the files they are testing and have a .test.js extension.
• Commits: The project does not have a formal commit message convention, but it is recommended to follow standard practices for writing clear and descriptive commit messages.

License

This project is licensed under the MIT License. See the LICENSE file for details.

---

Developed by Amit Agarwal | Digital Inspiration