Documentation missing instructions for running on device via static bundle

[brentvatne]

If anyone wants to improve on these instructions and add them to the docs, feel free, I can do it later if nobody else jumps on it - I just wanted to document it somewhere for now.

• Open iOS/AppDelegate.m
• Comment out jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];
• Uncomment jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
• Start up the packager with npm start and then run curl http://localhost:8081/index.ios.bundle -o main.jsbundle - if this fails (as it did on my machine) add the --ipv4 flag to the end of it.
• In XCode, right click on your project directory and click Add Files to "Project Name Here" - choose the main.jsbundle file that you generated.

You can now run the app on a device (either via usb or TestFlight) without needing to have a server running.

[stolemotion]

Thanks man, I was wondering why it wouldn't run. For anyone else seeking an answer to "Could not connect to development server" look here.

[freshteapot]

Worth noting, (at least unless I am missing something) if you go down this path, you will have to run the curl step, every time. If you want to see your changes.

[magus]

I dug around and got all the way to the last step before I had to start sifting through issues, thanks for outlining the steps, now it can actually find the bundle file 👍

[drkibitz]

Just noting here, nothing is requiring you to run a node server, could also just serve a static bundle. Could also make the URL a debug app setting.

[AgtLucas]

Thanks!

[jonaswindey]

Does this mean that we can host the whole bundle on a remote nodejs server, and always load the bundle (the react part) over http from the client? This would be great to deploy new features without having to rebuild the ios app. Is this realistic or doesn't Apple allow dynamic app functionality like that?

[AgtLucas]

@jonaswindey

As far as I know, this is impossible, Apple doesn't allow this.

[jonaswindey]

https://www.meteor.com/blog/2014/10/02/Apple-hot-code-push-mobile

This could be great if we could update all our React logic dynamically without the clients having to be updated.

[magus]

It'd be great to verify whether a remote hosted bundle would work or not. It seems like it should work, you ship one version with the app, and save/update the local bundle based on some remote bundle. Updates to any wrapped native modules would still require an app store update though.

[jordpo]

Awesome- thank you!

[bradoyler]

FYI. The instructions are "available" @ https://github.com/facebook/react-native/blob/master/Examples/SampleApp/iOS/AppDelegate.m#L31

But I def had to add the step:

• In XCode, right click on your project directory and click Add Files to "Project Name Here"
• choose the main.jsbundle file that you generated via curl command.

[erinjerri]

I get the same error when I run npm start. Not sure what I'm doing wrong in the app.m file? Where do I change my IP address? run curl? I can't seem to get the packager running.

[erinjerri]

Nevermind, I realized I didn't add in the main.jsbundle

referenced here: http://stackoverflow.com/questions/29374410/how-to-build-react-native-app-for-iphone/29468098#29468098

[erinjerri]

Still getting the same error even after doing what was referenced in stackoverflow in my last post. Thoughts?

[DanielAsher]

@brentvatne this works! many thanks 👍

[crobinson]

on your app dir run react-native bundle --minify

[joshbuchea]

@brentvatne works great for me also. Thanks 👍

[BenjaminConant]

@brentvatne thanks for the issue ... followed the instructions and seems that the curl requests needs to be curl "http://localhost:8081/index.ios.bundle?platform=ios" -o main.jsbundle now as a there needs to be a platform specified .... These instructions are almost working for me but when I try to build the app I am getting an error from the dev console

Uncaught NetworkError: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'file:///Users/benconant/Library/Developer/CoreSimulator/Devices/3054F999-82…2766-011B-4294-AB40-4043145DD443/Eastern%20Car%20Service.app/main.jsbundle' failed to load.messageHandlers.executeApplicationScript @ debuggerWorker.js:18onmessage @ debuggerWorker.js:42

have you seen this before ... can't figure out what might be causing it

Also made a SO question that has more specific info ... though no answer yet

http://stackoverflow.com/questions/34187094/react-native-ios-loading-from-pre-budled-file-fails

[satya164]

@RickFrom1987 All instructions you need are here,

http://facebook.github.io/react-native/docs/running-on-device-ios.html#content
http://facebook.github.io/react-native/docs/running-on-device-android.html#content

[lrettig]

Another issue not discussed in this thread which can also cause the "Could not connect to development server" error is App Transport Security (ATS) in iOS9. This should be mentioned in the instructions as well. Cf. http://stackoverflow.com/a/34880394/2397068

[lkaihua]

@satya164 In my perspective the document is still confusing about curl steps for offline jsbundle. That's why I also ended up in this page.

I tried both the method mentioned above and also the bundle function in cli. If possible please add following example in the section Using Offline Bundle, would save quite a few efforts for starters.

react-native bundle --platfrom ios --dev false --entry-file index.ios.js \
        --bundle-output main.jsbundle

[satya164]

@kainliu AFAIK the bundle is automatically generated while generating the package.

[frantic]

@satya164 is right, we now have a special script integrated into the build process that does this for you (see #3545 (comment)). @kainliu the problem with your command line is that it won't work for images, i.e. if you are using require('./image-name.png') inside your bundle, it won't be packed into the app.

[lkaihua]

@frantic @satya164 The sh script works quite well and thanks for pointing out the shortcoming.

[joshuapinter]

@satya164 👍

[mihir0x69]

@brentvatne thanks a bunch! You saved a whole lot of time! :)

[dgilliam]

I'm doing this with a pre-existing swift codebase. Using let jsCodeLocation = NSBundle.mainBundle().URLForResource("main", withExtension: "jsbundle") inside AppDelegate.swift works

[webdeveloper0429]

HI @brentvatne!
I did Comment out jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];
Uncomment jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

in appdelegate.m

jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
// jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

Btw I get one issue.
"thread 1 signal sigabrt"
I don't know how to fix this?

[ezos86]

this shit does not work .. constantly. - No bundle on anything, It shows locally and in Product the Bundle is there.

[creeperyang]

Currently ([email protected]), the AppDelegate.m is different. We can follow steps bellow:

1. Comment the original jsCodeLocation line and add the new one:

   /*jsCodeLocation = [[RCTBundleURLProvider sharedSettings] 
   jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];*/
   jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

2. Run react-native bundle --platform ios --dev false --entry-file index.ios.js --bundle-output main.jsbundle at root dir. And you will get two files: main.jsbundle and main.jsbundle.meta.

3. Right click your project and select Add Files to "yourProject" in Xcode, select main.jsbundle you created with step 2.

Then build the app and you can run it in your device.

[grassmoon]

Thanks creeperyang! You save my time.

[UtenteBello]

I have a issue!
Is possible to run my react native app on iPad with Xcode 8.3 without having the usb cable connected?

[Shinchy]

Thanks creeperyang, I can't quite believe that we have to do that to get it working, but it works.

[BrunoBerisso]

With [email protected] for iOS I just need to generate the bundle and move it to the ios folder:

• $ react-native bundle --platform ios --dev false --entry-file index.ios.js --bundle-output main.jsbundle
• $ mv main.jsbundle ios/

Or better:
$ react-native bundle --platform ios --dev false --entry-file index.ios.js --bundle-output ios/main.jsbundle

[siddheshC]

@creeperyang How do I keep it updated everytime. Once the bundle is created, it never changes. Even after making small changes in index.ios.js, it doesn't get reflected in main.jsbundle.

How to automate that ?