Skip to content

CONNECTION_ANALYSIS.md

Latest commit

 

History

History
207 lines (164 loc) · 5.96 KB

CONNECTION_ANALYSIS.md

File metadata and controls

207 lines (164 loc) · 5.96 KB

Frontend-Backend Connection Analysis

Current Status After Vue.js Build

✅ Admin Frontend → Backend API Connection

Configuration:

  • API Base URL: /api (hardcoded in admin/src/lib/api.ts)
  • Built Location: admin/dist/assets/api-BEBTEtNV.js
  • Authentication: JWT Bearer tokens + CSRF tokens
  • CORS: Configured in api/index.php

Connection Flow:

  1. Admin loads from /admin/ → serves admin/dist/index.html
  2. Vue.js app loads → imports API module
  3. API calls go to /api/* endpoints
  4. Backend processes requests with middleware stack

Fixed Issues:

  • ✅ Admin index.php now properly serves built files from dist/
  • ✅ API base URL correctly set to /api
  • ✅ Authentication headers properly configured

✅ Widget → Backend API Connection

Configuration:

  • API Base URL: /api (default, configurable via window.CodevChatConfig)
  • Built Location: widget/widget.js
  • Authentication: Session-based (no JWT required for visitors)
  • Endpoints Used: /api/widget/session, /api/widget/chat/send, /api/updates

Connection Flow:

  1. Widget loads via <script src="/widget/widget.js"></script>
  2. Configures API URL from window.CodevChatConfig.apiUrl or defaults to /api
  3. Makes API calls to widget-specific endpoints
  4. Backend processes with rate limiting and session management

Widget Configuration Example:

<script>
  window.CodevChatConfig = { 
    apiUrl: '/api', 
    position: 'bottom-right', 
    autoOpen: false 
  };
</script>
<script src="/widget/widget.js"></script>

✅ Backend API Structure

Main Entry Point: api/index.php

  • ✅ Fixed middleware TypeError (simplified rate limiting middleware)
  • ✅ Proper CORS configuration
  • ✅ CSRF protection for admin routes
  • ✅ Rate limiting for public endpoints

API Endpoints:

  • /api/healthz - Health check
  • /api/csrf/token - CSRF token generation
  • /api/auth/* - Authentication
  • /api/users/* - User management
  • /api/chat/* - Chat functionality
  • /api/widget/* - Widget-specific endpoints
  • /api/updates - Real-time updates
  • /api/settings/* - Settings management
  • /api/files/* - File uploads
  • /api/canned-responses/* - Canned responses
  • /api/conversation-tags/* - Tag management
  • /api/conversation-transfers/* - Transfer management

Build Process Analysis

Admin Build (npm run build:admin)

# Uses admin.vite.config.mjs
# Input: admin/src/
# Output: admin/dist/
# Base URL: /admin/

Generated Files:

  • admin/dist/index.html - Main HTML with correct asset paths
  • admin/dist/assets/index-UGK1aC64.js - Main Vue.js bundle
  • admin/dist/assets/api-BEBTEtNV.js - API client with /api base URL
  • admin/dist/assets/index-oQLmXdor.css - Styles
  • Component chunks for code splitting

Widget Build (npm run build:widget)

# Uses vite.widget.config.mjs
# Input: widget-src/
# Output: widget/
# Format: IIFE (Immediately Invoked Function Expression)

Generated Files:

  • widget/widget.js - Self-contained widget bundle
  • widget/widget.js.map - Source map
  • widget/assets/css/widget.css - Widget styles
  • widget/assets/sounds/ - Notification sounds

Connection Verification

✅ API Base URLs

  • Admin: /api (hardcoded in built JS)
  • Widget: /api (configurable, defaults to /api)
  • Backend: Serves from api/index.php

✅ Asset Paths

  • Admin CSS: /admin/assets/index-oQLmXdor.css
  • Admin JS: /admin/assets/index-UGK1aC64.js
  • Widget CSS: /widget/assets/css/widget.css
  • Widget JS: /widget/widget.js

✅ Authentication Flow

  • Admin: JWT Bearer tokens + CSRF tokens
  • Widget: Session-based (no authentication required for visitors)
  • CSRF: Generated via /api/csrf/token endpoint

Deployment Considerations

Production Setup

  1. Build both frontends:

    npm run build:admin
npm run build:widget

  2. Serve admin from /admin/:

    • admin/index.php automatically serves built files
    • Assets served from /admin/assets/

  3. Serve widget from /widget/:

    • Static files: widget/widget.js, widget/assets/
    • Embed via script tag

  4. API served from /api/:

    • All API endpoints under /api/*
    • CORS configured for cross-origin requests

Web Server Configuration

Apache (.htaccess):

RewriteEngine On

# API routes
RewriteRule ^api/(.*)$ api/index.php [QSA,L]

# Admin routes
RewriteRule ^admin/(.*)$ admin/index.php [QSA,L]

# Widget assets
RewriteRule ^widget/(.*)$ widget/$1 [L]

# Fallback to main index
RewriteRule ^(.*)$ index.php [QSA,L]

Nginx:

location /api/ {
    try_files $uri $uri/ /api/index.php?$query_string;
}

location /admin/ {
    try_files $uri $uri/ /admin/index.php?$query_string;
}

location /widget/ {
    try_files $uri $uri/ =404;
}

Testing Connections

Manual Testing

  1. Admin Interface: Visit /admin/ → should load Vue.js app
  2. API Health: Visit /api/healthz → should return JSON
  3. Widget: Include widget script → should show chat bubble
  4. CSRF Token: Visit /api/csrf/token → should return token

Automated Testing

# Run the test suite
php vendor/bin/pest --testsuite=unit
php vendor/bin/pest --testsuite=integration

# Run E2E tests
npm run e2e

Issues Fixed

  1. ✅ Admin index.php: Now properly serves built files from dist/
  2. ✅ API Middleware: Fixed TypeError in rate limiting middleware
  3. ✅ Asset Paths: Correct paths in built HTML files
  4. ✅ API Base URLs: Consistent /api base URL across all components

Recommendations

  1. Environment Configuration: Use environment variables for API base URL in production
  2. Asset Versioning: Consider adding version hashes to asset URLs for cache busting
  3. Error Handling: Add proper error boundaries in Vue.js components
  4. Monitoring: Add logging for API connection failures
  5. Security: Ensure CORS is properly configured for production domains