# twilightReact (https://docs.salla.dev/twilight/react/local-development/vite-plugin)



<Callout title="Framework: TanStack Start">
  This page is written for TanStack Start, the default and currently supported framework. [See what depends on the framework](https://docs.salla.dev/twilight/react/start/frameworks).
</Callout>

Read this when you need to change how your theme is built or served. A new theme already has it set up in `vite.config.ts`, and `salla theme dev` runs through it.

## Import [#import]

```ts
import { twilightReact } from '@salla.sa/twilight-theme-engine/vite';
```

## Use it [#use-it]

```ts title="vite.config.ts"
import { defineConfig } from 'vite';
import { twilightReact } from '@salla.sa/twilight-theme-engine/vite';

export default defineConfig(async () => ({
  plugins: [
    ...(await twilightReact({
      localesDir: './locales',
    })),
  ],
}));
```

## API [#api]

```ts
function twilightReact(options?: TwilightReactOptions): Promise<PluginOption[]>;
```

It is async and returns an array of plugins, so `await` it and spread the result into `plugins`.

| Prop                | Type                                 | Description                                                                                                                                                                   |
| ------------------- | ------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `framework?`        | `"tanstack"`                         | Routing framework. TanStack Start is the only one supported today. Default: `"tanstack"`.                                                                                     |
| `srcDirectory?`     | `string`                             | Folder with your theme code. Default: `"app"`.                                                                                                                                |
| `baseRoutesImport?` | `string`                             | Where the engine routes are imported from. Default: `"@salla.sa/twilight-theme-engine/routes"`.                                                                               |
| `react?`            | `ReactPluginOptions \| PluginOption` | Options for the React plugin, or your own plugin instance.                                                                                                                    |
| `router?`           | `RouterOptions \| PluginOption`      | Options for the router plugin, or your own plugin instance.                                                                                                                   |
| `localesDir?`       | `string`                             | Folder of per-language JSON files (such as `locales/en.json`), relative to `vite.config.ts`. They are bundled into the theme's translations.                                  |
| `twilightJson?`     | `string`                             | Path to the theme manifest. In dev, its settings and components feed the local theme editor at `/__twilight/editor`; builds ship an empty schema. Default: `"twilight.json"`. |
| `worker?`           | `boolean \| WorkerOptions`           | Local server runtime. `true` or omitted: the engine sets it up. An object: the same, with overrides. `false`: the engine adds nothing. Default: `true`.                       |

## Notes [#notes]

* It runs at build and dev time only and adds nothing to the page itself.
* Without `localesDir`, your translation files are not bundled.
* The engine sets up the server runtime, so your config needs no server plugin of its own.

<Callout type="warn">
  If your `vite.config.ts` already registers the server runtime plugin itself, set `worker: false`. Registering it twice is a hard error.
</Callout>

## Next [#next]

* [Add translation keys](https://docs.salla.dev/twilight/react/recipes/add-translation-keys) (uses `localesDir`)
* [Routes and pages](https://docs.salla.dev/twilight/react/guide/routes-and-pages)
* [Troubleshooting](https://docs.salla.dev/twilight/react/local-development/troubleshooting)