Natuurlijk! Hieronder vind je een stapsgewijze gids voor het opzetten van een CI/CD-pipeline voor je React Webapp met GitHub Actions: **1. Basisstructuur van je GitHub Actions workflow** Maak een nieuwe directory in je repository: `.github/workflows/`. Maak daarin een bestand, bijvoorbeeld `ci-cd.yml`. **2. Voorbeeld workflow voor automatisch testen en bouwen** ```yaml name: React Webapp CI/CD on: push: branches: - main pull_request: branches: - main jobs: build-and-test: runs-on: ubuntu-latest steps: - name: Check out repository uses: actions/checkout@v3 - name: Set up Node.js uses: actions/setup-node@v3 with: node-version: '16' # Kies de versie die je gebruikt - name: Cache node modules uses: actions/cache@v3 with: path: ~/.npm key: ${{ runner.os }}-node-${{ hashFiles('package-lock.json') }} restore-keys: | ${{ runner.os }}-node- - name: Install dependencies run: npm install - name: Run tests run: npm test - name: Build project run: npm run build ``` **3. Automatiseren van deployment (bijvoorbeeld naar GitHub Pages of een server)** Voor een eenvoudige deployment naar GitHub Pages kun je bijvoorbeeld de `gh-pages`-branch gebruiken: ```yaml deploy: needs: build-and-test runs-on: ubuntu-latest if: github.ref == 'refs/heads/main' # alleen deploy bij merge naar main steps: - name: Check out repository uses: actions/checkout@v3 - name: Set up Node.js uses: actions/setup-node@v3 with: node-version: '16' - name: Install dependencies run: npm install - name: Build project run: npm run build - name: Deploy to GitHub Pages uses: peaceiris/actions-gh-pages@v3 with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_dir: ./build ``` **4. Extra tips voor optimalisatie** - Voeg `test`-scripts toe in je `package.json` zodat je `npm test` makkelijk kunt gebruiken. - Gebruik cache om afhankelijkheden sneller te installeren. - Automatiseer ook linting en codekwaliteitstools zoals ESLint. - Voeg eventueel staging- en productie-omgevingen toe voor meer geavanceerde CD. **5. Samenvatting** - Automatische tests bij elke commit en pull request. - Automatische builds. - Geautomatiseerde deployment na succesvolle tests. - Gebruik van caching voor efficiëntie. Wil je dat ik een complete voorbeeldworkflow voor jouw specifieke project opstel, inclusief deploy naar een specifieke omgeving?

