Skip to content

Browser-Sync File watching pattern

The Browser-Sync File Watching Pattern is a development workflow technique used to automate the refreshing of web pages during local development.^[600-developer-tools-browerhotreload.md] This pattern is particularly useful for projects involving server-side technologies where standard live-reload mechanisms might not be sufficient or where the application runs on a specific port.^[600-developer-tools-browerhotreload.md]

Mechanism

The pattern relies on browser-sync, a tool that creates a proxy server to forward requests to the application's development server while simultaneously injecting scripts to enable live reloading.^[600-developer-tools-browerhotreload.md] By watching specific file extensions, the tool detects changes in the codebase and triggers a browser reload or injection automatically.^[600-developer-tools-browerhotreload.md]

Implementation

In a typical implementation, the developer specifies the target server (proxy), the local port, and the file types to watch.^[600-developer-tools-browerhotreload.md]

For example, to watch changes in CSS, JavaScript, and JSP files for a project running on localhost:8080, the following command can be used:

[Browser-Sync](<./browser-sync.md>) start --proxy "localhost:8080/oneShop/" --files "**/*.css, **/*.js, **/*.jsp"

Once this command is executed, the developer accesses the application via the browser-sync port (e.g., http://localhost:3000/oneShop).^[600-developer-tools-browerhotreload.md] Any modifications to the specified file types will result in an automatic reload of the browser.^[600-developer-tools-browerhotreload.md]

  • [[Development Workflow]]
  • [[Hot Reload]]

Sources

  • 600-developer-tools-browerhotreload.md