Vite + React

Create a native Vite + React SPA already connected to Fimo:

fimo init my-site --framework vite

For an application that already exists, use fimo link and preserve its browser router, providers, and build structure. Install the four runtime packages on the same Fimo release:

npm install fimo fimo-react fimo-vite fimo-react-router

fimo-react-router supplies the React-specific Vite composition.

Configure the runtime

{
  "runtime": { "framework": "vite" }
}

Vite defaults to dist. Declare a different output directory only when the existing application intentionally emits somewhere else:

{
  "runtime": {
    "framework": "vite",
    "outputDirectory": "build/client"
  }
}

Connect the Vite build

Add the fimo() plugins without replacing the application’s router plugin:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { fimo } from 'fimo-react-router/vite';

export default defineConfig({
  plugins: [react(), ...fimo({ seo: true })],
});

Use FimoProviders from fimo-react-router around the existing React tree and render tracked values with fimo-react. For a Vite project with no React at all, install only fimo and fimo-vite, then import fimo from fimo-vite. For plain HTML or a custom static generator that does not use Vite, leave runtime.framework unset, keep only the neutral fimo dependency, and declare the real runtime.commands.build and runtime.outputDirectory in .fimo/config.json; no framework companion is needed.

Browser-history routing

A BrowserRouter SPA needs the host to serve the application shell for direct visits to client routes:

{
  "runtime": { "framework": "vite" },
  "hosting": {
    "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
  }
}

Do not add this rewrite to a HashRouter application or a build that emits a real file for each route. The catch-all lets the browser router render its own not-found UI, but the initial host response remains HTTP 200. Build-time SEO uses fimo({ seo: true }). The application still owns its route definitions, links, locale resolution, and browser-router behavior.

React Router framework mode

Use the framework-mode adapter when the application already has React Router route modules.

Start

Build your site

Preview and launch

Agents and automation

Work with your team

Migrate an existing site

Reference

Vite + React

Configure the runtime

Connect the Vite build

Browser-history routing

React Router framework mode

​Configure the runtime

​Connect the Vite build

​Browser-history routing

React Router framework mode

Configure the runtime

Connect the Vite build

Browser-history routing