I am getting an "Invalid Host header" message when connecting to webpack-dev-server remotely

Rules of entry: allowedHosts

webpack-dev-server gives the option to specify which hosts can access the dev server, similar to a selective bouncer at a nightclub.

devServer: {
    allowedHosts: ['.example.com', 'subdomain.host.com', '192.168.0.1'], // Your party guests
    // ...
};


Users might be tempted to use 'all' as a catch-all for allowedHosts, much akin to throwing open the nightclub doors to anyone. However, this is not advised in production settings due to potential security risks. This approach should be reserved for controlled development situations where security implications are understood.

Cloud-based development environment: Dealing with Cloud9

For Cloud9 users (or similar cloud-based IDEs) who develop on remote virtual machines, the allowedHosts may need to include a service-provided domain:

devServer: {
    allowedHosts: ['.c9users.io', '.amazonaws.com'], // Cloud9, meet the bouncer
    // ...
};


Also, the public property should align with the IDE-provided external address, ensuring the host's response matches the request, like twins separated at birth.

Game of environments: Using variables

In a situation where you wish to toggle the host check in your development setting, consider using an environment variable:

DANGEROUSLY_DISABLE_HOST_CHECK=true // Not recommended for impressionable environments fully connected to the Internet


This change could be incorporated into a .env file, but do not implement this in live environments.

A net cast wide: Remote access configuration

When accessing the dev server remotely is required, setting the host option to 0.0.0.0 would allow connections from all network devices:

devServer: {
    host: '0.0.0.0', // Open to all, no exceptions.
    // ...
};


As always, test your configuration changes by accessing the dev server from the intended host.

Smooth serving: Potential issues to anticipate

When setting up your server, be mindful of some potential tripwires:

• Port Harmony: Make sure your dev server's port isn't in conflict with other running services. It hates competing.
• Compression Preferences: If you decide to serve files using gzip compression, remember it could put some strain on your CPU, akin to a gym session.
• Living On The Edge: The inline option allows for handy live reloading, but this could create network disturbance akin to party noise complaints.