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:
mkcert
to enable HTTPSBut 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.
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!