Host Hydrogen yourself, leave checkout to Shopify

Deploy

Hydrogen on a VM with the Node adapter

Build with the Node adapter, copy the output to a VM, and put the CDN in front. The storefront code doesn't change.

~/acme-hydrogen

$ edge compute create --name storefront \

--size s-2vcpu-4gb --image ubuntu-24 \

--region london --script nodejs

✓ vm-1d5e88 running at 64.34.86.44

$ pm2 start server.mjs --name hydrogen

✓ Storefront API → acme.myshopify.com

$ edge cdn domains add cdn-a1b2c3 \

--domain shop.acme.com \

--origin https://64.34.86.44

✓ Live at https://shop.acme.com

Static cache hit97%

shop.acme.comLive

RuntimeHydrogen on Node 22

CheckoutShopify-hosted

1. 01

   Set the Storefront API credentials

   Create the tokens in the Hydrogen or Headless channel in Shopify admin. On Node, pass Hydrogen's InMemoryCache to createStorefrontClient for sub-request caching.

   .envCopy

   PUBLIC_STORE_DOMAIN=acme.myshopify.com
   PUBLIC_STOREFRONT_API_TOKEN=<public-token>
   PRIVATE_STOREFRONT_API_TOKEN=<private-token>
   SESSION_SECRET=<random-string>

2. 02

   Build and start on a VM

   The nodejs library script installs Node 22, PM2 and an Nginx reverse proxy on first boot.

   shellCopy

   $ npm run build
   $ edge compute create --name storefront --size s-2vcpu-4gb \
       --image ubuntu-24 --region london --script nodejs
   
   $ rsync -a dist server.mjs package*.json .env root@<vm-ip>:/srv/shop/
   $ ssh root@<vm-ip> "cd /srv/shop && npm ci --omit=dev \
       && pm2 start server.mjs --name hydrogen"

3. 03

   Serve product images from your domain

   Keep the <Image> component. A custom loader rewrites Shopify image URLs to your CDN domain and asks for the size it needs.

   app/lib/edge-loader.tsCopy

   type LoaderArgs = { src?: string; width?: number }
   
   export function edgeLoader({ src, width }: LoaderArgs) {
     const { pathname } = new URL(src!)
     return `https://img.acme.com${pathname}?width=${width}&format=auto`
   }
   
   // <Image data={product.featuredImage} loader={edgeLoader} />

4. 04

   Put the CDN in front

   One deployment, two domains: the storefront from your VM and product images proxied from Shopify's CDN.

   shellCopy

   $ edge cdn create --name acme-hydrogen
   $ edge cdn domains add cdn-a1b2c3 --domain shop.acme.com \
       --origin https://<vm-ip>
   $ edge cdn domains add cdn-a1b2c3 --domain img.acme.com \
       --origin https://cdn.shopify.com --jit-image

Prefer to hand it off? Give the job to your AI agent or have our engineers do it.