Starter template to create a Shopify custom storefront with Contentful and Hydrogen
Hydrogen is a React framework and SDK that you can use to build fast and dynamic Shopify custom storefronts.
Contentful is the most flexible and easy headless CMS that can power up your customer shopping experience with flexible content models, and field editors for authors to collaborate and manage content.
- 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
- Contentful
Requirements:
Add your Contentful space Id and preview access token to .env
CONTENTFUL_SPACE_ID=YOUR_SPACE_ID
CONTENTFUL_ACCESS_TOKEN=YOUR_PREVIEW_ACCESS_TOKEN
- Node.js version 16.5.0 or higher
- Yarn
yarn
yarn dev
Optionally you can pre-fill your Contentful empty space with Content:
Install contentful cli and import ./contentful-export.json
content.
In the project root folder run the following in your terminal:
npm i -g contentful-cli
# Then
contentful space import --space-id YOUR_SPACE_ID --content-file ./contentful-export.json
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