Function canisterDappEnvironmentConfig

Vite plugin that provides Internet Computer Canister Dapp environment configuration

Features:

• Works in all build modes (development and production)
• Accepts optional environment configurations for both dev and prod in vite.config.ts
• Provides sensible defaults for both environments if not specified
• Embeds both configurations into the build for runtime environment detection
• Automatic server proxy setup for IC development (only in Vite dev server)
  • /api -> proxied to configured host
  • /canister-dashboard -> proxied to ${host}/canister-dashboard?canisterId=${viteDevCanisterId}
  • /.well-known/ii-alternative-origins -> proxied to ${host}/.well-known/ii-alternative-origins?canisterId=${viteDevCanisterId} Note: The last two proxy rules are only set if viteDevCanisterId is provided Note: Existing user-defined proxy rules for these paths will not be overwritten

This plugin enables building a single WASM that works in all environments by:

• Embedding both dev and prod configurations in the build
• Detecting environment at runtime based on URL origin (http://, localhost, 127.0.0.1 = dev)
• Automatically switching between configurations based on where the app is accessed
• Providing canister ID inference with automatic URL-based detection and Vite dev server fallback

This plugin is designed to:

• Enable runtime environment inference for any canister dapp frontend
• Signal the environment to the canister dashboard (which shares the same environment)
• Support development of the dashboard frontend itself
• Provide canister ID inference that works in all deployment scenarios

Default configurations:

• Development: { host: 'http://localhost:8080', identityProvider: 'http://rdmx6-jaaaa-aaaaa-aaadq-cai.localhost:8080' }
• Production: { host: 'https://icp-api.io', identityProvider: 'https://identity.internetcomputer.org' }

Example usage in vite.config.ts:

import { canisterDappEnvironmentConfig } from '@web3nl/vite-plugin-canister-dapp';

export default defineConfig({
  plugins: [
    canisterDappEnvironmentConfig({
      viteDevCanisterId: 'rrkah-fqaaa-aaaaa-aaaaq-cai', // Only needed for Vite dev server
      environment: {
        development: {
          host: 'http://localhost:4943',
          identityProvider: 'http://rdmx6-jaaaa-aaaaa-aaadq-cai.localhost:4943'
        },
        production: {
          host: 'https://icp-api.io',
          identityProvider: 'https://identity.internetcomputer.org'
        }
      }
    })
  ]
});
Copy

Frontend usage with helper functions:

import { inferEnvironment, isDevMode, inferCanisterId } from '@web3nl/vite-plugin-canister-dapp/runtime';

const config = inferEnvironment(); // Synchronous! Returns { host, identityProvider }
const canisterId = inferCanisterId(); // Synchronous! Returns Principal
console.log(isDevMode() ? 'Development' : 'Production');
Copy