Vite

Source: src/AWS/Website/Vite.ts

Deploy a plain Vite application to AWS: static assets (the vite build output) in S3 behind a CloudFront distribution. For client-only projects — React/Vue/Solid SPAs, index.html multi-page apps — whose entire deployable output is static assets.

The build runs through @alchemy.run/frontend-frameworks/vite with the @alchemy.run/frontend-frameworks/vite/aws deploy target — the package must be installed in your project. Your project’s own vite.config.* (plugins included) drives the build; input files are content-hashed so unchanged projects skip the build and deploy entirely.

During alchemy dev the site is Vite’s own dev server (native HMR) and no cloud resources are created — the site’s url is the dev server’s local address. Alchemy.remote() opts back into the full deployment.

SSR frameworks that wrap Vite deploy through their own composites (AWS.Website.Astro, AWS.Website.SvelteKit, AWS.Website.Octane, …) — this composite never creates a server function.

Creating Vite Sites

Basic Vite SPA

const site = yield* AWS.Website.Vite("Web");

Project in a Subdirectory

const site = yield* AWS.Website.Vite("Web", {
  rootDir: "./app",
});

Custom Domain

const site = yield* AWS.Website.Vite("Web", {
  domain: {
    name: "app.example.com",
    hostedZoneId: zone.hostedZoneId,
  },
});

Multi-Page Sites

const site = yield* AWS.Website.Vite("Docs", {
  spa: false,
  errorPage: "404.html",
});

Sharing a Router

const router = yield* AWS.Website.Router("Router", {});
const site = yield* AWS.Website.Vite("Web", {
  domain: { router },
});

Build Configuration

const site = yield* AWS.Website.Vite("Docs", {
  vite: {
    outDir: "build",
    base: "/docs/",
  },
});

Local Development

// `alchemy dev` starts `vite` programmatically: site.url is the local
// dev server (HMR included); no bucket or distribution is created.
const site = yield* AWS.Website.Vite("Web");