In this guide, you will create a new [Angular](https://angular.dev/) application and deploy to Cloudflare Workers (with the new [Beta Workers Assets](https://developers.cloudflare.com/workers/static-assets/)).

## 1. Set up a new project

Use the [`create-cloudflare`](https://www.npmjs.com/package/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 with Beta Workers Assets, run the following command:

* npm

  ```sh
  npm create cloudflare@latest my-angular-app -- --framework=angular --platform=workers
  ```

* pnpm

  ```sh
  pnpm create cloudflare@latest my-angular-app --framework=angular --platform=workers
  ```

* yarn

  ```sh
  yarn create cloudflare my-angular-app --framework=angular --platform=workers
  ```

For setup, select the following options:

* For *What would you like to start with?*, choose `Framework Starter`.
* For *Which development framework do you want to use?*, choose `Angular`.
* Complete the framework's own CLI wizard.
* For *Do you want to use git for version control?*, choose `Yes`.
* For *Do you want to deploy your application?*, choose `No` (we will be making some changes before deploying).

After setting up your project, change your directory by running the following command:

```sh
cd my-angular-app
```

## 2. Develop locally

After you have created your project, run the following command in the project directory to start a local server. This will allow you to preview your project locally during development.

* npm

  ```sh
  npm run dev
  ```

* pnpm

  ```sh
  pnpm run dev
  ```

* yarn

  ```sh
  yarn run dev
  ```

## 3. Deploy your Project

Your project can be deployed to a `*.workers.dev` subdomain or a [Custom Domain](https://developers.cloudflare.com/workers/configuration/routing/custom-domains/), from your own machine or from any CI/CD system, including [Cloudflare's own](https://developers.cloudflare.com/workers/ci-cd/builds/).

The following command will build and deploy your project. If you're using CI, ensure you update your ["deploy command"](https://developers.cloudflare.com/workers/ci-cd/builds/configuration/#build-settings) configuration appropriately.

* npm

  ```sh
  npm run deploy
  ```

* pnpm

  ```sh
  pnpm run deploy
  ```

* yarn

  ```sh
  yarn run deploy
  ```

***

## Static assets

You can serve static assets your Angular application by placing them in [the `./public/` directory](https://angular.dev/reference/configs/file-structure#workspace-configuration-files). This can be useful for resource files such as images, stylesheets, fonts, and manifests.

When using Workers Assets, Cloudflare will first attempt to serve any static assets which match the incoming request.

For example, if you have requests for `/logo.png` and `/blog/hello-world.html` in your assets directory, and make requests for `/logo.png` and `/blog/hello-world`, those files will be served respectively. The [`html_handling`](https://developers.cloudflare.com/workers/static-assets/routing/#html_handling) option allows you to customize the serving of HTML files if you have specific needs around redirects and trailing slashes.

If a request does not match a static asset, Cloudflare will then invoke your Worker script module, if one is present. This can be configured with the [`main`](https://developers.cloudflare.com/workers/wrangler/configuration/#inheritable-keys) property in the [Wrangler configuration file](https://developers.cloudflare.com/workers/wrangler/configuration/).

Finally, if a request does not match any static assets, and either a Worker script module is not present, or from within that Worker script module, the [asset binding](https://developers.cloudflare.com/workers/static-assets/binding/)'s `fetch` method is called (e.g. `env.ASSETS.fetch(request)`), Cloudflare will fall back to evaluating the [`not_found_handling`](https://developers.cloudflare.com/workers/static-assets/routing/#not_found_handling) behavior. By default, it will serve a null-body 404-status response, but this can be configured to instead serve custom HTML 404 pages, or to serve a single-page application (SPA).

At present, there is no way to customize this routing behavior beyond the `html_handling` and `not_found_handling` options. We plan to offer additional configuration controls, such as allowing you to always run the Worker script modules for certain paths, in the future.
