Port selection is incomplete

[bodograumann]

When the default storybook port 6006 is in use, storybook:serve suggests using the next best port (6007). Unfortunately when I confirm that new port, storybook is still started on port 6006 and then fails.

Error: listen EADDRINUSE :::6006
    at Server.setupListenHandle [as _listen2] (net.js:1360:14)
    at listenInCluster (net.js:1401:12)
    at Server.listen (net.js:1485:7)
    at listenToServer (/home/bodo/█████████████████████████/vue-storybook-decorator-test/node_modules/@storybook/core/dist/server/build-dev.js:183:20)
    at buildDevStandalone (/home/bodo/█████████████████████████/vue-storybook-decorator-test/node_modules/@storybook/core/dist/server/build-dev.js:306:29)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:189:7)

[bodograumann]

Running it as npm run storybook:serve -- -p 6007 works though.

[pksunkara]

This is because of #46 by @loklaan. Our own argv parse is overriding storybook's parse of argv with these lines. The actual new port will be present in cliOptions according to logic here.

@loklaan I would appreciate if you could take a look at this since you have an use case of calling the vue-cli-service storybook:serve programmatically.

[loklaan]

Thanks for the investigation here @pksunkara!

I think this can be categorised as a bug in storybook.

The free-port logic should genuinely be happening after the port is resolved from both the argv and load options of storybook, rather than just against the port from argv...

But by now, this unideal behaviour might be relied on by storybook users. I'd suggest opening an issue in storybook/storybook @bodograumann to discuss this too-eager free-port logic, and in the mean time you might just have to ensure port availability for yourself.

[bodograumann]

Ok, so let me just sum up what is happening, because it took me some time to understand.

1. vue-cli-plugin-storybook is reading port 6006 from the the command line arguments.
2. It calls buildDev of storybook with the port in the loadOptions.
3. storybook is reading port 6006 from the command line arguments in getCLI.
4. It determines that the port is not free and asks to change it.
5. This unused port lands in cliOptions, but gets overwritten by the one from loadOptions.

I will create a bug report with storybook, but there is already a possible solutions for us:

We can use the environment variable SBCONFIG_PORT instead of the command line argument. The following works fine for me:

    "storybook:serve": "SBCONFIG_PORT=6006 vue-cli-service storybook:serve -c config/storybook"

[pksunkara]

I have created a PR to fix this in Storybook.