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>

58 files changed, 1116 insertions, 18 deletions

diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile
new file mode 100644
index 000000000..de1541343
--- /dev/null
+++ b/.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
\ No newline at end of file
diff --git a/.devcontainer/basics/devcontainer.json b/.devcontainer/basics/devcontainer.json
new file mode 100644
index 000000000..e46548a8b
--- /dev/null
+++ b/.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"
+        ]
+      }
+    }
+  }
+  
\ No newline at end of file
diff --git a/.devcontainer/blog/devcontainer.json b/.devcontainer/blog/devcontainer.json
new file mode 100644
index 000000000..c75c2c156
--- /dev/null
+++ b/.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"
+        ]
+      }
+    }
+  }
+  
\ No newline at end of file
diff --git a/.devcontainer/component/devcontainer.json b/.devcontainer/component/devcontainer.json
new file mode 100644
index 000000000..b7ef11c6a
--- /dev/null
+++ b/.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"
+        ]
+      }
+    }
+  }
+  
\ No newline at end of file
diff --git a/.devcontainer/deno/devcontainer.json b/.devcontainer/deno/devcontainer.json
new file mode 100644
index 000000000..e7404e622
--- /dev/null
+++ b/.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"
+        ]
+      }
+    }
+  }
+  
\ No newline at end of file
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
index 49993bfc7..ed87f95e9 100644
--- a/.devcontainer/devcontainer.json
+++ b/.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.
-  "context": "..",
+  "features": {
+    "ghcr.io/devcontainers/features/desktop-lite:1": {}
+  },
 
-  // Update the 'dockerFile' property if you aren't using the standard 'Dockerfile' filename.
-  "dockerFile": "../.Dockerfile",
+  "postCreateCommand": "pnpm install && pnpm run build",
 
-  // Use 'forwardPorts' to make a list of ports inside the container available locally.
-  // "forwardPorts": [],
+  "waitFor": "postCreateCommand",
 
-  // Uncomment the next line to run commands after the container is created - for example installing curl.
-  "postCreateCommand": "pnpm install"
+  "postAttachCommand": {
+    "Astro tests": "pnpm run test"
+  },
 
-  // Uncomment when using a ptrace-based debugger like C++, Go, and Rust
-  // "runArgs": [ "--cap-add=SYS_PTRACE", "--security-opt", "seccomp=unconfined" ],
-
-  // Uncomment to use the Docker CLI from inside the container. See https://aka.ms/vscode-remote/samples/docker-from-docker.
-  // "mounts": [ "source=/var/run/docker.sock,target=/var/run/docker.sock,type=bind" ],
-
-  // Uncomment to connect as a non-root user if you've added one. See https://aka.ms/vscode-remote/containers/non-root.
-  // "remoteUser": "vscode"
+  "customizations": {
+    "codespaces": {
+      "openFiles": [
+        "README.md",
+        "CONTRIBUTING.md"
+      ]
+    },
+    "vscode": {
+      "extensions": [
+        "astro-build.astro-vscode",
+        "esbenp.prettier-vscode"
+      ]
+    }
+  }
 }
