Environment Variables

2.2 Setting up and managing environment variables in Weaverse Hydrogen theme.

The Weaverse Team avatar
Written by The Weaverse Team
Updated over a week ago


Environment variables offer a mechanism to protect sensitive data, manage configurations, and streamline different environments like development, testing, and production. In Weaverse Hydrogen, you'll frequently interact with a set of predefined variables specially tailored for the framework.

Essential Environment Variables for a Hydrogen Theme

  1. SESSION_SECRET: A secret key used to sign session cookies. For more details, you can refer to the Remix documentation on using sessions.

  2. PUBLIC_STOREFRONT_API_TOKEN: The public access token for the Storefront API. This is not required if you are using the mock.shop demo setup.

  3. PUBLIC_STORE_DOMAIN: The domain of the store used to communicate with the Storefront API. By default, if you're using the demo setup, the .env file will point to mock.shop.

  4. PRIVATE_STOREFRONT_API_TOKEN (optional): The private access token for the Storefront API.

  5. PUBLIC_STOREFRONT_API_VERSION (optional): The Storefront API version. If not specified, it defaults to the version of the Storefront API used by Hydrogen.

Weaverse Specific Environment Variables

  1. WEAVERSE_PROJECT_ID: A unique ID representing your specific Weaverse project. You can find this ID inside the Weaverse Studio under the Project Settings.

  2. WEAVERSE_API_KEY: Weaverse API Key that is retrieved from your Weaverse Account setting. This is used to make sure your content is protected.

  3. WEAVERSE_HOST (optional): The host URL for Weaverse services. If not specified, the default value is https://weaverse.io.

Setting Up Environment Variables

Define these environment variables in your .env file located at the root of your theme.

Using demo setup (with mock.shop)

When having a token

๐Ÿ“Œ Note: Always avoid committing the .env file to version control. This could inadvertently expose sensitive data. Instead, use the .env.example file to display the required variables without revealing the actual values.

Obtaining the Public Storefront API Token

To get your PUBLIC_STOREFRONT_API_TOKEN to preview your real store data, please install the Headless or Hydrogen app and follow this instruction to obtain the Storefront API Token

Then you can add them to the .env file.

Using Environment Variables

Within your Weaverse Hydrogen theme, you can access environment variables via routes' loader function or Weaverse component's loader function

For instance, within a loader function:

Inside a Weaverse component's loader:


Correctly understanding and managing environment variables is crucial for both the security and functionality of your Weaverse Hydrogen theme. Always ensure that they are treated with the utmost care, keeping any sensitive data well protected.

Now let's learn about creating and managing Weaverse Component โ€“ the foundational building blocks of your theme.

Did this answer your question?