+LOOP Website Project - Infrastructure & Deployment Guide

Project: APLUSLOOP LLC FZ Website
Date: January 30, 2026
Document: Part 2 of 3 - Infrastructure & Deployment

1. Environment Configuration

Environment Variables Setup:

Environment File Template:

Create a .env file in the project root:

# Email Service (Resend) - Required for Forms
RESEND_API_KEY=re_b4Kzmd3T_CB91xoj49amwEFtX5rZ6FADA
RESEND_FROM_EMAIL=Newsletter <onboarding@resend.dev>
RESEND_TO_EMAIL=aplusloop@gmail.com

# AI Chatbot (GROQ) - Required for Chat Widget
GROQ_API_KEY=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

# Alternative GROQ API Key (backup)
# GROQ_API_KEY=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

# Database (Supabase) - Optional for Blog CMS
# NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
# NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key_here

Security Best Practices:

✅ Implemented Security Measures:

• Environment variables never committed to repository
• API keys stored in environment variables only
• .gitignore properly configured for sensitive files
• Client-side API calls routed through server-side endpoints
• All third-party services use secure API key authentication

🔒 Credential Management:

• Development: Store in local .env file
• Production: Configure in hosting platform dashboard
• Transfer: Use secure password manager for credential sharing
• Rotation: Update API keys periodically for enhanced security

2. Hosting & Infrastructure Options

Recommended Hosting Solutions:

Option 1: Vercel (Recommended for Next.js)

Advantages:

• ✅ Official Next.js hosting platform
• ✅ Automatic deployments from GitHub
• ✅ Built-in global CDN
• ✅ Free SSL certificates
• ✅ Serverless API routes support
• ✅ Environment variable management
• ✅ Preview deployments for branches
• ✅ Excellent performance optimization

Setup Process:

# 1. Install Vercel CLI
npm i -g vercel

# 2. Login to Vercel
vercel login

# 3. Deploy to production
vercel --prod

Dashboard Configuration:

1. Connect GitHub repository
2. Add environment variables in project settings
3. Configure build settings (automatic detection)
4. Set up custom domain
5. Enable automatic deployments

Pricing:

• Free Tier: Perfect for most needs
• Pro Tier: Advanced features if needed

Option 2: Netlify

Advantages:

• ✅ Easy drag-and-drop deployment
• ✅ Automatic HTTPS
• ✅ Form handling built-in
• ✅ Split testing capabilities
• ✅ Global CDN included
• ✅ Continuous deployment from Git

Setup Process:

1. Connect GitHub repository
2. Configure build command: npm run build
3. Set publish directory: out
4. Add environment variables
5. Deploy

Option 3: Traditional Web Hosting (cPanel/FTP)

Requirements:

• Web server: Apache 2.4+ or Nginx 1.18+
• Disk space: 5GB minimum (includes video assets)
• Bandwidth: 50GB/month recommended
• SSL certificate support
• File upload capabilities

Server Specifications:

File Permissions:

• Files: 644 (readable by all, writable by owner)
• Directories: 755 (executable and readable by all)

3. Domain & DNS Configuration

Domain Management:

Domain Information:

• Primary Domain: aplusloop.com (to be confirmed)
• Registrar: GoDaddy (assumed - client to confirm)
• DNS Management: Client to provide access

DNS Configuration:

For Vercel Deployment:

Type: A
Name: @
Value: 76.76.21.21

Type: CNAME
Name: www
Value: cname.vercel-dns.com

For Traditional Hosting:

Type: A
Name: @
Value: [Server IP Address]

Type: CNAME
Name: www
Value: aplusloop.com

SSL Certificate Setup:

Automatic SSL (Vercel/Netlify):

• SSL automatically provisioned
• Auto-renewal enabled
• No manual configuration needed

Manual SSL (Traditional Hosting):

• Recommended: Let's Encrypt (free, auto-renewing)
• Setup: Via cPanel or hosting provider interface
• Configuration: Ensure HTTPS redirect is enabled

4. Deployment Methods

Method 1: Vercel Deployment (Recommended)

Initial Setup:

# 1. Install Vercel CLI globally
npm install -g vercel

# 2. Navigate to project directory
cd /path/to/Aplus-loop

# 3. Login to Vercel account
vercel login

# 4. Deploy to production
vercel --prod

