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.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": [
"*"
]
}
Update: The custom branch described here should no longer be needed.
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:
"@folio/stripes-cli": "^3.0.0"
to something like:
"@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 (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 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):
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):
yarn stripes serve ./stripes.config --startProxy --proxyHost http://127.0.0.1 --proxyPort 3010 --host 127.0.0.1 --port 3000
Some users use their workspace to house other modules and other work.
It is recommended that the workspace for the UI module be separate from any other work.
To make this less confusing one might instead create a uispace directory where the package.json and the ui-workflow as described above might reside under.
Make sure your NPM or Yarn configuration files have the appropriate FOLIO repository setup.
Example NPM (~/.npmrc) using CI:
@folio:registry=https://repository.folio.org/repository/npm-folioci/
Example Yarn (~/.yarnrc) using CI:
"@folio:registry" "https://repository.folio.org/repository/npm-folioci/"
The CI Deployment Notes may have further details on this.
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.
# stripes okapi login diku_admin --okapi https://folio-dev-aggies-okapi.ci.folio.org --tenant diku # stripes mod add --okapi https://folio-dev-aggies-okapi.ci.folio.org --user diku_admin --tenant diku # stripes mod enable --okapi https://folio-dev-aggies-okapi.ci.folio.org --user diku_admin --tenant diku # stripes app perms | stripes perm assign --okapi https://folio-dev-aggies-okapi.ci.folio.org --user diku_admin --tenant diku