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.
{
"name": "workspace",
"private": true,
"version": "1.0.0",
"workspaces": [
"*"
]
}
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.
A custom stripes configuration (stripes.config) is recommended, 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.