Installation - Tune Me In

This guide provides comprehensive installation instructions for Tune Me In, including all prerequisites, dependencies, and configuration options.

Prerequisites

Node.js

Required: Node.js 14.0 or higherCheck your version:

node --version

Package Manager

Required: npm, yarn, or pnpmComes with Node.js or install separately

Shopify Store

Optional: For custom dataNeed a Shopify store with Storefront API access

Sanity Account

Optional: For custom dataNeed a Sanity project with Shopify Studio

You can get started immediately with demo data - connecting your own Shopify store and Sanity project is optional.

Installation Steps

Clone the Repository

Clone the Tune Me In starter from GitHub:

git clone git@github.com:sanity-io/hydrogen-sanity-demo.git tune-me-in
cd tune-me-in

This creates a new directory called tune-me-in with the starter code.

Install Dependencies

Install all required packages using your preferred package manager:

npm install

This installs all dependencies defined in package.json, including:

Core Dependencies

Tune Me In includes these key dependencies:

Hydrogen & Shopify

package.json

{
  "dependencies": {
    "@shopify/hydrogen": "0.7.0"
  }
}

The Shopify Hydrogen framework provides:

Server-side rendering with React 18
Streaming SSR for fast page loads
Built-in commerce components
Storefront API integration

Sanity Integration

package.json

{
  "dependencies": {
    "@sanity/client": "^2.21.7",
    "@sanity/image-url": "^1.0.1",
    "@sanity/block-content-to-react": "^3.0.0",
    "hydrogen-plugin-sanity": "^0.1.1",
    "groq": "^2.15.0"
  }
}

These packages provide:

@sanity/client - JavaScript client for querying Sanity
@sanity/image-url - Image URL builder for Sanity images
@sanity/block-content-to-react - Renders Portable Text content
hydrogen-plugin-sanity - Unified Sanity + Shopify data fetching
groq - Query language for Sanity

UI & Styling

package.json

{
  "dependencies": {
    "@headlessui/react": "^1.4.1",
    "@heroicons/react": "^1.0.5",
    "@tailwindcss/aspect-ratio": "^0.3.0",
    "clsx": "^1.1.1"
  },
  "devDependencies": {
    "tailwindcss": "^2.2.4",
    "@tailwindcss/typography": "^0.4.1",
    "autoprefixer": "^10.2.5",
    "postcss": "^8.2.10"
  }
}

Build Tools

package.json

{
  "devDependencies": {
    "vite": "^2.6.14",
    "cross-env": "^7.0.3"
  }
}

Configuration

Using Demo Data
Using Your Own Data

Run with Demo Data

The starter comes pre-configured with demo data. You can start developing immediately:

npm run dev

Visit http://localhost:3000 to see the storefront with demo products.

The demo configuration points to:

Shopify Store: sanity-dev-store.myshopify.com
Sanity Project: wfr1r0dw (dataset: production)

Configure Your Own Store

To use your own Shopify store and Sanity project, update both configuration files.

Get Shopify Credentials

Log in to your Shopify admin
Go to Settings → Apps and sales channels
Create a custom app or use an existing one
Enable Storefront API access
Copy your Storefront Access Token and Store Domain

Update shopify.config.js

Edit shopify.config.js at the root of your project:

shopify.config.js

import sanityConfig from './sanity.config';

export default {
  graphqlApiVersion: 'unstable',
  locale: 'en-us',
  storeDomain: 'your-store.myshopify.com', // Your store domain
  storefrontToken: 'your-storefront-access-token', // Your token
  sanity: sanityConfig,
};

Keep your storefrontToken secure. Consider using environment variables for production:

storefrontToken: import.meta.env.VITE_SHOPIFY_STOREFRONT_TOKEN

Get Sanity Credentials

Log in to your Sanity account
Find or create a project
Note your Project ID (visible in project settings)
Choose your Dataset name (usually production)

Update sanity.config.js

Edit sanity.config.js at the root of your project:

sanity.config.js

export default {
  apiVersion: 'v2021-06-07',
  dataset: 'production', // Your dataset name
  projectId: 'your-project-id', // Your Sanity project ID
  useCdn: true, // Use CDN for faster queries
};

Set useCdn: false during development if you want to see content changes immediately without CDN caching.

