Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Storybook: different port for each module

See original GitHub issue

Prerequisites

Please answer the following questions for yourself before submitting an issue. YOU MAY DELETE THE PREREQUISITES SECTION.

I am running the latest version
I checked the documentation (nx.dev) and found no answer
I checked to make sure that this issue has not already been filed
I’m reporting the issue to the correct repository (not related to React, Angular or any dependency)

Expected Behavior

It would be nice to be able to run Cypress e2e tests in parallel against different libraries configured with Storybook.

Current Behavior

What is the current behavior?

Errors about ports already being used when executing npm run affected:e2e -- --headless --base=remotes/origin/master --head=HEAD --parallel

My current workaround is to manually change the port for each project through angular.json and cypress.json so that there are no port conflicts

Apparently, the issue also happens without running in parallel.

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

Create a workspace with multiple libraries
Configure Storybook for each lib
Execute the above command

Issue Analytics

State:
Created 3 years ago
Reactions:2
Comments:8 (1 by maintainers)

Top GitHub Comments

3reactions

aivascucommented, Apr 9, 2020

This fails for me even when not running in parallel. I have a project with multiple libs all of which are configured by default to run on port 4400. When I run

> npm run e2e

The next storybook instance picks the next available port e.g 4401 but it still waits for the iframe to popup on 4400 which is busy with another storybook instance. I tried explicitly specifying the port on the e2e project config inside angular.json, but on launch it errors saying I can’t specify the port there.

1reaction

samvloeberghscommented, May 28, 2020

We are experiencing a similar issue, probably the same.

Reproduction can be found here:

https://github.com/elisa-dc/test-storybook

Steps to reproduce:

git clone git@github.com:elisa-dc/test-storybook.git
cd test-storybook
npm i
npx nx e2e --headless

credits to @elisa-dc

Top Results From Across the Web

Configure Storybook

Storybook is configured via a folder called .storybook , which contains various configuration files. Note that you can change the folder that Storybook...

Storybook Composition

View multiple Storybooks with different tech stacks in one place ... if you have a React Storybook and an Angular Storybook running on...

CLI options - Storybook

-p , --port [number], Port to run Storybook ... If you're using npm instead of yarn to publish Storybook, the commands work slightly...

Environment variables - Storybook - JS.ORG

You can use environment variables in Storybook to change its behavior in different “modes”. If you supply an environment variable prefixed with STORYBOOK_ ......

Install Storybook

... an Angular Workspace; Create React App; Create a Vue App; Ember CLI; Or any other tooling available. ... If all else fails,...