We're happy to announce that NetCanvas now has Bower support for installing Web Packages.
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
The packages are installed into :
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.
Bower is installed locally & on demand to each NetCanvas Instance.
Use the NPM installer to install bower locally via the site's Admin page:
bower into the NPM Package and click NodeJS npm Install.
Once installed you should see something like :
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
jQuery, via the
bower command on NetCanvas, enter
jQuery into the Package name for Bower and click Bower Install
Once installed you should see jQuery listed in the bower packages.
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 :
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).
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 -
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 :
Would be found at :
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
Click the Add Rewrite button (top right hand corner) on the page :
- Admin Tools -> URL Rewrites (
The Add screen has 3 fields, add the following values & Click Add :
jQuery - anything really
/js/jquery.min.js - the clean url you want to use for the sources
Having added the rewrite you can now test the it's use by clicking the link in the listing or navigating to :
Here you'll see the jQuery source that was installed via the bower package manager.