Skip to content

Vite

GCP.Website.Vite deploys a client-only Vite app to Cloud Run: a React, Vue, or Solid SPA, or a multi-page index.html site. Alchemy runs vite build with your own vite.config.* and serves the output from a small file server.

Install

Section titled “Install”
Terminal window
pnpm add -D @alchemy.run/frontend-frameworks@latest

Docker has to be running when you deploy.

Deploy the site

Section titled “Deploy the site”
alchemy.run.ts
import * as Alchemy from "alchemy";
import * as GCP from "@alchemy.run/gcp";
import * as Effect from "effect/Effect";


export const Website = GCP.Website.Vite("Website");


export default Alchemy.Stack(
  "MySite",
  { providers: GCP.providers(), state: GCP.state() },
  Effect.gen(function* () {
    const site = yield* Website;
    return { url: site.url };
  }),
);
Section titled “Deep links”

Unknown paths answer with index.html, so a client-side route like /settings loads the app. For a multi-page site, serve your 404.html instead:

export const Website = GCP.Website.Vite("Docs", {
  assets: { notFoundHandling: "404-page" },
});

Point the app at an API

Section titled “Point the app at an API”

VITE_* values are inlined into the bundle at build time. Pass a service’s URL through env:

Effect.gen(function* () {
  const api = yield* Api;
  const site = yield* GCP.Website.Vite("Website", {
    env: { VITE_API_URL: api.uri },
  });
  return { url: site.url };
}),

The browser code reads import.meta.env.VITE_API_URL.

Change the output or base path

Section titled “Change the output or base path”
export const Website = GCP.Website.Vite("Docs", {
  vite: { outDir: "build", base: "/docs/" },
});

Project in a subdirectory

Section titled “Project in a subdirectory”
export const Website = GCP.Website.Vite("Website", { rootDir: "./app" });

Local development

Section titled “Local development”

alchemy dev runs Vite’s dev server with hot reload and creates nothing in the cloud.

Where next

Section titled “Where next”