Hosting for Custom Storefronts (Oxygen)

6/10/2026

This post details the architecture and evolution of Quick, an internal hosting platform. It describes the initial architecture using Google Cloud Storage, NGINX, and gcsfuse for serving static assets, with Identity-Aware Proxy (IAP) for authentication. It then details the addition of backend services via APIs, including a CloudSQL database, AI proxy, file uploads, BigQuery integration, WebSockets, and an Identity API. The post also discusses the platform's philosophy of simplicity, its adoption driven by AI-generated websites, and its emergent ecosystem. Maintenance aspects like rate limiting and migration from Node.js to Go are also covered.

10/31/2022

This post announces the acquisition of the Remix team and their integration into Shopify. It highlights Remix's focus on performance, resilience, and progressive enhancement, and its edge-first architecture. Shopify intends to use Remix within Hydrogen and other projects to improve developer experience and storefront performance. The post also emphasizes Shopify's commitment to supporting the open-source Remix community.

8/23/2022

This post introduces Oxygen, a new hosting platform for Hydrogen custom storefronts. It details the technical choices made, including leveraging Cloudflare Workers for edge distribution and runtime, GitHub Actions for CI/CD, and integrating with Shopify's existing services (CDN, Admin API, IAM). It also describes the architecture involving Gateway Workers and Storefront Workers, the use of Cloudflare's Dynamic Dispatch API, and the development of a separate observability stack (Grafana, Cortex, Loki, Tempo) for custom storefronts. The post highlights contributions to the WinterCG community group and the partnership with Cloudflare.

6/22/2022

This post details the foundational development of Hydrogen, a React framework for building custom storefronts on Shopify. It covers the iterative process of building the framework, including component design, data fetching strategies (component-level fetching with preloading caches), and the challenges with GraphQL fragments. A significant technical bet discussed is the early adoption and integration of React Server Components (RSC) to enable modularity and efficient server-side rendering. The post also touches on the benefits of building in public and external contributions.

3/31/2022

This post details the integration of Vite as the bundler and development server for Hydrogen. It explains the benefits of Vite over traditional bundlers like Webpack, focusing on its speed, ease of use, plugin system, and support for native ES Modules and Hot Module Replacement (HMR). It also highlights Vite's capabilities for Server-Side Rendering (SSR) and its compatibility with React Server Components (RSC), which are crucial for Hydrogen's functionality. The post outlines how Hydrogen leverages Vite by using specific plugins like `hydrogen-config`, `react-server-dom-vite`, and `hydrogen-middleware` to achieve its performance and developer experience goals.

2/11/2022

This post details the integration of Tailwind CSS with Shopify's Hydrogen framework. It explains how Tailwind is the default option in the Hydrogen starter template and discusses the benefits of using utility classes for componentization, responsiveness, and composability. It also touches upon the learning curve of Tailwind, the importance of its documentation and VSCode extension, and how its constraints enforce consistency. The post highlights how Tailwind's composability facilitates code reuse and collaboration within teams.

2/4/2022

This post introduces best practices for using React Server Components (RSC) within the Hydrogen framework. It advocates for starting with shared components, then pivoting to client components only when necessary for interactivity (useState, useEffect, browser APIs, unsupported libraries), and to server components for server-side logic, secrets, filesystem/database access, and API data fetching. It provides detailed examples of refactoring a newsletter signup and product FAQ component to adhere to these principles, demonstrating the extraction of client-specific logic into separate `.client.jsx` files and renaming shared components to `.server.jsx` when appropriate.

2/2/2022

This post details how to rapidly build a product page using Hydrogen, a React-based framework for custom storefronts. It covers setting up Tailwind CSS, creating dynamic routes with file-based routing, fetching data using the `useShopQuery` hook and the Storefront API, managing state with `ProductOptionsProvider` and `useProductOptions` hook, and integrating a `BuyNowButton`. It also demonstrates the use of the `MediaFile` component for a media gallery.

11/8/2021

This post details the building blocks of high-performance Hydrogen-powered storefronts, focusing on how Hydrogen and Oxygen enable fast, dynamic, and personalized e-commerce experiences. It elaborates on key architectural components: streaming server-side rendering with React Suspense for fast TTFB and progressive hydration, React Server Components for separating server and client logic and reducing bundle sizes, and efficient data fetching with built-in caching primitives and flexible page/subrequest cache policies. It also discusses combining dynamic rendering with edge serving for static content and the strategic decision-making involved in choosing between SSR, client-side fetching, and edge delivery.

7/13/2020

This post details the development of Size.link, a web-based AR tool for visualizing product dimensions. It describes the technical challenges of implementing AR on the web across iOS and Android, the differences between AR Quick Look and Scene Viewer, and the intricacies of 3D file formats like glTF and USDZ. The core technical contribution lies in the innovative approach of directly manipulating the binary data of USDZ files to dynamically adjust scale and vertex positions, bypassing the need for heavy conversion tools and enabling fast, on-the-fly AR model generation. This approach was crucial for achieving a seamless user experience without requiring a dedicated mobile application.