← Blog
App To Page TutorialWordPress

How to Add a Web App to WordPress (Vite, React, or Static HTML): 6 Methods

A complete, beginner-friendly walkthrough of every way to put a built web app live on your WordPress site — from a one-step plugin to File Manager, a static host like Cloudflare or Vercel, a code snippet, FTP, and your own server.

So you’ve built a web app — maybe a Vite or React project, maybe a plain HTML/JS tool, maybe something an AI assistant generated for you. It runs perfectly on your computer. Now you want it live at a URL on your WordPress site, like yoursite.com/my-app.

There are six realistic ways to do this. We’ll start with the simplest and work down to the more hands-on methods, so you can stop as soon as you find the one that fits your host and comfort level.

First, two quick things that apply to every method.

What you’ll need

  • A built version of your app — a folder (usually dist/ or build/) with an index.html and its assets in it. If you only have source code, run your build command first (npm run build for most projects).
  • Access to your WordPress site, and — for some methods — your hosting account.

The six methods at a glance

Each method links to its full walkthrough below. Difficulty accounts for the ongoing effort too — not just the first upload, but what it takes every time you update the app.

MethodBest forDifficulty
⭐ App To Page plugin — RecommendedAnyone. Works on any host, including shared hostingEasy
Host File ManagerShared hosting with cPanel (Bluehost, SiteGround)Tedious
Static host (Cloudflare / Vercel / Netlify)A dedicated host on app.yoursite.comModerate
Code snippet (WPCode)A small widget inside a pageFiddly
FTPUploading many files from a desktop appTedious
Your own server (SSH)Self-hosted VPS, terminal-comfortableAdvanced

First: build your app the right way

Whatever method you choose, one setting prevents the most common problem — broken assets after upload. By default, many builds assume they live at the domain root (/assets/app.js). Mounted in a subfolder like /my-app, those links break and you get a blank page.

The fix is to build with a relative base:

// Vite — vite.config.js
export default { base: './' };
// Create React App — package.json
{ "homepage": "." }
// Vue CLI — vue.config.js
module.exports = { publicPath: './' };

Plain HTML/JS apps just need relative paths (href="style.css", not /style.css).

Then build and find your output folder:

npm run build
# → produces dist/ (Vite, Vue) or build/ (Create React App)

Everything below assumes you have this folder ready.

Method 1: Use the App To Page plugin (Recommended)

Best for: anyone who wants the result of every other method on this page — without the file management, server access, or a second platform. It works on shared hosting, too.

⭐ Why we recommend starting here: it’s the only method that’s a few clicks in your WordPress dashboard, fixes asset paths for you, and works no matter who hosts your site.

  1. Download App To Page and install it (Plugins → Add New → Upload Plugin), then activate it.
  2. In your WordPress admin, open App To Page → Apps.
  3. Drag your build’s zip onto the dropzone and pick a URL, like /my-app.
  4. Click Create draft, then Preview to check it privately.
  5. Click Publish.

Your app is live at yoursite.com/my-app, served standalone with no theme wrapper. App To Page fixes asset paths automatically, falls back to index.html for deep links (so client-side routers work), and serves the file types modern apps use — including wasm, fonts, and 3D formats — so arbitrary builds tend to “just work.” Updating later is one click: ⋯ → Update with a new zip, same URL.

See the full walkthrough in Deploy your first app in 60 seconds.

If you’d rather not use a plugin, the next five methods get you there by hand.

Method 2: Upload with your host’s File Manager (Bluehost, cPanel)

Best for: shared hosting like Bluehost or SiteGround. No extra software needed.

  1. Log in to your hosting account (for example, the Bluehost dashboard).
  2. Open File Manager (on Bluehost: Hosting → File Manager; on cPanel: Files → File Manager).
  3. Navigate to your website’s root folder — almost always public_html (or public_html/yoursite.com if you host several domains).
  4. Click + Folder and create a folder named after your app, e.g. my-app.
  5. Open it, click Upload, and upload a zip of your build’s contents (zip the files inside dist/, so index.html is at the top of the archive).
  6. Right-click the uploaded zip and choose Extract, then delete the zip.
  7. Visit yoursite.com/my-app — your app is live.

Trade-off: this app is completely separate from WordPress — there’s no admin screen for it, and you’ll repeat this whole upload-and-extract dance by hand every single time you update the app. That repetition is why it’s more tedious than it first looks.

Method 3: Host it on a static host (Cloudflare, Vercel, or Netlify)

Best for: serving the app from a dedicated static host, optionally on a subdomain like app.yoursite.com.

There are many services that host a static build for you, and the big three — Cloudflare Pages, Vercel, and Netlify — all work essentially the same way: you give them your build folder, they serve it at a URL, and you can point your own domain at it. The free tiers are generous.

  1. Create a free account on whichever you prefer.

  2. Deploy your build folder:

    • Cloudflare Pages: Workers & Pages → Create → Pages → Upload assets, then drag your dist/ folder in.
    • Netlify: on the Sites screen, drag your dist/ folder onto the deploy drop zone (or Add new site → Deploy manually).
    • Vercel: import your Git repo, or use the vercel CLI; set the output directory to dist/.

    You’ll get a live URL like my-app.pages.dev, my-app.netlify.app, or my-app.vercel.app.

  3. Point your own subdomain (optional): in the project’s domain settings, add app.yoursite.com. The host gives you a CNAME record — add it at your DNS provider (or, if your DNS is already on that host, it’s set up for you).

  4. Link to the app from your WordPress menus, or embed it in a page with an <iframe>.

