guides

Deploy a Static Site

Deploy a static site to Runix — React, Vue, Svelte, plain HTML, or any frontend framework.

Static sites are the simplest thing to deploy on Runix. Whether it's a React app built with Vite, a Vue project, a Svelte app, or just plain HTML files, Runix serves them instantly with global HTTPS.

Static sites don't need a PORT or any server configuration. Runix automatically serves your files with a fast, production-grade web server. Just tell it where your built files are.

Prerequisites#

HTML files, or a project with a build command that generates HTML (React, Vue, Svelte, etc.)
A Runix account (sign up free at runixcloud.dev)

Supported Frameworks#

Framework	Build Command	Output Directory
Vite (React, Vue, Svelte)	npm run build	dist
Create React App	npm run build	build
Next.js (static export)	next build && next export	out
Nuxt (static)	nuxt generate	dist
SvelteKit (static)	vite build	build
Plain HTML	None needed	. (project root)

Example: Vite React App#

Here's how to deploy a typical Vite-based React app. The same pattern works for Vue and Svelte apps built with Vite.

Create a new Vite project (or use your existing one)

bash

npm create vite@latest my-site -- --template react
cd my-site
npm install

Initialize Runix

bash

runix init

Runix detects it as a static site and generates a runix.yaml with the right build command and output directory.

Deploy

bash

runix deploy

text

Detecting runtime... Static Site (Vite + React)
Building... npm run build
Publishing dist/... done
Deploying to my-site-a3bf.runixcloud.dev... live!

Your site is running at:
  https://my-site-a3bf.runixcloud.dev

Configuration#

The key difference from web services is the type field. For static sites, use static-site instead of web-service:

runix.yaml

yaml

name: my-site
services:
  - name: frontend
    type: static-site
    repo: https://github.com/yourname/my-site
    branch: main
    build:
      command: npm run build
      output: dist

Build Configuration#

Field	Description	Example
build.command	The command to build your site	npm run build
build.output	The directory containing the built files	dist, build, out, public

Plain HTML (No Build Step)#

If your site is just HTML, CSS, and JavaScript files with no build step needed, you can skip the build configuration entirely:

runix.yaml

yaml

name: my-site
services:
  - name: site
    type: static-site
    repo: https://github.com/yourname/my-site
    branch: main

Runix will serve the files from your project root. Make sure you have an index.html file.

How It Works#

1.Runix detects your project type from package.json and framework dependencies
2.If a build command is configured, it runs the build
3.The output directory is packaged into a lightweight container with a fast web server (Nginx or Caddy)
4.Your site is deployed with HTTPS and a public URL
5.Single-page app (SPA) routing is handled automatically — all routes serve index.html

No PORT variable is needed for static sites. Runix handles the web server configuration completely. Your frontend code doesn't need to listen on any port.

Common Issues#

Blank page after deployment#

Check that the build.output directory in your runix.yaml matches where your build tool puts the output files. For Vite it's dist, for Create React App it's build, for Next.js static export it's out.

404 errors on page refresh (SPA routing)#

Runix automatically configures SPA fallback routing, so refreshing a page like /about should work out of the box. If you're still seeing 404 errors, make sure your app uses client-side routing (React Router, Vue Router, etc.) rather than relying on server-side routes.

Environment variables in frontend code#

Static sites are built at deploy time, not at runtime. This means environment variables must be available during the build. Use your framework's built-in env variable support:

yaml

# runix.yaml - these are available during build
services:
  - name: frontend
    type: static-site
    env:
      VITE_API_URL: "https://api.example.com"

Environment variables in static sites are embedded into your JavaScript bundle during build. Don't put secrets (API keys, tokens) in your frontend environment variables — they'll be visible to anyone who views your source code.

Java

Web Service