Learn
CoursesSanity and Shopify with HydrogenCreating a Hydrogen front end
Sanity and Shopify with Hydrogen

Creating a Hydrogen front end

Hydrogen is a front-end framework based on Remix and preconfigured to query from Shopify stores.
Log in to mark your progress for each Lesson and Task
If you get stuck, consult the Hydrogen documentation for installation instructions
Initiate a new Hydrogen project from the command line in a separate directory from your Sanity Studio.
npm create @shopify/hydrogen@latest -- --install-deps --mock-shop --path sanity-and-hydrogen --language ts --shortcut h2

The command above sets a number of defaults such as TypeScript, Tailwind and the directory of the project.

Follow the prompts:

  • Select your styling library (we use Tailwind in this guide)
  • When prompted, choose "No, set up later" for the route scaffolding option

You should now have two separate directories, one for your Sanity Studio, the other for your Hydrogen app. 

./
├── /sanity-and-shopify
└── /sanity-and-hydrogen

This will be important later when we begin generating Types from the Studio for Hydrogen.

For your development store you'll need to install the Headless Shopify app to connect your front end to Shopify.

If you're not working on a development store you can connect by choosing a shop with the Hydrogen / Oxygen sales channel using h2 link – but development stores don't currently support this. We highly recommend switching to a paid plan to test Oxygen deployments if that's the final destination of the experience, as it's easier to troubleshoot deploy issues as you build!

The sanity-and-hydrogen/.env file in your project will need to be updated with your Shopify URL and access tokens from the Headless sales channel.

Install the Headless sales channel onto your dev store

Once installed, click the "Manage" button next to Storefront API, copy your access tokens and insert them into the .env file your project.

Update your .env file to look something like the below
# Found in Storefront API section of the Headless App in Shopify Admin
PUBLIC_STOREFRONT_API_TOKEN="..."
PRIVATE_STOREFRONT_API_TOKEN="shpat_..."
# Found in your Shopify dashboard
PUBLIC_STORE_DOMAIN="<your-domain>.myshopify.com"
PUBLIC_CHECKOUT_DOMAIN="<your-domain>.myshopify.com"
# Any random string, but it must be kept secret
SESSION_SECRET="..."

Now, enter the sanity-and-hydrogen folder, run the application in development and open http://localhost:3000 in your browser.

npm run dev
If you see a message about connecting your storefront, it must not be reading the contents of your .env file correctly.

You should see a page like the one below with instructions on setting up a route.

Hydrogen is now connected to Shopify and data-ready!

You have 3 uncompleted tasks in this lesson
0 of 3