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
Hydrogen apps on Netlify use Netlify Edge Functions to deploy your app to Netlify Edge, bringing serverless capabilities closer to your site visitors.
To successfully deploy a Hydrogen app to Netlify, you can use Netlify’s starter template. This template creates everything you need to deploy to Netlify.
# 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:
npx create-remix@latest --template netlify/hydrogen-template
- To run your Hydrogen app:
npm run dev
From here you can customize your site.
# 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.
# More resources
Did you find this doc useful?
Your feedback helps us improve our docs.