Frontend Environment Variables

RoundTripWeb uses Vite environment variables that are baked into the build at compile time — they are not runtime variables. This has important implications for how they are managed and updated.

Source of Truth — ADO Pipeline Variables

danger

Critical The ADO pipeline variables are the only source of truth for production and dev builds. The following are all ignored during CI builds:

Local .env.production file
Cloudflare Pages dashboard environment variables
Any other .env.* file on the agent machine

If you update a Vite env var anywhere other than the ADO pipeline variables, it will have no effect on the deployed build.

The build step in azure-pipelines.yml explicitly passes ADO variables into the Vite build:

- script: npm run build
  displayName: 'Build'
  env:
    VITE_API_BASE_URL: $(VITE_API_BASE_URL)
    VITE_ENTRA_CLIENT_ID: $(VITE_ENTRA_CLIENT_ID)
    VITE_ENTRA_AUTHORITY: $(VITE_ENTRA_AUTHORITY)
    VITE_ENTRA_KNOWN_AUTHORITY: $(VITE_ENTRA_KNOWN_AUTHORITY)
    VITE_ENTRA_REDIRECT_URI: $(VITE_ENTRA_REDIRECT_URI)
    VITE_ENTRA_SCOPE: $(VITE_ENTRA_SCOPE)
    VITE_VAPID_PUBLIC_KEY: $(VITE_VAPID_PUBLIC_KEY)

These override everything else. This is the only place that matters for deployed builds.

Where Each Variable Lives

Variable	Where to Update	Notes
`VITE_API_BASE_URL`	ADO pipeline variables	API base URL
`VITE_ENTRA_CLIENT_ID`	ADO pipeline variables	Entra Web Client app registration ID
`VITE_ENTRA_AUTHORITY`	ADO pipeline variables	Entra CIAM authority URL
`VITE_ENTRA_KNOWN_AUTHORITY`	ADO pipeline variables	Entra known authority hostname
`VITE_ENTRA_REDIRECT_URI`	ADO pipeline variables	Critical — must match Entra app registration
`VITE_ENTRA_SCOPE`	ADO pipeline variables	API scope for token requests
`VITE_VAPID_PUBLIC_KEY`	ADO pipeline variables	Web Push VAPID public key

Production vs Dev Pipeline Variables

Both the production and dev pipelines have their own set of pipeline variables. They must be kept in sync when adding new variables.

Pipeline	File	Variables location
Production	`azure-pipelines.yml`	ADO → RoundTripWeb pipeline → Variables
Development	`azure-pipelines-dev.yml`	ADO → RoundTripWeb Dev pipeline → Variables

Local Development

For local development, create a .env.local file (gitignored) with your local values. This file IS used by npm run dev since the pipeline env: block doesn't apply locally.

.env.production is also gitignored and used by npm run build locally — but not by the CI pipeline since the ADO env: block overrides it.

How to Update a Variable

Go to ADO → RoundTripWeb pipeline → Edit → Variables
Find the variable and update the value
Re-run the pipeline — a fresh build will bake in the new value
Verify in Cloudflare Pages → roundtrip project → latest deployment → Environment variables that the new value appears

:::warning Re-run Required Updating the ADO pipeline variable alone is not enough — you must trigger a new pipeline run for the change to take effect. The previous build artifact still has the old value baked in. :::

Cloudflare Pages Dashboard Variables

The Cloudflare Pages dashboard also has environment variable settings but these are not used because our builds come from ADO via Wrangler deploy, not from Cloudflare's own build system. The Cloudflare dashboard variables are effectively decorative in our setup — they show what was used in the last build but updating them there has no effect.

This is a known source of confusion — the Cloudflare dashboard shows the correct values but updating them there does nothing. Always update ADO pipeline variables.

Source of Truth — ADO Pipeline Variables​

Where Each Variable Lives​

Production vs Dev Pipeline Variables​

Local Development​

How to Update a Variable​

Cloudflare Pages Dashboard Variables​