Level 102
Not sure why it says HMR ? I dont assume you have npm run dev running on production?
Is this using inertia? Inertia has a built in method for handling this problem
Dec 5, 2022
5
Level 1
Vue Vite HMR on Nginx
Can someone help me understand how HMR can be achieved on a production? Or at least point me to the right direction.
Currently there is Nginx serving current directory.
Current comes from Envoyer.io and server is on Forge.
npm run build runs vite build which produces VueJS components including hash. E.g. dist/assets/Home.e7287389.js ...
After changes have been made, Envoyer deploys new npm run build and the current now points to a new release directory, but the Client is still clicking on the old VueJS components, because they are cached by the browser, or even worse - the Client is clicking on old VueJS components (which haven't been loaded jet) and they are 404 - new files have been generated>
Failed to load module script ... and
TypeError: Failed to fetch dynamically imported module:
window.location = "/"; isn't really an option, because the Client could be halfway in a <form> input and noone want's an angry client.
Level 1
@Sinnbeck to say it bluntly - HMR is not possible on production? Then how does Facebook reloads it's components for example?
Level 102
@darknmy You mean how they load the updated version of a component after a new deployment? HMR means it it swapped in realtime without reloading, and for vite to do this, it needs to run the dev server (which is a dev thing).
the way inertia does it, is that if it detects a change to the manifest.json file, it returns a special status code (I dont remember which). That then tells javascript to do a full page reload: https://inertiajs.com/asset-versioning
Level 1
@Sinnbeck Sorry for the confusion, but this is not Inertia project. This is VueJS SPA w/o Laravel's app.js. My initial thought was that I'm looking for HMR to detect and reload VueJS changes in the component?
Level 102
@darknmy I would assume that would require some sort of backend server to actually detect the changes in code. The js in the browser cannot check for this. This is how npm run dev works, but I am not sure having that running in production will be a good idea (I highly doubt it).
The reason I mentioned inertia, was so you could prehaps be inspired by how it works there.
Or maybe someone else has some clever trick to get around it :)
Please or to participate in this conversation.