Storybook: Setting publicPath almost works.

[bionikspoon]

Issue details

Overriding config.output.publicpath does not work.

Here's the scenario:

As a developer, I want QA and Design teams to be able to review storybook on review apps. I want to be able to publish storybook as a path on my main app: for example pr-2200.example.com/storybook/.

If I set public path, it almost works:

// .storybook/webpack.config.js
module.exports = (storybookBaseConfig, configType) => {
  if (configType === 'PRODUCTION') {
    storybookBaseConfig.output.publicPath = '/storybook/'
  }

  return storybookBaseConfig
}

There's one line, that seems to ignore webpack's publicPath:
https://github.com/storybooks/storybook/blob/abd4f0ef697c0b62ee724fd88e3c245efd4bd912/lib/core/src/client/manager/provider.js#L34

As a hack, I can fix this, by creating a redirect on my server.

For example, on rails, I can do:

  # config/routes.rb
  get 'iframe.html', to: redirect(path: '/storybook/iframe.html')

(edited this snippet): redirect('/storybook/iframe.html') -> redirect(path: '/storybook/iframe.html'). This subtle change forwards url params with the redirect.

And everything works!

It would better if everything worked without creating a redirect on my server.

Please specify which version of Storybook and optionally any affected addons that you're running

• storybook/react "3.2.x"

Affected platforms

• React version of the app.

[Hypnosphi]

There's some related discussion in https://github.com/storybooks/storybook/pull/3010#issuecomment-366450716

[Hypnosphi]

In case of static build, you can just serve storybook-static directory to /storybook/ path and it should work because of https://github.com/storybooks/storybook/blob/master/app/react/src/server/config/webpack.config.prod.js#L24-L29

[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 30 days. Thanks!

[xiaolin]

@bionikspoon Did you ever resolve your issue besides using a redirect? I'm also running into the same issue setting up the static content to load in a django application.

[bionikspoon]

@xiaolin no, still using the redirect.

[Hypnosphi]

What happens if you don't override publicPath from our default config?

[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 30 days. Thanks!

[chardskarth]

I really can't change webpack's output.publicPath and output.path even after using full control and this

If this is really impossible at the moment, I wonder if there's a workaround?

-- edited
Nope, I was wrong. output.publicPath was taking effect. It was output.path that wasn't working. But then --output-dir should be used to change it.

[Hypnosphi]

What do you need that for, @chardskarth ?

[chardskarth]

Well.

Intuitively, I thought to be able to control webpack’s custom output path, I’d simply have to edit ‘output.path’. But then **there’s no other way to control the output directory but to use the ‘—output-dir’ option.

And what do I need this for? To control storybook-build’s path.

[Hypnosphi]

to use the ‘—output-dir’ option

So what's wrong with this?

[chardskarth]

It may be just me. But I find this not intuitive.

[marco-silva0000]

@xiaolin I have just made the redirect solution in django. with the following view and url

from django.views.generic.base import TemplateView
class IframeView(TemplateView):
    template_name = 'iframe.html'

@chardskarth were you able to make this work without the redirect? can you provide an example?
If this is the case, it should be included on the documentation.

[chardskarth]

Just like what you mentioned to @xiaolin, I made the solution directly in java spring.

@Configuration
public class WebMvcConfiguration implements WebMvcConfigurer {

   @Override
   public void addViewControllers(ViewControllerRegistry registry) {
       registry.addViewController("/storybook/**")
            .setViewName("forward:/storybook-build/index.html");
       registry.addViewController("iframe.html")
            .setViewName("forward:/storybook-build/iframe.html");
   }
}

[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 30 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!

[kimamula]

@Hypnosphi

In case of static build, you can just serve storybook-static directory to /storybook/ path and it should work because of https://github.com/storybooks/storybook/blob/master/app/react/src/server/config/webpack.config.prod.js#L24-L29

If you visit /storybook/index.html, then it's OK.
However, if you visit /storybook, browser tries to fetch JS files under /static (not /storybook/static) which do not exist in this case.

[Hypnosphi]

OK, you need a redirect then

[alexlafroscia]

I'm running into a similar issue as @kimamula, but in my case I'm trying to include the middleware for the server in an existing Express app, mounted at /storybook

If I make the request to /storybook I get an error about loading from /static but if I go to /storybook/index.html then the assets load correctly.

[signal-intrusion]

I feel like setting up server-side redirects is not the best solution for a client-side application. What if Storybook simply obeyed the consumer's setting for publicPath if it exists?

[joselcc]

static dir path mapping to a custom endpoint was added in this PR but it is available only in alpha version (6.1.0-alpha.23)
https://github.com/storybookjs/storybook/blob/next/lib/core/docs/standalone.md#for-static-mode