🚀 CI/CD Pipeline Setup

Continuous Integration and Continuous Deployment (CI/CD) pipelines automate building, testing, and deploying applications. This guide explains how to set up a CI/CD pipeline for a modern frontend project.

---

Prerequisites

• A Git repository hosted on GitHub, GitLab, or another platform.
• Basic understanding of Git workflows.
• Access to a CI/CD tool like GitHub Actions, GitLab CI/CD, or CircleCI.

---

GitHub Actions Example

Step 1: Create a .github Directory

Create a .github/workflows directory in your project root to store workflow files.

Step 2: Add a Workflow File

Create a new file named ci-cd.yml in the .github/workflows directory:

name: CI/CD Pipeline

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout Repository
        uses: actions/checkout@v3

      - name: Install Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 16

      - name: Install Dependencies
        run: pnpm install

      - name: Run Tests
        run: pnpm test

  deploy:
    needs: build
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main'

    steps:
      - name: Checkout Repository
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 16

      - name: Build Application
        run: pnpm build

      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v20
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-args: "--prod"
          working-directory: "./"

---

GitLab CI/CD Example

Step 1: Add .gitlab-ci.yml

Create a .gitlab-ci.yml file in the root of your repository:

stages:
  - install
  - test
  - build
  - deploy

variables:
  NODE_ENV: production

cache:
  paths:
    - node_modules/

install:
  stage: install
  script:
    - pnpm install

test:
  stage: test
  script:
    - pnpm test

build:
  stage: build
  script:
    - pnpm build

deploy:
  stage: deploy
  script:
    - npx vercel deploy --prod --token=$VERCEL_TOKEN
  only:
    - main

---

CircleCI Example

Step 1: Add .circleci/config.yml

Create a .circleci/config.yml file in the root of your repository:

version: 2.1

jobs:
  install:
    docker:
      - image: circleci/node:16
    steps:
      - checkout
      - run: pnpm install

  test:
    docker:
      - image: circleci/node:16
    steps:
      - checkout
      - run: pnpm test

  build:
    docker:
      - image: circleci/node:16
    steps:
      - checkout
      - run: pnpm build

  deploy:
    docker:
      - image: circleci/node:16
    steps:
      - checkout
      - run: npx vercel deploy --prod --token=$VERCEL_TOKEN

workflows:
  version: 2
  ci_cd:
    jobs:
      - install
      - test:
          requires:
            - install
      - build:
          requires:
            - test
      - deploy:
          requires:
            - build

Key Points

• Replace pnpm commands with your project’s package manager commands if different.
• Store sensitive data like tokens in environment variables or secrets (e.g., VERCEL_TOKEN).
• Use branch protection rules to enforce CI/CD workflows.

---

Now your CI/CD pipeline is ready! Every time you push or merge to the main branch, your application will be automatically built, tested, and deployed.