Environment variables, also known as secrets, allow you to load different values in your app depending on the running environment. This guide describes how to store environment variables in your Hydrogen project.
How environment variables workAnchor link to section titled "How environment variables work"
You can store secrets in
.env files in your Hydrogen project:
Files for specific environmentsAnchor link to section titled "Files for specific environments"
Hydrogen supports files for specific environments. For example, you might have the following files that map to different environments:
- Development environment:
- Staging environment:
- Production environment:
The file that Hydrogen uses is determined by the running Vite mode. For example, if you're running a development server, then
Public variablesAnchor link to section titled "Public variables"
In Hydrogen, environment variables that are prefixed with
.env files are treated as public and are available in the browser. These variables can be accessed using Vite's
import.meta.env object in any component:
Private variablesAnchor link to section titled "Private variables"
In Hydrogen, any variable from
.env files that isn't prefixed with
PUBLIC_ is treated as a server runtime variable in non-production environments. These variables aren't exposed to the browser and can only be accessed from server components using the global
Private variables in productionAnchor link to section titled "Private variables in production"
In production, none of the
.env files are used to load runtime variables by default. Instead, the variables that load are based on the hosting runtime that you're using.
For example, if you're deploying to a Node.js server, then you can pass variables to the Node.js process using
If you're using
@shopify/hydrogen/platforms/* as the server build entry point, then the global
Oxygen object is populated automatically. However, if you're using a custom entry point, then you must create this object manually.
The following example shows how to manually create the global
Oxygen object in a custom Node.js server entry file:
- Learn how to deploy your Hydrogen storefront to Oxygen and other runtimes.