Codespaces can become a game changer

Codespaces can become a game changer

TLDR: I’m very impressed about how easy it is to set up and to use!

Codespaces is a remote container that can be configured for your needs and that includes VSCode to start implementing instantly. The nice part: you can start your apps remotely and get a remote port to check the result. Every runs remotely so the only requirement is a Browser (and of course a Github account).

By creating a devcontainer.json in a folder called .devcontainer you can customize the created container per repository.

Here’s a simple config I used for a frontend react application:

{
  "name": "Default Linux Universal",
  "image": "mcr.microsoft.com/devcontainers/universal:2-linux",
  "updateContentCommand": "pnpm i",
  "customizations": {
    "vscode": {
      "extensions": [
        "esbenp.prettier-vscode",
        "dbaeumer.vscode-eslint",
        "oderwat.indent-rainbow",
        "dracula-theme.theme-dracula",
        "ms-vsliveshare.vsliveshare"
      ],
      "settings": {
        "workbench.colorTheme": "Dracula"
      }
    }
  },

  "features": {
    "ghcr.io/devcontainers/features/node": "18.18.0"
  }
}

As you can see you can auto customize VSCode as well:

Personally I prefer to use a locally configured VSCode, but I see some use cases where it’s a super nice use case:

In all cases the user does not have to set up anything locally, because in this case the Codespace provides a working environment including git, node and all dependencies. The use just needs to do the changes and can start the application to see the outcome.

github codespaces
Published on 2023-10-13, last updated on 2024-04-21 by Adam
Comments or questions? Open a new discussion on github.
Adam Urban

Adam Urban is fullstack engineer, loves serverless and generative art, and is building side projects like weeklyfoo.com, flethy.com and diypunks.xyz in his free time.