Astro

Mount the endpoint, hydrate the island and schedule checks in an Astro app.

Astro serves the API as a catch-all endpoint and the page as a React island. The adapter imports no Astro package, so the handler module stays portable.

bash

bun create @heyo-sh/heyo-status my-status-page --template astro

Astro 7 requires Node.js 22.12+ for local builds and Node deployments.

Project shape

my-status-page
- heyo-status.config.ts
- heyo-status.database.ts
- astro.config.mjs
- src
  - pages
    index.astro
    api/heyo-status
    [...path].ts
  - styles
    status.css

The API endpoint

src/pages/api/heyo-status/[...path].ts

import { statusHandler } from "@heyo-sh/heyo-status/astro";import { statusPage } from "../../../../heyo-status.config";export const prerender = false;export const { GET, POST, PATCH, PUT, DELETE } = statusHandler(statusPage);

prerender = false is required: the endpoint must run per request, not at build time.

Astro configuration

astro.config.mjs

import tailwindcss from "@tailwindcss/vite";import node from "@astrojs/node";import react from "@astrojs/react";import { defineConfig } from "astro/config";export default defineConfig({  output: "server",  adapter: node({ mode: "standalone" }),  // The status API is a bearer-token JSON API with no cookie or session  // authority, so Astro's form-origin check only blocks legitimate clients.  security: { checkOrigin: false },  integrations: [react()],  vite: { plugins: [tailwindcss()] },});

Why checkOrigin is disabled

Astro's origin check rejects every DELETE without a JSON content-type and the unsubscribe confirmation form. The status API authenticates with a bearer token and holds no cookie or session authority, so the check adds no protection here and only breaks valid clients.

The page

src/pages/index.astro

---import { StatusPage } from "@heyo-sh/heyo-status/ui";import { statusThemeBootstrapScript } from "@heyo-sh/heyo-status/theme/script";import "@heyo-sh/heyo-status/theme/status.css";import "../styles/status.css";import { statusPage } from "../../heyo-status.config";export const prerender = false;const snapshot = await statusPage.api.getSnapshot();---<html lang="en">  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width, initial-scale=1" />    <title>{statusPage.title}</title>    <meta name="description" content={statusPage.description} />    <script is:inline set:html={statusThemeBootstrapScript(undefined, statusPage.mode)} />  </head>  <body>    <StatusPage      client:load      basePath={statusPage.basePath}      branding={statusPage.branding}      colors={statusPage.colors}      metrics={statusPage.metrics}      mode={statusPage.mode}      snapshot={snapshot}      subscribersEnabled={statusPage.subscribers.enabled}      subscriberMethods={statusPage.subscribers.methods}      theme={statusPage.theme}      title={statusPage.title}    />  </body></html>

client:load matters: the page renders fine without it, but the colour-mode toggle and the subscribe dialog would be inert markup.

Scripts

package.json

{  "scripts": {    "dev": "heyo-status dev -- bunx --bun astro dev",    "build": "astro build",    "start": "node ./dist/server/entry.mjs",    "check": "heyo-status check run",    "db:migrate": "heyo-status db migrate",    "db:seed": "heyo-status db seed --uptime 99.95 --days 90"  }}

Deployment notes

Target	Notes
Cloudflare Workers	Uses `@astrojs/cloudflare` with `src/status-worker.ts`. `bun dev` builds and boots the real Worker; there is no framework hot reload, so restart after changing code.
Vercel	Adds `src/pages/api/cron/[task].ts` and `vercel.json` with three cron entries.
Node	`output: "server"` with `@astrojs/node` in standalone mode, Node.js 22.12+.

On Cloudflare, tcp and ssl monitors are unavailable; use http and dns, or run certificate checks from a Node host.