Page Comparison

Version 8.0.0 of CoreJS eradicates Bower. All dependencies are now exclusively managed by NPM.

Here is the process  to update your App to v8+ 

Ensure NPM loads CoreJS code instead of Bower

Run the following command (but Replace 8.x.x by the CoreJS version you wish to install)

npm install --save git+https://github.com/CityofToronto/corejs.git#8.x.x

Transfer all dependencies to NPM

If you added dependences in bower.json, you have to migrate them to package.json file.

Open your bower.json, and search for NPM version of your packages. Usually, running the command npm search name-of-your-package is enough to find a package to install.

If no version exist, you can install a dependency directly from GitHub.

To install a dependency use the following command :

npm install --save name-of-the-package

Or from a GitHub repo use

npm install --save git+https://github.com/githubUser/repo-name.git

(you can grab the URL by clicking "Clone or Download" from the repo homepage..)

update your dependencies

It's always good to update your dependencies using the following command

npm update

Install babel-polyfill if it's not included already .

npm install babel-polyfill --save

run Run npm install to ensure all the dependencies are installed.

update your gulpfile.js

Ensure that gulp helper is added from node_modules

// instead of :
const core = require('./bower_components/core/gulp_helper.js');
// use :
const core = require('./node_modules/core/gulp_helper.js');

Delete Bower files

You can now safely delete bower.json and bower_components folder

Notes

If you are upgrading to v8.0.2 it is using different selector names to set the value for [+][-] font size buttons in the header beside the search bar.

There is this UI issue that I noticed when I moved my app to CoreJs v8. The row class in bootstrap has -15 and -15 values but we have -16 -16. I think it has been link that for some time. I can't tell if the issue is related to CoreJs 8. In certain cases I notices that causes the edge of the form element to be cut off (it's only a one pixel difference). I fixed it by doing this for those specific elements that have "row" class

 .row {
  margin-left: -15px;
  margin-right: -15px;
 }

There is one more thing that I noticed in CoreJs v8, Needed to add this:

 .panel-body {
 overflow: visible;
}

To make tooltips not get overlapped by another div that is not part of panel-body

In package.json you might need to add "qaRelease": "" property which is like the "version" property. It seems this release number is used to name the main.js file like so: main#.js Not sure which CoreJs version this feature was added in.