> ## Documentation Index
> Fetch the complete documentation index at: /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:

> [tab] npm
>
> ```bash theme={null}
> npx fimo@latest init my-site --framework vite --package-manager npm
> ```

> [tab] Bun
>
> ```bash theme={null}
> bunx fimo@latest init my-site --framework vite --package-manager bun
> ```

> [tab] pnpm
>
> ```bash theme={null}
> pnpm dlx fimo@latest init my-site --framework vite --package-manager pnpm
> ```

> [tab] Yarn
>
> ```bash theme={null}
> yarn dlx fimo@latest init my-site --framework vite --package-manager yarn
> ```

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:

> [tab] npm
>
> ```bash theme={null}
> npm install fimo fimo-react fimo-vite fimo-react-router
> ```

> [tab] Bun
>
> ```bash theme={null}
> bun add fimo fimo-react fimo-vite fimo-react-router
> ```

> [tab] pnpm
>
> ```bash theme={null}
> pnpm add fimo fimo-react fimo-vite fimo-react-router
> ```

> [tab] Yarn
>
> ```bash theme={null}
> yarn add 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.

Run `fimo validate` before building. Plain HTML, custom static generators, and Vite applications do not need a React Router `src/routes.ts` manifest.

## 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 built `index.html` serves every route, so it carries no `canonical` or `og:url`; search engines treat each rendered page as its own canonical. The dev server emits both for the requested page. Once the SEO settings have a site name and URL, the plugin also adds the site's Organization and WebSite JSON-LD to `index.html`. The application still owns its route definitions, links, locale resolution, and browser-router behavior.

> [card] [React Router framework mode](/docs/cli/frameworks/react-router.md)
>
> Use the framework-mode adapter when the application already has React Router route modules.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.