Storybook: React Native Server example with storybook 5

[bryankang]

I've spent the past couple of days trying to get sb5 server running, but I end with a page without any stories populated. Only the device addons work. I've downgraded and upgraded using past issues as reference, but I'm still not seeing anything. I tried again today using version 5.1.0-alpha.36 which is set on all @storybook/* packages, cleared cache and reinstalled. No luck. I'm also using the migration guide to set these up. https://github.com/storybooks/storybook/blob/next/MIGRATION.md#react-native-server

Is it possible someone could add a react native example that includes the server feature? It shouldn't take more than 10 minutes, and it should help newcomers save hours spent on trying to get it to work. That would be much appreciated. Thanks

[bryankang]

Sorry, I tried setting everything to their defaults, and I came across the problem. Setting the --ci flag seems to break something. I removed it, and it works!

It looks like adding --ci or -p <int> breaks it for some reason. It's possible adding any flag will result in the same problem.

Going back to the original problem, I'd be glad to setup a react native example if you guys think it would help out other people.

EDIT: --ci actually works. -p was causing the problem.

[shilman]

Thanks @bryankang! I'm not sure whether this is an RN bug or simply a documentation bug, so I'll let the RN folks chime in. But it's awesome that you tracked it out down and are contributing back. We still have a few more things to do before the release, and tightening up stuff like this is absolutely part of the release process. Much appreciated!!! 🙏

[betoharres]

wow! @bryankang thanks a lot for reporting back the solution!
Currently storybook server is not working if the user follows the documentation( is there a open issue about this? ). Removing the -p 6006 flag on my package json got it finally working! It was so painful to navigate and edit knobs inside the device. I was developing for a whole month like that until I got time to track down the problem.

Thanks a lot again!

[shilman]

This sounds like a bug in RN server, not a documentation issue.

@Gongreg @benoitdion mind taking a look?

[roderickfung]

@bryankang I seem to have tried the same approach but still getting this problem. Do you mind showing me your .storybook/config.js?

[betoharres]

This sounds like a bug in RN server, not a documentation issue.

@Gongreg @benoitdion mind taking a look?

You're right, sorry my misinterpretation.

[Gongreg]

Hey, I don't see any bug.
If you set port to 6006 you also have to set the port to getStorybookUI({port: 6006});

[roydipti23]

HI this is not working for me. Tried removing -p 6006 as well. The web-server is showing infinite loaders instead of components in react native. Any help will be appreciated.

my config:

package.json
"storybook": "start-storybook",

const StorybookUIRoot = getStorybookUI({});

[Gongreg]

Hey @roydipti23, just to make sure, are you using 5.2.0 beta? There were issues in 5.1.* release.

[roydipti23]

@Gongreg ok thanks, i will try that.

[roydipti23]

@Gongreg the issue remains
Also im getting irrelevant msg on server (image attached)

Here is the code:

const StorybookUIRoot = getStorybookUI({
host: 'localhost',
port: 6006,
onDeviceUI: true,
});

script:


"storybook": "start-storybook --port 6006 --host localhost"

dependencies:
"@storybook/addon-actions": "5.2.0-beta.0",
"@storybook/addon-links": "5.2.0-beta.0",
"@storybook/react-native": "5.2.0-beta.0",
"@storybook/react-native-server": "5.2.0-beta.0"

[Gongreg]

Could you remove the port part so it defaults to 7007?

Quick questions:
Do you use simulator or phone?
Ios or android?

[roydipti23]

@Gongreg sure will do that. Using simulator / android

[Gongreg]

Also check for any error messages inside console log of browser.

[roydipti23]

@Gongreg There are no error msgs on console. PFA the emulator / server / web-server

[roydipti23]

@Gongreg Also we are on RN59

[Gongreg]

Any chance you have access to mac with ios simulator?
I am trying to think of the reasons why it might not work.

[roydipti23]

@Gongreg No i do not. And the teams across the organisation works on Android itself.

[Gongreg]

Alright @roydipti23 . I will try to find some time today to test on android simulator to see what might be the issue.

[roydipti23]

@Gongreg That would be great. Thanks alot.

[sirsavary]

Chiming in to say I'm experiencing the same issue. Created a new project using Expo v2.12.2 and Storybook v5.2.0-beta.0. I have tried with both a physical device and a simulator. What I've noticed is that I can't seem to access the Storybook server over the network, e.g. navigating to 192.168.0.x:7007 in my phone's browser shows nothing