diff --git a/.devcontainer/docs/devcontainer.json b/.devcontainer/docs/devcontainer.json
new file mode 100644
index 000000000..9c57d9825
--- /dev/null
+++ b/.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"
+        ]
+      }
+    }
+  }
+  
\ No newline at end of file
diff --git a/.devcontainer/example-welcome-message.txt b/.devcontainer/example-welcome-message.txt
new file mode 100644
index 000000000..72ef4734f
--- /dev/null
+++ b/.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.
\ No newline at end of file
diff --git a/.devcontainer/examples.Dockerfile b/.devcontainer/examples.Dockerfile
new file mode 100644
index 000000000..287310635
--- /dev/null
+++ b/.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
\ No newline at end of file
diff --git a/.devcontainer/examples.deno.Dockerfile b/.devcontainer/examples.deno.Dockerfile
new file mode 100644
index 000000000..e4526f1ac
--- /dev/null
+++ b/.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
\ No newline at end of file
diff --git a/.devcontainer/framework-alpine/devcontainer.json b/.devcontainer/framework-alpine/devcontainer.json
new file mode 100644
index 000000000..6e3293f1a
--- /dev/null
+++ b/.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"
+        ]
+      }
+    }
+  }
+  
\ No newline at end of file
diff --git a/.devcontainer/framework-lit/devcontainer.json b/.devcontainer/framework-lit/devcontainer.json
new file mode 100644
index 000000000..2fbcfe74b
--- /dev/null
+++ b/.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"
+        ]
+      }
+    }
+  }
+  
\ No newline at end of file
diff --git a/.devcontainer/framework-multiple/devcontainer.json b/.devcontainer/framework-multiple/devcontainer.json
new file mode 100644
index 000000000..fddd478e4
--- /dev/null
+++ b/.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"
+        ]
+      }
+    }
+  }
+  
\ No newline at end of file
diff --git a/.devcontainer/framework-preact/devcontainer.json b/.devcontainer/framework-preact/devcontainer.json
new file mode 100644
index 000000000..f5a46a7ff
--- /dev/null
+++ b/.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"
+        ]
+      }
+    }
+  }
+  
\ No newline at end of file
diff --git a/.devcontainer/framework-react/devcontainer.json b/.devcontainer/framework-react/devcontainer.json
new file mode 100644
index 000000000..f6b019dcd
--- /dev/null
+++ b/.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"
+        ]
+      }
+    }
+  }
+  
\ No newline at end of file
diff --git a/.devcontainer/framework-solid/devcontainer.json b/.devcontainer/framework-solid/devcontainer.json
new file mode 100644
index 000000000..e4e980a21
--- /dev/null
+++ b/.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"
+        ]
+      }
+    }
+  }
+  
\ No newline at end of file
diff --git a/.devcontainer/framework-svelte/devcontainer.json b/.devcontainer/framework-svelte/devcontainer.json
new file mode 100644
index 000000000..3b75f0417
--- /dev/null
+++ b/.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"
+        ]
+      }
+    }
+  }
+  
\ No newline at end of file
diff --git a/.devcontainer/framework-vue/devcontainer.json b/.devcontainer/framework-vue/devcontainer.json
new file mode 100644
index 000000000..7f55d94db
--- /dev/null
+++ b/.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"
+        ]
+      }
+    }
+  }
+  
\ No newline at end of file
diff --git a/.devcontainer/hackernews/devcontainer.json b/.devcontainer/hackernews/devcontainer.json
new file mode 100644
index 000000000..abf263340
--- /dev/null
+++ b/.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"
+        ]
+      }
+    }
+  }
+  
\ No newline at end of file
diff --git a/.devcontainer/integration/devcontainer.json b/.devcontainer/integration/devcontainer.json
new file mode 100644
index 000000000..3e929b961
--- /dev/null
+++ b/.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"
+        ]
+      }
+    }
+  }
+  
\ No newline at end of file
diff --git a/.devcontainer/minimal/devcontainer.json b/.devcontainer/minimal/devcontainer.json
new file mode 100644
index 000000000..cad1a634a
--- /dev/null
+++ b/.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"
+        ]
+      }
+    }
+  }
+  
\ No newline at end of file
diff --git a/.devcontainer/non-html-pages/devcontainer.json b/.devcontainer/non-html-pages/devcontainer.json
new file mode 100644
index 000000000..68e92fd34
--- /dev/null
+++ b/.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"
+        ]
+      }
+    }
+  }
+  
\ No newline at end of file
diff --git a/.devcontainer/portfolio/devcontainer.json b/.devcontainer/portfolio/devcontainer.json
new file mode 100644
index 000000000..b24dc5306
--- /dev/null
+++ b/.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"
+        ]
+      }
+    }
+  }
+  
\ No newline at end of file
diff --git a/.devcontainer/ssr/devcontainer.json b/.devcontainer/ssr/devcontainer.json
new file mode 100644
index 000000000..8990e1258
--- /dev/null
+++ b/.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"
+        ]
+      }
+    }
+  }
+  
\ No newline at end of file
diff --git a/.devcontainer/welcome-message.txt b/.devcontainer/welcome-message.txt
new file mode 100644
index 000000000..f2ca4bf31
--- /dev/null
+++ b/.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.
diff --git a/.devcontainer/with-markdown-plugins/devcontainer.json b/.devcontainer/with-markdown-plugins/devcontainer.json
new file mode 100644
index 000000000..3ddb25c73
--- /dev/null
+++ b/.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"
+        ]
+      }
+    }
+  }
+  
\ No newline at end of file
diff --git a/.devcontainer/with-markdown-shiki/devcontainer.json b/.devcontainer/with-markdown-shiki/devcontainer.json
new file mode 100644
index 000000000..c35d865f8
--- /dev/null
+++ b/.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"
+        ]
+      }
+    }
+  }
+  
\ No newline at end of file
diff --git a/.devcontainer/with-mdx/devcontainer.json b/.devcontainer/with-mdx/devcontainer.json
new file mode 100644
index 000000000..b1953e3c1
--- /dev/null
+++ b/.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"
+        ]
+      }
+    }
+  }
+  
\ No newline at end of file
diff --git a/.devcontainer/with-nanostores/devcontainer.json b/.devcontainer/with-nanostores/devcontainer.json
new file mode 100644
index 000000000..595049596
--- /dev/null
+++ b/.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"
+        ]
+      }
+    }
+  }
+  
\ No newline at end of file
diff --git a/.devcontainer/with-tailwindcss/devcontainer.json b/.devcontainer/with-tailwindcss/devcontainer.json
new file mode 100644
index 000000000..95427f1dc
--- /dev/null
+++ b/.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"
+        ]
+      }
+    }
+  }
+  
\ No newline at end of file
diff --git a/.devcontainer/with-vite-plugin-pwa/devcontainer.json b/.devcontainer/with-vite-plugin-pwa/devcontainer.json
new file mode 100644
index 000000000..5d01f232f
--- /dev/null
+++ b/.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"
+        ]
+      }
+    }
+  }
+  
\ No newline at end of file
diff --git a/.devcontainer/with-vitest/devcontainer.json b/.devcontainer/with-vitest/devcontainer.json
new file mode 100644
index 000000000..672fc5f59
--- /dev/null
+++ b/.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"
+        ]
+      }
+    }
+  }
+  
\ No newline at end of file
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 99aae8627..58bafd07c 100644
--- a/CONTRIBUTING.md
+++ b/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
diff --git a/examples/basics/README.md b/examples/basics/README.md
index b2c29bad7..0c38af442 100644
--- a/examples/basics/README.md
+++ b/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!
 
