Deploy Vite on AWS

Deploy your Vite single-page applications (SPAs) to AWS using Thunder patterns. This guide covers static site deployment using S3 and CloudFront.

Vite applications are deployed using the Static construct, which provides optimized static hosting with CDN distribution.

Static Deployment

Deploy Vite SPAs to S3 and CloudFront using the Static construct.

Create Project

npm create vite@latest my-vite-app -- --template vanilla-ts
cd my-vite-app
npm install

pnpm create vite my-vite-app --template vanilla-ts
cd my-vite-app
pnpm install

bun create vite my-vite-app --template vanilla-ts
cd my-vite-app
bun install

Install Dependencies and Setup Stack

npm i tsx @thunder-so/thunder --save-dev

pnpm add -D tsx @thunder-so/thunder

bun add -d tsx @thunder-so/thunder

import { Cdk, Static, type StaticProps } from "@thunder-so/thunder";

const myApp: StaticProps = {
  env: {
    account: 'your-account-id',
    region: 'us-east-1'
  },
  application: 'your-application-id',
  service: 'your-service-id',
  environment: 'production',

  rootDir: '', // e.g. 'frontend' for monorepos
  outputDir: 'dist',
};

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

Deploy

Build and deploy your Vite SPA:

npm run build
npx cdk deploy --all --app="npx tsx stack/index.ts"

pnpm run build
pnpm exec cdk deploy --all --app="pnpm exec tsx stack/index.ts"

bun run build
npx cdk deploy --all --app="bunx tsx stack/index.ts"

After deployment, you’ll receive a CloudFront URL to access your static site.