15

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 ?

Dylan
  • 9,129
  • 20
  • 96
  • 153

1 Answers1

9

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.

Jens A. Koch
  • 39,862
  • 13
  • 113
  • 141
  • Thanks, there's one thing I don't understand yet: why would I need a separate assets dependancy manager, since all the right assets seem to be downloaded/installed by composer too. Or do you mean that maybe some of the JS files depend on other packages, for example 'jQuery UI' that needs 'jQuery' ? And does this plugin download them to 'vendor' as well ? – Dylan Dec 22 '15 at 23:06
  • Separate dependency managers have the advantage to have clean configuration files. You don't have to add prefixed configuration stuff to composer.json to get the bridge working. Seperate configs, you know what goes where. PHP composer.json Assets bower... -- And yes, the assets might have dependencies as well.. in other words in might be worth to look at Bower for JS and CSS assets. -- Yes, the Composer asset plugin downloads them to the vendor folder, unless you define a custom directory or copy/move files yourself. – Jens A. Koch Dec 23 '15 at 01:16
  • I've added the combination of Bower + Grunt to the answer. – Jens A. Koch Jan 14 '16 at 13:07
  • Ya, yay, such a complete response, what I was investigating same days came to the same conclusion, no wonder you are one of the best contributors, your replies deserve always at least two votes up from a single user – – FantomX1 May 15 '20 at 14:33