Deploy a Vite Vue 3 SPA on AWS

You can deploy a Vite site with Vue 3 on AWS with Thunder. The server pre-rendered pages produced by the build step will be stored in an S3 bucket and served using CloudFront CDN.

Build Settings

Use the following commands in the build step settings:

npm install

npm run build

public

npx pnpm install

npx pnpm run build

public

npx bun install

npx bun run build

public

That’s it! Your app will be live on your CloudFront URL as soon as the build finishes.

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.

You can define them in an .env file at the root of your project:

VITE_BASE_URL=https://thunder.so

Use it in your templates:

<script setup lang="ts">
const url = import.meta.env.VITE_BASE_URL;
</script>

<template>
  <div>
    <a :href=url target="_blank">Thunder</a>
</template>