How to use jquery ui with bower?

Question

I'm experimenting with yeoman and bower.

I have created a yeoman webapp using the following command

yo webapp

I want to use jqueryui so I have installed it using bower:

bower install jquery-ui --save

This works fine, but the jQuery UI component doesn't contain a javascript file with "all" the components, it just contains a lot of javascript files, one for each component.

Should I include only the javascript files that I need? Or should I do something else before using jQuery UI?

Thanks for the tips!

Solution 1

Added jquery-ui in dependencies of bower.json (or component.json) along with jquery.

{
  …,
  "dependencies": {
    "jquery": "~1.9.1",
    "jquery-ui": "~1.10.3",
    ...
  },
  …
}

Install them:

bower install

Then, added path to jqueryui In main.js and require it:

require.config({
  paths: {
    jquery: '../components/jquery/jquery',
    jqueryui: '../components/jquery-ui/ui/jquery-ui',
    …
  },
  shim: {
    jqueryui: 'jquery',
    …
  },
  …
});
require(['app', 'jquery', 'jqueryui', 'bootstrap'], function (app, $) {
  'use strict';
   ...
});

It works for me.

Solution 2

In the latest jQuery UI bower component as we speak (v. 1.10.3), you can do the following:

1. For the CSS themes, include the following link:

   <link rel="stylesheet" href="bower_components_path/jquery-ui/themes/base/jquery-ui.css">

2. To get the most components and widgets of jQueryUI running, include the following script:

   <script src="bower_components_path/jquery-ui/ui/jquery-ui.js" ></script>

Solution 3

For reference, bower install jquery-ui --save would add the jquery-ui.js dependency to the project, but not the styles. For that I needed to add to the bower.json file an overrides section, as below

{
  ...,
  "dependencies": {
    ...,
    "jquery-ui": "^1.11.4" // already added with --save from bower install command
  },
  ...,
  "overrides": {
    "jquery-ui": {
      "main": [
        "themes/smoothness/jquery-ui.css",
        "jquery-ui.js"
      ]
    }
  }
}

References:

https://stackoverflow.com/a/27419553/4126114

https://github.com/taptapship/wiredep/issues/86

Solution 4

I would just include the files that I need or use the default custom build in the folder (which I believe has all the components) if you require everything or if it's just for experimentation.

<script src="components/jqueryui/ui/jquery-ui.custom.js"></script>

At this time bower pulls down the entire repo and since (from their website) "bower is just a package manager" anything else needed like concatenation or module loading is handled by other tools like sprockets/requirejs.

References:

Using packages with bower on homepage http://bower.io/

Dissusion about bower and pulling entire repos https://github.com/bower/bower/issues/45

View more solutions

Comments

[Johann Sonntagbauer]

great post! the idea of bower is great but it lacks definitly a way of delivering a whole package of a library (even if the project doesn't compile into a single resource). until now bower is a nightmare :)

[Matt Hughes]

That jquery-ui.custom.js does not exist anymore as of 1.10.2. I suppose you need some grunt task to build that?

[Will Shaver]

I Don't think jquery.ui.position is a requirement of jquery.ui.sortable.

[Will Shaver]

Actually, the documentation doesn't mention jquery.ui.position is required, but it most certainly is!

[gotofritz]

The OP didn't mention require.js

[gotofritz]

The OP didn't mention require.js

[plong0]

using wiredep's overrides also works nicely if you want a custom build of jquery-ui