Oxygen architecture
Oxygen bundles together third-party services such as Cloudflare with first-party services such as the Shopify content delivery network to provide hosting for Hydrogen storefronts. Oxygen provides fast and globally-available storefronts that securely integrate with the Shopify ecosystem while eliminating additional costs of setting up third-party hosting tools.
In this guide, you'll learn how Oxygen is built to deploy Hydrogen storefronts at the edge for visitors all over the world.
Integrations
Anchor link to section titled "Integrations"The following diagram shows how Oxygen integrates with first-party and third-party services to deploy a Hydrogen storefront to users:
You can use GitHub to host and collaborate on your Hydrogen storefront code. GitHub provides tools to track the history of changes, recover earlier versions of the storefront, and manage your code in a central repository.
The Shopify GitHub integration for Oxygen enables you to connect a Git repository to the Hydrogen channel within the Shopify admin.
Hydrogen channel
Anchor link to section titled "Hydrogen channel"The Hydrogen channel is a Shopify app that connects Hydrogen, Oxygen, and the Shopify admin.
When you connect a Git repository that contains Hydrogen storefront code through the Hydrogen channel, the Hydrogen channel creates a pull request (PR) that enables a continuous deployment (CI/CD) pipeline to quickly either push changes to production or enable you to preview changes for any commit to a branch in the connected Git repository.
After merging the PR, Oxygen inserts a GitHub Actions workflow that runs on every commit. The workflow takes the following actions:
- Installs Node.js
- Installs any dependencies
- Creates a production build
- Pushes assets to Oxygen's servers with the oxygenctl-action GitHub action
- Creates a GitHub deployment with the github-deployment-action GitHub action
Deployment management
Anchor link to section titled "Deployment management"You can manage your connected Hydrogen storefronts and deployments within the Hydrogen channel.
Observability services
Anchor link to section titled "Observability services"Runtime logs about how custom storefronts are performing are surfaced through the observability dashboard within the Hydrogen channel for troubleshooting and performance trend monitoring.
Oxygen uses Cloudflare's worker infrastructure to provide worker runtimes and edge distribution, ensuring that buyers can access storefronts within milliseconds.
Content Delivery Network
Anchor link to section titled "Content Delivery Network"Oxygen uses Shopify's content delivery network to compress, convert, and serve your storefront's assets in an optimized way.
By default, when a Hydrogen storefront is built and deployed, any new assets are automatically deployed to Shopify's content delivery network, and any application references are converted to use the cdn.shopify.com domain.
Oxygen also attempts to serve assets on your storefront's domain for requests to paths like /.well-known/ and other files that need to be served from the same domain. If a request for an asset on the storefront domain can't be served, then Oxygen falls back to serving that storefront request from the Hydrogen app.