iOS DX: Automagically find packager's IP address #6345

frantic · 2016-03-07T18:39:18Z

I've been thinking a lot about the pain of configuring packager's IP address on the iOS side of React Native project. This is option 1 of 2.

Seems like the most common flow is to use packager for simulator and device builds in development and pre-bundled file in production. The most reliable option of distinguishing development/production environment is inspecting DEBUG in Xcode, it is defined for "Debug" build configuration and not defined for "Release" (we already rely on this in a bunch of other places). I think it's safe to assume this is the case and add #ifdef DEBUG into generated AppDelegate.m by default. Important note here is that it doesn't hide this deep inside framework, just makes the most common case easier. Users can still rewrite logic around jsCodeLocation to match their use case (e.g. CI builds).

The second part of this diff is about automatically detecting packager's IP address. There is a script that runs as a part of every Xcode build called react-native-xcode.sh. We can use it to store developer's computer IP address to a file inside the app. We only need to do this for development builds of RN app for device. I've included a small helper function to read the IP address from that text file. This function can be helpful for figuring out jsCodeLocation.

And the last part – this PR makes RCTWebSocketExecutor use the same host/port as the corresponding bridge bundle URL. This means that by only setting jsCodeLocation to point to correct location we can get Chrome debugger to work seamlessly without any additional hacks.

Let me know if you'd prefer me to split these into 3 chunks, but I believe getting these 3 changes in will improve DX on iOS a lot.

Test plan

Patched react-native-cli on my machine to point to my local react-native checkout, react-native init TestProject. Ran it on simulator and device, confirmed loading and Chrome debugging worked in both environments without andy additional configuration. Made sure pre-bundled file is used when Xcode "Build Configuration" is set to "Release".

facebook-github-bot · 2016-03-07T18:39:41Z

By analyzing the blame information on this pull request, we identified @tadeuzagallo, @foghina and @geof90 to be potential reviewers.

frantic · 2016-03-07T18:45:50Z

Libraries/WebSocket/RCTWebSocketExecutor.m

+    if ([bundleURL.scheme hasPrefix:@"http"]) {
+      host = bundleURL.host;
+      port = [bundleURL.port integerValue];
+    }


@nicklockwood I think we've talked about reusing bundleURL in RCTWebSocketExecutor to reduce amount of URL configurations needed, because in most cases the debugger is running on the same machine as the packager. What do you think about the proposed solution?

Side note: this will fail to guess the debugger URL when loading from file, but we already have tons of problems with debugging offline files: Chrome doesn't support loading from file:/// protocol (without additional flags), we don't store sourcemaps by default, there is no ability to load file from remote device, etc.

facebook-github-bot · 2016-03-13T23:09:18Z

@frantic updated the pull request.

facebook-github-bot · 2016-03-14T13:17:12Z

@frantic updated the pull request.

Kureev · 2016-03-14T13:22:09Z

packager/react-native-xcode.sh

+DEST=$CONFIGURATION_BUILD_DIR/$UNLOCALIZED_RESOURCES_FOLDER_PATH
+
+if [[ "$CONFIGURATION" = "Debug" && "$PLATFORM_NAME" != "iphonesimulator" ]]; then
+  ipconfig getifaddr en0 > "$DEST/packager-ip.txt"


Does it make any sense to use a standard plist for this purpose instead of creating a txt file?

facebook-github-bot · 2016-03-14T23:25:22Z

@frantic updated the pull request.

frantic · 2016-03-31T22:22:49Z

Let's continue with #6362

Summary: Implemented automatic IP detection for iOS, based on #6345 and #6362. As the previous pull requests did, this works by writing the IP address of the host to a file. Closes #8091 Differential Revision: D3427657 Pulled By: javache fbshipit-source-id: 3f534c9b32c4d6fb9615fc2e2c3c3aef421454c5

Summary: Implemented automatic IP detection for iOS, based on facebook#6345 and facebook#6362. As the previous pull requests did, this works by writing the IP address of the host to a file. Closes facebook#8091 Differential Revision: D3427657 Pulled By: javache fbshipit-source-id: 3f534c9b32c4d6fb9615fc2e2c3c3aef421454c5

cglacet · 2018-07-20T16:14:25Z

Did you ended up with a solution to this. Connection to the packager is very unstable on react-native@0.55.4. It can work for days and then fails randomly, it happens often and it's quite frustrating. Here is the complete Xcode log.

Note:
While I was writing this message my phone finally found the packager. (?)
That was during the same run, I added the end of the log in case it helps.

I have tried so many things I can't even remember all of them, here is what I've done:

npm start -> Running Metro Bundler on port 8081.
Simulator works (manage to get bundle).
pings phone <-> laptop ok.
DNS are set to 8.8.8.8 and 8.8.4.4 on both my laptop and my phone.
Phone in airplane mode.

