Deploy Angular App to Cloudflare Pages

This content originally appeared on DEV Community and was authored by khalil la

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

What You’ll Build

• Angular App Name: angular-cloudflare-demo-app
• Cloudflare Project: angular-cloudflare-demo-app
• GitHub Repository: angular-cloudflare-demo-app
• Live URL: https://angular-cloudflare-demo-app.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
ng new angular-cloudflare-demo-app

# 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
cd angular-cloudflare-demo-app

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
wrangler pages project create angular-cloudflare-demo-app

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: angular-cloudflare-demo-app (same as your Angular app)
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 with your GitHub username)
git remote add origin https://github.com/YOUR_USERNAME/angular-cloudflare-demo-app.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:

name: Deploy Angular Cloudflare Demo to Cloudflare Pages

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

jobs:
  deploy:
    runs-on: ubuntu-latest
    name: Deploy Angular Cloudflare Demo 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/angular-cloudflare-demo-app/browser --project-name=angular-cloudflare-demo-app

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 Angular Cloudflare Demo to Cloudflare Pages” workflow run
3. Check Cloudflare Dashboard → Workers & Pages → angular-cloudflare-demo-app for deployment status

7.2 Access Your Live App

Once deployed, your app will be available at:

• Cloudflare URL: https://angular-cloudflare-demo-app.pages.dev

Step 8: Code Source

You can explore the complete project code and workflow setup in this public GitHub repository:

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

This content originally appeared on DEV Community and was authored by khalil la