Automated IP Switching for Simulator/Devices

[aphillipo]

I have no idea where to add this but here is how to automate (mostly, under some conditions, your milage may vary - your network connection must be en0 etc.) changing the IP address of your machine when you want to run on the device.

1. Click Your Project -> Build Phases -> Click the + -> New Run Script Phase
2. Add the following code:

INFOPLIST="${TARGET_BUILD_DIR}/${INFOPLIST_PATH}"
echo "writing to $INFOPLIST"
PLISTCMD="Set :SERVER_IP $(ifconfig | grep inet\ | tail -1 | cut -d " " -f 2)"
echo -n "$INFOPLIST" | xargs -0 /usr/libexec/PlistBuddy -c "$PLISTCMD"

Next add the following to AppDelegate.m replacing the usual jsCodeLocation line:

NSString *jsBundleUrlString;

if (TARGET_IPHONE_SIMULATOR) {
  jsBundleUrlString = @"http://localhost:8081/index.ios.bundle";
} else {
  NSString *serverIP = [[NSBundle mainBundle] objectForInfoDictionaryKey:@"SERVER_IP"];
  NSString *jsCodeUrlString = [NSString stringWithFormat:@"http://%@:8081/index.ios.bundle", serverIP];
  jsBundleUrlString = [jsCodeUrlString stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
}

jsCodeLocation = [NSURL URLWithString:jsBundleUrlString];

And that's it, you should now be able to switch between the simulator and a device without any thought about where you are... Let me know if this works for you.

[jaygarcia]

This look pretty damn awesome.

I've just been bundling with and use bundled code for devices. I like this a lot more.

[mschwartz]

Nice work.

A couple of points/issues perhaps.

Where is TARGET_IPHONE_SIMULATOR being set?

There's no logic for production builds (e.g. without a server at all).

[jaygarcia]

TargetConditionals.h @mschwartz.

In Xcode, CMD+Click (like Webstorm, etc.)

[jaygarcia]

i've been using this with pre-bundling for phone testing. I like @aphillipo's approach much more.

#if TARGET_IPHONE_SIMULATOR

  jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];

  /**
   * OPTION 2
   * Load from pre-bundled file on disk. To re-generate the static bundle
   * from the root of your project directory, run
   *
   * $ react-native bundle --minify
   *
   * see http://facebook.github.io/react-native/docs/runningondevice.html
   */
#else

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

#endif

[mschwartz]

Yeah...

I was suggesting #if / else if / else to handle production, target, and
emulator..,

On Thursday, November 19, 2015, Jay Garcia notifications@github.com wrote:

i've been using this with pre-bundling for phone testing. I like
@aphillipo https://github.com/aphillipo's approach much more.

#if TARGET_IPHONE_SIMULATOR

jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];

/**

• OPTION 2

• Load from pre-bundled file on disk. To re-generate the static bundle

• from the root of your project directory, run
  *

• $ react-native bundle --minify
  *

• see http://facebook.github.io/react-native/docs/runningondevice.html
  */
  #else

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

#endif

—
Reply to this email directly or view it on GitHub
#4245 (comment)
.

[aphillipo]

I should have said, this is for development only. Feel free to add a version to automate the build based upon the RELEASE config stuff too.

This is more about when someone comes over to your desk and you want to show them what you;ve been working on on device. The mad scrabble to get the right IP etc. is annoying.

[mschwartz]

Understood.

FWIW, my development machine has IP 192.168.0.14. I just used that IP in
AppDelegate.m and it works in both simulator and on device.

There was a bug that prevented this from working when one of iOS9.1 or
Xcode 7.1 came out. It didn't work with the 9.x simulators. I was able to
install the 8.x simulators which did work. It seems to be fixed in one of
the more recent (newer than 0.12) versions of RN.

Your solution is excellent if you have multiple people working on the
project or you use multiple machines (work/home or laptop/desktop kind of
thing). In those cases, you can't rely on a fixed IP like 192.168.0.14.

Cheers

On Fri, Nov 20, 2015 at 6:30 AM, Andrew Phillipo notifications@github.com
wrote:

I should have said, this is for development only. Feel free to add a
version to automate the build based upon the RELEASE config stuff too.

This is more about when someone comes over to your desk and you want to
show them what you;ve been working on on device. The mad scrabble to get
the right IP etc. is annoying.

—
Reply to this email directly or view it on GitHub
#4245 (comment)
.

[aphillipo]

Yeah, I've just been consistently working from cafe's and hotel lobbies on a project outside of work. It's annoying having to change it and getting out of sync so I decided to fix it!

For pointing APIs at my local machine does anyone know how I'd access the Info.plist value from the React/JS side of the app?

[mschwartz]

Try this:

ifconfig | grep inet\ | tail -1 | cut -d " " -f 2

I think that will work for any en* interface.

On Fri, Nov 20, 2015 at 6:55 AM, Andrew Phillipo notifications@github.com
wrote:

Yeah, I've just been consistently working from cafe's and hotel lobbies on
a project outside of work. It's annoying having to change it and getting
out of sync so I decided to fix it!

For APIs the app uses does anyone know how I'd access the Info.plist value
from the React/JS side of the app?

—
Reply to this email directly or view it on GitHub
#4245 (comment)
.

[aphillipo]

I've updated the original code with your suggestion, @mschwartz.

[mschwartz]

Someone needs to test that out on a system with en0 and en1, maybe with
both connected.

On Fri, Nov 20, 2015 at 9:13 AM, Andrew Phillipo notifications@github.com
wrote:

I've updated the original code with your suggestion, @mschwartz
https://github.com/mschwartz.

—
Reply to this email directly or view it on GitHub
#4245 (comment)
.

[skevy]

@aphillipo this is a great tip!

I'm not sure this should make it in and be default behavior, but perhaps this should exist in a "Tips & Tricks" section of the docs? Thoughts @ide?

[mschwartz]

@skevy I did this up even better.

https://medium.com/modus-create-front-end-development/automated-ip-configuration-for-react-native-development-7bbf9a7a18bc#.5nh2789rj

@aphillipo did the work that inspired me.

[mschwartz]

Same blog post here:

http://moduscreate.com/automated-ip-configuration-for-react-native-development/

fully automated, including fix for setting IP for the debugging web socket :)

[aphillipo]

Amazing stuff Michael - thanks for the credit and improving the solution considerably 👍