How to copy the CSS and JS files in vendor folder of composer to public?

Question

I'm just starting to learn several PHP frameworks. The examples I tried all use composer, which I have not used before, so things are not exactly clear to me yet.

I specified some JS and CSS libraries in composer.json and ran composer install. Now these libraries are added to the vendor folder.

Now how am I supposed to use the JS and CSS files that are in those folders, for example bootstrap/dist/css/bootstrap.min.css ? The examples I tried either just have a copy in the public/css folder or use a remote link, like <link href="//netdna.bootstrapcdn.com/bootswatch/2.3.1/united/bootstrap.min.css" rel="stylesheet"> in a volt-file.

For some reason I don't like remote links like these in my application (I'm afraid they could be 'down' some day). But the other option is not very beautiful as well, I think, since I still have to pick the right files to copy from vendor to public.

Isn't there an 'automatic' way to do this ? Or maybe by specifying it into a controller, which then copies the files it into public ?

Answer 1

Composer was written to fetch PHP dependencies. It doesn't play well with other web assets, like CSS or JS files.

Composer Asset Plugin

To address the problem of fetching assets a Composer Asset Plugin was developed by François Pluchino (fxp). It provides a NPM/Bower dependency manager for Composer. Its a bridge to these dependency managers and will fetch the stuff into the vendor folder.

Keep in mind that you can always use Bower or NPM directly. Fetch your PHP dependencies with Composer defined in composer.json. Fetch your assets with Bower defined in bower.json. It might be a cleaner approach.

Documentation - Packagist

You might require it from the CLI: composer require fxp/composer-asset-plugin

For example, to fetch the assets "Twitters Bootstrap" and "Jquery":

{
    "require": {
        "bower-asset/bootstrap":     "dev-master",
        "bower-asset/jquery-2.1.0":  "2.1.0"
    }
}

Some frameworks provide custom handlers for assets, mainly to support their individual folder layout and copy things into the correct places from the vendor folder. I don't know if Phalcon has something to fetch assets.

Isn't there an 'automatic' way to do this ? Or maybe by specifying it into a controller, which then copies the files it into public ?

Copying assets from the vendor folder into the correct spot in your application layout is another story.

There is no automatic way of doing this. You have to provide the mechanism yourself.

For instance, you might alter the installation path from vendor to public/assets or something, see https://github.com/francoispluchino/composer-asset-plugin/blob/master/Resources/doc/index.md#define-a-custom-directory-for-the-assets-installation

The plugin doesn't copy things around.

Bower + Grunt (brief: fetch assets with Bower, copy stuff around with Grunt)

The closest to "specifying a controller" would be to setup a Grunt task to copy only relevant stuff fetch with Bower from web/assets/vendor to web/assets/appfolder.

In other words: not even a JS package manager like Bower provides automatic copying of main API files. Bower would fetch the latest jQuery version into a defined vendor folder, but it won't automatically copy jquery.min.js into web/assets/js/jquery.min.js. You need a task on top of it.