Skip to content

vinext

GCP.Website.Vinext deploys a vinext app to Cloud Run. Alchemy runs vinext’s Vite build and serves it with vinext’s production server.

Install

Section titled “Install”

The build integration ships separately. It only runs at deploy time, so a dev dependency is enough:

Terminal window
pnpm add -D @alchemy.run/frontend-frameworks@latest

Docker has to be running when you deploy. The image is built on your machine.

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.Vinext("Website");


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

Run alchemy deploy. site.url is the Cloud Run service URL.

Pass environment variables

Section titled “Pass environment variables”
alchemy.run.ts
export const Website = GCP.Website.Vinext("Website");
export const Website = GCP.Website.Vinext("Website", {
  env: {
    GREETING: "Hello from Cloud Run!",
  },
});

Server code reads the value from process.env.GREETING.

Share the data cache

Section titled “Share the data cache”

ISR and "use cache" keep data in each instance’s memory, which other instances can’t see. Point REDIS_URL at a Redis server to share it:

export const Website = GCP.Website.Vinext("Website", {
  env: { REDIS_URL: "redis://10.0.0.3:6379" },
});

Memorystore gives you a Redis server on a private IP.

Tune Cloud Run

Section titled “Tune Cloud Run”
export const Website = GCP.Website.Vinext("Website", {
  scaling: { minInstanceCount: 1 },
  resources: { limits: { cpu: "1", memory: "1Gi" } },
});

One warm instance means no cold start for the first visitor. See Websites for the other settings.

Local development

Section titled “Local development”

alchemy dev runs the framework’s dev server with hot reload and creates nothing in the cloud. Wrap the site in Alchemy.remote() to deploy it for real during dev.

Where next

Section titled “Where next”