Angular
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.
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:
npm create cloudflare@latest -- my-angular-app --framework=angularyarn create cloudflare@latest my-angular-app --framework=angularpnpm create cloudflare@latest my-angular-app --framework=angularcreate-cloudflare will install dependencies, including the Wrangler CLI and the Cloudflare Pages adapter, and ask you setup questions.
In addition to Direct Upload deployments, you can deploy projects via Git integration. Git integration allows you to connect a GitHub or GitLab repository to your Pages application and have your Pages application automatically built and deployed after each new commit is pushed to it.
Setup requires a basic understanding of Git ↗. If you are new to Git, refer to GitHub's summarized Git handbook ↗ on how to set up Git on your local machine.
Create a new GitHub repository by visiting repo.new ↗. After creating a new repository, go to your newly created project directory to prepare and push your local application to GitHub by running the following commands in your terminal:
# Skip the following three commands if you have built your application# using C3 or already committed your changesgit initgit add .git commit -m "Initial commit"
git branch -M maingit remote add origin https://github.com/<YOUR_GH_USERNAME>/<REPOSITORY_NAME>git push -u origin main- Log in to the Cloudflare dashboard ↗ and select your account.
- Go to Workers & Pages > Create application > Pages > Connect to Git and create a new Pages project.
You will be asked to authorize access to your GitHub account if you have not already done so. Cloudflare needs this so that it can monitor and deploy your projects from the source. You may narrow access to specific repositories if you prefer; however, you will have to manually update this list within your GitHub settings ↗ when you want to add more repositories to Cloudflare Pages.
- Select the new GitHub repository that you created and, in the Set up builds and deployments section, provide the following information:
| Configuration option | Value |
|---|---|
| Production branch | main |
| Build command | npm run build |
| Build directory | dist/cloudflare |
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.
- 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.
By completing this guide, you have successfully deployed your Angular site to Cloudflare Pages. To get started with other frameworks, refer to the list of Framework guides.