# Follow prompts to:
# - Link to existing project or create new
# - Confirm build settings
# - Set environment variables

Automatic Deployments:

• Main Branch: Auto-deploys to production
• Other Branches: Creates preview deployments
• Pull Requests: Generates preview URLs automatically

Environment Variables in Vercel:

1. Go to Project Settings → Environment Variables
2. Add all required variables from .env file
3. Select environment scope (Production/Preview/Development)
4. Save and redeploy

Method 2: FTP Deployment (Traditional Hosting)

Build Process:

# 1. Navigate to project directory
cd /path/to/Aplus-loop

# 2. Install dependencies (first time only)
npm install

# 3. Create production build
npm run build

# This generates the 'out/' directory with all static files

Automated FTP Preparation:

# Use the provided deployment script
./prepare-ftp-deployment.sh

# This script:
# - Cleans previous builds
# - Runs npm build
# - Prepares files for upload
# - Creates .htaccess for Apache servers

Manual FTP Upload (FileZilla):

1. Open FileZilla
2. Connect to Server:
   • Host: ftp.yourdomain.com
   • Username: your-ftp-username
   • Password: your-ftp-password
   • Port: 21 (FTP) or 22 (SFTP)
3. Navigate to Web Root:
   • Usually: public_html/ or www/ or htdocs/
4. Upload Contents:
   • Upload ALL contents from out/ directory
   • Maintain folder structure
   • Ensure .htaccess is included (for Apache)

Command-Line FTP Upload:

# Using lftp for recursive upload
lftp -e "mirror -R out/ /public_html/; quit" ftp://username:password@ftp.yourdomain.com

Critical Files to Upload:

/
├── index.html              → Homepage
├── favicon.ico             → Site icon
├── .htaccess              → Apache server configuration
├── _next/                 → Next.js JavaScript and CSS
│   └── static/           → Built assets
├── images/                → All images and videos
└── [all page folders]/    → All HTML pages

Method 3: Netlify Deployment

Using Netlify UI:

1. Login to Netlify
2. Click "Add new site" → "Import an existing project"
3. Connect to GitHub repository
4. Configure build settings:
   • Build command: npm run build
   • Publish directory: out
5. Add environment variables
6. Deploy

Using Netlify CLI:

# Install Netlify CLI
npm install -g netlify-cli

# Login
netlify login

# Initialize and deploy
netlify init
netlify deploy --prod

5. Server Configuration

Apache Configuration (.htaccess)

The build process automatically creates .htaccess file with:

# Enable URL rewriting
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /

  # Force HTTPS
  RewriteCond %{HTTPS} off
  RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

  # Handle trailing slashes
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^(.+)/$ /$1 [L,R=301]

  # Redirect to HTML files
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME}.html -f
  RewriteRule ^(.*)$ $1.html [L]
</IfModule>

# Cache static assets
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/jpg "access plus 1 year"
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType video/mp4 "access plus 1 year"
  ExpiresByType video/webm "access plus 1 year"
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType text/javascript "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
</IfModule>

# Security headers
<IfModule mod_headers.c>
  Header set X-Frame-Options "SAMEORIGIN"
  Header set X-XSS-Protection "1; mode=block"
  Header set X-Content-Type-Options "nosniff"
</IfModule>

# Enable compression
<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript
</IfModule>

Nginx Configuration

For Nginx servers, add to nginx.conf:

server {
    listen 80;
    server_name yourdomain.com www.yourdomain.com;
    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl http2;
    server_name yourdomain.com www.yourdomain.com;
    
    root /path/to/public_html;
    index index.html;

    # SSL Configuration
    ssl_certificate /path/to/ssl/cert.pem;
    ssl_certificate_key /path/to/ssl/key.pem;
    ssl_protocols TLSv1.2 TLSv1.3;

    # Handle trailing slashes and routing
    location / {
        try_files $uri $uri/ $uri.html =404;
    }

    # Cache static assets
    location ~* \.(jpg|jpeg|png|gif|ico|css|js|svg|woff|woff2|mp4|webm)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # Security headers
    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header X-XSS-Protection "1; mode=block" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header Referrer-Policy "strict-origin-when-cross-origin" always;

    # Enable gzip compression
    gzip on;
    gzip_vary on;
    gzip_types text/plain text/css text/xml text/javascript application/javascript application/xml+rss application/json;
}

