How to deploy storybook into a subpath

See original GitHub issue

I’d like to be able to deploy storybook into the subpath of /storybook, such that I can target everything related to storybook in an nginx config to use my local domain of “https://test.dev”.

I read that this is possible in the documentation, but couldn’t get it working. If i extend the webpack config like so:

   module.exports = (storybookBaseConfig, configType) => {

	storybookBaseConfig.output.publicPath = '/storybook/';

	// Return the altered config
	return storybookBaseConfig;

};

It works for the “manager.bundle.js” and “preview.bundle.js”, but not for “iframe.html” or webpack hot reloading or local css imported via absolute paths.

Is there an easy way to make sure that all requests related to running storybook get prefixed with /storybook?

Alternatively, is there a way to run storybook w/ https via the cli? I can set the host to 'test.dev, but I need it to be https for it to work in dev.

Issue Analytics

State:
Created 6 years ago
Comments:26 (2 by maintainers)

Top GitHub Comments

30reactions

yurist38commented, Mar 10, 2021

I’ve just figured this out finally! 🎉 To set the path prefix you need to set publicPath in both webpackFinal and managerWebpack functions in the .storybook/main.js like this:

// .storybook/main.js
module.exports = {
  webpackFinal: async (config, { configType }) => {
    config.output.publicPath = '/my-prefix/';
    return config;
  },
  managerWebpack: async (config) => {
    config.output.publicPath = '/my-prefix/';
    return config;
  },
};

Also, I had to build Storybook with the preview-url parameter to make it find the iframe file:

build-storybook -- --preview-url=/my-prefix/iframe.html

For some reason, I have found nothing about it in official docs, had to google it a lot…

23reactions

oziocommented, Dec 27, 2018

the link is broken, can you update it, please?

Top Results From Across the Web

Unable to host Storybook on subpath - Stack Overflow

I have a storybook for my react components, and when trying to host the static build of story book at root path (i.e: ......

How to deploy storybook into a subpath #1291 - Issuehunt

I'd like to be able to deploy storybook into the subpath of /storybook, such that I can target everything related to storybook in...

Publish Storybook

First, we'll need to build Storybook as a static web application. The functionality is already built-in and pre-configured for most supported frameworks. Others ......

Running Storybook from a separate folder - Darek Kay

When calculating the project root, Storybook first searches for the closest parent .git folder. In my local development environment, this path ...

Subdirectory Setup - BookStack

By default Apache on Ubuntu serves from the /var/www/html directory. In this example, we'll use /var/www/bookstack to store our BookStack install. If you...