Tuesday, 28 June 2016

Bootstrap Plugins in XPages Part XVII - Using Node.js, Bower, Git and SourceTree to install Bootstrap Plugins (9) - Recap

In this final blog post about installing Bootstrap Plugins in XPages Applications using Node, Git, SourceTree and bower-installer a recap of the previous blog posts. Main objective is to install only those files that are required for the Bootstrap or jQuery plugin to make it work in an XPages application and NOT the entire repository of these packages. So go beyond the basics for a clean design without entire repositories in your XPages applications!
In the following, a brief recap of the requires steps to use bower-installer for installing Bootstrap and jQuery plugins in XPages applications.

1. The basic structure of the environment 
To install Bootstrap and jQuery Plugins in XPages applications using bower-installer first a basic environment needs to be setup. bower-installer requires Node, Node Package Manager (npm) and Git. For the basic environment Node.js, Git, SourceTree and bower-installer needs to be installed on the local system.


2. Create Local Repository Directories
After the setup of the basic environment the local repository directory needs to be created. First create a local directory SourceControl, or another name of your own choice, on your system. This will be the local repository. The folder can be created, for example, in the My Documents directory. Next create in the SourceControl folder a new directory Git and a new directory Hg. Open the Git directory and create a new directory BowerForXPages. Open the BowerForXPages directory and create a sub-directory Bower4XPagesODP. The ODP (On-Disk Project) is placed in a subdirectory of the Git project directory so the .git directory will not be synced with the NSF. The names of the work- and ODP directories can be customized to your own preferences.


3. Domino Designer
In the Domino Designer first create a new XPages Application, in this example, BowerForXPages.
Next step is to setup the BowerForXPages application for Source Control in the Domino Designer. In the Domino Designer (DDE) select Team Developement - Set Up Source Control for this Application.


Enter a Project name in the next screen and deselect the option 'Use default location'. Enter as folder location the directory BowerForXPagesODP.


4. SourceTree
The next step is to create a new repository in 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.


The new repository in SourceTree has now been created.


5. Bower-installer
For the installation of bower-installer use Node and npm to install bower-installer globally. Open the Node command prompt and enter: npm install -g bower-installer.
Next create a bower.json file that only installs the files needed for the package, in this example Select2, to work in an XPages application.

{
  "name": "Bower4Xpages",
  "description": "Bower",
  "private": true,
  "dependencies": {
  "select2": "latest"
    },
  "install": {
        "path":  "bowertestodp/webcontent",    
  "sources" : {
      "select2": [
      "bower_components/select2/dist/css/select2.css",
      "bower_components/select2/dist/css/select2.min.css",
      "bower_components/select2/dist/js/select2.js",
      "bower_components/select2/dist/js/select2.min.js"
       ]
      }
   }
}

6. Create a local .gitignore file
To ensure that the bower_components directory, which is created after running bower-installer in Node, and the locally created bower.json and .gitignore files are not included in SourceTree and the On-Disk Project you can use a relatively simple solution, a local .gitignore file.
First create a .gitignore.txt file with the following lines (use Notepad or Notepad ++):
bower_components/
bower.json
.gitignore
Next save the .gitignore.txt file in the local work directory. Do not position the file in the On-Disk Project directory. Next open the Windows Command Prompt (Press “Win + X”, and select Command Prompt, or Command Prompt (Admin) to open the Command Prompt). Finally rename the .gitignore.txt file to .gitignore by typing ren .gitignore.txt .gitignore

Place the bower.json file and the .gitignore file in the BowerForXPages directory.


After running bower-installer in Node only the required files, indicated in the bower.json file, are now installed in the On-Disk Project in the directory WebContent.


The WebContent Folder in the On-Disk Project in the SourceControl directory.


With the positioning of the .gitignore file in the local Source Control directory the bower_components directory and the locally created bower.json and .gitignore files are NOT added to the repository in SourceTree.


The last step is to refesh the On-Disk Project (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). Only the selected files are installed in the XPages application!


Conclusion, there is a very simple solution to get only the files you need for the specific packages without installing the entire repository of these packages. So go beyond the basics for a clean design without entire repositories in your XPages applications!

No comments:

Post a Comment