How to add my own Stripes module?

Hi,

I have some difficulties to understand how to deploy my own Stripes module. Maybe it is related to the fact that JavaScript with its ecosystem is quite new to me.

The situation is the following:

I have edited the skeleton module in order to create my own module. My code is located in a GitHub repo. In addition I have published the module as an npm package, located here.

Now I want to add this module to my Stripes platform:

• I added my package to the dependencies in my stripe’s package.json:

“dependencies”: {
…
“@rchr/amsl”: “^0.1.4”
}

• I added my package to the modules section in stripes.config.js:

…
modules: {
‘@folio/trivial’: {},
‘@folio/users’: {},
‘@folio/organization’: {},
‘@rchr/amsl’: {}
}
…

Now, when I run $ STRIPES_HOST=0.0.0.0 yarn start I get an error. The error message is located here at pastebin.

However, if I use my local checkout of my Stripes component with ‘yarn link’ (as described here) the error disappears. Now the problem is that my module is listed as an appmodule but does not appear as an app next to Organization CHANGED, as shown in the attached screenshot.

Does someone know how to get the module running?

Thanks,
Richard

PS:
Here is the screenshot:

1885×1053 107 KB

Hi, rch – sorry it took a while to pick up on your problem.

I don’t know offhand why you are seeing the first problem. “You may need an appropriate loader to handle this file type” suggests that Babel is not configured to interpret JSX for this file, but I have never got to grips with the WebPack/Babel maze. I hope Jason will have some useful thoughts on this, and I will point him to this issue.

On the second issue: your problem is most likely that your user lacks the module.amsl.enabled permission. Unfortunately, the solution is not simply to add that permission to your user, since the permission does not exist at all at this point. You will need to add it to your back-end database somehow. The details will depend on what back-end you are using.

In the short term, the simplest way forward is to turn on hasAllPerms, which tells the UI to behave as though the user had all permissions. (Of course, the back-end still checks perms, so this doesn’t actually let you do anything real that you couldn’t already do.) The result should be that you see the icon, at least, and can progress from there. Put it in the config section of your stripes.config.js.

I’m sorry that you’re running into problems that feel so fundamental. This is your punishment for being the first person outside the core development team to try to make a Stripes module. History will thank you! I hope the outcomes from this issue will include a better Troubleshooting Guide and a more convenient way to add permissions to the system.

BTW., I have filed a new issue, MODPERMS-12: We need an easier way to add permissions to the system.

Also filed, and fixed, STRPCORE-9: Icon permissions should work for UI modules in any namespace, which would have prevented you from seeing your module even if you did have the module.amsl.enabled permission!

Jason got back to, and straight away spotted what is almost certainly at the root of your first problem. There is a nasty regexp that determines which files are transpiled from ES6, and that regexp almost certainly is not picking up your code. It’s at line 58 of stripes-core/webpack.config.base.js.

You can modify that in your local copy so it includes your own module as well. Sorry this is messy – we hope to find a better solution in time.

Hi MikeTaylor,

thank you for your helpful answers! They help me to understand the whole system better!

I know that Folio is in an early stage, so I expected some issues like this. My aim is to build a simple module (Stripes and Okapi) to get a good feeling of the whole Folio system.

Adding hasAllPerms into the stripes.config.js let the icon and the app with its static content appear. So this works for now.

My next step is to add simple functionality to an Okapi module, so that both can communicate with each other. I think I have to check the permissions in the backend database for that. Am I right?

In addition, I will try your proposed fix in the webpack.config.base.js.

Thanks,
Richard

I see it’s been nearly a year since I was logged on here! Sorry that I didn’t respond sooner. In general, if you want a reply, the Slack channels are a much better way to reach developers.