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. #### Requirements - [Node.js v16.20+](https://nodejs.org/) and [npm v8.19+](https://www.npmjs.com/) - [Hydrogen channel](https://apps.shopify.com/hydrogen) ## Step 1: Create a new Hydrogen storefront In your terminal, create a new Hydrogen project using example data from [Mock.shop](https://mock.shop):

> Note: > The `--quickstart` flag is shorthand for a set of [recommended options](/docs/api/shopify-cli/hydrogen/hydrogen-init#flags-propertydetail-quickstart) 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:

## Step 2: 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](http://localhost:3000) in your browser and you'll see [Mock.shop](https://mock.shop) inventory: ![A Hydrogen storefront showing example data from Mock.shop](/assets/custom-storefronts/hydrogen/mockshop-screenshot.png) ## Step 3: Link your Hydrogen project to Shopify By default, your Hydrogen project displays example products from [Mock.shop](https://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](http://localhost:3000). You'll now see your storefront inventory in your browser: ![A Hydrogen storefront showing data from shopify](/assets/custom-storefronts/hydrogen/hydrogen-store-screenshot.png) ## Step 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:


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: ![A Hydrogen storefront deployment URL on oxygen](/assets/custom-storefronts/hydrogen/hydrogen-store-deployment.png) ## Next 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