Explore a Hydrogen site
Get started with a new Hydrogen site on your Netlify account or view the demo.
Hydrogen on Netlify
Hydrogen is a headless stack built by Shopify on top of Remix that enables you to build custom Shopify storefronts. With Netlify, you can deploy your storefront using Netlify Edge Functions for improved performance and faster rendering.
Netlify integration
Section titled “Netlify integration”Hydrogen apps on Netlify use Netlify Edge Functions to deploy your app to Netlify Edge, bringing serverless capabilities closer to your customers.
To successfully deploy a Hydrogen app to Netlify, you should use Netlify’s starter template. This template creates everything you need to deploy to Netlify.
Create a new Hydrogen app to deploy to Netlify
Section titled “Create a new Hydrogen app to deploy to Netlify”Using the command line, you can create a new project based on the Netlify starter template for Hydrogen.
Before you begin, make sure you have Node.js version 18.0.0 or later and Netlify CLI version 17.0.0 or later.
-
In your terminal, run the following to create your project:
Terminal window npm create @shopify/hydrogen@latest -- --template https://github.com/netlify/hydrogen-template -
Enter the project directory and prepare the development environment:
Terminal window cp .env.example .env -
Run your Hydrogen app:
Terminal window npm run dev
From here you can customize your site. Check out your project’s README for some tips or read the How to deploy a Shopify Hydrogen storefront to Netlify guide for more detailed instructions.
Edge Functions
Section titled “Edge Functions”Edge Functions connect the Netlify platform and workflow with an open runtime standard at the network edge. This enables you to build fast, personalized web experiences with an ecosystem of development tools.
To get the latest support for Edge Functions in your Hydrogen site, use the latest starter template.
You can browse a full library of reference examples for different ways to use Edge Functions. For more details, check out the Edge Functions documentation.
Limitations
Section titled “Limitations”- Currently, only Netlify Edge Functions can be used to power Hydrogen’s Server-Side Rendering (SSR). Netlify Functions are not officially supported for Hydrogen SSR.
- The Remix Classic Compiler is not officially supported. Only Remix Vite is supported. Hydrogen provides a convenient command to migrate an existing Hydrogen app to Remix Vite. For more details, check out Remix’s Vite migration guide.
More resources
Section titled “More resources”Did you find this doc useful?
Your feedback helps us improve our docs.