Storybook: Middleware should enforce trailing / or use <base href>

[ericclemmons]

Hi! Given:

const storybook = require("@kadira/storybook/dist/server/middleware").default;
app.use("/stories", storybook(".storybook"));

Navigating to /stories results in a 404 of manager.bundle.js because it's loaded at /static/manager.bundle.js instead of /stories/static/manager.bundle.js.

There are two solutions to this:

• Add <base href="${req.path}/" /> or equivalent in the the HTML.
• Enforce the trailing slash in the middleware.

I can submit a PR for either depending on your preference.

[arunoda]

@mnmtanish could you co-ordinate this?

[mnmtanish]

I'll check it out

[ndelangen]

Hey @ericclemmons Sounds like enforcing a trailing slash will be easy to do! Want to make that PR?

I'm also interested in a PR describing how to inject storybook within an express app, as you're doing I believe ?

[ericclemmons]

This is what I have in our code now:

import { Router as router } from "express";
import storybook from "@kadira/storybook/dist/server/middleware";


export default router()
  .use(
      // Redirect stories to stories/, due to relative URLs
    (req, res, next) => {
      if (req.originalUrl === "/stories") {
        return res.redirect("/stories/");
      }

      next();
    },
     storybook(".storybook")
   )
 ;

Our app has docs, tools, stories, etc. all available when in development. (We found that no one runs stories if it's a separate process/script. Plus, we need the API access.)

[ndelangen]

@ericclemmons Do you think you could write a blogpost & a section in our documentation detailing this and why it's working out so well for you?

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 60 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!