Home Phase 3 GUI
Phase 3 of 6 🖱️ GUI Method

Frontend Deployment

Deploy Next.js frontend to Cloudflare Pages - 100% GUI, no terminal!

1-2 days
Beginner Level
100% GUI
🎉 Good News!
This entire phase can be done through web interfaces - Cloudflare Dashboard and GitHub. No terminal commands required!

Prerequisites

Step 1: Cloudflare Account & Domain Setup

1.1

Create Cloudflare Account

  • 1
    Visit dash.cloudflare.com/sign-up
  • 2
    Enter your email and create a password
  • 3
    Verify your email address
  • 4
    Log in to Cloudflare Dashboard
1.2

Add Your Domain to Cloudflare

  • 1
    In Cloudflare Dashboard, click "Add a site"
  • 2
    Enter your domain: he2.ai
  • 3
    Click "Add site"
  • 4
    Select plan: Choose "Free" (sufficient for most use cases)
  • 5
    Click "Continue"
  • 6
    Cloudflare will scan your existing DNS records
    Wait for scan to complete (30-60 seconds)
  • 7
    Review DNS records and click "Continue"
  • 8
    Cloudflare will show you 2 nameservers (e.g., ns1.cloudflare.com)
    Copy these - you'll need them for the next step
1.3

Update Nameservers at Domain Registrar

What are Nameservers?
Nameservers tell the internet where to find your website. By pointing them to Cloudflare, all traffic goes through Cloudflare's network first.
  • 1
    Log in to your domain registrar (GoDaddy, Namecheap, etc.)
  • 2
    Find DNS or Nameserver settings for he2.ai
  • 3
    Replace existing nameservers with Cloudflare's nameservers
  • 4
    Save changes
  • 5
    Go back to Cloudflare Dashboard and click "Done, check nameservers"
    ⏳ Nameserver propagation can take 24-48 hours, but usually completes in 1-2 hours
Pro Tip
You can continue with the next steps while waiting for nameservers to propagate. Cloudflare will send you an email when it's complete.

Step 2: Configure SSL/TLS Settings

2.1

Set Encryption Mode

  • 1
    In Cloudflare Dashboard, select your domain he2.ai
  • 2
    Click "SSL/TLS" in left sidebar
  • 3
    Select encryption mode: Full (strict)
    This ensures end-to-end encryption
  • 4
    Click "Edge Certificates" tab
  • 5
    Enable "Always Use HTTPS"
  • 6
    Minimum TLS Version: TLS 1.2
  • 7
    Enable "Automatic HTTPS Rewrites"

Step 3: Configure DNS Records

3.1

Add DNS Record for API Subdomain

  • 1
    Click "DNS" in left sidebar
  • 2
    Click "Add record"
  • 3
    Type: CNAME
  • 4
    Name: api
  • 5
    Target: Paste your ALB DNS name
    Example: helium-production-alb-123456789.us-east-1.elb.amazonaws.com
  • 6
    Proxy status: Proxied (orange cloud icon)
    This enables Cloudflare's security and performance features
  • 7
    TTL: Auto
  • 8
    Click "Save"
DNS Record Added! Your API subdomain (api.he2.ai) now points to your AWS backend through Cloudflare.

Step 4: Deploy Frontend to Cloudflare Pages

What is Cloudflare Pages?
Cloudflare Pages is a JAMstack platform for deploying static sites and full-stack applications. It's similar to Vercel but with Cloudflare's global network.
4.1

Connect GitHub Repository

  • 1
    In Cloudflare Dashboard, click "Workers & Pages" in left sidebar
  • 2
    Click "Create application"
  • 3
    Click "Pages" tab
  • 4
    Click "Connect to Git"
  • 5
    Select "GitHub"
  • 6
    Click "Connect GitHub"
  • 7
    Authorize Cloudflare to access your GitHub account
  • 8
    Select your repository (e.g., neuralarc-ai/he2)
  • 9
    Click "Begin setup"
