Continuous Integration (CI/CD)

Continuous Integration and Continuous Deployment (CI/CD) ensure that every change made to the code is automatically tested, built, and deployed. This process minimizes manual errors and speeds up the release cycle.

Pipeline Overview

Our CI/CD pipeline consists of two main parts:

1. GitHub Actions: Runs automated checks (linting, type checking) on every push.
2. Cloudflare Pages: Handles the building and serving of the website.

graph LR
    A[Push to GitHub] --> B{Branch?};
    B -- Feature Branch --> C[GitHub Actions];
    B -- Main Branch --> D[Cloudflare Prod Build];
    C --> E[Lint & Type Check];
    C --> F[Cloudflare Preview Build];
    D --> G[Deploy to Production];
    F --> H[Deploy to Preview URL];

GitHub Actions Workflows

We use GitHub Actions to enforce code quality before code is merged. The workflows are defined in .github/workflows/.

• Directory.github/

  • Directoryworkflows/

    • ci.yml # Continuous Integration checks
    • label-pr.yml # Auto-labeling Pull Requests

The ci.yml Workflow

This workflow runs on every push and pull_request. It performs the following checks:

1. Checkout Code: Fetches the latest code.
2. Setup Node/PNPM: Installs the correct Node.js version and pnpm.
3. Install Dependencies: Runs pnpm install.
4. Lint: Runs pnpm lint (ESLint) to catch stylistic and logic errors.
5. Type Check: Runs pnpm build (or tsc) to verify TypeScript types.

If any of these steps fail, the Pull Request cannot be merged until fixed.

Automated Builds & Deploys

Cloudflare Pages listens to webhooks from our GitHub repository.

Production Environment Main Branch

• Trigger: Push to main.
• Process: Full pnpm build.
• Result: Updates finan.eu.com.
• History: Keeps a history of deployments, allowing for one-click rollbacks if verification fails in production.

Preview Environment Pull Requests

• Trigger: Open or update a Pull Request.
• Process: Full pnpm build with preview configuration.
• Result: Deploys to a unique subdomain (e.g., 8fa3k2.finan-website.pages.dev).
• Expiry: Preview deployments persist but are generally considered temporary.

Deployment Strategy

We follow a simple Trunk-Based Development workflow:

1. Create a Branch: Developers create a feature branch (feat/new-page) from main.

2. Make Changes: Code updates are made locally and pushed to the remote branch.

3. Open PR: A Pull Request is opened against main.

   • GitHub Actions runs linting/type checks.
   • Cloudflare builds a Preview URL.

4. Review: The team reviews the Preview URL and the code.

5. Merge: Once approved, the PR is squashed and merged into main.

6. Deploy: Cloudflare automatically detects the commit on main and deploys to production.