Skip to main content

Deployment Configuration

With your CRUD operations implemented and tested locally, it's time to configure your application for production deployment. This section covers CORS configuration, environment variable setup, and deploying your enhanced backend to Cloudflare Workers.

Understanding Production Requirements​

What Changes for Production?​

When moving from local development to production, several configurations need to be updated:

CORS (Cross-Origin Resource Sharing):

  • Your frontend (Pages) and backend (Workers) will have different domains
  • Browsers block cross-origin requests by default
  • CORS headers tell the browser which origins are allowed

Environment Variables:

  • API URLs change from localhost to production domains
  • Configuration needs to be environment-specific
  • Secrets and sensitive data must be managed securely

Domain Configuration:

  • Frontend will use your custom domain
  • Backend will use Workers custom domain
  • API base URL needs to point to production backend

Prerequisites​

Before starting, ensure you have completed:

Gather Required Information​

You'll need these values from previous modules:

Backend Custom Domain:

  1. Go to Cloudflare Dashboard
  2. Navigate to Workers & Pages
  3. Select your blazenote-backend project
  4. Go to Settings → Triggers → Custom Domains
  5. Copy your backend custom domain (e.g., blazenote-backend.<yourdomain>.com)

npm run dev

Frontend Custom Domain:

  1. Go to Workers & Pages
  2. Select your blazenote-frontend project
  3. Go to Settings → Custom Domains
  4. Copy your frontend custom domain (e.g., blazenote-frontend.<yourdomain>.com)

npm run dev

Step 1 (OPTIONAL): Configure CORS for Production​

###Only if you have not configure CORS from the previous module/steps###

Details

Understanding CORS​

What is CORS? Cross-Origin Resource Sharing allows web applications to make requests to different domains. Without proper CORS configuration, your frontend won't be able to communicate with your backend API.

Locate CORS Configuration​

Open the main index file:

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

# Open the main configuration file
code src/index.ts

Find the CORS middleware section:

src/index.ts
const allowedOrigins = new Set([
  "http://localhost:5173",
  "https://<your-domain>.<tld>",
]);

backend src/index.ts

Update Allowed Origins​

Replace the placeholder with your actual frontend domain:

src/index.ts
// Replace this:
const allowedOrigins = new Set([
  "http://localhost:5173",
  "https://<your-domain>.<tld>",
]);

With your actual domain:

src/index.ts
const allowedOrigins = new Set([
  "http://localhost:5173",
  "https://notes.yourname.com", // Replace with your actual frontend domain
]);
warning

⚠️ Important:

  • Replace notes.yourname.com with your actual frontend custom domain
  • Keep http://localhost:5173 for local development
  • Use https:// for production domains (not http://)

Example with real domain:

src/index.ts
const allowedOrigins = new Set([
  "http://localhost:5173",
  "https://blazenote.johnsmith.dev",
]);

Understanding CORS Headers​

What the CORS middleware does:

  • Checks if the request origin is in the allowed list
  • Adds appropriate CORS headers to responses
  • Handles preflight OPTIONS requests
  • Blocks requests from unauthorized origins

Headers added:

  • Access-Control-Allow-Origin: Specifies allowed origins
  • Access-Control-Allow-Methods: Allowed HTTP methods
  • Access-Control-Allow-Headers: Allowed request headers

Save CORS Changes​

terminal
# Save the file (Ctrl+S or Cmd+S)

# Verify the changes
grep -A 5 "allowedOrigins" src/index.ts

Step 2 (OPTIONAL): Configure Environment Variables​

###Only if you have not configure custom domain from the previous module/steps###

Details

Understanding Environment Variables​

Why environment variables? They allow you to:

  • Use different configurations for different environments
  • Store sensitive information securely
  • Change settings without code changes
  • Configure API endpoints dynamically

Update Frontend Environment Configuration​

Navigate to frontend project:

terminal
cd ~/projects/blazenote-frontend

Check current configuration:

terminal
# Look for environment configuration
grep -r "VITE_API_BASE_URL" .

The environment variable should be in your frontend deployment configuration, not local files.

Configure Production API URL​

In Cloudflare Dashboard:

  1. Go to Cloudflare Dashboard
  2. Navigate to Workers & Pages
  3. Select your blazenote-frontend project
  4. Go to Settings tab
  5. Click Variables and Secrets

Navigate to variables

Add/Update the API base URL:

  1. Look for existing VITE_API_BASE_URL variable
  2. If it exists, click Edit
  3. If it doesn't exist, click Add variable

Set the variable:

  • Variable name: VITE_API_BASE_URL
  • Value: https://your-backend-domain.com (your actual backend custom domain)
  • Environment: Production

Example:

  • Variable name: VITE_API_BASE_URL
  • Value: https://blazenote-backend.intrepid-reactor.sxplab.com

change variable

Alternative: Update wrangler.toml​

If your frontend uses wrangler.toml for variables:

terminal
# Navigate to frontend project
cd ~/projects/blazenote-frontend

# Open wrangler configuration
code wrangler.toml

Update the vars section:

