WHAT IF you could magically have browser-sync (livereload+mobileview) on every static html project, without any setup in the project? You can 🎉🎉🎉

0-README.md

Short link to this gist: http://tinyurl.com/browsersync-via-foreman

(or http://caseywatts.com/browsersync)

The "Browser Sync Simple" section is probably what you want.

If you need something more advanced than that, then the "Browser Sync with Foreman" would help.

BrowserSyncSimple.md

Browser Sync Simple

Install browser-sync globally

you only have to do this once

npm install -g browser-sync

• close and re-open terminal after installing it

Go to the folder

In terminal, change directory to the folder with your files (probably not literally named folder-with-html-stuff-in-it, put your own name in)

cd ~/folder-with-html-stuff-in-it

In OS X, you can type cd and then drag a folder in from finder, and it'll paste the full location path in for you ✨

To make sure you're in the right folder, you can do present working directory command in terminal:

pwd

Start browser-sync

Once you're in the right folder in terminal, start browser-sync.

browser-sync start . -s --files "*.html, *.css"

this command will:

• run a server locally
  • (so your html page can actually access images and css and etc - it wouldn't if you had just opened the html file directly)
• automatically open a browser to the index.html
• the browser-sync process is automatically in sync with this chrome tab. Any time an html or css file is changed, it will reload the page.
• This is now a process that's running. You can't type commands into the terminal while you're in a process. You can exit the process with cmd+c

Summary

These were the important commands we ran:

npm install -g browser-sync
cd ~/folder-with-html-stuff-in-it
browser-sync start . -s --files "*.html, *.css"

BrowserSyncWithForeman.md

Browser Sync With Foreman

What tools are involved

• browser-sync - awesome package. Our goal! It does both live reloading AND allows you to view your webpages from your phone or another device.
  • When files are changed, it will auto-refresh the page.
  • You can access these files even from your phone (as long as you are on the same wifi network), by using the url they give you called "External". You will see this url after you run nf (Foreman).
  • BrowserSync site will tell you even more nifty stuff it does
• SimpleHTTPServer (python) - a super-common way to run a local server (so you can see files at localhost:8000)
  • SimpleHTTPServer details here
• Foreman (nf) - helps you run multiple commands at once. Its name in node is nf = node-foreman. (it was originally a Ruby gem).
  • we have to run both SimpleHTTPServer and browser-sync. They work together nicely.
  • node-foreman repo has more details
• Procfile - is what foreman uses to run its multiple commands

Code Setup

Create ~/Procfile with these contents:

http: python -m SimpleHTTPServer 8000
browser-sync: browser-sync start --proxy="localhost:8000" --files="*.html, *.css"

Install Node if you haven't already

Run these in Terminal:

npm install -g browser-sync
npm install -g foreman

• command nf not found: After doing npm install you must close the current terminal window and open a new one (or reload the terminal). This is so the command nf can be used. If you skip this, it will say command nf not found.

Normal Use

Run these in Terminal:

cd ~/folder-with-some-html
nf start -j ~/Procfile

Alias (optional)

You can also alias this command to something memorable like bs (for browser sync lol) or http (as in - put this on a local http server for me real quick). This is done in your dotfile (whichever one you have).

Put this line in your dotfile ~/.bash_profile or ~/.bash_rc or ~/.zshrc:

alias bs="nf start -j ~/Procfile"

• command bs not found: After editing your dotfile, you must close the current terminal window and open a new one (or reload the terminal). This is so the command bs can be used. If you skip this, it will say command bs not found.

SASS? (optional)

If you want to use scss you could try:

npm install -g node-sass

And add a line to your Procfile:

node-sass: node-sass -w scss/ -o css/

• node-sass CLI details