Deploy Angular App to Cloudflare Pages using GitHub Actions

This guide walks you through creating a new Angular application and deploying it to Cloudflare Pages using automated GitHub Actions.

What You'll Build

⚠️ Important: Choose Your Own App Name

Since this is a template guide, you'll need to pick your own unique project names. Throughout this guide, we use your-app-name as a placeholder - replace it with your chosen name everywhere it appears.

• Angular App Name: your-app-name (choose your unique name)
• Cloudflare Project: your-app-name (same as above)
• GitHub Repository: your-app-name (same as above)
• Live URL: https://your-app-name.pages.dev

Prerequisites

• Node.js installed locally
• GitHub account
• Cloudflare account (free)

Step 1: Create New Angular Application

1.1 Install Angular CLI

# Install Angular CLI globally
npm install -g @angular/cli

# Verify installation
ng version

1.2 Create New Angular App

# Create new Angular application (replace 'your-app-name' with your chosen name)
ng new your-app-name

# You'll be prompted with options:
# ? Which stylesheet format would you like to use? CSS [ https://developer.mozilla.org/docs/Web/CSS]
# ? Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? No
# ? Do you want to create a 'zoneless' application without zone.js? No
# ? Which AI tools do you want to configure with Angular best practices? https://angular.dev/ai/develop-with-ai None

# Navigate to project directory (use your chosen app name)
cd your-app-name

1.3 Test Your App Locally

# Start development server
ng serve

# Open browser to http://localhost:4200
# You should see the Angular welcome page

Step 2: Setup Cloudflare Account & API Token

2.1 Create Cloudflare Account

1. Go to cloudflare.com and sign up
2. Verify your email address

2.2 Create API Token

1. Navigate to Dashboard → My Profile → API Tokens
2. Click Create Token → Create Custom Token
3. Configure the token:

   Token Name: Angular App Deploy
   Permissions:
   - Account - Cloudflare Pages:Edit

   Account Resources: Include - Your Account

1. Click Continue to Summary → Create Token
2. Copy and save the token (you won't see it again!)

2.3 Get Account ID

1. Go to Cloudflare Dashboard
2. In the right sidebar, copy your Account ID

Step 3: Create Cloudflare Pages Project

To set up a Cloudflare Pages project for your Angular app using Wrangler CLI, follow these steps. Wrangler is the official Cloudflare CLI tool that lets you create, manage, and deploy Pages projects quickly.

# Install Wrangler globally
npm install -g wrangler

# Authenticate with Cloudflare
wrangler login

# Create your Pages project (replace 'your-app-name' with your chosen name)
wrangler pages project create your-app-name

During setup, Wrangler will ask for the production branch name. Enter main when prompted.

Step 4: Initialize Git and Setup Repository

4.1 Initialize Git Repository

The Angular CLI automatically initializes a Git repository when you create a new project.
You can confirm this by running:

git status

If the repository is not initialized, you can set it up manually:

git init
git add .
git commit -m "Initial commit"

4.2 Create GitHub Repository

1. Go to github.com and create a new repository
2. Name it: your-app-name (same as your Angular app - use your chosen name)
3. Don't initialize with README (we already have files)
4. Copy the repository URL

4.3 Connect Local Repository to GitHub

# Add remote origin (replace YOUR_USERNAME and your-app-name with your values)
git remote add origin https://github.com/YOUR_USERNAME/your-app-name.git

# Push to GitHub
git branch -M main
git push -u origin main

Step 5: Setup GitHub Secrets

1. Go to your GitHub repository
2. Navigate to Settings → Secrets and Variables → Actions
3. Click New repository secret and add:

• Name: CLOUDFLARE_API_TOKEN, Value: Your API token
• Name: CLOUDFLARE_ACCOUNT_ID, Value: Your Account ID

Step 6: Create GitHub Action Workflow

6.1 Create Deployment Workflow

Create .github/workflows/deploy-cloudflare.yml with the following content:

⚠️ Important: Replace your-app-name with your actual app name in the YAML below

name: Deploy to Cloudflare Pages

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

jobs:
  deploy:
    runs-on: ubuntu-latest
    name: Deploy Angular App

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

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

      - name: Install dependencies
        run: npm ci

      - name: Build Angular app
        run: npm run build

      - name: Deploy to Cloudflare Pages
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          command: pages deploy dist/your-app-name/browser --project-name=your-app-name

6.2 Commit and Push Workflow

# Add the workflow file
git add .github/workflows/deploy-cloudflare.yml

# Commit the workflow
git commit -m "Add Cloudflare Pages deployment workflow"

# Push to trigger first deployment
git push origin main

Step 7: Deploy Your App

7.1 Monitor Deployment

1. Go to your GitHub repository → Actions tab
2. Watch the "Deploy to Cloudflare Pages" workflow run
3. Check Cloudflare Dashboard → Workers & Pages → your-app-name for deployment status

7.2 Access Your Live App

Once deployed, your app will be available at:

• Cloudflare URL: https://your-app-name.pages.dev

Step 8: Example Implementation

You can see a working example of this setup in this public repository (but remember to use your own app name):

• Example Repository: https://github.com/gridatek/angular-cloudflare-demo-app