Yext allows you to define environment variables that are accessible during your build. There are two types:

1. Public Variables (variables for the browser) — Any variables prefixed with YEXT_PUBLIC_ will be made accessible to the browser, i.e. included in the JS bundle delivered to the client. These can be used in your templates and components.
2. Private Variables — Any variables not prefixed with YEXT_PUBLIC_ are treated as "private": only available during the build phase within your Node.js environment. These can be used in template transformProps functions, HTTP serverless functions, and in config.yaml.

Using Public Variables

Public environment variables are included in the JS bundle and are intended for client-side use. In the following example, a Yext Knowledge Graph API is called using an API Key stored as a public variable:

// src/utils.ts

export const fetchReviews = async (
  entityId: string
): Promise<YextResponse<Reviews>> => {
  const response = await fetch(
    `https://cdn.yextapis.com/v2/accounts/me/content/reviews?
     api_key=${YEXT_PUBLIC_YEXT_API_KEY}
     &v=20230817&id=${entityId}`
  );
  const data = await response.json();
  return data;
};

Using Private Variables

Private variables store secrets that aren't intended to be shared client-side. The following HTTP function calls a Yext Management API to update an entity:

// src/functions/http/entity/[entityId].ts

async function updateEntity(
  entityId?: string,
  entityBody?: Record<string, any>
): Promise<PagesHttpResponse> {
  const mgmtApiResp = await fetch(
    `https://api.yextapis.com/v2/accounts/me/entities/${entityId}
     ?api_key=${YEXT_API_KEY}&v=20230901`, // no PUBLIC prefix on this env var
    {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(entityBody),
    }
  );

  // handle mgmtApiResp
}

Local Development

During local development, environment variables should be declared in your .env file. The local dev toolchain will automatically pick up any variables in this file.

// .env

YEXT_PUBLIC_ENTITY_ID=test-location
YEXT_PUBLIC_SEARCH_API_KEY=foo
PRIVATE_KEY=secret

Note: If you change your environment variables, you will need to restart your local dev server.

As a best practice, we recommend not checking your .env file into source control in case secret keys are inadvertently stored there. If you deploy a site with a .env file and environment variables configured in the platform, the platform values will override the .env values.

Production

To define and use environment variables in production, you must declare them in Site Settings. You have two options:

1. Site-level — Declare site-wide environment variables in Site Settings > Environment Variables. Each variable declared here will be accessible across all branches.
2. Branch-level — Declare branch-specific environment variables in Site Settings > Branch Configuration > Branch Settings. Variables here are declared on a per-branch basis.

When updating environment variables in the platform, you must trigger a new deploy in order to see those updated values reflected in your website.

Variable Processing Order

In production, Yext respects the following order when resolving environment variables (higher takes precedence):

1. Branch-level environment variables
2. Site-level environment variables
3. .env file

Example 1

Result: VAR1=var1, VAR2=var2-branch

Example 2

Result: VAR1=var1-local, VAR2=var2-local

Example 3

Result: VAR1=var1, VAR2=var2-branch, VAR3=var3-branch, VAR4=var4-local