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.
• Fixed Overrides: Use canisterId in the Vite plugin config when you want a specific canister ID to override the auto-detected development value.
• 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 { icReactor } from "@ic-reactor/vite-plugin"

export default defineConfig({
  plugins: [
    icReactor({
      canisters: [
        {
          name: "backend",
          didFile: "...",
          // Optional fixed override for this canister in dev and generated output
          canisterId: "yq4ns-hyaaa-aaaap-akbna-cai",
        },
      ],
      // Enabled by default
      injectEnvironment: true,
    }),
  ],
})