| 1 | --- |
| 2 | title: Frontend frameworks |
| 3 | description: Deploy Vite, Astro, Next.js, vinext, Nuxt, SvelteKit, Waku, or any static build to Cloudflare Workers with first-class Website resources. |
| 4 | sidebar: |
| 5 | label: Overview |
| 6 | order: 1 |
| 7 | --- |
| 8 | |
| 9 | Alchemy deploys frontends to Cloudflare with a family of |
| 10 | `Cloudflare.Website` resources. Each one builds your project |
| 11 | programmatically and deploys it as a Worker — server bundle plus |
| 12 | static assets — with no Cloudflare-specific configuration: no |
| 13 | `wrangler.json`, no adapter setup. Your framework's own config file |
| 14 | (`vite.config.ts`, `astro.config.*`, `nuxt.config.ts`, ...) loads |
| 15 | natively; Alchemy layers its Cloudflare integration on top. |
| 16 | |
| 17 | - [`Vite`](/cloudflare/frontend/vite) — any pure-Vite app: SPAs and |
| 18 | Vite-plugin frameworks like TanStack Start, React Router, Vue, and |
| 19 | SolidStart; your `vite.config.ts` loads natively. |
| 20 | - [`Astro`](/cloudflare/frontend/astro) — Astro sites, server-rendered |
| 21 | or fully static, with an auto-provisioned session KV namespace; |
| 22 | your `astro.config.*` loads natively. |
| 23 | - [`Nextjs`](/cloudflare/frontend/nextjs) — Next.js apps built through |
| 24 | the OpenNext pipeline, with writable ISR on KV; your `next.config.*` |
| 25 | is honored as-is. |
| 26 | - [`Vinext`](/cloudflare/frontend/vinext) — vinext (Next.js API on Vite) |
| 27 | apps, with KV-backed ISR; your `vite.config.ts` loads natively. |
| 28 | - [`Nuxt`](/cloudflare/frontend/nuxt) — Nuxt apps built through |
| 29 | nitro's `cloudflare_module` preset; your `nuxt.config.ts` loads |
| 30 | natively. |
| 31 | - [`SvelteKit`](/cloudflare/frontend/sveltekit) — SvelteKit apps with |
| 32 | a wrangler-free in-memory Cloudflare adapter; your `vite.config.ts` |
| 33 | loads natively. |
| 34 | - [`Waku`](/cloudflare/frontend/waku) — Waku (React Server |
| 35 | Components) apps. |
| 36 | - [`Octane`](/cloudflare/frontend/octane) — OctaneJS fullstack apps |
| 37 | built for Workers with native Octane and Vite configuration; no hosting |
| 38 | adapter required. |
| 39 | - [`StaticSite`](/cloudflare/frontend/static-site) — any build |
| 40 | command's output directory, for static generators like Zola and |
| 41 | Hugo. |
| 42 | |
| 43 | Every resource returns a plain `Worker`, so everything a Worker |
| 44 | supports applies: `domain`, `env` bindings (KV, R2, Durable Objects, |
| 45 | secrets), `compatibility` flags, and asset routing config. All builds |
| 46 | are memoized by content-hashing the input files — an unchanged |
| 47 | project skips the build and deploy entirely. |
| 48 | |
| 49 | ## What's supported |
| 50 | |
| 51 | | Framework | Resource | Guide | |
| 52 | | --- | --- | --- | |
| 53 | | React / Vite SPA | `Vite` | [Vite SPA](/cloudflare/frontend/vite-spa) | |
| 54 | | TanStack Start (React & Solid) | `Vite` | [TanStack Start](/cloudflare/frontend/tanstack-start) | |
| 55 | | React Router (incl. RSC) | `Vite` | [React Router](/cloudflare/frontend/react-router) | |
| 56 | | Vue | `Vite` | [Vue](/cloudflare/frontend/vue) | |
| 57 | | Foldkit | `Foldkit` | [Foldkit](/cloudflare/frontend/foldkit) | |
| 58 | | SolidStart / SolidJS SSR | `Vite` | [SolidStart](/cloudflare/frontend/solidstart) | |
| 59 | | Astro | `Astro` | [Astro](/cloudflare/frontend/astro) | |
| 60 | | Next.js | `Nextjs` | [Next.js](/cloudflare/frontend/nextjs) | |
| 61 | | vinext | `Vinext` | [vinext](/cloudflare/frontend/vinext) | |
| 62 | | Nuxt | `Nuxt` | [Nuxt](/cloudflare/frontend/nuxt) | |
| 63 | | SvelteKit | `SvelteKit` | [SvelteKit](/cloudflare/frontend/sveltekit) | |
| 64 | | Waku | `Waku` | [Waku](/cloudflare/frontend/waku) | |
| 65 | | OctaneJS (fullstack) | `Octane` | [Octane](/cloudflare/frontend/octane) | |
| 66 | | OctaneJS (SPA) | `Vite` | [Octane](/cloudflare/frontend/octane#octane-spas-use-vite-instead) | |
| 67 | | Zola, Hugo, or any static generator | `StaticSite` | [Static sites](/cloudflare/frontend/static-site) | |
| 68 | |
| 69 | Every row is backed by a checked-in example or a live deploy test in |
| 70 | the Alchemy repository. The last row is deliberately open-ended: |
| 71 | StaticSite runs any build command that produces a directory, so any |
| 72 | static generator works the same way. |
| 73 | |
| 74 | ## How to choose |
| 75 | |
| 76 | Use the resource named after your framework. `Astro`, `Nextjs`, |
| 77 | `Vinext`, `Nuxt`, `SvelteKit`, `Waku`, and `Octane` each drive their |
| 78 | framework's own programmatic build and know its output layout, config |
| 79 | surface, and dev server. |
| 80 | |
| 81 | Use `Vite` when the framework is a plugin in your `vite.config.ts` |
| 82 | and a single `vite build` produces the whole app — TanStack Start, |
| 83 | React Router, Vue, SolidStart, or a plain SPA. See |
| 84 | [what "pure Vite" means](/cloudflare/frontend/vite#what-pure-vite-means). |
| 85 | |
| 86 | Use `StaticSite` when the build is an arbitrary shell command that |
| 87 | emits a directory of files — Zola, Hugo, or any other generator |
| 88 | without a dedicated resource. |
| 89 | |
| 90 | ## Where next |
| 91 | |
| 92 | - [The Vite resource](/cloudflare/frontend/vite) — build model, env |
| 93 | inlining, runtime bindings, dev mode. |
| 94 | - [The StaticSite resource](/cloudflare/frontend/static-site) — build |
| 95 | commands, custom Workers in front of assets, framework-native dev |
| 96 | servers. |
| 97 | - Framework guides: |
| 98 | [Vite SPA](/cloudflare/frontend/vite-spa), |
| 99 | [TanStack Start](/cloudflare/frontend/tanstack-start), |
| 100 | [React Router](/cloudflare/frontend/react-router), |
| 101 | [Vue](/cloudflare/frontend/vue), |
| 102 | [SolidStart](/cloudflare/frontend/solidstart), |
| 103 | [Astro](/cloudflare/frontend/astro), |
| 104 | [Next.js](/cloudflare/frontend/nextjs), |
| 105 | [vinext](/cloudflare/frontend/vinext), |
| 106 | [Nuxt](/cloudflare/frontend/nuxt), |
| 107 | [SvelteKit](/cloudflare/frontend/sveltekit), |
| 108 | [Waku](/cloudflare/frontend/waku), |
| 109 | [Octane](/cloudflare/frontend/octane). |