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): <p> <div class="react-code-block" data-preset="terminal"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="title" data-value="Terminal"></script> <script type="text/plain" data-language="none"> RAW_MD_CONTENTnpm create @shopify/hydrogen@latest -- --quickstart END_RAW_MD_CONTENT</script> </div> </p> > 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: <p> <div class="react-code-block" data-preset="terminal"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="title" data-value="Output"></script> <script data-option="nocopy" data-value="true"></script> <script type="text/plain" data-language="none"> RAW_MD_CONTENTShopify: 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) END_RAW_MD_CONTENT</script> </div> </p> ## Step 2: Run the dev server After installation, open your new project and start the dev server: <p> <div class="react-code-block" data-preset="terminal"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="title" data-value="Terminal"></script> <script type="text/plain" data-language="none"> RAW_MD_CONTENTcd hydrogen-quickstart shopify hydrogen dev END_RAW_MD_CONTENT</script> </div> </p> 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: <p> <div class="react-code-block" data-preset="terminal"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="title" data-value="Terminal"></script> <script type="text/plain" data-language="none"> RAW_MD_CONTENTnpx shopify hydrogen link END_RAW_MD_CONTENT</script> </div> </p> Follow the prompts to log in to your Shopify account and create a new storefront: <p> <div class="react-code-block" data-preset="terminal"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="title" data-value="Output"></script> <script data-option="nocopy" data-value="true"></script> <script type="text/plain" data-language="none"> RAW_MD_CONTENT? Select a shop to log in to: ✓ my-shopify-store ? Select a Hydrogen storefront to link: ✓ Create a new storefront ? New storefront name: > hydrogen-quickstart END_RAW_MD_CONTENT</script> </div> </p> </br> 1. Update your project's environment variables: <p> <div class="react-code-block" data-preset="terminal"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="title" data-value="Terminal"></script> <script type="text/plain" data-language="none"> RAW_MD_CONTENTnpx shopify hydrogen env pull END_RAW_MD_CONTENT</script> </div> </p> Your terminal will show a diff like this: <p> <div class="react-code-block" data-preset="terminal"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="title" data-value="Output"></script> <script data-option="nocopy" data-value="true"></script> <script type="text/plain" data-language="none"> RAW_MD_CONTENT- 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] END_RAW_MD_CONTENT</script> </div> </p> </br> 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: <p> <div class="react-code-block" data-preset="terminal"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="title" data-value="Terminal"></script> <script type="text/plain" data-language="none"> RAW_MD_CONTENTnpx shopify hydrogen deploy END_RAW_MD_CONTENT</script> </div> </p> </br> 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. <div class="resource-card-grid"> <div> <a class="resource-card" href="/docs/storefronts/headless/hydrogen/fundamentals" data-theme-mode=""> <div class="resource-card__indicator-container"><img src="/assets/resource-cards/storefront" data-alt-src="/assets/resource-cards/storefront-dark" aria-hidden="true" class="resource-card__icon themed-image"></div> <h3 class="resource-card__title"> Hydrogen and Oxygen fundamentals </h3> <p class="resource-card__description">Explore the key components of the Hydrogen and Oxygen stack and how they work together</p> </a> </div> </div>