search

enuchi / React-Google-Apps-Script

This is your boilerplate project for developing React apps inside Google Sheets, Docs, Forms and Slides projects. It's perfect for personal projects and for publishing complex add-ons in the Google Workspace Marketplace.
MIT License
1.32k stars 171 forks source link

How is GAS live-reload implemented? #182

Open eakl opened 1 year ago

eakl commented 1 year ago

Thank you for this boilerplate. Looking at your code, I have leant a lot 🙏

I am trying to create a simple version of this boilerplate with Svelte and vite/esbuild. One part I don't quite understand is how you managed to implement the live reload between your local dev server and Google's server.

I have created the minimal dev app wrapping an iframe that points to https://localhost:5173

<iframe src='https://localhost:5173' />

And then run the dev server with vite dev on HTTPS Alternatively (because vite serves your app without writing anything to disk in dev mode) I have tried to build the app and serve the /build folder.

None of what I tried works. I don't see anything inside the iframe.

How is the dev app on Google server supposed to resolve https://localhost:5173 to your local dev server?

enuchi commented 1 year ago

Can you share a repo with your sample app? Can try to help.

When you run vite dev and open https://localhost:5173 in a new tab do you see your app running at that exact url? The dev react app "wrapper" that you linked to just loads the iframe with localhost as the frame src as you describe. From what I remember you must serve on https with a self signed cert. I have some instructions in the readme on how to set those up for webpack but may need some tweaking to support your setup.

eakl commented 1 year ago

Thank you @enuchi

This is basic setup with Vite https://github.com/eakl/gas-livereload

I am running vite dev server over HTTPS with a self signed certificate. I can see the iframe in the GAS sidebar but it doesn't show my local app.

I have read your readme Dev App Wrapper and GAS Webpack Dev Server but I'm probably missing something.

enuchi commented 1 year ago

Live reload seems to work fine for me in your app. I was able to get it working:

https://user-images.githubusercontent.com/31550519/226391464-10c53703-ab12-4770-9a9f-e23d73e1a98f.mov

Make sure you are not using Brave browser or extensions or anything like that that would block iframes from loading content. What platform/browser are you using?

Also does vite dev server work correctly in its own tab using https?

eakl commented 1 year ago

You got it right! I'm using Brave and indeed it was blocking the iframe.

I thought I missed something in my code but didn't expect it was coming from this. I would need to test future issues on different browsers.

Thanks a lot for your time and help!

enuchi commented 1 year ago

OK glad this helped. Referencing #158 which gave me the idea.

I'll add some info about Brave to the README at some point since it's come up a couple times.