Websites

Archil.Website resources build your frontend and run it as the program of its own Archil.Sandbox: a Node server on port 3000 at a public https://3000-…archil.app URL. Your framework’s own config file loads as it is; there is no adapter to set.

alchemy.run.ts

import * as Archil from "@alchemy.run/archil";

export const Website = Archil.Website.Astro("Website");

An idle sandbox stops, and the next request starts it again in a few seconds, so a quiet site costs no compute. Archil serves every site from its own archil.app hostname; there are no custom domains.

What’s supported

Framework	Resource	Guide
React / Vue / Solid SPA	Vite	Vite
TanStack Start (React & Solid)	TanStackStart	TanStack Start
React Router	ReactRouter	React Router
SolidStart	SolidStart	SolidStart
Astro	Astro	Astro
Next.js	Nextjs	Next.js
vinext	Vinext	vinext
Nuxt	Nuxt	Nuxt
SvelteKit	SvelteKit	SvelteKit
Waku	Waku	Waku
OctaneJS	Octane	Octane
Foldkit	Foldkit	Foldkit
Vocs	Vocs	Vocs
Zola, Hugo, or any static generator	StaticSite	Static sites

Choose a resource

Use the resource named after your framework: it runs that framework’s build and knows its output layout. Use Vite when the whole output is static assets, and StaticSite when any shell command produces the files.

Call an API

Run the API as a program in its own sandbox, and pass its URL to the site’s build:

alchemy.run.ts

import * as Archil from "@alchemy.run/archil";
import * as Alchemy from "alchemy";
import * as Output from "alchemy/Output";
import * as Effect from "effect/Effect";
import Api from "./src/api.ts";

export default Alchemy.Stack(
  "Notes",
  { providers: Archil.providers(), state: Alchemy.localState() },
  Effect.gen(function* () {
    const api = yield* Api;
    const web = yield* Archil.Website.Vite("Web", {
      env: { VITE_API_URL: Output.map(api.url, (url) => url ?? "") },
    });
    return { url: web.url, apiUrl: api.url };
  }),
);

examples/archil-website-vite is the whole app: a React SPA and an Effect API that stores notes on an Archil.Disk.

Size the sandbox

sandbox sets the site’s sandbox: size, image, timeouts, disks and network policy.

export const Website = Archil.Website.Astro("Website", {
  sandbox: { vcpuCount: 2, memSizeMiB: 4096 },
});

Set environment variables

env reaches the build, alchemy dev, and the program’s process. The framework inlines what it already inlines (VITE_* for Vite); server code reads process.env.

export const Website = Archil.Website.Astro("Website", {
  env: { GREETING: "Hello from Archil" },
});

Develop locally

alchemy dev runs the framework’s own dev server instead of deploying, and site.url is its local address. Wrap the site in Alchemy.remote() to deploy the live sandbox even during dev.

Where next

• Programs — what each site runs as
• Sandboxes — sizes, timeouts, and disks