app-name

Application tag line describe here

Preparation

• A Firebase account

• A Firebase project

• A Shopify partner account

• A Shopify app in partner account

Installation

• Choose a project staging for Firebase application

firebase use --add

• Configure all settings for Firebase development environment by creating a new file .env inside the packages/functions (copy from .env.example)

# Shopify Configuration
SHOPIFY_API_KEY=<Shopify API Key>
SHOPIFY_SECRET=<Shopify Secret>
SHOPIFY_FIREBASE_API_KEY=<Firebase API Key>
SHOPIFY_SCOPES=read_themes
SHOPIFY_ACCESS_TOKEN_KEY=avada-apps-access-token

# App Configuration
APP_ENV=development
APP_BASE_URL=<Your app base URL>

• Create a file .env.development with content in packages/assets

VITE_SHOPIFY_API_KEY=<Insert here>
VITE_FIREBASE_API_KEY=<Insert here>
VITE_FIREBASE_AUTH_DOMAIN=<Insert here>
VITE_FIREBASE_PROJECT_ID=<Insert here>
VITE_FIREBASE_STORAGE_BUCKET=<Insert here>
VITE_FIREBASE_APP_ID=<Insert here>
VITE_FIREBASE_MEASUREMENT_ID=<Insert here>

• Create an empty Firestore database
• Deploy the Firestore default indexes

firebase deploy --only firestore

Development

• To start to develop, please run 2 below commands

npm run dev

GOOGLE_APPLICATION_CREDENTIALS=<Path to service-account.json> firebase serve

Lint

• All your files must be passed ESLint:

To setup a git hook before committing to Gitlab, please run:

cp git-hooks/pre-commit .git/hooks/pre-commit && chmod +x .git/hooks/pre-commit

Where you can see all function logs

• You can see all logs from your functions by follow commands

firebase functions:log

• You also view in Web interface by access

Common issues

When you open an embedded app in local, it can throw an error like that

Solution

Install Disable Content-Security-Policy (CSP) to disable CSP in Chromium browers

I got message Unauthorized after authentication

Solution

Go https://console.firebase.google.com/u/0/project/{project-id}/settings/serviceaccounts/adminsdk

Click Generate new private key

Use command to export global environment

export GOOGLE_APPLICATION_CREDENTIALS=<Path to service-account.json>

I got message PERMISSION_DENIED: Missing or insufficient permissions

Solution

Enable permission Service Account Token Creator for user@appspot.gserviceaccount.com

I can't see FIREBASE_MEASUREMENT_ID in Firebase project

Solution

You can enable Analytics for your project from Firebase project

AI-Assisted Development (Claude Code)

This project supports agentic development workflows using Claude Code. See CLAUDE.md for detailed instructions.

Quick Commands

Command	Description
/plan [task]	Create implementation plan for a feature
/fix [issue]	Analyze and fix issues
/test	Run tests and validate code quality
/debug [issue]	Investigate and diagnose problems
/impact	Analyze impact before merge request
/perf [target]	Audit code for performance issues
/translate [feature]	Update translations after adding labels

Specialized Agents

Agent	Purpose
planner	Research and create implementation plans
debugger	Investigate issues, analyze logs
tester	Run tests, validate quality
code-reviewer	Code review with Avada standards
security-auditor	Security vulnerability analysis
performance-reviewer	Audit performance and costs
shopify-app-tester	MR impact and testing checklist

Recommended Workflows

New Feature:

/plan [feature] → implement → /test → /review → /impact

Bug Fix:

/debug [issue] → /fix → /test

Before Merge:

/test → /review → /perf → /impact

Skills Reference

Skills documentation is available in .claude/skills/ for:

• avada-architecture.md - Project structure and coding standards
• firestore.md - Firestore queries, batching, indexes
• bigquery.md - Partitioning, clustering, cost control
• shopify-api.md - API selection, bulk operations, webhooks
• backend.md - Async patterns, functions config

TODO

• Add testing
• CI/CD
• Add document

mutation { webPixelUpdate( id: "gid://shopify/WebPixel/2063761636", webPixel: { settings: "{"appUrl":"https://existing-vat-fastest-independence.trycloudflare.com\"}" } ) { webPixel { id settings } userErrors { message } } } mutation { webPixelUpdate(id: "gid://shopify/WebPixel/2063761636", webPixel: { settings: "{"appUrl":"https://work-result-committee-hook.trycloudflare.com\"}" }) { webPixel { id settings } userErrors { message } } } query OrdersByDateRange( $first: Int! $after: String $firstLineItems: Int! $query: String! ) { orders( first: $first after: $after sortKey: CREATED_AT reverse: true query: $query ) { pageInfo { hasNextPage endCursor } edges { node { id createdAt lineItems(first: $firstLineItems) { nodes { product { id handle } } } } } } }