Skip to main content

Custom Domain Configuration

Overview​

In this module, you'll configure custom domains for both your BlazeNote frontend and backend applications. As outlined in our Getting Started guide, custom domains provide professional URLs for your serverless applications while maintaining the performance benefits of Cloudflare's global edge network.

Custom Domain Architecture:

  • Frontend Domain: blazenote-frontend.<your-domain>.<tld> → Cloudflare Pages
  • Backend Domain: blazenote-backend.<your-domain>.<tld> → Cloudflare Workers
  • SSL/TLS: Automatic certificate provisioning and management
  • DNS Management: Cloudflare-managed DNS with global propagation
  • Performance: Edge-optimized routing with CDN benefits

This setup establishes production-ready domains for your note-taking application, enabling professional deployment with custom branding while leveraging Cloudflare's security and performance features.

Prerequisites​

Before starting, ensure you have:

  • Cloudflare Account: Active account with access to dashboard
  • Deployed Applications: Both frontend (Pages) and backend (Workers) successfully deployed
  • Domain Access: Domain allocated through the workshop Enterprise zone
  • DNS Understanding: Basic familiarity with DNS record types (CNAME, A records)
Enterprise Zone Access

Workshop Participants: You have been provided with access to an Enterprise zone for this workshop. Your allocated domain will be available in your Cloudflare account dashboard under Account Home.

Steps​

1. Locate Your Allocated Domain​

First, find the domain that has been allocated to you for this workshop.

Access Account Dashboard​

  1. Log into your Cloudflare Dashboard
  2. Navigate to Account Home (main dashboard)
  3. Look for your allocated domain in the zones list

Account Home

Identify Your Domain​

Your domain format will be:

  • Pattern: <your-assigned-subdomain>.sxplabs.com
  • Example: intrepid-reactor.sxplab.com

Note down your domain: _______________________

Domain Allocation

Each workshop participant receives a unique subdomain within the Enterprise zone. This ensures isolated environments while providing full DNS control capabilities.

2. Configure Frontend Custom Domain (Pages)​

Set up a custom domain for your BlazeNote frontend application deployed on Cloudflare Pages.

Access Pages Project Settings​

  1. Navigate to Cloudflare Dashboard → Compute (Workers) → Workers & Pages
  2. Select the Pages tab
  3. Click on your blazenote-frontend project
  4. Go to Custom domains in the sidebar

custom domain

Add Frontend Domain​

  1. Click "Set up a custom domain"

  2. Enter your domain:

blazenote-frontend.<your-domain>.<tld>

Example:

blazenote-frontend.intrepid-reactor.sxplab.com
  1. Click "Continue"

add the custom domain

  1. Click "Activate domain" alt text

  2. Now you wait for the domain to be validate and DNS propagation

  3. At the same time, you may proceed to next steps

Verify Frontend Domain​

Wait for DNS propagation (2-5 minutes), then test:

terminal
# Test your frontend domain
curl -I https://blazenote-frontend.<your-domain>.<tld>

Expected response:

HTTP/2 200
server: cloudflare
content-type: text/html
...

Or visit in browser:

https://blazenote-frontend.<your-domain>.<tld>

frontend preview

3. Configure Backend Custom Domain (Workers)​

Set up a custom domain for your BlazeNote backend application deployed on Cloudflare Workers.

Access Workers Project Settings​

  1. Navigate to Cloudflare Dashboard → Compute (Workers) → Workers & Pages
  2. Select the Workers tab
  3. Click on your blazenote-backend project
  4. Go to Settings → Domains & Routes

Add Backend Domain​

1. Add Custom Domain:

  • Click Add next to "Domains & Routes"
  • Select Custom Domain

2. Enter your domain:

blazenote-backend.<your-domain>.<tld>

Example:

blazenote-backend.intrepid-reactor.sxplab.com

3. Click "Add Domain"

backend add domain

Configure via Wrangler to keep your local development environment in sync​

You can also configure custom domains through your wrangler.toml or wrangler.jsonc file as an alternative to the dashboard method.

