# Public browser variables

[← Back to TanStack Start](https://dotenvx.com/docs/tanstack-start.md#ship)

Use Vite's VITE_ prefix for public configuration. Add a value to your encrypted .env file:

**npm**

```console
$ npx dotenvx set VITE_SITE_NAME "My app"
```

**pnpm**

```console
$ pnpm exec dotenvx set VITE_SITE_NAME "My app"
```

Read it in a component:

```tsx
export function SiteName() {
  return <span>{import.meta.env.VITE_SITE_NAME}</span>
}
```

Restart npm run dev or pnpm dev after changing .env.

For production, add VITE_SITE_NAME to .env.production using the same command with -f .env.production. Follow [Build-time configuration](https://dotenvx.com/docs/tanstack-start/build-time.md) to decrypt it before Vite builds.

VITE_ values are embedded in browser code. Encryption protects the committed file, but visitors can read the built values. Keep credentials unprefixed and inside server functions. See [TanStack Start environment variables](https://tanstack.com/start/latest/docs/framework/react/guide/environment-variables).