Installing and Using BrowserSync

BrowserSync will automatically reload Webpages you’re working on in the browser upon saving changes. It’s similar to Live Server extension for VScode, but it’s much better and has tons of options.

In this video, I’ll show you how to install and use BrowserSync for static Websites and dynamic (PHP) sites,

 

00:00 Intro
00:43 Installing BrowserSync
01:46 Using BrowserSync
05:00 BrowserSync Config File
08:13 Working with Dynamic Websites (PHP)
10:52 Realtime Auto Reload
12:36 BrowserSync UI

 

USEFUL COMMANDS:

browser-sync --files "*.html, *.css, *.js" // Starts Browsersync and watches html, css, and js files.
browser-sync --files "*.php, *.css, *.js" --proxy "localhost/project" start // Start Browsersync on a local webserver.
browser-sync init // Create config file
browser-sync --config bs-config.js // Starts Browsersync with config file
browser-sync --config bs-config.js start // Starts Browsersync with config file and proxy enabled for dynamic websites.

 

LINKS:
BrowserSync 👉🏾 https://browsersync.io/
BrowserSync command line reference 👉🏾 https://browsersync.io/docs/command-line
BrowserSync Config Options reference 👉🏾 https://browsersync.io/docs/options
Save Commands extension 👉🏾 https://marketplace.visualstudio.com/items?itemName=deepakgupta191199.save-commands
Sass 👉🏾 https://sass-lang.com/

Comments