React hot reload

[enuchi]

React hot reload

[enuchi]

Okay glad to hear! Doing this helped me really improve the project.

[enuchi]

Hey again,

Glad you've been interested in this project. Yes would love to have support for hot reloading. If you're able to help get it into this project I'd really appreciate it. I honestly don't know if it's a simple fix or if it would involve rewriting a lot of the project. When I started writing the local development piece of this project, fast-refresh or whatever it's called now was pretty new (still is kind of new), so I went with the older approach with Webpack Dev Server which just refreshes the app -- and that was hard enough! Here's some background on how it works right now:

• GAS-client: This is basically a wrapper of google.script.run that makes it easier to work with, but in development it proxies calls to the Google Apps Script environment through Google-Apps-Script-Webpack-Dev-Server
• Google-Apps-Script-Webpack-Dev-Server: This is a fork of Webpack Dev Server, which is what provides the simple version of hot reloading, but listens for requests from gas-client and relays them to the Google Apps Script environment, as well as relays responses back to the development environment.
• React-Google-Apps-Script: This is the sample repo that has all the pieces in place

All these together allow not just hot reloading of the app, but also allows calls to the GAS server from the development environment, so you're not just working with UI.

I'd start with https://github.com/pmmmwh/react-refresh-webpack-plugin. To get it working you might need to update Google-Apps-Script-Webpack-Dev-Server, or this repo, or both.

Hope this is helpful,
Elisha

[alexblack]

Hi Elisha, thanks for the info. I will see if I can give it another shot at some point, I put a fair amount of time in trying to get that working with no luck.

[enuchi]

Hey Alex, think I actually have this working with the react-refresh. I actually ripped out Google-Apps-Script-Webpack-Dev-Server altogether, and it's faster and saves state I think. Will update in a bit with how to...

[enuchi]

Something like this. When saving, it makes the changes without refreshing the page, and notice the input state is not reset.

[enuchi]

See #98

[alexblack]

That looks amazing! I will check it out. Thanks for digging into this.

I think / don't externalize react during development due to issue with react-refresh might be the issue (or one of the issues I hit), but I didn't know enough about it at the time to even begin to try to solve it.

[enuchi]

Yeah, that was definitely a big piece of the puzzle, among other things.

[alexblack]

I'm trying out this now. After implementing the changes, I hit this issue:

pmmmwh/react-refresh-webpack-plugin#343

So I then switched to version 0.5.0-beta.9 of @pmmmwh/react-refresh-webpack-plugin, and got past that issue.

Now, when I save changes, I see the app being recompiled (in the Chrome javascript console), but I don't see my changes reflected in the addon. I'm going to double check my work and see if I missed anything.

[alexblack]

So I then switched to version 0.5.0-beta.9 of @pmmmwh/react-refresh-webpack-plugin, and got past that issue.

Ah my mistake, thats what you used. Ignore that :)

[alexblack]

Ok I found a mistake or two I made merging those changes in (due to my previous attempts to get this working). It looks like its working great now, this is a huge improvement. nice work!

[enuchi]

With #98 support for hot reloading is now included in this project.