CodeIgniter CDN integration

Introduction

A CodeIgniter CDN integration can deliver stylesheets, JavaScript, images, fonts, and other public files from edge servers closer to application visitors. Dynamic routes remain on the CodeIgniter origin while the CDN handles repeat requests for static assets.

This guide shows how to configure a dedicated CDN URL helper with an environment-based setting. The procedure was tested with CodeIgniter 4.7.4.

Before you start

  • This tutorial shows how to integrate a CDN service into a website. In this particular demo example we will use:
    • barsoom-cdn.cdnsun.org as the CDN Service Domain, and
    • https://barsoom.cdnsun.org as the website URL (i.e. barsoom.cdnsun.org is the Origin Domain).
  • Please visit the Services/How-To section to obtain your CDN Service Domain.
  • Before you take any steps please back up your files and database.
  • To integrate a CDN service on https:// website the CDN service must have SSL enabled.
  • If your website embeds custom fonts then please first enable CORS for them.
  • Before you take any steps please make sure that your CDN Service Domain is ready-to-use here.

Create CDN Static service

Please refer to Creating a CDN Static service for more details.

How to enable CDN in CodeIgniter

  1. Open the .env file in the CodeIgniter project root. Add the complete HTTPS URL of the CDN Service Domain:
    cdn.baseURL = 'https://barsoom-cdn.cdnsun.org/'

    Keep app.baseURL set to the public application URL. That setting is used for application links and routes, so it should not be replaced with the CDN Service Domain.

  2. Create app/Helpers/cdn_helper.php with a helper that joins the configured CDN Service Domain and a public asset path:
    <?php
    
    if (! function_exists('cdn_url')) {
        function cdn_url(string $path = ''): string
        {
            $cdnBaseUrl = (string) env('cdn.baseURL', '');
    
            if ($cdnBaseUrl === '') {
                return base_url($path);
            }
    
            return rtrim($cdnBaseUrl, '/') . '/' . ltrim($path, '/');
        }
    }

    When cdn.baseURL is not defined, the helper falls back to the application's base URL. This allows the same views to work in local development and production without hard-coded asset domains.

  3. Open app/Config/Autoload.php and add the helper name to the $helpers property:
    public $helpers = ['cdn'];

    If the property already contains other helpers, append 'cdn' to the existing array instead of replacing its contents.

  4. Keep static files in the CodeIgniter public/ directory and generate their URLs with cdn_url() in application views. For files under public/assets/, use:
    <link rel="stylesheet" href="<?= esc(cdn_url('assets/app.css')) ?>">
    <script defer src="<?= esc(cdn_url('assets/app.js')) ?>"></script>
    <img src="<?= esc(cdn_url('assets/logo.svg')) ?>" alt="Company logo">

    Pass paths relative to public/. The helper preserves the asset path and changes only its base URL, while application routes continue to use the origin domain.

  5. Update remaining static asset references in application views to use cdn_url(). Do not use the helper for controller routes, form actions, authentication URLs, or other dynamic application requests.
  6. Open the public site and confirm that the frontend remains styled normally and static assets load from the CDN Service Domain.
    Styled CodeIgniter application loading CSS, JavaScript, and an image through the CDN Service Domain

Verify & Troubleshoot

  • View HTML source code of your web pages to verify that you are using CDN, you should see source attribute of your images, CSS, JavaScript, etc. beginning with your CDN Service Domain.
    Frontend HTML proof that static assets are loaded from the CDN Service Domain
  • Don't see your CDN Service Domain in the source code of your web pages? If your website is using any cache plug-in/mechanism then you might want to clear/flush its cache.
  • Having trouble with custom fonts? Please refer to Using custom fonts with CDN - setting CORS for more details.
  • Still having trouble? Check your CDN URLs using our content check tool or please refer to Debugging a CDN service for more hints.

Contact Us

  ______   _    _     _  __  
 /_   _// | || | ||  | |/ // 
 `-| |,-  | || | ||  | ' //  
   | ||   | \\_/ ||  | . \\  
   |_||    \____//   |_|\_\\ 
   `-`'     `---`    `-` --`