Skip to main content

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 Step 1: Create a new Hydrogen storefrontStep 1: Create a new Hydrogen storefront

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

Terminal

npm create @shopify/hydrogen@latest -- --quickstart
Note

The --quickstart flag is shorthand for a set of recommended options for trying Hydrogen. You can drop it to see the available customizations.

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

Output

Shopify: Mock.shop
Language: JavaScript
Routes:
• Home (/ & /:catchAll)
• Page (/pages/:handle)
• Cart (/cart/* & /discount/*)
• Products (/products/:handle)
• Collections (/collections & /collections/:handle)
• Policies (/policies & /policies/:handle)
• Blogs (/blogs/*)
• Account (/account/*)
• Search (/api/predictive-search & /search)
• Robots (/robots.txt)
• Sitemap (/sitemap.xml)

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

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

Terminal

cd hydrogen-quickstart
shopify hydrogen dev

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

A Hydrogen storefront showing example data from Mock.shop

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

    npx shopify hydrogen link

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

    Output

    ✓ 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

    npx shopify hydrogen env pull

    Your terminal will show a diff like this:

    Output

    - 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:

A Hydrogen storefront showing data from shopify

Anchor to Step 4: Deploy to OxygenStep 4: 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

    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:

A Hydrogen storefront deployment URL on oxygen

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


Was this page helpful?