> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fimo.ai/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Vite + React

> Connect Fimo to a plain Vite and React application.

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

```bash theme={null}
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:

```bash theme={null}
npm install fimo fimo-react fimo-vite fimo-react-router
```

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

## Configure the runtime

```json theme={null}
{
  "runtime": { "framework": "vite" }
}
```

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

```json theme={null}
{
  "runtime": {
    "framework": "vite",
    "outputDirectory": "build/client"
  }
}
```

## Connect the Vite build

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

```ts theme={null}
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:

```json theme={null}
{
  "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.

<Card title="React Router framework mode" icon="route" href="/docs/cli/frameworks/react-router">
  Use the framework-mode adapter when the application already has React Router route modules.
</Card>