Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/pieroenrico/tune-me-in/llms.txt

Use this file to discover all available pages before exploring further.

​
Environment Configuration

Properly configuring your environment variables is critical for deploying Tune Me In to production. This guide covers all necessary configuration for both Shopify and Sanity integrations.

​
Required Environment Variables

​
Server Configuration

# Server port (defaults to 8080 if not set)
PORT=8080

# Node environment
NODE_ENV=production
The server reads the PORT environment variable in server.js:44 to determine which port to listen on: 
const port = process.env.PORT || 8080;

​
Shopify Configuration

Shopify settings are configured in shopify.config.js. You’ll need to update these values with your own store credentials:

​
Required Shopify Credentials

shopify.config.js
export default {
  graphqlApiVersion: 'unstable',
  locale: 'en-us',
  storeDomain: 'your-store.myshopify.com',
  storefrontToken: 'your-storefront-access-token',
  sanity: sanityConfig,
};
1
Get your Shopify store domain
2
Your store domain follows the format: [your-store-name].myshopify.com
3
Example: sanity-dev-store.myshopify.com
4
Create a Storefront API access token
5
  • Log in to your Shopify admin panel
  • Go to Apps → Develop apps
  • Click Create an app
  • Configure Storefront API access with these permissions:
    • unauthenticated_read_product_listings
    • unauthenticated_read_product_inventory
    • unauthenticated_read_collection_listings
  • Copy the Storefront API access token
    • 6
    Update shopify.config.js
    7
    Replace the placeholder values:
    8
    storeDomain: 'your-store.myshopify.com',
storefrontToken: 'your-actual-token-here',
    Never commit credentials to version controlWhile Tune Me In currently stores credentials in shopify.config.js, you should migrate these to environment variables for production:
    export default {
  storeDomain: process.env.SHOPIFY_STORE_DOMAIN,
  storefrontToken: process.env.SHOPIFY_STOREFRONT_TOKEN,
  // ... other config
};

    ​
    Shopify API Version

    The project uses graphqlApiVersion: 'unstable'. For production, pin to a specific API version: 
    graphqlApiVersion: '2024-01', // Use latest stable version
    See Shopify API versioning for available versions.

    ​
    Sanity Configuration

    Sanity CMS settings are configured in sanity.config.js:

    ​
    Required Sanity Credentials

    sanity.config.js
    export default {
  apiVersion: 'v2021-06-07',
  dataset: 'production',
  projectId: 'your-project-id',
  useCdn: true,
};
    1
    Get your Sanity project ID
    2
  • Log in to sanity.io
  • Go to your project dashboard
  • Copy the Project ID from the project settings
    • 3
    Example: wfr1r0dw
    4
    Configure dataset
    5
    Sanity uses datasets to separate content environments:
    6
  • production - Live content
  • development - Development/staging content
  • Custom datasets - As needed
    • 7
    Set API version
    8
    The API version determines which Sanity API features are available. Use the format vYYYY-MM-DD:
    9
    apiVersion: 'v2021-06-07', // or later version
    10
    Configure CDN usage
    11
    useCdn: true, // Use CDN for faster reads (production)
useCdn: false, // Skip CDN for real-time data (development)
    Sanity credentials securityLike Shopify credentials, migrate Sanity configuration to environment variables:
    export default {
  projectId: process.env.SANITY_PROJECT_ID,
  dataset: process.env.SANITY_DATASET || 'production',
  apiVersion: process.env.SANITY_API_VERSION || 'v2021-06-07',
  useCdn: process.env.NODE_ENV === 'production',
};

    ​
    Vite Configuration

    The vite.config.js file imports and uses the Shopify configuration:
    vite.config.js
    import {defineConfig} from 'vite';
import hydrogen from '@shopify/hydrogen/plugin';
import shopifyConfig from './shopify.config';

export default defineConfig({
  optimizeDeps: {include: ['@headlessui/react']},
  plugins: [hydrogen(shopifyConfig)],
});
    The Hydrogen plugin injects Shopify configuration into your application at build time.

    ​
    Platform-Specific Configuration

    ​
    Fly.io Environment Variables

    Set secrets using the Fly CLI: 
    fly secrets set SHOPIFY_STORE_DOMAIN=your-store.myshopify.com
fly secrets set SHOPIFY_STOREFRONT_TOKEN=your-token
fly secrets set SANITY_PROJECT_ID=your-project-id
fly secrets set SANITY_DATASET=production

    ​
    Cloudflare Workers

    Add environment variables in the Cloudflare dashboard:
    1. Go to Workers → Your Worker → Settings
    2. Click Variables → Add variable
    3. Add each environment variable
    4. For sensitive values, check Encrypt

    ​
    Docker Environment Variables

    Pass environment variables when running containers: 
    docker run -e PORT=8080 \
  -e SHOPIFY_STORE_DOMAIN=your-store.myshopify.com \
  -e SHOPIFY_STOREFRONT_TOKEN=your-token \
  -e SANITY_PROJECT_ID=your-project-id \
  -e SANITY_DATASET=production \
  -p 8080:8080 \
  your-image-name
    Or use a .env file with Docker Compose:
    docker-compose.yml
    services:
  app:
    build: .
    ports:
      - "8080:8080"
    env_file:
      - .env.production

    ​
    Security Best Practices

    1
    Never commit secrets
    2
    Add sensitive files to .gitignore:
    3
    .env
.env.local
.env.production
*.secret
    4
    Use environment-specific configs
    5
    Maintain separate configurations for each environment:
    6
  • .env.development - Local development
  • .env.staging - Staging environment
  • .env.production - Production environment
    • 7
    Rotate credentials regularly
    8
  • Regenerate Shopify Storefront tokens every 90 days
  • Update Sanity API tokens periodically
  • Use read-only credentials where possible
    • 9
    Validate required variables
    10
    Add validation to ensure critical environment variables are set:
    11
    const requiredEnvVars = [
  'SHOPIFY_STORE_DOMAIN',
  'SHOPIFY_STOREFRONT_TOKEN',
  'SANITY_PROJECT_ID',
];

for (const envVar of requiredEnvVars) {
  if (!process.env[envVar]) {
    throw new Error(`Missing required environment variable: ${envVar}`);
  }
}

    ​
    Testing Configuration

    Before deploying, verify your configuration locally: 
    # Build the application
yarn build

# Test the production server locally
NODE_ENV=production yarn serve
    Verify:
    • The server starts without errors
    • Shopify products load correctly
    • Sanity content appears as expected
    • No credential warnings in logs

    ​
    Next Steps

    Deployment Overview

    Learn about hosting options and the build process

    Sanity Connect Setup

    Configure Sanity Connect for automatic Shopify data sync

    Build docs developers (and LLMs) love

    Get started for freeTalk to us