Hydrogen

React-based framework for building dynamic, Shopify-powered custom storefro...

Shopify/hydrogenshopify.dev/custom-storefronts/hydrogen@shopify/hydrogen

README

Hydrogen Logo

Version License Downloads


📚 Docs | 🗣 Discord | 💬 Discussions | 📝 Changelog | 😎 Awesome Hydrogen


Hydrogen is a React-based framework for building dynamic, Shopify-powered custom storefronts.

Spin up a Hydrogen app in your browser with our playground or set up your local environment with the instructions below ⬇️

Getting Started


Requirements:

- yarn or npm
- Node.js version 16.14.0 or higher

Installation:

  1. ``` sh
  2. # Using `yarn`
  3. yarn create @shopify/hydrogen

  5. # Using `npm`
  6. npm init @shopify/hydrogen

  8. # Using `npx`
  9. npx @shopify/create-hydrogen
  10. ```

Running locally:

1. Start a development server

  1. ``` sh
  2. # Using `yarn`
  3. yarn install
  4. yarn dev

  6. # Using `npm`
  7. npm i
  8. npm run dev
  9. ```

2. Visit the development environment running at http://localhost:3000.

Learn more about getting started with Hydrogen.

Contributing to Hydrogen


Read our contributing guide

Other handy links


Learn more about Hydrogen.

Awesome Hydrogen - A curated list of awesome Hydrogen things.

👷‍♀️ Add npm packages to your project:

- [@shopify/hydrogen](https://www.npmjs.com/package/@shopify/hydrogen)
- [@shopify/create-hydrogen](https://www.npmjs.com/package/@shopify/create-hydrogen)
- [@shopify/cli-hydrogen](https://www.npmjs.com/package/@shopify/cli-hydrogen)
- [eslint-plugin-hydrogen](https://www.npmjs.com/package/eslint-plugin-hydrogen)