Development Workflow

This guide covers the daily development workflow, from writing code to deploying to production.

Daily Development Cycle

1. Starting Your Day

# Pull latest changes
git pull origin main

# Install any new dependencies
pnpm install

# Start development servers
pnpm dev

2. Development Commands

# Start all services
pnpm dev

# Start specific services
pnpm dev --filter=@billy/app
pnpm dev --filter=@billy/ui

# Run tests
pnpm test

# Run tests for specific package
pnpm test --filter=@billy/commons
pnpm test --filter=@billy/ui

# Type checking
pnpm ts

# Linting
pnpm lint

# Format code
pnpm format

Running Tests

# Run all tests
pnpm test

# Run tests in watch mode
pnpm test --watch

# Run tests with coverage
pnpm test --coverage

# Run tests for changed files
pnpm test --changed

# Run tests for specific file
pnpm test --run src/components/Button.test.tsx

Code Quality

Linting and Formatting

# Run ESLint
pnpm lint

# Fix auto-fixable issues
pnpm lint --fix

# Run Biome
pnpm format

# Check TypeScript
pnpm ts

Database Development

Working with Migrations

# Create new migration
supabase migration new "add_user_profile_table"

# Test migration locally
supabase migration up --local

# Apply to production
supabase migration up --linked

Database Fixtures

# Load test data
pnpm populate

# Load integration data
pnpm populate-integrations

Database Debugging

# List table constraints
SELECT con.conname, pg_get_constraintdef(con.oid)
FROM pg_catalog.pg_constraint con
INNER JOIN pg_catalog.pg_class rel ON rel.oid = con.conrelid
INNER JOIN pg_catalog.pg_namespace nsp ON nsp.oid = connamespace
WHERE nsp.nspname = 'public' AND rel.relname = 'invoices';

Integration Development

Testing Integrations

# Test Pennylane sync
pnpm tsx scripts/pennylane/test-sync-dest-invoices.ts

# Test invoice push
pnpm tsx scripts/pennylane/test-push-client-invoice.ts

# Test payment status sync
pnpm tsx scripts/pennylane/test-sync-dest-invoice.ts

Integration Patterns

When implementing payment status integrations:

UpdatePaymentStatusIntegration

// Render this field in your integration
<UpdatePaymentStatusField
  integration={integration}
  source={InvoiceIntegrationSource.Pennylane}
/>

PushPaymentStatusIntegration

// Render this field in your integration
<PushPaymentStatusField
  integration={integration}
  source={InvoiceIntegrationSource.Hyperline}
/>

Integration Synchronization

Ensure your integration is properly configured for synchronization:
  1. Update getAllowedSourcesForInvoiceSynchronization
  2. Implement getDestToSourceSyncableSourceIntegrations or getSourceToDestSyncableSourceIntegrations
  3. Consider implementing refresh_unpaid_client_invoices or refresh_unpaid_supplier_invoices

Cloudflare Workers Development

Local Development

# Start workers in development mode
pnpm run workers-dev

Testing Workers

# Test specific worker
pnpm test --filter=create-webhooks

# Run worker tests in watch mode
pnpm test --filter=create-webhooks --watch

GraphQL Development

Relay Development

# Install watchman for file watching
brew install watchman

# Start GraphQL relay in watch mode
pnpm relay:watch

Generated Files

Relay generates files in __generated__ directories. These are automatically updated when you change GraphQL schemas.

Environment Variables

cd apps/app

# Set environment variable
vercel env add VARIABLE_NAME

# List environment variables
vercel env ls

Cron Jobs

Cron jobs are managed by Vercel (limited to 20) in apps/app/vercel.json:

Monitoring and Debugging

Production Logs

Local Debugging

# Start with debugging
NODE_OPTIONS="--inspect" pnpm dev

# Use Chrome DevTools for debugging
# Navigate to chrome://inspect

Troubleshooting

Common Issues

  • Port conflicts: Check if required ports are available
  • Supabase connection: Verify local Supabase is running
  • Environment variables: Ensure .env.local files are properly configured
  • Dependencies: Run pnpm install after pulling changes

Security

  • Never commit sensitive data
  • Use environment variables for secrets
  • Validate and sanitize all inputs
  • Follow secure coding practices

For more detailed information, see the Architecture Overview and Contributing Guidelines.