[CLI] Changing packager port not supported when running run-ios, run-android

[hramos]

Description

It is not currently possible to launch an iOS or Android app and have it connect to a port other than the default of 8081. While it is possible to separately start the packager on a custom port, e.g. react-native start --port=8088, the above two commands are hardcoded to always attempt to start a packager on 8081.

This is troublesome on systems where port 8081 is already in use, as is the case with McAfee AV. Killing the process is not an option in this case.

Reproduction Steps and Sample Code

1. Run react-native start --port=8088.
2. Observe that packager is now running on port 8088:

┌────────────────────────────────────────────────────────────────────────────┐ 
│  Running packager on port 8088.                                            │ 
│                                                                            │ 
│  Keep this packager running while developing on any JS projects. Feel      │ 
│  free to close this tab and run your own packager instance if you          │ 
│  prefer.                                                                   │ 
│                                                                            │ 
│  https://github.com/facebook/react-native                                  │ 
│                                                                            │ 
└────────────────────────────────────────────────────────────────────────────┘ 

3. Launch the iOS or Android app using react-native run-ios, react-native run-android.

If port 8081 is available, the run* command will launch another packager process on port 8081. If the port is not available, you will see the following error:

Port 8081 already in use, packager is either not running or not running correctly

This prevents the developer from launching the app, and effectively makes it so that React Native can only be developed on systems where port 8081 is available.

Solution

We still want run-ios and run-android to launch the packager if none is running, but we cannot assume the packager will always run on port 8081. We can add a port option to the CLI when run-ios or run-android are used.

We also need to update the iOS template as it has a hardcoded check on whether the packager is running on port 8081.

Finally, we need to make sure that once the app launches, it can successfully connect to whatever port is being used. This may require updates to the iOS, Android templates.

Additional Information

• React Native version:

$ react-native --version
react-native-cli: 2.0.1
react-native: 0.44.0

• Platform: iOS, Android
• Development Operating System: macOS

[hramos]

Related issues:

• Port is hard coded to 8081 on iOS, Android templates #9145

[adamweeks]

As a new user to RN who's work laptop will not let him kill the process running on 8081, this would be super helpful.

There also don't seem to be any proper instructions on the workaround for this. Lots of suggestions, none of which have worked for me yet.

[chtrinh]

Fix for andriod: #15316

[cmdshepard]

@hramos Is this still outstanding for iOS?

[DaKaZ]

This is still an outstanding issue. I have a patch file which we use to setup both iOS and Android appropriately, but its cumbersome to have to apply it after EVERY yarn add/update. I think I have a good enough grasp on this problem to submit a PR, but before I do, I would like to ask @hramos if my approach is acceptable.

Basically, setting the port number via CLI is very difficult because of the vast number of different source files that reference the port number. As such, I am proposing that my PR use an environment variable for setting the port. As an example, to run on port 8088 (instead of the default 8081) you would run RCT_PACKAGER=8088 react-native run-ios or RCT_PACKAGER=8088 react-native run-android.

Please let me know if this is OK I'll get the PR pulled together ASAP.

[adamweeks]

@DaKaZ is it possible to have the --port option set the env variable, so it can be used with the feature added in #15316

[DaKaZ]

I have a submitted a PR for this issue. PR #16172 adds the port option to run-ios as you suggested would be best @adamweeks. @hramos please let me know if you'd like to discuss the approach at all, its a little bit of a monkey patch but I could not a non-fragile was of passing the port number into the objective-c code a BUILD time other than to directly edit the source files with sed. If someone with objective-c experience could suggest a better approach, I'd be happy to implement it, but this does work ;)

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[DaKaZ]

@hramos any way to speed up the PR review / approval process here. Stale bot is going to close our issue 😬

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[hramos]

This is now fixed, thanks @DaKaZ!