For Shopify Hydrogen

Hydrogen on Edge,
no Oxygen required

Self-host your Shopify storefront on a real VM with a global CDN. Keep Shopify for inventory, orders and payments — run the React front-end where you control the bill.

Start your trial See the Node.js page

# Build the Hydrogen app

$ npm run build

# Provision a VM with Node + the build

$ edge compute create \

--image ubuntu-24-04 --plan small \

--script ./bootstrap-hydrogen.sh

# Run as a systemd service

ExecStart=/usr/bin/node ./dist/server.js

Environment=PORT=3000

Environment=PUBLIC_STORE_DOMAIN=...

# Front it with the CDN

$ edge cdn create shop.example.com \

--origin https://<vm-ip>

Why merchants self-host on Edge

All the Hydrogen developer experience, none of the Oxygen lock-in.

Shopify backend, your storefront

Hydrogen is the framework, Shopify is the back office. Self-host the React storefront on Edge while orders, inventory and payments stay in Shopify.

Real VMs, real Node

Hydrogen runs on a standard Node server (or in any container). An Edge VM gives you predictable CPU and a long-running process, with no Oxygen runtime constraints.

Global CDN, zero egress

Cache the static parts of your Hydrogen build globally; SSR routes hit your origin VM. No egress fees on any of the bytes your customers download.

Image optimisation included

Use Hydrogen's `<Image />` component pointed at Edge Image Optimization for AVIF/WebP and responsive variants generated on the fly at the CDN.

Deploy from any CI

GitHub Actions, GitLab CI, plain SSH — deploy Hydrogen however you like. The Edge CLI handles VM provisioning and CDN purges.

No per-request pricing

Oxygen and the serverless edge alternatives bill per request and per CPU-millisecond. An Edge VM is one fixed monthly fee — sized to your store, not your spreadsheet.

Reference architecture

How Hydrogen maps to Edge

A small Node VM running the Hydrogen server, fronted by the Edge CDN. Shopify continues to handle inventory, orders, and payments — Edge handles your customers' eyeballs.

Compute

Runs your Hydrogen server (`node ./dist/server.js`) on a VM

Storage

Optional: cache product imagery via the CDN, or proxy from Shopify CDN

CDN

Caches static assets, page HTML and image transforms globally

Image Optimization

Powers Hydrogen's `<Image />` with AVIF/WebP at the edge

DNS

Anycast DNS for the apex storefront domain

# root.tsx — Hydrogen consuming Shopify

import { createStorefrontClient } from '@shopify/hydrogen'

const storefront = createStorefrontClient({

storeDomain: env.PUBLIC_STORE_DOMAIN,

publicStorefrontToken: env.PUBLIC_STOREFRONT_API_TOKEN,

})

# Image with Edge optimisation

Common questions

Why self-host instead of using Oxygen?

Predictable pricing (no per-request bill), no platform-specific runtime constraints, and the same VM can host other services — your blog, an admin tool, internal APIs. Trade-off is that you handle deploys yourself (or via standard CI).

How does Hydrogen connect to Shopify?

Through the Storefront API (and the Customer Account API for member features). Both are Shopify-hosted; Hydrogen just talks to them. Edge's job is hosting the React/Remix front-end that consumes those APIs.

How do I handle product image transforms?

Two options: rely on Shopify's CDN (default Hydrogen behaviour), or proxy product images through Edge Image Optimization for AVIF/WebP delivery and a single domain for all assets.

How do I deploy a Hydrogen build?

Build with `npm run build`, sync the output to your VM (or a Storage bucket if static parts only), restart the systemd service. Same workflow as our Node.js / Next.js stack pages.

By Stack