Environment variables
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 work
Anchor link to section titled "How environment variables work"You can store secrets in .env
files in your Hydrogen project:
Files for specific environments
Anchor 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:
.env.development
- Staging environment:
.env.staging
- Production environment:
.env.production
The file that Hydrogen uses is determined by the running Vite mode. For example, if you're running a development server, then .env.development
overrides .env
.
Public variables
Anchor link to section titled "Public variables"In Hydrogen, environment variables that are prefixed with PUBLIC_
in .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 variables
Anchor 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 Oxygen.env
object:
Private variables in production
Anchor 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 cross-env
:
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.