Configuring any CDN to deliver only one file no matter what URL has been requested

Content Delivery Networks (CDNs) are typically designed to serve static files based on specific URL paths. However, there are scenarios where you need a CDN to deliver the same file regardless of the requested URL - commonly used for Single Page Applications (SPAs) that rely on client-side routing.

Why Serve One File for All URLs?

Single Page Applications like React, Vue, or Angular apps use client-side routing. When users navigate to different URLs, the same index.html file should be served, and JavaScript handles the routing internally.

Method 1: Using CloudFlare Page Rules

CloudFlare allows you to create redirect rules that serve your main file for any URL pattern:

// CloudFlare Page Rule Configuration
URL Pattern: example.com/*
Setting: Forwarding URL ? 200 (Internal Rewrite)
Destination: https://example.com/index.html

This configuration ensures that any request to your domain serves the index.html file while preserving the original URL in the browser.

Method 2: Using _redirects File

Many CDN providers support a _redirects file for URL rewriting:

/* /index.html 200

Place this file in your site's root directory. The wildcard (*) matches any URL and serves index.html with a 200 status code.

Method 3: CloudFlare Workers

For more advanced control, use CloudFlare Workers to intercept and modify requests:

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  // Always serve index.html for any request
  const indexUrl = new URL('/index.html', request.url)
  return fetch(indexUrl)
}

Implementation Steps

To configure your CDN for single-file delivery:

1. Upload your application files to the CDN origin server
2. Configure URL rewrite rules to point all requests to index.html
3. Ensure your JavaScript application handles client-side routing
4. Test different URL paths to verify they all serve the same content

Common Use Cases

Benefits and Considerations

This approach provides several advantages: improved caching efficiency, simplified deployment, and better user experience for SPAs. However, consider SEO implications since all URLs serve the same content initially.

Conclusion

Configuring CDNs to serve one file for all URLs is essential for modern web applications. Use CloudFlare Page Rules, _redirects files, or Workers depending on your CDN provider and requirements.