Browser refresh on spa build served by Caddy does not reload spa root route unlike dev server

[dgk]

I am finding a difference in behavior between when the user clicks browser refresh/reload (or enters via non root route) for a built spa (served by Caddy) vs the quasar dev server.

In the later the quasar dev server reloads the root route vue component (i.e. the q-layout) but in the former this does not happen thus breaking the site

I have to imagine this issue has come up for serving a built SPA with several routes so what is the solution? One ugly idea I had was to trap the refresh and redirect to the root route per this https://stegosource.com/prevent-browser-refresh-url-changes-route-navigation-vue/

Another is to bail on builds all together and use the dev server for production which will be the least painful.

I’ve tired to get the Caddy server to address this but that is not possible.
https://caddy.community/t/reload-rewrite-to-root-on-browser-refresh-v2

I’m using the latest quasar/app framework (as of 5-19.20) although I’ve had this issue for going back awhile but now I have a “real” production situation coming up and I need a solution. I can’t have the user break the site by clicking refresh or entering on a non-root route.

[dgk]

The folks at Caddy helped me figure this out for Caddy V2 so I’ll share it as there is only an nginx example in quasar docs

https://lights.xxx.net {
    import r53
    root * /opt/lights/web
    handle /socket.io/* {
        reverse_proxy http://lights.net:3030
    }
    handle {
        try_files {path} {path}/ /index.html
        file_server
    }
}

https://caddy.community/t/reload-rewrite-to-root-on-browser-refresh-v2/8276/11?u=dkebler