If you work with different docker environments at the same time you need to manage the ports. wp-env uses port 8888 by default. If this port is already in use by another project then you have a problem.

The solution is basically quite simple: Just change the ports. Admittedly this is quite annoying to check every time which ports are occupied and to configure a free port in a extra configuration file.

Therefore, I simply wrote a small npm package that accomplishes this task: wp-env-port-stamp generates every time a new port adress – more or less – randomly. When the package is called, it creates a file .wp-env.json in the directory where it was called. With this .wp-env.json file you can customize the WordPress installation. In our case dynamic rendered port numbers.

Port number generation

The port number will be generated from the current JavaScript date – the time in milliseconds since the ECMAScript epoch. We take the last numbers of this time as the port number. There is also a filter that prevents commonly used port numbers (e.g. 8888) from being used.

The last step is to check whether the generated numbers are already in use (port is open) at the time of generation. 🙂

Install / Remove

Install the package globally on your local computer:

npm install -g wp-env-port-stamp

To remove the package:

npm uninstall -g wp-env-port-stamp

Usage

1. Go in your local dev environment to your plugin, theme or block root directory or wherever you want to start wp-env.
2. Call the package: wp-env-port-stamp
3. The file is generated. You can start now with wp-env

Normally you only need to call the package for the first time in a new project. Later just start directly wp-env.

Attention: If there is already existing .wp-env.json file, wp-env-port-stamp will overwrite it! (There will be an improvement for this later.) That was improved.

Source

The package is available on GitHub (https://github.com/HeikoMamerow/wp-env-port-stamp) and of course on npm (https://www.npmjs.com/package/wp-env-port-stamp).

Updates

• 12.04.2023
  • Existing files are no longer overwritten.
  • The range for the port numbers was increased.
  • A filter now ensures that certain frequently used ports (e.g. 8888) are not used.
  • Add TypeScript
• 13.04.2023
  • Add ESLint
  • Add npm version badge
• 14.04.2023
  • Check if ports are already in use