Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions code/lib/core-server/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,6 @@
"express": "^4.17.3",
"fs-extra": "^11.1.0",
"globby": "^11.0.2",
"ip": "^2.0.0",
"lodash": "^4.17.21",
"open": "^8.4.0",
"pretty-hrtime": "^1.0.3",
Expand All @@ -101,7 +100,6 @@
"devDependencies": {
"@storybook/addon-docs": "workspace:*",
"@types/compression": "^1.7.0",
"@types/ip": "^1.1.0",
"@types/node-fetch": "^2.5.7",
"@types/ws": "^8",
"boxen": "^7.1.1",
Expand Down
30 changes: 25 additions & 5 deletions code/lib/core-server/src/utils/__tests__/server-address.test.ts
Original file line number Diff line number Diff line change
@@ -1,13 +1,24 @@
import { describe, beforeEach, it, expect, vi } from 'vitest';
import ip from 'ip';
import os, { type NetworkInterfaceInfoIPv4 } from 'os';
import { getServerAddresses } from '../server-address';

vi.mock('ip');
const mockedIp = vi.mocked(ip);
vi.mock('os');
const mockedOs = vi.mocked(os);

describe('getServerAddresses', () => {
const mockedNetworkAddress: NetworkInterfaceInfoIPv4 = {
address: '192.168.0.5',
netmask: '255.255.255.0',
family: 'IPv4',
mac: '01:02:03:0a:0b:0c',
internal: false,
cidr: '192.168.0.5/24',
};

beforeEach(() => {
mockedIp.address.mockReturnValue('192.168.0.5');
mockedOs.networkInterfaces.mockReturnValue({
eth0: [mockedNetworkAddress],
});
});

it('builds addresses with a specified host', () => {
Expand All @@ -19,6 +30,15 @@ describe('getServerAddresses', () => {
it('builds addresses with local IP when host is not specified', () => {
const { address, networkAddress } = getServerAddresses(9009, '', 'http');
expect(address).toEqual('http://localhost:9009/');
expect(networkAddress).toEqual('http://192.168.0.5:9009/');
expect(networkAddress).toEqual(`http://${mockedNetworkAddress.address}:9009/`);
});

it('builds addresses with default address when host is not specified and external IPv4 is not found', () => {
mockedOs.networkInterfaces.mockReturnValueOnce({
eth0: [{ ...mockedNetworkAddress, internal: true }],
});
const { address, networkAddress } = getServerAddresses(9009, '', 'http');
expect(address).toEqual('http://localhost:9009/');
expect(networkAddress).toEqual('http://0.0.0.0:9009/');
});
});
2 changes: 1 addition & 1 deletion code/lib/core-server/src/utils/server-address.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { describe, it, expect, vi } from 'vitest';
import detectPort from 'detect-port';
import { getServerAddresses, getServerPort, getServerChannelUrl } from './server-address';

vi.mock('ip');
vi.mock('os');
vi.mock('detect-port');
vi.mock('@storybook/node-logger');

Expand Down
11 changes: 9 additions & 2 deletions code/lib/core-server/src/utils/server-address.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import ip from 'ip';
import os from 'os';

import { logger } from '@storybook/node-logger';
import detectFreePort from 'detect-port';
Expand All @@ -10,7 +10,7 @@ export function getServerAddresses(
initialPath?: string
) {
const address = new URL(`${proto}://localhost:${port}/`);
const networkAddress = new URL(`${proto}://${host || ip.address()}:${port}/`);
const networkAddress = new URL(`${proto}://${host || getLocalIp()}:${port}/`);

if (initialPath) {
const searchParams = `?path=${decodeURIComponent(
Expand Down Expand Up @@ -46,3 +46,10 @@ export const getServerPort = (port?: number, { exactPort }: PortOptions = {}) =>
export const getServerChannelUrl = (port: number, { https }: { https?: boolean }) => {
return `${https ? 'wss' : 'ws'}://localhost:${port}/storybook-server-channel`;
};

const getLocalIp = () => {
const allIps = Object.values(os.networkInterfaces()).flat();
const allFilteredIps = allIps.filter((ip) => ip && ip.family === 'IPv4' && !ip.internal);

return allFilteredIps.length ? allFilteredIps[0]?.address : '0.0.0.0';

@valentinpalkovic valentinpalkovic Feb 19, 2024

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am curious whether returning 0.0.0.0 makes sense. Can the Storybook server be reached in the browser when 0.0.0.0 is used? If not, I would rather return null/undefined and handle it appropriately in the getServerAddresses function. It should return networkAddress: undefined. In this case, the network address shouldn't be logged at all to the user's console, after the server starts.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure which returned value is better. The Storybook server is reachable via 0.0.0.0 in my browsers. Maybe it also depends on how to interpret 'On your network' in the log.

};
11 changes: 0 additions & 11 deletions code/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -5556,7 +5556,6 @@ __metadata:
"@storybook/types": "workspace:*"
"@types/compression": "npm:^1.7.0"
"@types/detect-port": "npm:^1.3.0"
"@types/ip": "npm:^1.1.0"
"@types/node": "npm:^18.0.0"
"@types/node-fetch": "npm:^2.5.7"
"@types/pretty-hrtime": "npm:^1.0.0"
Expand All @@ -5571,7 +5570,6 @@ __metadata:
express: "npm:^4.17.3"
fs-extra: "npm:^11.1.0"
globby: "npm:^11.0.2"
ip: "npm:^2.0.0"
lodash: "npm:^4.17.21"
node-fetch: "npm:^3.3.1"
open: "npm:^8.4.0"
Expand Down Expand Up @@ -7491,15 +7489,6 @@ __metadata:
languageName: node
linkType: hard

"@types/ip@npm:^1.1.0":
version: 1.1.3
resolution: "@types/ip@npm:1.1.3"
dependencies:
"@types/node": "npm:*"
checksum: af576e33830196be01b71c48ad5f83380a1c51d62f394a5601e8c2a5b8b31cf6dc8fe71ac39c38d806bcf1d6f1c5c8205c129eca6b6d168c0df7ab3722df23b9
languageName: node
linkType: hard

"@types/is-empty@npm:^1.0.0":
version: 1.2.3
resolution: "@types/is-empty@npm:1.2.3"
Expand Down