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.

Tip

Environment variables will be exposed to the end user, so never place any secrets in your 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.

Tip

Note that if you change your environment variables you will need to restart your local dev server.

On this page

<% elem.innerText %>