Integrate CloudwaysCDN with Laravel Applications

With the recent release of Laravel 5.5 and Laravel Horizon, the Laravel ecosystem has reached a whole new level of maturity. In effect, Laravel has become a great option for PHP projects.  the whole new level.

Cloudways facilitates Laravel developers in launching their projects without worrying about the hassles of server management. In addition, with the optimized stack that emphasizes performance, Cloudways ensures great speed for Laravel applications.

Continuing the tradition, Cloudways has recently launched a Content Delivery System (CDN) to help the users provide a better UX their Laravel projects. In this article, I will demonstrate the process of implementing Laravel CDN.

For the purpose of this tutorial, I assume that you already have a Cloudways server with the Laravel application installed on it. If this is not the case, here is where to sign up for a free trial account.

Let’s get started.

Map Your domain

Now that you have the server and application, simply use the Cloudways Platform to map your domain because this is an essential requirement for using the CloudwaysCDN.

To do that, login to the Cloudways Platform. Go to the Applications tab and click on Domain Management. Add your primary domain here and click Save.

Enable SSL Certificate on the App

CloudwaysCDN requires a secure connection for data transmission. Therefore, you need to enable an SSL certificate on your application. You can easily do it for free at the Cloudways Platform. Simply Click SSL Certificates in the Application Management options. Insert your domain URL and create the certificate.

Enable CloudwaysCDN for the Laravel Application

Now that your domain is mapped, click the CloudwaysCDN option available at the end of the Application Management options. When you click the tab, you will see the CDN configuration screen. Here you will find the URL of the application to be inserted in the WEBSITE URL field and click the Create button.

Next, you will get the newly generated URL for the Laravel application:

Few things to note here:

1. You can view the bandwidth usage on this screen.
2. You can purge old content from the CDN cache using the Purge button.
3. You can remove your subscription anytime.

Get Ready for Core Web Vitals Update

Ebook to Speed Up Your Website Before You Start Losing Traffic.

I agree to the Cloudways Terms of Service & Privacy Policy

Download Now

Thank You

Your list is on it’s Way to Your Inbox.

Integrate CloudwaysCDN with Laravel Application

To implement Laravel CDN, create a global function which will be used throughout the application. For this, add a helpers.php file in the app folder. Place the following code in the file:

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, "/");

}

This is a very simple function which checks if there are any CDN domains listed in the config file. If there are no CDN domains, it will just return the standard asset() function. Otherwise, it will use the CDN domain.

Now to use this function, edit the composer.json file and add the following code snippet:

"autoload": {

   "classmap": [

     .....

    ],

    "files": [

        "app/helpers.php"

    ]

},

Now, tell Composer to dump its autoloader. Type the following command in the terminal.

composer dump-autoload

Now, open app/config/app.php or the config file for your environment. Add your CDN domain into the app.php,  just like the below example:

   'cdn' => [

       "77728-356013-raikfcquaxqncofqfm.stackpathdns.com" => "css|js|eot|woff|ttf,jpg|jpeg|png|gif|svg"

],

That’s it. Everything is setup.  Simply replace the asset() function in the views with the new cdn() function. For example, I have used the following code to link the bootstrap.css file

<link rel="stylesheet" href="{{ cdn('css/bootstrap.css') }}">

Example of using CDN for image:

<img class="img-responsive" src="{{cdn('images/iphone.png')}}" alt="iphone">

Replace all the asset() functions with cdn() in your files and improve the performance of your application dramatically.

Conclusion

Cloudways have partnered with StackPath (formerly known as MaxCDN), and provide one-click activation for the CloudwaysCDN. Note that, for a single website, the monthly subscription costs $1 per 25GB of bandwidth.

Also, I would like to give a shoutout to Jason Agnew for giving awesome tips for integrating CloudwaysCDN with Laravel applications.

Saquib Rizwan

Saquib is a PHP Community Expert at Cloudways - A Managed PHP Hosting Cloud Platform. He is well versed in PHP and regularly contributes to open source projects. For fun, he enjoys gaming, movies and hanging out with friends.

Get Connected on: Twitter Community Forum