Natuurlijk! Hier is een stapsgewijze gids voor het ontwerpen van een GitKraken-workflow die Git hooks integreert en taken automatiseert voor jouw React webapplicatie met Node.js backend, met een team van 3 ontwikkelaars: 1. Basisprincipes en planning - Doelstellingen: – Automatiseren van codecontroles (bijv. linting, tests) vóór commits (pre-commit) – Automatiseren van taken na commits (post-commit), zoals notificaties of deployment – Integratie met externe tools (CI/CD, code reviews) - Voorwaarden: – Gebruik van Git hooks via een gedeeld en beheerd systeem (bijv. Husky) – Duidelijke documentatie voor teamleden – Consistente configuratie 2. Git hooks beheren met Husky Omdat GitKraken zelf geen ingebouwde ondersteuning biedt voor hooks, is Husky een populaire tool om hooks te beheren die goed samenwerkt met Git en projectstructuren. - Installatie: ```bash npm install husky --save-dev ``` - Configuratie: - Voeg Husky toe aan je package.json: ```json "husky": { "hooks": { "pre-commit": "npm run lint && npm test", "post-commit": "node post-commit-script.js" } } ``` - Of gebruik de nieuwe aanpak: ```bash npx husky install ``` en voeg hooks toe via: ```bash npx husky add .husky/pre-commit "npm run lint && npm test" npx husky add .husky/post-commit "node post-commit-script.js" ``` 3. Configuratie voor React en Node.js - Pre-commit: – Linten met ESLint: ```json "lint": "eslint src/" ``` – Tests draaien, bijvoorbeeld met Jest: ```json "test": "jest" ``` - Post-commit: – Bijv. automatische deploy of notificatie: - Maak een script (bijv. post-commit-script.js) dat taken uitvoert zoals: ```js // post-commit-script.js console.log('Nieuwe commit geregistreerd. Eventueel deploy of notificaties.'); // Voeg hier bijvoorbeeld API-calls of notificatie-integraties toe ``` 4. Integratie met externe tools - CI/CD: – Configureer je CI-systemen (GitHub Actions, GitLab CI, Jenkins) om te reageren op nieuwe commits. - Code review en kwaliteitscontroles: – Gebruik pull requests en automatische checks op basis van de pre-commit hooks. - Automatisering: – Trigger deployments of tests na succesvolle merges. 5. Best practices en valkuilen vermijden - Consistentie: – Zorg dat alle teamleden dezelfde hook-configuraties gebruiken. Bijvoorbeeld door de hooks in versiebeheer op te nemen (met Husky en package.json). - Vermijd te zware hooks: – Houd pre-commit hooks snel (linting en tests) zodat ontwikkelaars niet wachten. - Documentatie: – Documenteer de workflow en instructies in een README of wiki. - Foutafhandeling: – Zorg dat scripts foutmeldingen duidelijk zijn en dat ontwikkelaars weten hoe ze problemen kunnen oplossen. - Verbetering: – Evalueer regelmatig of de hooks en automatisering nog passen bij de workflow. 6. Versiebeheer en samenwerking - Deel de configuratie: – Plaats de hook scripts in het project (bijvoorbeeld via Husky) zodat ze mee versioned worden. - Teamcommunicatie: – Informeer teamleden over de werking en belang van de hooks. - Automatisering testen: – Test nieuwe hooks op een aparte branch voordat je ze in productie neemt. Samenvatting: Door Husky te gebruiken binnen je React/Node.js-project, zet je effectieve Git hooks op die automatisch codecontroles uitvoeren, post-commit acties beheren, en naadloos integreren met externe tools. Zorg voor consistente configuratie, goede documentatie, en regelmatige evaluatie, zodat je team efficiënt en foutloos kan samenwerken. Mocht je specifieke voorbeelden nodig hebben of hulp bij het implementatieproces, laat het gerust weten!

