Quickstart

Get the Ecomdrop IA Connector running in minutes with this fast-track setup guide

Overview

This quickstart guide will get your Ecomdrop IA Connector app up and running in under 10 minutes. For more detailed configuration options, see the comprehensive Environment Setup and Database Setup guides.

Before starting, ensure you have completed the Installation prerequisites: Node.js 20.19+, Shopify CLI, MySQL 8.0, and a Shopify Partner account.

Quick Setup

1. Clone and Install

   Clone the repository and install dependencies:

   git clone <repository-url>
   cd ecomdrop-ia-connector
   npm install
   

   This step takes 2-3 minutes depending on your internet connection.

2. Create MySQL Database

   Create a MySQL database for the application:

   # Connect to MySQL
   mysql -u root -p
   

   -- Create database
   CREATE DATABASE shopify_app CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
   
   -- Create user and grant permissions
   CREATE USER 'shopify_user'@'localhost' IDENTIFIED BY 'your_secure_password';
   GRANT ALL PRIVILEGES ON shopify_app.* TO 'shopify_user'@'localhost';
   FLUSH PRIVILEGES;
   
   -- Verify
   SHOW DATABASES;
   EXIT;
   

   Replace your_secure_password with a strong password. You’ll need this for the next step.

3. Configure Environment Variables

   Create a .env file in the project root:

   touch .env
   

   Add the following configuration to .env:

   # Database (MySQL)
   DATABASE_URL="mysql://shopify_user:your_secure_password@localhost:3306/shopify_app"
   
   # Shopify API (temporary values for initial setup)
   SHOPIFY_API_KEY=your_api_key
   SHOPIFY_API_SECRET=your_api_secret
   SHOPIFY_APP_URL=https://your-app-url.com
   
   # Optional: Theme Configuration
   THEME_2_5_GIT_REPO=
   THEME_2_5_GIT_BRANCH=main
   THEME_2_5_GIT_PROVIDER=github
   THEME_2_5_GIT_TOKEN=
   

   Don’t worry about the Shopify API credentials yet - we’ll update them after running the dev server.

4. Initialize Database

   Generate Prisma Client and run database migrations:

   npm run setup
   

   This command will:

   • Generate the Prisma Client based on your schema
   • Apply all database migrations to create tables
   • Set up the following tables:
     • Session - Shopify app sessions
     • ShopConfiguration - Store-specific settings
     • ProductAssociation - Product mappings
     • AIConfiguration - AI assistant configuration

   Expected Output:

   ✔ Generated Prisma Client
   ✔ Applied 4 migrations
   Database setup complete!
   

   You can view your database schema visually using Prisma Studio:

   npx prisma studio
   
5. Start Development Server

   Start the development server with Shopify CLI:

   npm run dev
   

   The Shopify CLI will:

   1. Detect that you don’t have an app configured
   2. Prompt you to create a new app or link to an existing one
   3. Automatically update your .env file with API credentials
   4. Start the development server with a tunnel URL

   Follow the prompts:

   ? Create this project as a new app on Shopify?
   > Yes, create it as a new app
   
   ? App name:
   > ecomdrop-ia-connector
   
   ? Which Partner organization is this app for?
   > Your Organization
   

   The CLI will automatically configure SHOPIFY_API_KEY, SHOPIFY_API_SECRET, and SHOPIFY_APP_URL in your .env file.

6. Install in Test Store

   Once the dev server is running, you’ll see output like:

   ╭─ info ───────────────────────────────────────────────────────────────────────╮
   │                                                                              │
   │  Preview your app:                                                           │
   │  • https://admin.shopify.com/store/your-store/apps/your-app                  │
   │                                                                              │
   │  Press P to open                                                             │
   │                                                                              │
   ╰──────────────────────────────────────────────────────────────────────────────╯
   

   Install the app:

   1. Press P to open the preview URL in your browser
   2. You’ll be redirected to your development store
   3. Click Install app
   4. Grant the requested permissions
   5. You’ll be redirected to the app’s embedded interface

   The app will be installed in your development store and you can start testing immediately.

