Live-Reload

[crgwbr]

One of the things the front-end developers on my team miss when working on reactivated projects is live-reload. We had this previously when using webpack, and I see that esbuild has some support for it—not to webpack's level of doing HMR—but it at least supports trigger a browser refresh on change. I have an idea for how this could be enabled in reactivated.

Current state:

1. ESBuild (build.client.mts) watches files and builds to disk
2. Django serves static files from disk

graph TD
    esbc["ESBuild (client)"]
    
    esbc -- watch --> project/client/ 
    esbc -- build --> project/static/dist/

    Browser -- Request static file --> Django
    Django -- Read from disk --> project/static/dist/

Loading

Proposed design:

1. ESBuild (build.client.mts) watches files and builds to disk (no change from now).
2. ESBuild (build.client.mts) also starts the ESBuild server process on a high port.
3. Django intercepts requests to /static/dist/* and, instead of serving the files from disk, proxies the request to the ESBuild server.
4. Django also proxies requests to /esbuild to the ESBuild server.
5. No changes to the renderer process.

graph TD
    esbc["ESBuild (client)"]
    
    esbc -- watch --> project/client/ 
    esbc -- build --> project/static/dist/
    esbc -- serve --> http://localhost:8001/

    Browser -- Request static file --> Django
    Django -- proxy /static/dist/* --> http://localhost:8001/

Loading

An alternative approach would be to simply have the browser request static files direct from the ESBuild. This would negate the need to have Django proxy requests, but would mean that the client would need to know to request it's assets from an alternate domain/port than the Django server is running on. Having Django proxy the requests means that the client can request the static files from the same URL regardless of whether the app is in production or not. And, obviously, this extra server process and proxy view would only exist in development—nothing would change in production mode.

Let me know what you think.

[silviogutierrez]

Fantastic proposal. I actually took a stab at this but got more ambitious: hot reloading with ViteJS. And I actually used the second approach you suggested: #262

The meat of the PR is here:

https://github.com/silviogutierrez/reactivated/pull/262/files#diff-0e1e2185c8fc5a4a141f702ae6c4317493a0c644ce0a06b3754f7fd7cf4e0817
https://github.com/silviogutierrez/reactivated/pull/262/files#diff-0d98c0b8ddae4fe076b241e82310e4b1c28b00df7a830c090e7b6fa02eec4f38

Some of my projects have SPA sections where live reloading isn't of much help, it takes a few seconds to reload. So I wanted true hot reloading.

Your approach is simpler and worth considering though. I do hate opening random ports because it's non-deterministic. Notice the renderer uses a UNIX socket instead of a port. Curious if we could get ESBuild to do the same thing.

We'd also need to inject the ESBuild reloading code:

Finally, I'm not entirely sure how good proxying of server-sent events works with Django. Thus, in my Vite POC, I piped directly to the Vite server for assets.

So what stopped me? Vite and Linaria simply did not play well together. In fact, nothing plays well with Linaria. So much so that it's been removed from reactivated: #311

Now that that's gone, I may take a stab at Vite again. But you're welcome to give this a try, if it's drop-in easy, it may just be the best path forward.

[silviogutierrez]

Possibly useful: https://esbuild.github.io/api/#inject and https://esbuild.github.io/api/#define

[crgwbr]

I'm not entirely sure how good proxying of server-sent events works with Django.

That's a very good point—it'd probably be a chore to get that to work properly. Especially since the dev server restarts on code change, which would mean the WS connection would drop too. As soon as I get a chance I'll prototype option 2, but with the esbuild server instead of your Vite version.

To be completely honest I'm not a huge fan of Vite—it seems vastly over-complicated and having the dev bundle be so different from prod makes me nervous. But, that's just me and not especially empirical, so feel free to disregard. 😀

[silviogutierrez]

I've been playing with a Vite POC over the last week. It's starting to work.

I've used it before, and agree with you. Seems really complicated and the vast difference between bundles worries me. Reminds me a lot of Webpack too.

But I'll say this, when you see HMR working with styles, it's... incredible. 100% worth all the downsides.

I'm going to prepare a snapshot that you can test out to see.

[crgwbr]

ESBuild proof of concept submitted: #322