Zeker, ik help je graag een effectieve GitKraken-workflow te ontwerpen met Git hooks voor je React/Node.js project. Hier is een complete handleiding: ## GitKraken Git Hooks Workflow voor React/Node.js Project ### 1. Projectstructuur en Hook Locaties ``` jullie-project/ ├── client/ # React frontend ├── server/ # Node.js backend ├── .git/ │ └── hooks/ # Lokale hooks (niet aanbevolen voor team) └── .githooks/ # Aanbevolen: gedeelde hooks in repository ``` ### 2. Aanbevolen Hook Setup voor Team **Gebruik gedeelde hooks in repository:** ```bash # In project root mkdir .githooks git config core.hooksPath .githooks ``` ### 3. Essentiële Hooks voor Jullie Stack **Pre-commit Hook (`.githooks/pre-commit`):** ```bash #!/bin/bash echo "🚀 Pre-commit checks gestart..." # Frontend checks cd client echo "📦 React dependencies controleren..." npm audit --audit-level moderate echo "🔍 ESLint uitvoeren..." npm run lint echo "🎨 Prettier formattering controleren..." npm run format:check echo "🧪 Unit tests uitvoeren..." npm test -- --watchAll=false --passWithNoTests # Backend checks cd ../server echo "🔧 Backend dependencies controleren..." npm audit --audit-level moderate echo "📝 Backend ESLint..." npm run lint echo "✅ Pre-commit checks voltooid!" ``` **Pre-push Hook (`.githooks/pre-push`):** ```bash #!/bin/bash echo "🧪 Uitgebreide tests voor push..." cd client echo "🏗️ React build test..." npm run build cd ../server echo "🔄 Backend build test..." npm run build echo "📊 Test coverage controleren..." npm run test:coverage ``` **Post-merge & Post-checkout (`.githooks/post-merge`):** ```bash #!/bin/bash echo "🔄 Dependencies installeren na merge/checkout..." cd client && npm install cd ../server && npm install echo "✅ Dependencies bijgewerkt!" ``` ### 4. GitKraken Configuratie **In GitKraken GUI:** 1. **Repository instellingen:** - Ga naar `Preferences` → `Git` - Zet `core.hooksPath` op `.githooks` 2. **Hook beheer:** - Hooks zijn zichtbaar in commit-process - Foutmeldingen worden getoond in GitKraken interface ### 5. Team Workflow Best Practices **Hook versiebeheer:** ```bash # Voeg hooks toe aan versiebeheer git add .githooks/ git commit -m "feat: add shared git hooks" ``` **Hook templates voor team:** ```json // .githooks/README.md { "pre-commit": "Code kwaliteit & tests", "pre-push": "Build & integration tests", "post-merge": "Auto dependency install", "commit-msg": "Commit message format" } ``` ### 6. Specifieke Hooks voor React/Node.js **Commit Message Hook (`.githooks/commit-msg`):** ```bash #!/bin/bash commit_msg=$(cat $1) # Conventional commits pattern if ! echo "$commit_msg" | grep -qE "^(feat|fix|docs|style|refactor|test|chore)\(?(\w+)?\)?:\s.+"; then echo "❌ Commit message moet voldoen aan: type(scope): description" echo "💡 Bijvoorbeeld: feat(auth): add login functionality" exit 1 fi ``` **Environment Check Hook (`.githooks/pre-commit` aanvulling):** ```bash # Node version check REQUIRED_NODE="18" CURRENT_NODE=$(node -v | cut -d'v' -f2 | cut -d'.' -f1) if [ "$CURRENT_NODE" -lt "$REQUIRED_NODE" ]; then echo "❌ Node.js versie 18+ vereist" exit 1 fi ``` ### 7. Veelvoorkomende Valkuilen en Oplossingen **1. Performance issues:** ```bash # Gebruik staged files alleen voor linting git diff --cached --name-only --diff-filter=ACM | grep '\.js$' | xargs npx eslint ``` **2. Platform compatibility:** ```bash #!/bin/bash # Gebruik /usr/bin/env voor portabiliteit #!/usr/bin/env bash ``` **3. Hook failures beheren:** ```bash # Bypass voor urgente fixes (gebruik spaarzaam!) git commit --no-verify ``` ### 8. Geavanceerde Automatisering **CI Integration Hook:** ```bash #!/bin/bash # .githooks/pre-push aanvulling echo "🔗 CI variabelen controleren..." if [ -n "$CI" ]; then echo "🏃‍♂️ CI omgeving - uitgebreide tests" npm run test:ci fi ``` **Dependency Audit Hook:** ```bash #!/bin/bash # .githooks/pre-commit aanvulling echo "🔒 Security audit..." npm audit --audit-level high if [ $? -ne 0 ]; then echo "⚠️ Security issues gevonden - los op voor commit" exit 1 fi ``` ### 9. Team Afspraken Document **In `DEVELOPMENT.md`:** ```markdown ## Git Hooks Workflow 1. **Pre-commit**: Code kwaliteit & unit tests 2. **Pre-push**: Build & integration tests 3. **Commit format**: conventional commits 4. **Bypass**: Alleen voor urgente hotfixes met teamoverleg 5. **Hook updates**: Via PR met team review ``` ### 10. Onderhoud en Updates **Hook health check script:** ```bash #!/bin/bash # scripts/verify-hooks.sh echo "🔍 Hooks status controleren..." ls -la .githooks/ git config core.hooksPath echo "✅ Hooks geconfigureerd in: $(git config core.hooksPath)" ``` Deze workflow zorgt voor consistente codekwaliteit, automatiseert routine taken en voorkomt veelvoorkomende fouten, terwijl het perfect integreert met GitKraken voor je team van 3 ontwikkelaars.