Getting started with Hydrogen and Oxygen

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:

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

1. Update your project's environment variables:

   Your terminal will show a diff like this:

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:

1. 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