Starter Hydrogen Store

Overview

The Contentful and Hydrogen Starter is a template that allows users to create a Shopify custom storefront using React framework and SDK, Hydrogen, and the flexible headless CMS, Contentful. This combination enables users to build fast and dynamic Shopify custom storefronts with flexible content models and field editors for easy content management.

Features

• Styling with Tailwind: The template includes Tailwind CSS framework for easy and customizable styling.
• End-to-end testing with Playwright: Users can perform end-to-end testing of their Hydrogen app using Playwright.
• Unit testing with Vitest and Testing Library: The template includes Vitest and Testing Library for unit testing purposes.
• Code formatting with Prettier: Prettier is integrated into the template for consistent code formatting.
• Javascript linting with ESLint and Hydrogen ESLint plugin: The template includes ESLint and Hydrogen ESLint plugin for javascript linting.

Installation

To get started with the Contentful and Hydrogen Starter, the following requirements must be met:

• Node.js version 16.5.0 or higher
• Yarn package manager

Additionally, the user should have a Contentful space Id and preview access token.

1. Add the Contentful space Id and preview access token to the .env file.
2. Install the Contentful CLI and import the content from the ./contentful-export.json file.
3. In the project root folder, run the necessary commands in the terminal.
4. Update the hydrogen.config.js file with the shop’s domain and Storefront API token.

For previewing a production build, users can run a local preview of their Hydrogen app by building it and then running the command “yarn preview”.

For running tests, basic end-to-end tests are included in the template’s /tests/e2e folder. Users can run these tests in development mode and they will automatically reload when changes are made to the component provided to hydrogen.watchForUpdates(). They can also run tests in a continuous-integration environment like GitHub Actions.

Summary

The Contentful and Hydrogen Starter is a template that combines the power of Hydrogen, a React framework and SDK, with Contentful, a flexible and easy headless CMS. This template allows users to create custom Shopify storefronts with fast and dynamic functionality. It includes features such as styling with Tailwind, end-to-end testing with Playwright, unit testing with Vitest and Testing Library, code formatting with Prettier, and javascript linting with ESLint and the Hydrogen ESLint plugin. The installation process requires meeting certain requirements and configuring the necessary files. Users can also preview a production build and run tests in a development or continuous-integration environment.