Natuurlijk! Hier is een stapsgewijze handleiding om een CI/CD-pijplijn op te zetten voor je React frontend en Node.js backend: Stap 1: Versiebeheer en repository - Gebruik een versiebeheersysteem zoals Git. - Host je repository op platforms als GitHub, GitLab of Bitbucket. Stap 2: Kies een CI/CD-tool - Populaire opties: GitHub Actions, GitLab CI/CD, Jenkins, CircleCI, Travis CI. - Voor een eenvoudige integratie, adviseer ik GitHub Actions of GitLab CI/CD. Stap 3: Structuur van je project - Zorg dat je project gestructureerd is met aparte directories voor frontend en backend, bijvoorbeeld: /frontend (React-app) /backend (Node.js-app) Stap 4: Configuratie van de CI/CD-pijplijn Voorbeeld: GitHub Actions (je maakt een bestand `.github/workflows/ci-cd.yml`) ```yaml name: CI/CD Pipelines on: push: branches: - main pull_request: branches: - main jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 # Installeer Node.js - name: Setup Node.js uses: actions/setup-node@v3 with: node-version: '16' # Caching node modules - name: Cache node modules uses: actions/cache@v3 with: path: | frontend/node_modules backend/node_modules key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }} restore-keys: | ${{ runner.os }}-node- # Build en test frontend - name: Install dependencies frontend working-directory: ./frontend run: npm install - name: Run tests frontend working-directory: ./frontend run: npm test -- --ci - name: Build frontend working-directory: ./frontend run: npm run build # Build en test backend - name: Install dependencies backend working-directory: ./backend run: npm install - name: Run tests backend working-directory: ./backend run: npm test # Optioneel: deploy na succesvolle build - name: Deploy if: github.ref == 'refs/heads/main' && github.event_name == 'push' run: | echo "Deploy naar productie..." # Voeg hier je deployment scripts toe ``` Stap 5: Automatisering van tests - Schrijf uitgebreide unittests voor zowel frontend als backend. - Voeg linting toe (bijv. ESLint) voor codekwaliteit. - Gebruik test frameworks zoals Jest (voor React en Node.js). Stap 6: Deployment - Voor frontend: host op Netlify, Vercel, of een eigen server. - Voor backend: gebruik clouddiensten zoals Heroku, AWS, DigitalOcean, of een eigen server. - Voeg deployment scripts toe aan je CI/CD workflow, bijvoorbeeld via SSH, API calls of CLI tools. Stap 7: Best practices - Automatisch testen op elke push en pull request. - Gebruik environment variables voor gevoelige data. - Maak gebruik van cache om builds te versnellen. - Beveilig je secrets via de CI/CD-instellingen. - Monitor je deployments en voeg rollback-mogelijkheden toe. Stap 8: Extras - Voeg code coverage en kwaliteitschecks toe. - Gebruik staged deployments of canary releases voor risicoarme updates. - Documenteer je CI/CD-processen. Met deze stappen zet je een efficiënte en betrouwbare CI/CD-pijplijn op voor je full-stack project. Veel succes!