Verify Installation

1. Check App Installation

   Verify the app is installed in your Shopify admin:

   1. Go to your development store admin: https://admin.shopify.com/store/your-store
   2. Navigate to Apps in the left sidebar
   3. You should see Ecomdrop IA Connector listed
   4. Click on it to open the embedded app
2. Verify Database Connection

   Check that the app successfully connected to MySQL:

   # In a new terminal, open Prisma Studio
   npx prisma studio
   

   1. Prisma Studio will open in your browser at http://localhost:5555
   2. Click on the Session table
   3. You should see at least one session record from your app installation
3. Test App Functionality

   Test basic app features:

   1. Configuration Page: Navigate through the app’s configuration screens
   2. Product Import: Try the product import feature (if available)
   3. API Connections: Verify Ecomdrop/Dropi API configuration
   4. AI Configuration: Check the AI assistant configuration page

What’s Next?

Now that your app is running, explore these next steps:

Configure Ecomdrop Integration

Set up your Ecomdrop API key and flow configurations

Configure Dropi Integration

Connect your Dropi store and configure product imports

AI Configuration

Set up the AI assistant with company information and FAQs

Development Guide

Learn about the development workflow and codebase structure

Development Workflow

Hot Reload

The development server supports hot reload for instant feedback:

• Frontend changes: React components update automatically
• Backend changes: Server routes restart automatically
• Database changes: Update schema and run npx prisma migrate dev

Making Changes

Frontend

Edit React components in app/components/ or app/routes/:

# Example: Edit the home page
app/routes/_index.tsx

Changes will reflect immediately in your browser.

Backend

Edit server-side code in route loaders/actions:

// app/routes/api.products.tsx
export async function loader({ request }: LoaderFunctionArgs) {
  const { admin } = await authenticate.admin(request);
  // Your API logic here
}

The server will restart automatically.

Database

Update the Prisma schema and create a migration:

# Edit schema
nano prisma/schema.prisma

# Create migration
npx prisma migrate dev --name add_new_field

# Prisma Client is regenerated automatically

Styles

Edit Tailwind classes or global styles:

# Tailwind config
tailwind.config.ts

# Global CSS
app/styles/globals.css

Changes apply with hot reload.

Common Development Commands

Development Server

# Start dev server
npm run dev

# Type check while developing
npm run typecheck

# Lint code
npm run lint

Troubleshooting

Port 3000 Already in Use

If you see an error that port 3000 is already in use:

# Find and kill the process using port 3000
lsof -ti:3000 | xargs kill -9

# Or change the port in .env
echo "PORT=3001" >> .env

Database Connection Failed

If the app can’t connect to MySQL:

# Verify MySQL is running
mysql -u shopify_user -p

# Check your DATABASE_URL format:
# mysql://username:password@host:port/database

# Test connection
npx prisma db pull

Shopify CLI Errors

If Shopify CLI commands fail:

# Update Shopify CLI to latest version
npm install -g @shopify/cli@latest

# Clear CLI cache
rm -rf ~/.shopify

# Re-authenticate
shopify auth logout
shopify app dev

App Won’t Load in Shopify Admin

If the app shows a blank page or error:

1. Check browser console for errors
2. Verify the tunnel URL is accessible
3. Check that your app has the correct permissions
4. Ensure SHOPIFY_APP_URL matches the tunnel URL

# View detailed logs
npm run dev -- --verbose

Database Tables Missing

If you get “table does not exist” errors:

# Re-run migrations
npm run setup

# Or manually
npx prisma migrate deploy
npx prisma generate

If you continue to experience issues, see the detailed Troubleshooting Guide or check the application logs.

Support

Need help? Here are some resources:

• Documentation: Browse the full documentation for detailed guides
• Shopify Dev Docs: shopify.dev/docs/apps
• Prisma Docs: prisma.io/docs
• React Router Docs: reactrouter.com

Join the Shopify Partners Slack community for quick answers from other developers.