Rather than manually refreshing your browser when your patterns or CSS change, Pattern Lab auto-reloads your browser window for you using BrowserSync.
Auto-reloading is a behavior that is done in concert with file watching. You can read more about how these two features work together here.
How to Start and Connect to Pattern Lab with BrowserSync
Running ‘gulp patternlab:serve’ or ‘grunt patternlab:serve’ from the command line of your working directory will start up Pattern Lab with BrowserSync and launch http://localhost:3000 in your default browser.
How to Stop the Server
To stop watching and serving files on Mac OS X and Windows you can press
CTRL+C in the command line window where the process is running.
An auto-reload service was built into Pattern Lab 1. With Pattern Lab 2 this feature has been turned into the Auto-Reload Plugin. To install this plugin do the following:
- In a terminal window navigate to the root of your project
composer require pattern-lab/plugin-reload
The Auto-Reload Plugin is automatically enabled when you install it. You can always disable the plugin if you need to.
This service is enabled when using the
--server --with-watch commands. Learn more about watching for changes.