feat(examples): add vercel examples #3985
Conversation
|
🚅 Deployed to the rivet-pr-3985 environment in rivet-frontend
|
How to use the Graphite Merge QueueAdd the label merge-queue to this PR to add it to the merge queue. You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. This stack of pull requests is managed by Graphite. Learn more about stacking. |
PR Review: Add Vercel ExamplesSummaryThis PR adds Vercel-optimized versions of examples to the repository. It creates ~30 new Changes:
✅ Strengths1. Documentation QualityThe
2. Consistent StructureAll Vercel examples follow a consistent pattern:
3. Code QualityExamples reviewed show:
🔍 Potential Issues1. Documentation Accuracy IssuesREADME.md Inconsistencies
Recommendation: All Vercel example READMEs should reference their own directory and correct file paths. Consider adding a validation step to the generation script. 2. Missing Test Configurationvitest.config.ts Port Conflict export default defineConfig({
server: {
port: 5173, // Same as Vite dev server
},
// ...
});Issue: The test server uses port 5173, which conflicts with the Vite dev server. For Vercel examples using Recommendation: Either:
3. Vercel Configuration QuestionsFramework Detection {
"framework": "vite",
"rewrites": [...]
}According to Questions:
4. Package.json ConcernsMissing Test Script {
"scripts": {
"dev": "vercel dev",
"build": "vite build",
"check-types": "tsc --noEmit"
// Missing: "test": "vitest run"
}
}Recommendation: Add test scripts to all Vercel examples with tests, or remove vitest dependency if tests aren't meant to run in Vercel examples. 5. tsconfig.json API DirectoryIn {
"include": [
"src/**/*",
"api/**/*", // New for Vercel
"frontend/**/*"
]
}Good: The Consideration: The 🔒 Security ReviewNo Major Concerns
Minor NoteThe ⚡ Performance ConsiderationsDuplication vs GenerationObservation: The PR adds ~23k lines of mostly duplicated code. Pros:
Cons:
Current Mitigation: The generation script at Recommendation: Consider adding this to CI/CD:
Vercel Deployment EfficiencyThe examples use appropriate patterns for Vercel:
🧪 Test CoveragePositiveExamples include good test coverage:
ConcernWithout test scripts in package.json, it's unclear:
📋 Checklist Against CLAUDE.md✅ Examples follow the documented structure 🎯 RecommendationsHigh Priority
Medium Priority
Low Priority
✅ Overall AssessmentThis is a well-structured PR that successfully adds Vercel deployment support. The code quality is high, the structure is consistent, and the documentation is comprehensive. The main issues are:
Recommendation: Approve with minor revisions to fix the documentation paths and clarify the framework configuration strategy. |
TL;DR
Added Vercel-compatible versions of examples with a script to generate them automatically.
What changed?
scripts/vercel-examples/generate-vercel-examples.ts) that automatically creates Vercel-compatible versions of examples-vercelsuffixvercel.jsonfiles from original examplesHow to test?
Run the script to generate or update Vercel examples:
Test specific examples:
Force regeneration of all examples:
Why make this change?
This change streamlines the process of maintaining Vercel-compatible versions of examples, ensuring parity between local and Vercel deployments. It makes it easier for users to deploy examples directly to Vercel with proper configuration, while keeping the original examples clean and focused on local development.