> ## Documentation Index
> Fetch the complete documentation index at: https://www.ravion.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# How to deploy Angular to AWS

> Deploy an Angular application to your AWS account with S3 and CloudFront through Ravion.

Deploy the Angular production build to S3 and deliver it through CloudFront.

## Prerequisites

* A Git repository containing your application and its production build command.
* A Ravion account with your AWS account connected. Start free at [Ravion signup](https://app.ravion.com/signup).
* The Ravion CLI installed and authenticated. See [CLI installation](/docs/cli/installation).

The examples use `my-org/my-app` as a placeholder. Replace it with your repository before applying the config.

<Prompt description="Set up this Angular app for Ravion static hosting." icon="sparkles" actions={["copy", "cursor"]}>
  1. Before any other action, read and follow [https://www.ravion.com/docs/start-here#agent-workflow](https://www.ravion.com/docs/start-here#agent-workflow) as the mandatory agent workflow.
  2. Use [https://www.ravion.com/docs/deploy/aws/angular](https://www.ravion.com/docs/deploy/aws/angular) as the framework-specific source of truth.
  3. Confirm this repository contains the Angular app and locate its root, including in a monorepo.
  4. Inspect `package.json`, `angular.json`, and workspace scripts to determine the real build command and `outputPath`; do not assume `dist/my-angular-app`.
  5. Generate `ravion.yaml` with `rvn-aws-static`, substituting the real AWS account, region, repository, branch, and output directory. Use SPA routing.
  6. Ask the user for any AWS account ID, repository slug, project ID, or output path before proceeding; do not guess.
</Prompt>

## Configure the deployment

Angular CLI writes to `dist/<project-name>` by default; replace the example directory with the `outputPath` from your `angular.json`.

This example uses [Railpack](https://railpack.com) for the build. Use `build_source: dockerfile` instead when you need a custom Dockerfile.

```yaml ravion.yaml theme={null}
project:
  givenId: angular-site
  name: Angular site
environments:
  - givenId: production
    name: Production
    moduleInstances:
      - givenId: static-site
        name: Angular site
        type: rvn-aws-static
        version: 1.0.0
        input:
          aws_account_id: ravion-prod
          aws_region: us-east-1
          name: angular-site-production
          build_source: railpack
          source_repo: my-org/my-angular-app
          output_directory: dist/my-angular-app
          railpack_build_cmd: npm run build
```

Run `ng build` through your `npm run build` script. Angular uses the production configuration by default. Set `output_directory` to the actual `outputPath` if your project name differs.

## Apply and connect your domain

```bash theme={null}
ravion project create --given-id angular-site --name "Angular site"
ravion project config apply angular-site --file ravion.yaml --dry-run
ravion project config apply angular-site --file ravion.yaml
```

Follow [custom domains](/docs/guides/custom-domains) to connect your domain to CloudFront.

## Next steps

<CardGroup cols={2}>
  <Card title="Custom domains" icon="globe" href="/docs/guides/custom-domains">
    Point a domain at your deployed service and manage its certificate.
  </Card>

  <Card title="Project config" icon="file-code" href="/docs/config-as-code/project-config-file">
    Preview and apply Ravion configuration from source control.
  </Card>

  <Card title="Pipelines" icon="arrow-progress" href="/docs/config-as-code/pipeline-config-file">
    Add approvals, migrations, and deployment automation.
  </Card>

  <Card title="Logs and metrics" icon="chart-line" href="/docs/modules/logs">
    Inspect deploy output and production health in Ravion.
  </Card>
</CardGroup>