Environment variables

You can store secrets in .env files in your Hydrogen project:

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.

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:

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:

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.