diff --git a/examples/blog/README.md b/examples/blog/README.md
index ac5417c0d..ea4daf00d 100644
--- a/examples/blog/README.md
+++ b/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!
 
diff --git a/examples/component/README.md b/examples/component/README.md
index b09f5e3c6..7df86d84e 100644
--- a/examples/component/README.md
+++ b/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
diff --git a/examples/deno/README.md b/examples/deno/README.md
index db3470a73..eaf6d7d45 100644
--- a/examples/deno/README.md
+++ b/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
diff --git a/examples/docs/README.md b/examples/docs/README.md
index 1ba63a9e6..b25ef409e 100644
--- a/examples/docs/README.md
+++ b/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!
 
diff --git a/examples/framework-alpine/README.md b/examples/framework-alpine/README.md
index 4b0314343..e453451cb 100644
--- a/examples/framework-alpine/README.md
+++ b/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/).
 
diff --git a/examples/framework-lit/README.md b/examples/framework-lit/README.md
index 618b5e24d..747040dc5 100644
--- a/examples/framework-lit/README.md
+++ b/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/).
\ No newline at end of file
diff --git a/examples/framework-multiple/README.md b/examples/framework-multiple/README.md
index f07077dbf..054dbed3c 100644
--- a/examples/framework-multiple/README.md
+++ b/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/)).
 
