Building and Deploying a Hydrogen Storefront with Shopify Integration
Key Ideas
- Create a new Hydrogen project using example data from Mock.shop and start the dev server to view Mock.shop inventory.
- Link your Hydrogen project to Shopify to display your own products and sync environment variables.
- Deploy your Hydrogen storefront to Oxygen hosting, selecting Preview environment for the deployment.
- After deployment, access the preview link to view your Hydrogen storefront publicly on Oxygen.
This tutorial guides users through the process of building a new Hydrogen storefront integrated with Shopify and deploying it to Oxygen hosting. Users need Node.js v16.20+ and npm v8.19+ installed. First, a new Hydrogen project is created using example data from Mock.shop, and the dev server is started to view the Mock.shop inventory. To display custom products, the project is linked to Shopify by logging in to the Shopify account and creating a new storefront. Environment variables are synced to ensure the link works. After linking, the project can be deployed to Oxygen hosting by selecting the Preview environment. The Hydrogen CLI then builds the storefront, creates an Oxygen deployment, and provides a preview link for public access. This seamless process enables users to create, link, and deploy a Hydrogen storefront easily and efficiently.