Tuesday, 31 May 2016

Bootstrap Plugins in XPages Part XII - Using Node.js, Bower, Git and SourceTree to install Bootstrap Plugins (4)

In the previous blog posts I described the basic structure of the environment needed to install Bootstrap Plugins in an XPages using Bower, Git and SourceTree and how to setup Source Control for an XPages Application.
In this final blog post about installing Bootstrap plugins using Node and Bower the setup of SourceTree will be described, the placing (positioning) of the Bower files and the final installation of the Bootstrap plugins into the XPages Application.
Bower offers a generic, unopinionated solution to the problem of front-end package management, while exposing the package dependency model via an API that can be consumed by a more opinionated build stack. There are no system wide dependencies, no dependencies are shared between different apps, and the dependency tree is flat.
Bower runs over Git, and is package-agnostic. A packaged component can be made up of any type of asset, and use any type of transport (e.g., AMD, CommonJS, etc.).
Bower depends on Node.js and npm. Also make sure that git is installed as some bower packages require it to be fetched and installed.

Bootstrap Plugins in XPages
Part I : Bootstrap-select - A jQuery plugin that utilizes Bootstrap's dropdown.js
Part II : Bootstrap FileStyle - Customization of input file for Bootstrap
Part III : Dialog Boxes using Bootbox
Part IV : Awesome Bootstrap Checkbox
Part V : jQuery and JavaScript AMD (Asynchronous Module Definition) Fixes
Part VI : jQuery and JavaScript AMD (Asynchronous Module Definition) Fixes (2)
Part VII : MagicSuggest A Multiple Selection Combobox
Part VIII : Bootstrap Maxlength
Part IX : Using Node.js, Bower, Git and SourceTree to install Bootstrap Plugins (1)
Part X : Using Node.js, Bower, Git and SourceTree to install Bootstrap Plugins (2)

1. SourceTree 
Open SourceTree. Select File - Clone / New. Next select the Tab + Create New Repository and select as Repository Type 'Git'.


Select the folder BowerForXPages in the Destionation Path and select Create. Do NOT select the Bower4XPagesODP folder.


Select Create. The new repository in SourceTree has now been created.


The local folder should look now like this.



2. Bower Files
Final step is to place the Bower files, .bowerrc and bower.json. Packages are defined by the manifest file bower.json. This is similar to Node’s package.json or Ruby’s Gemfile. In this example I placed the Bower files in the BowerForXPages directory.


Based on the placement of the Bower files in this example the .bowerrc file looks like this.

{
    "directory":"Bower4XPagesODP/WebContent/libs"
}

In the bower.json file I added some Bootstrap Plugins which should be installed in the XPages Application. In this example I selected Bootstrap, Moment, Select2 and FontAwesome. The bower.json file looks like this. More information about creating packages and the bower.json file can be found on the Bower website.

{
    "name": "bower4xpages",
    "version": "1.7.9",
    "dependencies": {
        "bootstrap": "latest",
        "moment": "latest",
        "select2": "latest",
        "fontawesome": "latest"
    },
    "private": true
}

To install the Packages (Bootstrap Plugins) start the Node.js command prompt. Next go to the directory where the Bower files are placed. Enter 'bower install' to install the Packages.


The Packages in the bower.json file are installed in the ODP in the directory libs.



The installed Packages can also be found in SourceTree.


The last step is to refesh the ODP (right click ODP - Refresh) in the DDE (Package Explorer) and next select the option Synch with NSF (right click on ODP in the Package Explorer - Team Development - Synch with NSF).


The Packages, Bootstap Plugins, are added to the XPages Application.
In the next blog post more about using Git Bash, SourceTree, GitHub and dealing with Bower files.

No comments:

Post a Comment