1---
2title: Octane
3description: Deploy OctaneJS to Prisma Compute with Prisma.Website.Octane — the Node target on Bun, SSR plus client assets, and native Vite dev locally.
4sidebar:
5 order: 14
6---
7
8import { Code, Tabs, TabItem } from "@astrojs/starlight/components";
9
10export const devDeps = "@alchemy.run/frontend-frameworks @vercel/nft";
11
12`Prisma.Website.Octane` runs your [OctaneJS](https://octanejs.dev)
13project's Vite build. Octane builds the client and SSR bundles; the
14shared Node target wraps the fetch handler as an HTTP program. Both
15outputs are uploaded as `tar.gz` and run on **Bun in Prisma Compute**,
16not a Docker Node container.
17
18## Install
19
20Install the build-time integration; the resource loads `/octane` and
21`/octane/node` from your project:
22
23<Tabs syncKey="pkgManager">
24 <TabItem label="bun" icon="bun"><Code code={`bun add -d ${devDeps}`} lang="sh" /></TabItem>
25 <TabItem label="npm" icon="npm"><Code code={`npm install -D ${devDeps}`} lang="sh" /></TabItem>
26 <TabItem label="pnpm" icon="pnpm"><Code code={`pnpm add -D ${devDeps}`} lang="sh" /></TabItem>
27 <TabItem label="yarn" icon="seti:yarn"><Code code={`yarn add -D ${devDeps}`} lang="sh" /></TabItem>
28</Tabs>
29
30## Configure Octane
31
32Keep native compiler and route settings in `octane.config.ts`, without
33an adapter:
34
35```typescript
36// octane.config.ts
37import { defineConfig, RenderRoute } from "@octanejs/vite-plugin";
38
39export default defineConfig({
40 router: {
41 routes: [new RenderRoute({ path: "/", entry: ["App", "/src/App.tsx"] })],
42 },
43});
44```
45
46`Prisma.Website.Octane` selects hosting and automatically wraps Octane's
47default native Node output as an HTTP server running on Bun in Compute.
48The legacy Node marker adapter remains optional for existing projects.
49
50## Configure Vite
51
52Put Vite plugins alongside Octane's plugin in `vite.config.ts`:
53
54```typescript
55// vite.config.ts
56import { octane } from "@octanejs/vite-plugin";
57import tailwindcss from "@tailwindcss/vite";
58import { defineConfig } from "vite";
59
60export default defineConfig({
61 plugins: [octane(), tailwindcss()],
62});
63```
64
65## Declare the Website
66
67```typescript
68// alchemy.run.ts
69import * as Prisma from "alchemy/Prisma";
70
71export const Website = Prisma.Website.Octane("Website");
72```
73
74`rootDir` defaults to `"."`. Omit `project` for a database-less project
75created only on live deploy, or pass a project already in your Stack.
76
77## Add it to the Stack
78
79```typescript
80// alchemy.run.ts
81import * as Alchemy from "alchemy";
82import * as Effect from "effect/Effect";
83
84export default Alchemy.Stack(
85 "MyOctaneSite",
86 { providers: Prisma.providers(), state: Alchemy.localState() },
87 Effect.gen(function* () {
88 const site = yield* Website;
89 return { url: site.url };
90 }),
91);
92```
93
94`site.url` is the Compute endpoint on deploy and the local dev URL otherwise.
95
96## Add environment variables
97
98```diff lang="typescript"
99export const Website = Prisma.Website.Octane("Website", {
100+ env: {
101+ GREETING: "Hello from Alchemy!",
102+ API_BASE: "https://api.example.com",
103+ },
104});
105```
106
107Strings or `Redacted` values are applied before build and dev, and
108passed to Compute as process environment.
109
110## Read the environment in server code
111
112```typescript
113// octane.config.ts
114new ServerRoute({
115 path: "/api/greeting",
116 methods: ["GET"],
117 handler: async () => Response.json({
118 greeting: process.env.GREETING ?? "hello",
119 }),
120});
121```
122
123Import `ServerRoute` from `@octanejs/vite-plugin` when adding this
124route. Middleware and route handlers run on Bun and read `process.env`.
125
126## Asset routing
127
128Files in `dist/client` are served first without invoking the Octane
129handler. Requests that miss the client assets go to Octane SSR. Both
130paths run in Compute; static assets are not a separate CDN deployment.
131
132## Local dev
133
134`bun alchemy dev` starts Octane's Vite server with its in-process SSR,
135server routes, RPC, and HMR. The Website creates no Prisma resources.
136Use `.pipe(Alchemy.remote())` to opt into live deployment during dev.
137
138## Custom domain
139
140```typescript
141const site = yield* Prisma.Website.Octane("Web", {
142 domain: "app.example.com",
143});
144```
145
146`Prisma.CustomDomain` requires the project's current default branch.
147Configure its returned DNS records yourself and verify status before
148cutover; see [Custom domains](/prisma/frontend/websites#custom-domains).
149
150## Where next
151
152- [Octane API](/providers/prisma/website/octane).
153- [Octane example](https://github.com/alchemy-run/alchemy/tree/main/examples/prisma-website-octane).
154- [Websites](/prisma/frontend/websites) and [Compute apps](/prisma/compute/apps).