Versions Compared

Version Old Version 1 New Version 2
Changes made by

Kevin Day

Kevin Day

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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

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.

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.

Code Block
languagejson
{
 "name": "workspace",
 "private": true,
 "version": "1.0.0",
 "workspaces": [
   "*"
 ]
}
Note

Many systems may have CORS related problems, especially if using an older version of OKAPI (such as Nolana).
There is a temporary branch available (proxy-strip-acao-custom) for providing a solution using a proxy.
This temporary branch may be removed in the future if some or all of the changes there get accepted upstream into stripes-cli.
This can be used by modifying the package.json and changing the stripes-cli version from something like:

Code Block
languagejson
"@folio/stripes-cli": "^3.0.0"

to something like:

Code Block
languagejson
"@folio/stripes-cli": "kaladay/stripes-cli-2.x-backports#proxy-strip-acao-custom",

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.

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

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

The useSecureTokens: false, is required if CORS is not working because of and older version of OKAPI, like Nolana.
This may also be needed in other situations.
Setting the value to true will work correctly on newer versions of OKAPI, like Ramsons.

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):

Code Block
yarn stripes serve ./stripes.config

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):

Code Block
yarn stripes serve ./stripes.config --startProxy --proxyHost http://127.0.0.1 --proxyPort 3010 --host 127.0.0.1 --port 3000