# Vite (/docs/developer/vite)





# Vite [#vite]

Vite builds a plain client-side bundle, so setup is simpler than a framework with server rendering — initialize the SDK once from your entry file, before or alongside your application mount.

## Install [#install]

<Tabs items="['npm', 'pnpm']" groupId="package-manager">
  <Tab value="npm">
    ```bash
    npm install ucoder-insight
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm add ucoder-insight
    ```
  </Tab>
</Tabs>

## Initialize [#initialize]

```ts title="src/main.ts"
import { initUcoderInsight } from "ucoder-insight";

void initUcoderInsight("YOUR_PUBLIC_TRACKING_ID");

// ...your existing app bootstrap code (createApp, ReactDOM.render, etc.)
```

Initialize once in `main.ts` / `main.tsx`. Do not call `initUcoderInsight` again elsewhere in your app.

The tracking ID is meant to be public — it identifies the project and is safe to expose in client-side code.

## Using an environment variable [#using-an-environment-variable]

Instead of hardcoding the tracking ID, keep it in an env file. Vite only exposes variables to client code when they're prefixed with `VITE_`:

```dotenv title=".env"
VITE_UCODER_TRACKING_ID=your_public_tracking_id
```

```ts title="src/main.ts"
import { initUcoderInsight } from "ucoder-insight";

void initUcoderInsight(import.meta.env.VITE_UCODER_TRACKING_ID);
```

<Callout type="warn">
  `process.env.YOUR_VAR` does not work in Vite client code — use
  `import.meta.env.VITE_YOUR_VAR` instead, and make sure the variable name
  starts with `VITE_`.
</Callout>

If you're using TypeScript, declare the variable's type so `import.meta.env` is type-checked:

```ts title="src/vite-env.d.ts"
/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_UCODER_TRACKING_ID: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}
```

## Using Vite with React [#using-vite-with-react]

If you're using Vite to bundle a React app, initialize the SDK inside a `useEffect` the same way as a plain React app — see the [React guide](/docs/developer/react) for the component pattern and automatic route-change tracking. Just read the tracking ID from `import.meta.env` instead of `process.env`:

```tsx title="src/Analytics.tsx"
import { useEffect } from "react";
import { initUcoderInsight } from "ucoder-insight";

export default function Analytics() {
  useEffect(() => {
    void initUcoderInsight(import.meta.env.VITE_UCODER_TRACKING_ID);
  }, []);

  return null;
}
```

## Things to check [#things-to-check]

<Callout type="info">
  If your `vite.config.ts` sets a custom Content-Security-Policy, add the
  Ucoder Insight tracking endpoint to `connect-src` — otherwise the browser
  will silently block outgoing requests.
</Callout>

<Callout type="info">
  In development, Vite's Hot Module Reload may re-run `main.ts` and cause
  `initUcoderInsight` to log more than once in the console. This is a dev-only
  artifact of HMR and does not happen in a production build.
</Callout>

See [Configuration](/docs/getting-started/configuration) for supported SDK options.