Running Multiple Laravel Mix Hot Reload Servers Simultaneously

When working on Laravel applications with multiple frontends—think public website, admin dashboard, and client portal—developers often hit a frustrating wall: you can only run one npm run hot process at a time. Switch to working on the admin panel? Restart the entire Node container. Back to the main site? Restart again.

The culprit? Port conflicts. Every webpack-dev-server instance tries to bind to port 8080 by default, and Docker won’t let two containers claim the same port.

The Solution: HOT_PORT Environment Variable

Laravel Mix already supports this use case through the HOT_PORT environment variable. Both your main webpack.mix.js and any project-specific configs check for it:

// webpack.mix.js
if (process.env.npm_lifecycle_event === 'hot') {
  mix.webpackConfig({
    devServer: {
      host: '0.0.0.0',
      port: process.env.HOT_PORT || 8080
    }
  });
}

This means you can run multiple hot reload servers simultaneously, each on its own port, by defining custom npm scripts:

// package.json
{
  "scripts": {
    "hot": "cross-env NODE_ENV=development webpack-dev-server --inline --hot ...",
    "hot:admin": "export HOT_PORT=8081 && cross-env process.env.project='admin' NODE_ENV=development webpack-dev-server --inline --hot ..."
  }
}

Docker Setup

Expose both ports in your docker-compose.yml:

services:
  node:
    ports:
      - 8080:8080  # Default hot reload
      - 8081:8081  # Admin panel hot reload

Running Multiple Servers

Now you can develop on multiple frontends simultaneously:

# Terminal 1: Default site (port 8080)
npm run hot

# Terminal 2: Admin panel (port 8081)
npm run hot:admin

Each webpack-dev-server watches its own files and serves its own HMR updates. Changes to your public site won’t trigger admin panel rebuilds, and vice versa.

When This Matters

This approach shines in monolithic Laravel apps with distinct user interfaces:

• Customer portal (Vue.js, Tailwind)
• Admin dashboard (different Vue components, Bootstrap)
• Partner interface (unique styling, separate Vuex stores)

Instead of context-switching between npm processes and waiting for container restarts, you keep all your dev servers running. Jump between codebases without losing hot reload state.

Bonus: Conditional Configs

Laravel Mix supports loading different webpack configs based on process.env.project:

// webpack.mix.js
const project = process.env.project;

if (project) {
  require(`${__dirname}/webpack.mix.${project}.js`);
  return;
}

// Default config follows...

This lets you maintain clean, project-specific build configs (e.g., webpack.mix.admin.js, webpack.mix.customer.js) while still leveraging the shared HOT_PORT pattern.

Key Takeaway

Laravel Mix’s HOT_PORT support isn’t just a convenience—it’s a workflow multiplier for multi-frontend monoliths. No more container restarts. No more choosing which part of your app gets hot reload. Just parallel dev servers doing what they do best.