This guide will walk you through the process of integrating your Kintify CDN Distribution with various types of websites and applications.
Before you begin, make sure you have:
your-distribution-id.kintify.net)your-distribution-id.kintify.netcdn.yourdomain.comIf using a custom domain:
Add a CNAME record in your DNS settings:
Type: CNAME
Host: cdn
Value: your-distribution-id.kintify.net
TTL: 3600 (or as preferred)
Wait for DNS propagation (can take up to 24-48 hours)
Replace your static asset URLs with your CDN URL:
<!-- Before -->
<img src="/images/logo.png" alt="Logo">
<link rel="stylesheet" href="/css/styles.css">
<script src="/js/main.js"></script>
<!-- After -->
<img src="https://your-distribution-id.kintify.net/images/logo.png" alt="Logo">
<link rel="stylesheet" href="https://your-distribution-id.kintify.net/css/styles.css">
<script src="https://your-distribution-id.kintify.net/js/main.js"></script>
Create a configuration constant for your CDN URL:
// config.js
export const CDN_URL = process.env.REACT_APP_CDN_URL || 'https://your-distribution-id.kintify.net';
// Usage in components
import { CDN_URL } from './config';
function MyComponent() {
return (
<div>
<img src={`${CDN_URL}/images/hero.jpg`} alt="Hero" />
</div>
);
}
Configure the CDN in your Next.js config:
// next.config.js
module.exports = {
images: {
domains: ['your-distribution-id.kintify.net'],
loader: 'custom',
loaderFile: './lib/imageLoader.js',
},
};
// lib/imageLoader.js
export default function imageLoader({ src, width, quality }) {
return `https://your-distribution-id.kintify.net${src}?w=${width}&q=${quality || 75}`;
}
// Usage in components
import Image from 'next/image';
function MyComponent() {
return (
<Image
src="/images/product.jpg"
alt="Product"
width={500}
height={300}
/>
);
}
wp-config.php:define('WP_CONTENT_URL', 'https://your-distribution-id.kintify.net/wp-content');
define('SCRIPT_DEBUG', false);
function cdn_url($url) {
$cdn_url = 'https://your-distribution-id.kintify.net';
$site_url = get_site_url();
return str_replace($site_url, $cdn_url, $url);
}
add_filter('wp_get_attachment_url', 'cdn_url', 10, 1);
Add version parameters to prevent caching issues:
<link rel="stylesheet" href="https://your-distribution-id.kintify.net/css/styles.css?v=1.2.3">
Use environment variables to switch between development and production CDN URLs:
// .env.production
CDN_URL=https://your-distribution-id.kintify.net
// .env.development
CDN_URL=http://localhost:3000
Organize your assets in a CDN-friendly structure:
/images
/original # Original images
/thumbnails # Generated thumbnails
/css
/main # Main stylesheets
/vendor # Third-party styles
/js
/core # Core scripts
/modules # Feature modules
Verify asset loading:
// Browser Console
const img = new Image();
img.onload = () => console.log('Image loaded successfully');
img.onerror = () => console.error('Image failed to load');
img.src = 'https://your-distribution-id.kintify.net/images/test.jpg';
Check HTTP headers:
curl -I https://your-distribution-id.kintify.net/images/test.jpg
If experiencing CORS issues, ensure your distribution settings include proper headers:
<img src="https://your-distribution-id.kintify.net/images/logo.png?v=123">
After integration, monitor:
If you encounter issues:
Remember to regularly check your CDN configuration and usage statistics to ensure optimal performance and cost-effectiveness.