feat: add devcontainer for local development#1188
Conversation
|
@rsnodgrass is attempting to deploy a commit to the Inbox Zero OSS Program Team on Vercel. A member of the Team first needs to authorize it. |
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. 📝 WalkthroughWalkthroughAdds a complete devcontainer-based local development environment: Dockerfile, docker-compose services (app, PostgreSQL, Redis, Redis HTTP), devcontainer.json, a post-create setup script that installs deps and bootstraps .env/migrations, plus documentation updates for devcontainer and manual setup instructions. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant Dev as Developer (VS Code)
participant DC as Devcontainer (Docker)
participant App as App container
participant DB as Postgres
participant Redis as Redis
note over Dev,DC `#DDEEFF`: Developer opens project in VS Code -> Devcontainer build/start
Dev->>DC: Open in Container / Start devcontainer
DC->>App: Build and start `app` service
DC->>DB: Start Postgres service (healthcheck)
DC->>Redis: Start Redis service (healthcheck)
alt Services healthy
App->>DB: Wait for DB healthy
App->>Redis: Wait for Redis healthy
DC->>App: Execute `.devcontainer/setup.sh` (postCreateCommand)
App->>App: pnpm install
App->>App: Generate `.env` if missing (secrets, DB/Redis URLs)
App->>DB: Run `prisma migrate dev` (fallback to db push)
App->>Dev: Print next steps (replace OAuth keys, run pnpm dev)
else Unhealthy
DC->>Dev: Surface healthcheck errors
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Add a VS Code devcontainer that builds a Node 22 image and brings up Postgres, Redis, and an HTTP Redis proxy for local developmentIntroduce a 📍Where to StartStart with the compose and lifecycle configuration in .devcontainer/devcontainer.json, then review service definitions in .devcontainer/docker-compose.yml and the setup flow in .devcontainer/setup.sh. Macroscope summarized d081a10. |
There was a problem hiding this comment.
2 issues found across 6 files
Prompt for AI agents (all issues)
Check if these issues are valid — if so, understand the root cause of each and fix them.
<file name="README.md">
<violation number="1" location="README.md:107">
P2: Microsoft OAuth redirect URIs are incomplete. The Microsoft OAuth Setup section documents three redirect URIs (auth callback, linking callback, calendar callback), but this quick reference only shows the auth callback. Consider adding the missing URIs for consistency:
- `http://localhost:3000/api/outlook/linking/callback`
- `http://localhost:3000/api/outlook/calendar/callback`</violation>
</file>
<file name=".devcontainer/setup.sh">
<violation number="1" location=".devcontainer/setup.sh:78">
P2: Inline comment will be parsed as the OPENAI_API_KEY value. In .env files, `#` only starts a comment at the beginning of a line. Move the TODO comment to its own line above the variable.</violation>
</file>
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
README.md (1)
140-149: Fix step numbering sequence.The numbering jumps from step 3 (line 140) to step 5 (line 146), skipping step 4. This should be corrected for clarity.
🔎 Proposed fix
-5. **Run the development server:** +4. **Run the development server:** ```bash pnpm dev ```
🧹 Nitpick comments (2)
.devcontainer/README.md (1)
29-31: Optional: Add language identifier to code block.The code block is missing a language identifier. While not critical, adding
textorbashimproves rendering consistency.🔎 Proposed fix
-``` +```text Cmd+Shift+P → Dev Containers: Reopen in Container</details> </blockquote></details> <details> <summary>.devcontainer/docker-compose.yml (1)</summary><blockquote> `45-45`: **Consider pinning the redis-http image version.** Using `:latest` can lead to unexpected breaking changes when the image is updated. Pinning to a specific version improves reproducibility and stability. <details> <summary>🔎 Suggested approach</summary> Check the available versions at [Docker Hub](https://hub.docker.com/r/hiett/serverless-redis-http/tags) and pin to a specific tag: ```diff - image: hiett/serverless-redis-http:latest + image: hiett/serverless-redis-http:1.2.0(Replace
1.2.0with the appropriate stable version)
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
.devcontainer/Dockerfile.devcontainer/README.md.devcontainer/devcontainer.json.devcontainer/docker-compose.yml.devcontainer/setup.shREADME.md
🧰 Additional context used
📓 Path-based instructions (2)
!(pages/_document).{jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/ultracite.mdc)
Don't use the next/head module in pages/_document.js on Next.js projects
Files:
.devcontainer/Dockerfile.devcontainer/README.mdREADME.md.devcontainer/setup.sh.devcontainer/docker-compose.yml.devcontainer/devcontainer.json
*.md
📄 CodeRabbit inference engine (.cursor/rules/task-list.mdc)
*.md: Create task lists in markdown files namedTASKS.mdor with a descriptive feature-specific name (e.g.,ASSISTANT_CHAT.md) in the project root to track project progress
Structure task list markdown files with sections: Feature Name Implementation (title), description, Completed Tasks, In Progress Tasks, Future Tasks, Implementation Plan, and Relevant Files subsections
Update task list markdown files by marking tasks as completed with[x], adding new identified tasks, and moving tasks between Completed/In Progress/Future sections as appropriate
Keep the 'Relevant Files' section in task list markdown files updated with file paths that have been created or modified, brief descriptions of each file's purpose, and status indicators (e.g., ✅) for completed components
Files:
README.md
🪛 Checkov (3.2.334)
.devcontainer/devcontainer.json
[medium] 39-40: Basic Auth Credentials
(CKV_SECRET_4)
🪛 markdownlint-cli2 (0.18.1)
.devcontainer/README.md
29-29: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
54-54: Bare URL used
(MD034, no-bare-urls)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: cubic · AI code reviewer
- GitHub Check: test
🔇 Additional comments (10)
.devcontainer/devcontainer.json (1)
38-44: Development credentials are appropriately scoped.The hardcoded credentials are acceptable for this local development environment. The service hostnames (
db,redis-http) and credentials (postgres:password,dev_token) are isolated to the devcontainer and won't be used in production deployments..devcontainer/Dockerfile (2)
21-26: Excellent permission handling for named volumes.The pre-creation of directories with correct ownership prevents common permission issues when Docker mounts named volumes. The explanatory comments are helpful.
19-19: pnpm@10 is correctly specified in package.json as the project's packageManager and is appropriately pinned in the Dockerfile..devcontainer/docker-compose.yml (1)
20-32: PostgreSQL configuration is appropriate for development.The service configuration with healthcheck and persistent volume is well-structured. The hardcoded credentials are acceptable for this local development environment.
README.md (2)
93-108: Clear and comprehensive devcontainer documentation.The quick start guide provides a straightforward path for developers to get started. The inclusion of all required OAuth redirect URIs upfront is particularly helpful.
172-176: OAuth redirect URI documentation is consistent and complete.The redirect URIs match those documented in the devcontainer section, and the note about calendar integration requirements is helpful.
.devcontainer/setup.sh (4)
1-13: LGTM! Proper error handling and directory setup.The script correctly uses
set -efor strict error handling, installs dependencies from the root, and navigates to the correct directory for .env creation.
15-28: LGTM! Cryptographically secure secret generation.The helper functions use OpenSSL to generate cryptographically secure random values with appropriate lengths (32 bytes for secrets, 16 bytes for salts).
30-83: LGTM! Comprehensive and well-documented .env generation.The .env file generation is thorough and follows best practices:
- Auto-generated cryptographic secrets
- Clear placeholder values for OAuth with inline documentation
- Service URLs correctly reference devcontainer services
- Development flags appropriately enabled
- Helpful comments for required manual steps
88-98: LGTM! Clear and actionable setup instructions.The final instructions clearly guide developers on the next steps, specifying exactly which API keys need manual configuration before running the application.
3e54a26 to
a71bcfa
Compare
Add VS Code devcontainer configuration with: - Custom Dockerfile extending Microsoft Node.js 22 image - Docker Compose with PostgreSQL, Redis, and Redis HTTP services - Auto-generated secrets and environment setup via setup.sh - Proper volume permissions using build-time directory creation - Preserves existing .env file to protect user's OAuth credentials Documentation added to README.md with quick start guide. The devcontainer provides a complete development environment that: - Installs all dependencies automatically - Runs database migrations - Generates required secrets (only on first run) - Only requires user to add OAuth credentials once
a71bcfa to
d081a10
Compare
There was a problem hiding this comment.
2 issues found across 6 files
Prompt for AI agents (all issues)
Check if these issues are valid — if so, understand the root cause of each and fix them.
<file name=".devcontainer/setup.sh">
<violation number="1" location=".devcontainer/setup.sh:92">
P2: Suppressing all stderr with `2>/dev/null` hides important error messages. If migrations fail for unexpected reasons (connection issues, syntax errors), developers won't see diagnostic output. Consider removing the stderr suppression or redirecting to a log file.</violation>
</file>
<file name=".devcontainer/Dockerfile">
<violation number="1" location=".devcontainer/Dockerfile:19">
P2: pnpm version should match the project's `packageManager` field. The project pins to `pnpm@10.27.0` but this installs latest 10.x, which could cause lockfile or behavior inconsistencies.</violation>
</file>
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
.devcontainer/README.md (3)
29-31: Consider specifying a language for the code block.The fenced code block should specify a language identifier for proper syntax highlighting. Since this is a command palette instruction, consider using
textor omitting the fence entirely and using a blockquote instead.🔎 Proposed fix
-``` -Cmd+Shift+P → Dev Containers: Reopen in Container -``` +```text +Cmd+Shift+P → Dev Containers: Reopen in Container +```
35-46: Consider documenting Microsoft OAuth setup.The PR objectives mention "Add Google or Microsoft OAuth credentials," but only Google OAuth is documented here. Adding Microsoft OAuth setup instructions would provide complete coverage for developers who prefer Microsoft authentication.
🔎 Suggested addition
Add a similar section for Microsoft OAuth:
**Microsoft OAuth setup:** - Register an app in [Azure Portal](https://portal.azure.com/#blade/Microsoft_AAD_RegisteredApps/ApplicationsListBlade) - Authorized origin: `http://localhost:3000` - Redirect URI: `http://localhost:3000/api/auth/callback/microsoft`
54-54: Use markdown link syntax for the URL.The bare URL should be wrapped in markdown link syntax for consistency and better rendering.
🔎 Proposed fix
-Open http://localhost:3000 +Open [http://localhost:3000](http://localhost:3000)
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
.devcontainer/Dockerfile.devcontainer/README.md.devcontainer/devcontainer.json.devcontainer/docker-compose.yml.devcontainer/setup.shREADME.md
🚧 Files skipped from review as they are similar to previous changes (4)
- .devcontainer/setup.sh
- .devcontainer/Dockerfile
- .devcontainer/docker-compose.yml
- README.md
🧰 Additional context used
📓 Path-based instructions (1)
!(pages/_document).{jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/ultracite.mdc)
Don't use the next/head module in pages/_document.js on Next.js projects
Files:
.devcontainer/README.md.devcontainer/devcontainer.json
🪛 Checkov (3.2.334)
.devcontainer/devcontainer.json
[medium] 39-40: Basic Auth Credentials
(CKV_SECRET_4)
🪛 markdownlint-cli2 (0.18.1)
.devcontainer/README.md
29-29: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
54-54: Bare URL used
(MD034, no-bare-urls)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: cubic · AI code reviewer
🔇 Additional comments (1)
.devcontainer/devcontainer.json (1)
1-44: LGTM! Well-structured devcontainer configuration.The configuration is comprehensive and follows devcontainer best practices:
- Proper service isolation with Docker Compose
- Useful VSCode extensions for the tech stack (ESLint, Prettier, Tailwind, Prisma)
- Clear port mappings with descriptive labels
- Automated setup via post-create script
- Environment variables properly configured for the local development network
Note: The hardcoded database credentials (postgres:password) flagged by the static analysis tool are acceptable here since they're isolated within the local Docker Compose network and only used for development. This is standard practice for devcontainer configurations.
|
Thanks @rsnodgrass! Worth checking the Cubic comments too |
Summary
Adds a complete devcontainer configuration for streamlined local development. Works with any IDE that supports the devcontainer spec (VS Code, JetBrains, etc.).
What's included:
setup.shDeveloper experience:
apps/web/.envpnpm devAll infrastructure (database, Redis) and secrets are auto-configured. Developers only need to provide their own Google or Microsoft OAuth credentials.
Test plan
pnpm installcompletes without permission errorspnpm devSummary by CodeRabbit
New Features
Documentation
✏️ Tip: You can customize this high-level summary in your review settings.