Hydrogen

references:
https://shopify.dev/docs/storefronts/headless/hydrogen/getting-started
https://mock.shop/

Shopify’s official headless framework.
(Alternatively, can add Shopify APIs to your existing tech stack.)

Process:

1. create new Hydrogen storefront
2. link to Shopify store
3. deploy it to Oxygen

• Node.js v16.20+ and npm v8.19+
• Hydrogen channel

In your terminal, create a new Hydrogen project using example data from Mock.shop:

You’ll see a confirmation message with some details about your new project:

After installation, open your new project and start the dev server:

Once the dev server is running, open http://localhost:3000 in your browser and you’ll see Mock.shop inventory:

By default, your Hydrogen project displays example products from Mock.shop. To show your own products, link your local project to Shopify, create a new storefront, and sync your environment variables.

1. Link your Hydrogen project to Shopify:

   Terminal

   Copy

   1

   npx shopify hydrogen link

   Follow the prompts to log in to your Shopify account and create a new storefront:

   Output

   1

   2

   3

   4

   5

   6

   7

   ✓ my-shopify-store

   ? Select a Hydrogen storefront to link:

   ✓ Create a new storefront

   ? New storefront name:

   > hydrogen-quickstart
2. Update your project’s environment variables:

   Terminal

   Copy

   1

   npx shopify hydrogen env pull

   Your terminal will show a diff like this:

   Output

   1

   2

   3

   4

   5

   6

   7

   – SESSION_SECRET=”foobar”

   – PUBLIC_STORE_DOMAIN=”mock.shop”

   + PUBLIC_STOREFRONT_ID=[ID]

   + PUBLIC_STOREFRONT_API_TOKEN=[TOKEN]

   + PRIVATE_STOREFRONT_API_TOKEN=[TOKEN]

   + PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID=[ID]

   + PUBLIC_CUSTOMER_ACCOUNT_API_URL=https://shopify.com/[ID]

To confirm that the link works, run npm run dev and open http://localhost:3000. You’ll now see your storefront inventory in your browser:

After your Hydrogen storefront is linked, you can deploy it to Oxygen hosting to make it publicly accessible:

1. Deploy your project to Oxygen:

   Terminal

   Copy

   1

   npx shopify hydrogen deploy
2. At the prompt to pick which environment to deploy to, select Preview.

The Hydrogen CLI builds your storefront, creates a new Oxygen deployment, and returns a preview link in your terminal. Open the preview link in your browser see deployment URL:

Congratulations! You’ve created a new Hydrogen storefront, connected it to Shopify, and made your first deployment to Oxygen.

Hydrogen and Oxygen fundamentals

Explore the key components of the Hydrogen and Oxygen stack and how they work together