Absoluut! Hier is een uitgebreide, stap-voor-stap handleiding voor het opzetten van een robuuste CI/CD-pipeline voor je React Webapp met GitHub Actions. --- ### **Stap 1: Voorbereiding van je Project** Zorg ervoor dat je `package.json` correct is ingesteld met de nodige scripts. Deze zijn cruciaal voor automatisering. ```json { "name": "react-webapp", "version": "1.0.0", "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --watchAll=false --coverage", // Belangrijk: voeg `--watchAll=false` toe voor CI "eject": "react-scripts eject" }, // ... andere dependencies } ``` * `--watchAll=false`: Dit zorgt ervoor dat Jest (de testrunner van React) de tests één keer uitvoert en afsluit, in plaats van te wachten op wijzigingen (wat het standaardgedrag is). Dit is essentieel voor een geautomatiseerde omgeving. * `--coverage`: Optioneel, maar zeer aan te raden. Genereert een test coverage rapport. --- ### **Stap 2: Aanmaken van de GitHub Actions Workflow** 1. Ga in de root van je projectrepository op GitHub naar het tabblad **Actions**. 2. Klik op **set up a workflow yourself** of **New workflow**. 3. GitHub maakt een nieuwe YAML-file voor je aan op de volgende locatie: `.github/workflows/` (bijv. `ci-cd-pipeline.yml`). Vervang de standaardinhoud door het volgende configuratiebestand: ```yaml name: CI/CD Pipeline for React Webapp # WANNEER moet de pipeline draaien? on: push: branches: [ main, develop ] # Start bij elke push naar main of develop pull_request: branches: [ main ] # Start ook bij PR's die naar main gericht zijn # Wat zijn de toegestane omgevingen? (Optioneel, maar goed voor beveiliging en controle) env: NODE_VERSION: '20' # Gebruik een LTS-versie van Node.js voor stabiliteit # De JOBS die uitgevoerd moeten worden jobs: # JOB 1: Test en Build test-and-build: name: Run Tests & Build Production Bundle runs-on: ubuntu-latest # De virtuele machine waarop de job draait strategy: matrix: node-version: [20.x] # Je kunt meerdere versies testen voor compatibiliteit steps: # Stap 1: Code uitchecken - name: Checkout repository uses: actions/checkout@v4 # Stap 2: Node.js setup - name: Setup Node.js ${{ matrix.node-version }} uses: actions/setup-node@v4 with: node-version: ${{ matrix.node-version }} cache: 'npm' # Snelheidswinst: caches node_modules tussen runs # Stap 3: dependencies installeren - name: Install dependencies run: npm ci # Gebruik `ci` i.p.v. `install` voor een betrouwbare, lockfile-based install # 'npm ci' is sneller en strikter dan 'npm install' # Stap 4: Tests uitvoeren - name: Run tests run: npm test # Je kunt ook een drempel voor test coverage instellen: # run: npm test -- --coverage --coverageThreshold='{"global":{"lines":80}}' # Stap 5: Production build maken - name: Build project run: npm run build # Stap 6: (Optioneel) Build-artefact uploaden voor later gebruik (bijv. deployment) - name: Upload production build uses: actions/upload-artifact@v4 with: name: build-files path: build/ # JOB 2: Deployment (voorbeeld voor Vercel/Netlify - pas aan naar jouw hosting) deploy-prod: name: Deploy to Production # Deze job is afhankelijk van het slagen van de test-and-build job needs: test-and-build # Beperk deze job alleen tot de main branch na een push if: github.ref == 'refs/heads/main' runs-on: ubuntu-latest steps: - name: Checkout repository uses: actions/checkout@v4 - name: Download build artifact uses: actions/download-artifact@v4 with: name: build-files path: build/ # VOORBEELD 1: Deployment naar Vercel - name: Deploy to Vercel uses: vercel/action@v28 with: vercel-token: ${{ secrets.VERCEL_TOKEN }} # Token opgeslagen in GitHub Secrets vercel-org-id: ${{ secrets.ORG_ID }} vercel-project-id: ${{ secrets.PROJECT_ID }} # env: # VERCEL_ENV: production # VOORBEELD 2: Deployment naar Netlify # - name: Deploy to Netlify # uses: netlify/actions/cli@master # env: # NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }} # NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }} # with: # args: deploy --dir=build --prod ``` --- ### **Stap 3: Uitleg en Optimalisaties** * **`on:`**: Dit blok definieert de triggers. Het is een best practice om tests te draaien op elke push en elke pull request. Dit vangt bugs vroegtijdig op. * **`npm ci`**: Gebruik dit commando in plaats van `npm install`. Het is sneller voor CI-omgevingen en garandeert een installatie die exact overeenkomt met je `package-lock.json`. * **Caching**: De regel `cache: 'npm'` in `actions/setup-node` is een enorme optimalisatie. Het slaat de `node_modules` map op, waardoor volgende workflow-runs minuten sneller kunnen zijn. * **Matrix Strategy**: Hiermee kun je je pipeline tegen meerdere Node.js-versies laten testen. Handig om compatibiliteitsproblemen te vinden. * **Artefacten**: De `upload-artifact` en `download-artifact` stappen zijn essentieel als je build-stappen en deployment-stappen in aparte jobs splitst (wat aan te raden is voor een heldere scheiding van taken). --- ### **Stap 4: GitHub Secrets voor Veilige Deployment** Voor deployment heb je vaak API-tokens nodig. **Deze sla je nooit rechtstreeks in je code op!** 1. Ga in je GitHub-repo naar **Settings** > **Secrets and variables** > **Actions**. 2. Klik op **New repository secret**. 3. Voer de naam in (bijv. `VERCEL_TOKEN`) en plak de waarde (het token van je hostingprovider). 4. Verwijs ernaar in je YAML-file met `${{ secrets.VERCEL_TOKEN }}`. --- ### **Stap 5: Uitbreidingen en Vervolgstappen** * **Linting**: Voeg een stap toe om je code kwaliteit te controleren met ESLint: `- run: npx eslint .` * **Security Scanning**: Gebruik de officiële `github/codeql-action/analyze` action om je code automatisch op beveiligingslekken te scannen. * **E2E Testing**: Voor end-to-end tests met Cypress of Playwright zijn er speciale community-actions beschikbaar om ze eenvoudig in je pipeline te integreren. * **Workflow Status Badge**: Voeg een badge toe aan je `README.md` om de status van je build te tonen: `[](https://github.com/<jouw-gebruikersnaam>/<jouw-repo-naam>/actions)` Commit en push dit bestand naar je repository. GitHub Actions zal de workflow automatisch detecteren en uitvoeren bij de volgende push of pull request. Je kunt de live voortgang en logs bekijken op het **Actions**-tabblad van je repository. Succes met het implementeren!