[React Native] Virtual device simulator in web preview

[atticoos]

Currently the web preview for React Native storybooks is empty, as it uses the device to display the components.

It would be interesting to embed a device directly in the storybook webpage via a tool like https://appetize.io/

Here's a demo, via Themoji/ios#12 (comment)

My only concern is https://appetize.io/pricing -- hard to tell if the free plan is a 100-minute total usage cap, such that it might not be a good fit.

Related to storybookjs/storybook#836

[shilman]

Love this idea. Any sense for how much work it would be? The preview area is just an iframe, so conceivably we could point it at anything!

[atticoos]

Not entirely sure myself, I know that the @expo folks have worked with this quite a bit with https://snack.expo.io/.

From my limited research, it looks like it would involve:

• A one-time creation of the app on appetize https://appetize.io/docs#creating-apps
• Thereafter updating the app on appetize https://appetize.io/docs#updating-apps, which might be something that can be done quicker since we'd only be updating the JS bundle
• And otherwise you just embed an iframe with the app's identifier/publickey

  <iframe 
    src="https://appetize.io/embed/<PUBLIC KEY>?device=iphone5s&scale=100&autoplay=false&orientation=portrait&deviceColor=black" 
    width="378px" 
    height="800px" 
    frameborder="0" 
    scrolling="no"
  ></iframe>
  

It actually looks pretty simple TBH! I'm mainly concerned about that pricing table.

cc @satya164 @ccheever @jesseruder -- do you folks see appetize being an appropriate tool for React Native storyboard previews? Or would users quickly run out of "free minutes" and be locked out until they upgrade to a paid plan?

[atticoos]

This would also mean the application is hosted/running remotely, while the storyboard server is local.

[satya164]

@brentvatne should know more about appetize!

though does it have to be appetize? why not on a local simulator/emulator or device?

[atticoos]

though does it have to be appetize? why not on a local simulator/emulator or device?

That's exactly how the React Native version of Storyboard currently works 😃 (see https://github.com/storybooks/storybook/tree/master/app/react-native)

This proposal looks at the possibility of having an embedded simulator, for scenarios where this might be hosted on the web, etc

[satya164]

Oh nice! Had no idea that existed. Time to use storyboard for my RN projects now too :D

[shilman]

@ajwhite I'm not too worried about the pricing. Storybook has an addon architecture, so we can make it an addon rather than part of core. Then people who are OK with paying can opt-in by installing the addon, but the default will always be FOSS. Obviously, it would be awesome if they could cut a better deal for Storybook users, but by no means necessary to move forward with this. Would be happy to help out if you're up for taking this on!

[Gongreg]

@ajwhite, RN storybook has hosted mode for server :) If you want to know more you can ping me on slack.

Also this idea sounds really awesome, since that would allow to completely host native storybooks in remote server.

Users would be able to simply open up the browser and play with it, no installation on pc/phone required.

[brentvatne]

re: how appetize works -- indeed it is a paid service as it cost them money to build and to run the servers, it would be nice to have an add-on option for people who want to use that! I believe that many companies would be willing to pay the small price for the convenience.

[atticoos]

Thanks @brentvatne! I've started kicking the idea around in my fork and have set it up as an addon. Sounds like this would be the right track 👍

[shilman]

@ajwhite Incredible! Super excited about this. Please let me know if you need any help. We'd love to highlight this in an upcoming release!

[atticoos]

Will do. Development is going fine -- however there's certainly some open questions I need to figure out in regards to "process".

The compiled application (.ipa or .apk for iOS / Android) needs to be uploaded whenever there are changes. This literally involves zipping the built app and uploading it to their servers. I'd like to figure out a good process that has as little friction as possible for the developer.

For example, perhaps there's an npm script that can be added for React Native storybooks that opt-in to using the simulator, which can upload the contents.

Most of my questions are procedural - nothing blocking! I'll organize remaining Q's

[shilman]

Hmm. How long does this process take? If it's something that can happen in realtime, then I suppose it could be automated with some kind of webpack magic?

If not, then I'd think that we want to have some kind of "out of date - refresh" button that gets triggered every time there's a change, and then users have to opt-in to upload it?

Just thinking out loud here.

[shilman]

Addon experts @ndelangen @mthuret @mnmtanish @tmeasday @usulpro may also want to weigh in on this ... super high impact project if we can get it working well.

[Gongreg]

@ajwhite We are also very interested in this addon. If you need any help don't hesitate to ask :)

[atticoos]

After some recent developments last night - this question is currently obsolete as we investigate another direction.

Thanks though folks!

[atticoos]

#ProgressPics

[brentvatne]

looks purdy. let me know if you need anything from me on the CRNA / Expo side of things

[anback]

@ajwhite Hello ajwhite! I am interested to help, where is your pull reqest/repo ? Cheers A

[danielkcz]

I just wanted to suggest to do this when I found http://snack.expo.io and got totally amazed by it. I am super excited that this in progress already. @ajwhite do you need help with something possibly?

I am especially surprised about how fast it shows changes in the preview when you are typing the code there. I am wondering how that is done. I am still pretty much RN rookie. Just spend couple hours to setup Genymotion on Windows and failed miserably. It would be so great being able to have storybook stories together with this emulator.

