Skip to content

Fix webpack dev server watch behavior and port conflicts #3026

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
shervElmi wants to merge 1 commit into
base: master
Choose a base branch
from
+31 −11
Open

Fix webpack dev server watch behavior and port conflicts #3026

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 31 additions & 11 deletions webpack.dev.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@
* Formidable Forms Development Server
*
* Run `npm run serve` to start the development server. You'll be prompted
* for your WordPress site URL, and a development server will start at localhost:3000.
* for your WordPress site URL and JS/PHP watching, then a dev server starts at localhost:8880.
*
* Development is streamlined with automatic updates:
* - CSS/SCSS changes are injected in real-time without page refresh
* - JavaScript and PHP changes trigger an automatic full page reload
* - Browser opens automatically to localhost:3000
* - JavaScript and PHP changes trigger an automatic full page reload (opt-in)
* - Browser opens automatically to localhost:8880
*/

/**
Expand All @@ -22,11 +22,11 @@ const webpackDevMiddleware = require( 'webpack-dev-middleware' );
*/
const config = {
// WordPress site URL from environment variable or default
siteDomain: process.env.SITE_URL || 'formidable.local',
siteDomain: process.env.SITE_DOMAIN || 'formidable.local',

// Server ports
port: 3000,
uiPort: 3001,
// Server ports (8880/8881 to avoid conflicts with common dev tools)
port: 8880,
uiPort: 8881,

// Paths to watch for changes
cssPath: '../formidable*/**/*.css',
Expand Down Expand Up @@ -70,6 +70,11 @@ const init = () => {
]
},

// Exclude 3rd-party directories from all file watchers
watchOptions: {
ignored: [ '**/node_modules/**', '**/vendor/**' ]
},

// File watching
files: [
// CSS changes, inject without reload
Expand All @@ -80,13 +85,28 @@ const init = () => {
browserSyncInstance.reload( '*.css' );
}
},
// JS source changes
// JS source changes log rebuild progress (webpack handles actual compilation)
{
match: [ config.jsSrcPath ],
fn: ( event, file ) => console.log( `JS source updated: ${ file }\nRebuilding JS bundles...` )
},
// Conditionally watch compiled JS and PHP files
...( process.env.WATCH_FILES && process.env.WATCH_FILES.toLowerCase().startsWith( 'y' ) ? [ config.jsPath, config.phpPath ] : [] )
// Conditionally watch compiled JS and PHP files for full page reload
...( process.env.ENABLE_WATCH && process.env.ENABLE_WATCH.toLowerCase().startsWith( 'y' ) ? [
{
match: [ config.jsPath ],
fn: ( event, file ) => {
console.log( `JS updated: ${ file }` );
browserSyncInstance.reload();
}
},
{
Copy link
Copy Markdown
Contributor

@Crabcyborg Crabcyborg Mar 25, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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.

Copy link
Copy Markdown
Contributor Author

@shervElmi shervElmi Mar 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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

CleanShot 2026-03-30 at 13 39 43@2x

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

https://cleanshot.com/share/SVXbfwTW

match: [ config.phpPath ],
fn: ( event, file ) => {
console.log( `PHP updated: ${ file }` );
browserSyncInstance.reload();
}
}
] : [] )
],

// Server settings
Expand All @@ -105,7 +125,7 @@ const init = () => {
} ]
} );

console.log( `Development server running at: http://localhost:${ config.port }` );
console.log( `Development server running at http://localhost:${ config.port }` );
};

// Start the server
Expand Down
Loading