How to Refresh Your Pages Automatically with Webpack and Browsersync | Part 1 (Static Sites)

Released on March 11th 2017
Length: 10:29

Learn how to utilize webpack and Browsersync to automatically refresh your browser whenever a change is made to one of your files. This episode shows you how to do this for static sites: sites whose content is not generated by a backend language like PHP, Ruby, or Node.js. For dynamic sites, stay tuned for Part II of the series where we use a proxy server to ensure our backend code is processed, and a Browsersync server to ensure our pages are being refreshed automatically. Git Repo to Follow Along (make sure you install initial node packages after cloning with `npm install` or `yarn`): https://github.com/christopher4lis/cc-webpack-browsersync-part-1 BrowserSync plugin for Webpack URL: https://www.npmjs.com/package/browser-sync-webpack-plugin Timeline: 1:00 - Intro to the browser-sync-webpack-plugin 2:46 - Explanation of Browsersync config properties 3:47 - Installing the browser-sync module 4:49 - Running Browsersync with webpack 6:48 - Configuring Browsersync to watch HTML files Beatz: Immortal Beats - Oh Wee - Creative Commons For updates on the progress of chriscourses.com and future videos, join the Chris Courses mailing list at http://chriscourses.com. Support Chris Courses Through Patreon: -------------------------------------- https://www.patreon.com/chriscourses Chris Courses Social: --------------------- Twitter: https://twitter.com/chriscourses Facebook: https://www.facebook.com/chriscourses Instagram: https://www.instagram.com/chriscourses Christopher Lis Social: ----------------------- Twitter: https://twitter.com/christopher4lis CodePen: http://codepen.io/christopher4lis