SSE | WebSockets for auto-reload (future: HMR)

[thedodd]

• [x] open the URL in the browser, only do once per invocation of the CLI.
• [x] use WebSocket to communicate with browser app to trigger reloads.
• [x] use WebSocket to do WASM HMR (this will probably be a beast, may not even be browser supported quite yet, we'll see). We can look into HMR in the future as WASM module linking stabilizes.

[jeroenvervaeke]

I started implementing hot reload for trunk.

I got everything finished (backend wise) but I'm blocked by an open issue with tide, SSE simply doesn't seem to work. Sending a SSE back to the client simply doesn't work. Source

This might be another argument for #81 to switch away to another web server.

[thedodd]

So, now that we’ve got a solid WebSocket impl about to land, we can start building a proper hot reloading mechanism.

A rough design:

• Configure Trunk to listen for hot reload WS connections on a specific endpoint.
• When running in serve mode, inject a canned script which will connect to the WS endpoint and listen for reload messages.
• When a reload message is received, it will load the new module specified in the message, or simply reload the entire page.
• The server will emit reload events over the socket whenever a build completes successfully.

[Boscop]

Any idea which bundler for Rust Wasm frontends supports livereload? I tried using trunk serve with tauri dev and trunk rebuilds but my tauri app doesn't reload :/ What can I do to get auto-reloading working? :)

[ranile]

What can I do to get auto-reloading working? :)

Right now, use trunk watch to build and serve the dist directory with a server that supports live reloading. Trunk can't do it for now,

[Boscop]

@hamza1311 Can you recommend a server that supports live reloading that can serve any dist from the CLI? I know browser-sync, but is there another one, maybe one that supports the livereload protocol? :)

[ranile]

@Boscop, take a look at httpwatcher

[Boscop]

@hamza1311 Thanks, but it seems there's no way to proxy my own websocket communication (between backend and frontend) through a different port (like browsersync allows)?

[ranile]

@hamza1311 Thanks, but it seems there's no way to proxy my own websocket communication (between backend and frontend) through a different port (like browsersync allows)?

Unfortunately, I'm not aware of any servers that would do this. If you're willing to do that, I think adding live reloading would be a great addition to trunk

[alecandido]

@Boscop, take a look at httpwatcher

Some time ago I was working at another project of mine for managing slides creation (essentially with reveal.js), and I wanted live reloading. It's not perfect, but it is working, and I took it exactly from httpwatcher, isolating the websocket from everything else:

• here the standalone reloader js script
• here the configurations (in python)
• here the websocket server (still in python)

I'm sorry not to be so expert in websockets + rust, but I'm pretty sure there should be no obstacle in repeating the same.

[thedodd]

Hey folks. Lots of good discussion here. We now have WebSockets support in the Trunk dev server, and we should be clear to begin implementing a mechanism for auto-reload / live-reload. There are a few options for us to consider, however considering the discussion over in #141 I am strongly tempted to say that we should attempt to knock out these two issues as part of the same objective.

[thedodd]

191 is an implementation of this feature (not the HMR part though).

[thedodd]

Support for this has landed as part of #191

[hackers267]

Does trunk support the HMR(Hot Module Replacement). If supported, how to enable it?

[ctron]

I am not sure this is applicable here. Seems purely like a webpack thing.