UI Development Notes

This page provides a collection of different notes regarding UI development, such as stripes-cli related development.

This documentation expects the user to know or have read the How to Setup UI Environment documentation.

The https://repository.folio.org/repository/npm-folioci/ works well with the latest development.
The https://repository.folio.org/repository/npm-folio/ works well with production releases.

Configuring Environment

The stripes-cli project can be installed locally but in general the stripes should be used via yarn.

The first step is to make sure that the yarn is installed on the system.
This can be done by directly installing using the appropriate installer for your Operating System or if NPM is already installed then it can be installed via npm.
Installing via npm would be: npm install -g yarn.

Some systems, such as Windows, may require you to setup the bin path in the environment.
For Yarn, use yarn global bin to determine where the yarn global programs are stored.
For NPM, use the npm config get prefix command instead.

UI-Workflow may need to be executed using a 2.7 or 2.8 version of stripes.
In those cases, please explicitly designate a 2.7 or 2.8 verson of stripes when installing stripes globally.
Example:

yarn global add @folio/stripes-cli@2.8.0

Setup a Workspace

A workspace directory should be configured with a package.json file like below and the UI module, such as ui-workflow, cloned in it as a sub-directory.

{
 "name": "workspace",
 "private": true,
 "version": "1.0.0",
 "workspaces": [
   "*"
 ]
}

Once the package.json is configured and the UI module, like ui-workflow, is cloned, then change into the UI modules directory.

The dependencies, if not yet installed, but be installed by executing the yarn install command (from the workflow directory).

A custom stripes configuration (stripes.config) is recommended (and added to the workspace directory), such as the one shown below for ui-workflow (Be sure to replace URL_TO_OKAPI with the correct URL and the tenant with the correct name).

module.exports = {
  okapi: { 
    'url': 'URL_TO_OKAPI',
    'tenant':'diku'
  },
  config: {
    logCategories: 'core,path,action,xhr',
    logPrefix: '--',
    maxUnpagedResourceCount: 2000,
    showPerms: false,
    preserveConsole: true,
    suppressIntlErrors: true,
    suppressIntlWarnings: true,
    useSecureTokens: false,
    hasAllPerms: true,
  },
  modules: {
    '@folio/workflow': {},
  }
}

The UI module can now be started for viewing with the command (where stripes.config is the path and name to the stripes configuration described above):

However, if you have CORS problems or otherwise need a proxy, then the command might instead be more like this (replace ports and addresses as appropriate):

Enabling the UI Module in the Scratch Environment

The scratch environment may need additional work beyond just executing the deployment scripts.

If the module is deployed and enabled but does not appear in the Scratch environment, then the permissions may need to be adjusted.

The following is an example on what is used to ensure ui-workflow is working in the Scratch environment.