Struggling a bit with Vite HMR or just --watch flag

[Hnnx]

Hi,

I'm trying to implement a functionality similar to "npm run build --watch"

There's two options currently available in package.json

npm run dev doesn't work properly for me. Server spawns on http://localhost:5173/ but I get "localhost refused to connect."
if I change any files, nothing gets printed in the console so I'm assuming the files are being watched.

The second script npm run build works fine but as soon as it stops bundling, the script stops. I would need to run it manually on every file change.

I found another WP theme that solved this issue that calls a whole set of different scripts, builds the assets then runs again but I don't understand how exactly it keeps watching files. Also I'd rather use your theme because it's much cleaner :)

Maybe I fundamentally misunderstand how Vite works, any help is appreciated.

[oguilleux]

Hi,

Just to be sure, have you installed a WordPress instance accessible on a local url like : dev.local or mylocalwebsite.dev ?

If so have you tried npm run dev like in the documentation ? then checked on this local url ?

[Hnnx]

Hi,

I'll get back to you after I'm done working, while the npm run dev still isn't working as expected (I think it has something to do with me not having wordpress installed locally but instead hosting it on a domain so I need to fix ports etc).

I managed to get it going by doing npm run build -- --watch

It's taking a bit longer than gulp but so far it looks like a feasible solution to my problem.

Have you considered adding browsersync with vite? I might add it myself once I figure out how things works.

Anyway thanks a lot for your time

[oguilleux]

When you dev you never work directly on the hosting. You always do everything locally then bundle your code that you send on your hosting.

So first, do everything locally : WordPress instance + npm run dev.

Second, if you had done that you would have noticed that there is already hot reload :)

Third, please carefully read the readme.

Tell me if this helps.

[Hnnx]

Just letting you know I've since switched to local development and it's working perfectly out of the box, no setup needed. Just npm install and npm run dev, with everything functioning as intended.

Will still use the build watch in case I have to do a quick fix remotely

[oguilleux]

Awesome, happy to hear that :) Leave a star if you feel supporting the repo !