How to setup UI environment

Owned by Viktor Soroka
Last updated: Mar 02, 2020 by Yuliia Dovhal

Creating a new development setup for Stripes

This setup is based on the usage of stripes-cli and the concept of workspaces which are available in yarn:

  1. Make sure yarn and npm are configured to the folio packages:

    yarn config set @folio:registry https://repository.folio.org/repository/npm-folioci/

npm config set @folio:registry https://repository.folio.org/repository/npm-folioci/

  2. Install stripes-cli globally:

    yarn global add @folio/stripes-cli

  3. Create a new workspace (chose modules you want to have locally and make developing on them). Make sure to choose stripes-sample-platform, where the configuration of modules should be done. 

    stripes workspace

    Pick the bare minimum modules below or custom ones

    - stripes-sample-platform
    - ui-users

    The above will create a stripes directory.

  4. Connect the needed modules into the platform in the stripes-sample-platfrom/stripes-config.js file by adding an entry '@folio/<name-of-the-app>': {} into the modules object for each app/module which should be included into the platform. Without it, the application won't appear on the local environment;

  5. In the created file stripes/package.json file make sure to add the following dependencies. This is needed to avoid problems with the eslint rules when only as part of the platform (not on CI) the following plugins cause lint errors.

    "eslint-plugin-react-hooks": "^1.6.0",
"eslint-plugin-babel": "^5.3.0",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.18.3"

  6. Navigate to stripes/stripes-sample-platform. Make sure to rename .stripesclirc.example to .stripesclirc or just create new .stripesclirc file and make sure it contains the following:

    {
  "okapi": "http://localhost:9130",
  "tenant": "diku",
  "configFile": "stripes.config.js",
  "port": 8080
}


    Also, make sure the package.json has the following set of dependencies. Make sure to keep dependencies up to date with what is run on folio environments like folio-testing.

      "dependencies": {
    "@folio/stripes": "^3.0.0",
    "react": "~16.6.0",
    "react-dom": "~16.6.0",
    "react-redux": "~5.1.1",
    "react-router-dom": "^5.0.1",
    "redux": "~3.7.2"
  }

  7. Now it is possible to run the platform from stripes/stripes-sample-platform folder with the command below. Make sure okapi (okapi property in .stripesclirc) backend is up. It could be a local environment or one of the remote environments.

    stripes serve // when server runs locally
stripes serve --okapi <okapiURL> // override okapi value from .stripesclirc when server is not locally set up.
                                 // The --okapi part can be ommited if the okapi url is changed in .stripesclirc to what it really should be.
  8. At this moment the UI development server is up and can be accessible on https://localhost:8080. Credentials are diku_admin/admin.

Further steps which are not required for the initial setup

  1. Update of the packages. Over time there is a need to update the packages to use the latest ones. To update workspace modules run the following command from the stripes folder in the root of the workspace:

    stripes platform pull

  2. Install dependencies. Command to run:

    stripes platform install

  3. Remove the outcome of the install. Command to run:

    stripes platform clean
rm -rf yarn.lock // search for similar command if Windows OS is used
  4. When there is a need to add a new app/stripes module as part of the platform the recommended approach would be:
    1. Run the Remove the outcome of the install step of Further steps guide;
    2. Clone the app/module into the stripes folder;
    3. Run the Connect the needed modules step of Creating a new development setup guide;
    4. Run the Install dependencies step of Further steps guide;

Связанные статьи