How do we connect Storybook, Zeplin and a React Native Application?
Ashwin-Mothilal opened this issue · 3 comments
Hey Hi, thank you for creating this amazing plugin.
How do we connect Storybook, Zeplin and a React Native Application?
I have connected the React Native and Zeplin, it works perfectly.
I have connected the React Native and Storybook, it works perfectly.
When I try to connect these three, facing this issue,
CLI log
2020-09-05 17:30:16 - info - Zeplin CLI - v1.0.4
2020-09-05 17:30:16 - debug - connect options: {"configFiles":[".zeplin/components.json"],"devMode":false,"devModePort":9756,"devModeWatch":true,"plugins":[]}
2020-09-05 17:30:16 - debug - .zeplin/components.json content: {"plugins":[{"name":"@zeplin/cli-connect-react-plugin"},{"name":"@zeplin/cli-connect-storybook-plugin","config":{"url":"http://localhost:8081"}}],"components":[{"path":"scripts/components/Button.js","zeplinNames":["Primary","Secondary","Default","Warning","Success","Danger"]}],"projects":[""]}
2020-09-05 17:30:16 - debug - component config files: [{"plugins":[{"name":"@zeplin/cli-connect-react-plugin"},{"name":"@zeplin/cli-connect-storybook-plugin","config":{"url":"http://localhost:8081"}}],"components":[{"path":"scripts/components/Button.js","zeplinNames":["Primary","Secondary","Default","Warning","Success","Danger"]}],"projects":[""]}]
2020-09-05 17:30:17 - debug - Initializing @zeplin/cli-connect-react-plugin.
2020-09-05 17:30:17 - debug - Initializing @zeplin/cli-connect-storybook-plugin.
2020-09-05 17:30:17 - debug - @zeplin/cli-connect-storybook-plugin has init method. Initializing with {"url":"http://localhost:8081"}
2020-09-05 17:30:17 - error - Connecting components to Zeplin components failed. 404 - {"type":"Buffer","data":[60,33,68,79,67,84,89,80,69,32,104,116,109,108,62,10,60,104,116,109,108,32,108,97,110,103,61,34,101,110,34,62,10,60,104,101,97,100,62,10,60,109,101,116,97,32,99,104,97,114,115,101,116,61,34,117,116,102,45,56,34,62,10,60,116,105,116,108,101,62,69,114,114,111,114,60,47,116,105,116,108,101,62,10,60,47,104,101,97,100,62,10,60,98,111,100,121,62,10,60,112,114,101,62,67,97,110,110,111,116,32,71,69,84,32,47,105,102,114,97,109,101,46,104,116,109,108,60,47,112,114,101,62,10,60,47,98,111,100,121,62,10,60,47,104,116,109,108,62,10]}
2020-09-05 17:30:17 - debug - StatusCodeError: Connecting components to Zeplin components failed. 404 - {"type":"Buffer","data":[60,33,68,79,67,84,89,80,69,32,104,116,109,108,62,10,60,104,116,109,108,32,108,97,110,103,61,34,101,110,34,62,10,60,104,101,97,100,62,10,60,109,101,116,97,32,99,104,97,114,115,101,116,61,34,117,116,102,45,56,34,62,10,60,116,105,116,108,101,62,69,114,114,111,114,60,47,116,105,116,108,101,62,10,60,47,104,101,97,100,62,10,60,98,111,100,121,62,10,60,112,114,101,62,67,97,110,110,111,116,32,71,69,84,32,47,105,102,114,97,109,101,46,104,116,109,108,60,47,112,114,101,62,10,60,47,98,111,100,121,62,10,60,47,104,116,109,108,62,10]} at new StatusCodeError (/Users/ashwinmothilal/.nvm/versions/node/v12.16.2/lib/node_modules/@zeplin/cli-connect-storybook-plugin/node_modules/request-promise-core/lib/errors.js:32:15) at Request.plumbing.callback (/Users/ashwinmothilal/.nvm/versions/node/v12.16.2/lib/node_modules/@zeplin/cli-connect-storybook-plugin/node_modules/request-promise-core/lib/plumbing.js:104:33) at Request.RP$callback [as _callback] (/Users/ashwinmothilal/.nvm/versions/node/v12.16.2/lib/node_modules/@zeplin/cli-connect-storybook-plugin/node_modules/request-promise-core/lib/plumbing.js:46:31) at Request.self.callback (/Users/ashwinmothilal/.nvm/versions/node/v12.16.2/lib/node_modules/@zeplin/cli-connect-storybook-plugin/node_modules/request/request.js:185:22) at Request.emit (events.js:310:20) at Request.<anonymous> (/Users/ashwinmothilal/.nvm/versions/node/v12.16.2/lib/node_modules/@zeplin/cli-connect-storybook-plugin/node_modules/request/request.js:1154:10) at Request.emit (events.js:310:20) at IncomingMessage.<anonymous> (/Users/ashwinmothilal/.nvm/versions/node/v12.16.2/lib/node_modules/@zeplin/cli-connect-storybook-plugin/node_modules/request/request.js:1076:12) at Object.onceWrapper (events.js:416:28) at IncomingMessage.emit (events.js:322:22)
2020-09-05 17:30:17 - info - Please check /Users/ashwinmothilal/.zeplin/cli.log for details.
component.json
{
"plugins": [
{
"name": "@zeplin/cli-connect-react-plugin"
},
{
"name": "@zeplin/cli-connect-storybook-plugin",
"config": {
"url": "http://localhost:8081"
}
}
],
"components": [
{
"path": "scripts/components/Button.js",
"zeplinNames": [
"Primary",
"Secondary",
"Default",
"Warning",
"Success",
"Danger"
]
}
],
"projects": ["---"]
}
Is there a running instance on your local (listening to port 8081) when you execute the CLI?
If the answer is no, you can either start a local Storybook instance by yourself and execute the CLI or provide startScript or command parameter as described in here to start Storybook automatically.
Otherwise, it means thathttp://localhost:8081 returns a 404 response when the CLI try to load stories from it. Most likely something other than Storybook is running on 8081.
I have my React Native Storybook app running on my http://localhost:8081.
When I try to open the link there is no iframe.html on it, which the CLI complaints.
I'm not sure how to debug further, You can try this repo which I'm currently working on.
Hey,
I've found out there are a couple of issues using the plugin with a @storybook/react-native setup.
The plugin is not designed to access to the application instance living in the simulator. I've installed @storybook/react-native-server to your project to see if we can fetch Storybook data somehow while the simulator is running. Unfortunately, the web UI provided with this package does not expose any parameters that we use to resolve components names automatically.
We will be exploring any options to provide the same experience with the other frameworks, in the meantime, I suggest you to use manual storybook configuration detailed here.