Token CDN Delivery

Token CDN delivery distributes design token files through content delivery networks, serving tokens from edge locations geographically close to users. CDN delivery reduces latency, improves reliability, and handles traffic spikes. For global applications, CDN delivery significantly improves token loading performance.

What Is Token CDN Delivery

Token CDN delivery uses content delivery networks to serve token files rather than serving directly from origin servers. CDNs cache content at edge locations worldwide, serving requests from the nearest location to each user. This reduces network latency and offloads traffic from origin servers.

How Token CDN Delivery Works

CDN architecture:

User request → CDN Edge (nearest) → Origin (if cache miss)
                    ↓
              Cached response

CDN configuration:

// Upload tokens to CDN origin (e.g., S3)
const uploadTokens = async () => {
  await s3.upload({
    Bucket: 'tokens-origin',
    Key: `v${version}/tokens.css`,
    Body: tokenCSS,
    ContentType: 'text/css',
    CacheControl: 'public, max-age=31536000'
  });
};

CDN URL structure:

<!-- Direct from CDN -->
<link rel="stylesheet" href="https://cdn.company.com/tokens/v2.3.0/tokens.css">

<!-- With CDN subdomain -->
<link rel="stylesheet" href="https://assets.company.com/design-system/tokens.css">

Edge caching rules:

# CloudFront configuration
CacheBehaviors:
  - PathPattern: "/tokens/*"
    CachePolicyId: "CachingOptimized"
    TTL:
      DefaultTTL: 86400
      MaxTTL: 31536000
    Compress: true

Key Considerations

• Choose CDN with appropriate geographic coverage
• Configure appropriate cache TTLs
• Plan cache invalidation strategy
• Monitor CDN performance and costs
• Consider CORS for cross-origin loading
• Ensure HTTPS delivery
• Test from multiple geographic locations
• Have fallback for CDN failures

Common Questions

How should CDN caching be configured?

CDN caching configuration balances performance with freshness.

Optimal caching setup:

# Long cache with versioned files
tokens/v2.3.0/*:
  Cache-Control: public, max-age=31536000, immutable
  Compress: gzip, br

# Short cache for version manifest
tokens/latest.json:
  Cache-Control: public, max-age=300

Cache invalidation:

# Invalidate after deployment
aws cloudfront create-invalidation \
  --distribution-id E12345 \
  --paths "/tokens/v2.3.0/*"

Cache warming:

// Preload cache at edge locations after deploy
const edgeLocations = ['us-east-1', 'eu-west-1', 'ap-northeast-1'];

edgeLocations.forEach(async location => {
  await fetch(`https://cdn.company.com/tokens/v2.3.0/tokens.css`, {
    headers: { 'X-Edge-Location': location }
  });
});

How should cross-origin loading be handled?

Cross-origin token loading requires proper CORS configuration.

CDN CORS headers:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 86400

Restricted CORS:

// Only allow specific origins
const allowedOrigins = [
  'https://app.company.com',
  'https://marketing.company.com'
];

// CloudFront Lambda@Edge
exports.handler = async (event) => {
  const origin = event.Records[0].cf.request.headers.origin?.[0]?.value;

  if (allowedOrigins.includes(origin)) {
    return {
      headers: {
        'access-control-allow-origin': [{ value: origin }]
      }
    };
  }
};

Preload with crossorigin:

<link rel="preload" href="https://cdn.company.com/tokens.css" as="style" crossorigin>

How should CDN failures be handled?

Fallback strategies maintain availability during CDN issues.

Fallback to origin:

async function loadTokens() {
  try {
    await loadStylesheet('https://cdn.company.com/tokens.css');
  } catch (error) {
    console.warn('CDN failed, loading from origin');
    await loadStylesheet('https://origin.company.com/tokens.css');
  }
}

Multiple CDN providers:

const cdnUrls = [
  'https://cdn1.company.com/tokens.css',
  'https://cdn2.company.com/tokens.css',
  'https://origin.company.com/tokens.css'
];

async function loadWithFallback() {
  for (const url of cdnUrls) {
    try {
      await loadStylesheet(url);
      return;
    } catch (error) {
      continue;
    }
  }
  throw new Error('All token sources failed');
}

Service worker fallback:

// service-worker.js
self.addEventListener('fetch', event => {
  if (event.request.url.includes('/tokens/')) {
    event.respondWith(
      caches.match(event.request).then(cached => {
        return cached || fetch(event.request).then(response => {
          const clone = response.clone();
          caches.open('tokens').then(cache => cache.put(event.request, clone));
          return response;
        });
      })
    );
  }
});

Summary

Token CDN delivery distributes token files through edge locations worldwide, reducing latency and improving reliability. Configuration includes appropriate cache TTLs, CORS headers for cross-origin loading, and cache invalidation strategies. Fallback mechanisms handle CDN failures through origin fallback, multi-CDN approaches, or service worker caching. CDN delivery particularly benefits global applications where users span multiple geographic regions.