Skip to main content
Scaffold + manual step. Remix doesn’t expose environment variables to the browser automatically — you have to surface them via a loader. The CLI writes the LucentInit component but leaves the loader wiring to you.

Install with the CLI

Pick Remix when prompted.

Manual setup

1

Environment variable

.env:
2

LucentInit component

app/components/lucent-init.tsx:
3

Expose the key via the root loader (manual)

app/root.tsx:

Notes

  • Remix never ships process.env to the browser. The loader pattern is the canonical way to expose public keys; don’t try to read process.env directly from a client component.
  • LucentInit renders nothing — it only exists to run the tracker inside a useEffect so it initializes on mount and stops on unmount.
  • Prefix the env var with LUCENT_ (no public prefix) because it’s consumed server‑side by the loader before being handed to the client.