Yii2: Bring the assets from your module to your view

Submitted by Peter Majmesku on Mon, 08/29/2016 - 19:34

If you want to ship assets (JavaScript, CSS files) from your Yii2 module to your view, you can do that elegant with a couple of simple steps.

1., Folder structure

We assume that your Yii2 module is located at

/yii-base-folder/modules/YOUR-YII-MODULE-FOLDER

The assets are at

/yii-base-folder/modules/YOUR-YII-MODULE-FOLDER/assets

So the JavaScript files are at

/yii-base-folder/modules/YOUR-YII-MODULE-FOLDER/assets/js
 

2., Set an alias to your assets in your Module.php in your module (/yii-base-folder/modules/YOUR-YII-MODULE-FOLDER/Module.php)

namespace app\modules\MY-MODULE;
class 
Module extends \yii\base\Module
{
    public 
$controllerNamespace 'app\modules\MY-MODULE\controllers';
    public function 
init()
    {
        
parent::init();
        
$this->setAliases([
            
'@MY-MODULE-assets' => __DIR__ '/assets'
        
]);
    }

3., Put your asset class into your assets folder to setup your "assets bundle"

We name a bunch of assets "assets bundle". Here you declare your files and make it accessible to your view.

namespace app\modules\MY-MODULE\assets;
use 
yii\web\AssetBundle;
class 
MyModuleAsset extends AssetBundle
{
    
// the alias to your assets folder in your file system
    
public $sourcePath '@yiipass-assets';
    
// finally your files.. 
    
public $css = [
      
'css/first-css-file.css',
      
'css/second-css-file.css',
    ];
    public 
$js = [
      
'js/first-js-file.js',
      
'js/second-js-file.js',
    ];
    
// that are the dependecies, for makeing your Asset bundle work with Yii2 framework
    
public $depends = [
        
'yii\web\YiiAsset',
        
'yii\bootstrap\BootstrapAsset',
    ];

4., Now you can access your assets from your view

We assume that your view's index.php file is located at /yii-base-folder/modules/YOUR-MODULE/views/ANY-VIEWS-SUBFOLDER/index.php

// that class is usually used, if you work with html in your view.
use yii\helpers\Html;
// here comes your Yii2 asset's class!
use app\modules\YOUR-MODULE\assets\YOUR-ASSER-CLASS;
// now Yii puts your css and javascript files into your view's html.
MyModuleAsset::register($this);
?>

<p>
  Some <strong>HTML</strong> my <i>friend..</i> :)
</p>

5., Conclusion

Now Yii2 puts your CSS and JavaScript files nicely into your HTML. By default the JavaScript files will be put nicely into the footer of your HTML. Also the CSS and JavaScript files will be copied into your web-accessible assets folder. The users from your webpage will not be allowed to get info about your Yii project folder structure. So the path to your JavaScript file will look like that: 

<script src="/assets/3598bbc6/js/YOUR-JavaScriptFile.js"></script

The path in your project's directory will be:
/YOUR-Yii2-PROJECT/web/assets/3598bbc6/js/YOUR-JavaScript-File.js

Also the PHP asset class will be copied from your module's folder:
/YOUR-Yii2-PROJECT/web/assets/3598bbc6/YourAssetsPhpClass.php

Don't forget to not modify the files at /YOUR-Yii2-PROJECT/web/assets/3598bbc6/ manually, because they're created automatically by the Yii2 framework.
 

6., Learn more

The "The Definitive Guide to Yii 2.0" is mostly the best first place to learn about Yii2. So you find more detailed information about the assets functionality at the assets chapter. I recommend also to read the excellent PHP class comments in the Yii2 core. Like f.e. /YOUR-Yii2-PROJECT/vendor/yiisoft/yii2/web/AssetBundle.php. Yii2 is one of the few OpenSource projects where the PHP code itself can often lead you to your goals.

Tags