6. Post-Deployment Verification

Deployment Checklist:

Step 1: Homepage Verification

• Visit https://yourdomain.com
• Check hero section loads with video background
• Verify navigation menu works
• Test scroll animations
• Check chatbot appears and opens

Step 2: Navigation Testing

• Technology services pages load correctly
• Marketing services pages load correctly
• About page displays company information
• Blog section functions properly
• Contact page form is accessible
• Career page application form works

Step 3: Deep Link Verification Test direct URL access:

• /about/
• /blog/
• /contact-us/
• /career/
• /DigitalTransformationServices/
• /DigitalMarketing/

Step 4: Asset Loading

• All images load correctly
• Video backgrounds play properly
• Fonts display correctly
• Icons render properly
• Color themes apply correctly (blue/pink/black)

Step 5: Form Testing

• Contact form submits successfully
• Email delivery confirms (check inbox)
• Career application accepts file uploads
• Newsletter signup processes
• Form validation works correctly

Step 6: Chatbot Testing

• Chatbot widget opens
• Language selection works
• Messages send and receive responses
• Multi-language functionality verified
• Custom language input functional

Step 7: Mobile Testing

• Site responsive on mobile devices
• Touch interactions work
• Forms usable on mobile
• Navigation menu accessible
• Videos play on mobile

Step 8: Browser Compatibility Test on:

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile browsers

Step 9: Performance Testing

• Page load time acceptable (< 3 seconds)
• Lighthouse score check
• Core Web Vitals assessment
• Mobile performance verified

Step 10: SEO Verification

• Meta descriptions present
• OpenGraph tags working
• Sitemap accessible at /sitemap.xml
• Robots.txt accessible
• Structured data validated

7. CDN & Performance Optimization

Recommended CDN Solutions:

CloudFlare (Recommended)

Benefits:

• ✅ Free tier available
• ✅ Global CDN network
• ✅ Automatic SSL
• ✅ DDoS protection
• ✅ Web Application Firewall
• ✅ Analytics and insights
• ✅ Browser caching optimization

Setup Process:

1. Create CloudFlare account
2. Add your domain
3. Update nameservers at registrar
4. Enable "Always Use HTTPS"
5. Configure caching rules
6. Enable auto-minification

Recommended Settings:

• Caching Level: Standard
• Browser Cache TTL: 4 hours
• Auto Minify: Enable for CSS, JS, HTML
• Brotli Compression: Enabled
• HTTP/2: Enabled
• HTTP/3 (QUIC): Enabled

Vercel Edge Network

If deployed on Vercel:

• ✅ Built-in global CDN
• ✅ Automatic edge caching
• ✅ 70+ global edge locations
• ✅ No additional configuration needed

Performance Optimization Checklist:

Server-Side:

• Gzip/Brotli compression enabled
• Browser caching headers configured
• Static asset caching (1 year for images/videos)
• HTTPS enabled

Asset Optimization:

• Images optimized (WebP format)
• Videos compressed (WebM + MP4)
• Critical CSS inlined
• JavaScript code splitting

Built-In Optimizations:

• Next.js automatic code optimization
• Image lazy loading
• Font optimization
• Bundle size optimization

8. Storage & Media Assets

Current Media Storage:

Supabase Storage (Currently Used):

• Purpose: Video hosting for banner backgrounds
• Example: https://rncqiauvnshqdewhhyvz.supabase.co/storage/v1/object/public/publicvideos/banneraplus.webm
• Access: Public bucket, no authentication required
• Bandwidth: Subject to Supabase limits

Alternative Storage Options:

Option 1: Host Videos on Same Server

Advantages:

• Simple management
• No third-party dependencies
• Full control

Implementation:

• Videos already included in build (/public/images/Banner/)
• Can serve directly from hosting
• Update video URLs in homepage component

Option 2: AWS S3 + CloudFront

Advantages:

• Highly scalable
• Global CDN included
• Cost-effective for large files

Setup:

1. Create S3 bucket
2. Upload video assets
3. Configure CloudFront distribution
4. Update video URLs in code

Option 3: Dedicated Video CDN

Options:

• Cloudinary: Image and video optimization service
• Bunny CDN: Affordable video streaming
• Vimeo/YouTube: Embedded video hosting

9. Monitoring & Analytics

Recommended Analytics Solutions:

