Project environment variables in build

[timkelty]

Build steps (composer, node, etc) currently do not run with the project's environment variables.

Use-cases:

• VITE_* configuration
• SENTRY_AUTH_TOKEN to send sourcemaps to Sentry on build

[jamesmacwhite]

Does this limitation mean it is currently not possible to use something like the Sentry JS SDK with environment variables

import * as Sentry from '@sentry/browser';

if (import.meta.env.PROD) {
  Sentry.init({
    dsn: import.meta.env.VITE_SENTRY_DSN,
    environment: import.meta.env.VITE_CRAFT_ENVIRONMENT
  });
}

I know Vite cannot use standard .env vars directly, but no VITE_ variables are possible, but as these would be custom variables, they aren't injected either?

Or as a workaround, are we looking at injecting these at runtime e.g. via Twig in the main core layout and accessing via something like:

In main app layout in Twig:

<script>
  window.SENTRY_CONFIG = {
    dsn: '{{ getenv("SENTRY_DSN")|e("js") }}',
    environment: '{{ getenv('CRAFT_ENVIRONMENT')|e("js") }}',
    release: '{{ getenv('GIT_SHA') }}'
  };
</script>

or

{% js at head %}
    window.SENTRY_CONFIG = {
        dsn: '{{ getenv("SENTRY_DSN")|e('js') }}',
        environment: '{{ getenv('CRAFT_ENVIRONMENT')|e('js') }}',
        release: '{{ getenv('GIT_SHA') }}'
    };
{% endjs %}

Then in main js app file:

import * as Sentry from '@sentry/browser';

if (window.SENTRY_CONFIG?.dsn) {
  Sentry.init(window.SENTRY_CONFIG);
}

The DSN is technically not a secret, but you still couldn't do sourcemaps as that needs an auth token which very much is and can't be exposed.

[timkelty]

That's right @jamesmacwhite – for sourcemaps, you'd need an auth token, which won't be included unless you hardcode it.

[jamesmacwhite]

The adding Sentry config via runtine as a window object available to the main JS entry file seems like a solid workaround for passing Sentry config via environment variables. DSN isn't a secret and you can restrict by referrer/IP what can send data at least.

But yeah exposing all custom variables defined in Craft Cloud seems like the best so in theory any can be used.