• Kushal Jayswal is a frontend developer from India. His expertise includes HTML5, CSS3, Sass, LESS, Responsive Web Design, JavaScript, jQuery, Twitter Bootstrap, Material Design, AngularJS, NodeJS, WordPress and Liferay Theming. He has founded TeckStack.com in 2011 to share his frontend knowledge with the community. His core interests focus on frontend, blogging, UI, UX and many others. He loves to talk on trending frontend technologies and successful blogging.

Bower-Installer - Deploy Bower Dependencies for Github Pages

bower-installer

Bower is one of the popular Node package, which has changed the traditional way of managing frontend dependencies. If you haven't explored it yet, you are lagging behind the trend!

Why Bower (in shorts)

Few years ago, when we have to start a new project, we used to create directory structure manually and download all required assets like JavaScript and CSS files from the web. Below is a standard folder structure considered by majority of the developers.

/ css
    - style.css
    - bootstrap.css
/ js
    - bootstrap.js
    - jquery.js
/ img
    - logo.png
index.html

Bower can be initiated by running bower init command at the current project destination. Then it would create bower.json file with basic configurations.

Bower Init
Bower Init
Bower Install Dependency Configuration
Bower Install Dependency Configuration
Now you are ready to install frontend dependencies using bower install {package-name} (i.e.: jquery). Any dependency installed with --save will be added to bower.json file under dependencies section (as seen in the screenshot).

Bower Install Package
Bower Install Package

Github Pages (a little)

Github.com is the most popular site allows developers to host their code for free. Github has popular feature called Github Pages, where project related content can be published for demonstration purpose with browser accessible URL and that is without any cost. Even more, Github Pages can be configured with custom URL to look more professional.

Example of Github Pages:

The Problem

Now we gained enough knowledge to understand the benefit of using Bower that to avoid dependencies and make it easier to distribute the project source-code with minimal size.

So considering above statements and per the best practice, we usually don't push bower_components folder to the Git remote repository (as it can be download all at once by running bower install). So the problem is - HOW TO MAKE THOSE DEPENDENCIES AVAILABLE FOR GITHUB PAGES?

The Solution

  1. As a solution we can either create a new folder manually and copy paste required JavaScript and CSS files and push them to Github repository. But I guess then there is no meaning of using Bower.
  2. I did little research and found bower-installer

What is Bower-Installer

Bower Installer is another node package which does magical thing. It allows developers to define a new section inside bower.json file.

Installation

npm install -g bower-installer
Bower Installer Configuration
Bower Installer Configuration

As seen in the above image, we have install section. Under install, we are passing "path": "assets", where "assets" is a folder name that we have to create to be considered for all frontend assets required to be pushed from bower_components folder.

sources is required when you want specific files. Like in case of Bootstrap for some reason I want to copy only .css file then I need to define the path for that file under sources as stated in the screenshot (by default bower-installer would copy .less file from Bootstrap).

After the changes we made inside bower.json file, we are good to run the below command, which will automatically takes .js and .css file (and NOT the entire folder from bower_components)

bower-installer
Bower Installer After Run
Bower Installer After Running

Comparison - bower_components Vs bower-installer

Bower Vs Bower-Installer
Bower Vs Bower-Installer

As we can see the difference in above image that bower_componet has entire structure with its own bower.json and other files, which are infect not required for project.

On the other side, under assets folder we can see only one jquery.js file which has come after running bower-installer command.

So to sum up, which UI was breaking due to non-availability of files inside bower_components folder, can be fixed as needed files are available in assets folder and even the same can be pushed to the remote Git repository.

I hope this article would help you. If you have any question or suggestion, do not hesitate to share in below comment section.


Also published on Medium.