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";