Primo CENTRAL_PACKAGE

Custom JavaScript, HTML, CSS, and images for the Primo AngularJS UI. The files in this package are shared between all campus views (TWINCITES, DULUTH, MORRIS, CROOKSTON).

Setup

1. Clone the Primo Development Environment repository and follow the setup instructions.

   tl;dr:

   git clone git@github.com:ExLibrisGroup/primo-explore-devenv.git
   cd primo-explore-devenv
   npm install

   Note that the Primo Development Environment only works with node.js version 10 at this time.

2. From the project's root directory, clone this repository to primo-explore/custom/CENTRAL_PACKAGE:

   cd primo-explore/custom
   git clone git@github.com:UMNLibraries/primo-explore-central-package.git CENTRAL_PACKAGE

3. Install the project dependencies:

   cd CENTRAL_PACKAGE
   npm install

Note: If you use VS Code, you can opt to use the remote-containers plugin instead of following the setup steps above. Refer to .devcontainer/devcontainer.json for details.

Local Development

Run npm run start. This task builds the custom.js and custom1.css files, watches for js/css changes, and launches a Browsersync proxy that sits between the localhost and the UMN Primo sandbox. To preview local changes in the sandbox, point a browser to localhost:8003/primo-explore/?vid={campus view ID}. For example http://localhost:8003/primo-explore/?vid=TWINCITIES.

To preview local changes in production, run npm run start-prod instead.

Deployment

1. Run npm run pkg. The package will be written to primo-explore-devenv/packages/CENTRAL_PACKAGE.zip.

2. In the Primo Back Office, navigate to Primo Utilities > UI Customization Package Manager, and upload the CENTRAL_PACKAGE.zip file.

3. Run Deploy All > Views.

Updating the Color Scheme

Edit the colors.json file, and then run npm run gen-color-scheme. This will rebuild the app-colors.css file. It's a good idea to do this following Primo upgrades (which sometimes introduce new HTML elements).

If you which to override any colors defined in this file, it's best to do so in a separate css file.

Running Tests

Unit Tests

npm test

Functional (end-to-end) Tests

npm run test-e2e

Getting Help

• Primo Documentation
• #primodev Slack Chanel
• Primo Email List
• AngularJS 1.6 Documentation
• AngularJS Material Documentation
• Dev Tool Documentation:
  • Babel
  • Browserify
  • Gulp
  • Karma
  • Jasmine
  • NPM
  • Protractor