Page Comparison

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:

   Code Block
   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:

   Code Block
   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. 

   Code Block
   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.

   Code Block
   "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:
   

   Code Block
   { "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.

   Code Block
   "dependencies": { "@folio/stripes": "^2^3.70.30", "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.
   

   Code Block
   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:

   Code Block
   stripes platform pull

   
   

2. After that run the following command to install dependenciesInstall dependencies. Command to run:

   Code Block
   stripes platform install

   
   

3. To remove Remove the outcome of the install command . Command to run:

   Code Block
   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;

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

...