Environment Variables| Hitchhikers Platform
Yext allows you to define environment variables that are accessible during your build. To declare a variable for a deployed site navigate to Site Settings > Branch Configuration > Branch Settings > Add a Branch Variable.
In order for the Yext build system to correctly identity environment variables, they all must be prefixed with YEXT_PUBLIC.
YEXT_PUBLIC environment variables.
In your code, you can access environment variables anywhere in your templates via import.meta.env.[name] The import object is automatically injected, so you are not required to explicitly import this object. See the example below.
export const transformProps: TransformProps<ExternalImageData> = async (data) => {
// Here is a properly named environment variable
const url = import.meta.env.YEXT_PUBLIC_EXTERNAL_IMAGE_API_BASE_URL + "/2";
const externalImage = (await fetch(url).then((res: any) =>
res.json()
)) as ExternalImage;
return { ...data, externalImage };
}Local Dev
For local development, you can place environment variables into a .env file. The local dev toolchain will automatically grab any variables in this file and use them in the local serving flow.
Remember to use the same naming convention by prefixing with YEXT_PUBLIC.
Pages uses Vite’s built-in handling of environment variables, so various .env files can be configured, such as .env.local or .env.production. See here for more details from Vite.