Deploy a Vue app to a VPS: build, HTTPS, no Docker

To deploy a Vue app to a VPS with ox, add the repo as a project and deploy it, with no Dockerfile and no ox.toml. ox reads vue.config.js, yarn.lock and package.json, runs yarn install --frozen-lockfile --production=false and yarn 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 Vue CLI 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 Vue CLI repo

This is the plan ox check prints for a minimal a Vue app made with Vue CLI, 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 Vue CLI

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 Vue CLI

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 Vue CLI

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, PUBLIC_HOST, PUBLIC_SCHEME and PUBLIC_PORT.

If the Vue CLI 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.
• killed by the out-of-memory killer (the build needs more memory than the project or host allows): The build ran out of memory. A build gets at most three quarters of the server's memory: raise memory in ox.toml if it sets one, or use a bigger server. When the message says the whole server ran out, what runs on it held the rest: use a bigger server, or stop a project, staging or preview you do not need. More.

Visitors never see a failed deploy: the old release serves until the new one is healthy.

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; Caddy gets its certificate.
• Roll back to an earlier release without a rebuild.

Vue CLI FAQ

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

No. ox does not use Docker, and ox check on a Vue CLI 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 Vue CLI?

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

Does ox use yarn when my repo has yarn.lock?

Yes. The install comes from your lockfile, so a yarn.lock gives yarn install --frozen-lockfile --production=false (Yarn 1; the flag keeps the build tools when you set NODE_ENV=production) and the build runs with yarn too, as the plan above shows.

Related guides

• AngularDeploy an Angular single-page app to your own VPS: ox reads the output folder from angular.json, runs ng build, and Caddy serves it, with no Docker.
• Angular SSRDeploy an Angular app with server-side rendering to your own VPS: ox builds it, runs the server.mjs Angular writes under systemd, and Caddy adds HTTPS.

The Stacks page lists every stack, and the ones ox does not deploy yet.