In a multi-app CAP project, how can I share a frontend class between apps?

[JWJ]

We have a SAP CAP project with multiple applications. Our folder structure looks similar to this:

- app/
   - admin_app/
      - webapp/controller/
         - handler.js
      - package.json
   - business_app/
   - another_app/
- srv/
   - service.ts
- package.json
- tsconfig.json

There was a lot of repetitive code in the `handler.js` of each app. I already moved the reusable code into a separate "Class" file.

sap.ui.define(
    [
        'sap/m/MessageToast',
        'sap/m/Button',
        'sap/m/ButtonType',
        'sap/m/CheckBox',
        'sap/m/ListMode',
    ],
    function (
        MessageToast,
        Button,
        ButtonType,
        CheckBox,
        ListMode
    ) {
        'use strict';
        return class ReusableClass {

I tried putting the class in the `app` root but the page gives an error about referencing a file outside the app.How do I arrange things so that I can share this in all apps?

[gregorw]

Would think c3d1947136cd4c748a7aa794001af496 or 20eed143c19f4b82bc4cf049916102cb can help here.

[WouterLemaire]

Hi, I would suggest to put the class in a ui5 library that you create in the app folder of your cap project.

For local testing, you’ll need the ui5 tooling for connecting the library with the other apps. You can use the plugin: https://www.npmjs.com/package/ui5-middleware-servestatic . Here you have an example on how this can be used: https://github.com/lemaiwo/ComponentLoaderPoC/blob/main/UI5ComponentLoader/ui5.yaml

For running in BTP, you’ll need to configure the approuter to find the library. But this depends if you use the managed or standalone approuter.

Managed approuter will resolve it automatically if they use the same destination service instance. With standalone, you need to configure this in the xs-app.json

[JWJ]

Thank you for the response.

I'll try it out but it may take me some time to do it. I'm not familiar with creating libraries and your example project doesn't look like the SAP CAP structure I'm familiar with.

[WouterLemaire]

it doesn’t really matter for the ui part. The config in the mta.yaml file should be similar, just pointing to the project in the app folder.