Hydrogen is a React framework and SDK that you can use to build fast and dynamic Shopify custom storefronts.
Run this template on StackBlitz
- Styling with Tailwind
- End-to-end testing with Playwright
- Unit testing with Vitest and Testing Library
- Code formatting with Prettier
- Javascript linting with ESLint and the Hydrogen ESLint plugin
Requirements:
- Node.js version 16.5.0 or higher
- Yarn
yarn
yarn dev
Remember to update hydrogen.config.js
with your shop's domain and Storefront API token!
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
yarn build
This project contains basic end-to-end (E2E) tests in the /tests/e2e
folder powered by Vitest.
You can run tests in development, and they will automatically reload when you make changes to the component you provide to hydrogen.watchForUpdates()
:
yarn test
To run tests in a continuous-integration (CI) environment like GitHub Actions:
yarn test:ci
"build": "shopify hydrogen build",
"engines": {
"node": "16.14"
},
"build": "npm run build:client && npm run build:ssr", "build:client": "vite build --outDir dist/client --manifest", "build:ssr": "cross-env WORKER=true vite build --ssr @netlify/hydrogen-platform/handler",
import { fileURLToPath } from 'url';
const __filename = fileURLToPath(import.meta.url); const __dirname = path.dirname(__filename);
app.use((req, res) => {
res.send(<h1 styles={text-align: 'center'}>LOOKCOOL APP</h1>
);
})