In the next blog posts I will show how Bower can be used to install Bootstrap Plugins in XPages applications. This is not new and previously described by others but it should not be missing in this series. My final conclusion about Bower will probably astonish many people. In this blog post I will describe the basic structure of the environment needed to install Bootstrap Plugins in an XPages Application using Bower. Bower requires node, npm (Node Package Manager) and Git, so we start with installing Node.js and Git.
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
Step 1 - Install Node.js
Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.
Download Node.js and install Node.js on your system.
Step 2 - Install Git
Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.
Git is easy to learn and has a tiny footprint with lightning fast performance. It outclasses SCM tools like Subversion, CVS, Perforce, and ClearCase with features like cheap local branching, convenient staging areas, and multiple workflows.
Download Git and install Git on your system.
Step 3 - Install SourceTree
SourceTree is a free Git & Mercurial Client for Windows or Mac. Use Source Tree to manage all your repositories, hosted or local, through SourceTree simple interface. Source Tree will be used for the association with the ODP (On Disk Project) of the new NSF (XPages Application).
Download SourceTree and install SourceTree on your system.
Step 4 - Install Bower
Keeping track of all the packages and make sure they are up to date (or set to the specific versions you need) is tricky. Bower to the rescue! Bower can manage components that contain HTML, CSS, JavaScript, fonts or even image files. Bower doesn’t concatenate or minify code or do anything else - it just installs the right versions of the packages you need and their dependencies.
To get started, Bower works by fetching and installing packages from all over, taking care of hunting, finding, downloading, and saving the stuff you’re looking for. Bower keeps track of these packages in a manifest file, bower.json. How you use packages is up to you. Bower provides hooks to facilitate using packages in your tools and workflows.
Bower is optimized for the front-end. If multiple packages depend on a package - jQuery for example Bower will download jQuery just once. This is known as a flat dependency graph and it helps reduce page load.
1. Open the Node.js Command Prompt
2. Enter: npm install -g bower
Step 5 - Create Bower files
To be able to run Bower there are two files required, bower.json and .bowerrc. When using multiple packages within an XPages Application it’s often a good idea to list these packages in a bower.json file. This will allow to install and update multiple packages with a single command.
These files can easily be created using Notepad or Notepad++.
Below an example of a bower.json file:
{
"name": "bootstrap4xpages",
"version": "1.7.9",
"dependencies": {
"bootstrap": "latest",
"moment": "latest",
"select2": "latest",
"fontawesome": "latest"
},
"private": true
}
Example of a .bowerrc file
{
"directory":"nameofyournsf/WebContent/libs"
}
With the installation of Node.js, Git, SourceTree and Bower the basic environment we need is ready. In the next blog post I will explain in detail the manner in which Bootstrap Plugins, as Select2, can be installed in an XPages Application using Bower.