fix: les
This commit is contained in:
@@ -1,186 +1,248 @@
|
||||
# Les 13 — Lesopdracht
|
||||
## Pokédex opzetten + eerste deploy naar Vercel
|
||||
# Les 14 — Lesopdracht
|
||||
## Bouw je eigen Cursor + Vercel flow
|
||||
|
||||
**Vak:** AI-Assisted Development
|
||||
**Opleiding:** NOVI Hogeschool Utrecht
|
||||
**Duur:** 30 min in-class
|
||||
**Status:** Tijdens de les afronden — daarna huiswerk uitbreiden
|
||||
**Werkvorm:** zelfstandig na de pauze (±1,5 uur)
|
||||
**Status:** klaar = productie-URL + PR-URL in de chat delen
|
||||
|
||||
---
|
||||
|
||||
## Doel
|
||||
|
||||
Aan het einde van deze opdracht heb je een **werkende Pokédex** op `pokedex-{jouwnaam}.vercel.app`, gebouwd met Cursor Composer, gepushed naar GitHub, en automatisch gedeployed via Vercel.
|
||||
Je doorloopt de hele cyclus die in de demo is gedaan, maar nu voor je eigen project. Aan het einde heb je een live Next.js-app op Vercel, twee features in eigen branches met preview-URLs, en één Pull Request gemerged naar productie.
|
||||
|
||||
---
|
||||
|
||||
## Vereisten
|
||||
## Wat je nodig hebt
|
||||
|
||||
- Node 20+, pnpm, git
|
||||
- **Cursor** geïnstalleerd (cursor.com) — Pro account is fijn maar niet verplicht voor lesopdracht
|
||||
- **GitHub** account
|
||||
- **Vercel** account (signup met GitHub kan)
|
||||
- GitHub-account + `gh` CLI ingelogd (`gh auth login`)
|
||||
- Vercel-account + CLI (`npm i -g vercel && vercel login`)
|
||||
- Cursor (Pro of Business) ingelogd
|
||||
|
||||
---
|
||||
|
||||
## Stap 1 — Nieuwe Next.js app
|
||||
## Stappenplan
|
||||
|
||||
### Stap 1 — Project scaffolden
|
||||
|
||||
```bash
|
||||
pnpm create next-app@latest pokedex \
|
||||
--typescript --tailwind --app --no-src-dir --import-alias "@/*"
|
||||
cd pokedex
|
||||
cd ~/web # of waar jij je projecten houdt
|
||||
npx create-next-app@latest mijn-portfolio
|
||||
```
|
||||
|
||||
Open in Cursor:
|
||||
Beantwoord de prompts:
|
||||
- TypeScript: **Ja**
|
||||
- ESLint: **Ja**
|
||||
- Tailwind CSS: **Ja**
|
||||
- `src/` directory: **Ja**
|
||||
- App Router: **Ja**
|
||||
- Turbopack: **Ja**
|
||||
- Import alias: **`@/*`**
|
||||
|
||||
```bash
|
||||
cursor .
|
||||
cd mijn-portfolio
|
||||
npm run dev
|
||||
```
|
||||
|
||||
---
|
||||
Open `http://localhost:3000` en check dat het werkt.
|
||||
|
||||
## Stap 2 — Eerste feature met Composer
|
||||
|
||||
Open Composer: `Cmd+I` (Mac) of `Ctrl+I` (Win/Linux).
|
||||
|
||||
**Prompt:**
|
||||
|
||||
> Bouw een Pokédex-startpagina op `app/page.tsx`. Haal de eerste 151 Pokémon van PokéAPI (`https://pokeapi.co/api/v2/pokemon?limit=151`) als Server Component. Toon ze in een grid van cards (Tailwind, ~4 per rij op desktop). Elke card heeft: naam (capitalized), pokeapi sprite (`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/{id}.png`), en pokemon nummer. Make sure cards have hover effect. Gebruik `next/image` voor de sprites.
|
||||
|
||||
Accepteer de diffs. Run lokaal:
|
||||
|
||||
```bash
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
Open http://localhost:3000 — Pokémon-grid zichtbaar.
|
||||
|
||||
> **Tip:** als sprites niet laden, voeg PokéAPI's domain toe aan `next.config.ts` (Composer kan dit voor je doen — vraag het hem).
|
||||
|
||||
---
|
||||
|
||||
## Stap 3 — Detail-pagina (optioneel als tijd)
|
||||
|
||||
**Composer prompt:**
|
||||
|
||||
> Voeg detail-pagina toe op `app/pokemon/[name]/page.tsx`. Toon: grote sprite, naam, types als chips (met type-kleur), stats (HP, attack, defense, etc) als progress bars, en height + weight. Link de cards op de homepage naar `/pokemon/{name}`.
|
||||
|
||||
Test in browser.
|
||||
|
||||
---
|
||||
|
||||
## Stap 4 — GitHub repo
|
||||
|
||||
Maak een nieuwe repo op GitHub:
|
||||
- Naam: `pokedex`
|
||||
- Public
|
||||
- Geen README/license (we hebben al bestanden)
|
||||
|
||||
Lokaal:
|
||||
### Stap 2 — Naar GitHub
|
||||
|
||||
```bash
|
||||
git init
|
||||
git add .
|
||||
git commit -m "Initial Pokédex with Cursor Composer"
|
||||
git commit -m "init"
|
||||
git branch -M main
|
||||
git remote add origin https://github.com/JOUW-USER/pokedex.git
|
||||
git push -u origin main
|
||||
|
||||
gh repo create mijn-portfolio --public --source=. --push
|
||||
```
|
||||
|
||||
Check op GitHub: code is daar.
|
||||
Check op github.com dat je code er staat. Controleer dat `.env.local` NIET in de commit zit.
|
||||
|
||||
---
|
||||
### Stap 3 — Vercel project aanmaken
|
||||
|
||||
## Stap 5 — Vercel verbinden
|
||||
|
||||
1. Ga naar https://vercel.com — login met GitHub
|
||||
2. **Add New → Project**
|
||||
3. Kies je `pokedex` repo
|
||||
4. Vercel detecteert Next.js — laat alle defaults staan
|
||||
1. Ga naar **vercel.com/new**
|
||||
2. Klik **Import Git Repository**
|
||||
3. Kies `mijn-portfolio`
|
||||
4. Framework: Next.js (auto-detect)
|
||||
5. Klik **Deploy**
|
||||
|
||||
Wacht ~60-90 seconden. Vercel toont:
|
||||
Wacht ±45 seconden. Open de productie-URL in een nieuw tabblad.
|
||||
|
||||
```
|
||||
🎉 Your project has been deployed
|
||||
https://pokedex-{jouwnaam}.vercel.app
|
||||
```
|
||||
|
||||
Klik de URL. Werkt? Klaar.
|
||||
|
||||
---
|
||||
|
||||
## Stap 6 — Test een tweede deploy
|
||||
|
||||
Wijzig de titel van de homepage (kun je via Composer):
|
||||
|
||||
> Verander de h1 van "Pokédex" naar "Mijn Pokédex".
|
||||
|
||||
Push:
|
||||
### Stap 4 — Vercel CLI koppelen
|
||||
|
||||
```bash
|
||||
git add .
|
||||
git commit -m "Custom title"
|
||||
cd mijn-portfolio
|
||||
vercel link
|
||||
# kies scope (je persoonlijke) en project (mijn-portfolio)
|
||||
|
||||
vercel env pull .env.local
|
||||
# trekt eventuele env vars (nu nog leeg)
|
||||
|
||||
vercel env ls
|
||||
# zie wat er staat
|
||||
```
|
||||
|
||||
### Stap 5 — Cursor configureren
|
||||
|
||||
Open je project in Cursor. Maak twee bestanden aan:
|
||||
|
||||
**`.cursor/rules/general.mdc`:**
|
||||
|
||||
```markdown
|
||||
---
|
||||
description: Algemene project-conventies voor mijn-portfolio
|
||||
alwaysApply: true
|
||||
---
|
||||
|
||||
- Gebruik TypeScript strict mode
|
||||
- Geen any-types
|
||||
- Tailwind voor styling — geen CSS modules
|
||||
- Server components by default; "use client" alleen waar nodig
|
||||
- Imports met @/ alias
|
||||
```
|
||||
|
||||
**`AGENTS.md`** in repo-root:
|
||||
|
||||
```markdown
|
||||
# Mijn Portfolio — Project Guide
|
||||
|
||||
## Stack
|
||||
- Next.js 16 (App Router)
|
||||
- TypeScript strict
|
||||
- Tailwind CSS v4
|
||||
- Vercel hosting
|
||||
|
||||
## Conventies
|
||||
- Server components by default
|
||||
- "use client" alleen voor interactie
|
||||
- @/ alias verwijst naar src/
|
||||
|
||||
## Lokaal draaien
|
||||
\`\`\`bash
|
||||
npm install
|
||||
vercel env pull .env.local
|
||||
npm run dev
|
||||
\`\`\`
|
||||
|
||||
## Deploy
|
||||
- Productie: merge naar main → Vercel deploy't automatisch
|
||||
- Preview: push naar feature branch → eigen preview-URL
|
||||
```
|
||||
|
||||
```bash
|
||||
git add .cursor AGENTS.md
|
||||
git commit -m "chore: cursor rules + agents.md"
|
||||
git push
|
||||
```
|
||||
|
||||
Check Vercel dashboard — nieuwe deploy verschijnt direct. ~30s later: live.
|
||||
### Stap 6 — Feature 1: Hero section
|
||||
|
||||
```bash
|
||||
git checkout -b feature/hero
|
||||
```
|
||||
|
||||
In Cursor (Chat + Plan mode):
|
||||
|
||||
```
|
||||
Plan een hero-section voor de homepage. Specs:
|
||||
- Gradient achtergrond (subtiel)
|
||||
- Grote titel (jouw naam)
|
||||
- Ondertitel (jouw rol)
|
||||
- Twee CTA-knoppen: een primaire en een secundaire
|
||||
- Responsive
|
||||
- Tailwind, geen custom CSS
|
||||
```
|
||||
|
||||
Wacht op het plan → Apply. Eventueel inline tweaks (Cmd+K).
|
||||
|
||||
```bash
|
||||
git add . && git commit -m "feat: hero section"
|
||||
git push -u origin feature/hero
|
||||
```
|
||||
|
||||
Check je Vercel dashboard — je preview-URL verschijnt binnen een minuut.
|
||||
|
||||
### Stap 7 — Feature 2: About pagina (Background agent)
|
||||
|
||||
```bash
|
||||
git checkout main
|
||||
git checkout -b feature/about
|
||||
```
|
||||
|
||||
In Cursor → **Open background agent** met deze prompt:
|
||||
|
||||
```
|
||||
Bouw een /about pagina met team-leden in een grid.
|
||||
- 6 team-leden (mock data)
|
||||
- 1 kolom mobiel, 2 tablet, 3 desktop
|
||||
- Per persoon: foto-placeholder, naam, rol, korte bio
|
||||
- Stijl matched onze hero-section
|
||||
- Header bovenaan: "Het team"
|
||||
```
|
||||
|
||||
Terwijl de agent werkt, doe wat anders — bv. tweak je hero. Wanneer de agent klaar is, review zijn diff en apply.
|
||||
|
||||
```bash
|
||||
git add . && git commit -m "feat: about page"
|
||||
git push -u origin feature/about
|
||||
```
|
||||
|
||||
### Stap 8 — Pull Request openen
|
||||
|
||||
Op github.com (of `gh pr create --fill --web`):
|
||||
|
||||
- Open één PR (kies welke feature je eerst wilt mergen)
|
||||
- Wacht tot Vercel-bot de preview-URL post als comment
|
||||
- Open de preview-URL en check je feature live
|
||||
|
||||
### Stap 9 — Mergen
|
||||
|
||||
Klik **Merge pull request** → **Confirm merge**.
|
||||
|
||||
Open je Vercel dashboard. Je productie-URL update binnen 30–60 seconden.
|
||||
|
||||
### Stap 10 — Delen
|
||||
|
||||
In de chat (Teams) plak je:
|
||||
|
||||
- **Productie-URL** van je app
|
||||
- **PR-URL** met de Vercel-bot comment zichtbaar
|
||||
- **Preview-URL** van je tweede feature
|
||||
|
||||
---
|
||||
|
||||
## Eisen
|
||||
## Bonus — als je tijd over hebt
|
||||
|
||||
- [ ] Repo `pokedex` op GitHub, public
|
||||
- [ ] Minimaal 1 feature toegevoegd met Composer
|
||||
- [ ] App werkt lokaal (`pnpm dev`)
|
||||
- [ ] Vercel productie URL werkt
|
||||
- [ ] Tweede push triggert automatische deploy
|
||||
- [ ] Geen errors in Vercel build logs
|
||||
- Voeg een custom domein toe (Vercel → Settings → Domains)
|
||||
- Schrijf een tweede `.cursor/rules/`-bestand met `globs: ["**/*.tsx"]` dat alleen op React-bestanden actief is
|
||||
- Probeer `@-recommended` in Cursor chat
|
||||
- Test of background agent ook op grotere taken werkt (bv. "voeg een contact-form toe met server action validatie")
|
||||
|
||||
---
|
||||
|
||||
## Tijdsindeling (30 min)
|
||||
## Op te leveren
|
||||
|
||||
| Stap | Tijd |
|
||||
|------|------|
|
||||
| 1 — Next.js setup | 3 min |
|
||||
| 2 — Composer eerste feature | 10 min |
|
||||
| 3 — Detail-pagina (optioneel) | 5 min |
|
||||
| 4 — GitHub repo + push | 5 min |
|
||||
| 5 — Vercel deploy | 5 min |
|
||||
| 6 — Tweede deploy test | 2 min |
|
||||
In de chat (Teams):
|
||||
1. Productie-URL
|
||||
2. PR-URL met Vercel-bot comment
|
||||
3. Tweede preview-URL
|
||||
|
||||
---
|
||||
|
||||
## Veelvoorkomende problemen
|
||||
## Vastgelopen?
|
||||
|
||||
| Symptoom | Oplossing |
|
||||
| Probleem | Oplossing |
|
||||
|----------|-----------|
|
||||
| `next/image` klaagt over PokéAPI domein | Voeg `images.remotePatterns` toe in `next.config.ts` (vraag Composer) |
|
||||
| `pnpm: command not found` | Installeer: `npm install -g pnpm` |
|
||||
| Vercel build error: TS-error | Composer: "fix de TypeScript build error" |
|
||||
| Cursor Composer niet zichtbaar | Cmd+I — als niets gebeurt, herstart Cursor |
|
||||
| Push naar GitHub: permission denied | Setup SSH key of gebruik HTTPS met PAT |
|
||||
| Vercel deploy mislukt | Check build logs in dashboard — meestal env-var of dep-issue |
|
||||
| `npx create-next-app` hangt | check internet, of probeer `npm cache clean --force` |
|
||||
| `gh: command not found` | `brew install gh` (Mac) of `winget install GitHub.cli` |
|
||||
| Vercel detecteert geen Next.js | Output dir leeg laten in import-scherm |
|
||||
| `.env.local` lekt in commit | `git rm --cached .env.local` + check `.gitignore` |
|
||||
| Cursor rules werken niet | Check YAML front-matter syntax (geen tabs gebruiken) |
|
||||
| Background agent reageert niet | Vereist Pro of Business plan — check je Cursor-account |
|
||||
| Preview-URL geeft 404 | Build kan nog lopen — wacht 30s, check dashboard logs |
|
||||
|
||||
---
|
||||
Vraag in de chat als je vastloopt — ik kijk mee.
|
||||
|
||||
## Klaar? Verder met huiswerk
|
||||
|
||||
Het huiswerk bouwt voort op deze setup:
|
||||
|
||||
- Feature branch met **Background Agent**
|
||||
- GitHub Actions CI workflow
|
||||
- Branch protection op `main`
|
||||
- `DEPLOY.md` met reflectie over Composer vs Background
|
||||
|
||||
Zie `Les13-Huiswerk.md` of `Les13-Huiswerk.pdf`.
|
||||
|
||||
---
|
||||
|
||||
## Tips
|
||||
|
||||
- **Lees Vercel build logs** als iets faalt — meestal staat de oplossing er letterlijk in
|
||||
- **Push klein en vaak** — kleinere commits = makkelijker rollback
|
||||
- **Composer is voor pair programming** — accepteer per file, niet blind alles
|
||||
- **Sla `pokedex` url op** — die heb je nog nodig voor huiswerk
|
||||
Veel succes — en wees trots: je hele cyclus is van leeg project naar live productie.
|
||||
|
||||
Reference in New Issue
Block a user