https://github.com/contentful/starter-hydrogen-store
Example store starter template built with Contentful and Hydrogen framework from Shopify
https://github.com/contentful/starter-hydrogen-store
Last synced: 12 months ago
JSON representation
Example store starter template built with Contentful and Hydrogen framework from Shopify
- Host: GitHub
- URL: https://github.com/contentful/starter-hydrogen-store
- Owner: contentful
- Created: 2022-06-10T11:40:08.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2024-08-01T18:09:39.000Z (almost 2 years ago)
- Last Synced: 2025-04-05T18:22:50.700Z (over 1 year ago)
- Language: JavaScript
- Size: 1.01 MB
- Stars: 16
- Watchers: 4
- Forks: 3
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# Contentful and Hydrogen Starter
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.
[Check out the docs](https://shopify.dev/custom-storefronts/hydrogen)
## What's in this template
- Styling with [Tailwind](https://tailwindcss.com/)
- End-to-end testing with [Playwright](https://playwright.dev)
- Unit testing with [Vitest](https://vitest.dev) and [Testing Library](https://testing-library.com)
- Code formatting with [Prettier](https://prettier.io)
- Javascript linting with [ESLint](https://eslint.org) and the Hydrogen [ESLint plugin](https://github.com/Shopify/hydrogen/tree/main/packages/eslint-plugin)
- Contentful
## Getting started
**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
```bash
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:
```bash
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!
---
## Previewing a production 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`:
```bash
yarn build
yarn preview
```
## Building for production
```bash
yarn build
```
## Running tests
This project contains basic end-to-end (E2E) tests in the `/tests/e2e` folder powered by [Vitest](https://vitest.dev).
You can run tests in development, and they will automatically reload when you make changes to the component you provide to `hydrogen.watchForUpdates()`:
```bash
yarn test
```
To run tests in a continuous-integration (CI) environment like GitHub Actions:
```bash
yarn test:ci
```