Pages Preview Deployments & Branch Environments

In this tutorial you will learn how Cloudflare Pages generates preview deployments for every Git branch, giving each Pull Request a unique URL for testing before production. Preview deployments prevent broken code from reaching live users and give stakeholders a safe environment to review changes. DodaZIP uses preview branches to test new landing page designs before merging to main.

What Are Preview Deployments

A preview deployment is a full, live version of your site built from a non-production branch. Cloudflare Pages automatically assigns a unique URL like branch-name.project.pages.dev. The preview is identical to production in infrastructure, so tests are reliable.

flowchart LR
  A[Feature branch pushed] --> B[Cloudflare Pages build]
  B --> C[Preview URL created]
  C --> D[Team reviews]
  D --> E[Merge to main]
  E --> F[Production deploy]
  style C fill:#f90,color:#fff
  style F fill:#f90,color:#fff

How Preview URLs Work

Each branch gets a unique URL based on the branch name. You can share this URL with anyone for feedback.

// Generate preview URL from branch name
function getPreviewUrl(branchName, projectName) {
  const sanitized = branchName.replace(/[^a-zA-Z0-9-]/g, '-').toLowerCase();
  return sanitized + '.' + projectName + '.pages.dev';
}

console.log(getPreviewUrl('feat/new-homepage', 'my-site'));
// Expected output: feat-new-homepage.my-site.pages.dev

Access Control for Previews

You can deploy previews with basic authentication to keep them private during development.

// Simulate preview access check
const previewAuth = {
  'feat-redesign': { username: 'reviewer', password: 'temp-pass-123' }
};

function checkPreviewAccess(branch, user, pass) {
  const creds = previewAuth[branch];
  if (!creds) return true;
  return creds.username === user && creds.password === pass;
}

console.log(checkPreviewAccess('feat-redesign', 'reviewer', 'temp-pass-123'));
// Expected output: true
console.log(checkPreviewAccess('feat-redesign', 'hacker', 'wrong'));
// Expected output: false

// List all active preview deployments
const deployments = [
  { branch: 'main', url: 'my-site.pages.dev', status: 'live' },
  { branch: 'feat-redesign', url: 'feat-redesign.my-site.pages.dev', status: 'preview' },
  { branch: 'fix-nav', url: 'fix-nav.my-site.pages.dev', status: 'preview' }
];

const previews = deployments.filter(function(d) {
  return d.status === 'preview';
});

console.log('Active previews:', previews.length);
// Expected output: Active previews: 2

Environment-Specific Variables

Preview branches can have different environment variables than production, such as staging API endpoints.

# Preview environment variables
API_URL=https://staging-api.example.com
DEBUG=true
FEATURE_FLAG_NEW_UI=true

FAQ

Practice Questions

1. What URL pattern do preview deployments use?
2. How can you restrict access to a preview deployment?
3. Why is it important to clean up preview deployments after merging?

Summary

Cloudflare Pages preview deployments give every branch a live URL for testing and review. They mirror the production environment so you catch issues before merging. Use access controls to keep previews private during development.

Built by the developers of Doda Browser, DodaZIP, and Durga Antivirus Pro — security-first tools for the modern web.