Integrate CloudwaysCDN With Yii2 Applications

Cloudways recently launched its own CDN service in partnership with StackPath. Known as CloudwaysCDN, it is an all new, global network with built-in WAF, DDoS protection and flat global pricing of just $1 a month.

Previously I have covered how CloudwaysCDN integration with Symfony. Today, I will demonstrate how to integrate CloudwaysCDN with Yii2 applications. Yii2 is a solid framework that is already very popular with PHP developers.

For the purpose of this article, I am assuming that you have already launched a server with a custom PHP application on Cloudways PHP Hosting. If not, I recommend you sign up for a free 3-day trial account.

First log in to the Platform and go to the Server Access page. Here you will find the the Master Credentials that you need to login to the SSH terminal. Once you are in, go to the application folder.

Install Yii2 Application

Yii2 can be installed on the Cloudways server using Composer. The good news is that Git and Composer comes preinstalled on Cloudways.

Now to install Yii2, run the following commands in the SSH terminal:

composer global require "fxp/composer-asset-plugin:^1.3.1"
composer create-project --prefer-dist yiisoft/yii2-app-basic basic

The above commands installs the asset package and the Yii2 application in the public_html folder.

Once the installation finishes, go to the Applications  tab and select the Yii2 application. Copy the application URL link and paste it in the browser’s address bar. Add /basic/web/ to the URL and hit Enter. You will see the Congratulation page of the Yii2 application.

Enable CloudwaysCDN for Yii2 Application

Go to the Application Management  tab and open the PHP application. You will see the tab for configuring CloudwaysCDN at the end of the options available in the left panel. Once the new screen opens, you will find the URL of the application to be inserted in the WEBSITE URL field. Click the Create button.

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

Few things to note at this point:

1. You can view the bandwidth consumption on this screen.
2. You can always purge old content from CDN by using the Purge button.
3. You can always remove your subscription any time.

Note: The primary domain is mapped on the applications and SSL is also enabled.

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 CDN URL in Yii2 Assets

Yii2 has some open source packages that configure CDN services for delivering assets such as CSS and JavaScript files. For the purpose of this article, I will use the blacksmoke26/yii2cdn package created by Junaid Atari .

In the first step, I will install the package in Yii2 application via the SSH terminal. Run the following command:

composer require --prefer-dist blacksmoke26/yii2cdn "*"

Once the package installation finishes, create a directory named ‘cdn’ in the root folder and install Font-awesome library in it. The folder path will be something like: cdn/font-awsome/css. Your files will exist Inside the css folder.

Now move to the config folder and open the web.php file. Add a new property cdn under components section, similar to the following code:

// ...

'components' => [

   // ...

'cdn' => [
            'class' => '\yii2cdn\Cdn',
            'baseUrl' => defined ('YII2CDN_OFFLINE')
                ? 'http://localhost/yii2/cdn'
                : '//71265-358070-raikfcquaxqncofqfm.stackpathdns.com/cdn',
            'basePath' => dirname(__DIR__, 2) . '/cdn',
            'components' => [
                'font-awesome' => [
                    'css' => [
                        [
                            // local version
                            'font-awesome.min.css',
                            // cdn version
                            '@cdn' => '//71265-358070-raikfcquaxqncofqfm.stackpathdns.com/cdn/font-awesome/css/font-awesome.min.css',
                        ]
                    ]
                ]
            ],
        ],
 // ...

],

// ...

Now, you can define two version of the files, one for the local and another for the live version:

'baseUrl' => defined ('YII2CDN_OFFLINE')
? 'http://localhost/yii2/cdn' // change to local files URL 
: '//71265-358070-raikfcquaxqncofqfm.stackpathdns.com', // please change to live files URL

Now in the view file, add the following code:

Yii::$app->cdn->get('font-awesome')->register();

Next, head over to the application and refresh the page. Check the source code in the browser (use the view source option). You could see that the CSS file is being delivered through CloudwaysCDN.

Conclusion

In this tutorial, I have demonstrated how to deliver CSS files through CloudwaysCDN. You could extend this idea for delivering JavaScript files. If you have any advice for improving the code or have a question about the CloudwaysCDN integration with Yii2, do leave a comment below.

Shahroze Nawaz

Shahroze is a PHP Community Manager at Cloudways - A Managed PHP Hosting Platform. Besides his work life, he loves movies and travelling.

Get Connected on: Twitter Community Forum