76 lines
2.3 KiB
Markdown
76 lines
2.3 KiB
Markdown
<p align="center">
|
|
<a href="https://hydrogen.shopify.dev">
|
|
<img src="./docs/images/HydrogenLogo.png"/>
|
|
</a>
|
|
</p>
|
|
|
|
<div align="center">
|
|
|
|
📚 [Docs](https://shopify.dev/custom-storefronts/hydrogen) | 🗣 [Discord](https://discord.gg/Hefq6w5c5d) | 💬 [Discussions](https://github.com/Shopify/hydrogen/discussions) | 📝 [Changelog](./packages/hydrogen/CHANGELOG.md)
|
|
|
|
</div>
|
|
|
|
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 ⬇️
|
|
|
|
**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.
|
|
|
|
## 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)
|