---
name: app-to-page-deploy-ready
description: Prepare a built browser-only web app for upload to a WordPress site via the App To Page plugin. Use when the user wants to deploy/publish a Vite/React/Vue/HTML app to WordPress, or asks for a "deploy-ready" or "App To Page-ready" build.
---

# Make a build deploy-ready for App To Page

App To Page serves a built browser-only app at a URL on a WordPress site. It hosts build artifacts —
it does not build on the server. Your job is to produce a clean build that uploads and runs at any
mount path.

## Rules

1. **Use a relative base** so assets resolve at any URL:
   - Vite: set `base: './'` in `vite.config.*`.
   - Create React App: set `"homepage": "."` in `package.json`.
   - Vue CLI: set `publicPath: './'` in `vue.config.js`.
   - Plain HTML/JS: reference all assets with relative paths (`href="style.css"`, not `/style.css`).
2. **Keep a single top-level `index.html`** as the entry point.
3. **Bundle every asset** the app needs (models, fonts, images, `wasm`) inside the build output, and
   reference them relatively. No reliance on external/CDN paths the user must configure.
4. **Build for production**, then **zip the contents** of the output folder (`dist/` or `build/`) so
   that `index.html` is at the top of the archive — not nested inside a wrapping folder.

## Steps

1. Apply the relative-base setting for the project's framework.
2. Run the production build (e.g. `npm run build`).
3. Verify `index.html` is at the top of the output and asset links are relative.
4. Produce a zip of the output folder's contents named after the app (e.g. `my-app.zip`).
5. Tell the user to upload it in WordPress under **App To Page → Apps**: drop the zip, pick a URL,
   preview, then publish.

## Don't

- Don't assume the app is served from the domain root.
- Don't leave root-absolute asset paths (`/assets/...`).
- Don't zip the parent folder in a way that buries `index.html` under multiple directories.