ENenuchi·Aug 16, 2020
Been working on this side project for a while. Google Apps Script is Google’s development platform for writing scripts for Google apps like Sheets, Docs, Slides etc. It also lets you load HTML pages inside window dialogs in these apps, so you can build a simple UI that can interact with, for example, a spreadsheet, or you can use these dialogs to create an add on and publish it in the G Suite marketplace for others to use.
When you load an HTML file, the window dialog environment provides you with a way to call functions you’ve written in Google Apps Script (basically, Javascript with access to Google APIs).
The drawback with Google’s platform is the HTML file has to be a single page, and it can’t load other scripts. Google’s own documentation recommends using jquery and templates. Bah! Not good!
With the right webpack configuration and p
Read the rest
lugins you can build a complex React page that is bundled as a single HTML file, and load it into a dialog window. This project is a working demo of how to do that (https://github.com/enuchi/React-Google-Apps-Script).
The trickiest part here is building a proper local development experience. What I ended up doing is creating a wrapper app that is loaded into the dialog window during development instead of the actual React app. The wrapper loads an iframe pointing at a localhost address, and then I use a modified version of Webpack Dev Server to serve the React app in development at that localhost address. I use a helper utility to call the server-side Google Apps Script functions directly in production, but tells the wrapper component to call the functions in development, so it behaves pretty much the same way in production and development. Okay, a bit hard to explain…
Here’s a link to a quick video of using the development mode to actually hot reload the app inside a Google Sheets dialog. Trippy to see a Google Spreadsheet respond to local changes!
https://i.imgur.com/eR1s6FO.mp4