That being said, I can access the Expo server from my phone so it's not an issue with my network/PC. I'm going to make the assumption that Storybook is only permitting connections from localhost.

...and this is exactly the case. Workaround for anyone who stumbles upon this:

1. Modify your start-storybook command to include -h 0.0.0.0 or if you're worried about security, use -h [your local IP], where local IP is usually going to be something in the form of 192.168.0.x
2. Update "storybook/index.js" and change const StorybookUIRoot = getStorybookUI({host: "[IP used with -h]"});
3. Fire up react-native/expo and Storybook server
4. Test that your phone/simulator can access [IP used]:7007 in its browser
5. Opening your RN app should now load the stories back on your PC

Note that these instructions assume you're using the default port (which in my case is 7007). If you're using a custom port, you'll need to update getStoryBookUI to use it.

[Gongreg]

hey @sirsavary, if you want to on your phone, running adb reverse tcp:7007 tcp:7007 should be enough (assuming you connect it with a cable).

[Gongreg]

Alright! @roydipti23 , try to run adb reverse tcp:7007 tcp:7007 . It is needed even when you want to run locally.

It took me wayyyy too long to set up android build >.<

[sirsavary]

@Gongreg that command works as well as my workaround, thank you. I had mixed results with the simulator -- Expo does open a tunnel but it doesn't always seem to let Storybook connect. Running adb reverse tcp:7007 tcp:7007 seems to make things work 100% of the time. Good luck tracking down the source of this bug.

[Gongreg]

@sirsavary, it is not a bug, but a "feature", just the way android works.

@shilman, we should update cli to automatically run adb reverse tcp:7007 tcp:7007 when running storybook server. Should help to avoid these issues in future.

Could someone work on it?

(adb reverse tcp:7007 tcp:7007 || true) should handle cases when adb is missing.

[sirsavary]

@Gongreg it's most definitely a bug and has nothing to do with Android. Storybook server is telling me to connect using http://192.168.0.18:7007 yet this does not work from any device on my network. I don't understand why the CLI would give off the impression I can connect to Storybook "on [my] network" if this wasn't intended.

Output from start-storybook:

Attempting to load from my mobile device over the network:

[Gongreg]

I mean if you are using remote url (not localhost) this is not what storybook is responsible about. Your machine is not allowing connection to that port. Especially since you said that adb reverse does work. I may be wrong here, though.

[Gongreg]

If you are using macbook it will work, since macbooks have firewall turned off by default. But if you are using windows or something else with firewall it is up to you to handle it.

[roydipti23]

@Gongreg Thanks alot. This worked. Couple of notes, it doens't seem to work if my script is "storybook": "start-storybook --port 7007 --host localhost",

instead it worked on "storybook": "start-storybook"

[roydipti23]

Also it would be great if you could just update the documentation for same!!

[Gongreg]

@roydipti23, maybe you would like to make a PR to update the documentation? :)

[roydipti23]

@Gongreg sure, would do that! :)

[roydipti23]

@Gongreg https://github.com/storybookjs/storybook/pull/7508
not able to add label though

[sirsavary]

@Gongreg I was referring to it as a bug because explicitly telling storybook to bind to my local IP makes it work just fine; so it seems that by default it's binding only to "localhost" but the CLI prints that remote URL is available

Worth mentioning this isn't a problem with my machine/firewall, as it can't even access Storybook "remotely" from itself (e.g. typing 192.168.0.x into the browser on the machine hosting Storybook fails).

[Gongreg]

@sirsavary:

Worth mentioning this isn't a problem with my machine/firewall, as it can't even access Storybook "remotely" from itself (e.g. typing 192.168.0.x into the browser on the machine hosting Storybook fails).

You just described that this is an issue on your end. Because there is no hidden logic for exposing storybook to outside. If your machine didn't block 7007 port you would access it from the external ip, but you cannot do that, so that implies that you are blocking the port.

[betoharres]

@Gongreg There are no error msgs on console. PFA the emulator / server / web-server

If you see this error at the end of the log:

adb: error: cannot bind listener: Operation not permitted

It's because adb is requesting root access, so you'll need to to run these two commands:

adb kill-server
adb root

Try to to add the storybook port at the build command, like so:

react-native run-android --port=7007

make sure this error did not appeared:

adb: error: cannot bind listener: Operation not permitted

If that doesn't work, you can try running:

adb reverse tcp:7007 tcp:7007

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!