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>
This commit is contained in:
Brian McManus 2023-02-23 08:34:37 -07:00 committed by GitHub
parent eed2c85513
commit 7da05febea
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
58 changed files with 1116 additions and 18 deletions

17
.devcontainer/Dockerfile Normal file
View file

@ -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

View file

@ -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"
]
}
}
}

View file

@ -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"
]
}
}
}

View file

@ -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"
]
}
}
}

View file

@ -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"
]
}
}
}

View file

@ -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"
]
}
}
}

View file

@ -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"
]
}
}
}

View file

@ -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.

View file

@ -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

View file

@ -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

View file

@ -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"
]
}
}
}

View file

@ -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"
]
}
}
}

View file

@ -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"
]
}
}
}

View file

@ -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"
]
}
}
}

View file

@ -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"
]
}
}
}

View file

@ -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"
]
}
}
}

View file

@ -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"
]
}
}
}

View file

@ -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"
]
}
}
}

View file

@ -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"
]
}
}
}

View file

@ -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"
]
}
}
}

View file

@ -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"
]
}
}
}

View file

@ -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"
]
}
}
}

View file

@ -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"
]
}
}
}

View file

@ -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"
]
}
}
}

View file

@ -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.

View file

@ -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"
]
}
}
}

View file

@ -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"
]
}
}
}

View file

@ -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"
]
}
}
}

View file

@ -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"
]
}
}
}

View file

@ -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"
]
}
}
}

View file

@ -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"
]
}
}
}

View file

@ -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"
]
}
}
}

View file

@ -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

View file

@ -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!

View file

@ -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!

View file

@ -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

View file

@ -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

View file

@ -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!

View file

@ -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/).

View file

@ -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/).

View file

@ -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/)).

View file

@ -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).

View file

@ -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/).

View file

@ -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/).

View file

@ -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/).

View file

@ -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/).

View file

@ -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!

View file

@ -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

View file

@ -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!

View file

@ -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!

View file

@ -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!

View file

@ -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.

View file

@ -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/).

View file

@ -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/).

View file

@ -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!

View file

@ -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.

View file

@ -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!

View file

@ -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/).