The words Under construction in black text on a yellow background with diagonal black stipes surrounding it
I'm in the process of moving my site. It's still a work in progress. Please excuse the mess and broken links.

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

TODO: Pull subtitle into page object

Install with:

code_start_default_section code_end_default_section

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.

Debugging Stuff

I'm moving stuff around right now. All this below is helping me figure out where to put stuff

        -- title

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

-- p

Install with:

-- code/

npm install -g browser-sync

-- /code

-- p

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

-- code/
-- bash

browser-sync . -w --no-notify

-- /code

-- p

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

-- p

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

-- p

Old Notes

-- p

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

-- code/
-- command

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

-- /code

-- p

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

-- p

The site is served at both:

-- code/

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

-- /code

-- p

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

-- code/
-- command

ngrok http 3000

-- /code

-- p

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

-- code/

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

-- /code

-- p

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

-- p

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


-- categories
-- Command Line

-- metadata
-- date: 2021-08-09 10:39:51
-- id: 20eok6p2
-- status: scratch
-- type: post
-- SCRUBBED_NEO: false
-- site: aws