Content Environments Implementation

This page covers how developers point a storefront at a specific content environment. For how editors create and use environments, see Content Environments.

Content Environment Variable

To make a storefront load content from a specific content environment outside of the Customizer, for example for a deployment of a specific GitHub branch, set PUBLIC_PACK_CONTENT_ENVIRONMENT to the environment's handle and pass it to createPackClient in server.ts:

const pack = createPackClient({
  // ...your other options
  contentEnvironment: env.PUBLIC_PACK_CONTENT_ENVIRONMENT,
});

• The variable is optional. If it isn't set, the storefront loads your store's primary content environment.
• In the Customizer's preview, the environment you're previewing overrides it.

The Blueprint already passes this variable to createPackClient.

Preview Provider

You can also pass the handle to PreviewProvider from @pack/react (also exported as PackProvider). This doesn't change which content loads. It labels the preview toolbar with the environment and reports the environment to the Customizer.

<PreviewProvider
  customizerMeta={customizerMeta}
  isPreviewModeEnabled={isPreviewModeEnabled}
  siteSettings={siteSettings}
  contentEnvironment={ENV.PUBLIC_PACK_CONTENT_ENVIRONMENT}
>
  <Layout>{children}</Layout>
</PreviewProvider>

In the Blueprint, ENV holds the PUBLIC_ environment variables your root loader returns.