Netlify Docs
Ask Netlify

Contact

Frameworks /Framework support /

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 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

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.

  1. In your terminal, run the following to create your project:

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

  2. Enter the project directory and prepare the development environment:

    cp .env.example .env

  3. Run your Hydrogen app:

    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

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

# More resources

←