Skip to content

Astro

GCP.Website.Astro deploys an Astro project to Cloud Run. Pages render on the server by default. Pages that export const prerender = true, and everything in public/, are served as static files from the same container.

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 https://pkg.alchemy.run/@alchemy.run/frontend-frameworks/a870ed4

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.Astro("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.Astro("Website");
export const Website = GCP.Website.Astro("Website", {
  env: {
    GREETING: "Hello from Cloud Run!",
  },
});

Server-rendered pages read it from process.env:

src/pages/index.astro
---
const greeting = process.env.GREETING ?? "hello";
---


<h1>{greeting}</h1>

Configure Astro

Section titled “Configure Astro”

Your astro.config.* loads as-is: integrations, Vite plugins, and everything else. Don’t add an adapter. Alchemy supplies its own.

astro.config.ts
import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "astro/config";


export default defineConfig({
  vite: { plugins: [tailwindcss()] },
});

The astro prop overrides a few options per deploy, such as site, base, and output.

Fully static sites

Section titled “Fully static sites”

With output: "static" every page is built ahead of time:

export const Website = GCP.Website.Astro("Website", {
  astro: { output: "static" },
  assets: { notFoundHandling: "404-page" },
});

404-page serves your built 404.html for unknown paths.

Tune Cloud Run

Section titled “Tune Cloud Run”
export const Website = GCP.Website.Astro("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.

Example

Section titled “Example”

examples/gcp-website-astro has a server-rendered page, a prerendered page, Tailwind, and a live test.

Where next

Section titled “Where next”