diff --git a/examples/framework-preact/README.md b/examples/framework-preact/README.md
index 0c7c8d130..f29564d89 100644
--- a/examples/framework-preact/README.md
+++ b/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).
 
diff --git a/examples/framework-react/README.md b/examples/framework-react/README.md
index 52cfb908d..105ea05d6 100644
--- a/examples/framework-react/README.md
+++ b/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/).
 
diff --git a/examples/framework-solid/README.md b/examples/framework-solid/README.md
index 928a8e572..cb9e785ee 100644
--- a/examples/framework-solid/README.md
+++ b/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/).
 
diff --git a/examples/framework-svelte/README.md b/examples/framework-svelte/README.md
index da0d051c4..de2cdd8a0 100644
--- a/examples/framework-svelte/README.md
+++ b/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/).
diff --git a/examples/framework-vue/README.md b/examples/framework-vue/README.md
index 7d2f635e6..a46007c82 100644
--- a/examples/framework-vue/README.md
+++ b/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/).
 
diff --git a/examples/hackernews/README.md b/examples/hackernews/README.md
index e2d15dda5..e6d6af930 100644
--- a/examples/hackernews/README.md
+++ b/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!
 
diff --git a/examples/integration/README.md b/examples/integration/README.md
index 42cc04413..200ffccc1 100644
--- a/examples/integration/README.md
+++ b/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
diff --git a/examples/minimal/README.md b/examples/minimal/README.md
index e14d3255b..35e156b01 100644
--- a/examples/minimal/README.md
+++ b/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!
 
diff --git a/examples/non-html-pages/README.md b/examples/non-html-pages/README.md
index 35487a0f9..88cf4b86b 100644
--- a/examples/non-html-pages/README.md
+++ b/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!
 
diff --git a/examples/portfolio/README.md b/examples/portfolio/README.md
index 8774a8ff5..90ea692af 100644
--- a/examples/portfolio/README.md
+++ b/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!
 
diff --git a/examples/with-markdown-plugins/README.md b/examples/with-markdown-plugins/README.md
index bdb657bcd..105ad8cc4 100644
--- a/examples/with-markdown-plugins/README.md
+++ b/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.
diff --git a/examples/with-markdown-shiki/README.md b/examples/with-markdown-shiki/README.md
index 89afac7dd..31174342e 100644
--- a/examples/with-markdown-shiki/README.md
+++ b/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/).
 
diff --git a/examples/with-mdx/README.md b/examples/with-mdx/README.md
index 7cbadbfb7..146fc09de 100644
--- a/examples/with-mdx/README.md
+++ b/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/).
diff --git a/examples/with-nanostores/README.md b/examples/with-nanostores/README.md
index 2fa317c43..0cdb7e676 100644
--- a/examples/with-nanostores/README.md
+++ b/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!
diff --git a/examples/with-tailwindcss/README.md b/examples/with-tailwindcss/README.md
index 4944c3133..3580f0942 100644
--- a/examples/with-tailwindcss/README.md
+++ b/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.
 
diff --git a/examples/with-vite-plugin-pwa/README.md b/examples/with-vite-plugin-pwa/README.md
index f8f792eb3..e3c0f8af8 100644
--- a/examples/with-vite-plugin-pwa/README.md
+++ b/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!
 
diff --git a/examples/with-vitest/README.md b/examples/with-vitest/README.md
index 103cdbb61..013aa332f 100644
--- a/examples/with-vitest/README.md
+++ b/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/).