Google Apps Script local Addon development with live reload

Question

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:

• To push my code to Google server for every save in my editor
• To enable live reload locally with esbuild in-house dev server and a server sent event listener in the final build.
• To create a valid certificate with mkcert to enable HTTPS

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.

Answer 1

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!