---
title: "Host Shopify Hydrogen on Edge | Self-host your storefront"
description: "Self-host your Shopify Hydrogen storefront on Edge — React-based, Remix-powered, on real VMs with a global CDN. Keep Shopify for inventory and orders, run the front-end on your own infrastructure."
url: https://edge.network/solutions/hydrogen/
---

# Host Shopify Hydrogen on Edge | Self-host your storefront

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 free](https://edge.network/account) [See the Node.js page](https://edge.network/solutions/nodejs)

# 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

<Image data={product.featuredImage} loaderUrl= "https://cdn.example.com" />

## 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

## Other stacks on Edge

[View all stacks →](https://edge.network/solutions/stacks)
[PostgreSQL Self-hosted Postgres on dedicated NVMe](https://edge.network/solutions/postgresql)[MySQL MySQL or MariaDB on real VMs](https://edge.network/solutions/mysql)[Redis In-memory cache and queue, your way](https://edge.network/solutions/redis)[MongoDB Self-hosted document store with replica sets](https://edge.network/solutions/mongodb)

## Ship Hydrogen on Edge

Start free. Move your storefront, keep your Shopify backend.

[Start free](https://edge.network/account) [Talk to an engineer](https://edge.network/contact)