Provide a page reload mechanism for the dev environement #105

benjamin-thomas · 2025-03-29T14:24:37Z

Is anything planned? I think it'd be nice to have the library provide a default mechanism to reload the page automatically.

I created a little script that does the trick for me

page-reload-2025-03-29_14.41.14.mp4

document.addEventListener('DOMContentLoaded', function () {
    const reloadWs = new WebSocket('ws://localhost:4321/ws-reload');

    function showNotification(message) {

        const notification = document.createElement('div');
        {
            const style = notification.style;
            style.position = 'fixed';
            style.top = '15px';
            style.left = '50%';
            style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
            style.color = '#fff';
            style.padding = '6px 12px';
            style.borderRadius = '2px';
            style.zIndex = '1000';
        }
        notification.innerText = message;
        document.body.appendChild(notification);
    }

    function waitTilReady(n) {
        fetch('/', { method: 'HEAD' })
            .then(response => {
                if (!response.ok)
                    throw new Error("Server seems to be broken...");

                console.log('Server is back online, reloading page...');
                location.reload();
            })
            .catch((_) => {
                console.log("Server not ready yet, will retry...", n);
                const ms = (n < 20) ? 50 : 1000;
                setTimeout(() => waitTilReady(n + 1), ms);
            });
    }

    reloadWs. () {
        console.log('Reload WebSocket closed, reloading page...');
        showNotification('Reloading in a sec...');
        waitTilReady(0);
    };
});

Personally, I don't care for anything fancy, since we can easily restore some kind of "state" via cookies or URL params.

Do you think such a script be integrated into the lib? I'm thinking it could be injected via setting an env var?

The text was updated successfully, but these errors were encountered:

seanhess · 2025-04-01T18:28:28Z

Cool! We don't want to mess up the production configuration by doing this out-of-the-box. Right now, the framework is configured to silently reconnect to the websocket, and fall-back to HTTP if it isn't connected.

How do other frameworks do this? What's the simplest way to add this functionality for development but not for production? (I'd like to avoid specifically naming anything "dev" or "prod" -- maybe there's some way to easily configure it for live-reload when running)

benjamin-thomas · 2025-04-07T20:34:08Z

Right now, the framework is configured to silently reconnect to the websocket, and fall-back to HTTP if it isn't connected

Yeah I saw that, but pluging into that mechanism at dev-time felt a bit off, so I didn't try to explore that (but that was just a quick assumption on my part, nothing well thought out)

How do other frameworks do this?

Quite a long time ago (a very long time ago), I worked on a rails app, and at the time the idea was new and necessitated a browser plugin: https://chromewebstore.google.com/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei

You'd then install a file watcher process in your environment (and extra dependencies), that would instruct the plugin that the page should refresh. It worked well but that's antiquated now.

I've played briefly with the Dream OCaml web library, you can install a separate package and change ou couple of lines in your code: https://github.com/tmattio/dream-livereload

But the best "out of the box" dev experience I can remember was when I learned a bit of Elixir Phoenix/LiveView, and so I looked into it:

When you install the framework and initiate your project setup, a dev environment + configuration get created by the scaffolding tool. One of these dependencies is this one: https://github.com/phoenixframework/phoenix_live_reload/

Which injects a new websocket (technically, in an iframe, right before the closing body tag). Which reloads the page like I did actually, here: https://github.com/phoenixframework/phoenix_live_reload/blob/e9160bde423f727036951aba92ddd6dbee674013/priv/static/phoenix_live_reload.js#L42

To me though, a dev-specific configuration is equivalent to an environnement variable. But maybe something could be done with an extra internal library via cabal configuration? Meaning, to prevent activating such a behavior in a production environment if it's a concern.

What about the idea to just dispatch a custom event on reconnect? Then maybe document a simple js script to copy/paste into ones project would suffice? (the script would listen to an event "hyperbole:source-code-changed" or something like that)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Provide a page reload mechanism for the dev environement #105

Provide a page reload mechanism for the dev environement #105

Uh oh!

Uh oh!

Provide a page reload mechanism for the dev environement #105

Provide a page reload mechanism for the dev environement #105

Comments

Uh oh!

Uh oh!