ProcessWire CDN Integration

Introduction

A ProcessWire CDN integration can improve delivery of stylesheets, JavaScript, managed images, and other static files by serving them from your CDN Service Domain instead of directly from the origin server. This can reduce latency for visitors and offload static traffic from the origin.

This guide shows how to configure ProcessWire's native URL mapping with the Config::setUrl() method and Origin Pull. The procedure was tested on ProcessWire 3.0.259 and does not require an additional module.

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 ProcessWire

  1. Connect to the server hosting ProcessWire and open /site/ready.php. ProcessWire loads this file after its API is ready, which makes it suitable for changing public URL paths. If the file does not exist, create it in the site directory.
  2. Add the following code. Replace the example domain with your CDN Service Domain. Preserve the paths after the domain and keep the trailing slashes. 
    <?php namespace ProcessWire;

if(!defined('PROCESSWIRE')) die();

if($page->template != 'admin')
{
    $config->setUrl('templates', 'https://barsoom-cdn.cdnsun.org/site/templates/');
    $config->setUrl('files', 'https://barsoom-cdn.cdnsun.org/site/assets/files/');
}

    The templates URL covers resources referenced through ProcessWire's template URL, such as stylesheets and JavaScript. The files URL covers files and generated image sizes managed by ProcessWire. The admin condition keeps back-end resources on the website domain.

    This example assumes that the CDN origin points to the ProcessWire website root. If your CDN origin points to a subdirectory, adjust the paths accordingly. See the ProcessWire Config::setUrl() documentation for details about URL mapping.

  3. Make sure templates build public asset URLs through the ProcessWire API. The exact filenames depend on the active site profile. For example: 
    <link rel="stylesheet" href="<? echo $config->urls->templates; ?>styles/site.css" />
<script src="<? echo $config->urls->templates; ?>scripts/site.js" defer></script>
<img src="<? echo $page->feature_image->url; ?>" alt="" />

    Hard-coded origin URLs are not automatically rewritten. Files remain on the origin server, and the CDN retrieves them as needed.

  4. Save /site/ready.php. Sign in to ProcessWire Admin and edit the page as usual. Existing managed images do not need to be moved or uploaded again. Click Save after making changes.

    Images can continue to use the origin URL inside the editor. ProcessWire applies the configured file URL when rendering the public site.

    ProcessWire page editor showing the Barsoom content and its managed feature image
  5. Open the public site and confirm that the frontend remains styled normally and that template assets and managed images load from the CDN Service Domain.
    Styled Barsoom ProcessWire frontend with template assets and a managed image delivered 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

  _____      ___     __   __  
 |__  //    / _ \\   \ \\/ // 
   / //    | / \ ||   \   //  
  / //__   | \_/ ||   / . \\  
 /_____||   \___//   /_//\_\\ 
 `-----`    `---`    `-`  --`