---
title: 'Deploy Preact + Vite on AWS S3 and CloudFront'
description: 'Deploy a Vite-based Preact single-page application (SPA) on your AWS account.'
---
import { Tabs, TabItem, LinkButton, Aside } from '@astrojs/starlight/components';
You can deploy a [Preact](https://preactjs.com/) single-page application (SPA) with [Vite](https://vitejs.dev/) on your AWS account.
There are two ways to deploy your Preact SPA on AWS:
1. Using the [AWS Cloud Development Kit (CDK)](https://aws.amazon.com/cdk/) with the [CDK-SPA](https://github.com/thunder-so/cdk-spa) package.
2. Using the [Thunder console](https://console.thunder.so) to deploy your app with a few clicks.
The build artifacts (HTML, CSS and JavaScript) will be stored in an S3 bucket and served using CloudFront CDN.
View code in StackBlitz
## Deploy using AWS CDK
---
[CDK-SPA](https://github.com/thunder-so/cdk-spa) is a package that simplifies the deployment of single-page applications (SPAs) to AWS using the AWS Cloud Development Kit (CDK). It provides a straightforward way to deploy your Preact app to AWS S3 and CloudFront.
### 1. Create a project
You can create a new Vite project with Preact using the following command:
```sh
npm create vite@latest my-preact-app -- --template preact
cd my-preact-app
npm install
```
```sh
pnpm create vite my-preact-app --template preact
cd my-preact-app
pnpm install
```
```sh
bun create vite my-preact-app --template preact
cd my-preact-app
bun install
```
### 2. Initialize your project
Install the necessary dependencies and initialize your project:
```sh
npm i tsx aws-cdk-lib @thunderso/cdk-spa --save-dev
```
```sh
pnpm add -D tsx aws-cdk-lib @thunderso/cdk-spa
```
```sh
bun add -d tsx aws-cdk-lib @thunderso/cdk-spa
```
Create a `stack/index.ts` file. Edit it to match your project:
```ts title="stack/index.ts"
import { App } from "aws-cdk-lib";
import { SPAStack, type SPAProps } from "@thunderso/cdk-spa";
const myApp: SPAProps = {
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 SPAStack(
new App(),
`${myApp.application}-${myApp.service}-${myApp.environment}-stack`,
myApp
);
```
### 3. Deploy
Before you deploy, run your build script to generate artifacts in the `dist` directory.
```sh
npm run build
```
```sh
pnpm run build
```
```sh
bun run build
```
By running the following script, the CDK stack will be deployed to AWS.
```sh
npx cdk deploy --all --app="npx tsx stack/index.ts"
```
```sh
pnpm exec cdk deploy --all --app="pnpm exec tsx stack/index.ts"
```
```sh
npx cdk deploy --all --app="bunx tsx stack/index.ts"
```
When the deployment is complete, you will see the CloudFront URL in the output. You can access your Preact app at that URL.
For complete documentation on how to use CDK-SPA, refer to the [CDK-SPA documentation](https://github.com/thunderso/cdk-spa).
## Deploy using Thunder console
---
You can also deploy your Preact app on AWS using the [Thunder console](https://console.thunder.so).
### Build Settings
Use the following commands in the build step settings:
```sh title="Install command"
npm install
```
```sh title="Build command"
npm run build
```
```sh title="Output directory"
dist
```
```sh title="Install command"
npx pnpm install
```
```sh title="Build command"
npx pnpm run build
```
```sh title="Output directory"
dist
```
```sh title="Install command"
npx bun install
```
```sh title="Build command"
npx bun run build
```
```sh title="Output directory"
dist
```
### Environment Variables
Environment variables in Vite are available at build time and can be used both in your config files and templates. For more information, refer to the official [Vite documentation on environment variables](https://vite.dev/guide/env-and-mode.html#env-variables).
1. Define your environment variables in the Thunder console under the [Environment Variables](/docs/environment-variables) section of your project settings.
2. In your code, you can define them in an `.env` file at the root of your project:
```sh title=".env"
VITE_BASE_URL=https://thunder.so
```
Use it in your templates:
```tsx title="App.tsx"
const url = import.meta.env.VITE_BASE_URL;
export function App() {
return (
<>