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

What's in this template

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

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

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!

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:

yarn build
yarn preview

Building for production

yarn build

Running tests

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():