javascriptgoogle-apps-scriptwebpack-dev-serverlivereloadesbuild

Google Apps Script local Addon development with live reload


I am developing a Google Apps Script editor add-on with the following setup:

src
|__ client
|__ gas
esbuild.config.js
tsconfig.json
package.json

src/client is a Svelte app for the add-on UI.
src/gas is Google Apps Script code developed.
esbuild.config.js has two build processes. The client is bundled into one single html file index.html. The gas code is bundled in one single javascript file Code.js.

During development (with esbuild --watch mode), every time I save my code, both index.html and Code.js are created and pushed automatically to Google server via clasp.

How can I enable live reload so that every time I save my code, I see the change automatically in my Add-on on Google server?

This project is able to do that using webpack and React. However I am not sure to understand conceptually how. Even after checking the code base.

For now, I am able:

But I'm not able to trigger a reload of my browser when the files are pushed on Google server.

EDIT

Apparently This project is uploading a minimal "dev app" which consists of an iframe pointing to localhost.

Since localhost resolve to Google server, how am I suppose to serve my local files so that the iframe is updated with my local code?

I found this package but I don't quite understand the underlying technique used.


Solution

  • The idea is to upload a minimal app on Google Apps Script wrapping an iframe pointing to https://localhost:5173 (replace the port 5173 with your local dev server port)

    Here is my minimal svelte app

    <section class="container">
      <iframe
        class="iframe"
        title="app"
        src={`https://localhost:5173`}
      />
    </section>
    

    Then you need to generate self-signed certificate (you can use mkcert)

    Then just serve you real app with your local dev server (HTTPS needs to be enabled)

    Finally make sure your browser is not blocking the iframe (Brave was blocking it)

    It should work!