Google Analytics 4 (GA4)

Setup Process:

// Add to /app/layout.tsx
import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <Script
          strategy="afterInteractive"
          src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"
        />
        <Script id="google-analytics" strategy="afterInteractive">
          {`
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', 'G-XXXXXXXXXX');
          `}
        </Script>
      </head>
      <body>{children}</body>
    </html>
  )
}

Tracking Capabilities:

• Page views
• User engagement
• Conversion tracking
• E-commerce (if implemented)
• Custom events

Vercel Analytics

If using Vercel:

npm install @vercel/analytics

// Add to /app/layout.tsx
import { Analytics } from '@vercel/analytics/react';

export default function RootLayout({ children }) {
  return (
    <>
      {children}
      <Analytics />
    </>
  )
}

Features:

• Real-time visitor tracking
• Performance monitoring
• No cookie consent required
• Privacy-focused

Uptime Monitoring:

Recommended Services:

UptimeRobot (Free)

• 5-minute intervals
• Email alerts
• 50 monitors free
• Status page option

Pingdom

• Advanced monitoring
• Performance insights
• Transaction monitoring
• Global check locations

Setup:

1. Create account
2. Add website URL
3. Configure alerts (email/SMS)
4. Set check frequency

10. Backup & Recovery Strategy

Backup Recommendations:

Code Backup:

• ✅ GitHub Repository: Automatic version control
• ✅ Commit History: Full project history available
• ✅ Branch Protection: Can enable for main branch
• ✅ Clone Capability: Easy to clone entire repository

Content Backup:

• Static Content: Backed up in Git repository
• Blog Content: Export from Supabase (if using CMS)
• Media Assets: Maintain local copies
• Database: Regular exports from Supabase

Deployment Backup:

• Pre-Deployment: Keep previous out/ folder
• Version Tagging: Tag releases in Git
• Rollback Plan: Can quickly revert to previous version

Recovery Process:

1. Identify issue
2. Revert to last known good Git commit
3. Rebuild: npm run build
4. Redeploy to hosting
5. Verify functionality

11. Continuous Integration & Deployment

GitHub Actions (Optional Enhancement)

Automated Deployment Workflow:

Create .github/workflows/deploy.yml:

name: Deploy to Production

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    
    steps:
      - uses: actions/checkout@v3
      
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '20'
          
      - name: Install dependencies
        run: npm ci
        
      - name: Build
        env:
          RESEND_API_KEY: ${{ secrets.RESEND_API_KEY }}
          RESEND_FROM_EMAIL: ${{ secrets.RESEND_FROM_EMAIL }}
          RESEND_TO_EMAIL: ${{ secrets.RESEND_TO_EMAIL }}
          GROQ_API_KEY: ${{ secrets.GROQ_API_KEY }}
        run: npm run build
        
      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v20
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.ORG_ID }}
          vercel-project-id: ${{ secrets.PROJECT_ID }}
          vercel-args: '--prod'

Benefits:

• Automatic deployment on Git push
• Build verification before deployment
• Consistent deployment process
• Deployment history tracking

12. Scaling Considerations

Current Architecture Scalability:

Static Site Advantages:

• ✅ Highly scalable by nature
• ✅ Can handle millions of requests
• ✅ Low server resource usage
• ✅ Global CDN distribution
• ✅ Fast load times worldwide

API Routes Scaling:

• Currently serverless (via Vercel) or static
• Can scale independently
• Consider rate limiting for production traffic
• Monitor API usage and costs

Database Scaling:

• Supabase handles scaling automatically
• PostgreSQL can handle high traffic
• Consider read replicas for high volume

Traffic Growth Recommendations:

For Moderate Traffic (< 100K visits/month):

• Current setup sufficient
• Vercel free tier adequate
• Standard Supabase tier

For High Traffic (100K - 1M visits/month):

• Upgrade to Vercel Pro if needed
• Implement CloudFlare CDN
• Consider caching strategies
• Monitor API rate limits

For Very High Traffic (> 1M visits/month):

• Enterprise hosting solution
• Dedicated CDN
• Load balancing
• Advanced caching strategies

Document Metadata

Part: 2 of 3
Focus: Infrastructure & Deployment
Previous: Technical Architecture
Next Document: Operations & Maintenance Guide
Prepared: January 30, 2026
Version: 1.0