Vite Environment Variables

This example showcases how IC Reactor integrates with Vite’s environment variable system and the local icp-cli environment to automatically manage canister IDs and network configurations.

Features Demonstrated

• Automatic Injection: Canister IDs are automatically detected from the local environment and injected into the frontend.
• Environment Variables: Use VITE_CANISTER_ID_<NAME> to override or provide canister IDs manually.
• Seamless Local Dev: Run icp deploy and your frontend immediately knows where to find the canisters.
• Client Configuration: Using withCanisterEnv: true to enable automatic environment detection.

Links

Open in StackBlitz Edit and run in your browser

View on GitHub Browse the source code

Live Preview

Implementation

The ClientManager is configured to look for canister IDs in the environment:

src/lib/clients.ts

import { ClientManager } from "@ic-reactor/react"
import { QueryClient } from "@tanstack/react-query"

export const queryClient = new QueryClient()

export const clientManager = new ClientManager({
  queryClient,
  // Enable automatic environment detection
  withCanisterEnv: true,
})

The Vite plugin then ensures these variables are available during development by setting an ic_env cookie:

vite.config.ts

import { icReactorPlugin } from "@ic-reactor/vite-plugin"

export default defineConfig({
  plugins: [
    icReactorPlugin({
      canisters: [{ name: "backend", didFile: "..." }],
      // Enabled by default
      injectEnvironment: true,
    }),
  ],
})