element-web/.devcontainer/devcontainer.json

{
    "name": "element-web designer prototyping",
    "image": "mcr.microsoft.com/devcontainers/javascript-node:24-bookworm",
    "hostRequirements": {
        "cpus": 4,
        "memory": "8gb",
        "storage": "32gb"
    },
    "postCreateCommand": "pnpm install --frozen-lockfile && pnpm --filter @element-hq/web-shared-components run build && git checkout -b design/${GITHUB_USER}/$(date +%Y%m%d) 2>/dev/null || true",
    "postAttachCommand": {
        "install-vsix": "node .devcontainer/storybook-launcher/build-vsix.mjs && code --install-extension $(ls .devcontainer/storybook-launcher/*.vsix | head -1) --force 2>/dev/null",
        "element-web": "cp -n apps/web/config.sample.json apps/web/config.json && cd apps/web && pnpm start",
        "storybook": "pnpm run storybook:design"
    },
    "forwardPorts": [6007, 8080],
    "portsAttributes": {
        "6007": {
            "label": "Shared Components Storybook",
            "onAutoForward": "openPreview",
            "requireLocalPort": false
        },
        "8080": {
            "label": "Element Web",
            "onAutoForward": "notify",
            "requireLocalPort": false
        }
    },
    "customizations": {
        "codespaces": {
            "openFiles": []
        },
        "vscode": {
            "settings": {
                "chat.mcp.autoStart": false,
                "workbench.startupEditor": "welcomePageInEmptyWorkbench",
                "workbench.tips.enabled": false,
                "workbench.welcome.enabled": false,
                "github.copilot.chat.openAtStartup": true
            },
            "extensions": [
                "GitHub.copilot",
                "GitHub.copilot-chat"
            ],
            "mcp": {
                "servers": {
                    "element-web-figma": {
                        "command": "node",
                        "args": [
                            "scripts/design/figma-mcp-server.mjs"
                        ],
                        "env": {
                            "FIGMA_TOKEN": "${env:FIGMA_TOKEN}"
                        }
                    }
                }
            }
        }
    }
}