CI CD Pipeline Setup

Introduction

This page provides an overview and step-by-step guide for setting up a CI/CD pipeline for the Remix.js application using GitHub Actions. The pipeline includes using a script for Dockerizing the application and hosting it on an Ubuntu server.

GitHub Actions Workflow

We created CI/CD pipelines for all environments (dev, staging, and production)

An example of our Development CI/CD Pipeline:

name: Development CI/CD Pipeline

on:
  push:
    branches:
      - dev
    paths-ignore:
      - .github/workflows/**

concurrency:
  group: ${{ github.ref }}
  cancel-in-progress: true

jobs:
  build:
    runs-on: ubuntu-latest

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

      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '20'

      - name: Cache pnpm modules
        uses: actions/cache@v3
        with:
          path: ~/.pnpm-store
          key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
          restore-keys: |
            ${{ runner.os }}-pnpm-

      - name: Install pnpm
        uses: pnpm/action-setup@v4
        with:
          version: 9

      - name: Install dependencies
        run: pnpm install

      - name: Lint code
        run: pnpm lint

      - name: Build project
        run: pnpm build

  deploy:
    runs-on: ubuntu-latest
    needs: build

    steps:
      - name: Deploy to dev environment
        uses: appleboy/[email protected]
        with:
          host: ${{ secrets.HOST }}
          username: ${{ secrets.USERNAME }}
          password: ${{ secrets.PASSWORD }}
          script: |
            ./deploy_dev.sh remix

Secrets Configuration

In the GitHub repository, navigate to Settings > Secrets and add the following secrets:

• HOST: Your server's IP address or hostname.
• USERNAME: Your SSH username.
• PASSWORD: Your SSH password.

Running Tests

All existing unit and integration tests are executed against the build to maintain code quality.

Building the Application

The npm build command will build the Remix.js application, preparing it for deployment.

Deployment Steps

The deployment process uses an SSH action to run a deployment script (deploy_dev.sh) on the server. The script handles building the application using docker-compose and bringing them live.