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-sass/assets/javascripts/ folder. I don't want to move it to webroot because then I'll break the auto-update functionality provided from composer. Any good suggestions? I don't want to duplicate files and loose the composer benefits...

Answer 1

I've found a solution! If I'm using composer why not to use it for this too, right? :)

In composer.json:

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

In src/Console/Installer.php:

public static function postUpdate(Event $event) {
    $io = $event->getIO();

    $rootDir = dirname(dirname(__DIR__));

    static::copyTwitterBootstrapFiles($rootDir, $io);
}

public static function copyTwitterBootstrapFiles($dir, $io) {

    $bootstrapJsSource = $dir . '/vendor/twbs/bootstrap-sass/assets/javascripts/bootstrap.js';
    $bootstrapJsDestination = $dir . '/webroot/js/bootstrap.js';

    if (file_exists($bootstrapJsSource)) {
        copy($bootstrapJsSource, $bootstrapJsDestination);
        $io->write('Copied `bootstrap.js` file');
    }

}

And finally if you are using git add webroot/bootstrap.js to .gitignore. The postUpdate runs after every composer update command, so if you want to run the script after every actual package update just use post-package-update instead of post-update-cmd.

Answer 2

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