Within a dev container using Docker 26, `vite dev` or `vite preview` cannot be accessed from the host
Problem
Describe the bug I initialy though this was a case of https://github.com/vitejs/vite/issues/11468#issuecomment-2073871487, but it seems it is something else, so I am opening another issue. Using Dev Containers for development, and after upgrading to Docker 26 (from 25) on the host, I am unable to connect to either `vite dev` or `vite preview` server using the default and basic port forwarding feature of the dev containers. By "unable to connect", I mean that the server is launched, however when trying to connect from my host using `http://localhost:4200/`, either Chromium or Firefox Dev Edition request hangs indefinitely on loading (it stays in loading state without timing out for at least for a good 5-10 minutes; didn't test longer than that). I am using Nx, but using vite directly does not change the outcome. For the recoard, I also have a `dotnet` server that is responding as expected to the request, so for now (in my limited available code base), this point out to `vite`, but it may well be due to whichever node server backend vite is using. Reproduction unable to provide without control of the host docker version Steps to reproduce _No response_ System Info Dev Container I am using a custom pre-built image, which is a copy of `mcr.microsoft.com/devcontainers/typescript-node:20` [code block] Host - `docker-ce-cli (5:26.1.0-1~ubuntu.22.04~jammy)` - `docker-ce (5:26.1.0-1~ubuntu.22.04~jammy)` [code block] Used Package Manager pnpm Logs <details> <summary>
Error Output
Error: true, exclude: [Array] },
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Fix Vite Server Access in Docker 26 Dev Container
The issue arises due to changes in Docker 26 that affect how network interfaces are handled within dev containers. Specifically, Vite's default server configuration may not bind to the correct network interface, preventing access from the host machine.
Awaiting Verification
Be the first to verify this fix
- 1
Update Vite Configuration
Modify the Vite configuration to explicitly bind the server to the correct host interface. This ensures that the Vite server is accessible from the host machine.
typescriptexport default defineConfig({ server: { host: '0.0.0.0', port: 4200 } }); - 2
Check Docker Port Mapping
Ensure that the Docker container is correctly mapping the ports. You need to verify that the port 4200 is exposed and published to the host.
bashdocker run -p 4200:4200 your-image-name - 3
Restart Dev Container
After making the above changes, restart your dev container to apply the new Vite configuration and port mappings.
bashCtrl + Shift + P -> 'Remote-Containers: Rebuild Container' - 4
Test Access from Host
Open your web browser and navigate to http://localhost:4200/ to confirm that the Vite server is accessible from the host.
Validation
To confirm the fix worked, you should be able to access the Vite development server at http://localhost:4200/ without any loading issues. Additionally, check the terminal output for any errors related to Vite or network binding.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep