Environment Configuration

Configure environment variables and credentials for production deployment

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
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 control

While 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
3. Example: wfr1r0dw
4. Configure dataset
5. Sanity uses datasets to separate content environments:
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 security

Like 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:
7. Rotate credentials regularly
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