HOWTO.md

This document contains various how-to guides.

• How To Pass Configuration as Env vars to the SPA frontend loaded in browser

How To Pass Configuration as Env vars to the SPA frontend loaded in browser.

1. create a env.ts file in the source code, sample file here
2. Update vite.config.ts and add the following, sample

      {
        name: 'build-html',
        apply: 'build',
        transformIndexHtml: (html) => {
          return {
            html,
            tags: [
              {
                tag: 'script',
                attrs: {
                  src: '/env.js',
                },
                injectTo: 'head',
              },
            ],
          }
        },
      },

3. Add similar section to Caddyfile which will return all your config data, sample

 handle /env.js {
        header {
          Content-Type text/javascript
        }
        respond `window.config={"VITE_ENV_VAR":"{$VITE_ENV_VAR}"};`
    }

4. Add the env vars to frontend deployment, sample

            - name: VITE_ENV_VAR
              value: {{ .Values.frontend.someEnvVar | quote }}

5. feed these values during helm deploy either through set string or through values file.
6. Access the env.ts file as import in other files, sample

import { env } from '@/env'
const zoomToResultsFeatureFlag =
    env.VITE_ZOOM_TO_RESULTS_CONTROL_FLAG === 'true'