Bootspring
HomeGet Started

Tutorial: CI/CD Integration

Set up continuous integration and deployment with Bootspring quality gates.

What You'll Build#

  • GitHub Actions workflow
  • Automated testing pipeline
  • Quality gate enforcement
  • Preview deployments
  • Production deployment

Prerequisites#

  • GitHub repository
  • Vercel account (for deployment)
  • Bootspring initialized

Time Required#

Approximately 25 minutes.

Step 1: Create Quality Workflow#

Create a GitHub Actions workflow that runs Bootspring quality gates:

1# .github/workflows/quality.yml 2name: Quality Gates 3 4on: 5 push: 6 branches: [main, develop] 7 pull_request: 8 branches: [main] 9 10env: 11 BOOTSPRING_API_KEY: ${{ secrets.BOOTSPRING_API_KEY }} 12 13jobs: 14 quality: 15 name: Quality Checks 16 runs-on: ubuntu-latest 17 18 steps: 19 - name: Checkout 20 uses: actions/checkout@v4 21 22 - name: Setup Node.js 23 uses: actions/setup-node@v4 24 with: 25 node-version: '20' 26 cache: 'npm' 27 28 - name: Install dependencies 29 run: npm ci 30 31 - name: Run pre-commit checks 32 run: npx bootspring quality pre-commit 33 34 - name: Run pre-push checks 35 run: npx bootspring quality pre-push 36 37 test: 38 name: Tests 39 runs-on: ubuntu-latest 40 needs: quality 41 42 services: 43 postgres: 44 image: postgres:15 45 env: 46 POSTGRES_USER: test 47 POSTGRES_PASSWORD: test 48 POSTGRES_DB: test 49 options: >- 50 --health-cmd pg_isready 51 --health-interval 10s 52 --health-timeout 5s 53 --health-retries 5 54 ports: 55 - 5432:5432 56 57 steps: 58 - name: Checkout 59 uses: actions/checkout@v4 60 61 - name: Setup Node.js 62 uses: actions/setup-node@v4 63 with: 64 node-version: '20' 65 cache: 'npm' 66 67 - name: Install dependencies 68 run: npm ci 69 70 - name: Setup database 71 env: 72 DATABASE_URL: postgresql://test:test@localhost:5432/test 73 run: npx prisma db push 74 75 - name: Run unit tests 76 run: npm run test 77 78 - name: Run integration tests 79 env: 80 DATABASE_URL: postgresql://test:test@localhost:5432/test 81 run: npm run test:integration 82 83 - name: Upload coverage 84 uses: codecov/codecov-action@v3 85 with: 86 files: ./coverage/lcov.info

Step 2: Add E2E Testing#

1# .github/workflows/e2e.yml 2name: E2E Tests 3 4on: 5 push: 6 branches: [main] 7 pull_request: 8 branches: [main] 9 10jobs: 11 e2e: 12 name: Playwright Tests 13 runs-on: ubuntu-latest 14 15 steps: 16 - name: Checkout 17 uses: actions/checkout@v4 18 19 - name: Setup Node.js 20 uses: actions/setup-node@v4 21 with: 22 node-version: '20' 23 cache: 'npm' 24 25 - name: Install dependencies 26 run: npm ci 27 28 - name: Install Playwright browsers 29 run: npx playwright install --with-deps 30 31 - name: Build application 32 run: npm run build 33 env: 34 SKIP_ENV_VALIDATION: true 35 36 - name: Run E2E tests 37 run: npx playwright test 38 39 - name: Upload test results 40 uses: actions/upload-artifact@v4 41 if: always() 42 with: 43 name: playwright-report 44 path: playwright-report/ 45 retention-days: 7

Step 3: Create Preview Deployment#

1# .github/workflows/preview.yml 2name: Preview Deployment 3 4on: 5 pull_request: 6 branches: [main] 7 8jobs: 9 preview: 10 name: Deploy Preview 11 runs-on: ubuntu-latest 12 13 steps: 14 - name: Checkout 15 uses: actions/checkout@v4 16 17 - name: Deploy to Vercel 18 id: deploy 19 uses: amondnet/vercel-action@v25 20 with: 21 vercel-token: ${{ secrets.VERCEL_TOKEN }} 22 vercel-org-id: ${{ secrets.VERCEL_ORG_ID }} 23 vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }} 24 github-token: ${{ secrets.GITHUB_TOKEN }} 25 scope: ${{ secrets.VERCEL_ORG_ID }} 26 27 - name: Comment PR 28 uses: actions/github-script@v7 29 with: 30 script: | 31 github.rest.issues.createComment({ 32 issue_number: context.issue.number, 33 owner: context.repo.owner, 34 repo: context.repo.repo, 35 body: `## šŸš€ Preview Deployment\n\nāœ… Deployed to: ${{ steps.deploy.outputs.preview-url }}` 36 })

Step 4: Production Deployment#

