How to use Bower

[Stephen]

Hi

 We currently have jquery-ui.min.js in our project, but it is just in our own libs folder. I thought it would be proper to use bower to update to the latest version - so I used UI, had a lot of problems with my proxy for npm and git etc. but finally it installed the package - only to find it has added a huge amount of files! eg a new foler called bower_components, then a jquery and jquery.ui folder, then a whole bunch of .json files and finally in the ui folder there is every .js file for the jquery.ui library. 

 There is no jquery-ui.min.js. Am I supposed to compile it myself using grunt? This seems like a lot of work. Is there some documentation on how to do this in a way that is actually usable? I've read the documentation and it just says to go and install the bower package of your choice, but obviously that is not the end of the story.

 Anyway, any practical tips on how people are actually using Bower in a real project would be appreciated.

 Thanks

[Ivan Ivanov]

Hi Stephen,

Currently our bower integration doesn't include full support of all bower features. I will try to summarize the information in several points and I hope that will shed more light on the current status of the package management in AppBuilder.

1. How to change the default installation location of the bower components? 
Bower can be configured using JSON in a .bowerrc file. You can set the directory where the installed components should be saved. If no directory name is specified, it defaults to bower_components. You can find more information here. This means that if you include a .bowerrc file in the AppBuilder project, you can control the bower packages installation folder.

2. How to install only distribution files?
Bower installs the full packages which includes the source code and all dependencies. On our side we don't have control over this behavior. Usually the installation scope can be modified only by setting the ignore option in bower.json which is managed by the package authors (in this case jquery).

3. How to install jquery-ui package?
The name of the official jQuery UI package is jquery-ui which includes minified files. The bower packages repository may sometimes be unstable and in those moments you might not be able to find all bower packages through AppBuilder. In any case, if you are using AppBuilder's VS extension, you can install bower on your machine and manage your packages manually through its commands. You can also check the Grunt Launcher extension which provides a nice integration with Visual Studio and will give you the ability to run bower commands in Visual Studio. If you are using AppBuilder's Windows or In-Browser clients you can install jquery-ui by adding it as a dependency in a bower.json file and then right click on this file to install the dependencies it defines. You can use the same approach in an AppBuilder project in Visual Studio as long as you have an extension (such as the Grunt Launcher) that allows you to installs the dependencies defined within a bower.json file.

4. How to use jquery-ui package?
You can definitely use only the distribution files (for example jquery/dist/jquery.min.js, jquery-ui/jquery-ui.min.js, etc.) that the jquery-ui package adds. In Visual Studio you can exclude the source files and any other redundant files from the project or set their Build Action to None. You can find more information about jquery-ui package structure and usage here.

Generally speaking, we introduced the concept of "file ignore" in the AppBuilder clients. You can find more info about this concept in our documentation. Although it is currently fully supported only in the AppBuilder command-line interface and the AppBuilder package for Sublime Text, it will be available in all clients. This functionality will allow you to control which project files will be build within the mobile app package and should help when using bower installations as well.

I have attached a sample project demonstrating the usage of .bowerrc and bower.json. If you import my project in the AppBuilder Windows and In-Browser clients, you can right click on the bower.json file and choose to Install Dependencies. In Visual Studio you will need to install bower and Grunt Launcher in order to utilize the bower.json file to install jquery-ui as a dependency.

On a side note, keep in mind that you may need to configure the warning and error handling to ignore the the custom bower installation path when you override it. 

Please feel free to contact us if you need any further information or suggestions.

Regards,
Ivan Ivanov
Telerik

 

 

[Stephen]

Thanks Ivan, that is a great post. For some reason the jquery folder didn't have dist in it, so it looked like i had to compile it myself. Maybe I got the wrong package or something.

 

I think at this stage there is probably too much process change for our project which is already in place, we would probably need to set this sort of thing up from the start and get the whole team on board and up to speed.

 

Anyway, thanks again for your reply!