Navigate to your backend project:

terminal
cd ~/projects/blazenote-backend

Update wrangler.toml:

wrangler.toml
name = "blazenote-backend"
main = "src/index.ts"
compatibility_date = "2024-12-30"
compatibility_flags = ["nodejs_compat"]

# Custom domain configuration
[[routes]]
pattern = "blazenote-backend.<your-domain>.<tld>"
custom_domain = true

# ... rest of your configuration

Or if using wrangler.jsonc:

wrangler.jsonc
{
  "name": "blazenote-backend",
  "main": "src/index.ts",
  "compatibility_date": "2024-12-30",
  "compatibility_flags": ["nodejs_compat"],
  "routes": [
    {
      "pattern": "blazenote-backend.<your-domain>.<tld>",
      "custom_domain": true
    }
  ]
}

Deploy with updated configuration:

terminal
npm run deploy

Verify Backend Domain​

Test your backend domain:

terminal
# Test basic connectivity
curl https://blazenote-backend.<your-domain>.<tld>

# Test API endpoints
curl https://blazenote-backend.<your-domain>.<tld>/notes

Expected response:

Hello BlazeHack!

4. Update Application Configuration​

Update your applications to use the new custom domains for seamless integration.

Update Backend CORS Settings​

Edit your backend CORS configuration:

terminal
# Navigate to your backend project
cd ~/projects/blazenote-backend

Update src/index.ts:

src/index.ts
// Define allowed origins
const allowedOrigins = new Set([
  "http://localhost:5173",                           // Local development
  "https://blazenote-frontend.<your-domain>.<tld>", // Your custom frontend domain
]);

backend src/index.ts

Deploy the updated backend:

terminal
npm run deploy

Update Frontend Environment Variables​

Critical Step

Update your frontend environment variables to use the custom backend domain.

1. Access Frontend Environment Variables:

  • Go to Cloudflare Dashboard → Workers & Pages
  • Select your blazenote-frontend project
  • Click Settings tab
  • Navigate to Environment variables

2. Update the Backend URL Variable:

Find the existing variable:

  • Variable Name: VITE_API_BASE_URL
  • Current Value: https://blazenote-backend.<your-subdomain>.workers.dev

Update to new custom domain:

  • Variable Name: VITE_API_BASE_URL
  • New Value: https://blazenote-backend.<your-domain>.<tld>

Example:

Environment Variable
# Old value
VITE_API_BASE_URL=https://blazenote-backend.<tld>>.workers.dev

# New value with custom domain
VITE_API_BASE_URL=https://blazenote-backend.<your-subdomain>.sxplab.com

##Example
VITE_API_BASE_URL=https://blazenote-backend.intrepid-reactor.sxplab.com

change variable

3. Trigger Frontend Redeploy:

IMPORTANT

You must redeploy after updating environment variables. The build process needs to include the new backend URL.

To redeploy:

  1. Go to Deployments tab in your frontend project
  2. Find your latest deployment
  3. Click View details
  4. Click Retry deployment

4. For Local Development (Optional):

Update your local .env file:

terminal
cd ~/projects/blazenote-frontend

Use vi or nano to edit .env:

.env.local
# Update for custom domain development
VITE_API_BASE_URL=https://blazenote-backend.<your-domain>.<tld>

# Optional: Keep local backend for development
# VITE_API_BASE_URL=http://localhost:8787

Domain Summary​

After completing this module, you'll have the following custom domains configured:

Frontend Application​

  • URL: https://blazenote-frontend.<your-domain>.<tld>
  • Service: Cloudflare Pages

Backend Application​

  • URL: https://blazenote-backend.<your-domain>.<tld>
  • Service: Cloudflare Workers

Integration​

  • CORS: Frontend domain whitelisted in backend
  • API Calls: Frontend configured to use custom backend domain
  • Security: Full SSL/TLS encryption between all services

Validation Checklist​