wrangler.toml
[vars]
VITE_API_BASE_URL = "https://api.yourname.com"  # Replace with your backend domain

Step 3: Deploy Backend Changes​

Commit Your Changes​

Navigate to backend project:

terminal
cd ~/projects/blazenote-backend

Check what changed:

terminal
git status

Stage and commit changes:

terminal
# Add all changes
git add .

# Commit with descriptive message
git commit -m "Implement CRUD operations with D1 database"

# Push to your repository
git push origin starter

npm run dev

Deploy via Wrangler​

Deploy your updated backend:

terminal
npm run deploy

Expected output:

⛅️ wrangler 3.109.2
--------------------

Total Upload: 45.67 KiB / gzip: 12.34 KiB
Uploaded blazenote-backend (1.23s)
Published blazenote-backend (3.45s)
  https://blazenote-backend.your-subdomain.workers.dev
Current Deployment ID: abc123def456

npm run dev

Verify Backend Deployment​

Test your production API:

terminal
# Test the production endpoint (replace with your domain)
curl https://api.yourname.com/notes

Expected response:

[]

Test creating a note:

terminal
curl -X POST https://api.yourname.com/notes \
  -H "Content-Type: application/json" \
  -d '{"title": "Production Test", "description": "Testing production API"}'

Expected response:

{ "message": "note created" }

npm run dev

Step 4: Deploy Frontend Changes​

Trigger Frontend Redeployment​

If you updated environment variables in Cloudflare Dashboard:

  1. Go to Workers & Pages
  2. Select your blazenote-frontend project
  3. Go to Deployments tab
  4. Find the latest deployment
  5. Click View details
  6. Click Manage deployment
  7. Click Retry deployment

Alternative: Push code changes (if using wrangler.toml):

terminal
cd ~/projects/blazenote-frontend

# If you modified wrangler.toml
git add .
git commit -m "Update API base URL for production"
git push origin starter

Verify Frontend Deployment​

Check the deployment status:

  1. Monitor the deployment in Cloudflare dashboard
  2. Wait for "Success" status
  3. Visit your frontend URL to test

Test the complete application:

  1. Open your frontend URL (e.g., https://notes.yourname.com)
  2. Try creating a new note
  3. Verify the note appears in the list
  4. Test editing and deleting notes

Step 5: Verify Complete Integration​

Test All CRUD Operations​

Create a Note:

  1. Click "New Note" or similar button
  2. Enter title and description
  3. Save the note
  4. Verify it appears in the list

Read Notes:

  1. Refresh the page
  2. Verify notes persist (loaded from database)
  3. Check that note details display correctly

Update a Note:

  1. Click edit on an existing note
  2. Modify title or description
  3. Save changes
  4. Verify updates are reflected

Delete a Note:

  1. Delete a note from the interface
  2. Verify it's removed from the list
  3. Refresh to confirm deletion persisted

Verify Database via Dashboard​

Check your data in Cloudflare:

  1. Go to Workers & Pages → D1 SQL Database
  2. Click on your "blazenote" database
  3. Go to Console tab
  4. Run query: SELECT * FROM note;
  5. Verify your notes appear in the database

npm run dev

Deployment Configuration Checklist​

Verify all items below before proceeding:

CORS Configuration​

  • Frontend custom domain added to allowedOrigins
  • CORS configuration includes localhost for development
  • Production domain uses https:// protocol
  • Backend code saved and committed

Environment Variables​

  • VITE_API_BASE_URL set to production backend domain
  • Environment variable configured in Cloudflare dashboard or wrangler.toml
  • API URL uses correct protocol (https://)
  • Frontend redeployed with new environment variables

Deployment​

  • Backend deployed successfully to Cloudflare Workers
  • Frontend redeployed with updated configuration
  • Both deployments show "Success" status
  • Production URLs are accessible

Integration Testing​

  • Can create notes via frontend interface
  • Notes persist after page refresh
  • Can edit existing notes
  • Can delete notes
  • Data visible in D1 database console

Troubleshooting Common Issues​

CORS Errors​

Issue: Browser shows CORS errors, requests blocked Solutions:

  • Verify frontend domain exactly matches CORS configuration
  • Check that CORS uses https:// for production domains
  • Ensure no typos in domain names
  • Clear browser cache and try again

API Connection Errors​

Issue: Frontend can't connect to backend API Solutions:

  • Verify VITE_API_BASE_URL is set correctly
  • Check backend deployment was successful
  • Test API endpoints directly with curl
  • Verify custom domain is properly configured

Environment Variable Issues​

Issue: Environment variables not updating Solutions:

  • Ensure frontend was redeployed after variable changes
  • Check variable is set in correct environment (Production)
  • Verify variable name matches exactly (VITE_API_BASE_URL)
  • Wait a few minutes for changes to propagate

Database Connection Issues​

Issue: API returns database errors Solutions:

  • Verify D1 database configuration in wrangler.toml
  • Check that migrations were applied to remote database
  • Test database connectivity with wrangler d1 execute
  • Ensure backend has proper database binding

Your application is live and ready for real-world use! 🎉