DEV Community

Joe Leeson
Joe Leeson

Posted on

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!

Top comments (1)

Collapse
 
marblewraith profile image
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.