Deploy a Hydrogen storefront
You can deploy a Hydrogen storefront to most Worker and Node.js runtimes. This guide describes how to deploy a Hydrogen storefront to Oxygen and non-Oxygen hosts like Vercel, Netlify, Fly.io, and Cloudflare Workers.
Requirements
Anchor link to section titled "Requirements"You're using the most recent version of Hydrogen. The latest package release gives you the benefits of performance enhancements, new components, and other best practices.
If you're deploying to a non-Oxygen runtime, then you've retrieved a private Storefront token for server requests and stored it in a private environment variable.
You’ve created a Hydrogen storefront through the Hydrogen channel or through the CLI.
Deploy to Oxygen
Anchor link to section titled "Deploy to Oxygen"Oxygen is Shopify's deployment platform for Hydrogen storefronts. To learn how to deploy a Hydrogen storefront to Oxygen, refer to Getting started with Oxygen.
Deploy to non-Oxygen hosts using the Hydrogen Channel or CLI
Anchor link to section titled "Deploy to non-Oxygen hosts using the Hydrogen Channel or CLI"Hydrogen builds on top of Remix. This enables you to deploy to any environment that supports Remix, such as Vercel, Netlify, Fly.io, and Cloudflare Workers. The following steps are general guidelines on how to set up Hydrogen storefronts for deployment to a non-Oxygen host.
Set up environment variables in your Hydrogen project, including the private Storefront API access token. This token enables you to avoid rate limiting in production.
Choose the Remix adapter for your desired host and install it in your project using
npm
. For example:
- Uninstall
@shopify/remix-oxygen
:
Find the corresponding Remix adapter template code for the adapter that you just installed. Take note of
server.js
,remix.config.js
,app/entry.server.jsx
, and any type definitions. Then, apply these changes to your local files.Ensure that you're still passing the storefront client to the loader context in the updated
server.js
file.
Avoid rate limiting in production
Anchor link to section titled "Avoid rate limiting in production"If you're deploying to a non-Oxygen runtime, then you need to set up a private Storefront API token. This is a necessary step to avoid rate-limiting in production. Learn how to use environment-specific data in your Hydrogen project.