How to use Javascript or CSS files installed by Composer?

How do I actually use the frontend files that Composer installs? Specifically JavaScript. I’ve been able to use a PHP file previously, but JavaScript files are breaking my brain…

I’ve installed Composer and used it to install a package (Handlebars, specifically). Everything looks like it should. I’ve got a handlebars folder in my vendor folder and it created a “components” folder with some JavaScript files in it, so I know things are there. I’ve tried just doing this:

<script type="text/text/javascript"
    src="/components/handlebars/handlebars.js"></script>`

But that doesn’t seem like what I should be doing and doesn’t seem to work anyway. I see there’s some require files in there as well, but I’ve tried referencing them with no luck.

I would hope that just including require __DIR__ . '/vendor/autoload.php'; would do it, but that seems to just bring in the backend stuff.

It seems that Bower may be better suited for frontend stuff like this, but I’m already using Composer for another part of the project, so it would be nice to not have to use two different package managers in one project.

Answer

If you are using any kind of front-end buildchain, you can simply point the build-chain to the location of your JS package in vendor, and only put the “built” assets in your web accessible directory (called public in many projects).

If you are not, you’ll have to simply either copy or symlink the JS (and/or CSS) dependencies from its vendor path to one that’s web accessible. You could automate the process by having a script section in your composer.json. Something along the lines of this (made up, adjust to your actual needs):

"scripts": {
    "copyHandlebars": [
        "cp vendor/handlebars/dist/css/handlebars.css public/assets/handlebars.css",
        "cp vendor/handlebars/dist/js/handlebars.js public/assets/handlebars.js"
    ],
    "post-update-cmd": [
        "@copyHandlebars"
    ],
    "post-install-cmd": [
        "@copyHandlebars"
    ]
}

Composer is mainly a PHP dependency manager, and while you can use it to install some frontend packages, usually you’ll be better served by a manager build specifically for frontend. As soon as your project reaches a minimum level of complexity, separating the needs of front and back is usually good, since front will have more specific and appropriate tools both to manage dependencies and to build assets.