---
title: 'Deploy Vite on AWS'
description: 'Deploy Vite-based single-page applications on AWS using S3 and CloudFront.'
---

import { Tabs, TabItem, Aside } from '@astrojs/starlight/components';
import PatternList from '../../../components/docs/PatternList.astro';
import FrameworkHero from '../../../components/docs/FrameworkHero.astro';

<FrameworkHero name="Vite" title={frontmatter.title} />
Deploy your [Vite](https://vitejs.dev/) single-page applications to AWS using Thunder. Vite apps are fully client-rendered at runtime, making static hosting on [S3](https://aws.amazon.com/s3/) and [CloudFront](https://aws.amazon.com/cloudfront/) the natural fit.

## Available Patterns

<PatternList patterns={["static"]} />

## Prerequisites

<Aside type="note" title="Before you begin">
- [AWS CDK](https://aws.amazon.com/cdk/) installed globally: `npm install -g aws-cdk`
- Node.js 20 or higher
- [AWS credentials](https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-files.html) configured
- AWS environment bootstrapped: `cdk bootstrap aws://YOUR_ACCOUNT_ID/us-east-1`
</Aside>

## Getting Started

### Create Project

Scaffold a new Vite project using your preferred package manager. This sets up the project structure, installs dependencies, and prepares you for development.

<Tabs syncKey="package-manager">
  <TabItem label="bun" icon="bun">
```sh
bun create vite my-vite-app --template vanilla-ts
cd my-vite-app
bun install
```
  </TabItem>
  <TabItem label="npm" icon="seti:npm">
```sh
npm create vite@latest my-vite-app -- --template vanilla-ts
cd my-vite-app
npm install
```
  </TabItem>
  <TabItem label="pnpm" icon="pnpm">
```sh
pnpm create vite my-vite-app --template vanilla-ts
cd my-vite-app
pnpm install
```
  </TabItem>
</Tabs>

### Install Thunder

Add Thunder as a development dependency. It provides the CDK constructs you'll use to define your AWS infrastructure.

<Tabs syncKey="package-manager">
  <TabItem label="bun" icon="bun">
```sh
bun add @thunder-so/thunder --development
```
  </TabItem>
  <TabItem label="npm" icon="seti:npm">
```sh
npm install @thunder-so/thunder --save-dev
```
  </TabItem>
  <TabItem label="pnpm" icon="pnpm">
```sh
pnpm add -D @thunder-so/thunder
```
  </TabItem>
</Tabs>

---

## Vite Static Site Deployment

Deploy your Vite SPA to [S3](https://aws.amazon.com/s3/) with [CloudFront](https://aws.amazon.com/cloudfront/) as the CDN. Vite outputs all compiled assets to `dist/` by default — Thunder uploads these directly to S3 and provisions the CloudFront distribution in front of them.

### Stack

The `Static` construct provisions an S3 bucket, a CloudFront distribution, and optionally a Route53 DNS record.

```ts title="stack/prod.ts"
import { Cdk, Static, type StaticProps } from '@thunder-so/thunder';

const config: StaticProps = {
  env: { account: 'YOUR_ACCOUNT_ID', region: 'us-east-1' },
  application: 'myapp',
  service: 'web',
  environment: 'prod',
  rootDir: '.', // e.g. 'frontend' for monorepos
  outputDir: 'dist',
};

new Static(new Cdk.App(), `${config.application}-${config.service}-${config.environment}-stack`, config);
```

### Deploy

Build your Vite app first to compile and bundle all assets into `dist/`, then deploy with CDK. CDK uploads the files to S3 and provisions the CloudFront distribution.

<Tabs syncKey="package-manager">
  <TabItem label="bun" icon="bun">
```sh
bun run build
npx cdk deploy --app "bunx tsx stack/prod.ts" --profile default
```
  </TabItem>
  <TabItem label="npm" icon="seti:npm">
```sh
npm run build
npx cdk deploy --app "npx tsx stack/prod.ts" --profile default
```
  </TabItem>
  <TabItem label="pnpm" icon="pnpm">
```sh
pnpm run build
pnpm exec cdk deploy --app "pnpm exec tsx stack/prod.ts" --profile default
```
  </TabItem>
</Tabs>

After deployment, CDK outputs a **CloudFront URL** where your app is live.