Live reload setup

So for most of my projects I have a watch script such as npm run watch to auto compile less/sass, but I haven't got anything setup yet to reflect these changes in the browser without a page refresh.

Would love to hear some recommendations on what other devs out there are using for their setup?

Cheers in advance!

Comments

[Matthew Rath]

For dedicated projects, use Vite - vitejs.dev/

It'll handle everything, including the watch tasks for preprocessors - vitejs.dev/guide/features.html#css...

Note that it's also split into 2 distinct workflows conceptually i.e.

• The stuff that happens during dev: live reload, HMR, preprocessors, etc.
• The stuff that happens when you want to push / deploy to prod, custom optimizations (via rollup).

P.S. If all you want is a scratchpad to try something out, codepen, jsFiddle, or one of those sites will serve that purpose, don't bother installing a "live server" extension in your editor.