Advanced CirclCI Cypress Testing and Deployment Pipeline with Node backend and Vue 3 frontend

config.yml

version: 2.1

orbs:
  ms-teams-notifier: oktapodia/[email protected]

# Unit tests, TypeScript tsc and E2E Cypress tests are always run
# Deployment to staging is done for every commit, if testing is successfull
# Deployment to production is only done if there is a new git tag, if testing is successfull

jobs:
  test:
    docker:
      - image: cypress/base:18.12.1
      - image: mongo:latest
        environment:
          MONGO_DATABASE: testdb
    resource_class: large
    steps:
      - checkout
      - run:
          name: Configure npm to use private repos
          command: |
            echo "registry=https://registry.npmjs.org/" > ~/.npmrc
            echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" >> ~/.npmrc
      - run:
          name: Install puppeteer dependencies
          command: |
            apt-get update && apt-get install -yq curl chromium libatk-bridge2.0-0 \
            libxkbcommon-x11-0 libwayland-client0 libgtk-3-0 xdg-utils wget ansible git
      - run:
          name: Install pnpm
          command: |
            npm install -g pnpm
      - run:
          name: Set up API
          command: |
            git clone --depth 1 [email protected]:XXX ~/api
            cd ~/api
            pnpm i
            cp config.sample.js config.js
            cp key.sample.js key.js
      - run:
          name: Start API server
          command: cd ~/api && pnpm start
          background: true
      - restore_cache:
          name: Restore pnpm Package Cache
          keys:
            - pnpm-packages-{{ checksum "pnpm-lock.yaml" }}
      - run: pnpm i
      - run: pnpm cypress cache path
      - run: pnpm cypress install
      - run: pnpm cypress verify
      - save_cache:
          name: Save pnpm Package Cache
          key: pnpm-packages-{{ checksum "pnpm-lock.yaml" }}
          paths:
            - node_modules
            - ~/.cache/Cypress
      - run:
          name: Start Frontend server
          command: pnpm dev
          background: true
      - run: sleep 3
      - run:
          name: Run vue-tsc (Validate TypeScript)
          command: pnpm tsc
      - run:
          name: Run Unit Tests
          command: pnpm unit
      - run:
          name: Run E2E cypress tests
          command: pnpm cypress:run
      - run:
          name: Run a test build
          command: pnpm build
      - store_artifacts:
          path: tests/cypress/screenshots
      - store_artifacts:
          path: tests/cypress/videos
      # - ms-teams-notifier/report:
      #     webhook_url: $MS_TEAMS_WEBHOOK_URL
  deploy_staging:
    docker:
      - image: cimg/node:current
    steps:
      - checkout
      - add_ssh_keys
      - run: ssh-keyscan $SSH_HOST >> ~/.ssh/known_hosts
      - run:
          name: Install pnpm
          command: |
            sudo npm install -g pnpm
      - restore_cache:
          name: Restore pnpm Package Cache
          keys:
            - pnpm-packages-{{ checksum "pnpm-lock.yaml" }}
      - run: pnpm i
      - save_cache:
          name: Save pnpm Package Cache
          key: pnpm-packages-{{ checksum "pnpm-lock.yaml" }}
          paths:
            - node_modules
      - run:
          name: Copy staging config
          command: cp src/config.staging.ts src/config.ts
      - run:
          name: Build for staging
          command: pnpm build
      - run:
          name: Deploy over ssh
          command: |
            scp -r dist/* $SSH_USER@$SSH_HOST:/PATH_ON_SERVER
      # - ms-teams-notifier/report:
      #     webhook_url: $MS_TEAMS_WEBHOOK_URL
  deploy_production:
    docker:
      - image: cimg/node:current
    steps:
      - checkout
      - add_ssh_keys
      - run: ssh-keyscan $SSH_HOST >> ~/.ssh/known_hosts
      - run:
          name: Install pnpm
          command: |
            sudo npm install -g pnpm
      - restore_cache:
          name: Restore pnpm Package Cache
          keys:
            - pnpm-packages-{{ checksum "pnpm-lock.yaml" }}
      - run: pnpm i
      - run:
          name: Build for production
          command: pnpm build
      - run:
          name: Deploy over ssh
          command: |
            scp -r dist/* $SSH_USER@$SSH_HOST:/PATH_ON_SERVER
      # - ms-teams-notifier/report:
      #     webhook_url: $MS_TEAMS_WEBHOOK_URL

workflows:
  test_build_deploy:
    jobs:
      - test
      - deploy_staging:
          requires:
            - test
          filters:
            branches:
              only: main
      - deploy_production:
          requires:
            - test
          filters:
           tags:
              only: /^v[0-9]+.[0-9]+.[0-9]+$/
           branches:
              ignore: /.*/