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

# Vite and React

> Install Highseat in a React app built with Vite or another bundler, with the highseat package or a script tag.

The `highseat` package renders the tracker's script tag and gives you a typed `track()`. The tracker loads from `cdn.highseat.com`, so the install needs no secret and no server code.

Replace `YOUR_SITE_ID` with your site's id, which starts with `site_`. **Site settings › Installation** in the dashboard shows it, with this code already filled in.

<Steps>
  <Step title="Install the package">
    ```bash theme={null}
    npm install highseat
    ```
  </Step>

  <Step title="Render it once, beside your root component">
    ```tsx highlight={1,3} theme={null}
    import { Highseat } from "highseat/react"

    <Highseat site="YOUR_SITE_ID" />
    ```
  </Step>
</Steps>

The tracker counts each client-side navigation as a page view. A router that keeps the route in the hash, such as `#/pricing`, needs `hashRouting` on the component.

Deploy, then [verify your install](/docs/install/verify). Highseat counts only your site's own domain, so a visit to `localhost` does not complete the install.

## Use an environment variable

Read the site id from VITE\_HIGHSEAT\_SITE, set for the build: Vite writes it into the bundle. With another bundler, use its public prefix.

```dotenv .env theme={null}
VITE_HIGHSEAT_SITE=YOUR_SITE_ID
```

```tsx theme={null}
<Highseat site={import.meta.env.VITE_HIGHSEAT_SITE} />
```

## Pages that are not found

A 404 the server answers is detected on its own. A single-page app also calls highseat.track("404") in the component its router renders for an unknown route.

## Content Security Policy

Allow the ingest host in script-src and connect-src.

```text theme={null}
script-src https://cdn.highseat.com;
connect-src https://cdn.highseat.com;
```

## Without the package

Add the tag to the `<head>` of `index.html`, the page Vite serves. Never render it from a component: a `<script>` tag that React creates in the browser never runs.

```html theme={null}
<script defer src="https://cdn.highseat.com/script.js" data-site="YOUR_SITE_ID"></script>
```

## Next steps

<Card title="Track events" icon="mouse-pointer-click" href="/docs/events">
  Send signups and purchases with a typed `track()`.
</Card>


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