Make a Dev Container

Sometimes I want to work on a project without devoting a bunch of local system resources to it. I want to fork the repo, mess around with it, and move on with my life. I don’t want to drag around the vestiges of some old project I thought was interesting for the rest of my laptop’s life.

Dev containers solve this problem for me and anyone else who wants to work on that project. Here are the steps I follow when preparing to contribute, to make a dev container so I’m not dragging around a gajillion npm deps on my local system.

Steps

1. Fork the repo. I like to include all the branches (not just main), cause you never know what you’re going to want
2. Make a new branch: add-devcontainer or some such
3. Open a private browser in VS Code (⌘ + Shift + N)
4. Run a command (⌘ + Shift + P): Dev Containers: Clone Repository in Container Volume...

• If you will need to access your repository's files directly (without a web server), clone your repository locally first, choose Dev Containers: Open Folder in Container...

5. Pick the right image. My sensible defaults:
   1. Node.js and Typescript
   2. Latest (currently, Feb 2025, that one’s named “bookworm”)
   3. No add-ons
   4. No dependabot
6. Do all the setup (npm install) and confirm you can actually connect to the dev server

If you can’t connect to your localhost dev server, it may be due to an issue with your container networking setup.

Here are some examples you can try if you're using Vite or Wrangler:

# Vite
npm run env -- vite --host

# Wrangler
npm run env -- wrangler pages dev --ip 127.0.0.1

If that fixes it, you can add a new npm scripts entry to your package.json (or update an existing one) to pass the --host flag. "dev:network" is a good name, and you can drop the npm run env -- part. Example:

"dev:network": "vite --host"

7. Open a PR to add your new dev container setup to the project