Built with React v18 and Vite for best-in-class frontend development.
π This is your boilerplate project for developing React apps inside Google Sheets, Docs, Forms and Slides projects. It's perfect for personal projects and for publishing complex add-ons in the Google Workspace Marketplace.
Google Apps Script is Google's Javascript-based development platform for building applications and add-ons for Google Sheets, Docs, Forms and other Google Apps.
Google Apps Scripts lets you add custom user interfaces inside dialog windows. Using this template, it's easy to run React apps inside these dialogs, and build everything from small projects to advanced add-ons that can be published in the Google Workspace Marketplace.
This repo is a boilerplate project for developing React apps with Google Apps Script projects. You can use this starter template to build your own React apps and deploy them inside Google Sheets, Docs, Forms and Slides for use in dialogs and sidebars. Sample code is provided showing how your React app can interact with the underlying Google Apps Script server-side code.
Read on to get started with your own project!
These instructions will get you set up with a copy of the React project code on your local machine. It will also get you logged in to clasp
, which lets you manage script projects from the command line.
See deploy for notes on how to deploy the project and see it live in a Google Spreadsheet.
Make sure you're running at least Node.js v18 and yarn (classic).
You'll need to enable the Google Apps Script API. You can do that by visiting script.google.com/home/usersettings.
To use live reload while developing, you'll need to serve your files locally using HTTPS. See local development below for instructions on setting up your local environment.
Full steps to getting your local environment set up, deploying your app, and also running your app locally for local development are shown in the video below:
1. First, let's clone the repo and install the dependencies. This project is published as a public template, so you can also fork the repo or select "Use this template" in GitHub.
git clone https://github.com/enuchi/React-Google-Apps-Script.git
cd React-Google-Apps-Script
yarn install
2. Next, we'll need to log in to clasp, which lets us manage our Google Apps Script projects locally.
yarn run login
3. Now let's run the setup script to create a New spreadsheet and script project from the command line.
yarn run setup
Alternatively, you can use an existing Google Spreadsheet and Script file instead of creating a new one.
Next, let's deploy the app so we can see it live in Google Spreadsheets.
Run the deploy command. You may be prompted to update your manifest file. Type 'yes'.
yarn run deploy
The deploy command will build all necessary files using production settings, including all server code (Google Apps Script code), client code (React bundle), and config files. All bundled files will be outputted to the dist/
folder, then pushed to the Google Apps Script project.
Now open Google Sheets and navigate to your new spreadsheet (e.g. the file "My React Project"). You can also run yarn 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!
We can develop our client-side React apps locally, and see our changes directly inside our Google Spreadsheet dialog window.
There are two steps to getting started: installing a certificate (first time only), and running the start command.
Generating a certificate for local development
Install the mkcert package:
# mac:
brew install mkcert
# windows:
choco install mkcert
Then run the mkcert install script:
mkcert -install
Create the certs in your repo:
yarn run setup:https
Now you're ready to start:
yarn run start
The start command will create and deploy a development build, and serve your local files.
After running the start command, navigate to your spreadsheet and open one of the menu items. It should now be serving your local files. When you make and save changes to your React app, your app will reload instantly within the Google Spreadsheet, and have access to any server-side functions!
React DevTools is a tool that lets you inspect the React component hierarchies during development.