As it has been said, Hydrogen is a React-based framework for building custom storefronts on Shopify that gives you everything you need to start fast, build fast, and deliver the best-personalized shopping experiences.
It will be announced on December 2, 2021, at the Shopify Partner Town Hall—Hydrogen Takeover.
At this moment Hydrogen is accessible from developer preview. Production launches of Hydrogen custom storefronts aren’t supported yet. But it can not restrict me from checking it as it is, before the official launch in a few days.
What’s on the board
It is a React-based library, which is rendered with Vite. As Shopify says, the SSR and hydration middleware is similar to existing Vite SSR implementations.
Shopify has added the classic React Router for routing support and the Tailwind CSS for rapid styling.
package.json scripts
You can see that there is a Cypress e2e testing framework, ESLint, Stylelint, Husky pre-commit hooks.
Shopify created a lot of React custom hooks, components, with a tight usage of GraphQL, which makes the overall ecosystem effective, flexible, and modern in terms of the front-end stack that we have today.
Supply hydrogen theme
If you want to check the full experience of Hydrogen, you can go to https://shopify.supply/, and the code of this theme is here: https://github.com/Shopify/hydrogen-examples.
For me, it looks awesome, the speed and easiness of UI interactions show Hydrogen as super-effective technology to use in eCommerce.
Getting started
You need to have installed yarn or npm, Node v14.0+, and the existing dev store in the Shopify Partners.
Create Hydrogen project by:
yarn create hydrogen-app
You need to update ./shopify.config.js with the real store data such as store domain and storefront access token. The last one you can get after creating a private app in your dev store, as usual.
export default {
locale: 'en-us',
storeDomain: 'your-store.myshopify.com',
storefrontToken: 'token value',
graphqlApiVersion: 'unstable',
};Install dependencies:
yarn install
Start dev server:
yarn dev
Check your local env on localhost:3000.
Let’s populate the store with products via Shopify CLI commands:
shopify login --store your-store.myshopify.com shopify populate products --count 20
Don’t forget to add your Shopify Partners email as the staff account in your dev store to be able to log in to it via Shopify CLI.
Here we have the local Hydrogen store:
Data fetching
All data fetching happens on the server and is never exposed to the client, unless you explicitly fetch data in a client component.
As I’ve mentioned above, Hydrogen uses GraphQL and custom Reacth hooks: useShopQuery and useQuery.
useShopQuery is designed for server components to get data from Storefront API only.
By going to http://localhost:3000/graphiql you will get the GraphiQL interface which is connected to your dev store.
Deployment
It is possible to deploy the project via any Node and Worker runtimes, and the Oxygen is Shopify’s recommended deployment platform (Oxygen is co-located with your shop’s data in Shopify’s data centers around the world), as says the doc: https://shopify.dev/custom-storefronts/hydrogen/deployment, but:
Shopify is currently working on Oxygen, but it’s not available yet.
You can use any Docker-based services as well, such as Heroku, etc. You can get example config files from the doc above.
Component types
There are 2 types of components: server and client components. They all are made on React.
React Server Components are rendered in the server-side to improve the performance of React apps by decreasing bundle size and performing queries on the server.
Components with names .client.jsx are rendered on the client, and .server.jsx are rendered on Node server. If component has no .client.jsx or .server.jsx name, it will be rendered on both sides.
Overall impression
It is an astonishing direction of Shopify platform evolution. It is not a simple template language like Liquid. Hydrogen requires good knowledge of React ecosystem, such as memoization, custom hooks, HOCs, SSR, and much more.
