Use bootstrap with composer

Question

I'm a web newbie programmer,
I'm trying to learn from home to make my own web. I have notions of php, html, js and css.
But I've found something that is not how to solve. I'm trying to use Composer to manage Bootstrap. I installed Composer and I have run this line of code

composer require twbs/bootstrap

that has dropped a folder with files.

I do not understand is how I make html links to find the js and css files, you should do indicating the full path?

vendor / twbs / bootstrap / dist / js / bootstrap.js

Excuse me if the question is stupid but I do not know how I should continue.
Amd excuse my English, I'm learning too but by now I use google translate

Answer 1

You could use a post update command in the composer.json file:

"scripts": {         "post-update-cmd": [             "rm -rf public/bootstrap",             "cp -R vendor/twbs/bootstrap/dist public/bootstrap"         ]     } 

And then just include the javascript- and css-files like this:

<script type="text/javascript" src="{{ ROOT_URL }}bootstrap/js/bootstrap.min.js"></script> <link href="{{ ROOT_URL }}bootstrap/css/bootstrap.min.css" rel="stylesheet"> 

Answer 2

Yes, Composer downloads the dependencies by default into the vendor folder. So Bootstrap will also land in the vendor folder, which is not the correct place to reference it or include it.

composer require twbs/bootstrap ➔ vendor/twbs/bootstrap/dist/js/bootstrap.js

---

Your next step would be to write a little helper script to copy the Boostrap files you need, into your public/assets folder. You could copy the complete dist folder including sub-folders (vendor\twbs\bootstrap\dist) into public or public\assets.

Please overwrite existing files, e.g. if a file exists remove it, then copy it. This allows to easily update the files, when you need to update the Bootstrap vendor package again.

Of course, you could also just copy the files manually or create a symlink. It depends.

That gives you the following directory structure:

public  \- assets     |- css     |- js     \- fonts  \- index.html 

When the Boostrap assets are copied you can start to include them, in your index.html or template (assets\js\bootstrap.min.js, etc.).

---

Referencing: https://stackoverflow.com/a/34423601/1163786 which shows also other solutions to this problem, e.g. fxp/composer-asset-plugin, bower, grunt.

Answer 3

Unless you need customization inside bootstrap (e.g. building scss), the most simple solution is relying on a CDN (as a bonus, you get super-fast caching of assets)

So, simply call your assets like so:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Composer is a super-excellent tool for backend dependencies, but not the best one for frontend.