Deployment Guide

This guide explains how to deploy your Shopify Vue app to production environments.

Understanding Deployment Requirements

The Shopify Vue App template is a full-stack application with both frontend and backend components that need to be deployed together:

• Frontend: Vue.js application built with Vite
• Backend: Node.js Express server that handles:
  • Authentication with Shopify
  • API endpoints
  • Webhook processing
  • Database operations

Important: Because this is a unified app where the backend serves the frontend, deploying to static-only hosting providers like Vercel or Netlify will not work. You need a platform that can run Node.js server applications.

Recommended Deployment Platforms

1. Heroku

Heroku offers a simple deployment experience and supports both Node.js and database services.

Setup Steps:

1. Create a Procfile in your project root:

   web: cd web && npm run serve

2. Set environment variables in Heroku dashboard:

   SHOPIFY_API_KEY=your_api_key
   SHOPIFY_API_SECRET=your_api_secret
   SCOPES=your_scopes
   HOST=your_heroku_app_url

3. Deploy using the Heroku CLI:

   heroku create your-app-name
   git push heroku main

4. Add a database add-on:

   heroku addons:create heroku-postgresql:hobby-dev

2. Digital Ocean App Platform

Digital Ocean's App Platform provides a managed environment well-suited for Shopify apps.

Setup Steps:

1. Connect your GitHub repository to Digital Ocean
2. Configure as a Node.js application
3. Set environment variables in the app settings
4. Add a managed database service

3. AWS Elastic Beanstalk

For more advanced deployments with scaling needs:

Setup Steps:

1. Create a .ebextensions configuration
2. Configure RDS for database storage
3. Set up environment variables through the AWS console
4. Deploy using the EB CLI:

   eb init
   eb create production-environment

4. Docker Deployment

The template includes a Dockerfile for containerized deployment:

Setup Steps:

1. Build the Docker image:

   docker build -t shopify-vue-app .

2. Run with environment variables:

   docker run -p 8081:8081 \
     -e SHOPIFY_API_KEY=your_key \
     -e SHOPIFY_API_SECRET=your_secret \
     -e HOST=your_host \
     -e SCOPES=your_scopes \
     shopify-vue-app

3. Deploy to container services like:

   • Azure Container Instances
   • Google Cloud Run
   • AWS ECS

Database Configuration for Production

For production, replace the SQLite database with a more robust solution:

MySQL Configuration

// In web/server/src/shopify.js
import { MySQLSessionStorage } from '@shopify/shopify-app-session-storage-mysql'

// Replace the session storage configuration
sessionStorage: MySQLSessionStorage.withCredentials(
  process.env.DATABASE_HOST,
  process.env.DATABASE_NAME,
  process.env.DATABASE_USER,
  process.env.DATABASE_PASSWORD,
  { connectionPoolLimit: 100 }
)

PostgreSQL Configuration

// In web/server/src/shopify.js
import { PostgreSQLSessionStorage } from '@shopify/shopify-app-session-storage-postgresql'

// Replace the session storage configuration
sessionStorage: PostgreSQLSessionStorage.withCredentials(
  process.env.DATABASE_HOST,
  process.env.DATABASE_NAME,
  process.env.DATABASE_USER,
  process.env.DATABASE_PASSWORD
)

Production Environment Variables

Essential environment variables for production:

# Authentication
SHOPIFY_API_KEY=           # Your app's API key
SHOPIFY_API_SECRET=        # Your app's API secret
SCOPES=                    # Required app scopes (comma-separated)
HOST=                      # Your app's public URL

# Database (if using external database)
DATABASE_HOST=             # Database hostname
DATABASE_NAME=             # Database name
DATABASE_USER=             # Database username
DATABASE_PASSWORD=         # Database password

# Optional
PORT=8081                  # Port to run the server (default: 8081)
NODE_ENV=production        # Set to production

Post-Deployment Steps

After deploying:

1. Update URLs in Shopify Partner Dashboard

   • App URL
   • Allowed redirection URLs
   • Webhook endpoints

2. Verify Webhooks

   • Test app uninstallation to ensure webhooks are received
   • Check GDPR webhooks configuration

3. Monitor Application

   • Set up logging (consider Logtail, Papertrail, etc.)
   • Configure error tracking (Sentry, Bugsnag, etc.)
   • Set up performance monitoring

4. Setup Database Backups

   • Configure automated backups
   • Test restoration procedures

Troubleshooting Deployment Issues

If you encounter issues after deployment:

1. Check Server Logs

   # Heroku example
   heroku logs --tail

2. Verify Environment Variables Ensure all required variables are set correctly.

3. Check CORS Configuration If you're seeing CORS errors, verify your domain is properly configured.

4. Database Connection Issues Test database connectivity and ensure credentials are correct.

For more help, see the Troubleshooting Guide or contact support.