Trade-off: this is a second platform and a DNS step, and the app lives entirely outside WordPress. If you don’t already own a domain, you’ll need one (or a subdomain of an existing one). The upside is a fast, free static host with automatic deploys if you connect Git.

Method 4: Embed it with a code snippet (WPCode)

Best for: a small app you want to drop into a WordPress page using a shortcode, with no file uploads.

The trick is to bundle your whole app into a single HTML file first.

  1. For Vite, add the single-file plugin:

    npm i -D vite-plugin-singlefile
    // vite.config.js
import { viteSingleFile } from 'vite-plugin-singlefile';
export default { plugins: [viteSingleFile()] };

    Run npm run build to get a single dist/index.html with the CSS and JS inlined.

  2. Install and activate the free WPCode plugin (Plugins → Add New → search “WPCode”).

  3. Go to Code Snippets → + Add Snippet → Add Your Custom Code and choose the HTML Snippet type.

  4. To keep your app from clashing with the theme’s styles, wrap it in an isolated iframe and paste your single-file HTML into the srcdoc:

    <iframe
  style="width:100%;height:600px;border:0"
  srcdoc="<!-- paste your single-file HTML here, with quotes escaped -->">
</iframe>

  5. Set the snippet’s insertion method to “Shortcode”, save, and activate it. WPCode gives you a shortcode like [wpcode id="123"].

  6. Edit any page, add a Shortcode block, paste the shortcode, and publish.

Trade-off: without the iframe, your app shares the page’s CSS and JavaScript, which often causes collisions — and escaping a whole app into an srcdoc is fiddly. Inlining a large app also bloats the page. Best for small, simple widgets.

Method 5: Upload over FTP (FileZilla)

Best for: shared/managed hosting, if you prefer a desktop app or are uploading many files at once.

  1. Get your FTP credentials from your host (server address, username, password, and port — usually 21 for FTP or 22 for SFTP). On Bluehost and cPanel you can create an FTP account under FTP Accounts.
  2. Install a free FTP client like FileZilla.
  3. Enter the host, username, password, and port, then click Quickconnect.
  4. In the right-hand (server) panel, open public_html.
  5. Create a folder, e.g. my-app, and open it.
  6. In the left-hand (local) panel, open your dist/ folder, select all the files inside it, and drag them into my-app on the right.
  7. When the transfer finishes, visit yoursite.com/my-app.

Trade-off: same as File Manager, plus the credential setup — and you re-transfer files by hand on every update.

Method 6: Deploy to your own server over SSH

Best for: a self-hosted WordPress site on a VPS (DigitalOcean, Linode, your own box) running Nginx or Apache, where you’re comfortable in a terminal.

  1. Copy your build to a subfolder of your web root with rsync (or scp):

    rsync -av dist/ user@your-server:/var/www/html/my-app/

  2. Your web server already serves static files, so yoursite.com/my-app should load. For a single-page app (React Router, Vue Router), add a fallback so deep links return index.html:

    Nginx — in your server block:

    location /my-app/ {
  try_files $uri $uri/ /my-app/index.html;
}

    Apache — a .htaccess in /my-app/:

    RewriteEngine On
RewriteBase /my-app/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /my-app/index.html [L]

  3. Reload the server (sudo systemctl reload nginx) and visit yoursite.com/my-app.

Powerful and free if you already run a server — but it assumes server access and Linux comfort, and it’s still separate from WordPress.

What about rebuilding your app as a WordPress theme or Gutenberg block? You can, but it means re-implementing a finished app inside WordPress’s rendering pipeline — rarely worth it for a self-contained build, so we’ve left it off this list on purpose.

Which method should you use?

If you want the shortest path that works everywhere — including shared hosting — start with App To Page. It’s a dashboard drag-and-drop, it fixes the asset-path issues that trip up the manual methods, and updating is one click.

The other methods suit specific situations: File Manager or FTP if you don’t mind uploading files by hand, a static host like Cloudflare/Vercel/Netlify if you’d rather serve from a subdomain, WPCode for a tiny widget inside a page, and your own server if you already run a VPS. The catch with all of them is that the app lives outside WordPress, so every update is a manual redo.

Frequently asked questions

Do I need to know how to code? No. If you already have a built app (a dist/ folder), Method 1 is a drag-and-drop in your dashboard, and Methods 2 and 5 are just uploading files.

Why does my app show a blank page after uploading? Almost always an asset-path issue. Rebuild with a relative base (see the first section) and re-upload.

Will this work on shared hosting like Bluehost? Yes. Methods 1, 2, 4, and 5 run on shared hosting. Method 3 hosts the app on a separate service entirely, and Method 6 needs your own server.

How do I update the app later? With the manual methods you re-upload the files. With App To Page you click ⋯ → Update and drop a new zip — the URL stays the same.

Conclusion

Putting a built web app on WordPress isn’t hard once you match the method to your hosting. For the shortest path that works everywhere, start with App To Page. If you’d rather do it by hand, Methods 2–6 will get you there too.

Want a framework-specific walkthrough? See Deploy a Vite app to WordPress, Add a React app to WordPress, or Host a static JavaScript app on WordPress.