How to Deploy a Vite App to WordPress (Step by Step)

Vite makes a fast, clean production build — but it doesn’t tell you how to get that build onto your WordPress site. This guide does, in two parts: the one config change that prevents broken assets, and the quickest way to publish the result.

Step 1: Build with a relative base

By default, a Vite build assumes it’s served from the domain root, so its asset links look like /assets/index.js. When you mount it in a subfolder like /my-app, those links break and you get a blank page.

Set a relative base in your Vite config:

// vite.config.js
export default {
  base: './',
};

Then build:

npm run build

Vite writes everything to a dist/ folder. Zip the contents of that folder so index.html sits at the top of the archive.

Using React Router or Vue Router inside your Vite app? Keep reading — you’ll want deep-link (SPA) fallback so refreshes and shared links don’t 404.

Step 2: Publish it (the fast way)

The simplest method that works on any host — including shared hosting — is the App To Page plugin:

1. Download App To Page and install it under Plugins → Add New → Upload Plugin, then activate it.
2. Open App To Page → Apps in your WordPress admin.
3. Drag your dist zip onto the dropzone and choose a URL, like /my-app.
4. Click Create draft, then Preview to confirm it runs.
5. Click Publish.

Your Vite app is now live at yoursite.com/my-app, served standalone. App To Page injects the right base path, falls back to index.html for client-side routes, and serves modern asset types (including wasm) automatically — so SPAs work without extra config.

Prefer to do it manually?

You can also upload the dist/ folder by hand via your host’s File Manager or FTP, deploy it to your own server, or host it on Cloudflare Pages. Each of those is covered step by step in our full guide: How to add a web app to WordPress: 6 methods.

FAQ

Why is my Vite app blank after uploading? You almost certainly built with the default absolute base. Set base: './', rebuild, and re-upload.

Do client-side routes work? Yes — with App To Page, deep-link fallback is on by default, so a refresh on /my-app/settings serves your index.html and the router takes over. On a manual deploy you’ll add a server fallback rule yourself.

Does this work on shared hosting? Yes. The App To Page method needs no server access or build tools on the host.

Conclusion

Deploying a Vite app to WordPress comes down to two things: build with base: './', then publish. Try App To Page for the one-step route, or follow the full manual guide if you’d rather upload by hand.