Implement CDN on MODX

This tutorial shows you how to implement MaxCDN on MODx, an open source content management system and application framework.

It is assumed that you have already done the following:

Created a Pull Zone

Created an API key pair

Whitelisted your server's IP address for API access

Downloaded the MODX MaxCDN toolkit

Installation

1. Login to your MODX admin panel.
   
2. Navigate to System -> Package Management.
   
3. Under Download Extras, select Upload a package.
   
4. Upload the previously downloaded MODX MaxCDN toolkit zip file.
   
5. Under Package Management, you will see the uploaded MODX MaxCDN toolkit package. It is not installed so, to engage it, you need to select the Install button.
   

Configuration

Configuration simply continues from where you left off with the toolkit installation process.

1. Select Setup Options and a popup window will appear. Then fill in the blank fields with your API details (Company Alias, Consumer Key, Consumer Secret and CDN URL).
   
2. After the process summary appears, close it and download the log if desired.
   
3. All Done!

To ensure you implemented MaxCDN correctly, you can view the source code of any page to confirm that the CDN domain is being used for static assets instead of your origin domain. You can also use tools like pingdom or webpagetest that can give you more detailed reports on your CDN implementation status.

URL Rewrite Rules

To view rules that are being used for URL Rewrite you can navigate to Components -> MaxCDN where you get access to rules which you can edit and/or create on your own.

The default set of rules consists of the basic requirements needed to implement the CDN on most of the static resources driven by MODX.

Site URL src and href links

Replace src and href links that start with the site URL.

Input Rule:

((?:<(?:a|link|img|script)\b)[^>]*?(?:href|src)=")(?:{site_url})(.*?\.(?:jpe?g|png|gif|ttf|otf|svg|woff|xml|js|css).*?")

Output Format:

{match1}{cdn_url}{match2}

Base URL src and href links

Replace src and href links that start with the base URL.

Input Rule:

((?:<(?:a|link|img|script)\b)[^>]*?(?:href|src)=")(?:{base_url})(.*?\.(?:jpe?g|png|gif|ttf|otf|svg|woff|xml|js|css).*?")

Output Format:

{match1}{cdn_url}{match2}

Relative URL src and href links

Replace relative src and href links.

Input Rule:

((?:<(?:a|link|img|script)\b)[^>]*?(?:href|src)=")(?!(?:https?|/))(.*?\.(?:jpe?g|png|gif|ttf|otf|svg|woff|xml|js|css).*?")

Output Format:

{match1}{cdn_url}{match2}

The MODX MaxCDN toolkit is in the MODX repository. So instead of downloading it and uploading it via package manager, you can search for it within Package Management. Use the phrase "modx maxcdn toolkit" and install it from there.

Features

When applying API details in the process of installation/configuration, the same details are being used for the following two features accessible via Components -> MaxCDN:

1. Reporting
   
   
   1. Cache HITs
   2. Non-Cache Hits (MISSes)
   3. MB’s Transferred (Traffic made in MB’s)
   4. Node Distribution
2. Purge
   
   
   1. Purge all
   2. Purge the list of files (separated by a new line – each file in a separate line)

 If you have any questions about the content of this article, please feel free to reach out to the Support Team for assistance, we're available 24/7 for your convenience.