---
title: 'Deploy VitePress on AWS S3 and CloudFront'
description: 'Deploy a VitePress site on your AWS account using S3 and CloudFront.'
---
import { Tabs, TabItem, LinkButton, Aside } from '@astrojs/starlight/components';

You can deploy a [VitePress](https://vitepress.dev/) site on your AWS account.

There are two ways to deploy your VitePress site 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.

<LinkButton href="https://stackblitz.com/~/github.com/cloudbitsio/vitepress" target="_blank" variant="secondary" icon="external">
  View code in StackBlitz
</LinkButton>

## Deploy using AWS CDK
---

[CDK-SPA](https://github.com/thunder-so/cdk-spa) is a package that simplifies the deployment of static sites to AWS using the AWS Cloud Development Kit (CDK). It provides a straightforward way to deploy your VitePress site to AWS S3 and CloudFront.

<Aside type="note" title="Prerequisites">
- [AWS CDK](https://aws.amazon.com/cdk/) installed. You can install it globally using npm:

```sh
npm install -g aws-cdk
```
- Node.js version 20 or higher installed on your machine.

- [AWS credentials](https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-files.html) configured on your machine and your preferred region bootstrapped with CDK.
</Aside>

### 1. Create a project

You can create a new VitePress project using the following commands:

<Tabs syncKey="package-manager">
  <TabItem label="npm" icon="seti:npm">
```sh
npm create vitepress@latest my-vitepress-site
cd my-vitepress-site
npm install
```
  </TabItem>
  <TabItem label="pnpm" icon="pnpm">
```sh
pnpm create vitepress my-vitepress-site
cd my-vitepress-site
pnpm install
```
  </TabItem>
  <TabItem label="bun" icon="bun">
```sh
bun create vitepress my-vitepress-site
cd my-vitepress-site
bun install
```
  </TabItem>
</Tabs>

### 2. Initialize your project

Install the necessary dependencies and initialize your project:

<Tabs syncKey="package-manager">
  <TabItem label="npm" icon="seti:npm">
```sh
npm i tsx aws-cdk-lib @thunderso/cdk-spa --save-dev
```
  </TabItem>
  <TabItem label="pnpm" icon="pnpm">
```sh
pnpm add -D tsx aws-cdk-lib @thunderso/cdk-spa
```
  </TabItem>
  <TabItem label="bun" icon="bun">
```sh
bun add -d tsx aws-cdk-lib @thunderso/cdk-spa
```
  </TabItem>
</Tabs>

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: 'docs/.vitepress/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 `docs/.vitepress/dist` directory.

<Tabs syncKey="package-manager">
  <TabItem label="npm" icon="seti:npm">
```sh
npm run docs:build
```
  </TabItem>
  <TabItem label="pnpm" icon="pnpm">
```sh
pnpm run docs:build
```
  </TabItem>
  <TabItem label="bun" icon="bun">
```sh
bun run docs:build
```
  </TabItem>
</Tabs>

By running the following script, the CDK stack will be deployed to AWS.

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

When the deployment is complete, you will see the CloudFront URL in the output. You can access your VitePress site 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 VitePress site on AWS using the [Thunder console](https://console.thunder.so).

<Aside type="note" title="Prerequisites">
- An [AWS account](/docs/aws) added to your organization.
- A [GitHub account](/docs/github) connected to your organization.
- [Import GitHub repository](/docs/import-repository) with your VitePress site code.
</Aside>


### Build Settings

Use the following commands in the build step settings:

<Tabs syncKey="package-manager">
  <TabItem label="npm" icon="seti:npm">
```sh title="Install command"
npm install
```
```sh title="Build command"
npm run docs:build
```
```sh title="Output directory"
docs/.vitepress/dist
```
  </TabItem>
  <TabItem label="pnpm" icon="pnpm">
```sh title="Install command"
npx pnpm install
```
```sh title="Build command"
npx pnpm run docs:build
```
```sh title="Output directory"
docs/.vitepress/dist
```
  </TabItem>
  <TabItem label="bun" icon="bun">
```sh title="Install command"
npx bun install
```
```sh title="Build command"
npx bun run docs:build
```
```sh title="Output directory"
docs/.vitepress/dist
```
  </TabItem>
</Tabs>

### Environment Variables

Environment variables in VitePress 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_APP_NAME=test
```

Access the variable in your VitePress config:

```ts title="docs/.vitepress/config.mts"
export default async ({ mode }) => {
  const env = loadEnv(mode || '', process.cwd())

  const name = env.VITE_APP_NAME;

  return defineConfig({ 
    title: name,
    /** */ 
  })
}
```

Use it in your templates:

```mdx title="docs/index.md"
<script setup>
const name = import.meta.env.VITE_APP_NAME;
</script>

# {{ name }}
```