src/middleware: open router handler for developers.

[bshy522]

This commit allows the developers to customize the middleware.

[arunoda]

I wanna know why you need this.
Normally Storybook is a dev time tool and we normally don't need this or should not customize the server side.

[thani-sh]

I think there are many valid use cases for this and users and addon developers can do many awesome things using this feature.

But this feature comes with a huge cost. At the moment, storybooks can be built as static webpages. This enables users to deploy them to GIthub pages, etc. (I have a few more features planned which also depend on being able to deploy as static web apps).

But let's keep this issue open so we can discuss it more and get more opinion

[arunoda]

I don't like to allow to configure Storybook in the server side. This will open to a lot of issues we never want to address.

[bshy522]

First, i'm so sorry. My engilish is very bad.

I am developing an in-house development tool based on storybook.

I want to be able to dynamically generate some files in the server, through the HTTP to the client. For example, compiled a .sass file in the server side.

So, open middleware to me is the most rapid solution. Doesn't seem to cause too much of a problem.

[erykpiast]

Another use case (my own) is proxy for API calls. Storybook is just as good tool that you can never find all ways to use it! And I use it to test parts of my app talking with not-really-cors-friendly API so I need a proxy. I wouldn't like to continue working on .bin/storybook changed by hand and not synchronized with this repository :)

[thani-sh]

Currently addons have access to the 'Manager App' and the 'Preview Area'.

Adding an ability to inject custom (express) middleware would open up even more opportunities for creative addon-creators.

These custom middlewares can provide storybook with new features by enabling additional data retrieval for addons.

Some data examples of data:

• unit tests
• package / dependencies version & updates
• package dependency graph
• git & other system integrations

I don't think it's all that hard to implement via config.js.

@ndelangen
#638 (comment)

[thani-sh]

Hi @bshy522 @erykpiast @ndelangen
This feature is available from v2.34.0

Here's an example middleware.js file

module.exports = function (router) {
  router.get('/hello', (req, res) => {
    res.send('Hello World!');
    res.end();
  });
}

With this feature, we can also bring back the local-db:
https://github.com/kadirahq/storybook-database-local

[interactivellama]

It took me a few hours to find this and know that I needed to call the file middleware.js and put in the config folder. This would be nice to surface in the docs in an advanced section.

Thank you for making it so flexible though. It's now that I understand how to manipulate Express/Storybook.

[usulpro]

hey, @interactivellama!
Could you share your experience? maybe short example? 😊

[interactivellama]

I just needed a url alias to align with our internal react project with the Salesforce Lightning Design System. The following simple middleware worked for me.

/* eslint-env node */
const express = require('express');
const path = require('path');

const expressMiddleWare = (router) => {
  router.use('/assets/icons',
    express.static(
      path.join(__dirname,
      '../node_modules/@salesforce-ux/icons/dist/salesforce-lightning-design-system-icons/')
    )
  );
};

module.exports = expressMiddleWare;

My primary issue was that until I found this issue I knew how to do it in express, but not how to connect it to Storybook. I looked through the source code for a while and knew it could be done. So my request was just to say, "hey if you want Express middleware, then put it in a file called middleware.js in the config folder."

[ndelangen]

This feature needs proper documentation 😄

[vzaidman]

add the following "middleware.js" file to your .storybook folder:

const express = require('express')

const expressMiddleWare = router => {
  router.use('/static', express.static('./src/static'))
}

module.exports = expressMiddleWare

obviously you can config it as you like.

[djstrasser]

Was this feature ever documented anywhere? It's really useful, but I had to go digging through a bunch of issues to find it.

[jamieowen]

Also it would be great to have typescript support for middleware 👍

[amaury-hanser]

For people having trouble using middleware.js, it seems that it doesn't like empty lines.

[alexandrzavalii]

In my case I need to create a websocket connection and middleware is not enough in this case.

I think I would need access to the whole express app instead.

Anyone has any ideas how can this be achieved?

[rnarcos]

Would it be possible for us to access the environment variables at this point (within the middleware definition)?

[Ananya-96]

@thani-sh solution worked for me with storybook v6.3.8, angular v12 in development mode using start-storybook. But when I build the storybook using build-storybook, middleware is not getting included in the static build folder. Can someone help me with this?

[theKashey]

middleware cannot be included in the static build due to the static(HTML, CSS, js) nature of the latter.

[AngelosTzetzias]

@theKashey or @Ananya-96 are you aware of a work around?
i want to be able to deploy my storybook on my website and i have apis for some stories that i mock / hard code through the middleware.js .... I have managed to deploy but the apis are not mocked like they are when i run locally with middleware (setup of original project is angular 14 with nx) ...

P.S. I ve also tried msw-storybook-addon but i dont seem to be able to make it work (not sure if its from my implementation or it just doesnt work with angular and nx). Any help / direction would be appreciated thanks a lot

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 6469f0f. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 1 target

• nx run-many -t build --parallel=3

---

Sent with 💌 from NxCloud.