1# .github/workflows/deploy.yml 2name: Production Deployment 3 4on: 5 push: 6 branches: [main] 7 8jobs: 9 quality: 10 name: Quality Gates 11 runs-on: ubuntu-latest 12 13 steps: 14 - uses: actions/checkout@v4 15 - uses: actions/setup-node@v4 16 with: 17 node-version: '20' 18 cache: 'npm' 19 - run: npm ci 20 - run: npx bootspring quality pre-deploy 21 env: 22 BOOTSPRING_API_KEY: ${{ secrets.BOOTSPRING_API_KEY }} 23 24 test: 25 name: Tests 26 runs-on: ubuntu-latest 27 needs: quality 28 29 steps: 30 - uses: actions/checkout@v4 31 - uses: actions/setup-node@v4 32 with: 33 node-version: '20' 34 cache: 'npm' 35 - run: npm ci 36 - run: npm run test 37 - run: npm run test:integration 38 39 deploy: 40 name: Deploy 41 runs-on: ubuntu-latest 42 needs: [quality, test] 43 environment: production 44 45 steps: 46 - name: Checkout 47 uses: actions/checkout@v4 48 49 - name: Deploy to Vercel 50 uses: amondnet/vercel-action@v25 51 with: 52 vercel-token: ${{ secrets.VERCEL_TOKEN }} 53 vercel-org-id: ${{ secrets.VERCEL_ORG_ID }} 54 vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }} 55 vercel-args: '--prod' 56 github-token: ${{ secrets.GITHUB_TOKEN }} 57 58 - name: Notify success 59 uses: slackapi/slack-github-action@v1 60 with: 61 payload: | 62 { 63 "text": "āœ… Deployed to production: ${{ github.event.head_commit.message }}" 64 } 65 env: 66 SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK }}

Step 5: Add Branch Protection#

Configure branch protection rules in GitHub:

  1. Go to Settings ā†’ Branches
  2. Add rule for main:
    • Require status checks before merging
    • Require branches to be up to date
    • Select required checks:
      • Quality Checks
      • Tests
      • Playwright Tests
    • Require review from code owners

Step 6: Configure Secrets#

Add secrets in GitHub Settings ā†’ Secrets and variables ā†’ Actions:

SecretDescription
BOOTSPRING_API_KEYBootspring API key
VERCEL_TOKENVercel API token
VERCEL_ORG_IDVercel organization ID
VERCEL_PROJECT_IDVercel project ID
SLACK_WEBHOOKSlack webhook URL
CODECOV_TOKENCodecov upload token

Step 7: Create Database Migrations Workflow#

1# .github/workflows/migrations.yml 2name: Database Migrations 3 4on: 5 push: 6 branches: [main] 7 paths: 8 - 'prisma/schema.prisma' 9 - 'prisma/migrations/**' 10 11jobs: 12 migrate: 13 name: Run Migrations 14 runs-on: ubuntu-latest 15 environment: production 16 17 steps: 18 - name: Checkout 19 uses: actions/checkout@v4 20 21 - name: Setup Node.js 22 uses: actions/setup-node@v4 23 with: 24 node-version: '20' 25 cache: 'npm' 26 27 - name: Install dependencies 28 run: npm ci 29 30 - name: Run migrations 31 env: 32 DATABASE_URL: ${{ secrets.DATABASE_URL }} 33 run: npx prisma migrate deploy 34 35 - name: Notify on failure 36 if: failure() 37 uses: slackapi/slack-github-action@v1 38 with: 39 payload: | 40 { 41 "text": "āŒ Database migration failed! Check GitHub Actions." 42 } 43 env: 44 SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK }}

Step 8: Add Dependency Updates#

1# .github/dependabot.yml 2version: 2 3updates: 4 - package-ecosystem: 'npm' 5 directory: '/' 6 schedule: 7 interval: 'weekly' 8 open-pull-requests-limit: 10 9 groups: 10 production: 11 patterns: 12 - '*' 13 exclude-patterns: 14 - '@types/*' 15 - 'eslint*' 16 - 'prettier*' 17 - 'typescript' 18 development: 19 patterns: 20 - '@types/*' 21 - 'eslint*' 22 - 'prettier*' 23 - 'typescript'

Step 9: Monitor Deployments#

Vercel Analytics#

Enable Vercel Analytics in your project:

1// app/layout.tsx 2import { Analytics } from '@vercel/analytics/react'; 3import { SpeedInsights } from '@vercel/speed-insights/next'; 4 5export default function RootLayout({ children }) { 6 return ( 7 <html> 8 <body> 9 {children} 10 <Analytics /> 11 <SpeedInsights /> 12 </body> 13 </html> 14 ); 15}

Error Monitoring#

Set up Sentry:

npm install @sentry/nextjs npx @sentry/wizard@latest -i nextjs

Step 10: Test the Pipeline#

  1. Create a feature branch:

    git checkout -b feature/test-ci

  2. Make a change and push:

    echo "// test" >> lib/utils.ts git add . git commit -m "test: verify CI pipeline" git push -u origin feature/test-ci

  3. Create a pull request

  4. Verify:

    • Quality checks run
    • Tests pass
    • Preview deploys
    • PR can be merged

  5. Merge to main:

    • Production deploy triggers
    • Deployment succeeds

Verification Checklist#

  • Quality workflow runs on PRs
  • Tests run and pass
  • Preview deployments work
  • Production deployments work
  • Branch protection enabled
  • Notifications working

What You Learned#

  • GitHub Actions setup
  • Quality gate integration
  • Preview deployments
  • Production deployment pipeline
  • Branch protection

Next Steps#