Natuurlijk! Hier is een overzicht en een voorbeeld van hoe je een geautomatiseerde build- en deploymentpipeline voor je Svelte-project kunt opzetten met GitHub Actions, inclusief CI/CD en deployment naar Vercel met preview-omgevingen. **Stap 1: Voorbereiding** - Zorg dat je project in een GitHub-repository staat. - Zorg dat je Vercel-account is gekoppeld aan je GitHub-repository. - Installeer de Vercel CLI en authenticatie via een personal access token of via de GitHub-integratie. --- **Stap 2: GitHub Actions Workflow opzetten** Maak een workflowbestand in `.github/workflows/ci-cd.yml`. Hier is een voorbeeld: ```yaml name: CI/CD voor Svelte met Vercel on: push: branches: - main - 'feature/*' # Voor feature branches die previews willen maken pull_request: branches: - main jobs: build: runs-on: ubuntu-latest steps: - name: Checkout repository uses: actions/checkout@v3 - name: Set up Node.js uses: actions/setup-node@v3 with: node-version: '18' # of andere gewenste versie - name: Install dependencies run: npm install - name: Run tests run: npm test - name: Build project run: npm run build deploy: needs: build runs-on: ubuntu-latest if: github.ref != 'refs/heads/main' && startsWith(github.ref, 'refs/heads/feature/') steps: - name: Checkout repository uses: actions/checkout@v3 - name: Set up Node.js uses: actions/setup-node@v3 with: node-version: '18' - name: Install dependencies run: npm install - name: Build project run: npm run build - name: Deploy Preview naar Vercel env: VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }} run: | npm install -g vercel vercel --prod --confirm --token $VERCEL_TOKEN --scope your-team-or-team-name ``` **Uitleg:** - Bij elke push naar een feature branch of pull request wordt de build uitgevoerd. - Voor feature branches worden automatisch previews gemaakt via Vercel. - Voor de main branch kan je een aparte deployment workflow toevoegen die automatisch naar productie deployt. --- **Stap 3: Vercel integratie en secrets** - Voeg je Vercel token toe als secret in GitHub: - Ga naar je GitHub repo > Settings > Secrets > New repository secret. - Noem het bijvoorbeeld `VERCEL_TOKEN`. - In Vercel: - Maak een project aan. - Verbind je GitHub repo. - Configureer automatisch de deployment pipelines. - Vercel creëert automatisch preview-omgevingen voor feature branches. --- **Stap 4: Extra tips** - Gebruik environment variables in Vercel voor API keys en configuratie. - Voeg statuschecks toe in GitHub voor build en deployment success. - Maak gebruik van branch-specific workflows voor meer controle. --- **Kort samengevat:** - CI: Gebouwd met `npm install`, testen en build in GitHub Actions. - CD: Deployment naar Vercel via de CLI, automatisch voor feature branches en handmatig of automatisch voor main. - Preview-omgevingen: Automatisch gegenereerd door Vercel voor elke feature branch. Wil je een meer gedetailleerde configuratie of hulp bij specifieke stappen?

Zeker! Hier is een stapsgewijze handleiding voor het opzetten van een CI/CD-pipeline voor je Svelte-project met GitHub Actions en deployment naar Vercel. ### Stap 1: Voorbereiding 1. **Zorg dat je code op GitHub staat** 2. **Vercel account koppelen** - Installeer de Vercel CLI: `npm i -g vercel` - Login: `vercel login` - Link project: `vercel link` (creëert `.vercel` map) ### Stap 2: GitHub Secrets configureren Ga naar je GitHub repo → Settings → Secrets → New repository secret: - `VERCEL_ORG_ID` (vind je in `.vercel/project.json`) - `VERCEL_PROJECT_ID` (vind je in `.vercel/project.json`) - `VERCEL_TOKEN` (aanmaken via vercel.com/account/tokens) ### Stap 3: GitHub Actions Workflow maken Maak bestand: `.github/workflows/deploy.yml` ```yaml name: Deploy to Vercel on: push: branches: [ main, develop ] pull_request: branches: [ main ] jobs: build-and-test: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - name: Setup Node.js uses: actions/setup-node@v3 with: node-version: '18' cache: 'npm' - name: Install dependencies run: npm ci - name: Run tests run: npm test - name: Build project run: npm run build deploy: runs-on: ubuntu-latest needs: build-and-test if: github.event_name == 'push' && (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/develop') steps: - uses: actions/checkout@v3 - name: Setup Node.js uses: actions/setup-node@v3 with: node-version: '18' - name: Install dependencies run: npm ci - name: Build project run: npm run build - name: Deploy to Vercel uses: amondnet/vercel-action@v20 with: vercel-token: ${{ secrets.VERCEL_TOKEN }} vercel-org-id: ${{ secrets.VERCEL_ORG_ID }} vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }} vercel-args: '--prod' # Alleen voor main branch ``` ### Stap 4: Preview Omgevingen voor Pull Requests Voeg deze job toe aan je workflow: ```yaml preview-deploy: runs-on: ubuntu-latest if: github.event_name == 'pull_request' steps: - uses: actions/checkout@v3 - name: Setup Node.js uses: actions/setup-node@v3 with: node-version: '18' - name: Install dependencies run: npm ci - name: Build project run: npm run build - name: Deploy Preview uses: amondnet/vercel-action@v20 with: vercel-token: ${{ secrets.VERCEL_TOKEN }} vercel-org-id: ${{ secrets.VERCEL_ORG_ID }} vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }} vercel-args: '--meta githubCommitSha=${{ github.sha }}' ``` ### Stap 5: Aanvullende configuraties **package.json scripts (voorbeeld):** ```json { "scripts": { "build": "vite build", "test": "vitest run", "lint": "eslint ." } } ``` **Vercel configuratie (vercel.json):** ```json { "version": 2, "builds": [ { "src": "package.json", "use": "@vercel/static-build" } ], "routes": [ { "src": "/(.*)", "dest": "/index.html" } ] } ``` ### Stap 6: Branch Strategy - `main` → productie deployment - `develop` → staging deployment - Pull requests → preview deployment ### Belangrijke punten: 1. **Tests worden altijd eerst uitgevoerd** 2. **Preview URLs verschijnen automatisch in pull requests** 3. **Cache optimalisatie voor snellere builds** 4. **Automatische rollback bij mislukte deployment** Deze setup zorgt voor volledig geautomatiseerde testing, building en deployment met preview-omgevingen voor elke wijziging!