#LIVERELOAD VS BROWSER SYNC INSTALL#

we have to run both SimpleHTTPServer and browser-sync.

Foreman ( nf) - helps you run multiple commands at once.

SimpleHTTPServer (python) - a super-common way to run a local server (so you can see files at localhost:8000).

BrowserSync site will tell you even more nifty stuff it does.

You will see this url after you run nf (Foreman).

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'.

When files are changed, it will auto-refresh the page.

Our goal! It does both live reloading AND allows you to view your webpages from your phone or another device. s -files '*.html, *.css'īrowser Sync With Foreman What tools are involved

#LIVERELOAD VS BROWSER SYNC INSTALL#

These were the important commands we ran: npm install -g browser-syncīrowser-sync start.

You can't type commands into the terminal while you're in a process. Any time an html or css file is changed, it will reload the page. the browser-sync process is automatically in sync with this chrome tab.automatically open a browser to the index.html.(so your html page can actually access images and css and etc - it wouldn't if you had just opened the html file directly).Once you're in the right folder in terminal, start browser-sync. To make sure you're in the right folder, you can do present working directory command in terminal: pwd 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 ✨ 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 close and re-open terminal after installing it.You only have to do this once npm install -g browser-sync Browser Sync Simple Install browser-sync globally

Livereload vs browser sync