> ## 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 Vue to AWS

> Deploy a Vue application to your AWS account with S3 and CloudFront through Ravion.

Deploy a Vue application built with Vite 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 Vue 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/vue](https://www.ravion.com/docs/deploy/aws/vue) as the framework-specific source of truth.
  3. Confirm this repository contains Vue and locate its app root in a monorepo.
  4. Inspect `package.json`, Vite or Vue CLI config, and router setup to detect the actual build command, `dist` output, base path, and SPA fallback requirement.
  5. Generate `ravion.yaml` with `rvn-aws-static`, SPA routing, and real AWS account, region, branch, repository, and output values.
  6. Ask the user for missing AWS account IDs, repository slugs, project IDs, or output paths before proceeding; do not guess.
</Prompt>

## Configure the deployment

The default production output directory is `dist`.

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: vue-site
  name: Vue site
environments:
  - givenId: production
    name: Production
    moduleInstances:
      - givenId: static-site
        name: Vue site
        type: rvn-aws-static
        version: 1.0.0
        input:
          aws_account_id: ravion-prod
          aws_region: us-east-1
          name: vue-site-production
          build_source: railpack
          source_repo: my-org/my-vue-app
          railpack_build_cmd: npm run build
```

Run `npm run build`, which invokes Vite and writes to `dist`. Use `VITE_*` variables for values embedded into browser code.

## Apply and connect your domain

```bash theme={null}
ravion project create --given-id vue-site --name "Vue site"
ravion project config apply vue-site --file ravion.yaml --dry-run
ravion project config apply vue-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>