This blog post is part of a new series that I am writing to help SharePoint Developers learn how to improve their skills to become more adept with modern web development techniques. They will be tagged with “SharePoint Web Development” so feel free to browse them all. 🙂

If you have met me before, you will know that I am a huge fan of Visual Studio Code. For the past 9 months I have exclusively been using it to build client side solutions for my clients. For those of you who are also doing client side development let me know if this workflow sounds familiar to you. So you are working with your project team and receive the requirement to build a webpart that pulls items from a calendar list and presents them back to the user in a way that they can add them to their Outlook calendar. Rather than describe it in great detail – here is a quick screenshot of what the client is expecting to see:

upcoming_events

Now if you are like me your first thought is “No problem” that is absolutely a slam dunk using a bit of JavaScript, HTML, and some CSS styling. To grab the items from the list I will either use SPServices or more likely jQuery for the AJAX call and I will probably format the date using Moment.JS. Next, I will likely open up Chrome and grab a version of jQuery compatible with the client’s browsers along with Moment.JS. From there, I will create a folder on my local hard drive, open up Visual Studio Code, and set that as my project folder. The next few steps are a matter of creating folder structures for the libraries, copying them in, etc. Now this is not a ton of work since it is a small project, but imagine doing that many times over the course of a week, month, year. What about managing multiple libraries? I have had projects with 5-7 libraries for larger projects and repeating those steps can be a bit of a pain. Well, here is how Bower can come in and help optimize your workflow.

So what do you need to get started with Bower? Well first off, you will need to have Node.JS running on your workstation. I don’t have a step by step tutorial for that but it’s pretty easy.  (Here’s one for installing on Windows) Once you have Node.js all set, you will want to install Bower. Open up a command box and type in npm install bower -g and this will install Bower globally on your machine. Yeah it is really that easy. 🙂

Navigate to your project (folder) and now you can very quickly add in 3rd party libraries from Github directly to your project. With the command prompt still open, try typing in:

bower install jQuery

Bower-jquery-example.PNG

jQuery is special because there are two tracks of it – a version 1.x & 2.x which have different browser compatibilities. Bower prompts you to pick a version and by typing in 2, I receive the version 2.2.1 of jQuery in my project.

Try it out and watch your project – what you should see is a new folder created called bower_components and then inside that you will see jQuery.

What if you don’t want the latest version of jQuery? Well, you can specify which version of jQuery you install by adding a # after the word jQuery and specifying the version.

For example: bower install jQuery#1.12.0

jquery-1.12

Not sure which version of jQuery is available? Why not search for it?

Type in bower info jquery  – and then look for the version that you would like to add. (For jQuery you may need to scroll quite a bit)

bower-jquery

You can follow this same type of setup for pulling in additional JavaScript libraries like Moment.JS, lodash, Twitter Bootstrap, etc. What you will find is after installing each package it will create a folder under the bower_components folder and pull in the necessary JavaScript files, etc.

Many times however you will want to specify the folder where you want to store these files and that is also pretty easy. Within your project folder you just create a file called .bowerrc and inside that some JSON notation to specify where you want packages installed.

For example if you wanted them all stored in the root of your project in a folder called “jslibs” you would add the following to your .bowerrc file:

{
“directory”: “jslibs”
}

Follow the previous steps of typing in bower install moment for example and watch it add the necessary package files into your jslibs folder. It is fine if you did not already create that jslibs folder, bower will create it for you!

So then there’s one really important concept to be aware of and it is the manifest file concept of bower.json. Basically what this does is keep track of all the packages you have added to your project and it allows you to automatically pull those in.

From the command prompt in your project directory you will want to type bower init. It will start to ask you a bunch of questions about your project. If you hit the Enter button it will grab the default such as the name, authors, etc. If you have already installed components it will ask if you would like to include them.

bower-init

Scrolling down a bit, I let bower add commonly ignored files to the ignore list. These include things like test files. After that there’s a question about marking the package as private which prevents it from being accidentally published to the registry. After that it gives you a brief preview of what your bower.json file will look like, once you click Yes it will actually create the file in your project root.

Going forward you can install additional packages using bower install jquery –save and it will also add jQuery to the list of dependencies.

If you want to maintain dependencies for packages that are just relevant to development you would type bower install jquery –save-dev

The really awesome part of having a bower.json file is that you don’t need to check in the 3rd party libraries to source control and also it makes shipping your project a lot easier.

If you type bower install it will read the bower.json file and pull in all of your dependencies! How awesome is that?

I plan to follow up soon with another helpful post on Bower.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s