4 |
2 |
3 |
4 |
6 | Built with React v18 and Vite for best-in-class frontend development. 7 |
8 | 9 |🚀 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. 19 |
20 | 21 | --- 22 | 23 | ## 📝 Table of Contents 24 | 25 | - [About](#about) 26 | - [Install](#install) 27 | - [Prerequisites](#prerequisites) 28 | - [Getting started](#getting-started) 29 | - [Deploy](#deploy) 30 | - [Local Development](#local-development) 31 | - [Using React DevTools](#dev-tools) 32 | - [Usage](#usage) 33 | - [The included sample app](#the-included-sample-app) 34 | - [Typescript](#new-typescript) 35 | - [Adding packages](#adding-packages) 36 | - [Styles](#styles) 37 | - [Modifying scopes](#modifying-scopes) 38 | - [Calling server-side Google Apps Script functions](#calling-server-side-google-apps-script-functions) 39 | - [Autocomplete](#Autocomplete) 40 | - [Authors](#authors) 41 | - [Acknowledgments](#acknowledgement) 42 | 43 |
52 | 
53 |
213 |
214 | 5. Don't forget to remove the ``.
279 |
280 | If set up properly, this will load packages from the CDN in production and will reduce your overall bundle size.
281 |
282 | Make sure that you update the script tag with the same version of the package you are installing with yarn, so that you are using the same version in development and production.
283 |
284 | ### Styles
285 |
286 | By default this project supports global CSS stylesheets. Make sure to import your stylesheet in your entrypoint file [index.js](./src/client/dialog-demo/index.js):
287 |
288 | ```javascript
289 | import './styles.css';
290 | ```
291 |
292 | Many external component libraries require a css stylesheet in order to work properly. You can import stylesheets in the HTML template, [as shown here with the Bootstrap stylesheet](./src/client/dialog-demo-bootstrap/index.html).
293 |
294 | ### Modifying scopes
295 |
296 | The included app only requires access to Google Spreadsheets and to loading dialog windows. If you make changes to the app's requirements, for instance, if you modify this project to work with Google Forms or Docs, make sure to edit the oauthScopes in the [appscript.json file](./appsscript.json).
297 |
298 | See https://developers.google.com/apps-script/manifest for information on the `appsscript.json` structure.
299 |
300 | ### Calling server-side Google Apps Script functions
301 |
302 | This project uses the [gas-client](https://github.com/enuchi/gas-client) package to more easily call server-side functions using promises.
303 |
304 | ```js
305 | // Google's client-side google.script.run utility requires calling server-side functions like this:
306 | google.script.run
307 | .withSuccessHandler((response) => doSomething(response))
308 | .withFailureHandler((err) => handleError(err))
309 | .addSheet(sheetTitle);
310 |
311 | // Using gas-client we can use more familiar promises style like this:
312 | import { GASClient } from 'gas-client';
313 | const { serverFunctions, scriptHostFunctions } = new GASClient({});
314 |
315 | // We now have access to all our server functions, which return promises!
316 | serverFunctions
317 | .addSheet(sheetTitle)
318 | .then((response) => doSomething(response))
319 | .catch((err) => handleError(err));
320 |
321 | // Or with async/await:
322 | async () => {
323 | try {
324 | const response = await serverFunctions.addSheet(sheetTitle);
325 | doSomething(response);
326 | } catch (err) {
327 | handleError(err);
328 | }
329 | };
330 |
331 | // Use scriptHostFunctions to control dialogs
332 | scriptHostFunctions.close(); // close a dialog or sidebar
333 | scriptHostFunctions.setWidth(400); // set dialog width to 400px
334 | scriptHostFunctions.setHeight(800); // set dialog height to 800px
335 |
336 | ```
337 |
338 | In development, `gas-client` will allow you to call server-side functions from your local environment. In production, it will use Google's underlying `google.script.run` utility.
339 |
340 | ### Autocomplete
341 |
342 | This project includes support for autocompletion and complete type definitions for Google Apps Script methods.
343 |
344 | 
345 |
346 | All 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.
347 |
348 | 41 | ☀️ Bootstrap demo! ☀️ 42 |
43 |
44 | This is a sample app that uses the react-bootstrap library
45 | to help us build a simple React app. Enter a name for a new sheet, hit
46 | enter and the new sheet will be created. Click the red{' '}
47 | × next to the sheet name to
48 | delete it.
49 |
mui library to help us
43 | build a simple React app. Enter a name for a new sheet, hit enter and
44 | the new sheet will be created. Click the red button next to the sheet
45 | name to delete it.
46 | 40 | ☀️ React demo! ☀️ 41 |
42 |43 | This is a sample page that demonstrates a simple React app. Enter a name 44 | for a new sheet, hit enter and the new sheet will be created. Click the 45 | red × next to the sheet name to delete it. 46 |
47 |40 | ☀️ React demo! ☀️ 41 |
42 |43 | This is a sample page that demonstrates a simple React app. Enter a name 44 | for a new sheet, hit enter and the new sheet will be created. Click the 45 | red × next to the sheet name to delete it. 46 |
47 |4 | ☀️ React app inside a sidebar! ☀️ 5 |
6 |7 | This is a very simple page demonstrating how to build a React app inside a 8 | sidebar. 9 |
10 |11 | Visit the Github repo for more information on how to use this project. 12 |
13 |- Elisha Nuchi
14 | 19 | React + Google Apps Script 20 | 21 |