Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .devcontainer/Dockerfile
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
FROM mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye

RUN npx playwright install --with-deps chromium
RUN su node -c "curl -fsSL https://claude.ai/install.sh | bash"
51 changes: 51 additions & 0 deletions .devcontainer/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
# Development Container

This project includes a development container configuration for consistent development environments across different machines.

## Prerequisites

- Docker
- A devcontainer-compatible tool (VS Code Dev Containers, GitHub Codespaces, crib, etc.)

## What's Included

- Node.js 20 with TypeScript support
- Git
- Playwright (chromium) with browser dependencies pre-installed
- npm packages from `package.json` auto-installed on container creation

## Getting Started

### VS Code

1. Install the [Dev Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers) extension
2. Open the project folder
3. Click the remote indicator (bottom left corner)
4. Select "Reopen in Container"

The container will build and initialize automatically (first build takes ~2-3 minutes).

### Other Tools

Use your devcontainer-compatible tool to open this project. Refer to its documentation for specific instructions.

## Available Commands

Once the container is running:

```bash
npm run dev # Start Vite dev server (http://localhost:3000)
npm run build # Build for production
npm run lint # Run ESLint
npm run preview # Preview production build
```

## Playwright MCP Integration

Playwright (chromium) is pre-installed in the container image. To use it with Claude Code's Playwright MCP integration, run this **inside the container**:

```bash
claude mcp add playwright -- npx @playwright/mcp@latest --headless
```

**NOTE**: The `--headless` flag is required inside the container since there is no display server.
19 changes: 19 additions & 0 deletions .devcontainer/devcontainer.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
{
"name": "design-os",
"build": {
"dockerfile": "Dockerfile"
},
"remoteUser": "node",
"containerEnv": {
"VITE_HOST": "::"
},
"postCreateCommand": "npm install",
"appPort": [3000],
"forwardPorts": [3000],
"portsAttributes": {
"3000": {
"label": "Vite Dev Server",
"onAutoForward": "notify"
}
}
}
1 change: 1 addition & 0 deletions vite.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,5 +13,6 @@ export default defineConfig({
},
server: {
port: 3000,
host: process.env.VITE_HOST || 'localhost',
},
})