/shopify-headless

Primary LanguageJavaScript

Hydrogen template: Skeleton

Hydrogen is Shopify’s stack for headless commerce. Hydrogen is designed to dovetail with Remix, Shopify’s full stack web framework. This template contains a minimal setup of components, queries and tooling to get started with Hydrogen.

Check out Hydrogen docs Get familiar with Remix

What's included

  • Remix
  • Hydrogen
  • Oxygen
  • Vite
  • Shopify CLI
  • ESLint
  • Prettier
  • GraphQL generator
  • TypeScript and JavaScript flavors
  • Minimal setup of components and routes

Getting started

Requirements:

  • Node.js version 18.0.0 or higher
npm create @shopify/hydrogen@latest

Building for production

npm run build

Local development

npm run dev

Setup for using Customer Account API (/account section)

Follow step 1 and 2 of https://shopify.dev/docs/custom-storefronts/building-with-the-customer-account-api/hydrogen#step-1-set-up-a-public-domain-for-local-development

Developing locally 💻

After you’ve cloned your project, install the dependencies and run the local development server:

npm install && npm run dev

Link your local development environment to your Shopify store to render your product inventory data:

npx shopify hydrogen link --storefront "shopify-headless"

Linking your project automatically keeps your local environment variables in sync with Oxygen, allows you to query your store data, and lets you create deployments from the command line at any time. Check the complete list of Hydrogen CLI for a complete list of features.

npx shopify hydrogen env pull
# Deploy to Oxygen
npx shopify hydrogen deploy