Hi I'm having trouble setting up gridstackjs to php yii2 project.
i've tried setting up using below methods:
- Manual setup with CDN - faced potential conflicts related to managing the library through this approach
- Asset Bundle Setup using Yii2's AssetBundle feature
- Composer Installation - issue occured in Yii2 not being able to find or publish the GridStackJS assets.
- Yii Asset Command
- GridStackAssetConfiguration - Adjusted GridStackAsset class with the $sourcePath property.
Despite these attempts the main problem persisted in getting started as the Yii2 was unable to find or publish the GridStackJS assets, leading to an error indicating that the file or directory to be published does not exist.
I'm still searching through web trying to figure out a way to set it up, however, i'm unable to find any concreate solution to setup.
Till now my setup is as under; frontend/views/site/about.php
<?php
/** @var yii\web\View $this */
use yii\helpers\Html;
use frontend\assets\GridStackAsset;
// Register the GridStackAsset for this specific view
GridStackAsset::register($this);
$this->registerJsFile('@web/js/gridstack-init.js', ['depends' => [GridStackAsset::class]]);
$this->title = 'About';
$this->params['breadcrumbs'][] = $this->title;
?>
<!DOCTYPE html>
<html>
<head>
<script src="node_modules/gridstack/dist/gridstack-all.js"></script>
<link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet" />
<style type="text/css">
.grid-stack {
background: #FAFAD2;
}
.grid-stack-item-content {
background-color: #18BC9C;
}
</style>
<script type="text/javascript">
// var items = [
// { content: 'my first widget' }, // will default to location (0,0) and 1x1
// { w: 2, content: 'another longer widget!' } // will be placed next at (1,0) and 2x1
// ];
var grid = GridStack.init();
// grid.load(items);
</script>
</head>
<body>
<div class="grid-stack">
<div class="grid-stack-item">
<div class="grid-stack-item-content">Item 1</div>
</div>
<div class="grid-stack-item" gs-w="2">
<div class="grid-stack-item-content">Item 2 wider</div>
</div>
</div>
</body>
</html>
frontend/web/js/gridstack-init.js
const options = {
cellHeight: "11rem",
maxRow: 3,
};
const grid = GridStack.init(options);
// Add code to dynamically add widgets to the grid
// Example:
const widget1 = grid.addWidget({ w: 4, h: 2, content: '<div class="grid-stack-item-content">Widget 1</div>' });
const widget2 = grid.addWidget({ w: 4, h: 2, content: '<div class="grid-stack-item-content">Widget 2</div>' });
frontend/assets/GridStackAsset.php
<?php
namespace frontend\assets;
use yii\web\AssetBundle;
class GridStackAsset extends AssetBundle
{
public $sourcePath = '@npm/gridstack';
public $css = [
'gridstack/dist/gridstack.min.css',
];
public $js = [
'gridstack/dist/gridstack-all.js',
];
public $depends = [
'yii\web\YiiAsset', // Yii2 core assets
];
}
frontend/config/main.php
<?php
$params = array_merge(
require __DIR__ . '/../../common/config/params.php',
require __DIR__ . '/../../common/config/params-local.php',
require __DIR__ . '/params.php',
require __DIR__ . '/params-local.php'
);
return [
'id' => 'app-frontend',
'basePath' => dirname(__DIR__),
'bootstrap' => ['log'],
'controllerNamespace' => 'frontend\controllers',
'components' => [
'request' => [
'csrfParam' => '_csrf-frontend',
],
'user' => [
'identityClass' => 'common\models\User',
'enableAutoLogin' => true,
'identityCookie' => ['name' => '_identity-frontend', 'httpOnly' => true],
],
'session' => [
// this is the name of the session cookie used for login on the frontend
'name' => 'advanced-frontend',
],
'log' => [
'traceLevel' => YII_DEBUG ? 3 : 0,
'targets' => [
[
'class' => \yii\log\FileTarget::class,
'levels' => ['error', 'warning'],
],
],
],
'errorHandler' => [
'errorAction' => 'site/error',
],
'urlManager' => [
'enablePrettyUrl' => true,
'showScriptName' => false,
'rules' => [
'invoice/generate-invoice' => 'invoice/generate-invoice',
],
],
'assetManager' => [
'bundles' => [
'frontend\assets\GridStackAsset',
],
],
],
'params' => $params,
];
frontend/config/asset.php
<?php
return [
'basePath' => '@webroot', // Specify the root directory containing asset files (in this case, the web directory)
'baseUrl' => '@web',
'bundles' => [
'frontend\assets\GridStackAsset',
// Add other asset bundles if needed
],
];
composer.json
{
"name": "yiisoft/yii2-app-advanced",
"description": "Yii 2 Advanced Project Template",
"keywords": [
"yii2",
"framework",
"advanced",
"project template"
],
"homepage": "https://www.yiiframework.com/",
"type": "project",
"license": "BSD-3-Clause",
"support": {
"issues": "https://github.com/yiisoft/yii2/issues?state=open",
"forum": "https://www.yiiframework.com/forum/",
"wiki": "https://www.yiiframework.com/wiki/",
"irc": "ircs://irc.libera.chat:6697/yii",
"source": "https://github.com/yiisoft/yii2"
},
"minimum-stability": "stable",
"require": {
"php": ">=7.4.0",
"yiisoft/yii2": "^2.0.34",
"yiisoft/yii2-bootstrap5": "^2.0",
"yiisoft/yii2-symfonymailer": "~2.0.3",
"tecnickcom/tcpdf": "^6.6",
"npm-asset/gridstack": "^9.5"
},
"require-dev": {
"yiisoft/yii2-debug": "~2.1.0",
"yiisoft/yii2-gii": "~2.2.0",
"yiisoft/yii2-faker": "~2.0.0",
"phpunit/phpunit": "~9.5.0",
"codeception/codeception": "^5.0.0 || ^4.0",
"codeception/lib-innerbrowser": "^4.0 || ^3.0 || ^1.1",
"codeception/module-asserts": "^3.0 || ^1.1",
"codeception/module-yii2": "^1.1",
"codeception/module-filesystem": "^3.0 || ^2.0 || ^1.1",
"codeception/verify": "^3.0 || ^2.2",
"symfony/browser-kit": "^6.0 || >=2.7 <=4.2.4"
},
"autoload-dev": {
"psr-4": {
"app\\": "app/",
"common\\tests\\": [
"common/tests/",
"common/tests/_support"
],
"backend\\tests\\": [
"backend/tests/",
"backend/tests/_support"
],
"frontend\\tests\\": [
"frontend/tests/",
"frontend/tests/_support"
]
}
},
"config": {
"allow-plugins": {
"yiisoft/yii2-composer": true
},
"process-timeout": 1800,
"fxp-asset": {
"enabled": false
}
},
"repositories": [
{
"type": "composer",
"url": "https://asset-packagist.org"
}
]
}
In
frontend/assets/GridStackAsset.phpyou have defined a$sourcePath. This means that the asset manager tries to read the files in the@npm/gridstackdirectory and publish them to a web accessible folder which is@frontend/web/assetsby default.You have the following options:
Create a directory
assetsin@frontend/weband make it writable by php.Or copy
gridstack.min.cssandgridstack-all.jsto a web accessible directory and definebasePathandbaseUrlaccordingly. ThesourcePathdefinition must then be omitted.More information about assets you can find here: https://www.yiiframework.com/doc/guide/2.0/en/structure-assets