How to Set Up CI/CD With GitHub Actions for Web Apps

Manual deployments, manual FTP file transfers, and ad-hoc terminal scripts introduce human error, inconsistent builds, and unexpected downtime to production platforms. Modern software teams eliminate these risks by automating their release pipelines from the very first commit. Learning how to set up CI/CD with GitHub Actions gives developers a unified, cloud-native automation framework directly inside their code repositories.

Continuous Integration (CI) guarantees that every pull request passes static analysis, code formatting, and automated test suites before merging into primary branches. Continuous Deployment (CD) automatically compiles assets and ships verified artifacts to staging or production hosting environments. In this practical guide, we build an end-to-end CI/CD workflow for modern web applications using GitHub Actions on GitHub. If you are also deploying static frontends, explore our breakdown on deploying React apps for free.

1. Core Concepts and Workflow Architecture

GitHub Actions structures automated workflows around simple YAML files located within your repository in the .github/workflows/ directory:

• Events (Triggers): The triggers that start a workflow, such as a git push to main or opening a pull request.
• Jobs: Independent execution sequences running on isolated virtual machines (such as ubuntu-latest).
• Steps: Individual tasks executed within a job, such as installing packages or running tests.
• Actions: Reusable pre-packaged components from the GitHub Marketplace (e.g., actions/checkout).

2. Complete Web Application CI/CD Pipeline

Below is a production-grade YAML configuration (.github/workflows/deploy.yml) that lints, tests, builds, and deploys a web application whenever changes are merged into the main branch:

name: Production CI/CD Pipeline

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

# Prevent redundant concurrent builds on rapid pushes
concurrency:
  group: ${{ github.workflow }}-${{ github.ref }}
  cancel-in-progress: true

jobs:
  test_and_build:
    name: Lint, Test, and Build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Code
        uses: actions/checkout@v4

      - name: Setup Node.js Runtime
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'

      - name: Install Dependencies
        run: npm ci

      - name: Run Linter
        run: npm run lint --if-present

      - name: Execute Automated Test Suite
        run: npm test -- --coverage --passWithNoTests

      - name: Build Production Bundle
        run: npm run build

      - name: Archive Production Artifacts
        if: github.ref == 'refs/heads/main' && github.event_name == 'push'
        uses: actions/upload-artifact@v4
        with:
          name: production-dist
          path: dist/
          retention-days: 7

  deploy:
    name: Deploy to Production
    needs: test_and_build
    if: github.ref == 'refs/heads/main' && github.event_name == 'push'
    runs-on: ubuntu-latest
    steps:
      - name: Download Build Artifacts
        uses: actions/download-artifact@v4
        with:
          name: production-dist
          path: dist/

      - name: Deploy to Cloud Provider
        env:
          DEPLOY_KEY: ${{ secrets.PRODUCTION_DEPLOY_KEY }}
        run: |
          echo "Deploying verified build to production environment..."
          # Insert deployment CLI command (e.g., vercel --prod, aws s3 sync, rsync)

3. Securing Secrets and Environment Variables

Never commit production credentials, database connection strings, or server SSH keys to source control. Instead, store them in GitHub Encrypted Secrets:

1. In your GitHub repository, navigate to Settings > Secrets and variables > Actions.
2. Click New repository secret.
3. Provide a descriptive name (e.g., PRODUCTION_DEPLOY_KEY) and paste the token or private key.
4. Reference the secret in your workflow YAML using ${{ secrets.PRODUCTION_DEPLOY_KEY }}. GitHub automatically masks these secrets in build logs.

Safety Gates in Modern Web CI/CD Pipelines

A resilient pipeline enforces quality checkpoints before code reaches end users:

Automating Your Modern Deployment Pipeline

Taking time to set up CI/CD with GitHub Actions is one of the highest-leverage investments a web development team can make. By replacing manual deployments with automated validation gates, you catch syntax errors and regressions before they impact users.

With dependency caching, branch concurrency protections, and encrypted secrets configured, your development cycle accelerates, allowing your team to deploy code with confidence multiple times a day.