Quickstart

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

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.

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.

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.

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

Start Development Server

Start the development server with Shopify CLI:

npm run dev

The Shopify CLI will:

Detect that you don’t have an app configured
Prompt you to create a new app or link to an existing one
Automatically update your .env file with API credentials
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.

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:

Press P to open the preview URL in your browser
You’ll be redirected to your development store
Click Install app
Grant the requested permissions
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

Check App Installation

Verify the app is installed in your Shopify admin:

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

Verify Database Connection

Check that the app successfully connected to MySQL:

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

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

Test App Functionality

Test basic app features:

Configuration Page: Navigate through the app’s configuration screens
Product Import: Try the product import feature (if available)
API Connections: Verify Ecomdrop/Dropi API configuration
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
Backend
Database
Styles

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.

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.

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

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

# 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:

Check browser console for errors
Verify the tunnel URL is accessible
Check that your app has the correct permissions
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.

Overview

Getting Started

Core Features

Integrations

Configuration

Deployment

Overview

Quick Setup

Verify Installation

What’s Next?

Configure Ecomdrop Integration

Configure Dropi Integration

AI Configuration

Development Guide

Development Workflow

Hot Reload

Making Changes

Common Development Commands

Troubleshooting

Port 3000 Already in Use

Database Connection Failed

Shopify CLI Errors

App Won’t Load in Shopify Admin

Database Tables Missing

Support

Build docs developers (and LLMs) love

Overview

Getting Started

Core Features

Integrations

Configuration

Deployment

Documentation Index

​Overview

​Quick Setup

​Verify Installation

​What’s Next?

Configure Ecomdrop Integration

Configure Dropi Integration

AI Configuration

Development Guide

​Development Workflow

​Hot Reload

​Making Changes

​Common Development Commands

​Troubleshooting

​Port 3000 Already in Use

​Database Connection Failed

​Shopify CLI Errors

​App Won’t Load in Shopify Admin

​Database Tables Missing

​Support

Build docs developers (and LLMs) love

Overview

Quick Setup

Verify Installation

What’s Next?

Development Workflow

Hot Reload

Making Changes

Common Development Commands

Troubleshooting

Port 3000 Already in Use

Database Connection Failed

Shopify CLI Errors

App Won’t Load in Shopify Admin

Database Tables Missing

Support