Angular

import { PagesBuildPreset, Render, PackageManagers } from "~/components";

Angular is an incredibly popular framework for building reactive and powerful front-end applications.

In this guide, you will create a new Angular application and deploy it using Cloudflare Pages.

Create a new project using the create-cloudflare CLI (C3)

Use the create-cloudflare CLI (C3) to set up a new project. C3 will create a new project directory, initiate Angular's official setup tool, and provide the option to deploy instantly.

To use create-cloudflare to create a new Angular project, run the following command:

create-cloudflare will install dependencies, including the Wrangler CLI and the Cloudflare Pages adapter, and ask you setup questions.

:::note[Git integration]

The initial deployment created via C3 is referred to as a Direct Upload. To set up a deployment via the Pages Git integration, refer to the Git Integration section below.

:::

Create a GitHub repository

# Skip the following three commands if you have built your application
# using C3 or already committed your changes
git init
git add .
git commit -m "Initial commit"

git branch -M main
git remote add origin https://github.com/<YOUR_GH_USERNAME>/<REPOSITORY_NAME>
git push -u origin main

Create a Pages project

:::caution[On some versions of Angular, you may need to:] Change the Build command to npx ng build --output-path dist/cloudflare
Change the Build directory to dist/cloudflare/browser :::

Optionally, you can customize the Project name field. It defaults to the GitHub repository's name, but it does not need to match. The Project name value is assigned as your *.pages.dev subdomain.

7. After completing configuration, select the Save and Deploy.

Review your first deploy pipeline in progress. Pages installs all dependencies and builds the project as specified. Cloudflare Pages will automatically rebuild your project and deploy it on every new pushed commit.

Additionally, you will have access to preview deployments, which repeat the build-and-deploy process for pull requests. With these, you can preview changes to your project with a real URL before deploying your changes to production.

<Render file="framework-guides/learn-more" product="pages" params={{ one: "Angular" }} />