What is Hydrogen? Shopify's React Based Framework for Headless Commerce

Overview

E-commerce is growing. Whether you or a friend has a bricks and mortars store and wants to expand his/her business online or have some product that you/ your friend would like to sell over the internet, everyone conducting business will eventually need an e-commerce website. There are many options for users to choose from, ranging from site builders such as SquareSpace and Shopify, to leveraging existing CMS (content management systems) such as WordPress/WooCommerce. All of those options are valid for both developers and users. However, Shopify seems to want to cement their name in this "e-commerce battle" by offering developers many tools for delivering a great online shopping experience by introducing their open-source framework, Hydrogen. 

In this article, we'll explore Shopify's headless, React-based e-commerce framework, Hydrogen. We'll go over what makes Hydrogen unique, how to customize it for both developers and end user needs, and why you should consider it for your e-commerce project. 

1. Quick Look at Shopify

One of the leaders, if not, the leader of e-commerce, Shopify is a e-commerce company based in Canada. Today, entrepreneurs can start their online store and conduct business. Shopify is a great platform for entrepreneurs as they can help scale your business as it grows. You can grow and use Shopify's point of sale hardware to set products in person, as well as leverage their marketing tools to market your business.

Shopify has plenty of tools catered to developers so they can create curated commerce solutions for businesses. Similar to other big tech companies such as Facebook/Meta, Shopify is creating open source frameworks and tech to help developers create more curated, hassle-free commerce experiences.

2. Intro to Hydrogen

Announced in 2021, Hydrogen is Shopify's React-based headless commerce framework that helps developers streamline the full commerce experience with a custom storefront. Hydrogen leverages all of Shopify's resources such as their storefront as a backend and their extensive GraphQL API. 

Hydrogen comes bootstrapped with server-side rendering, SEO tools, and TailwindsCSS support. Server-side rendering allows for better build times and when used in conjunction with React server components, can allow for SEO tags to be generated dynamically within the framework. SEO tools using the GraphQL API is extremely useful as it leaves another important aspect of development already complete and leaves little to worry for developers. Lastly, Hydrogen supports TailwindsCSS out of box but since Hydrogen is a React-based framework, developers can use any CSS library such as Bootstrap or ChakraUI.

Lets get started with some code! We can start with a fully built, ready to go demo store that Shopify has provided. In your terminal/CMD, type the following:

$ npx @shopify/create-hydrogen --template demo-store-js

Once you install the package, take a look at the project's file structure:

└── src
    ├── assets
    │   ├── favicon.svg   // Hydrogen favicon
    ├── components // Objects that contain business logic for commerce concepts
    │   └── account // Components that render account information
    |   │   └── AccountActivateForm.client.tsx
    |   │   └── AccountAddressBook.client.tsx
    |   │   └── AccountAddressEdit.client.tsx
    |   │   └── ...
    │   └── cards // Components that render card elements
    |   │   └── ArticleCard.tsx
    |   │   └── CollectionCard.server.tsx
    |   │   └── OrderCard.client.tsx
    |   │   └── ...
    │   └── cart // Components that render cart elements
    |   │   └── CartDetails.client.tsx
    |   │   └── CartEmpty.client.tsx
    |   │   └── CartLineItem.client.tsx
    |   │   └── ...
    │   └── elements // Components that provide small chunks of reusable content
    |   │   └── Button.tsx
    |   │   └── Grid.tsx
    |   │   └── Heading.tsx
    |   │   └── ...
    │   └── global // Components that render global elements on a page
    |   │   └── CartDrawer.client.tsx
    |   │   └── Drawer.client.tsx
    |   │   └── Footer.client.tsx
    |   │   └── ...
    │   └── product // Components that render product information
    |   │   └── ProductDetail.client.tsx
    |   │   └── ProductForm.client.tsx
    |   │   └── ProductGallery.client.tsx
    |   │   └── ...
    │   └── search // Components that provide search functionality
    |   │   └── NoResultRecommendations.server.tsx
    |   │   └── SearchPage.server.tsx
    |   │   └── ...
    │   └── sections // Components that provide specific pieces of content on a page
    |   │   └── FeaturedCollections.tsx
    |   │   └── Hero.tsx
    |   │   └── ProductSwimlane.server.tsx
    |   │   └── ...
    │   └── CountrySelector.client.tsx // A client component that selects the appropriate country to display for products on a website
    │   └── CustomFont.client.tsx // Custom fonts for your Hydrogen storefront
    │   └── DefaultSeo.server.tsx // A server component that fetches the shop ID, name, and description, and sets default values and templates for every page on a website
    │   └── HeaderFallback.tsx // A fallback for the Header component
    │   └── index.server.ts
    │   └── index.ts
    ├── lib // Libraries and utilities
    |   │   └── const.ts
    |   │   └── fragments.ts
    |   │   └── index.ts
    |   │   └── ...
    ├── routes // Navigational areas within the Demo Store
    |   │   └── account
    |   │   └── api
    |   │   └── collections
    |   │   └── ...
    ├── styles // Styling in the Demo Store
    |   │   └── index.css
    |   │   └── custom-font.css
    ├── App.server.tsx // Your app's top-level React component

import {defineConfig, CookieSessionStorage} from '@shopify/hydrogen/config';

export default defineConfig({
  shopify: {
    defaultCountryCode: 'US',
    defaultLanguageCode: 'EN',
    storeDomain: 'hydrogen-preview.myshopify.com',
    storefrontToken: '3b580e70970c4528da70c98e097c2fa0',
    storefrontApiVersion: '2022-07',
  },
  session: CookieSessionStorage('__session', {
    path: '/',
    httpOnly: true,
    secure: import.meta.env.PROD,
    sameSite: 'Strict',
    maxAge: 60 * 60 * 24 * 30,
  }),
});

3. Why use React?

React is great library for Shopify to build upon. React is open source, has a large community, and is backed by one of largest tech companies (Facebook/Meta). The best frameworks allow developers to plugin and take out different tools as need be while providing many of the base components to quickly get a store launched. Since Hydrogen is designed to be headless (independent from backend), React is nearly perfect as the library has matured to the point where there are plenty of third-party packages and tools in the form of components that can help create a great, custom online storefront.

4. Oxygen and Deployment

Oxygen is Shopify's deployment platform, designed to host Hydrogen storefronts for testing and production. Oxygen is included in Shopify plans but is currently (at the time of this writing) only available with the Shopify Plus Plan. In August 2022, Shopify stated they plan on expanding Oxygen to other Shopify plans soon.

Another great feature of Hydrogen is that it is a React-based framework (yes, seriously), so we can deploy Hydrogen just like any other React project. Whether that'll be with Docker, Heroku, DigitalOcean, etc. The choice is yours!

5. Documentation

Documentation, for any framework is critical for a developer's and framework's success. As expected with a large company such as Shopify, Hydrogen is well documented. Take a look for your: Hydrogen Docs. As this framework is young, documentation is being updated very often and it is very likely that the framework may go through many breaking changes in the short term.

Hydrogen will definitely get you started when developing an e-commerce store. Its becoming my preferred framework for building custom e-commerce websites for friends and clients. Take a look at the Hydrogen demo store right here in the browser below. Tinker around with the storefront and let us know what you think.