Introduction
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
SESSION_SECRET: A secret key used to sign session cookies. For more details, you can refer to the Remix documentation on using sessions.PUBLIC_STOREFRONT_API_TOKEN: The public access token for the Storefront API. This is not required if you are using themock.shopdemo setup.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.envfile will point tomock.shop.PRIVATE_STOREFRONT_API_TOKEN(optional): The private access token for the Storefront API.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
WEAVERSE_PROJECT_ID: A unique ID representing your specific Weaverse project. You can find this ID inside the Weaverse Studio under the Project Settings.WEAVERSE_API_KEY: Weaverse API Key that is retrieved from your Weaverse Account setting. This is used to make sure your content is protected.WEAVERSE_HOST(optional): The host URL for Weaverse services. If not specified, the default value ishttps://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:
Conclusion
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.