How do I set up Bootstrap after downloading via Composer?

Question

I'm a beginner with Composer, so I know little about it and have little experience with web application development.

I was reading the Nettuts+ Tutorial, and have a basic question about Composer.

{
  "require": {
    "laravel/framework": "4.0.*",
    "way/generators": "dev-master",
    "twitter/bootstrap": "dev-master",
    "conarwelsh/mustache-l4": "dev-master"
  },
  "require-dev": {
    "phpunit/phpunit": "3.7.*",
    "mockery/mockery": "0.7.*"
  },
  "autoload": {
    "classmap": [
      "app/commands",
      "app/controllers",
      "app/models",
      "app/database/migrations",
      "app/database/seeds",
      "app/tests/TestCase.php"
    ]
  },
  "scripts": {
    "post-update-cmd": "php artisan optimize"
  },
  "minimum-stability": "dev"
}

If I set up my composer.json file as above, after executing composer install --dev, how do I make Bootstrap available for use in the Laravel project?

I mean, I can see the Bootstrap package is downloaded to the vendor directory. Before I only used to download Bootstrap from its official website and manually put the files in the public directory of Laravel, but what is the right way to do this here? Can I leave the Bootstrap files where they are, because I want to update the Bootstrap package to its latest version periodically?

Thanks.

score 22 · Accepted Answer · answered Jan 10 '14 at 08:07

22

We have artisan command to publish the assets(CSS, JS,..). Something like this should work.

php artisan asset:publish --path="vendor/twitter/bootstrap/bootstrap/css" bootstrap/css
php artisan asset:publish --path="vendor/twitter/bootstrap/bootstrap/js" bootstrap/js

i am not sure about the path.. But this should work.

answered Jan 10 '14 at 08:07

brainless

5,698
16
59
82

13

...or `php artisan asset:publish --path="vendor/twitter/bootstrap/dist/" bootstrap` – madpoet Mar 11 '14 at 18:46
1

Can I put this in my composser.json – briankip Aug 28 '14 at 06:51
@briankip Yes you can. Please refer to Antonio Carlos answer. Alternatively you can use gulp and sass/scss to perform the same. – brainless Aug 28 '14 at 07:45
I don't want to create a script file for composer, thought composer could run artisan commands inline, if you know what I mean, without calling a script with the commands. – briankip Aug 28 '14 at 07:53
@briankip Composer and artisan commands are not that close... They are 2 different things. Try gulp. – brainless Aug 28 '14 at 08:45

score 17 · Answer 2 · edited Nov 26 '16 at 19:20

17

As the tutorial says, you have to copy it to your public directory:

cp vendor/twitter/bootstrap/docs/assets/js/html5shiv.js public/js/html5shiv.js
cp vendor/twitter/bootstrap/docs/assets/js/bootstrap.min.js public/js/bootstrap.min.js

EDIT:

You really have copy them, because your assets files should lie in the public folder only and Composer is all about putting packages on your vendor's folder, which must not be visible to the outside world.

But you can create a Composer post-install-cmd:

{
    "scripts": {
        "post-update-cmd": "MyVendor\\MyClass::postUpdate",
    }
}

And make it copy those files for you every time an update happens. It can be written using PHP, bash or any other language you can run on your host. Docs: http://getcomposer.org/doc/articles/scripts.md.

edited Nov 26 '16 at 19:20

svarog

9,477
4
61
77

answered Oct 01 '13 at 14:17

Antonio Carlos Ribeiro

86,191
22
213
204

After using _composer update_ to get newer version of bootstrap I have to re-copy them over again right?, I thought I could get some automatic benefit from using composer. – Artisan Oct 01 '13 at 14:37
6

Why not just symbol link the vendor folder for the installed library from the public... Then your using it like a reference compared to copying. – LeviXC Mar 30 '14 at 18:26
Time and features have moved on now - composer is happy to install into public folders of many frameworks. This feature is called [composer installers](http://composer.github.io/installers/). – Jason Jul 23 '15 at 22:18

Yoga · Answer 3 · 2015-09-05T09:40:40.200

9

Just realised that php artisan asset:publish --path="vendor/twbs/bootstrap/dist/" bootstrapor php artisan vendor:publish --path="vendor/twbs/bootstrap/dist/" bootstrap do not work anymore.

What worked for me is editing the composer.json to add the following under scripts, post-update-cmd:

"scripts": {
        "post-update-cmd": [
            "php artisan optimize",
            "mkdir -p public/bootstrap",
            "cp -R vendor/twbs/bootstrap/dist/ public/bootstrap/"
        ]}

edited Sep 05 '15 at 09:40

answered Sep 05 '15 at 09:32

Yoga

1,186
1
13
24

1

Make sure you also add this to **post-install-cmd** or it will only work after **composer update** and not **composer install** – Matthew Cawley Jan 08 '16 at 19:20
1

For windows I had to use,`"if not exist public\\bootstrap mkdir public\\bootstrap", "xcopy /s /e vendor\\twbs\\bootstrap\\dist public\\bootstrap"` – ourmandave May 29 '16 at 20:24

score 3 · Answer 4 · edited May 23 '17 at 12:02

3

Just symlink the folder like said above by LeviXC:

{
    "scripts": {
      "post-update-cmd": "ln -sf vendor/twitter/bootstrap/dist/ public/vendor/bootstrap/"
    }
}

Or multiple commands:

{
    "scripts": {
        "post-update-cmd": [
           "php artisan optimize",
           "ln -sf vendor/twitter/bootstrap/dist/ public/vendor/bootstrap/"
        ]
    },
}

edited May 23 '17 at 12:02

Community

1
1

answered Aug 06 '15 at 00:52

Daniel W.

31,164
13
93
151

This doesn't work for me, it creates a symlink to a subfolder i.e. it's trying to link to `public/static/vendor/twbs/bootstrap/dist`. But if I change to use `../../vendor...` it returns an error. – DisgruntledGoat Nov 10 '15 at 15:20

score 1 · Answer 5 · answered Nov 14 '19 at 14:03

The solution with composer post update script (post-update-cmd) in Windows environment could be:

{
  "require": {
    "twbs/bootstrap": "4.3.1"
  },
  "scripts": {
    "post-update-cmd": [
      "RMDIR public\\assets\\bootstrap /S /Q" ,
      "XCOPY /E /I vendor\\twbs\\bootstrap\\dist public\\assets\\bootstrap"
    ]
  }
}

You will have the bootstrap files inside public\assets\bootstrap folder ready to be imported in HTML.

score 0 · Answer 6 · answered Mar 31 '16 at 00:28

0

This worked better for me

"scripts": {
    "post-update-cmd": [
        "mkdir -p html/vendor/",
        "ln -sfr vendor/twbs/bootstrap/dist html/vendor/bootstrap"
    ]
},

The "r" flag made the symlink relative, thus pointing to the real folder

answered Mar 31 '16 at 00:28

MauricioOtta

301
3
5

score 0 · Answer 7 · answered Apr 06 '17 at 02:14

I am new to Laravel and Bootstrap (and to using them together) and I stumbled across this thread when having the same issue. I created a new Laravel project, then added Bootstrap by running the following command from within the root directory of the Laravel project:

%composer require twbs/bootstrap

Then, in my view file, I included the following code:

<link href="css/app.css" rel="stylesheet">

It appears that composer (or bootstrap) adds app.css which includes the Bootstrap css files (which are located in the non-public vendor folder) by reference. Adding the reference to app.css worked, and I was able to use Bootstrap components in my view.

How do I set up Bootstrap after downloading via Composer?

7 Answers7

Linked