Deploy a React app built with Vite to your own VPS

To deploy a React Vite app to a VPS with ox, add the repo as a project and deploy it, with no Dockerfile and no ox.toml. ox reads package.json, runs npm install and npm run build, and Caddy serves dist over HTTPS with no app process. Run ox check in your repo to see the same plan before the first deploy.

Tested on a real server. A React with Vite app deployed and served on a real Ubuntu server in ox's test lab, and the plan below is what ox check prints for a minimal one.

What ox detects in a React with Vite repo

This is the plan ox check prints for a minimal a React app built with Vite, with no ox.toml. Each row says where its value came from: a file in the repo, or ox's default.

The ox.toml for React with Vite

None is needed: the plan above comes from the repo alone. Write one to serve your own domain or to change what ox detected. This one passes ox check against the same repo: [static] needs its dir, and the build stays detected.

domains = ["www.example.com"]

[static]
dir = "dist"

Check and deploy React with Vite

Add the repo as a project, then check and ship it from a terminal:

ox check                                # in the repo: the plan above, offline
ox new <owner/repo> --server <server>  # add the repo as a project
ox deploy <project> --wait              # stream the deploy, exit with its result
ox runs <project>                      # past deploys, with their ids
ox logs <project> --run <id>         # one deploy's log

A static site has no app process, so its log is the deploy's own: ox runs lists them and --run reads one.

Variables to set for React with Vite

None before the first deploy: ox check asks for no variable. Add your own on the dashboard's Variables tab or with ox vars set <project> KEY.

ox provides these to the app itself: PORT, HOST, OX_ENV, OX_PROJECT, OX_RELEASE, OX_DATA_DIR, PUBLIC_URL and PUBLIC_HOST.

If the React with Vite deploy fails

• build 1/1: npm run build: exit status 1: Your build failed. The lines above it are the build's own output; run the same command on your computer, fix it, and push. More.
• the build left no dist directory: The build wrote its files somewhere else. Set [static] dir to the folder your build makes. More.
• package.json's start script (vite) runs a development server, not a production one; set [app] start to the command that serves the built app: ox never runs a development server in production. Remove the start script, or point it at the built app. More.

Your visitors never see a failed deploy: the previous release keeps serving until the new one passes its health check.

Next steps

• The static site guide: Vite, Astro and plain HTML with a full ox.toml.
• The [static] keys: the folder Caddy serves, single-page mode and an API beside it.
• Add a custom domain with one A record; Caddy gets the HTTPS certificate.
• Roll back to an earlier release without a rebuild.

React with Vite FAQ

Do I need a Dockerfile or an ox.toml to deploy a React Vite app to a VPS?

No. ox does not use Docker, and ox check on a React with Vite repo with no ox.toml prints Ready to deploy. Write an ox.toml only to change what ox detected.

What does ox install on the server for React with Vite?

Only what the plan names: node 24 (ox's default). Your app's own dependencies are installed by the build into the release folder, not system-wide.

Can the app call an API in another project?

Yes. Build the API URL in at build time: your variables are there during the build, so Vite reads VITE_API_URL from import.meta.env. Everything in the build is public, so never put a secret in it.

Related guides

• Create React AppDeploy a Create React App project to your own VPS: ox runs react-scripts build and Caddy serves the build folder over HTTPS. No Docker, no ox.toml.
• Vue CLIDeploy a Vue CLI app to your own VPS: ox installs from yarn.lock, runs your build, and Caddy serves dist over HTTPS. The plan comes from the repo alone.

Every stack ox deploys, and the ones it does not yet, is on the Stacks page.