Deploy a Static Site
Deploy a static site or single page app on Out Plane behind a real web server.
Out Plane runs your built site behind a web server in a container, so a static site needs
a small server that listens on 0.0.0.0 and the port you expose. For the shared deploy
flow, see Deploy from GitHub.
Prepare Your App
Build your site, then serve the output with Caddy. Caddy reads the port cleanly and falls
back to index.html for single page app routes in one line.
FROM node:22-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
FROM caddy:2-alpine
COPY --from=build /app/dist /srv
COPY Caddyfile /etc/caddy/CaddyfileCaddyfile:
{
admin off
auto_https off
}
:{$PORT:8080} {
root * /srv
encode gzip
file_server
try_files {path} /index.html
}Set the build output to your framework's directory: dist for Vite, Vue, and Svelte,
build for Create React App, and public for Gatsby. Out Plane handles HTTPS at the edge,
so Caddy's own TLS is off.
Deploy
Create an application from your repository with the Dockerfile build method, and expose
the port Caddy listens on.
Build-Time Variables
A static bundle reads its configuration at build time, not runtime, and those values ship to the browser. Use your framework's public prefix and set the variables with Build scope in an Environment Variable Group:
| Framework | Prefix |
|---|---|
| Vite | VITE_ |
| Create React App | REACT_APP_ |
| Next.js export | NEXT_PUBLIC_ |
Never put a secret in a build time variable. It will be visible in the shipped bundle.
Production Notes
- The
try_filesfallback is what fixes a404when someone refreshes a client side route. - The server must listen on the exposed port. Caddy binds it from
$PORTabove.