Preparing a React SPA (Vite or CRA) for page-by-page conversion
React SPA
Plain React projects are a first-class input. The renderer walks the client router and captures each route as a WordPress page template.
Quick answer
Zip your React project without node_modules, or paste the GitHub URL — Vite and Create React App projects are both built and rendered server-side.
Where do I find the ZIP?
- Open the project folder on your machine
- Remove node_modules, dist and build folders
- Zip the remaining project (package.json must be in the ZIP root)
- Or push to GitHub and paste the repository URL
What your upload should contain
package.jsonsrc/index.html or public/index.htmlvite.config.ts (Vite) or react-scripts dependency (CRA)
React (Vite / CRA) troubleshooting
Routes render as 404
Client-side routes must be linked from navigation or listed in a sitemap so route discovery finds them.
Blank page after build
Check the build runs locally with npm run build && npm run preview; the same build runs during conversion.
Assets 404 in the preview
Use relative asset imports rather than absolute paths tied to a custom base URL.
Best practices before exporting
- Define all routes in one router file so they can be discovered
- Provide a sitemap or route manifest for routes not linked in the UI
- Keep assets in src/assets or public/
- Make sure the production build succeeds
How to export
Method 1 — Source project ZIP (best result)
- Remove node_modules and build caches
- Zip the project root with package.json at the top level
- Upload the ZIP
- The sandbox installs, builds and renders every route
Method 2 — GitHub repository
- Push to GitHub
- Copy the repository URL
- Paste it into the converter
Method 3 — Build output
- Run npm run build
- Zip dist/ or build/
- Upload for a one-to-one static conversion
Accepted input
- ZIP archive
- GitHub repository
- Static export
- Source project
- Build output
Not recommended
- Old build folders from a previous version of the project
- Incomplete exports that are missing package.json or index.html
- Screenshots, Figma files, PSD files or design mockups
- node_modules — always exclude it, it makes uploads slow and adds nothing
Supported features
- React Router routes
- CSS, Tailwind, CSS modules
- Static images and fonts
- Forms
- UI libraries and sliders
Unsupported features
- Server-rendered data
- Authenticated views
- API-driven content
Common mistakes
- Uploading only the build folder when routes are client-side only
- Hash routing that hides URLs
- Missing public/ assets
Conversion tips
- Prefer BrowserRouter over HashRouter
- Expose a list of routes in a routes.ts file — it improves route discovery
Readiness checklist
- Navigation — Use real anchor links with readable labels. Menus built purely from JavaScript state are harder to map to WordPress menu locations.
- Images — Reference images from your project folder (imports or /public). Images loaded from a temporary preview host may not be reachable at conversion time.
- Assets — Fonts, icons and CSS should live inside the project. Locally hosted assets are copied into the theme automatically.
- Forms — Standard form markup is converted to Contact Form 7 or WPForms. Custom JavaScript submit handlers are replaced by the WordPress form handler.
- Routing — Every route you want as a WordPress page must be reachable from the navigation, a sitemap or a route manifest.
- Animations — CSS animations and common libraries survive. Heavy scroll-timeline or canvas effects may render differently in WordPress.
- SEO — Titles, meta descriptions and canonical tags are extracted per page and mapped into the theme and your SEO plugin.
- Responsive — Breakpoints are preserved as-is. Check mobile before exporting — the converter never fixes a layout that was already broken.
React (Vite / CRA) FAQ
Can I upload source code?
Yes, and it is the recommended input — we render each route in a headless browser.
Do I need to build first?
No. Uploading the source is enough; the sandbox builds it for you.
Vite or CRA — does it matter?
No. Both are detected and built automatically.
Do React hooks and state survive?
Interactive JavaScript is preserved where possible, but the theme is rendered HTML with the original bundles attached.
What about React Router?
Each route becomes a WordPress page template with matching permalinks.
Do I need to install anything to convert a React project?
No. Everything runs server-side. You upload a ZIP or paste a repository URL and receive a WordPress theme ZIP plus a live preview in the browser.
Should I remove node_modules before uploading?
Yes, always. node_modules is reinstalled during conversion, so including it only makes the upload slow and can push you over the size limit.
Can I preview the result before paying?
Yes. The WordPress preview is free for every conversion. Payment is only required when you download the theme ZIP.
What happens to my forms?
Standard HTML form markup is mapped to Contact Form 7 or WPForms shortcodes. Custom JavaScript submit handlers are replaced by the WordPress form handler.
Will my SEO titles and meta descriptions survive?
Yes. Titles, meta descriptions and canonical tags are extracted per page and written into the theme templates so your SEO plugin can take over.