Get Started!

Bower Support

We're happy to announce that NetCanvas now has Bower support for installing Web Packages.

General

Bower, "a package manager for the web", as the tag line suggests, is a tool chain for installing some 65k web packages, be it jQuery, moment, Bootstrap

bower support p-r

The packages are installed into :

/__bower__/bower_components/

Adding Support

Just as with node packages, bower packages are controlled via the NetCanvas Cloud/Server Admin. Found on the individual details of your specific version/site of a project.

Install Bower

Bower is installed locally & on demand to each NetCanvas Instance.

Use the NPM installer to install bower locally via the site's Admin page:

Install bower

Enter bower into the NPM Package and click NodeJS npm Install.

Once installed you should see something like :

Bower installed

That's it, now the version of the project, and subsequent ones installed from new backups, will have the bower package support.

Installing a Bower Package

Let's look at how to install bower packages in NetCanvas.

Normal Bower Operation

So, normally, here's how you would run bower to install jQuery via the command line / console :

bower install jQuery

Bower on NetCanvas

To install jQuery, via the bower command on NetCanvas, enter jQuery into the Package name for Bower and click Bower Install

Install jQuery

Once installed you should see jQuery listed in the bower packages.

jQuery Installed

Using Bower Package Assets

To make use of the installed packages you need to be aware of their location. Taking jQuery it's installed into the path :

/__bower__/bower_components/jQuery/

Note how the bower component's folder name is the same as the package. This is the same for all bower packages (at least the ones I've used always have).

With the location of the package known, you'll need assets in some way, as outlined in the documentation for a given package. For example you might need to reference a JavaScript file, use a LessCSS or Sass file in a Pre Processor, include a font file, and so on. To do so, you will need to locate the files you need within the package's folder.

Finding Assets - jQuery

As you can see for the image above, showing the installed jQuery package, the version installed is 3.1.1. If we visit github.com & view the source for this v3.1.1 release of jQuery. You will see the folder structure of the installed package.

From this you can derive the paths to the different source files.

For example within the dist folder you'll find the relevant files :

Folder : /__bower__/bower_components/jQuery/dist/

  • jquery.js
  • jquery.min.js
  • jquery.min.map
  • jquery.slim.js
  • jquery.slim.min.js

Would be found at :

  • /__bower__/bower_components/jQuery/dist/jquery.js
  • /__bower__/bower_components/jQuery/dist/jquery.min.js
  • /__bower__/bower_components/jQuery/dist/jquery.min.map
  • /__bower__/bower_components/jQuery/dist/jquery.slim.js
  • /__bower__/bower_components/jQuery/dist/jquery.slim.min.js

As you can see, in this case even the sourcefile's .map are available too.

Exposing clean paths

Personally, I dislike using these long paths within my HTML, and invariably, only a a handful of files from the packages are use by the clients, so I add re-writes for the important ones.

Clean jQuery URL

Let's take the jQuery example further and deliver the JavaScript from a URL :

  • /js/jquery.min.js

Click the Add Rewrite button (top right hand corner) on the page :

  • Admin Tools -> URL Rewrites (/admin/rewrites)

The Add screen has 3 fields, add the following values & Click Add :

  • Name = jQuery - anything really

  • Request = /js/jquery.min.js - the clean url you want to use for the sources

  • Rewrite = /__bower__/bower_components/jQuery/dist/jquery.min.js

Having added the rewrite you can now test the it's use by clicking the link in the listing or navigating to :

  • /js/jquery.min.js

Here you'll see the jQuery source that was installed via the bower package manager.