2021-11-10 06:19:33 +01:00
< p align = "center" >
< a href = "https://hydrogen.shopify.dev" >
< img src = "./docs/images/HydrogenLogo.png" / >
< / a >
< / p >
< div align = "center" >
2021-11-04 23:04:23 +01:00
2021-11-09 02:30:00 +01:00
📚 [Docs ](https://shopify.dev/custom-storefronts/hydrogen ) | 🗣 [Discord ](https://discord.gg/Hefq6w5c5d ) | 💬 [Discussions ](https://github.com/Shopify/hydrogen/discussions ) | 📝 [Changelog ](./packages/hydrogen/CHANGELOG.md )
2021-11-04 23:04:23 +01:00
2021-11-10 06:19:33 +01:00
< / div >
2021-11-04 23:04:23 +01:00
Hydrogen is a **React-based framework** for building dynamic, **Shopify-powered** custom storefronts.
Spin up a Hydrogen app in your browser with our [playground ](https://hydrogen.new/ ) or set up your local environment with the instructions below ⬇️
2021-11-08 15:06:59 +01:00
**This is a developer preview of Hydrogen**. The documentation will be updated as Shopify [introduces new features and refines existing functionality ](https://github.com/Shopify/hydrogen/releases ). Production launches of Hydrogen custom storefronts aren't yet supported as Shopify is evolving the Hydrogen framework.
2021-11-04 23:04:23 +01:00
## Getting Started
**Requirements:**
- `yarn` or `npm`
- Node.js version 14.0 or higher
**Installation:**
```bash
# Using `yarn`
yarn create hydrogen-app
# Using `npm`
npm init hydrogen-app@latest
# Using `npx`
npx create-hydrogen-app
```
**Running locally:**
1. Start a development server
```bash
# Using `yarn`
yarn install
yarn dev
# Using `npm`
npm i --legacy-peer-deps
npm run dev
```
2. Visit the development environment running at http://localhost:3000.
Learn more about [getting started with Hydrogen ](https://shopify.dev/custom-storefronts/hydrogen/getting-started ).
## Contributing to Hydrogen
[Read our contributing guide ](./docs/contributing.md )
## Other handy links
🎁 Give us the gift of [feedback ](https://www.surveymonkey.com/r/HydrogenFeedback ).
📍 Check out [Hydrogen examples on Github ](https://github.com/Shopify/hydrogen-examples ).
🤩 [Learn more about Hydrogen ](https://shopify.dev/hydrogen ).
👷♀️ Add `npm` packages to your project:
- [`@shopify/hydrogen` ](https://www.npmjs.com/package/@shopify/hydrogen )
- [`@shopify/hydrogen-cli` ](https://www.npmjs.com/package/@shopify/hydrogen-cli )
- [`@shopify/hydrogen-plugin-sanity` ](https://www.npmjs.com/package/@shopify/hydrogen-plugin-sanity )
- [`create-hydrogen-app` ](https://www.npmjs.com/package/create-hydrogen-app )
- [`eslint-plugin-hydrogen` ](https://www.npmjs.com/package/eslint-plugin-hydrogen )