Jason Agnew

Using a CDN with Laravel 4

January 23rd 2014, by Jason Agnew

Using a CDN for most web application is a good idea as it can seriously improve performance and lower the load on your main server. Laravel doesn’t have a standard way of implementing one as it’s a very simple thing to do.

NB: I’m assuming that you have signed up to a CDN like MaxCDN, and configured your domain to work with it.

1) Setting up a global functions file for Laravel
In this occasion we need a global function to use throughout are application. The best way to achieve this to add helpers.php file under the app folder. Once created, we need to tell composer to autoload it. Open composer.json add the following:

"autoload": {
    "classmap": [
      .....
     ],
     "files": [
         "app/helpers.php"
     ]
},

Once added, we need to tell composer to dump its autoloader. In the terminal:

composer dump-autoload

2) Lets add a function to the helpers.php
We are going to add a cdn() function in our helpers.php to be used instead of Laravels own asset(). It’s a very simple function which checks the app/config/app.php to see if there is any CDN domains listed. If there are no CDN domains in the config file it will just return using the standard asset() function. Otherwise it will try to match which CDN domain goes with the requested file type. If no file type is matched it will use the last available cdn domain. Here is the code to go in the helpers.php

function cdn( $asset ){

    //Check if we added cdn's to the config file
    if( !Config::get('app.cdn') )
        return asset( $asset );

    //Get file name & cdn's
    $cdns = Config::get('app.cdn');
    $assetName = basename( $asset );
    //remove any query string for matching
    $assetName = explode("?", $assetName);
    $assetName = $assetName[0];

    //Find the correct cdn to use
    foreach( $cdns as $cdn => $types ) {
        if( preg_match('/^.*\.(' . $types . ')$/i', $assetName) )
            return cdnPath($cdn, $asset);
    }

    //If we couldnt match a cdn, use the last in the list.
    end($cdns);
    return cdnPath( key( $cdns ) , $asset);

}

function cdnPath($cdn, $asset) {
    return  "//" . rtrim($cdn, "/") . "/" . ltrim( $asset, "/");
}

3) Add your cdn domain into the app.php
Open your app/config/app.php or the config file related your environment. In this example I have 3 domains for the CDN:

cdn.bigbitecreative.com
cdn2.bigbitecreative.com
cdn3.bigbitecreative.com

I want to use the first domain for JavaScript, CSS & fonts (css|js|eot|woff|ttf). The second I intend to use it for images (jpg|jpeg|png|gif|svg). And the third domain is a fallback for any file that don’t match the extensions above. Here is an example of the app.php:

'cdn' => array(
        "cdn.bigbitecreative.com" => "css|js|eot|woff|ttf",
        "cdn2.bigbitecreative.com" => "jpg|jpeg|png|gif|svg",
        "cdn3.bigbitecreative.com" => "",
)

4) Use the cdn() function in your views
Now we have everything set up we can replace the asset() function in our views with the new cdn() function. For example:

<link href="{{ cdn( "/assets/css/master.min.css" ) }}" rel="stylesheet">

This is one of many ways to add a CDN to Laravel, if you have any questions please get in touch.

Share this post: Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedIn
  • Ronburgundyy

    Thanks for the tutorial!