[dan-kez]

Just wanted to check in and see if this was still in under development. It'd be a very useful tool!

[ndelangen]

+1

[stale]

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!

[ndelangen]

@ajwhite Do you think you could team up with @anback ?
https://github.com/storybooks/storybook/issues/1125#issuecomment-309830493

Share your branch / repo so others can experiment off your work? 🙇

[danielkcz]

I would like to get involved in this too. I think it can make the development of react native apps a real breeze. My main motivation is that I don't have iOS device so I cannot really test stuff on that. With appetize.io this could be solved beyond basic fiddling in Snack.

I've been digging into technical stuff a little bit and I am kinda clueless how @ajwhite managed to do what's shown in picture above. Is that actually using appetize.io or is it something different?

I mean one thing is to display appetize.io in the iframe, but that's just a native app that needs to load a Javascript from somewhere, ideally from the same packager that's running with Storybook. However, that means somehow to specify at which URL the packager is running and also to handle tunneling. Hm...perhaps I am overthinking it and there is an easier way?

An alternative approach I've been thinking is using react-native-web. Long story short, it mocks react-native code with its own to be able to render on the web. It looks pretty solid. I can imagine using that for some basic component building and styling it within the comfort of browser and then simply running it on device/emulator to verify it works too.

@anback Perhaps if you have some ideas we can brainstorm a little? Apparently, @ajwhite is too busy right now :/

[danielkcz]

It's kinda pity that it died in here. Apparently, not many people think it's needed or whatever reasons.

In the meantime, I tried my plan of using react-native-web which seemed good till it wasn't. I run into obstacles (metal wall) once I wanted to use prebaked components like nativebase.io.

I also tried to investigate appetize.io more, but I am no good with the network stuff, so I am not sure about setting up a tunnel. There seems to be some option to proxy network, but I am not sure how setup that. Also, it kinda makes debugging much worst as appetize is sending a result as an image, so you can probably forget about React Dev Tools and similar.

[dan-kez]

@FredyC I would love to see this feature but I'm not really certain where to start with it. It would certainly improve the developer experience.

[stale]

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]

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!

[kirakik]

Really disappointed at how this was forgotten... Not having this feature was a deal breaker for me.

[danielkcz]

We are just using emulator alongside open storybook in a browser and it's not too bad workflow. Yea sure it would be awesome to have it in the same window, but that amount of work to make that happen is so huge that it's not worth it imo. Also, I gave up on this because even after my initial analysis nobody really bothered with a useful response. Doing that as a team effort I would be much more motivated toward it.

[atticoos]

Really disappointed at how this was forgotten...

Me too. I extend my apologies to everyone that I wasn't able to publish my prototype and any discouragement as a result.

A few things that made this hard to share and continue to work on:

• There were needs within my company that required a lot of my time that I would otherwise have to explore more here
• Complete wild west cowboy coding (I know, that's still better to share than nothing)
• Need to dig it off my backup drive as my company laptop was rotated

I encourage anyone with a passion for this feature to, please, explore it. Read through the sources of Storybook and understand how the Client + Server model is used, how the Preview and StoryStore (if that's still a thing) work, and how React Native and Storybook communicate. With those pieces understood, the goal becomes that much more achievable and easier to reason about. I understand this is the largest barrier in getting this off the ground.

I'm sorry I couldn't continue development on this or enable others to pick up where I left off. I'd love to come back and reproach this with the latest versions of Storybook. I'm going to avoid making any commitments, but I have not forgotten about this. At the very least, I'll dig this up and get it on github.

[hendrul]

Definitely web emulation with react-native-web is the way we could really get the benefits of this kind of reference/documentation tool, where the point on doing the effort of writting stories is to make it easy for the stakeholders to understand the components we build, If they have to go through all the hassel of running in the device or emulator, no one (at least my boss don't) is gonna use it... Imo it is good to have this artifacts in a web server for the audience. And on the other hand, this apptize have many problems, it is slow, it is online, and is complicated. I hope RNW gets ready for production soon

[neomib]

Hello
@ajwhite I see some time passed since you wrote you can't share your code. Can you share it now?
I'm starting to look at Storybook for our React Native app and really want to build something usefull for both the developers and our UX team.
Thanks

[patrickjm]

I don't think relying on Appetize is a good idea due to the pricing. What we could try instead (and what Appetize is probably doing under the hood):

1. Create docker images for iOS and Android emulators + a VNC server
2. Tricky: Find some way to live update the react native app inside docker containers as you develop
3. Use something like noVNC to connect to the VNC servers from HTML5 and display the client in the storybook iframe

I do think something like this could make storybook the best developer experience for react native, full stop. At least if the configuration and guides were provided for people.

[clearly-outsane]

Did this go anywhere? It sure is useful for stakeholders like someone mentioned

[dannyhw]

@clearly-outsane storybook/native is a version of storybook for native code that uses appium, it is technically possible to use with react native storybook.

If you just want to render react native in the web then you can use addon-react-native-web to render react native stories in reactjs storybook. Which personally I think is an easier option for sharing with stakeholders.

Heres some information about the react-native-web addon
https://www.dannyhwilliams.co.uk/introducing-react-native-web-storybook