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

Installing the MODX MaxCDN Toolkit

  1. Login to your MODX admin panel.
  2.  

  3. Navigate to “System -> Package Management.”
  4.  

  5. Under “Download Extras,” select “Upload a package.”
  6.  

  7. Add previously downloaded “MODX MaxCDN toolkit” zip file to be uploaded.
  8.  

  9. Select it and upload.
  10.  

  11. Now under “Package Management” you will see your uploaded “MODX MaxCDN toolkit” package. It is not installed so, to engage it, you need to hit the “Install” button.

 

Configuring the MODX MaxCDN Toolkit

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

  1. Click on “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.  

  3. After process summary appears, close it and download the log if desired.
  4.  

  5. All Done!
  6. NOTE

    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, gtmetrix, webpagetest that can give you more detailed reports on your CDN implementation status.

  7. 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 basic requirements needed to implement CDN on most of the static resources driven by MODX:
    1. 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}
    2.  

    3. 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}
    4.  

    5. 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}

Important Note

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 from there.

 

Features

When applying API details in the process of installation/configuration, the same details are being used for 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 separate line)