Domain Configuration​

  • Frontend custom domain accessible and loading correctly
  • Backend custom domain responding to API calls
  • DNS records properly configured and propagated
  • SSL/TLS certificates active and valid
  • Both domains showing "Proxied" status in DNS

Application Integration​

  • Frontend environment variables updated with custom backend domain
  • Frontend redeployed after environment variable changes
  • Frontend successfully making API calls to custom backend domain
  • CORS configured correctly (no console errors)
  • All application features working with custom domains
  • Performance optimization features enabled

Security Settings​

  • SSL/TLS encryption mode set to "Full (strict)"
  • HSTS enabled for both domains
  • Security headers configured appropriately
  • Auto HTTPS redirect active

Troubleshooting Guide​

Common DNS Issues​

"This site can't be reached" errors

terminal
# Check DNS propagation
nslookup blazenote-frontend.<your-domain>.<tld>
nslookup blazenote-backend.<your-domain>.<tld>

Solution:

  • Wait 5-10 minutes for DNS propagation
  • Verify CNAME records are correctly configured
  • Ensure proxy status is enabled (orange cloud)

SSL Certificate errors

terminal
# Check SSL certificate status
curl -I https://blazenote-frontend.<your-domain>.<tld>

Solution:

  • Wait for certificate provisioning (can take up to 15 minutes)
  • Verify DNS records are proxied through Cloudflare
  • Check SSL/TLS encryption mode is set to "Full (strict)"

Common Integration Issues​

CORS errors in browser console

// Error: "blocked by CORS policy"

Solution:

  • Update backend CORS configuration in src/index.ts
  • Ensure frontend domain is included in allowedOrigins
  • Redeploy backend after CORS changes

API calls failing from frontend

// Error: "Failed to fetch" or network errors

Solution:

  • Check frontend environment variables - ensure VITE_API_BASE_URL uses custom domain
  • Redeploy frontend after updating environment variables
  • Verify backend custom domain is accessible
  • Check frontend API base URL configuration
  • Ensure both domains are using HTTPS

Mixed content warnings

// Warning: "Mixed Content" in browser console

Solution:

  • Ensure all API calls use HTTPS
  • Verify SSL/TLS is properly configured
  • Check for any HTTP resources in HTTPS pages

Best Practices​

Security Recommendations​

  1. Always use HTTPS: Ensure all communications are encrypted
  2. Strict SSL/TLS: Use "Full (strict)" mode for maximum security
  3. HSTS Headers: Enable HTTP Strict Transport Security
  4. Regular Updates: Keep applications and dependencies updated

Performance Optimization​

  1. CDN Benefits: Leverage Cloudflare's global CDN
  2. Compression: Enable Brotli and Gzip compression
  3. Caching: Configure appropriate cache rules
  4. Minification: Enable automatic minification for web assets

Maintenance​

  1. Monitor Certificates: Set up alerts for certificate expiration
  2. DNS Health: Regularly verify DNS record integrity
  3. Performance Metrics: Use Cloudflare Analytics for insights
  4. Security Monitoring: Enable security events monitoring

Next Steps​

🎉 Congratulations! You've successfully configured custom domains for your BlazeNote application.

What you've accomplished:

  1. Professional custom domains for both frontend and backend
  2. Automatic SSL/TLS certificate provisioning
  3. Optimized DNS configuration with CDN benefits
  4. Secure application integration with proper CORS settings

Next up:

  1. Database Setup: Initialize D1 database with required schemas
  2. File Storage Configuration: Set up R2 buckets for file uploads
  3. Production Testing: Comprehensive testing of all application features
  4. Monitoring Setup: Configure analytics and performance monitoring

Your custom domains are now ready to serve:

  • Professional URLs: Branded domains for your note-taking application
  • SSL/TLS Security: Automatic certificate management and renewal
  • Global Performance: Edge-optimized delivery worldwide
  • Scalable Architecture: Production-ready serverless infrastructure

References​

  1. Cloudflare Pages Custom Domains
  2. Cloudflare Workers Custom Domains
  3. DNS Configuration Guide
  4. SSL/TLS Configuration
  5. Performance Optimization