search

webpack / webpack-dev-server

Serves a webpack app. Updates the browser on changes. Documentation https://webpack.js.org/configuration/dev-server/.
MIT License
7.8k stars 1.44k forks source link

Web Dev Server Inaccessible from Local Network Devices Despite Correct Configuration #5174

Closed firatsarlar closed 6 months ago

firatsarlar commented 6 months ago

Bug Report

When the Webpack Dev Server is initiated, it functions correctly on the host machine using localhost and local IP addresses (e.g., 192.168.xxx.xxx). However, attempts to access the dev server from other devices on the same local network, such as phones, tablets, or even a virtual machine, fail despite the server being reachable at these addresses on the host machine. This issue occurs even though a simple Python HTTP server set up under similar conditions is accessible across all devices on the same network.

Actual Behavior

The Webpack Dev Server starts normally and is accessible via localhost and its local IP address on the host machine. Despite the firewall being configured to allow local network traffic and successfully serving a simple Python HTTP server across various devices (confirmed by testing), the Webpack Dev Server cannot be accessed from any other device on the same network.

Expected Behavior

The Webpack Dev Server should be accessible from any device within the same local network, mirroring the behavior observed when accessing a simple Python HTTP server under similar network conditions. I expect to view and interact with the webpage I'm developing, just as it appears on my local development machine, using the server's local IP address or hostname.

How Do We Reproduce?

To reproduce the issue, follow these steps using the provided GitHub repository:

  1. Clone the Repository: Clone the repository at https://github.com/firatsarlar/wp_devs_err_repr.
  2. Install Dependencies: Run npm install to install necessary dependencies.
  3. Build the Project: Execute npm run build to build the project, which prepares the dist directory with the necessary files.
  4. Start Webpack Dev Server: Run npm start to start the Webpack development server. The server should now be accessible via http://localhost:8080 and http://192.168.1.50:8080 on the host machine.
  5. Start Python HTTP Server: In a separate terminal, run npm run python_serve to serve the dist directory using Python's built-in HTTP server. This server will be accessible via http://192.168.1.50:8000.
  6. Test Accessibility: Try accessing both servers from other devices on the same network by navigating to http://192.168.1.50:8080 for the Webpack Dev Server and http://192.168.1.50:8000 for the Python server. The Python server should be accessible, whereas the Webpack Dev Server might not be.

Please paste the results of npx webpack-cli info here, and mention other relevant information

System: OS: Windows 10 10.0.19045 CPU: (8) x64 Intel(R) Core(TM) i7-4771 CPU @ 3.50GHz Memory: 16.00 GB / 31.94 GB Binaries: Node: 22.0.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD npm: 9.6.6 - C:\Program Files\nodejs\npm.CMD Browsers: Edge: Chromium (123.0.2420.97) Packages: html-webpack-plugin: ^5.6.0 => 5.6.0 webpack: ^5.91.0 => 5.91.0 webpack-cli: ^5.1.4 => 5.1.4 webpack-dev-server: ^5.0.4 => 5.0.4

firatsarlar commented 6 months ago

I've also tested vite, same problem. Not sure but this problem may be bound to "expressjs " ( if both dev servers depend on it )

firatsarlar commented 6 months ago

The problem was related to Windows defender firewall. Even though the local inbound - outbound rules were working normally and all ports were open, the problem disappeared when I reset the firewall settings and re-created the rules.