Shopify Hydrogen: A React Framework for Building Custom Storefronts

Mon Jan 30 2023 - Martin Luu

Shopify Hydrogen: A React Framework for Building Custom Storefronts

In 2022, Shopify released an ecommerce stack for headless commerce called Hydrogen. Hydrogen’s innovative technology has made shopping experiences exceptionally dynamic while maintaining high performance.

This new framework has a quick-start build environment, smart caching, out-of-the-box components, and built-in cache defaults, so it’s no surprise ecommerce developers are excited about it.

In this post, we’ll go over how to build a modern ecommerce store with Shopify Hydrogen and Shopify’s Storefront API.

Why use Hydrogen

Hydrogen allows for faster, personalized online shopping experiences by integrating React Server Components, smart caching, and streaming server-side rendering - unlocking fast first-renders and progressive hydration.

When paired with the globally distributed Shopify GraphQL Storefront API and commerce components, it’s a blazingly fast framework.

Hydrogen provides better builds with hot reloading, built-in ESM, and a dev environment powered by Typescript, Vite, and TailwindCSS.

What is Shopify Oxygen?

A new platform, Oxygen, has been created to support Shopify Hydrogen. For headless projects, a third-party platform is always needed, and creating Oxygen was a necessary solution for easy integration with the Shopify Storefront API.

Moreover, thanks to significant investment, Shopify Oxygen is deployed worldwide on more than a hundred server locations. A global hosting infrastructure all over the world makes Shopify shops closer to their customers.

On top of all this, shop owners have a new checkout API, allowing them to sell thousands of products every minute in a blink of an eye.

Hydrogen quickstart

In this quickstart, you'll create a Hydrogen app locally. Hydrogen is a front-end web development framework used for building Shopify custom storefronts.

Requirements

You’ve installed the following dependencies:

  • Yarn version 1.x or npm
  • Node.js version 16.14.0 or higher

Step 1: Create a Hydrogen app

You can create a Hydrogen app locally using npm, npx, pnpm, or yarn.

  1. Navigate to the directory where you want to create your project:
cd 
  1. Run the following command:
npm init @shopify/hydrogen

or

yarn create @shopify/hydrogen

or

pnpm create @shopify/create-hydrogen

or

npx @shopify/create-hydrogen

Step 2: Choose a template

Choose a template to get started building your Hydrogen storefront:

Choose a template
> Demo Store
  Hello World

Step 3: Choose a language

Choose a language to develop your Hydrogen storefront:

? Choose a language
> JavaScript
  TypeScript

Step 4: Name your Hydrogen storefront

Enter a name for your Hydrogen storefront:

Name your new Hydrogen storefront
> hydrogen-app
  ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔

Step 5: Start the development server

  1. Navigate to your app's directory:
cd 
  1. Start the development server:
npm run dev

or

yarn dev

You can reach the development server at http://localhost:3000/.

Congrats! now you have Shopify Hydrogen Store Front