Prototyping React Native with Appetize.io

I work remote and have been prototyping a React Native app. I’ve really enjoyed working on the React part, but I’ve also had spent way more hours than I should have trying to share my prototypes with my co-workers.

There are quite a few companies setting up to help with the React Native release process. In no particular order, here are some companies I’ve found that might present a solution that you are interested in:

  1. React Native Playground
  2. Reploy.io
  3. Appetize.io
  4. Siphon

These aren’t all equal, React Native Playground is like jsbin, where you can throw up single file apps. This is how Facebook demos their examples. React Native Playground makes it clear that they are backed by Appetize, which is what brought me to Appetize initially. However, if I were going to try this again, I’d probably try Reploy or Siphon since they seem to have provided a solution to my problems with some command line tools.

Appetize.io doesn’t have anything which is specific to React Native. It’s mostly just a place to demo any Android or iOS apps as far as I know. I was using Xcode 7.3 and React Native 0.29. Here are the steps that I used to deploy my React Native app to Appetize.io.

  1. Change the Build Scheme in XCode to Release. There is a fairly good explanation of how to do this in the Apple Developer Docs. It’s not tricky, but the React Native docs are just a little short on details for someone who is new to Mobile development.
  2. Use the offline bundle. This is mentioned in the React Native docs, but no details are given for how it’s done. To complete this step I actually used the React Native cli tools but only after quite a bit of searching. The command is:
react-native bundle --platform ios --dev false --entry-file index.ios.js --bundle-output ios/main.jsbundle —-reset-cache

3. The next step is to actually use the bundle that you created in your app. When you start a React Native app you get some cool auto reloading, which is done by using a server to deploy your code to the simulator. However, when you’re releasing the app, you need the code to work without the server, which is why it’s called an “offline” bundle, I think. In any case the React Native docs are a little incomplete. The docs tell you “Uncomment the line…” which is wrong, the line they want you to uncomment doesn’t exist. What I found that works is to remove

jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];

and replace it with

jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

This made sense to me because I just created the main.jsbundle file in step 2 and this line says the jsCodeLocation is “main.jsbundle”.

4. Now you just have to Clean and Build the app again.

5. You now can upload the app to Appetize.io from the dashboard after you zip or tar it. The only thing that was unclear here was that the path on the upload page points you at the debug directory for the .app file, but the release build will show up in the release directory and it’s the one that uses the “offline” bundle.

tar -czf ~/Documents/app.tar.gz ~/Library/Developer/Xcode/DerivedData/<project-name>/Build/Products/Release-iphonesimulator/*.app

I’m sure there are multiple ways to solve this problem, but at the time I wrote this I had a lot of trouble getting this done. I’m hoping that writing this out will help someone else get their prototype shared quicker than it took me.

I’d also love to see some better documentation that is written by someone more skilled and informed than I am. If anyone has other release guides that they can share or can tell me some steps that I wasn’t clear on please let me know in the comments.