Hydrogen

10.27.22

There are so many ways to build an e-commerce store these days. You can of course build one from scratch. That involves building a traditional backend yourself. No matter what language and framework you use, you will be building a pretty robust API that is capable of managing inventory, orders, customers, admin functionality, payments, etc. If you are building the store for a client, the frontend will need an entire admin section where the client can run their business. The frontend can become pretty complicated also but I want to focus on the backend for now.

Since e-commerce backends can be a ton of work for a single developer or even a small team, completely custom built backends are usually not ideal. Luckily there are many options to help. It would probably be pretty ignorant to write a blog post about e-commerce and not mention WooComerce. WooCommerce is the most popular e-commerce platform on the planet. There are a lot of reasons for that too. It is free, relatively simple to use, and it leverages all of the user friendly advantages that WordPress offers… except that is also one of the biggest reasons not to use it. WooCommerce is exclusive to the WordPress ecosystem. There are of course other all in one solutions like SquareSpace and Wix but as a developer these options can be pretty limiting.

Headless e-commerce is usually a much more attractive option. As with most web development these days, decoupling the backend and frontend makes a lot of sense because it can increase performance which affects SEO and client retention as well as giving the developer complete control which means unlimited customization. There are a bunch of really cool companies providing headless e-commerce platforms too. The big players are Swell, BigCommerce, Saleor, Ordercloud, Vendure, Commerce.js, Spree, SalesForce Cloud Commerce and Shopify. That’s right, Shopify. Shopify offers API access and the ability to create apps that interact with a Shopify store allowing you to use Shopify as a headless option.

Shopify is actually the second most popular e-commerce platform on the planet after WooCommerce. This chart is as of October 2022 and tracks the top one million e-commerce sites.



Shopify has an excellent reputation and is very attractive to developers and clients. Shopify provides a fully fleshed out and powerful admin panel for managing orders, products, customers, finances, marketing tools, discount codes and shop staff. Going headless does mean that not all of Shopify’s Apps will automatically work but using Shopify leverages their security and client and customer trust.

For the frontend of headless e-commerce stores, I am usually a big fan of Next.js. I am a big Next.js fan regardless of e-commerce actually. Next.js is so powerful and versatile of a framework that it is possible to have data persist to a database through an ORM like Prisma and then have serverless API integrations for payments using Stripe or PayPal. That is pretty awesome for a frontend React framework but that of course means forgoing Shopify and becoming a totally different project.

Building a headless Shopify storefront with Next.js from scratch is also no small task. You have to take state management into consideration. You need to be pretty proficient with GraphQL because Shopify’s API is GraphQL and not REST. You will need to build out the cart and customer checkout flow. This is where Hydrogen finally enters the conversation.

Hydrogen is a React framework built by Shopify devs specifically for creating headless Shopify storefronts. Sign of the times huh? Hydrogen is borderline bleeding edge tech at less than two years old. The Shopify devs say they created Hydrogen for us, the developers. They had a goal to “provide a terrific experience for developers”. They achieved this by providing components that make it easier to connect back to Shopify’s backend.

Hydrogen is built on Vite. It would’ve been super cool if they built it on Next.js, but I have read they are working on Next.js compatible components for the future. Vite is not a framework like Next.js. Vite is a JavaScript compiler similar to Webpack (which powers Next.js) that was built by Evan You. Evan You is famously known for creating Vue.js. Vite is French for “quick” and lives up to the name. Vite is known for having Server Side Rendering plugins that can give similar advantages that Next.js provides. The Shopify devs leveraged that to make sure that Hydrogen will have SSR capabilities to provide things like SEO. Hydrogen’s data fetching utilities are actually built with React server components. Vite is also highly configurable and should feel familiar even if you have never seen a Vite project. Vite provides the familiar index.html entry point and works out of the box with JavaScript, JSX, TypeScript and PostCSS. This means you can use JavaScript/TypeScript with Tailwind CSS.

For DX experience, Hydrogen definitely has a fun vibe. The hydrogen config file essentially allows plug and play access to a Shopify backend. You provide a store domain and an API token and Hydrogen connects your app back to Shopify. That means Hydrogen provides all the complex GraphQL code for you. That’s not all they do for you out of the box. On top of tons of Shopify specific components that are useful for building the store, they also make the checkout flow super smooth. Once the customer is ready to check out, they are redirected back to Shopify with the cart items from the frontend. From there, the customer checkout process is safe, secure and out of the hands of the developer and the client.

Since Hydrogen is cutting edge technology, not everything is super smooth though. Deployment was a small hurdle to get over. Off the bat, Hydrogen is sort of built to be deployed to Oxygen. Cool name play. Oxygen is Shopify’s recommended deployment platform for Hydrogen. The only catch is that your client needs to have a Shopify Plus account for you to be able to use Oxygen. The Hydrogen docs say you can deploy on Netlify (the original Jamstack platform), Vercel, Cloudflare Workers or even run it in a Docker container. My first attempt at Hydrogen deployment was with Netlify. Even though the documentation was pretty straight forward, I had some issues with Netlify’s edge functions. Netlify says their edge functions are still in beta. Instead of fighting with Netlify’s beta edge functions, I went to Vercel with my code and successfully deployed Hydrogen.

I think Hydrogen is super cool and an awesome tool for developers who’s clients want to use Shopify for their business. I am really excited to follow the project and see how it continues to grow.