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
  https://localhost:3000. Requires define('WP_ENVIRONMENT_TYPE', 'local') in wp-config.php.

Known limitation: Manually adding SSL certs

To make this work without opening the site on a different port(3000, in proxy mode), SSL cert paths will have to be added in .env.local (see .env.local.example)

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)

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]

Pull request overview

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

[Copilot]

Pull request overview

Copilot reviewed 4 out of 6 changed files in this pull request and generated 1 comment.

[bhavz-10]

• Acceptance gap: docs/hmr.md is missing.
• Acceptance gap: npm run build does not exist.

The Base branch is main. I believe it should be theme-elementary-v2. That will need some work to change.

[Swanand01]

@bhavz-10 implemented your feedback.
For the build scripts we have two: build:dev and build:prod.
This PR deals with HMR, which only works when in development mode, not while building.