Enhanced Astro codespace support (#6288)

* Enhanced Astro codespace support

Enhances the base devcontainer and Dockerfile to provide a smoother
development experience out of the box for contributors.

Adds a devcontainer per example so that we can add buttons on astro.new
that will launch users straight into the appropriate example app.

* Cleanup devcontainers and pin base image

* Update .devcontainer/example-welcome-message.txt

Co-authored-by: Samruddhi Khandale <skhandale@microsoft.com>

---------

Co-authored-by: Samruddhi Khandale <skhandale@microsoft.com>

.devcontainer/Dockerfile

@@ -0,0 +1,17 @@
+FROM mcr.microsoft.com/devcontainers/javascript-node:0-18
+
+# Install playwright
+RUN npm install -g @playwright/test
+
+# Install latest pnpm
+RUN npm install -g pnpm
+
+# Install deno
+ENV DENO_INSTALL=/usr/local
+RUN curl -fsSL https://deno.land/x/install/install.sh | sh
+
+RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
+    && curl -sSL https://dl.google.com/linux/direct/google-chrome-stable_current_$(dpkg --print-architecture).deb -o /tmp/chrome.deb \
+    && apt-get -y install /tmp/chrome.deb
+
+COPY welcome-message.txt /usr/local/etc/vscode-dev-containers/first-run-notice.txt

.devcontainer/basics/devcontainer.json

@@ -0,0 +1,40 @@
+{
+    "name": "Astro Examples",
+    "build": {
+      "dockerfile": "../examples.Dockerfile"
+    },
+
+    "workspaceFolder": "/workspaces/astro/examples/basics",
+
+    "portsAttributes": {
+      "3000": {
+        "label": "Application",
+        "onAutoForward": "openPreview"
+      }
+    },
+  
+    "forwardPorts": [3000],
+  
+    "postCreateCommand": "pnpm install && cd /workspaces/astro && pnpm run build",
+  
+    "waitFor": "postCreateCommand",
+  
+    "postAttachCommand": {
+      "Server": "pnpm start --host"
+    },
+  
+    "customizations": {
+      "codespaces": {
+        "openFiles": [
+          "src/pages/index.astro"
+        ]
+      },
+      "vscode": {
+        "extensions": [
+          "astro-build.astro-vscode",
+          "esbenp.prettier-vscode"
+        ]
+      }
+    }
+  }
+  

.devcontainer/blog/devcontainer.json

@@ -0,0 +1,40 @@
+{
+    "name": "Astro Examples",
+    "build": {
+      "dockerfile": "../examples.Dockerfile"
+    },
+
+    "workspaceFolder": "/workspaces/astro/examples/blog",
+
+    "portsAttributes": {
+      "3000": {
+        "label": "Application",
+        "onAutoForward": "openPreview"
+      }
+    },
+  
+    "forwardPorts": [3000],
+  
+    "postCreateCommand": "pnpm install && cd /workspaces/astro && pnpm run build",
+  
+    "waitFor": "postCreateCommand",
+  
+    "postAttachCommand": {
+      "Server": "pnpm start --host"
+    },
+  
+    "customizations": {
+      "codespaces": {
+        "openFiles": [
+          "src/pages/index.astro"
+        ]
+      },
+      "vscode": {
+        "extensions": [
+          "astro-build.astro-vscode",
+          "esbenp.prettier-vscode"
+        ]
+      }
+    }
+  }
+  

.devcontainer/component/devcontainer.json

@@ -0,0 +1,27 @@
+{
+    "name": "Astro Examples",
+    "build": {
+      "dockerfile": "../examples.Dockerfile"
+    },
+
+    "workspaceFolder": "/workspaces/astro/examples/component",
+  
+    "postCreateCommand": "pnpm install && cd /workspaces/astro && pnpm run build",
+  
+    "waitFor": "postCreateCommand",
+  
+    "customizations": {
+      "codespaces": {
+        "openFiles": [
+          "src/MyComponent.astro"
+        ]
+      },
+      "vscode": {
+        "extensions": [
+          "astro-build.astro-vscode",
+          "esbenp.prettier-vscode"
+        ]
+      }
+    }
+  }
+  

.devcontainer/deno/devcontainer.json

@@ -0,0 +1,40 @@
+{
+    "name": "Astro Examples",
+    "build": {
+      "dockerfile": "../examples.deno.Dockerfile"
+    },
+
+    "workspaceFolder": "/workspaces/astro/examples/deno",
+
+    "portsAttributes": {
+      "3000": {
+        "label": "Application",
+        "onAutoForward": "openPreview"
+      }
+    },
+  
+    "forwardPorts": [3000],
+  
+    "postCreateCommand": "pnpm install && cd /workspaces/astro && pnpm run build",
+  
+    "waitFor": "postCreateCommand",
+  
+    "postAttachCommand": {
+      "Server": "pnpm start --host"
+    },
+  
+    "customizations": {
+      "codespaces": {
+        "openFiles": [
+          "src/pages/index.astro"
+        ]
+      },
+      "vscode": {
+        "extensions": [
+          "astro-build.astro-vscode",
+          "esbenp.prettier-vscode"
+        ]
+      }
+    }
+  }
+  

.devcontainer/devcontainer.json

@@ -1,26 +1,33 @@
-// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
-// https://github.com/microsoft/vscode-dev-containers/tree/v0.238.1/containers/docker-existing-dockerfile
 {
   "name": "Contribute to Astro CodeSpaces",
+  "build": {
+    "dockerfile": "Dockerfile"
+  },
 
-  // Sets the run context to one level up instead of the .devcontainer folder.
+  "features": {
-  "context": "..",
+    "ghcr.io/devcontainers/features/desktop-lite:1": {}
+  },
 
-  // Update the 'dockerFile' property if you aren't using the standard 'Dockerfile' filename.
+  "postCreateCommand": "pnpm install && pnpm run build",
-  "dockerFile": "../.Dockerfile",
 
-  // Use 'forwardPorts' to make a list of ports inside the container available locally.
+  "waitFor": "postCreateCommand",
-  // "forwardPorts": [],
 
-  // Uncomment the next line to run commands after the container is created - for example installing curl.
+  "postAttachCommand": {
-  "postCreateCommand": "pnpm install"
+    "Astro tests": "pnpm run test"
+  },
 
-  // Uncomment when using a ptrace-based debugger like C++, Go, and Rust
+  "customizations": {
-  // "runArgs": [ "--cap-add=SYS_PTRACE", "--security-opt", "seccomp=unconfined" ],
+    "codespaces": {
-
+      "openFiles": [
-  // Uncomment to use the Docker CLI from inside the container. See https://aka.ms/vscode-remote/samples/docker-from-docker.
+        "README.md",
-  // "mounts": [ "source=/var/run/docker.sock,target=/var/run/docker.sock,type=bind" ],
+        "CONTRIBUTING.md"
-
+      ]
-  // Uncomment to connect as a non-root user if you've added one. See https://aka.ms/vscode-remote/containers/non-root.
+    },
-  // "remoteUser": "vscode"
+    "vscode": {
+      "extensions": [
+        "astro-build.astro-vscode",
+        "esbenp.prettier-vscode"
+      ]
+    }
+  }
 }

.devcontainer/docs/devcontainer.json

@@ -0,0 +1,40 @@
+{
+    "name": "Astro Examples",
+    "build": {
+      "dockerfile": "../examples.Dockerfile"
+    },
+
+    "workspaceFolder": "/workspaces/astro/examples/docs",
+
+    "portsAttributes": {
+      "3000": {
+        "label": "Application",
+        "onAutoForward": "openPreview"
+      }
+    },
+  
+    "forwardPorts": [3000],
+  
+    "postCreateCommand": "pnpm install && cd /workspaces/astro && pnpm run build",
+  
+    "waitFor": "postCreateCommand",
+  
+    "postAttachCommand": {
+      "Server": "pnpm start --host"
+    },
+  
+    "customizations": {
+      "codespaces": {
+        "openFiles": [
+          "src/pages/index.astro"
+        ]
+      },
+      "vscode": {
+        "extensions": [
+          "astro-build.astro-vscode",
+          "esbenp.prettier-vscode"
+        ]
+      }
+    }
+  }
+  

.devcontainer/example-welcome-message.txt

@@ -0,0 +1,5 @@
+👋 Welcome to "Astro" in GitHub Codespaces!
+
+🛠️  Your environment is fully setup with all the required software.
+
+🚀 The example app should automatically start soon in a new terminal tab.

.devcontainer/examples.Dockerfile

@@ -0,0 +1,6 @@
+FROM mcr.microsoft.com/devcontainers/javascript-node:0-18
+
+# Install latest pnpm
+RUN npm install -g pnpm
+
+COPY example-welcome-message.txt /usr/local/etc/vscode-dev-containers/first-run-notice.txt

.devcontainer/examples.deno.Dockerfile

@@ -0,0 +1,10 @@
+FROM mcr.microsoft.com/devcontainers/javascript-node:0-18
+
+# Install latest pnpm
+RUN npm install -g pnpm
+
+# Install deno
+ENV DENO_INSTALL=/usr/local
+RUN curl -fsSL https://deno.land/x/install/install.sh | sh
+
+COPY example-welcome-message.txt /usr/local/etc/vscode-dev-containers/first-run-notice.txt

.devcontainer/framework-alpine/devcontainer.json

@@ -0,0 +1,40 @@
+{
+    "name": "Astro Examples",
+    "build": {
+      "dockerfile": "../examples.Dockerfile"
+    },
+
+    "workspaceFolder": "/workspaces/astro/examples/framework-alpine",
+
+    "portsAttributes": {
+      "3000": {
+        "label": "Application",
+        "onAutoForward": "openPreview"
+      }
+    },
+  
+    "forwardPorts": [3000],
+  
+    "postCreateCommand": "pnpm install && cd /workspaces/astro && pnpm run build",
+  
+    "waitFor": "postCreateCommand",
+  
+    "postAttachCommand": {
+      "Server": "pnpm start --host"
+    },
+  
+    "customizations": {
+      "codespaces": {
+        "openFiles": [
+          "src/pages/index.astro"
+        ]
+      },
+      "vscode": {
+        "extensions": [
+          "astro-build.astro-vscode",
+          "esbenp.prettier-vscode"
+        ]
+      }
+    }
+  }
+  

.devcontainer/framework-lit/devcontainer.json

@@ -0,0 +1,40 @@
+{
+    "name": "Astro Examples",
+    "build": {
+      "dockerfile": "../examples.Dockerfile"
+    },
+
+    "workspaceFolder": "/workspaces/astro/examples/framework-lit",
+
+    "portsAttributes": {
+      "3000": {
+        "label": "Application",
+        "onAutoForward": "openPreview"
+      }
+    },
+  
+    "forwardPorts": [3000],
+  
+    "postCreateCommand": "pnpm install && cd /workspaces/astro && pnpm run build",
+  
+    "waitFor": "postCreateCommand",
+  
+    "postAttachCommand": {
+      "Server": "pnpm start --host"
+    },
+  
+    "customizations": {
+      "codespaces": {
+        "openFiles": [
+          "src/pages/index.astro"
+        ]
+      },
+      "vscode": {
+        "extensions": [
+          "astro-build.astro-vscode",
+          "esbenp.prettier-vscode"
+        ]
+      }
+    }
+  }
+  

.devcontainer/framework-multiple/devcontainer.json

@@ -0,0 +1,40 @@
+{
+    "name": "Astro Examples",
+    "build": {
+      "dockerfile": "../examples.Dockerfile"
+    },
+
+    "workspaceFolder": "/workspaces/astro/examples/framework-multiple",
+
+    "portsAttributes": {
+      "3000": {
+        "label": "Application",
+        "onAutoForward": "openPreview"
+      }
+    },
+  
+    "forwardPorts": [3000],
+  
+    "postCreateCommand": "pnpm install && cd /workspaces/astro && pnpm run build",
+  
+    "waitFor": "postCreateCommand",
+  
+    "postAttachCommand": {
+      "Server": "pnpm start --host"
+    },
+  
+    "customizations": {
+      "codespaces": {
+        "openFiles": [
+          "src/pages/index.astro"
+        ]
+      },
+      "vscode": {
+        "extensions": [
+          "astro-build.astro-vscode",
+          "esbenp.prettier-vscode"
+        ]
+      }
+    }
+  }
+  

.devcontainer/framework-preact/devcontainer.json

@@ -0,0 +1,40 @@
+{
+    "name": "Astro Examples",
+    "build": {
+      "dockerfile": "../examples.Dockerfile"
+    },
+
+    "workspaceFolder": "/workspaces/astro/examples/framework-preact",
+
+    "portsAttributes": {
+      "3000": {
+        "label": "Application",
+        "onAutoForward": "openPreview"
+      }
+    },
+  
+    "forwardPorts": [3000],
+  
+    "postCreateCommand": "pnpm install && cd /workspaces/astro && pnpm run build",
+  
+    "waitFor": "postCreateCommand",
+  
+    "postAttachCommand": {
+      "Server": "pnpm start --host"
+    },
+  
+    "customizations": {
+      "codespaces": {
+        "openFiles": [
+          "src/pages/index.astro"
+        ]
+      },
+      "vscode": {
+        "extensions": [
+          "astro-build.astro-vscode",
+          "esbenp.prettier-vscode"
+        ]
+      }
+    }
+  }
+  

.devcontainer/framework-react/devcontainer.json

@@ -0,0 +1,40 @@
+{
+    "name": "Astro Examples",
+    "build": {
+      "dockerfile": "../examples.Dockerfile"
+    },
+
+    "workspaceFolder": "/workspaces/astro/examples/framework-react",
+
+    "portsAttributes": {
+      "3000": {
+        "label": "Application",
+        "onAutoForward": "openPreview"
+      }
+    },
+  
+    "forwardPorts": [3000],
+  
+    "postCreateCommand": "pnpm install && cd /workspaces/astro && pnpm run build",
+  
+    "waitFor": "postCreateCommand",
+  
+    "postAttachCommand": {
+      "Server": "pnpm start --host"
+    },
+  
+    "customizations": {
+      "codespaces": {
+        "openFiles": [
+          "src/pages/index.astro"
+        ]
+      },
+      "vscode": {
+        "extensions": [
+          "astro-build.astro-vscode",
+          "esbenp.prettier-vscode"
+        ]
+      }
+    }
+  }
+  

.devcontainer/framework-solid/devcontainer.json

@@ -0,0 +1,40 @@
+{
+    "name": "Astro Examples",
+    "build": {
+      "dockerfile": "../examples.Dockerfile"
+    },
+
+    "workspaceFolder": "/workspaces/astro/examples/framework-solid",
+
+    "portsAttributes": {
+      "3000": {
+        "label": "Application",
+        "onAutoForward": "openPreview"
+      }
+    },
+  
+    "forwardPorts": [3000],
+  
+    "postCreateCommand": "pnpm install && cd /workspaces/astro && pnpm run build",
+  
+    "waitFor": "postCreateCommand",
+  
+    "postAttachCommand": {
+      "Server": "pnpm start --host"
+    },
+  
+    "customizations": {
+      "codespaces": {
+        "openFiles": [
+          "src/pages/index.astro"
+        ]
+      },
+      "vscode": {
+        "extensions": [
+          "astro-build.astro-vscode",
+          "esbenp.prettier-vscode"
+        ]
+      }
+    }
+  }
+  

.devcontainer/framework-svelte/devcontainer.json

@@ -0,0 +1,40 @@
+{
+    "name": "Astro Examples",
+    "build": {
+      "dockerfile": "../examples.Dockerfile"
+    },
+
+    "workspaceFolder": "/workspaces/astro/examples/framework-svelte",
+
+    "portsAttributes": {
+      "3000": {
+        "label": "Application",
+        "onAutoForward": "openPreview"
+      }
+    },
+  
+    "forwardPorts": [3000],
+  
+    "postCreateCommand": "pnpm install && cd /workspaces/astro && pnpm run build",
+  
+    "waitFor": "postCreateCommand",
+  
+    "postAttachCommand": {
+      "Server": "pnpm start --host"
+    },
+  
+    "customizations": {
+      "codespaces": {
+        "openFiles": [
+          "src/pages/index.astro"
+        ]
+      },
+      "vscode": {
+        "extensions": [
+          "astro-build.astro-vscode",
+          "esbenp.prettier-vscode"
+        ]
+      }
+    }
+  }
+  

.devcontainer/framework-vue/devcontainer.json

@@ -0,0 +1,40 @@
+{
+    "name": "Astro Examples",
+    "build": {
+      "dockerfile": "../examples.Dockerfile"
+    },
+
+    "workspaceFolder": "/workspaces/astro/examples/framework-vue",
+
+    "portsAttributes": {
+      "3000": {
+        "label": "Application",
+        "onAutoForward": "openPreview"
+      }
+    },
+  
+    "forwardPorts": [3000],
+  
+    "postCreateCommand": "pnpm install && cd /workspaces/astro && pnpm run build",
+  
+    "waitFor": "postCreateCommand",
+  
+    "postAttachCommand": {
+      "Server": "pnpm start --host"
+    },
+  
+    "customizations": {
+      "codespaces": {
+        "openFiles": [
+          "src/pages/index.astro"
+        ]
+      },
+      "vscode": {
+        "extensions": [
+          "astro-build.astro-vscode",
+          "esbenp.prettier-vscode"
+        ]
+      }
+    }
+  }
+  

.devcontainer/hackernews/devcontainer.json

@@ -0,0 +1,40 @@
+{
+    "name": "Astro Examples",
+    "build": {
+      "dockerfile": "../examples.Dockerfile"
+    },
+
+    "workspaceFolder": "/workspaces/astro/examples/hackernews",
+
+    "portsAttributes": {
+      "3000": {
+        "label": "Application",
+        "onAutoForward": "openPreview"
+      }
+    },
+  
+    "forwardPorts": [3000],
+  
+    "postCreateCommand": "pnpm install && cd /workspaces/astro && pnpm run build",
+  
+    "waitFor": "postCreateCommand",
+  
+    "postAttachCommand": {
+      "Server": "pnpm start --host"
+    },
+  
+    "customizations": {
+      "codespaces": {
+        "openFiles": [
+          "src/pages/[...stories].astro"
+        ]
+      },
+      "vscode": {
+        "extensions": [
+          "astro-build.astro-vscode",
+          "esbenp.prettier-vscode"
+        ]
+      }
+    }
+  }
+  

.devcontainer/integration/devcontainer.json

@@ -0,0 +1,27 @@
+{
+    "name": "Astro Examples",
+    "build": {
+      "dockerfile": "../examples.Dockerfile"
+    },
+
+    "workspaceFolder": "/workspaces/astro/examples/integration",
+  
+    "postCreateCommand": "pnpm install && cd /workspaces/astro && pnpm run build",
+  
+    "waitFor": "postCreateCommand",
+  
+    "customizations": {
+      "codespaces": {
+        "openFiles": [
+          "index.ts"
+        ]
+      },
+      "vscode": {
+        "extensions": [
+          "astro-build.astro-vscode",
+          "esbenp.prettier-vscode"
+        ]
+      }
+    }
+  }
+  

.devcontainer/minimal/devcontainer.json

@@ -0,0 +1,40 @@
+{
+    "name": "Astro Examples",
+    "build": {
+      "dockerfile": "../examples.Dockerfile"
+    },
+
+    "workspaceFolder": "/workspaces/astro/examples/minimal",
+
+    "portsAttributes": {
+      "3000": {
+        "label": "Application",
+        "onAutoForward": "openPreview"
+      }
+    },
+  
+    "forwardPorts": [3000],
+  
+    "postCreateCommand": "pnpm install && cd /workspaces/astro && pnpm run build",
+  
+    "waitFor": "postCreateCommand",
+  
+    "postAttachCommand": {
+      "Server": "pnpm start --host"
+    },
+  
+    "customizations": {
+      "codespaces": {
+        "openFiles": [
+          "src/pages/index.astro"
+        ]
+      },
+      "vscode": {
+        "extensions": [
+          "astro-build.astro-vscode",
+          "esbenp.prettier-vscode"
+        ]
+      }
+    }
+  }
+  

.devcontainer/non-html-pages/devcontainer.json

@@ -0,0 +1,40 @@
+{
+    "name": "Astro Examples",
+    "build": {
+      "dockerfile": "../examples.Dockerfile"
+    },
+
+    "workspaceFolder": "/workspaces/astro/examples/non-html-pages",
+
+    "portsAttributes": {
+      "3000": {
+        "label": "Application",
+        "onAutoForward": "openPreview"
+      }
+    },
+  
+    "forwardPorts": [3000],
+  
+    "postCreateCommand": "pnpm install && cd /workspaces/astro && pnpm run build",
+  
+    "waitFor": "postCreateCommand",
+  
+    "postAttachCommand": {
+      "Server": "pnpm start --host"
+    },
+  
+    "customizations": {
+      "codespaces": {
+        "openFiles": [
+          "src/pages/index.astro"
+        ]
+      },
+      "vscode": {
+        "extensions": [
+          "astro-build.astro-vscode",
+          "esbenp.prettier-vscode"
+        ]
+      }
+    }
+  }
+  

.devcontainer/portfolio/devcontainer.json

@@ -0,0 +1,40 @@
+{
+    "name": "Astro Examples",
+    "build": {
+      "dockerfile": "../examples.Dockerfile"
+    },
+
+    "workspaceFolder": "/workspaces/astro/examples/portfolio",
+
+    "portsAttributes": {
+      "3000": {
+        "label": "Application",
+        "onAutoForward": "openPreview"
+      }
+    },
+  
+    "forwardPorts": [3000],
+  
+    "postCreateCommand": "pnpm install && cd /workspaces/astro && pnpm run build",
+  
+    "waitFor": "postCreateCommand",
+  
+    "postAttachCommand": {
+      "Server": "pnpm start --host"
+    },
+  
+    "customizations": {
+      "codespaces": {
+        "openFiles": [
+          "src/pages/index.astro"
+        ]
+      },
+      "vscode": {
+        "extensions": [
+          "astro-build.astro-vscode",
+          "esbenp.prettier-vscode"
+        ]
+      }
+    }
+  }
+  

.devcontainer/ssr/devcontainer.json

@@ -0,0 +1,40 @@
+{
+    "name": "Astro Examples",
+    "build": {
+      "dockerfile": "../examples.Dockerfile"
+    },
+
+    "workspaceFolder": "/workspaces/astro/examples/ssr",
+
+    "portsAttributes": {
+      "3000": {
+        "label": "Application",
+        "onAutoForward": "openPreview"
+      }
+    },
+  
+    "forwardPorts": [3000],
+  
+    "postCreateCommand": "pnpm install && cd /workspaces/astro && pnpm run build",
+  
+    "waitFor": "postCreateCommand",
+  
+    "postAttachCommand": {
+      "Server": "pnpm start --host"
+    },
+  
+    "customizations": {
+      "codespaces": {
+        "openFiles": [
+          "src/pages/index.astro"
+        ]
+      },
+      "vscode": {
+        "extensions": [
+          "astro-build.astro-vscode",
+          "esbenp.prettier-vscode"
+        ]
+      }
+    }
+  }
+  

.devcontainer/welcome-message.txt

@@ -0,0 +1,4 @@
+👋 Welcome to Astro!
+
+🛠️ Your environment is fully setup with all required software installed. Tests will
+   be running shortly in a separate terminal tab.

.devcontainer/with-markdown-plugins/devcontainer.json

@@ -0,0 +1,40 @@
+{
+    "name": "Astro Examples",
+    "build": {
+      "dockerfile": "../examples.Dockerfile"
+    },
+
+    "workspaceFolder": "/workspaces/astro/examples/with-markdown-plugins",
+
+    "portsAttributes": {
+      "3000": {
+        "label": "Application",
+        "onAutoForward": "openPreview"
+      }
+    },
+  
+    "forwardPorts": [3000],
+  
+    "postCreateCommand": "pnpm install && cd /workspaces/astro && pnpm run build",
+  
+    "waitFor": "postCreateCommand",
+  
+    "postAttachCommand": {
+      "Server": "pnpm start --host"
+    },
+  
+    "customizations": {
+      "codespaces": {
+        "openFiles": [
+          "src/pages/index.md"
+        ]
+      },
+      "vscode": {
+        "extensions": [
+          "astro-build.astro-vscode",
+          "esbenp.prettier-vscode"
+        ]
+      }
+    }
+  }
+  

.devcontainer/with-markdown-shiki/devcontainer.json

@@ -0,0 +1,40 @@
+{
+    "name": "Astro Examples",
+    "build": {
+      "dockerfile": "../examples.Dockerfile"
+    },
+
+    "workspaceFolder": "/workspaces/astro/examples/with-markdown-shiki",
+
+    "portsAttributes": {
+      "3000": {
+        "label": "Application",
+        "onAutoForward": "openPreview"
+      }
+    },
+  
+    "forwardPorts": [3000],
+  
+    "postCreateCommand": "pnpm install && cd /workspaces/astro && pnpm run build",
+  
+    "waitFor": "postCreateCommand",
+  
+    "postAttachCommand": {
+      "Server": "pnpm start --host"
+    },
+  
+    "customizations": {
+      "codespaces": {
+        "openFiles": [
+          "src/pages/index.md"
+        ]
+      },
+      "vscode": {
+        "extensions": [
+          "astro-build.astro-vscode",
+          "esbenp.prettier-vscode"
+        ]
+      }
+    }
+  }
+  

.devcontainer/with-mdx/devcontainer.json

@@ -0,0 +1,40 @@
+{
+    "name": "Astro Examples",
+    "build": {
+      "dockerfile": "../examples.Dockerfile"
+    },
+
+    "workspaceFolder": "/workspaces/astro/examples/with-mdx",
+
+    "portsAttributes": {
+      "3000": {
+        "label": "Application",
+        "onAutoForward": "openPreview"
+      }
+    },
+  
+    "forwardPorts": [3000],
+  
+    "postCreateCommand": "pnpm install && cd /workspaces/astro && pnpm run build",
+  
+    "waitFor": "postCreateCommand",
+  
+    "postAttachCommand": {
+      "Server": "pnpm start --host"
+    },
+  
+    "customizations": {
+      "codespaces": {
+        "openFiles": [
+          "src/pages/index.mdx"
+        ]
+      },
+      "vscode": {
+        "extensions": [
+          "astro-build.astro-vscode",
+          "esbenp.prettier-vscode"
+        ]
+      }
+    }
+  }
+  

.devcontainer/with-nanostores/devcontainer.json

@@ -0,0 +1,40 @@
+{
+    "name": "Astro Examples",
+    "build": {
+      "dockerfile": "../examples.Dockerfile"
+    },
+
+    "workspaceFolder": "/workspaces/astro/examples/with-nanostores",
+
+    "portsAttributes": {
+      "3000": {
+        "label": "Application",
+        "onAutoForward": "openPreview"
+      }
+    },
+  
+    "forwardPorts": [3000],
+  
+    "postCreateCommand": "pnpm install && cd /workspaces/astro && pnpm run build",
+  
+    "waitFor": "postCreateCommand",
+  
+    "postAttachCommand": {
+      "Server": "pnpm start --host"
+    },
+  
+    "customizations": {
+      "codespaces": {
+        "openFiles": [
+          "src/pages/index.astro"
+        ]
+      },
+      "vscode": {
+        "extensions": [
+          "astro-build.astro-vscode",
+          "esbenp.prettier-vscode"
+        ]
+      }
+    }
+  }
+  

.devcontainer/with-tailwindcss/devcontainer.json

@@ -0,0 +1,40 @@
+{
+    "name": "Astro Examples",
+    "build": {
+      "dockerfile": "../examples.Dockerfile"
+    },
+
+    "workspaceFolder": "/workspaces/astro/examples/with-tailwindcss",
+
+    "portsAttributes": {
+      "3000": {
+        "label": "Application",
+        "onAutoForward": "openPreview"
+      }
+    },
+  
+    "forwardPorts": [3000],
+  
+    "postCreateCommand": "pnpm install && cd /workspaces/astro && pnpm run build",
+  
+    "waitFor": "postCreateCommand",
+  
+    "postAttachCommand": {
+      "Server": "pnpm start --host"
+    },
+  
+    "customizations": {
+      "codespaces": {
+        "openFiles": [
+          "src/pages/index.astro"
+        ]
+      },
+      "vscode": {
+        "extensions": [
+          "astro-build.astro-vscode",
+          "esbenp.prettier-vscode"
+        ]
+      }
+    }
+  }
+  

.devcontainer/with-vite-plugin-pwa/devcontainer.json

@@ -0,0 +1,40 @@
+{
+    "name": "Astro Examples",
+    "build": {
+      "dockerfile": "../examples.Dockerfile"
+    },
+
+    "workspaceFolder": "/workspaces/astro/examples/with-vite-plugin-pwa",
+
+    "portsAttributes": {
+      "3000": {
+        "label": "Application",
+        "onAutoForward": "openPreview"
+      }
+    },
+  
+    "forwardPorts": [3000],
+  
+    "postCreateCommand": "pnpm install && cd /workspaces/astro && pnpm run build",
+  
+    "waitFor": "postCreateCommand",
+  
+    "postAttachCommand": {
+      "Server": "pnpm start --host"
+    },
+  
+    "customizations": {
+      "codespaces": {
+        "openFiles": [
+          "src/pages/index.astro"
+        ]
+      },
+      "vscode": {
+        "extensions": [
+          "astro-build.astro-vscode",
+          "esbenp.prettier-vscode"
+        ]
+      }
+    }
+  }
+  

.devcontainer/with-vitest/devcontainer.json

@@ -0,0 +1,40 @@
+{
+    "name": "Astro Examples",
+    "build": {
+      "dockerfile": "../examples.Dockerfile"
+    },
+
+    "workspaceFolder": "/workspaces/astro/examples/with-vitest",
+
+    "portsAttributes": {
+      "3000": {
+        "label": "Application",
+        "onAutoForward": "openPreview"
+      }
+    },
+  
+    "forwardPorts": [3000],
+  
+    "postCreateCommand": "pnpm install && cd /workspaces/astro && pnpm run build",
+  
+    "waitFor": "postCreateCommand",
+  
+    "postAttachCommand": {
+      "Server": "pnpm start --host"
+    },
+  
+    "customizations": {
+      "codespaces": {
+        "openFiles": [
+          "src/pages/index.astro"
+        ]
+      },
+      "vscode": {
+        "extensions": [
+          "astro-build.astro-vscode",
+          "esbenp.prettier-vscode"
+        ]
+      }
+    }
+  }
+  

CONTRIBUTING.md

@@ -38,6 +38,16 @@ pnpm add -g @pnpm/merge-driver
 pnpx npm-merge-driver install --driver-name pnpm-merge-driver --driver "pnpm-merge-driver %A %O %B %P" --files pnpm-lock.yaml
 ```
 
+### Using GitHub Codespaces for development
+
+To get started, create a codespace for this repository by clicking this 👇 
+
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro)
+
+Your new codespace will open in a web-based version of Visual Studio Code. All development dependcies will be preinstalled and the tests will run automatically ensuring you've got a green base from which to start working.
+
+**Note**: Dev containers is now an open spec which is supported by [GitHub Codespaces](https://github.com/codespaces) and [other supporting tools](https://containers.dev/supporting).
+
 ### Development
 
 ```shell

examples/basics/README.md

@@ -6,6 +6,7 @@ npm create astro@latest -- --template basics
 
 [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
 [![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=/.devcontainer/basics/devcontainer.json)
 
 > 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
 

examples/blog/README.md

@@ -6,6 +6,7 @@ npm create astro@latest -- --template blog
 
 [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/blog)
 [![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/blog)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=/.devcontainer/blog/devcontainer.json)
 
 > 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
 

examples/component/README.md

@@ -8,6 +8,7 @@ npm create astro@latest -- --template component
 
 [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/non-html-pages)
 [![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/non-html-pages)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=/.devcontainer/component/devcontainer.json)
 
 
 ## 🚀 Project Structure

examples/deno/README.md

@@ -2,6 +2,7 @@
 
 [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/deno)
 [![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/deno)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=/.devcontainer/deno/devcontainer.json)
 
 ```
 npm create astro@latest -- --template deno

examples/docs/README.md

@@ -6,6 +6,7 @@ npm create astro@latest -- --template docs
 
 [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/docs)
 [![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/docs)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=/.devcontainer/docs/devcontainer.json)
 
 > 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
 

examples/framework-alpine/README.md

@@ -6,6 +6,7 @@ npm create astro@latest -- --template framework-alpine
 
 [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/framework-alpine)
 [![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/framework-alpine)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=/.devcontainer/framework-alpine/devcontainer.json)
 
 This example showcases Astro working with [AlpineJS](https://alpinejs.dev/).
 

examples/framework-lit/README.md

@@ -6,5 +6,6 @@ npm create astro@latest -- --template framework-lit
 
 [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/framework-lit)
 [![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/framework-lit)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=/.devcontainer/framework-lit/devcontainer.json)
 
 This example showcases Astro working with [Lit](https://lit.dev/).

examples/framework-multiple/README.md

@@ -6,6 +6,7 @@ npm create astro@latest -- --template framework-multiple
 
 [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/framework-multiple)
 [![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/framework-multiple)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=/.devcontainer/framework-multiple/devcontainer.json)
 
 This example showcases Astro's built-in support for multiple frameworks ([React](https://reactjs.org), [Preact](https://preactjs.com), [Svelte](https://svelte.dev), and [Vue (`v3.x`)](https://v3.vuejs.org/)).
 

examples/framework-preact/README.md

@@ -6,6 +6,7 @@ npm create astro@latest -- --template framework-preact
 
 [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/framework-preact)
 [![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/framework-preact)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=/.devcontainer/framework-preact/devcontainer.json)
 
 This example showcases Astro working with [Preact](https://preactjs.com).
 

examples/framework-react/README.md

@@ -6,6 +6,7 @@ npm create astro@latest -- --template framework-react
 
 [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/framework-react)
 [![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/framework-react)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=/.devcontainer/framework-react/devcontainer.json)
 
 This example showcases Astro working with [React](https://reactjs.org/).
 

examples/framework-solid/README.md

@@ -6,6 +6,7 @@ npm create astro@latest -- --template framework-solid
 
 [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/framework-solid)
 [![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/framework-solid)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=/.devcontainer/framework-solid/devcontainer.json)
 
 This example showcases Astro working with [Solid](https://www.solidjs.com/).
 

examples/framework-svelte/README.md

@@ -6,5 +6,6 @@ npm create astro@latest -- --template framework-svelte
 
 [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/framework-svelte)
 [![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/framework-svelte)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=/.devcontainer/framework-svelte/devcontainer.json)
 
 This example showcases Astro working with [Svelte](https://svelte.dev/).

examples/framework-vue/README.md

@@ -6,6 +6,7 @@ npm create astro@latest -- --template framework-vue
 
 [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/framework-vue)
 [![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/framework-vue)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=/.devcontainer/framework-vue/devcontainer.json)
 
 This example showcases Astro working with [Vue](https://v3.vuejs.org/).
 

examples/hackernews/README.md

@@ -6,6 +6,7 @@ npm create astro@latest -- --template hackernews
 
 [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/hackernews)
 [![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/hackernews)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=/.devcontainer/hackernews/devcontainer.json)
 
 > 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
 

examples/integration/README.md

@@ -8,6 +8,7 @@ npm create astro@latest -- --template integration
 
 [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/integration)
 [![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/integration)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=/.devcontainer/integration/devcontainer.json)
 
 
 ## 🚀 Project Structure

examples/minimal/README.md

@@ -6,6 +6,7 @@ npm create astro@latest -- --template minimal
 
 [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/minimal)
 [![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/minimal)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=/.devcontainer/minimal/devcontainer.json)
 
 > 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
 

examples/non-html-pages/README.md

@@ -10,6 +10,7 @@ npm create astro@latest -- --template non-html-pages
 
 [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/non-html-pages)
 [![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/non-html-pages)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=/.devcontainer/non-html-pages/devcontainer.json)
 
 > 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
 

examples/portfolio/README.md

@@ -6,6 +6,7 @@ npm create astro@latest -- --template portfolio
 
 [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/portfolio)
 [![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/portfolio)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=/.devcontainer/portfolio/devcontainer.json)
 
 > 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
 

examples/with-markdown-plugins/README.md

@@ -6,5 +6,6 @@ npm create astro@latest -- --template with-markdown-plugins
 
 [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/with-markdown-plugins)
 [![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/with-markdown-plugins)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=/.devcontainer/with-markdown-plugins/devcontainer.json)
 
 This example showcases Astro's [built-in Markdown support](https://docs.astro.build/en/guides/markdown-content/) with additional, user-provided plugins.

examples/with-markdown-shiki/README.md

@@ -6,6 +6,7 @@ npm create astro@latest -- --template with-markdown-shiki
 
 [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/with-markdown-shiki)
 [![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/with-markdown-shiki)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=/.devcontainer/with-markdown-shiki/devcontainer.json)
 
 This example showcases Astro's [built-in Markdown support](https://docs.astro.build/en/guides/markdown-content/).
 

examples/with-mdx/README.md

@@ -6,5 +6,6 @@ npm create astro@latest -- --template with-mdx
 
 [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/with-mdx)
 [![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/with-mdx)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=/.devcontainer/with-mdx/devcontainer.json)
 
 This example showcases using [`@astrojs/mdx`](https://www.npmjs.com/package/@astrojs/mdx) to author content using [MDX](https://mdxjs.com/).

examples/with-nanostores/README.md

@@ -6,5 +6,6 @@ npm create astro@latest -- --template with-nanostores
 
 [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/with-nanostores)
 [![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/with-nanostores)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=/.devcontainer/with-nanostores/devcontainer.json)
 
 This example showcases using [`nanostores`](https://github.com/nanostores/nanostores) to provide shared state between components of any framework. [**Read our documentation on sharing state**](https://docs.astro.build/en/core-concepts/sharing-state/) for a complete breakdown of this project, along with guides to use React, Vue, Svelte, or Solid!

examples/with-tailwindcss/README.md

@@ -6,6 +6,7 @@ npm create astro@latest -- --template with-tailwindcss
 
 [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/with-tailwindcss)
 [![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/with-tailwindcss)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=/.devcontainer/with-tailwindcss/devcontainer.json)
 
 Astro comes with [Tailwind](https://tailwindcss.com) support out of the box. This example showcases how to style your Astro project with Tailwind.
 

examples/with-vite-plugin-pwa/README.md

@@ -6,6 +6,7 @@ npm create astro@latest -- --template with-vite-plugin-pwa
 
 [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/with-vite-plugin-pwa)
 [![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/with-vite-plugin-pwa)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=/.devcontainer/with-vite-plugin-pwa/devcontainer.json)
 
 > 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
 

examples/with-vitest/README.md

@@ -6,5 +6,6 @@ npm create astro@latest -- --template with-vitest
 
 [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/with-vitest)
 [![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/with-vitest)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=/.devcontainer/with-vitest/devcontainer.json)
 
 This example showcases Astro working with [Vitest](https://vitest.dev/).