DEPLOYMENT_GUIDE.md 9.6 KB

ShopCall.ai Deployment Guide

This guide explains how to deploy ShopCall.ai with static hosting and Supabase Edge Functions.

Architecture Overview

Current Architecture

  • Frontend: Static React build (Vite) - Can be hosted on any static hosting provider
  • Backend: Supabase Edge Functions (Deno runtime)
  • Database: Supabase PostgreSQL
  • Authentication: Supabase Auth

Prerequisites

  1. Supabase account and project
  2. Static web hosting (Apache, Nginx, Cloudflare Pages, Netlify, etc.)
  3. Resend API key for email sending (or alternative email service)
  4. Shopify API credentials (if using Shopify integration)
  5. Node.js and npm installed locally for building

Database Setup

The database migrations have already been applied. The following tables were created:

1. pending_signups

Stores temporary signup data with OTP for email verification (15-minute expiration).

2. oauth_nonces

Stores OAuth state/nonce values for secure OAuth flows (10-minute expiration).

3. stores

Stores e-commerce platform credentials and configuration.

Edge Functions Deployment

Deployed Edge Functions

  1. auth - /functions/v1/auth/*

    • /auth/signup - Create new user account with OTP
    • /auth/signup/verify - Verify OTP and complete registration
    • /auth/signup/resend-otp - Resend OTP email
    • /auth/login - Email/password login
    • /auth/logout - Sign out
    • /auth/check - Validate session token
  2. shopify-oauth - /functions/v1/shopify-oauth/*

    • /shopify-oauth/init - Initialize Shopify OAuth flow
    • /shopify-oauth/callback - Handle Shopify OAuth callback
  3. woocommerce-oauth - /functions/v1/woocommerce-oauth/*

    • /woocommerce-oauth/init - Initialize WooCommerce OAuth flow
    • /woocommerce-oauth/callback - Handle WooCommerce callback
  4. shoprenter-oauth - /functions/v1/oauth-shoprenter-*

    • /oauth-shoprenter-init - Initialize ShopRenter OAuth flow
    • /oauth-shoprenter-callback - Handle ShopRenter OAuth callback
  5. shoprenter-webhooks - /functions/v1/webhook-shoprenter-*

    • /webhook-shoprenter-uninstall - Handle ShopRenter app uninstall
  6. shoprenter-api - /functions/v1/shoprenter-*

    • /shoprenter-products/:storeId - Fetch products from ShopRenter
    • /shoprenter-orders/:storeId - Fetch orders from ShopRenter
    • /shoprenter-customers/:storeId - Fetch customers from ShopRenter
    • /shoprenter-sync/:storeId - Trigger manual data synchronization
  7. gdpr-webhooks - /functions/v1/gdpr-webhooks/*

    • /gdpr-webhooks/customers-data-request - Handle customer data requests
    • /gdpr-webhooks/customers-redact - Handle customer data redaction
    • /gdpr-webhooks/shop-redact - Handle shop data redaction

Environment Variables for Edge Functions

Configure these in your Supabase project settings:

# Supabase (automatically available)
SUPABASE_URL=https://YOUR_PROJECT.supabase.co
SUPABASE_ANON_KEY=your_anon_key

# Email Service (Resend)
RESEND_API_KEY=re_YOUR_API_KEY

# Shopify Integration
SHOPIFY_API_KEY=your_shopify_api_key
SHOPIFY_API_SECRET=your_shopify_api_secret
SHOPIFY_REDIRECT_URI=https://YOUR_PROJECT.supabase.co/functions/v1/shopify-oauth/callback

# ShopRenter Integration
SHOPRENTER_CLIENT_ID=your_shoprenter_client_id
SHOPRENTER_CLIENT_SECRET=your_shoprenter_client_secret

# Frontend URL (for OAuth redirects)
FRONTEND_URL=https://yourdomain.com

# Edge Function Base URL
EDGE_FUNCTION_BASE_URL=https://YOUR_PROJECT.supabase.co/functions/v1

# Service Role Key (for admin operations)
SUPABASE_SERVICE_ROLE_KEY=your_service_role_key

Frontend Deployment

Step 1: Configure Environment Variables

Create or update .env file in shopcall.ai-main/:

# Supabase Configuration
VITE_SUPABASE_URL=https://YOUR_PROJECT.supabase.co
VITE_SUPABASE_ANON_KEY=your_anon_key

# Backend API Base URL (Supabase Edge Functions)
VITE_API_URL=https://YOUR_PROJECT.supabase.co/functions/v1

# Frontend URL (for OAuth callbacks)
VITE_FRONTEND_URL=https://yourdomain.com

Step 2: Build the Frontend

cd shopcall.ai-main
npm install
npm run build

This creates a dist/ directory with your static files.

Step 3: Deploy Static Files

Option A: Apache Hosting

  1. Upload the contents of dist/ to your web server (e.g., /var/www/html/)
  2. Create .htaccess file in the root directory for SPA routing:

    <IfModule mod_rewrite.c>
     RewriteEngine On
     RewriteBase /
     RewriteRule ^index\.html$ - [L]
     RewriteCond %{REQUEST_FILENAME} !-f
     RewriteCond %{REQUEST_FILENAME} !-d
     RewriteRule . /index.html [L]
    </IfModule>
    
  3. Enable mod_rewrite:

    sudo a2enmod rewrite
    sudo systemctl restart apache2
    

Option B: Nginx Hosting

  1. Upload the contents of dist/ to your web server (e.g., /var/www/shopcall.ai/)
  2. Configure nginx:

    server {
       listen 80;
       server_name yourdomain.com;
       root /var/www/shopcall.ai;
       index index.html;
    
       location / {
           try_files $uri $uri/ /index.html;
       }
    }
    
  3. Test and reload:

    sudo nginx -t
    sudo systemctl reload nginx
    

Option C: Cloudflare Pages / Netlify / Similar

  1. Connect your Git repository
  2. Set build command: cd shopcall.ai-main && npm run build
  3. Set publish directory: shopcall.ai-main/dist
  4. Configure environment variables in the platform's dashboard

Email Service Setup (Resend)

  1. Sign up for Resend
  2. Create an API key
  3. Add the API key to your Supabase Edge Function secrets:

    supabase secrets set RESEND_API_KEY=your_api_key
    
  4. Verify your sending domain in Resend (recommended for production)

OAuth Configuration

Shopify

  1. In your Shopify Partner dashboard, update the app settings:
    • App URL: https://yourdomain.com
    • Allowed redirection URL(s):
      • https://YOUR_PROJECT.supabase.co/functions/v1/shopify-oauth/callback
    • GDPR webhooks:
      • Customer data request: https://YOUR_PROJECT.supabase.co/functions/v1/gdpr-webhooks/customers-data-request
      • Customer data erasure: https://YOUR_PROJECT.supabase.co/functions/v1/gdpr-webhooks/customers-redact
      • Shop data erasure: https://YOUR_PROJECT.supabase.co/functions/v1/gdpr-webhooks/shop-redact

WooCommerce

No special configuration needed. The OAuth flow is initiated from the dashboard.

ShopRenter

  1. Register your app with ShopRenter by emailing partnersupport@shoprenter.hu with:

    • Application Name: ShopCall.ai - AI Phone Assistant
    • EntryPoint URL: https://yourdomain.com/integrations?sr_install=...
    • RedirectUri URL: https://YOUR_PROJECT.supabase.co/functions/v1/oauth-shoprenter-callback
    • UninstallUri URL: https://YOUR_PROJECT.supabase.co/functions/v1/webhook-shoprenter-uninstall
    • Application Logo: 250x150px PNG with transparency
    • Required Scopes: product:read, product:write, customer:read, customer:write, order:read, order:write, category:read, webhook:read, webhook:write
  2. Once approved, you'll receive:

    • ClientId (add to SHOPRENTER_CLIENT_ID)
    • ClientSecret (add to SHOPRENTER_CLIENT_SECRET)
  3. Test your integration with a ShopRenter test store (request at https://www.shoprenter.hu/tesztigenyles/?devstore=1)

Testing the Deployment

1. Test Authentication

# Test signup
curl -X POST https://YOUR_PROJECT.supabase.co/functions/v1/auth/signup \
  -H "Content-Type: application/json" \
  -d '{
    "email": "test@example.com",
    "password": "testpass123",
    "full_name": "Test User",
    "company_name": "Test Company",
    "user_name": "testuser"
  }'

# Test login
curl -X POST https://YOUR_PROJECT.supabase.co/functions/v1/auth/login \
  -H "Content-Type: application/json" \
  -d '{
    "email": "test@example.com",
    "password": "testpass123"
  }'

2. Test OAuth Flow

  1. Navigate to your frontend URL
  2. Try connecting a Shopify or WooCommerce store
  3. Verify the OAuth callback works correctly

3. Test Frontend Routing

  1. Navigate to various routes (e.g., /dashboard, /call-logs)
  2. Refresh the page to ensure routing works with static hosting
  3. Check browser console for any errors

Troubleshooting

Common Issues

Issue: 404 errors on routes when refreshing

  • Solution: Ensure .htaccess (Apache) or nginx configuration is properly set up for client-side routing

Issue: CORS errors when calling Edge Functions

  • Solution: Verify CORS headers are set in Edge Functions (corsHeaders in each function)

Issue: Email not sending

  • Solution: Check Resend API key is properly configured and verify the email service is active

Issue: OAuth callback fails

  • Solution: Verify redirect URIs match exactly in your OAuth provider settings

Monitoring and Maintenance

  1. Edge Functions Logs: Monitor in Supabase Dashboard > Edge Functions > Logs
  2. Database: Check Supabase Dashboard > Database for any issues
  3. Cleanup: The database has automatic cleanup for expired records via the functions:
    • delete_expired_pending_signups()
    • delete_expired_oauth_nonces()

Security Considerations

  1. Environment Variables: Never commit .env files to version control
  2. API Keys: Rotate API keys regularly
  3. HTTPS: Always use HTTPS in production
  4. Rate Limiting: Consider adding rate limiting to Edge Functions for production
  5. CORS: Restrict CORS origins to your actual frontend domain in production

Support

For issues or questions:

  • Check Supabase logs for Edge Function errors
  • Review browser console for frontend errors
  • Verify environment variables are correctly set