Fix webpack dev server watch behavior and port conflicts

[shervElmi]

This PR fixes issues in the Formidable development server setup.

Testing

1. Run npm run serve
2. Confirm the script prompts for site domain and watch mode
3. Enable JS/PHP watching
4. Confirm BrowserSync starts on the updated ports
5. Edit a CSS file and confirm styles reload without a full page refresh
6. Edit a JS file and confirm the page reloads after rebuild
7. Edit a PHP file and confirm the page reloads
8. Confirm watcher logs do not include node_modules or vendor

Summary by CodeRabbit

• Chores
  • Updated development server configuration with new port assignments to prevent conflicts.
  • Optimized file watching behavior to exclude third-party directories and improve build performance.
  • Enhanced automatic page reload triggering for compiled file changes during development.
  • Renamed environment variable for improved naming consistency.

[deepsource-io]

DeepSource Code Review

We reviewed changes in f434ee9...7034433 on this pull request. Below is the summary for the review, and you can see the individual issues we found as inline review comments.

See full review on DeepSource ↗

PR Report Card

Overall Grade

Security   Reliability   Complexity   Hygiene

Code Review Summary

Analyzer	Status	Updated (UTC)	Details
PHP		Mar 17, 2026 2:19p.m.	Review ↗
JavaScript		Mar 17, 2026 2:19p.m.	Review ↗

[coderabbitai]

📝 Walkthrough

Walkthrough

The webpack development configuration was updated to rename an environment variable from SITE_URL to SITE_DOMAIN, change dev server ports from 3000/3001 to 8880/8881, add third-party directory exclusions to watch options, and introduce conditional file watching handlers for JS and PHP files triggered by ENABLE_WATCH.

Changes

Cohort / File(s)	Summary
Webpack Dev Configuration webpack.dev.js	Environment variable renamed (SITE_URL → SITE_DOMAIN); dev server ports changed (3000/3001 → 8880/8881); watchOptions added to exclude node_modules and vendor; WATCH_FILES condition replaced with ENABLE_WATCH; new watching handlers for JS and PHP files with BrowserSync reload triggers added.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 From port three-thousand we hop away,
To eighty-eight-eighty, a clearer way,
With watchers now excluding third-party land,
And ENABLE_WATCH giving control by hand! 🚀

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main changes: fixing webpack dev server watch behavior and resolving port conflicts from 3000/3001 to 8880/8881.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch ix/dev-server-watch-and-ports

📝 Coding Plan

• Generate coding plan for human review comments

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@webpack.dev.js`:
- Around line 93-109: The compiled-output watcher (config.jsPath) is matching
source JS files and causing browserSyncInstance.reload() to run before webpack
finishes; update the watcher for config.jsPath to exclude source directories
(the same paths used by config.jsSrcPath) — either by changing the glob to
exclude js/src/** or by adding an ignore/negation pattern so the match for
config.jsPath only targets compiled bundles, ensuring only the jsSrcPath watcher
logs "JS source updated" while the compiled watcher triggers reload after build
completion.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 790a2da0-442a-4a0d-8ace-f4227e833e25

📥 Commits

Reviewing files that changed from the base of the PR and between f434ee9 and 7034433.

📒 Files selected for processing (1)

• webpack.dev.js

[Crabcyborg]

@shervElmi Is there any reason for watching PHP file changes?

I don't really see how a PHP change would ever impact the built files.

[shervElmi]

@Crabcyborg when you're working on a new feature that involves a new design, it really makes sense and speeds things up a lot. You don’t need to manually refresh the browser, so you can just focus on the design and codebase while the browser refreshes automatically, whether it's PHP, JS, or SCSS/CSS changes.

Actually, wp-scripts already has this feature: https://www.npmjs.com/package/@wordpress/scripts#usage-1

---

Here’s how I use it so I can stay focused on the codebase without refreshing the browser:

https://cleanshot.com/share/SVXbfwTW