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.