Out Plane
Frameworks

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/Caddyfile

Caddyfile:

{
    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:

FrameworkPrefix
ViteVITE_
Create React AppREACT_APP_
Next.js exportNEXT_PUBLIC_

Never put a secret in a build time variable. It will be visible in the shipped bundle.

Production Notes

  • The try_files fallback is what fixes a 404 when someone refreshes a client side route.
  • The server must listen on the exposed port. Caddy binds it from $PORT above.

Next Steps

On this page