elstar IT

Yesterday I read the blog post by Keith Strickland about CSJS Workflow, where he mentioned Bower. I heard the name  frequently when I was exploring the modern web development frameworks, like AngularJS and NodeJS. So I started to investigate, what is Bower and how it can help me by managing the frameworks in my (XPages) projects.

 

What is Bower

[dropshadowbox align=”none” effect=”lifted-both” width=”400px” height=”” background_color=”#ffffff” border_width=”1″ border_color=”#dddddd” ]Bower is a package manager for the web that is built by Twitter.[/dropshadowbox]

 

Why use Bower?

• If you are tired of going to find every package you want, download, and drag them to your project every time.
• If you want a specific version of a resource across all your projects.
• If you just want a simpler way to get all the packages you need.

 

Install Bower

Bower need to be installed on your system. The easiest way is to do it with the Node Package Manager

[dropshadowbox align=”none” effect=”lifted-both” width=”400px” height=”” background_color=”#ffffff” border_width=”1″ border_color=”#dddddd” ]npm install -g bower[/dropshadowbox]

 

Bower files

Bower needs 2 files. bower.json and .bowerrc file.

The first one tells Bower what to install, like JQuery or Bootstrap, the latter is optional. When this file is not present, Bower will install all the files in a newly created directory ‘bower_components’. The .bowerrc file gives you control on where to install the framework files. To find the frameworks you want to include/needed, Bower has a very good search page, http://bower.io/search

 

Run Bower

When the files are in place you can run Bower via the command line

[dropshadowbox align=”none” effect=”lifted-both” width=”400px” height=”” background_color=”#ffffff” border_width=”1″ border_color=”#dddddd” ]bower install[/dropshadowbox]

 

And what about a NSF?

After I was able to run Bower I was thinking if Bower can also be useful for my XPages projects. It is always annoying to copy and paste all the framework files from one to another (new) XPages app.

I decided to do it with a On disk Project, benefit is that I can immediately put it in GIT repository.

On my Mac I run Parallels to use Domino Designer ( off topic, when will change that, so I don’t need Windows to use Domino Designer ) and my GIT repositories are the OSX side. In my repository I separate the nsf files with other resources by putting my ODP in a nsf directory.

 

My setup

First I created on BitBucket, a new repository and cloned it via SourceTree to my local GIT directory. Next I created a blank database on my Domino server and in the Domino Designer I associated the NSF with my newly created GIT repository.

Then I created the to Bower files in the root of my repository. You could do it on your local system, but in my case I created it in Bitbucket and synced them back.

My bower.json file looks like

[dropshadowbox align=”none” effect=”lifted-both” width=”400px” height=”” background_color=”#ffffff” border_width=”1″ border_color=”#dddddd” ][/dropshadowbox]

And I created also a .bowerrc file, to put the files in a directory in the WebContent directory of my NSF.

[dropshadowbox align=”none” effect=”lifted-both” width=”400px” height=”” background_color=”#ffffff” border_width=”1″ border_color=”#dddddd” ][/dropshadowbox]

 

Run my Bower

I opened the Terminal and cd to the root directory of my GIT repository and run the ‘bower install’ command.

With the successful result

[dropshadowbox align=”none” effect=”lifted-both” width=”400px” height=”” background_color=”#ffffff” border_width=”1″ border_color=”#dddddd” ][/dropshadowbox]

 

Update my NSF

After the successful run I switched back to my Domino Designer and refreshed my ODP in the Navigator view. Next I synced my NSF with my ODP, via Team Development –> Sync with On Disk Project.

All the newly created files where imported to my NSF.  In SourceTree I commit the newly created files to BitBucket

 

Make use of the frameworks

I created in my NSF a theme, for me the easiest way to control all the includes on my XPages app, where I point to required files in the libs directory

[dropshadowbox align=”none” effect=”lifted-both” width=”600px” height=”” background_color=”#ffffff” border_width=”1″ border_color=”#dddddd” ][/dropshadowbox]

 

Now I can make use it the normal way

 

Conclusion

Bower is a very easy to use tool to manage all the needed frameworks, without the hassle of copy and paste and keep track of the dependencies, Bower does that for you.

The source files can be found on Bitbucket, https://bitbucket.org/flinden68/bower4xpages