How to use Javascript or CSS files installed by Composer?

Question

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.

yivi · Accepted Answer · 2021-12-29 10:47:38Z

4

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.

edited Dec 29, 2021 at 10:47

answered Jan 29, 2021 at 7:41

yivi

48.2k18 gold badges133 silver badges157 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

B1gJ4k3 Over a year ago

I guess I was just confused as to all the files that the handlebars brought along with it. It didn't even put anything into the vendor folder. It just created a components folder that contains two separate require.js files (require.js and require-built.js) and a handlebars folder three separate handlebars files (handlebars.js, handlebars-built.js and handlebars.runtime.js). I have a little bit of experience with RequireJS, but not enough to understand why the need for so many extra files. After doing a bit more research, I think I better understand what's happening and how to use things.

Collectives™ on Stack Overflow

How to use Javascript or CSS files installed by Composer?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related