How to setup Hot Reload (HMR) on Resource Tool

[madebycaliper]

Hey all 👋 I'm attempting to create a Resource Tool in Nova called FiberCostAnalysis and I've gotten everything wired up and working except for hot module reloading. I'm a fairly seasoned Vue.js dev and have moderate experience with Laravel, but not much with Mix.

I've tried a number of things so far that haven't worked:

• updating nova.mix.js with a webpackConfig.devServer config
• updating vite.config.js my projects root folder
• updating the root dir for the resources in the boot() method of my ToolServiceProvider.php file)

If I go to the root of my resource folder (./nova-components/FiberCostAnalysis/) and run npx mix watch --hot or npm run hot, then make a change to my Tool.vue file, I can see that the server is recompiling the assets and creating a hot update patch (or whatever its called):

It would be a huge DX improvement if I could see the changes to my component without refreshing the page every time and destroying the state of the component. Any help is appreciated!

[davidhemphill]

I believe to get this working, you have to change the script element to point to your assets at the Node server's URL (http://localhost:8080). Nova can't do this automatically because all Nova tools are served via an internal route.

[madebycaliper]

hey @davidhemphill thanks for the quick reply. After my research I thought I'd have to point to the Node server and couldn't figure out how to do that via Nova. Is there a manual setup you'd recommend, even just during development, that could setup an HMR service? Maybe loading the scripts separately instead having the Tool autoload them? I'm not very familiar with the mechanics of Nova, so any guidance would be appreciated. Thank you!

[davidhemphill]

You should be able to use Nova::remoteScript in combination with the env helper to specify a unique URL for a specific environment. However, if the hot reloading server isn't running your tool would likely not show up.

[nody-iq]

ended up with this Uncaught ReferenceError: VUE_HMR_RUNTIME is not defined
at ./resources/js/components/Card.vue

[cioroianudenis]

why was this selected as an answer? It doesn't work, I get the same error as @nody-iq after doing the steps mentioned by @davidhemphill.
It has something to do with the fact that the vendor.js and app.js file served by laravel nova are served as production bundle which doesn't have VUE_HMR_RUNTIME defined and the mix watch --hot is ran inside the tool's resource folder.