Getting started with Hydrogen and Oxygen

This tutorial will walk you through the process of creating a new Hydrogen storefront, linking it to your Shopify store, and then deploying it to Oxygen.

Anchor to RequirementsRequirements

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

Anchor to Step 1: (Optional) Set up the Shopify AI ToolkitStep 1: (Optional) Set up the Shopify AI Toolkit

Install the Shopify AI Toolkit to connect your AI coding assistant to Shopify's docs, APIs, and CLI. Your assistant gets the Shopify context it needs to answer questions, write code, and run commands more reliably.

Anchor to Step 2: Create a new Hydrogen storefrontStep 2: Create a new Hydrogen storefront

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:

Anchor to Step 3: Run the dev serverStep 3: Run the dev server

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:

Anchor to Step 4: Link your Hydrogen project to ShopifyStep 4: Link your Hydrogen project to Shopify

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

   9

   1

   npx shopify hydrogen link

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

   Output

   9

   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

   9

   1

   npx shopify hydrogen env pull

   Your terminal will show a diff like this:

   Output

   9

   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:

Anchor to Step 5: Deploy to OxygenStep 5: Deploy to Oxygen

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

   9

   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:

Anchor to Next stepsNext steps

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