Set Up Sanity Connect

To sync your Shopify products to Sanity, install Sanity Connect:

Install the Sanity Shopify Studio
Configure Sanity Connect for Shopify
Run an initial sync to import your products

Sanity Connect automatically syncs your products, keeping your Sanity dataset up to date with Shopify changes.

Verify Installation

After installation and configuration, verify everything is working:

Start the Development Server

npm run dev

You should see output like:

Hydrogen server started on http://localhost:3000

Open the Storefront

Navigate to http://localhost:3000 in your browser.You should see:

Home page with featured products
Navigation with collections
Working product links

Test Key Pages

Verify these routes work:

/ - Home page
/collections/all - All products
/products/[any-product-handle] - Product detail page
/about - Editorial page example

Available Scripts

Tune Me In includes these npm scripts:

{
  "scripts": {
    "dev": "vite"
  }
}

Script Usage

npm run dev      # Start development server
npm run build    # Build for production
npm run lint     # Run linters
npm run serve    # Serve production build

Environment Variables (Optional)

For better security in production, use environment variables:

Create .env File

Create a .env file at the root of your project:

.env

VITE_SHOPIFY_STORE_DOMAIN=your-store.myshopify.com
VITE_SHOPIFY_STOREFRONT_TOKEN=your-token
VITE_SANITY_PROJECT_ID=your-project-id
VITE_SANITY_DATASET=production

Update Configuration Files

Reference environment variables in your config:

shopify.config.js

export default {
  storeDomain: import.meta.env.VITE_SHOPIFY_STORE_DOMAIN || 'sanity-dev-store.myshopify.com',
  storefrontToken: import.meta.env.VITE_SHOPIFY_STOREFRONT_TOKEN || 'default-token',
  // ...
};

sanity.config.js

export default {
  projectId: import.meta.env.VITE_SANITY_PROJECT_ID || 'wfr1r0dw',
  dataset: import.meta.env.VITE_SANITY_DATASET || 'production',
  // ...
};

Add to .gitignore

Make sure .env is in your .gitignore:

.gitignore

.env
.env.local
.env.production

Never commit sensitive credentials to version control. Always use environment variables for production deployments.

Troubleshooting

Node version error

Tune Me In requires Node.js 14.0 or higher. Update Node.js:

# Using nvm
nvm install 14
nvm use 14

# Or download from nodejs.org

Installation fails

Try these steps:

Clear npm cache:
```
npm cache clean --force
```

Delete node_modules and lock file:

rm -rf node_modules package-lock.json
npm install

Use a different package manager (try yarn or pnpm)

Shopify connection error

Verify your Shopify credentials:

Store domain should be in format: your-store.myshopify.com
Storefront token must have Storefront API access enabled
Check token hasn’t expired

Test your credentials using the Shopify Storefront API explorer.

Sanity data not loading

Check your Sanity configuration:

Project ID is correct (visible in project settings)
Dataset exists and has data
Products are synced from Shopify using Sanity Connect
API permissions allow read access

Test your connection:

npx @sanity/cli dataset list --project=your-project-id

Build errors

Common build issues:

Ensure all dependencies are installed: npm install
Check Node.js version: node --version
Clear Vite cache: rm -rf node_modules/.vite
Update dependencies: npm update

Next Steps

Now that Tune Me In is installed, you’re ready to start building:

Architecture

Learn how the codebase is organized

Data Fetching

Understand how to query Sanity and Shopify data

Components

Explore available components and create your own

Deployment

Deploy your storefront to production

​Prerequisites

Node.js

Package Manager

Shopify Store

Sanity Account

​Installation Steps

​Core Dependencies

​Hydrogen & Shopify

​Sanity Integration

​UI & Styling

​Build Tools

​Configuration

​Run with Demo Data

​Configure Your Own Store

​Verify Installation

​Available Scripts

​Script Usage

​Environment Variables (Optional)

​Troubleshooting

​Next Steps

Architecture

Data Fetching

Components

Deployment

Prerequisites

Installation Steps

Core Dependencies

Hydrogen & Shopify

Sanity Integration

UI & Styling

Build Tools

Configuration

Run with Demo Data

Configure Your Own Store

Verify Installation

Available Scripts

Script Usage

Environment Variables (Optional)

Troubleshooting

Next Steps