React and Vite apps are the most common thing people host with App To Page — a dashboard, an internal tool, a calculator, something an AI assistant built. This guide covers the one build setting that matters, then walks you through getting it live.
If you just want the fastest path, the Deploy your first app guide is the 30-second version. This one goes deeper on the React/Vite specifics.
The one setting that matters: a relative base
Here’s the one thing worth getting right. When you build a React or Vite app, the bundler writes the
links to your JavaScript and CSS into index.html. By default, many setups assume your app lives at
the root of a domain — so the links look like /assets/app.js.
Your app won’t live at the root. It’ll live at your-site.com/your-app. Those root-absolute links
can’t find your files there, and you get a blank page.
The fix is a relative base (./), which makes every link relative to the page instead. The same
build then works at any URL. App To Page also rewrites paths for you on upload as a safety net — but
setting a relative base is the clean way to do it, and it takes one line.
Vite
In vite.config.js:
export default { base: './',};Create React App
In package.json:
{ "homepage": "."}Building with an AI tool? Just ask for it up front — see The AI build kit for a copy-ready prompt that produces a deploy-ready build every time.
Step 1: Build and zip your app
Run your production build:
npm run buildVite outputs a dist/ folder; Create React App outputs build/. Zip the contents of that folder
so index.html sits at the top of the archive — not the folder itself.
cd distzip -r ../my-app.zip .Note: If you zip the dist folder instead of its contents, your app lands one level too deep and
shows a blank page. App To Page strips a single wrapping folder automatically, but zipping the
contents is the reliable habit.
Step 2: Upload it to WordPress
Go to App To Page » Apps, drag your .zip onto the dropzone, and App To Page shows the Confirm
your app card. Give it a URL like my-app, choose Public or Logged-in only, and tick the
trust checkbox. Then click Create draft.
For the full walkthrough with screenshots, see Deploy your first app.
Step 3: Keep deep links working
If your app uses React Router (or any client-side router), you need one setting on so bookmarked links and browser refreshes don’t 404.
On the Confirm-your-app card, open Advanced and leave Single-page app fallback on — it’s the
default. It routes any unknown path back to your index.html, so your router can take over and show
the right screen. Deep links and refreshes then behave exactly like they do on your machine.
That’s it — click Preview to check it, then Publish, and your React app is live at
your-site.com/my-app.
Frequently asked questions
Can you host a React app on WordPress?
Yes. Build your React app for production, set a relative base, and upload the build with App To Page. It’s served as static files at the URL you choose, with no theme wrapper and no separate host.
Does React Router work?
Yes. Leave Single-page app fallback on (it’s the default) and client-side routes, deep links, and refreshes all work.
Do I need Node running on my WordPress host?
No. App To Page serves the finished build as static files. There’s no Node and no build step on the server, so it works on ordinary shared hosting.
What about Next.js?
App To Page serves static, browser-only builds. If you export a fully static site (no server-side rendering or API routes), you can host that export. Apps that need a Node server at runtime aren’t a fit — App To Page hosts build output, it doesn’t run a server.
My app is blank after uploading. Why?
Almost always an absolute-base build. Rebuild with a relative base (above) and update the app. See Troubleshooting for the full checklist.