4.2

Configure Build Settings

  • 1
    Project name: helium-frontend
  • 2
    Production branch: main
  • 3
    Framework preset: Select "Next.js"
  • 4
    Build command: cd frontend && npm install && npm run build
  • 5
    Build output directory: frontend/.next
  • 6
    Root directory: /
⚠️ 2025 Update Required!
For Next.js 14/15, you need to add the @cloudflare/next-on-pages adapter to your project. Add this to your package.json devDependencies before deploying.
4.3

Add Environment Variables

  • 1
    Scroll to "Environment variables" section
  • 2
    Click "Add variable" for each:
Variable Name Value
NEXT_PUBLIC_SUPABASE_URL https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY your-anon-key
NEXT_PUBLIC_BACKEND_URL https://api.he2.ai
NEXT_PUBLIC_URL https://he2.ai
NEXT_PUBLIC_ENV_MODE production
NODE_VERSION 20
  • 3
    Click "Save and Deploy"
    First deployment takes 3-5 minutes
🔍 Watch the Build:
You'll see a real-time build log. Watch for any errors. If the build fails, check the logs for specific error messages.
4.4

Add Custom Domain

  • 1
    After successful deployment, click "Custom domains" tab
  • 2
    Click "Set up a custom domain"
  • 3
    Enter domain: he2.ai
  • 4
    Click "Continue"
  • 5
    Cloudflare will automatically configure DNS
    Since your domain is already on Cloudflare, this is automatic!
  • 6
    Click "Activate domain"
  • 7
    Repeat for www.he2.ai
🌐 Domain Connected! Your frontend is now accessible at https://he2.ai

Step 5: Configure Security & Performance

5.1

Enable DDoS Protection

  • 1
    Click "Security" in left sidebar
  • 2
    Click "DDoS" tab
  • 3
    Verify "HTTP DDoS attack protection" is On
    This is enabled by default on all plans
  • 4
    Sensitivity: Set to Medium
5.2

Configure Rate Limiting

  • 1
    Click "Security" → "WAF"
  • 2
    Click "Rate limiting rules" tab
  • 3
    Click "Create rule"
  • 4
    Rule name: api-rate-limit
  • 5
    When incoming requests match: (http.request.uri.path contains "/api")
  • 6
    Requests: 2000
  • 7
    Period: 5 minutes
  • 8
    Action: Block
  • 9
    Click "Deploy"
5.3

Configure Caching Rules

  • 1
    Click "Caching" in left sidebar
  • 2
    Click "Cache Rules" tab
  • 3
    Click "Create rule"
  • 4
    Rule name: cache-static-assets
  • 5
    When incoming requests match: (http.request.uri.path contains "/_next/static/")
  • 6
    Cache eligibility: Eligible for cache
  • 7
    Edge TTL: 1 year
  • 8
    Click "Deploy"
Performance Boost
Caching static assets at the edge reduces load times by 40-60% for users worldwide!

Step 6: Verify Frontend Deployment

6.1

Test Your Website

  • 1
    Open browser and visit: https://he2.ai
  • 2
    Verify page loads correctly
  • 3
    Open browser DevTools (F12) → Console tab
  • 4
    Check for any errors (should be none)
  • 5
    Test user authentication (login/signup)
  • 6
    Test API calls (check Network tab in DevTools)
6.2

Check Cloudflare Analytics

  • 1
    In Cloudflare Dashboard, click "Analytics & Logs"
  • 2
    Review traffic metrics
  • 3
    Check cache hit ratio (should improve over time)
🎉 Frontend is Live! Your Next.js application is now deployed globally on Cloudflare's edge network!

Phase 3 Verification Checklist

✅ Phase 3 Complete! Your frontend is deployed and secured. Ready for Phase 4: Data & Cache Layer!
Back to Phase 2 Next: Phase 4 - Data & Cache