Convert Laravel 5's Frontend Scaffold to Bower

Laravel 5 comes with some base templates, which import Bootstrap.js and jQuery, and a base stylesheet which imports LESS Bootstrap. If you don't like it you can instantly remove it with php artisan fresh, but for a lot of quick-start, rapid development use cases, I've absolutely loved it.

However, what if you prefer managing your frontend dependencies with Bower? It's actually very simple to keep Laravel 5's default setup and just tweak it a bit to rely on Bower. Check it out:

1. Add bower.json #

You need a bower.json file to get started. Create a file in the root of your directory with the following content:

{
  "name": "your-project"
}

2. Add .bowerrc #

By default Bower installs into /bower_components, but we want our bower dependencies in our resources/assets folder. Create a .bowerrc file in your project root that contains the following:

{
  "directory": "resources/assets/bower"
}

3. Install dependencies #

Now, assuming you have bower installed (if not, $ npm install -g bower), you can run the following commands to add jQuery and Bootstrap to your bower.json, and install them:

$ bower install jquery —save
$ bower install bootstrap —save

4. Update LESS import #

Now, we need to update our scripts to pull in the new dependencies. In resources/less/app.less, change this:

@import "bootstrap/bootstrap";

to this:

@import "../bower/bootstrap/less/bootstrap";

5. Bring in scripts #

In gulpfile.js add these lines (within the main elixir() block):

mix.scripts([
    '../assets/bower/jquery/dist/jquery.js',
    '../assets/bower/bootstrap/dist/js/bootstrap.js'
], 'public/js/vendor.js');

6. Change the template references #

In resources/views/app.blade.php, replace these lines:

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>

With this:

<script src="{{ asset('/js/vendor.js') }}"></script>

7. Clean up #

Delete the resources/assets/less/bootstrap folder.

8. Run gulp #

Now, just run gulp from the command line. It'll combine the vendor dependencies into public/js/vendor.js, it'll bring in the new versions of the bootstrap LESS into your stylesheet, and you're now ready to go.

That's it! #

You're ready! Your site should look exactly the same, but it's now backed by the power of Bower. (ba dum ching)

If you ever want to add new dependencies, you can just user bower and add javascript files to your gulpfile.js mix.scripts array, and add LESS or CSS to your app.less imports. Done!

Postscript #

What if you want to import a theme from Bootstrap? Turns out that's wildly easy. Bring in your variables.less from the theme, and just load it in app.less after you import the Bower Bootstrap. It turns out LESS variables are overwritten if new versions of them are imported later (HT @marcorivm), so you just do this in app.less:

@import "../bower/bootstrap/less/bootstrap";
@import "../bootswatch/variables";
@import "../bootswatch/bootswatch";

Comments? I'm @stauffermatt on Twitter


Tags: laravel | laravel 5 | bootstrap | bower

Matt Stauffer headshot

Hi, I'm Matt Stauffer.

I'm partner & technical director at Tighten Co.

You can find me on Twitter at @stauffermatt


Like what you're reading?

I wrote an entire 450+ page book for O'Reilly: Laravel: Up and Running.

You can order the eBook or print book today.