From f2c03736406fb7673c6fd30d677e481f56297b3c Mon Sep 17 00:00:00 2001 From: Peter Wood Date: Sun, 4 May 2025 08:39:31 -0400 Subject: [PATCH] refactor: update devcontainer and Biome configuration (#27) - Remove ESLint and Prettier in favor of Biome - Configure Biome as default formatter for TS/JS/JSON/MD - Add development helper extensions - Update VSCode settings for Biome integration Closes #27 --- .devcontainer/Dockerfile | 12 ++++++++++ .devcontainer/build-and-push.sh | 28 +++++++++++++++++++++++ .devcontainer/devcontainer.json | 40 ++++++++++++++++++++++++--------- .github/copilot-instructions.md | 26 +++++++++++++++++++++ 4 files changed, 96 insertions(+), 10 deletions(-) create mode 100644 .devcontainer/Dockerfile create mode 100644 .devcontainer/build-and-push.sh diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile new file mode 100644 index 0000000..051457a --- /dev/null +++ b/.devcontainer/Dockerfile @@ -0,0 +1,12 @@ +FROM mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye + +LABEL org.opencontainers.image.source="https://github.com/acedanger/finance" +LABEL org.opencontainers.image.description="Dev container for Finance App" + +# Install additional OS packages +RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \ + && apt-get -y install --no-install-recommends git-core \ + && apt-get clean -y && rm -rf /var/lib/apt/lists/* + +# Install global npm packages if needed +RUN su node -c "npm install -g typescript" \ No newline at end of file diff --git a/.devcontainer/build-and-push.sh b/.devcontainer/build-and-push.sh new file mode 100644 index 0000000..0828748 --- /dev/null +++ b/.devcontainer/build-and-push.sh @@ -0,0 +1,28 @@ +#!/bin/bash + +# Configuration +GITHUB_USERNAME=$1 +IMAGE_NAME="finance-devcontainer" +IMAGE_TAG="latest" + +if [ -z "$GITHUB_USERNAME" ]; then + echo "Usage: $0 " + echo "Example: $0 acedanger" + exit 1 +fi + +FULL_IMAGE_NAME="ghcr.io/$GITHUB_USERNAME/$IMAGE_NAME:$IMAGE_TAG" + +# Build the image +echo "Building image: $FULL_IMAGE_NAME" +docker build -t $FULL_IMAGE_NAME -f Dockerfile . + +# Push to GitHub Container Registry +echo "Pushing image to GHCR..." +docker push $FULL_IMAGE_NAME + +echo "Done! Now update your devcontainer.json to use this image:" +echo "Replace the 'build' section with:" +echo '{ + "image": "'$FULL_IMAGE_NAME'" +}' \ No newline at end of file diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 8394ddb..a6615f6 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -1,8 +1,8 @@ { "name": "Finance App Development", - "image": "mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye", - "workspaceFolder": "/home/acedanger/dev/finance", - "workspaceMount": "source=${localWorkspaceFolder},target=/home/acedanger/dev/finance,type=bind,consistency=cached", + "image": "ghcr.io/acedanger/finance-devcontainer:latest", + "workspaceFolder": "/workspaces/finance", + "workspaceMount": "source=${localWorkspaceFolder},target=/workspaces/finance,type=bind,consistency=cached", "features": { "ghcr.io/devcontainers/features/git:1": {}, "ghcr.io/devcontainers/features/docker-in-docker:2": {}, @@ -16,27 +16,39 @@ "GitHub.copilot", "GitHub.copilot-chat", "ms-vscode.vscode-typescript-next", - "bradlc.vscode-tailwindcss" + "bradlc.vscode-tailwindcss", + "biomejs.biome", + "PKief.material-icon-theme", + "Gruntfuggly.todo-tree", + "humao.rest-client" ], "settings": { "editor.formatOnSave": true, "[typescript]": { "editor.formatOnSave": true, - "editor.defaultFormatter": null, + "editor.defaultFormatter": "biomejs.biome", "editor.codeActionsOnSave": { - "source.fixAll": true + "source.fixAll.biome": "explicit", + "source.organizeImports.biome": "explicit" } }, "[javascript]": { "editor.formatOnSave": true, - "editor.defaultFormatter": null, + "editor.defaultFormatter": "biomejs.biome", "editor.codeActionsOnSave": { - "source.fixAll": true + "source.fixAll.biome": "explicit", + "source.organizeImports.biome": "explicit" } }, "[astro]": { "editor.defaultFormatter": "astro-build.astro-vscode" }, + "[json]": { + "editor.defaultFormatter": "biomejs.biome" + }, + "[markdown]": { + "editor.defaultFormatter": "biomejs.biome" + }, "typescript.updateImportsOnFileMove.enabled": "always", "editor.bracketPairColorization.enabled": true, "files.exclude": { @@ -48,7 +60,14 @@ "terminal.integrated.defaultProfile.linux": "bash", "mcp.servers.github": { "command": "docker", - "args": ["run", "-i", "--rm", "--env-file", "${containerWorkspaceFolder}/.devcontainer/.env", "ghcr.io/github/github-mcp-server"], + "args": [ + "run", + "-i", + "--rm", + "--env-file", + "${containerWorkspaceFolder}/.devcontainer/.env", + "ghcr.io/github/github-mcp-server" + ], "env": {} } } @@ -58,8 +77,9 @@ "postCreateCommand": "npm install && npm run check", "remoteUser": "node", "mounts": [ - "type=bind,source=${localEnv:HOME}/.ssh,target=/home/node/.ssh,readonly" + "type=bind,source=${localEnv:HOME}${localEnv:USERPROFILE}/.ssh,target=/home/node/.ssh,readonly" ], + "updateRemoteUserUID": true, "remoteEnv": { "GITHUB_PERSONAL_ACCESS_TOKEN": "${localEnv:GITHUB_PERSONAL_ACCESS_TOKEN}" }, diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md index 07d81cb..ee4401b 100644 --- a/.github/copilot-instructions.md +++ b/.github/copilot-instructions.md @@ -10,6 +10,28 @@ This project is a web user interface (UI) for a CRUD (Create, Read, Update, Dele * **Language:** TypeScript, JavaScript (client-side scripts), HTML, CSS * **Styling:** Plain CSS (`src/styles/global.css`) * **Data:** Using Astro's built-in API routes in `src/pages/api/` with a temporary in-memory store (`src/data/store.ts`). **The goal is to eventually replace the in-memory store with a persistent database.** +* **Development Environment:** VS Code Dev Container using private Docker image (`ghcr.io/acedanger/finance-devcontainer:latest`) + +## Development Environment + +* **Dev Container:** The project uses a VS Code Dev Container for consistent development environments. + * Container configuration in `.devcontainer/devcontainer.json` + * Uses a private container image hosted on GitHub Container Registry + * Image: `ghcr.io/acedanger/finance-devcontainer:latest` + * Includes all necessary development tools and extensions + * Configured with GitHub CLI and authentication + * Features Docker-in-Docker support for additional container needs +* **Container Features:** + * Node.js and npm pre-installed + * Git and GitHub CLI configured + * TypeScript support + * VS Code extensions pre-configured + * Docker-in-Docker capability + * Automatic GitHub authentication +* **Authentication:** + * Requires GitHub Personal Access Token for private container access + * Token should be configured in `.devcontainer/.env` + * GitHub CLI authentication handled in post-start command ## Current State & Key Features @@ -36,6 +58,10 @@ This project is a web user interface (UI) for a CRUD (Create, Read, Update, Dele ## File Structure Overview +* `.devcontainer/`: Development container configuration + * `devcontainer.json`: VS Code Dev Container configuration + * `Dockerfile`: Base container definition (for reference) + * `.env.example`: Template for container environment variables * `src/components/`: Reusable UI components. * `src/data/`: Data store and persistence layer. * `src/layouts/`: Base page layout(s).