Articles
references: https://shopify.dev/docs/storefronts/headless/hydrogen/getting-started https://mock.shop/ Shopify’s official headless framework. (Alternatively, can add Shopify APIs to your existing tech stack.) Process: create new Hydrogen storefront link to Shopify store deploy it to Oxygen Requirements Node.js v16.20+ and npm v8.19+ Hydrogen channel Step 1: Create a new Hydrogen storefront In your terminal, create a new Hydrogen project using example data from Mock.shop: Terminal Copy 1 npm create @shopify/hydrogen@latest — –quickstart Note The --quickstart flag is shorthand for a set of recommended options 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: Output 1 2 3 4 5 6 7 8 9 10 11 12 13 14 Shopify: 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) Anchor to Step 2: Run the dev serverStep 2: Run the dev server After installation, open your new project and start the dev server: Terminal Copy 1 2 cd hydrogen-quickstart shopify hydrogen dev Once the dev server is running, open http://localhost:3000 in your browser and you’ll see Mock.shop inventory: Anchor to Step 3: Link your Hydrogen project to ShopifyStep 3: Link your Hydrogen project to Shopify 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. Link your Hydrogen project to Shopify: Terminal Copy 1 npx shopify hydrogen link Follow the prompts to log in to your Shopify account and create a new storefront: Output 1 2 3 4 5 6 7 ✓ my-shopify-store ? Select a Hydrogen storefront to link: ✓ Create a new storefront ? New storefront name: > hydrogen-quickstart Update your project’s environment variables: Terminal Copy 1 npx shopify hydrogen env pull Your terminal will show a diff like this: Output 1 2 3 4 5 6 7 – 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] 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: Anchor to Step 4: Deploy to OxygenStep 4: Deploy to Oxygen After your Hydrogen storefront is linked, you can deploy it to Oxygen hosting to make it publicly accessible: Deploy your project to Oxygen: Terminal Copy 1 npx shopify hydrogen deploy 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: Anchor to Next stepsNext 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
