Hydrogen is a React framework and SDK that you can use to build fast and dynamic Shopify custom storefronts.
Run this template in JavaScript on StackBlitz
Run this template in TypeScript on StackBlitz
Requirements:
- Node.js version 16.14.0 or higher
- Yarn
npm init @shopify/hydrogen@latest --template hello-world-ts
Remember to update hydrogen.config.js
with your shop's domain and Storefront API token!
yarn build
To run a local preview of your Hydrogen app in an environment similar to Oxygen, build your Hydrogen app and then run yarn preview
:
yarn build
yarn preview
Hydrogen Tailwind Shopify
Initial commit
yarn create @shopify/hydrogen
https://shopify.dev/custom-storefronts/hydrogen/getting-started/quickstart
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
https://www.youtube.com/watch?v=O3_qDL4Ls_s
src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
http://localhost:3000/graphiql
yarn dev --force