CI/CD for an Ionic App with GitHub Actions

Lint, test, and build your Ionic web bundle on every push.

Ionic builds on a web framework (Angular, React, or Vue) and emits a static web bundle that runs as a web app or wraps into a native shell via Capacitor. This recipe validates and builds the web output.

What the pipeline does

install deps with npm ci
lint with the framework linter
test in headless mode
build with ionic build
deploy the www or dist directory

The workflow

ionic build wraps the underlying framework build and emits a static web bundle (www for Angular, dist for Vite-based templates). Sync it to native platforms later with npx cap sync.

.github/workflows/ci.yml

name: CI
on:
  push:
    branches: [main]
  pull_request:
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm
      - run: npm ci
      - run: npm run lint --if-present
      - run: npm test --if-present -- --watch=false
      - run: npx ionic build
      - uses: actions/upload-artifact@v4
        with:
          name: web-build
          path: www

Caching and speed

cache: npm covers installs and the framework build cache (Angular .angular/cache or Vite node_modules/.vite) speeds rebuilds. Builds are moderate; cheaper managed runners such as Latchkey keep frequent runs inexpensive and auto-retry transient npm failures.

Deploying

Deploy the web bundle to Pages, Netlify, or S3+CloudFront for the PWA target. For native, run npx cap sync and build the iOS or Android project in a separate job on macOS or Linux runners.

Key takeaways

ionic build wraps the underlying framework build.
The web bundle deploys like any static site or PWA.
Native targets come from npx cap sync plus a platform build.