feat: hot reload

[Swanand01]

Description

Adds live reload and CSS hot-reloading to the dev workflow via BrowserSync. Running npm run dev now watches for file changes. CSS updates inject in-place without a full reload; PHP, HTML, and JS changes trigger a full page reload.

Technical Details

Implementation: BrowserSync snippet mode

• browser-sync and browser-sync-webpack-plugin added as dev dependencies.
• BrowserSyncPlugin added to the scripts webpack config only (adding it to all three configs would start three BrowserSync
  instances on the same port).
• injectCss: true on the plugin enables CSS injection without a full reload.
• BrowserSync watches assets/build/**/, **/.php, **/*.html.
• WP_EXPERIMENTAL_MODULES=true is required in the dev script — without it, @wordpress/scripts/config/webpack.config exports a single object instead of an array, breaking the three-config destructuring.
• On local/development environments, class-assets.php conditionally enqueues the BrowserSync client script from
  http://localhost:3000. Requires define('WP_ENVIRONMENT_TYPE', 'local') in wp-config.php.

Known limitation: HTTPS local environments

Snippet mode fails silently on HTTPS local sites (LocalWP with SSL, VIP Dev Env). The browser blocks the WebSocket and HTTP connection from an HTTPS page to localhost:3000 as mixed content.

Workaround: BrowserSync proxy mode

In proxy mode, BrowserSync proxies the local WordPress site and serves it at https://[hostname]:3000. The SSL cert doesn't cover port 3000, so the browser shows a one-time "proceed anyway" warning — but HMR then works correctly with no mixed content errors. Proxy mode also auto-injects the client script, removing the need for the PHP enqueue. This is not implemented in this PR.

Checklist

• npm run dev starts webpack watch + BrowserSync simultaneously
• CSS changes inject in-place (no full reload)
• PHP, HTML, JS changes trigger a full page reload
• BrowserSync only starts once (added to scripts config, not all three)
• Works on HTTPS local environments (LocalWP with SSL, VIP Dev Env)

To-do

• Implement proxy mode to support HTTPS local environments (LocalWP with SSL, VIP Dev Env)? Discussion needed @aryanjasala

Fixes/Covers issue

Fixes #643

[Copilot]

Pull request overview

Adds BrowserSync-based live reload (CSS injection + full-page reload) to the theme’s development workflow, integrating it into the existing webpack-based asset pipeline and conditionally loading the BrowserSync client in local/dev WordPress environments.

Changes:

• Add browser-sync + browser-sync-webpack-plugin and wire BrowserSync into the webpack “scripts” config.
• Add an npm run dev script to run webpack in watch mode with the multi-config setup.
• Conditionally enqueue the BrowserSync client script in PHP for local/development environments.

Reviewed changes

Copilot reviewed 3 out of 4 changed files in this pull request and generated 5 comments.

File	Description
webpack.config.js	Adds BrowserSyncWebpackPlugin to enable reload/inject behavior during webpack watch builds.
package.json	Adds BrowserSync deps and a new dev watch script for the enhanced dev loop.
package-lock.json	Locks newly added BrowserSync-related dependencies.
inc/classes/class-assets.php	Enqueues the BrowserSync client on local/development to enable snippet-mode reloads.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

webpack.config.js was reformatted to use double quotes and tighter spacing, which conflicts with the repo’s established JS formatting (e.g., bin/init.js uses @wordpress/eslint/prettier style with single quotes and spaced parentheses). This is likely to cause lint/format failures; please run the formatter/prettier and keep the file consistent with the existing style (single quotes, spacing).