How We Built Oxygen: Hydrogen’s Counterpart for Hosting Custom Storefronts

Sneha Shah

The story of Oxygen, Hydrogen’s counterpart that makes hosting Hydrogen custom storefronts easy and seamless on Shopify.

Shopify

•

Sneha Shah

•7 min read•intermediate•

--

•View Original

CDNGrafanaGraphQLJavaScriptRailsReactVercel

Overview

The article discusses the development of Oxygen, a hosting solution for Hydrogen custom storefronts that integrates seamlessly with the Shopify ecosystem. It emphasizes the technical choices made to ensure fast performance, security, and a frictionless experience for merchants while leveraging partnerships with industry leaders.

What You'll Learn

1

How to leverage Cloudflare's worker infrastructure for fast storefront access

2

Why tight integration with Shopify enhances custom storefront hosting

3

How to utilize observability tools like Grafana for performance monitoring

Prerequisites & Requirements

Understanding of serverless architectures and JavaScript runtimes
Familiarity with GitHub and Cloudflare services(optional)

Key Questions Answered

What makes Oxygen unique compared to other hosting solutions?

Oxygen's uniqueness lies in its tight integration with Shopify, allowing for seamless hosting of Hydrogen custom storefronts without the additional costs associated with third-party hosting tools. This integration ensures a frictionless user experience for merchants.

How does Oxygen ensure fast performance for storefronts?

Oxygen guarantees fast performance by utilizing Cloudflare's global edge distribution, which allows buyer requests to be processed within milliseconds. This infrastructure choice simplifies complexity and enhances security while delivering high availability.

What observability tools are used in Oxygen?

Oxygen employs Grafana for dashboards, Cortex for metrics, Loki for logging, and Tempo for tracing. These tools help monitor performance and troubleshoot issues effectively, providing developers with critical insights into their storefronts.

What partnerships were formed during the development of Oxygen?

Shopify partnered with leaders like Cloudflare and Deno to standardize serverless runtimes, contributing to the Workers for Platforms solution and establishing the WinterCG community group for evolving JavaScript runtimes.

Technologies & Tools

Some links below are affiliate links. We may earn a commission if you make a purchase.

Backend

Cloudflare

Used for worker runtimes and edge distribution to enhance performance.

Monitoring

Grafana

Used for operational dashboards and alerting.

Monitoring

Cortex

Used for metrics collection.

Used for version control and continuous deployment.

API

Shopify Admin API

Used for integrating with Shopify's backend services.

Key Actionable Insights

1
Integrate Cloudflare's worker infrastructure to enhance storefront performance.
Using Cloudflare allows for rapid request handling and improved site speed, which is crucial for maintaining a competitive edge in e-commerce.

2
Utilize observability tools to monitor storefront performance continuously.
Implementing tools like Grafana and Cortex enables developers to gain insights into their applications, facilitating quick troubleshooting and performance optimization.

3
Leverage Shopify's integrated services for a seamless development experience.
By utilizing Shopify's APIs and identity management, developers can create a more cohesive and efficient workflow when building custom storefronts.

Common Pitfalls

1

Overcomplicating the infrastructure by building proprietary solutions.

This can lead to increased complexity and longer development times. Instead, leveraging established solutions like Cloudflare can simplify the process and speed up deployment.

Related Concepts

Serverless Architectures

Javascript Runtimes

Observability In Software Development

Continuous Deployment Practices