|
| 1 | +# Runtime Configuration |
| 2 | + |
| 3 | +## Overview |
| 4 | + |
| 5 | +The `common-ui` library supports runtime configuration through a global `window.__SKUILDER_CONFIG__` object. This is necessary because library code is pre-built and cannot access build-time environment variables from consuming applications. |
| 6 | + |
| 7 | +## Configuration Priority |
| 8 | + |
| 9 | +Configuration values are resolved in this order: |
| 10 | +1. **Build-time env vars** (`import.meta.env.VITE_*`) - Only works if the consuming app's bundler processes the library code |
| 11 | +2. **Runtime config** (`window.__SKUILDER_CONFIG__`) - Always works, set by consuming app at startup |
| 12 | +3. **Fallback** - Empty string or default values |
| 13 | + |
| 14 | +## Usage in Consuming Apps |
| 15 | + |
| 16 | +Set `window.__SKUILDER_CONFIG__` **before** importing any `@vue-skuilder` packages: |
| 17 | + |
| 18 | +```typescript |
| 19 | +// In your main.ts / main.js - BEFORE imports |
| 20 | +window.__SKUILDER_CONFIG__ = { |
| 21 | + apiBase: '/express', // API base path for auth/backend calls |
| 22 | + // Add other runtime config here as needed |
| 23 | +}; |
| 24 | + |
| 25 | +// Now import vue-skuilder packages |
| 26 | +import { useAuthStore } from '@vue-skuilder/common-ui'; |
| 27 | +``` |
| 28 | + |
| 29 | +## Available Configuration |
| 30 | + |
| 31 | +### `apiBase` (string) |
| 32 | + |
| 33 | +Base path for API calls to the Express backend. |
| 34 | + |
| 35 | +- **Default**: `''` (empty string, uses relative paths) |
| 36 | +- **Example**: `'/express'` - prepends `/express` to all auth API calls |
| 37 | +- **Used by**: `authAPI.ts` service functions |
| 38 | + |
| 39 | +**Example**: |
| 40 | +```typescript |
| 41 | +window.__SKUILDER_CONFIG__ = { |
| 42 | + apiBase: '/express', |
| 43 | +}; |
| 44 | + |
| 45 | +// Results in calls like: |
| 46 | +// - /express/auth/send-verification |
| 47 | +// - /express/auth/verify |
| 48 | +// - /express/auth/status |
| 49 | +``` |
| 50 | + |
| 51 | +## Debugging |
| 52 | + |
| 53 | +All services that use runtime config will log their configuration source and resolved values: |
| 54 | + |
| 55 | +``` |
| 56 | +[authAPI] getApiBase() called |
| 57 | +[authAPI] source: window.__SKUILDER_CONFIG__.apiBase |
| 58 | +[authAPI] result: /express |
| 59 | +``` |
| 60 | + |
| 61 | +## TypeScript Support |
| 62 | + |
| 63 | +The global type declaration is included in the library: |
| 64 | + |
| 65 | +```typescript |
| 66 | +declare global { |
| 67 | + interface Window { |
| 68 | + __SKUILDER_CONFIG__?: { |
| 69 | + apiBase?: string; |
| 70 | + [key: string]: any; |
| 71 | + }; |
| 72 | + } |
| 73 | +} |
| 74 | +``` |
| 75 | + |
| 76 | +## Adding New Config Values |
| 77 | + |
| 78 | +When adding new runtime config values: |
| 79 | + |
| 80 | +1. Add the property to the `Window.__SKUILDER_CONFIG__` interface |
| 81 | +2. Document it in this file |
| 82 | +3. Add appropriate logging when the value is accessed |
| 83 | +4. Consider build-time env var as primary source, runtime config as fallback |
0 commit comments