SPA Mode (Single Page Application)

SPA Mode ensures that single-page applications like React apps with React Router work correctly when published.

What is SPA Mode?

SPA Mode is a setting that tells PlayCode how to serve your website. It determines how navigation and routing work in your published website.

When to enable SPA Mode

Enable SPA Mode (turn it ON) when you're building:

• React applications with React Router
• Vue applications with Vue Router
• Any single-page application with client-side routing

When enabled, all routes will serve the same index.html file, allowing your client-side router to handle navigation.

When to disable SPA Mode

Disable SPA Mode (turn it OFF) when you're building:

• Multi-page websites with separate HTML files
• Static sites with links between different HTML pages
• Traditional websites without client-side routing

When disabled, each HTML file will be served at its own URL.

How to change SPA Mode

1. Click the Menu icon (top left).
2. Select Project Settings.
3. Find the SPA Mode checkbox.
4. Check it to enable SPA Mode, uncheck it to disable.

Default setting

SPA Mode is disabled by default. If you're using React Router or Vue Router, make sure to enable it.

Example

With SPA Mode ON:

• /about → serves index.html (React Router handles it)
• /contact → serves index.html (React Router handles it)

With SPA Mode OFF:

• /about → looks for about.html
• /contact → looks for contact.html