Zeker, hier is een stap-voor-stap handleiding voor het opzetten van een CI/CD-pijplijn voor jouw full-stack project: --- ### **Stap 1: Kies een CI/CD-platform** Advies: Gebruik **GitHub Actions** (gratis voor publieke repos en privé repos met beperkte minuten) of **GitLab CI/CD**. Jenkins is ook een optie maar complexer voor beginners. --- ### **Stap 2: Structuur van je Repository** Zorg voor een duidelijke structuur, bijv.: ``` mijn-project/ ├── frontend/ # React-app ├── backend/ # Node.js-app ├── .github/ │ └── workflows/ # GitHub Actions configuratie └── README.md ``` --- ### **Stap 3: Configureer GitHub Actions Workflow** Maak een bestand `.github/workflows/ci-cd.yml`: ```yaml name: CI/CD Pipeline on: push: branches: [ main, develop ] pull_request: branches: [ main ] jobs: test-frontend: runs-on: ubuntu-latest defaults: run: working-directory: ./frontend steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: node-version: '18' cache: 'npm' cache-dependency-path: './frontend/package-lock.json' - run: npm ci - run: npm test -- --watchAll=false - run: npm run build test-backend: runs-on: ubuntu-latest defaults: run: working-directory: ./backend steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: node-version: '18' cache: 'npm' cache-dependency-path: './backend/package-lock.json' - run: npm ci - run: npm test - name: Start PostgreSQL (voorbeeld) run: docker-compose up -d if: always() deploy: needs: [test-frontend, test-backend] runs-on: ubuntu-latest if: github.ref == 'refs/heads/main' steps: - uses: actions/checkout@v4 - name: Deploy to production run: echo "Implementeer je deploy-logica hier" # Voeg je deploy-stappen toe (bijv. via SSH, Docker, of platform-specifiek) ``` --- ### **Stap 4: Omgevingsvariabelen en Secrets** Gebruik **GitHub Secrets** voor gevoelige data: 1. Ga naar repo settings → Secrets and variables → Actions 2. Voeg secrets toe zoals `SSH_PRIVATE_KEY`, `API_KEYS`, `DB_CREDENTIALS` Voorbeeld van gebruik in workflow: ```yaml - name: Deploy via SSH uses: appleboy/ssh-action@master with: host: ${{ secrets.SERVER_IP }} username: ${{ secrets.SSH_USER }} key: ${{ secrets.SSH_PRIVATE_KEY }} script: | cd /app && git pull && npm ci && pm2 restart all ``` --- ### **Stap 5: Dockerisatie (Optioneel maar Aanbevolen)** Maak `Dockerfile`s voor frontend en backend: **Frontend Dockerfile:** ```dockerfile FROM node:18-alpine AS builder WORKDIR /app COPY package*.json ./ RUN npm ci COPY . . RUN npm run build FROM nginx:alpine COPY --from=builder /app/build /usr/share/nginx/html ``` **Backend Dockerfile:** ```dockerfile FROM node:18-alpine WORKDIR /app COPY package*.json ./ RUN npm ci --only=production COPY . . EXPOSE 3000 CMD ["node", "server.js"] ``` --- ### **Stap 6: Deploy Strategies** Kies een deploy-platform: - **Frontend**: Vercel, Netlify, S3 + CloudFront - **Backend**: AWS EC2, DigitalOcean, Heroku, Kubernetes Voorbeeld voor Vercel deploy: ```yaml - name: Deploy Frontend to Vercel uses: amondnet/vercel-action@v20 with: vercel-token: ${{ secrets.VERCEL_TOKEN }} vercel-org-id: ${{ secrets.ORG_ID }} vercel-project-id: ${{ secrets.PROJECT_ID }} ``` --- ### **Stap 7: Monitoring en Notificaties** Voeg notificaties toe aan je workflow: ```yaml - name: Notify Slack on failure if: failure() uses: 8398a7/action-slack@v3 with: status: failure channel: '#alerts' webhook_url: ${{ secrets.SLACK_WEBHOOK }} ``` --- ### **Best Practices**: 1. **Keep builds fast**: Gebruik caching voor dependencies 2. **Security scans**: Integreer `snyk` of `github/codeql-action` 3. **Rollback plan**: Zorg voor een strategie om snel terug te kunnen draaien 4. **Environment parity**: Zorg dat je development, staging en production omgevingen zoveel mogelijk overeenkomen 5. **Infrastructure as Code**: Gebruik Terraform of AWS CDK voor reproduceerbare omgevingen --- ### **Tools Overzicht**: - **CI/CD**: GitHub Actions, GitLab CI, Jenkins - **Testing**: Jest (React), Mocha/Chai (Node.js), Cypress (E2E) - **Deploy**: Docker, Kubernetes, PM2 (voor Node.js) - **Monitoring**: Sentry, Datadog, LogRocket --- Start met een eenvoudige pipeline en breid gradually uit. Succes met je project! 🚀