Overview

Hydrogen is a Shopify template designed for headless commerce, specifically built to work seamlessly with Shopify’s full-stack web framework, Remix. It offers a minimal setup of components, queries, and tooling to facilitate a quick start with Hydrogen.

Features

• Remix: The template is compatible with Remix, Shopify’s full-stack web framework.
• Hydrogen: The template itself, providing a base for headless commerce implementation.
• Oxygen: A set of essential components and routes included in the template.
• Shopify CLI: A command-line interface tool for Shopify developers.
• ESLint: A popular JavaScript linter for maintaining code quality.
• Prettier: A code formatter that ensures consistency in code styling.
• GraphQL generator: A tool for generating GraphQL code based on a schema.
• TypeScript and JavaScript flavors: Hydrogen supports both TypeScript and JavaScript.

Installation

To install the Hydrogen template, follow these steps:

Requirements

• Node.js version 16.14.0 or higher

Building for production

1. Clone the Hydrogen template repository.
2. Navigate to the cloned repository’s directory using the command line.
3. Run npm install to install the required dependencies.
4. Run npm run build to build the template for production.

Local development

1. Clone the Hydrogen template repository.
2. Navigate to the cloned repository’s directory using the command line.
3. Run npm install to install the required dependencies.
4. Run npm run dev to start the local development server.

Summary

Hydrogen is a Shopify template designed for headless commerce using the Remix web framework. It provides a minimal setup of components, queries, and tooling, making it easy for developers to kickstart their Hydrogen-based projects. With support for TypeScript and JavaScript, and a range of handy tools like ESLint and GraphQL generator, Hydrogen offers a flexible and efficient environment for developing headless commerce experiences on the Shopify platform.