Serve A Local Directory As A Web Site With Auto-Reload via browser-sync

Install with:

Code

npm install -g browser-sync

Then CD into the directory you want to serve and do this:

Code

browser-sync . -w --no-notify

That will serve the directory with the watch files flag set which makes the browser reload automatically on changes.

The `--no-notify` turns off a banner that would otherwise flash during each update

Old Notes

You can serve a local directory as a web site by running this inside it:

Code

npx browser-sync start --server --files "./**/*.html" --no-open --no-notify --directory

This will automatically reload the browser if it seems any of the .html files change.

The site is served at both:

Code

http://localhost:3000
http://YOUR_IP_ADDRESS:3000

Use ngrok if you need to show it to folks externally by running this (doesn't have to be in the same directory):

Code

ngrok http 3000

There's also a UI that gives you some details at:

Code

http://localhost:3001
http://YOUR_IP_ADDRESS:3001

You'll need `npx` installed which should come with node.

It'll install browser-sync the first time you run it if it's not already there.