Access VS Code Dev Containers from your local network

Dominik Rüttiger

There are two ways to publish ports to the host and make them available on the local network: Forwarding and publishing.

Forwarding

This is a specific VS Code concept. The idea is that forwarded ports look like localhost to the container. That makes it pretty easy to set up:

  1. Change VS Code settings:
    .vscode/settings.json
    {
      "remote.localPortHost": "allInterfaces"
    }
  2. Restart your server process in the container. For Astro, for example, this would be:
    Terminal window
    npm run dev

Publishing

This is just plain Docker:

  1. Change Dev Container settings:
    .devcontainer/devcontainer.json
    {
      "appPort": ["4321"]
    }
  2. Adjust the scripts in the package.json to make processes listen to all addresses. For Astro, for example, this would be:
    package.json
    {
      "scripts": {
        "dev": "astro dev"
        "dev": "astro dev --host"
      }
    }
  3. Rebuild Dev Container

GitHub Codespaces

GitHub Codespaces does automatic forwarding for us, without the need to configure any of the settings mentioned above.

Browser support: If you are wondering why your application preview won’t show up in Chromium: It just does not work at the moment.

The officially supported browsers are Chrome, Edge, Firefox and Safari.

Tags

#astro #devcontainer #docker #dx #vscode