I saw that you talked about a file "$DEST/packager-ip.txt", my react-native-xcode.sh file has a different destination for the IP:

DEST=$CONFIGURATION_BUILD_DIR/$UNLOCALIZED_RESOURCES_FOLDER_PATH

if [[ "$CONFIGURATION" = "Debug" && ! "$PLATFORM_NAME" == *simulator ]]; then
  IP=$(ipconfig getifaddr en0)
  if [ -z "$IP" ]; then
    IP=$(ifconfig | grep 'inet ' | grep -v ' 127.' | cut -d\   -f2  | awk 'NR==1{print $1}')
  fi

  echo "$IP" > "$DEST/ip.txt"
fi

The command used here do work on my bash and returns 192.168.1.12.
But if I do find . -name "ip.txt" I don't find the ip file.

I don't know if it's related to this issue, but it happens from time to time that when I shake my phone, two menus are showing (still happening now that the app is running).

Another strange warning just appeared today (even though I didn't change any package in my react-native project): [warn][tid:main][RCTBridge.m:119] Class RCTCxxModule was not exported. Did you forget to use RCT_EXPORT_MODULE()?.

One last thing, my application is using web socket, and my app just crashed before and some socket may not have been closed properly (once again, I don't know if this has any influence but I prefer to add too much information in here, just in case).

Edit Ah, just a got new error (in Xcode):

Restore the connection to “Christian’s iPhone” and run “APP” again, or if “APP” is still running, you can attach to it by selecting Debug > Attach to Process > APP.

I tried to re-attach it, and here is the message I got:

Ensure “APP” is not already running, and cglacet has permission to debug it.
Then the app froze and crashed a few seconds after.

That reminds me one more thing, this all happened while my phone was plugged to my laptop (and my usb port is kind of rusty).

cglacet · 2018-07-23T13:45:56Z

I finally found the issue, it comes from my Firewall which for some reason started to block connection to my packager (OSX 10.12.6).

I realised that when tried to manually get the bundle from my phone web browser using the address http://192.168.1.12:8081/index.bundle?platform=ios&dev=true and it didn't work (timeout) even though it was working from my laptop.

I feel like this happens because of a more complex rule than "blocking a port" or blocking an application", indeed, I restarted my Firewall and relaunched the packager and now it works (in the mean time I also restarted my packager as super user, not sure if this had any effect tho). This also explains why it stoped working all of a sudden and without any change to my project.

Automagically find packager's IP address

e53dc50

facebook-github-bot added GH Review: review-needed CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. labels Mar 7, 2016

frantic reviewed Mar 7, 2016
View reviewed changes

frantic mentioned this pull request Mar 10, 2016

Automatically configure local IP address for iOS device development #6362

Closed

Kureev reviewed Mar 14, 2016
View reviewed changes

frantic closed this Mar 31, 2016

nathanajah mentioned this pull request Jun 13, 2016

Implemented automatic IP detection for iOS #8091

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

iOS DX: Automagically find packager's IP address #6345

iOS DX: Automagically find packager's IP address #6345

Uh oh!

frantic commented Mar 7, 2016

Uh oh!

facebook-github-bot commented Mar 7, 2016

Uh oh!

frantic Mar 7, 2016

Uh oh!

facebook-github-bot commented Mar 13, 2016

Uh oh!

facebook-github-bot commented Mar 14, 2016

Uh oh!

Kureev Mar 14, 2016

Uh oh!

facebook-github-bot commented Mar 14, 2016

Uh oh!

frantic commented Mar 31, 2016

Uh oh!

cglacet commented Jul 20, 2018 •

edited

Loading

Uh oh!

cglacet commented Jul 23, 2018 •

edited

Loading

Uh oh!

Uh oh!

iOS DX: Automagically find packager's IP address #6345

iOS DX: Automagically find packager's IP address #6345

Uh oh!

Conversation

frantic commented Mar 7, 2016

Uh oh!

facebook-github-bot commented Mar 7, 2016

Uh oh!

frantic Mar 7, 2016

Choose a reason for hiding this comment

Uh oh!

facebook-github-bot commented Mar 13, 2016

Uh oh!

facebook-github-bot commented Mar 14, 2016

Uh oh!

Kureev Mar 14, 2016

Choose a reason for hiding this comment

Uh oh!

facebook-github-bot commented Mar 14, 2016

Uh oh!

frantic commented Mar 31, 2016

Uh oh!

cglacet commented Jul 20, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cglacet commented Jul 23, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

cglacet commented Jul 20, 2018 •

edited

Loading

cglacet commented Jul 23, 2018 •

edited

Loading