Using Dev Containers with Astro/Vite

Dominik Rüttiger

Dev Containers are amazing: everything you need to start working on a project is right there out of the box. OS libraries, language runtime, external dependencies, launch and debug configurations, IDE extensions, build tooling and databases.

I highly recommend Dev Containers especially for Node.js projects, since there is almost no performance penalty, unlike with Java projects, for example. However there is a really annoying bug when using them with VS Code. Unfortunately, nobody wants to fix it.

The bug

To reproduce this issue, start a Astro/Vite project in a VS Code Dev Container. Then, run npm run dev or hit F5. Finally open http://127.0.0.1:4321 in a browser. You will see: nothing.

It’s hard to believe that this is the current state.

Save your sanity

You have two options:

  1. In the Vite project file, e.g. astro.config.mjs or vite.config.js, add:
    astro.config.mjs
    export default defineConfig({
      server: {
        host: '127.0.0.1'
      }
    });

OR:

  1. In the package.json file’s run configuration add:
    package.json
    {
     "scripts": {
       "dev": "astro dev",
       "dev": "astro dev --host 127.0.0.1",
       "preview": "astro preview",
       "preview": "astro preview --host 127.0.0.1",
     }
    }

Issues

Tags

#astro #dev #devcontainer #docker #dx