storybook: [Bug]: Hardcoded host for server channel url prevents usage of custom host

Describe the bug

Code in storybook/code/lib/core-server/src/utils/server-address.ts has the method

export const getServerChannelUrl = (port: number, { https }: { https?: boolean }) => {
  return `${https ? 'wss' : 'ws'}://localhost:${port}/storybook-server-channel`;
};

with hardcoded host.

This code doesn’t work for custom host (and SSL). It generates the errors in console like:

WebSocket connection to 'wss://localhost:6006/storybook-server-channel' failed

To Reproduce

Just start storybook with custom `--host` and `--https`

System

Environment Info:

  System:
    OS: macOS 12.6.1
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.1/bin/npm
  Browsers:
    Firefox: 107.0
    Safari: 16.1
  npmPackages:
    @storybook/addon-actions: ^6.5.13 => 6.5.13 
    @storybook/addon-essentials: ^6.5.13 => 6.5.13 
    @storybook/addon-interactions: ^6.5.13 => 6.5.13 
    @storybook/addon-links: ^6.5.13 => 6.5.13 
    @storybook/builder-vite: ^0.2.5 => 0.2.5 
    @storybook/react: ^6.5.13 => 6.5.13 
    @storybook/testing-library: ^0.0.13 => 0.0.13 
    @storybook/testing-react: ^1.3.0 => 1.3.0

Additional context

No response

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 10
Comments: 26 (20 by maintainers)

Most upvoted comments

@ndelangen Ok, I can have a look and see with what I can come up in the upcoming weeks.

medihack on Mar 15, 2023

Not sure if it is worth to re-open but the PR #22055 does not take a different base URL into account. So if you would be running with:

  ...
  async viteFinal(config) {
    return mergeConfig(config, {
      base: '/storybook',
    });
  },
  ...

It will fail due https://github.com/storybookjs/storybook/pull/22055/files#diff-3a2950085f45f23c305d6ec255529302b1d70eb2a078a8111a6c9375159898b6R89 not taking this /storybook url into account

kevinvalk on Jul 4, 2023

Ermahgerd!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.14 containing PR #22055 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb@latest upgrade

shilman on May 23, 2023

Jiminy cricket!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.1.0-alpha.8 containing PR #22055 that references this issue. Upgrade today to the @future NPM tag to try it out!

npx sb@next upgrade --tag future

shilman on Apr 24, 2023

Are there no workarounds so far?

I have used the https://www.npmjs.com/package/patch-package for patched the code directly (write my own host). It’s seems stupid, but works)

Not a too bad idea, when using yarn, patch functionality is even built in. I forget about this constantly.

krossekrabbe on Feb 13, 2023

Are there no workarounds so far?

I have used the https://www.npmjs.com/package/patch-package for patched the code directly (write my own host). It’s seems stupid, but works)

KhodeN on Feb 13, 2023

Can confirm, the WSS port and host must be configurable individually and independent from the server host and port!

If sb runs behind a proxy / load balancer, you might want the server to run on localhost:8080. That does not mean that WSS requests made by the browser should go to wss://localhost:8080. Instead you want your proxy / loadbalancer here, e.g. wss://storybook.domain:443 which then redirects traffic internally to the storybook server on 8080.

krossekrabbe on Dec 30, 2022