Hydrogen template: Skeleton

Hydrogen is Shopify's stack for headless commerce. Hydrogen is designed to dovetail with React Router, Shopify's full stack web framework. This template contains a minimal setup of components, queries and tooling to get started with Hydrogen.

• Check out Hydrogen docs
• Get familiar with React Router

What's included

• Hydrogen 2026.1.0, powered by React Router 7 and Vite
• Shopify CLI
• Configured deployment to Netlify, with Server-Side Rendering (SSR) via Netlify Edge Functions
• ESLint
• Prettier
• GraphQL generator
• TypeScript
• Minimal setup of components and routes

Getting started

We highly recommend using this template to deploy a Hydrogen site to Netlify.

Requirements:

• Node.js version 22.0.0 or higher
• Netlify CLI (for npm run preview)

To create a new project, either click the "Deploy to Netlify" button above, or run the following command:

npm create @shopify/hydrogen@latest -- --template https://github.com/netlify/hydrogen-template

Then follow the instructions in .env and you're ready to start developing.

Local development

npm run dev

Building for production

npm run build

Preview production build locally

npm run preview

FAQ and Troubleshooting

How do I configure my Hydrogen session / storefront client / customer account client / cart handler?

See app/lib/context.ts and the Hydrogen documentation.

How do I configure a real Shopify store in local dev?

See .env and these Shopify instructions.

I get a 500 error on the /accounts pages. How do I configure real Shopify customer accounts in local dev?

See these Shopify instructions.

shopify hydrogen preview fails with Cannot find module '@shopify/mini-oxygen'

The shopify hydrogen preview command previews your site in a local simulation of the Oxygen hosting platform. It therefore isn't compatible with a site intended to be deployed to Netlify.

Instead, use the Netlify CLI (e.g. netlify serve).