Storybook: ios device "websocket: connection error"

[shilman]

Issue by rohit-ravikoti
_Wednesday Feb 08, 2017 at 21:19 GMT_
_Originally opened as https://github.com/storybooks/react-native-storybook/issues/122_

---

Hi,
I'm not sure if this functionality is supported, but when I try to run the app on a real ios device, I get the following error:

2017-02-08 13:18:52.831 [error][tid:com.facebook.react.JavaScript] 'websocket: connection error', 'The operation couldn’t be completed. Connection refused'
2017-02-08 13:18:52.865 [error][tid:com.facebook.react.JavaScript] 'websocket: connection closed', undefined, undefined

[shilman]

Comment by admmasters
_Thursday Mar 02, 2017 at 22:59 GMT_

---

E

[shilman]

Comment by chrismcleod
_Saturday Mar 04, 2017 at 21:20 GMT_

---

@rohit-ravikoti
This is because react native uses "localhost" as the default port for the packager. This doesn't work for react native storybook. I'm guessing because it expects that the storybook server is running on the same host as the packager. However, the storybook host is not on the ios device, it is on your development computer. So, replace all the localhost references with your computer's internal IP address. That can be found by going to System Settings > Network.

If your internal ip address is 10.0.1.16:

open your react native project with XCode and go to:
_ProjectName_ > Libraries > RCTWebSocket.xcodeproj > RCTWebSocketExecutor.m

got to the method - (void)setUp and (toward the top) change
host = @"localhost" to host = @"10.0.1.16".

create storybook like this:
const StorybookUI = getStorybookUI({ port: 7007, host: "10.0.1.16" });

start it like this:
npm run storybook -- -h 10.0.1.16

After making all the changes, I'd probably close all simulators, stop all packagers and close the app on the phone.

[notgiorgi]

Isn't there some more general approach? So that the whole team won't have to do that separately?

[GitPushForceMaster]

I'm on project using CRNA, so XCode is not an option without ejecting. It would be great to have an alternative solution

[chmaltsp]

This would be amazing to have in some kind of build step when running the packager.

[ndelangen]

Would any of you be able to open a PR for this @notgiorgi @Sonblind @chmaltsp ?

[chmaltsp]

@ndelangen I could give it a shot, but I'm unsure of how to inject into the local IP into RCTWebSocketExecutor.m

[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 60 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!

[devtanc]

This is still an issue. I was able to fix with the suggestions, but it's not going to work as either a long-term fix, or a fix for a team of developers.

[rdewolff]

Yeah this this issue isn't resolved, should be left open until resolved. The provided solution is an ugly workaround.

[hariDasu]

this issue should remain open. until this is resolved I find it impractical to use storybook in an RN application. the "speed to development" promise of storybook is greatly reduced by this arduous and time consuming process.

[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!

[shilman]

@benoitdion not sure if you've seen this...

[Gongreg]

Currently you have an option to pass host as a param to getStorybookUI. It is a lot better solution than the one recommended here. Later on we could try to implement some screen to allow user to insert custom IP, but for now it should work. I am closing this issue and opening a feature request.