Loading javascript files from the vendors in CakePHP 3

Question

My problem is how to load .js files from the vendors folder in CakePHP 3.0. I have included twitter bootstrap via composer. The .js file is located in /vendor/twbs/bootstrap

Answer 1

Same with mutdsu's answer but with more details.

In composer.json, under scripts, add the line:

"post-update-cmd": "App\\Console\\Installer::postUpdate",

it should show something like this:

"scripts": {
    ...
    "post-update-cmd": "App\\Console\\Installer::postUpdate",
    ...
},

In src/Console/Installer.php, add these two static functions:

public static function postUpdate(Event $event) {
    $io = $event->getIO();
    $rootDir = dirname(dirname(__DIR__));
    static::copyBootstrapAssets($rootDir, $io);
}

public static function copyBootstrapAssets($dir, $io) {
    $ds = DIRECTORY_SEPARATOR;
    $bootstrapAssetsDir = $dir . $ds . 'vendor' . $ds . 'twbs' . $ds . 'bootstrap' . $ds . 'dist' . $ds;
    $bootstrapCssAssetsDir = $bootstrapAssetsDir . 'css' . $ds;
    $bootstrapJsAssetsDir = $bootstrapAssetsDir . 'js' . $ds;
    $bootstrapFontAssetsDir = $bootstrapAssetsDir . 'fonts' . $ds;
    $webrootDir = $dir . $ds . 'webroot' . $ds;
    $cssDir = $webrootDir . 'css' . $ds;
    $jsDir = $webrootDir . 'js' . $ds;
    $fontDir = $webrootDir . 'fonts' . $ds;
    if (!file_exists($cssDir) && !is_dir($cssDir)) {
        mkdir($cssDir);
    }
    if (!file_exists($jsDir) && !is_dir($jsDir)) {
        mkdir($jsDir);
    }
    if (!file_exists($fontDir) && !is_dir($fontDir)) {
        mkdir($fontDir);
    }
    $cssAssets = [
        'bootstrap.min.css',
        'bootstrap-theme.min.css',
    ];
    $jsAssets = [
        'bootstrap.min.js',
    ];
    $fontAssets = [
        'glyphicons-halflings-regular.eot',
        'glyphicons-halflings-regular.svg',
        'glyphicons-halflings-regular.ttf',
        'glyphicons-halflings-regular.woff',
        'glyphicons-halflings-regular.woff2',
    ];
    foreach ($cssAssets as $asset) {
        if (file_exists($bootstrapCssAssetsDir . $asset)) {
            copy($bootstrapCssAssetsDir . $asset, $cssDir . $asset);
            $io->write('Copied `' . $asset . '` file');
        } else {
            if (file_exists($cssDir . $asset)) {
                unlink($cssDir . $asset);
            }
        }
    }
    foreach ($jsAssets as $asset) {
        if (file_exists($bootstrapJsAssetsDir . $asset)) {
            copy($bootstrapJsAssetsDir . $asset, $jsDir . $asset);
            $io->write('Copied `' . $asset . '` file');
        } else {
            if (file_exists($jsDir . $asset)) {
                unlink($jsDir . $asset);
            }
        }
    }
    foreach ($fontAssets as $asset) {
        if (file_exists($bootstrapFontAssetsDir . $asset)) {
            copy($bootstrapFontAssetsDir . $asset, $fontDir . $asset);
            $io->write('Copied `' . $asset . '` file');
        } else {
            if (file_exists($fontDir . $asset)) {
                unlink($fontDir . $asset);
            }
        }
    }
}

If you are using git, please make sure to add these lines to your .gitignore file:

/webroot/css/bootstrap.min.css
/webroot/css/bootstrap-theme.min.css
/webroot/js/bootstrap.min.js
/webroot/fonts/glyphicons-halflings-regular.eot
/webroot/fonts/glyphicons-halflings-regular
/webroot/fonts/glyphicons-halflings-regular.ttf
/webroot/fonts/glyphicons-halflings-regular.woff
/webroot/fonts/glyphicons-halflings-regular.woff2
/webroot/fonts/glyphicons-halflings-regular.woff2