{"id":13305682,"url":"https://github.com/nathgilson/Google-Workspace-Addon-Boilerplate","last_synced_at":"2025-03-10T13:32:17.868Z","repository":{"id":40368047,"uuid":"390159267","full_name":"nathgilson/Google-Workspace-Addon-Boilerplate","owner":"nathgilson","description":"A boilerplate for Google Workspace add-ons using nodejs, ES6, Typescript and Firebase for the backend.","archived":false,"fork":false,"pushed_at":"2023-01-09T17:28:04.000Z","size":116,"stargazers_count":12,"open_issues_count":1,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2023-03-10T02:27:19.676Z","etag":null,"topics":["google-add-on","google-apps-script","google-workspace","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nathgilson.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-07-27T23:54:21.000Z","updated_at":"2023-01-26T07:37:48.000Z","dependencies_parsed_at":"2023-02-08T13:16:05.465Z","dependency_job_id":null,"html_url":"https://github.com/nathgilson/Google-Workspace-Addon-Boilerplate","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nathgilson%2FGoogle-Workspace-Addon-Boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nathgilson%2FGoogle-Workspace-Addon-Boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nathgilson%2FGoogle-Workspace-Addon-Boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nathgilson%2FGoogle-Workspace-Addon-Boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nathgilson","download_url":"https://codeload.github.com/nathgilson/Google-Workspace-Addon-Boilerplate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242859773,"owners_count":20196993,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["google-add-on","google-apps-script","google-workspace","typescript"],"created_at":"2024-07-29T17:53:59.837Z","updated_at":"2025-03-10T13:32:17.576Z","avatar_url":"https://github.com/nathgilson.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n\u003cimg height=\"100px\" src=\"https://www.gstatic.com/images/icons/material/system/1x/pets_black_48dp.png\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e Your boilerplate project for \u003cbr\u003edeveloping Google Workspace add-ons\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n***\n\u003c/p\u003e\n\n[Google Workspace add-ons](https://developers.google.com/workspace/add-ons/how-tos/building-gsuite-addons) are the extensions that can be found in the side panel of most Google apps (Gmail, Google Drive, Sheets, Docs, Slides, etc), unlike the more complexe [Editor add-ons](https://developers.google.com/workspace/add-ons/how-tos/building-editor-addons) that can be found in the \"Add-ons\" tab of Google Sheets, Docs and Slides.\n\n\u003cp align=\"center\"\u003e\n\u003cimg height=\"300px\" src=\"https://developers.google.com/apps-script/add-ons/images/workspace-addons-cats.png\"\u003e\n\u003c/p\u003e\n\n---\n\n## 📝 Table of Contents\n\n- [About](#about)\n- [Install](#install)\n  - [Prerequisites](#prerequisites)\n  - [Getting started](#getting-started)\n- [Deploy](#deploy)\n- [Usage](#usage)\n  - [The included sample app](#the-included-sample-app)\n  - [Typescript](#new-typescript)\n  - [Adding packages](#adding-packages)\n  - [Modifying scopes](#modifying-scopes)\n  - [Autocomplete](#autocomplete)\n  - [Card Builder](#card-builder)\n\n\u003cbr/\u003e\n\n## 🔎 About \u003ca name = \"about\"\u003e\u003c/a\u003e\n\n[Google Apps Script](https://developers.google.com/apps-script/overview) is Google's Javascript-based development platform for building applications and add-ons for Google Sheets, Docs, Forms and other Google Apps.\n\nThis repo is a boilerplate project that uses the same development tools that you use for building traditional web apps (ES6, TypeScript, Node, Firebase, etc), all inside Google Apps Script projects.\n\nSee below how to get started!\n\n\u003cbr/\u003e\n\n## 🚜 Install \u003ca name = \"install\"\u003e\u003c/a\u003e\n\nThese instructions will get you set up with a copy of the project code on your local machine. It will also get you logged in to `clasp` so you can manage script projects from the command line.\n\nSee [deploy](#deploy) for notes on how to deploy the project and see it live in Gmail, Calendar, and Drive.\n\n### Prerequisites \u003ca name = \"prerequisites\"\u003e\u003c/a\u003e\n\n- Make sure you're running at least [Node.js](https://nodejs.org/en/download/) v10 and `npm` v6.\n\n- You'll need to enable the Google Apps Script API. You can do that by visiting [script.google.com/home/usersettings](https://script.google.com/home/usersettings).\n\n### 🏁 Getting started \u003ca name = \"getting-started\"\u003e\u003c/a\u003e\n\n**1.** First, let's clone the repo and install the dependencies.\n\n```bash\ngit clone https://github.com/nathgilson/Google-Workspace-Addon-Boilerplate\ncd Google-Workspace-Addon-Boilerplate\ncd addOn\nnpm install\n```\n\n\u003cp align=\"center\"\u003e\n\u003cimg width=\"500px\" src=\"https://i.imgur.com/EGSsCqO.gif\"\u003e\n\u003c/p\u003e\n\n**2.** Next, we'll need to log in to [clasp](https://github.com/google/clasp), which lets us manage our Google Apps Script projects locally.\n\n```bash\nnpm run login\n```\n\n\u003cp align=\"center\"\u003e\n\u003cimg width=\"500px\" src=\"https://i.imgur.com/zKCgkMl.gif\"\u003e\n\u003c/p\u003e\n\n**3.** Now let's run the setup script to create a New spreadsheet and script project from the command line.\n\n```bash\nnpm run setup\n```\n\nAlternatively, you can use an existing Google Spreadsheet and Script file instead of creating a new one.\n\n\u003cdetails\u003e\n  \u003csummary\u003eSee instructions here for using an existing project.\u003c/summary\u003e\n\nYou will need to update the `.clasp.json` file in the root of this project with the following three key/value pairs:\n\n```json\n{\n  \"scriptId\": \"1PY037hPcy................................................\",\n  \"parentId\": [\"1Df30.......................................\"],\n  \"rootDir\": \"./dist\"\n}\n```\n\n- `scriptId`: Your existing script project's `scriptId`. You can find it by opening your spreadsheet, selecting **Tools \u003e Script Editor** from the menubar, then **File \u003e Project properties**, and it will be listed as \"Script ID\".\n\n- `parentId` (optional): An array with a single string, the ID of the parent file (spreadsheet, doc, etc.) that the script project is bound to. You can get this ID from the url, where the format is usually `https://docs.google.com/spreadsheets/d/{id}/edit`. This allows you to run `npm run open` and open your file directly from the command line.\n\n- `rootDir`: This should always be `\"./dist\"`, i.e. the local build folder that is used to store project files.\n\n\u003c/details\u003e\n\nNext, let's deploy the app so we can see it live in Google Workspace.\n\n\u003cbr/\u003e\n\n## 🚀 Deploy \u003ca name = \"deploy\"\u003e\u003c/a\u003e\n\nRun the deploy command. You may be prompted to update your manifest file. Type 'yes'.\n\n```bash\nnpm run deploy\n```\n\nThe deploy command will build all necessary files using production settings, including all server code (Google Apps Script code) and config files. All bundled files will be outputted to the `dist/` folder, then pushed to the Google Apps Script project.\n\nNow open Google Sheets and navigate to your new spreadsheet (e.g. the file \"My Project\"). You can also run `npm run open`. Make sure to refresh the page if you already had it open. You will now see a new menu item appear containing your app!\n\n\u003cp align=\"center\"\u003e\n\u003cimg width=\"500px\" src=\"https://i.imgur.com/W7UkEpv.gif\"\u003e\n\u003c/p\u003e\n\n\u003cbr/\u003e\n\n## ⛏️ Usage \u003ca name = \"Usage\"\u003e\u003c/a\u003e\n\n### The included sample app\n\nThe sample app is inspired from Google's quickstart: [Cats Google Workspace Add-on](https://developers.google.com/workspace/add-ons/cats-quickstart)\n\n### Typescript\n\nThis project supports typescript.\n\nTo use, simply use a typescript extension in the code (.ts), and your typescript file will compile to the proper format.\n\nTo use typescript in server code, just change the file extension to .ts. The server-side code already utilizes type definitions for Google Apps Script APIs.\n\nA basic typescript configuration is used here, because after code is transpiled from typescript to javascript it is once again transpiled to code that is compatible with Google Apps Script. However, if you want more control over your setup you can modify the included [tsconfig.json file](./tsconfig.json).\n\n### Adding packages\n\nFor instance, install `axios` from npm:\n\n```bash\nnpm install axios\n```\n\nImportant: Since Google Apps Scripts projects don't let you easily reference external files, this project will bundle an entire app into one .gs file. This can result in large files if you are importing large packages. To help split up the files, you can grab a CDN url for your package and declare it in the [webpack file, here](./webpack.config.js#L157). If set up properly, this will add a script tag that will load packages from a CDN, reducing your bundle size.\n\n### Modifying scopes\n\nIf you modify this project to work with Google Forms or Calendar, make sure to edit the oauthScopes in the [appscript.json file](./appsscript.json).\n\nSee https://developers.google.com/apps-script/manifest for information on the `appsscript.json` structure.\n\n### Autocomplete\n\nThis project includes support for autocompletion and complete type definitions for Google Apps Script methods.\n\n\u003cp align=\"center\"\u003e\n\u003cimg width=\"500px\" src=\"https://i.imgur.com/E7FLeTX.gif\"\u003e\n\u003c/p\u003e\n\nAll available methods from the Google Apps Script API are shown with full definitions and links to the official documentation, plus information on argument, return type and sample code.\n\n### Card builder\n\nThe online [Card builder](https://gw-card-builder.web.app/) can help you prototype your app's interface.\n\n\u003cbr/\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnathgilson%2FGoogle-Workspace-Addon-Boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnathgilson%2FGoogle-Workspace-Addon-Boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnathgilson%2FGoogle-Workspace-Addon-Boilerplate/lists"}