Apps Script in IDE (ASIDE)

Overview

Apps Script in IDE (ASIDE) supports modern, robust and scalable Apps Script development by providing a framework for a local coding environment capable of formatting, linting, testing and much more.

Here are the main features:

• TypeScript

  Write your code in TypeScript. It will be automatically compiled and bundled when deploying

• Formatting / Linting

  Leverage the power of ESLint and Prettier to enforce a unique coding style amongst collaborators

• Testing

  Use Jest to test your code before deploying

• Multiple Environments

  Seemlessly switch between dev and prod environments to push your code to

Getting Started

The simplest way to get started is:

npx @google/aside init

What it does

After running the init command above, ASIDE will go ahead and do the following:

• Add configuration files

  E.g. for ESLint, Prettier, Jest, ...

• Set convenience scripts in package.json

  Those scripts include: lint, build and deploy, among others

• Install necessary dependencies

  Everything required for formatting, linting, testing, etc. will be installed automatically

• Set up clasp

  ASIDE is using clasp to pull and push code from and to Apps Script

• (Optionally) Create an Angular Material UI

  ASIDE will run the necessary commands to create an Angular application with Angular Material components, if the option is chosen

Options

You can provide the init command with some convenience options:

• --yes / -y

  Answer 'yes' to all prompts

• --no / -n

  Answer 'no' to all prompts

• --title/ -t

  Set project title without being asked for it

• --script-dev

  Set Script ID for dev environment without being asked for it

• --script-prod

  Set Script ID for production environment without being asked for it

Troubleshooting

Unknown token 'export'

While bundling generally resolves all exports and imports it keeps exports in the entrypoint causing clasp to fail pushing. This can be an issue for example if you're trying to export functions from index.ts for testing.

The recommended approach is to use the entrypoint (index.ts) only to expose global functions to Apps Script while importing all business logic from separate modules.

Module not included in bundle

Bundling includes treeshaking of unused files to keep the bundle size as small as possible. If any of your modules contain only global functions with no import-path leading to the entrypoint (e.g. to be called from the menu), those would not be included in the bundle.

To avoid this, you can use a side-effect import.

import './path/to/module';

This will ensure that Rollup will not remove it from the bundle.

Disclaimer

This is not an officially supported Google product.