elstar IT

Fullstack | Java | Tech Speaker | Tech Coach | Frank van der Linden

  • About me
  • Blog license
  • My Open source projects

Bower4XPages

17-09-2014 7 responses flinden68 development

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” ]bower_json[/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” ]bowerrc[/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” ]bower_run[/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” ]bower_theme[/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

 

 

 

 

Tags: bower, development, xpages

7 thoughts on “Bower4XPages”

  1. Martin Rolph says:
    17-09-2014 at 10:04

    Great post. I’ll give that a go.
    Kind of similar in concept to using something like winLess to monitor changes to .less file within an ODP and recompile it to a .css. That works well for me

    Reply
    1. Frank van der Linden says:
      20-09-2014 at 06:25

      May be you should look at Grunt. Does similar things like winLess, but more. Validate JS code. I am currently thinking of real use case for XPages

      Reply
  2. Eric Mccormick says:
    19-09-2014 at 16:05

    You have made my day. Thanks for being awesome.

    Reply
    1. Frank van der Linden says:
      20-09-2014 at 06:35

      Another thing I stumbled on is Grunt, automation tool. Looks very promising. Compile less files, minimise files like css and js. Validate JS files. Watch changes in files and run certain tasks. Thinking how to use it in XPages. Currently I use it in my NodeJS and AngularJS app.

      Reply
  3. Pingback: Quick XPages tip: add Fullcalendar plugin to your application - elstar IT
  4. Patrick Kwinten says:
    07-04-2016 at 12:56

    thanks for this post! I came ‘finally’ to the point to test it (it works!) and implement it in my way of working.

    you forgot to mention to have git installed (I am using sourcetree). also I am not sure how to create a nameless file (.bowerrc ) without a numpad 😕

    Reply
    1. Frank van der Linden says:
      07-04-2016 at 18:13

      I use also SourceTree, so I don’t have GIT installed. By the way GitKraken is also worth a try.

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • « My running plans fall 2014
  • Xcode update breaks Bower, but there is a solution »

Contact me

My name is Frank van der Linden and I am an independent software developer based in the Netherlands. The last 2 years I was awarded as IBM Champion. Also I am on the board of OpenNTF. My specialisations are Java, Web development and Domino.


If you want to hire me, please fill in the Contact form


IBM Champion web badge
Apache Logo

All the code on this blog are under the Apache License 2.0. For more details, see Apache License 2.0

Most recent posts

  • Engage 2020: Hello are you listening, There is stream for everything
  • Spring Cloud Function on Azure run locally
  • Deploy Spring Cloud Function to IBM Cloud
  • Speaking (again) at Engage in a Zoo
  • Congratulations, you’re an IBM Champion (again)!

Latest reactions

  • Spring Cloud Function on Azure run locally - elstar IT on Deploy Spring Cloud Function to IBM Cloud
  • flinden68 on Quick XPages tip: add Fullcalendar plugin to your application
  • Rajesh samal on Quick tip: Swagger support for Spring Webflux
  • dsieyx on Quick XPages tip: add Fullcalendar plugin to your application
  • John on Named as IBM Champion 2019

Archive

  • March 2020
  • February 2020
  • January 2020
  • October 2019
  • September 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • January 2019
  • December 2018
  • October 2018
  • September 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • December 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014

Category

  • bluemix
  • business
  • cloudant
  • community
  • development
  • hrassistant
  • openntf
  • running
  • salesforce
  • Springboot
  • Tesla
  • trailrunning
  • Uncategorized
  • watson
  • OpenNTF
  • Collaboration Today
  • XSnippets
  • Stackoverflow
  • IBM Collaboration Solutions
  • Social Business Toolkit
  • About me
  • Dutch curriculum vitae
  • English curriculum vitae
  • Google+
  • LinkedIn profile
  • Twitter
  • Slideshare
  • Blog license
  • My open source projects