Allow custom URLs in `outputStartupInformation`

[kaelig]

Is your feature request related to a problem? Please describe I'm looking to output a special URL in this box:

Describe the solution you'd like

An option that allows to extend this object would be great, but perhaps this is a bigger discussion and people will have other ideas:

https://github.com/storybookjs/storybook/blob/65c8ca746f441464a095d623117af3f89ac4d803/lib/core-server/src/utils/output-startup-information.ts#L54-L57

Describe alternatives you've considered

Looking for alternatives!

Are you able to assist to bring the feature to reality? Yes, if someone can tell me what approach would be appropriate, I'll be happy to submit a PR!

Additional context

We proxy Storybook so it's available at https://storybook.secretdomain for every cloud-hosted dev environment. This means I can share URLs to Storybooks on all our my dev environments with other people on our VPN (great for collaboration!). Now… these URLs are a bit tricky to remember (it's got some unique IDs in it), so it'd be nice if when running yarn storybook, it appeared there.

As far as Storybook is concerned, it's running on localhost:6006, and then we use this nginx config to serve it at a separate URL:

server {
    listen 443 ssl;
    server_name storybook.<%= ENV['SECRETDOMAIN'] %>;

    access_log /dev/stdout;
    error_log /dev/stderr;

    ssl_certificate /etc/nginx/ssl/tls.crt;
    ssl_certificate_key /etc/nginx/ssl/tls.key;

    location / {
        proxy_pass http://127.0.0.1:6006;
    }
}

Hope this helps!

[shilman]

@kaelig I love this feature. Here's one idea for how to implement it in .storybook/main.js (which should be accessible from that code):

module.exports = {
  core: {
    customUrls: {
      'My custom URL': 'https://storybook.yolo.dev'
    }
  }
}

[kaelig]

In the meantime, here's a workaround that will show a custom URL before the info box:

// main.js
module.exports = {
  webpackFinal: async (config) => {  
    config.plugins.push(new DisplayRemoteUrlPlugin());
    return config;
  },
};

/**
 * Display remote url to Storybook
 */
class DisplayRemoteUrlPlugin {
  #firstRun = true;
  #remoteStorybookURL = `https://storybook.xxx`;

  apply(compiler) {
    compiler.hooks.done.tap('Display URL', () => {
      if (this.#firstRun) {
        this.#firstRun = false;
        const {logger} = require('@storybook/node-logger');
        const boxen = require('boxen');
        const dedent = require('dedent');
        const chalk = require('chalk');

        console.log(
          boxen(
            dedent`
              ${chalk.blueBright('💫 Preview URL:')}
              ${chalk.underline(this.#remoteStorybookURL)}
              ${chalk.gray('Tip: share it around and get feedback instantly.')}
            `,
            {borderStyle: 'round', padding: 1, borderColor: 'blueBright'},
          ),
        );
      }
    });
  }
}

Update 2021-07-07: UX improvements to make the URL more prominent (see screenshot below)

[kaelig]

👋🏻 I updated the Webpack plugin that we use at Shopify to display remote URLs. Hope this helps!

[rohanrajpal]

Is there any way to do this now that Storybook uses Vite?

[rohanrajpal]

@kaelig I love this feature. Here's one idea for how to implement it in .storybook/main.js (which should be accessible from that code):

module.exports = {
  core: {
    customUrls: {
      'My custom URL': 'https://storybook.yolo.dev'
    }
  }
}

An option like this would be highly appreciated, I am reverse proxying storybook behind a local nginx so that all my cookies are sent when sending requests to the backend.

That allows me to build even more components on storybook.

this is my nginx conf right now

server {
    listen 80;
    server_name  storybook.local.dev;

    client_max_body_size 50M;

    location / {
            proxy_pass http://host.docker.internal:6006/;
            error_log /var/log/storybook_errors.log;

            # websocket support
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";

            proxy_set_header X-Real-IP       $remote_addr;
            proxy_set_header Host      $host;
            proxy_set_header X-Forwarded-Proto https;
    }

    listen 443 ssl;
    ssl_certificate /etc/nginx/certs/cert.pem;
    ssl_certificate_key /etc/nginx/certs/key.pem;
}

while https://storybook.local.dev opens great, issue is that it tries to connect to incorrect websocket

the 6006 shouldnt be there and i see no option to configure it!

[rohanrajpal]

Hey @IanVS do you might have any idea on how to achieve the above?

[IanVS]

@rohanrajpal this seems more related to reverse proxy / vite configuration, but is the note in https://vitejs.dev/config/server-options.html#server-hmr helpful at all?