Get help on Discord

Using the Sanity Hydrogen demo and connecting to a test store/client stores.

4 replies
Last updated: Jun 27, 2022
Hey everyone! I am about to start using the Sanity Hydrogen demo for the first time... This is all somewhat new to me as I have been using Nuxt/Vue with Sanity for years, but I have looked over the docs and code and it seems pretty approachable lol. Anyway I notice on the Sanity Hydrogen Github it says I can use the 
test-data
that is currently available for the demo storefront... Does this happen automatically when I npm/yarn install?
AI Update

No, the test data doesn't automatically populate when you run npm install or yarn install. Looking at the Sanity Hydrogen demo repository, you'll need to take some additional steps to get the demo data set up.

The installation process requires you to:

  1. Set up Sanity Connect for Shopify first - The README mentions "These installation instructions assume you have already installed and configured Sanity Connect on your Shopify store." This is what syncs products and collections from Shopify into your Sanity dataset.

  2. Configure your environment variables - You need to duplicate the .env.example file to .env and add your own Sanity project credentials (projectId and dataset) plus your Shopify storefront credentials (storeDomain and storefrontToken).

  3. Import test data separately - The test data mentioned in the repo isn't automatically loaded during installation. You'll need to either:

    • Use Sanity Connect to sync products from a Shopify store (which could be a test store with demo products)
    • Manually import a test dataset using Sanity's CLI tools if there's a dataset export available

The npm install command only installs the JavaScript dependencies needed to run the application - it doesn't populate your Sanity dataset with content. The demo storefront at demo-ecommerce.sanity.build is connected to a pre-configured Sanity dataset with demo content, but when you clone the repo locally, you're starting with your own empty dataset that you'll need to populate.

Quick tip coming from Nuxt/Vue: Since you're used to that ecosystem, you'll find Hydrogen's React-based approach pretty straightforward. The demo uses server components and Hydrogen's useQuery hook, which is similar to data fetching patterns you might have used with Nuxt's useFetch or useAsyncData.

If you're looking for test data specifically to get started quickly, you might want to check the repository's issues or discussions to see if there's an export available, or reach out to the Sanity community in their Slack about accessing demo dataset content.

Hey
user S
,
When you clone the Sanity hydrogen demo, it’ll come pre-configured to point at our test Sanity dataset and assets on Shopify. Meaning you can just run the demo locally and play around without having to set up anything else – great if you just want to get a feel for how hydrogen works!

Alternatively – if you install
Sanity Connect via Shopify’s App Store, you’ll also be given the option to either create a new Sanity project directly within the app and/or link it to an existing project. From there, you’ll be given instructions on how to spin up a pre-configured Sanity studio.
Hey
user F
, thanks for the quick reply!
Great, I'll go ahead and use the data that comes with the demo store in order to get use to using Hydrogen. Then I'll follow the Sanity Connect instructions when I am ready to connect to my own test store/client stores.

Just out of curiosity, is there an area of
sanity.io that has references to the Hydrogen framework with Sanity? I looked on the website and there isn't any under the E-commerce guides, although I did read the latest announcement blog-post.
No worries!
AFAIK there isn’t a dedicated section on Hydrogen on our site (outside of announcements as you’ve mentioned).

However, there is a more general guide on
structured content patterns , and a Sanity Connect walkthrough video by Kap which may be helpful.
Do reach out if you get stuck or have any questions here!
Alright sounds good! Thank you for the help!

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?