Frontend with Vite

Frontend with Vite

If your app already uses VITE_*, keep that shape first and let CNOS generate it.

cnos build public --framework vite --profile local --to .env.local
cnos dev env --public --framework vite --profile local --to .env.local -- pnpm dev

Promote browser-safe values:

public:
  promote:
    - value.app.apiBaseUrl

Use the Vite plugin:

import { defineConfig } from 'vite';
import { createCnosVitePlugin } from '@kitsy/cnos-vite';

export default defineConfig({
  plugins: [createCnosVitePlugin()],
});

Read in client code:

import cnos from '@kitsy/cnos/browser';

console.log(cnos('public.app.apiBaseUrl'));
console.log(import.meta.env.VITE_APP_API_BASE_URL);

Cross-app browser links work the same way. Put the browser-safe origins in CNOS, promote them, and let the Vite plugin handle the embedding:

public:
  promote:
    - value.apps.main.origin
    - value.apps.cnos.origin
    - value.apps.coop.origin

apps:
  main:
    origin: https://kitsy.ai
  cnos:
    origin: https://cnos.kitsy.ai
  coop:
    origin: https://coop.kitsy.ai

Then in UI code:

import cnos from '@kitsy/cnos/browser';

const cnosOrigin = cnos('public.apps.cnos.origin');
const coopOrigin = cnos('public.apps.coop.origin');

That is the point of the integration. You promote once, keep using the same logical reads in UI code, and @kitsy/cnos-vite makes sure the values are already present in the browser bundle.

Derived public values work the same way as long as they are build-safe:

apps:
  cnos:
    origin:
      $derive: "${value.platform.protocol}://${value.apps.cnos.host}"

public:
  promote:
    - value.apps.cnos.origin

import cnos from '@kitsy/cnos/browser';

const cnosOrigin = cnos('public.apps.cnos.origin');

If a promoted derived value depends on a server-only runtime namespace such as process.* or a custom request.*, CNOS rejects the browser/public build instead of leaking an unstable value.

Migration path:

1. keep VITE_* working through generated env files
2. add createCnosVitePlugin()
3. move browser reads to @kitsy/cnos/browser
4. stop treating handwritten .env.local as the source of truth