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.
I. 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.
II. 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.
III. 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.
- Navigate to the directory where you want to create your project:
cd
2.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
- Navigate to your app's directory:
cd
2.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