There are different ways to install the assets, here we will try to explain clearly and easily how to do it, and according to your environment you can choose the one that best suits your development.
-
With composer: This is the most traditional way some assets come to be installer via
composer.json. Bootstrap5 It provides acomposer.jsonwhich allows us to install it easily, we just have to tell theAssetBundle::classin its definition that the directory where it is located will bevendor/tbws/bootstrap. -
With asset-packagist: This is the traditional Yii2 way, here we will add the following to our composer.json.
{
"extra": {
"installer-types": [
"npm-asset"
],
"installer-paths": {
"./node_modules/{$name}": [
"type:npm-asset"
]
}
},
"repositories": [
{
"type": "composer",
"url": "https://asset-packagist.org"
}
]
}
In this way, all the packages that we add in the require section of composer.json, will be installed in the ./node_modules directory, and their download will be managed by asset-packagist, to see the available packages just go to their site, and do a search.
file: composer.json.
{
"require": {
"foxy/foxy": "^1.1@dev",
}
}
file: package.json
{
"license": "BSD-3-Clause",
"dependencies": {
"bootstrap": "^5.1.3",
"bootstrap-icons": "^1.7.0"
}
}
When you run composer install or composer update, foxy will automatically update all of your npm dependencies, in the node_modules directory, quickly and easily.
Once we have defined the assets with the AssetBundle::class and we have our assets available locally or through a CDN, we must proceed to register them in our app template and we can do it by configuring our application to install them globally or just register them in our view.
To register an asset globally we simply add the config parameters in /config/params.php.
file: /config/params.php
<?php
declare(strict_types=1);
use App\Asset\AppAsset;
return [
'yiisoft/assets' => [
'assetManager' => [
'register' => [
AppAsset::class
],
],
],
];
In this way, Yii Config will do all the work for you, and automatically your asset will be available in the app template.
Now that the asset is registered we must add in our layout in this case in ./resources/views/layout/main.php the following code:
file: ./resources/views/layout/main.php
<?php
declare(strict_types=1);
/**
* @var Yiisoft\Assets\AssetManager $assetManager
*/
// This code should only be placed in the main layout once, in our entire app.
$this->addCssFiles($assetManager->getCssFiles());
$this->addCssStrings($assetManager->getCssStrings());
$this->addJsFiles($assetManager->getJsFiles());
$this->addJsStrings($assetManager->getJsStrings());
$this->addJsVars($assetManager->getJsVars());
Let’s see the following example:
file: ./resources/views/layout/main.php
<?php
declare(strict_types=1);
use App\Asset\AppAsset;
/**
* @var Yiisoft\Assets\AssetManager $assetManager
*/
$assetManager->register(AppAsset::class);
// This code should only be placed in the main layout once, in our entire app.
$this->addCssFiles($assetManager->getCssFiles());
$this->addCssStrings($assetManager->getCssStrings());
$this->addJsFiles($assetManager->getJsFiles());
$this->addJsStrings($assetManager->getJsStrings());
$this->addJsVars($assetManager->getJsVars());
Here we do the entire process of registering our assets globally, in our main layout.
Now we want to register it only for a specific view, just add the following code to the view:
$assetManager->register(YourAsset::class);
For our next post we will explain how to customize and compress our assets.
Wilmer Arámbula.
Donate | Yii PHP Framework (yiiframework.com)
Twitter follow
