5 ms·

Show HN: Use React to build G Suite dialogs and add-ons

108 points by enuchi 6y ago

enuchi 6y ago
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 plugins 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 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 https://i.imgur.com/eR1s6FO.mp4
- latchkey 6y ago
  Wow, not too long ago I tried to get a dev environment setup for working with GAS + Typescript and after a few hours of banging my head on things, I gave up because I couldn't get it working the way I wanted. This is fantastic. Thank you for doing this, I'll definitely try it out!
  - enuchi 6y ago
    Great! Haven't been a big Typescript user myself but seeing a lot of interest in it for GAS projects so included support for it in this project, and included a sample Typescript demo component.
- scrollaway 6y ago
  This is awesome. I don't have a use for it right now but it's straight up making me want to try it out and develop some gsuite extensions. Well done.
- 52-6F-62 6y ago
  As someone who has to occasionally create in-house one-off solutions for coworkers in disparate departments of the company I work for to streamline some GSuite work: this is fantastic. Working with Google's native dev platform is a touch on the frustrating side when it comes to producing something coherent and easy to use for non-technical staff. I'll definitely be keeping this in the toolbox.
iRomain 6y ago
This looks like it was interesting to work on , and you found how to overcome the various challenges. One question though, if you could use an iFrame to call the same functionality remotely, couldn’t this be used as well for production?
- enuchi 6y ago
  Thanks. Not sure I understand your question, or if I did a good job explaining the iframe bit. The iframe is needed to load the local development experience, but it is not calling the functionality remotely. It is just passing function calls between the Google Apps Script environment and your app.
- duiker101 6y ago
  The way I overcame this issue was to just host the react app somewhere else and include the script in an HTML page rendered by the plugin. I guess an iframe could work too.
kanobo 6y ago
Great work and I admire your dedication and work you put into this! How hard do you think it would for someone of average intelligence to fork it to support Vue or Svelte instead?
- enuchi 6y ago
  Nice idea -- the main thing needed would be to update the Webpack configuration to support e.g. Vue instead of React, and to make sure to generate a single HTML file for your Vue app that includes all scripts and styles. Might not be so bad!
tluyben2 6y ago
Thank you for actually showing me a sane workflow for sheet development; we build complex software in sheets (because people understand it) but I never really figured how to make the workflow of JS for sheets more efficient. You did; thanks.
m88m 6y ago
Just wanted to say good job. Loved it.
- enuchi 6y ago
  Thanks!
delduca 6y ago
tldr; 1MB for dialogs.
- enuchi 6y ago
  Mmm, nope. But open an issue and I'll help you out.

108 points by enuchi 6y ago

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 plugins 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 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 https://i.imgur.com/eR1s6FO.mp4

latchkey 6y ago
Wow, not too long ago I tried to get a dev environment setup for working with GAS + Typescript and after a few hours of banging my head on things, I gave up because I couldn't get it working the way I wanted. This is fantastic. Thank you for doing this, I'll definitely try it out!
- enuchi 6y ago
  Great! Haven't been a big Typescript user myself but seeing a lot of interest in it for GAS projects so included support for it in this project, and included a sample Typescript demo component.
scrollaway 6y ago
This is awesome. I don't have a use for it right now but it's straight up making me want to try it out and develop some gsuite extensions. Well done.
52-6F-62 6y ago
As someone who has to occasionally create in-house one-off solutions for coworkers in disparate departments of the company I work for to streamline some GSuite work: this is fantastic. Working with Google's native dev platform is a touch on the frustrating side when it comes to producing something coherent and easy to use for non-technical staff. I'll definitely be keeping this in the toolbox.

iRomain 6y ago

This looks like it was interesting to work on , and you found how to overcome the various challenges. One question though, if you could use an iFrame to call the same functionality remotely, couldn’t this be used as well for production?

enuchi 6y ago
Thanks. Not sure I understand your question, or if I did a good job explaining the iframe bit. The iframe is needed to load the local development experience, but it is not calling the functionality remotely. It is just passing function calls between the Google Apps Script environment and your app.
duiker101 6y ago
The way I overcame this issue was to just host the react app somewhere else and include the script in an HTML page rendered by the plugin. I guess an iframe could work too.

kanobo 6y ago

Great work and I admire your dedication and work you put into this! How hard do you think it would for someone of average intelligence to fork it to support Vue or Svelte instead?

enuchi 6y ago
Nice idea -- the main thing needed would be to update the Webpack configuration to support e.g. Vue instead of React, and to make sure to generate a single HTML file for your Vue app that includes all scripts and styles. Might not be so bad!

tluyben2 6y ago

Thank you for actually showing me a sane workflow for sheet development; we build complex software in sheets (because people understand it) but I never really figured how to make the workflow of JS for sheets more efficient. You did; thanks.

m88m 6y ago

Just wanted to say good job. Loved it.

enuchi 6y ago
Thanks!

delduca 6y ago

tldr; 1MB for dialogs.

enuchi 6y ago
Mmm, nope. But open an issue and I'll help you out.