Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
jdmarshall opened this issue Aug 1, 2016 · 43 comments
Closed

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

jdmarshall opened this issue Aug 1, 2016 · 43 comments

Comments

@jdmarshall
Copy link

@jdmarshall jdmarshall commented Aug 1, 2016

The documentation on working around port conflict issues is no longer valid

https://facebook.github.io/react-native/docs/troubleshooting.html

Mentions the command line and the URL in AppDelegate.m (which has changed to a function call now)
but does not mention that

node_modules/react-native/React/React.xcodeproj/project.pbxproj

has 8081 hard-coded

Also, to be perfectly blunt, telling people to kill their virus scanner is negligent behavior. We need a solution that doesn't involve asking people to turn off safety features their organization mandated that they use. Especially when you have a company name attached to that advice.

@hramos
Copy link
Contributor

@hramos hramos commented Aug 1, 2016

Terminating the process that is using the port is one alternative that is provided, followed with instructions to use a different port which would be a better solution.

Can you edit https://github.com/facebook/react-native/blob/master/docs/Troubleshooting.md with the latest instructions and submit a PR?

@jdmarshall
Copy link
Author

@jdmarshall jdmarshall commented Aug 1, 2016

I can't, because I can't get it to work. Short of searching the entire node_modules directory for instances of 8081 and changing them, because there are new spots that were hard coded after these instructions were written, and there is no obvious way to override them

@jdmarshall
Copy link
Author

@jdmarshall jdmarshall commented Aug 1, 2016

react-native/local-cli/server/server.js

Takes an override, but at least most of these below seem to ignore it:

react-native/React/Base/RCTBundleURLProvider.m
react-native/Libraries/WebSocket/RCTWebSocketExecutor.m
react-native/React/React.xcodeproj/project.pbxproj

The others I could probably sort out, despite not being an Objective C programmer, but the last one seems to be new and I don't have the foggiest how to pass in the port as a parameter:

react-native/React/React.xcodeproj/project.pbxproj

shellScript = "if nc -w 5 -z localhost 8081 ; then...

@perkola
Copy link

@perkola perkola commented Aug 2, 2016

These files below also seem to have port 8081 hard-coded in some places.

react-native/ReactAndroid/src/main/java/com/facebook/react/modules/systeminfo/AndroidInfoHelpers.java
react-native/packager/react-packager/src/Server/__tests__/Server-test.js
react-native/local-cli/util/isPackagerRunning.js
react-native/Libraries/Image/__tests__/resolveAssetSource-test.js
@hramos hramos added the Documentation label Aug 2, 2016
@hramos hramos self-assigned this Aug 2, 2016
@perkola
Copy link

@perkola perkola commented Aug 3, 2016

Does this classify as a bug? Or how do i set a custom port that actually works?

@mkonicek mkonicek closed this Aug 3, 2016
@mkonicek mkonicek reopened this Aug 3, 2016
@perkola
Copy link

@perkola perkola commented Aug 4, 2016

Bump. This seems to be a problem with Android as well. Starting the packager on a different port with react-native start --port 8082 worked on v.0.26.* but no longer works on v.0.30.0.

@MichaelCereda
Copy link

@MichaelCereda MichaelCereda commented Oct 31, 2016

This bug should be treated with with high priority, port 8081 is used by some process like McAfee.
Changing the default port should be easy and painless.

@satya164
Copy link
Collaborator

@satya164 satya164 commented Oct 31, 2016

@MichaelCereda If this is a high priority issue for you, consider sending a PR to fix it.

@jdmarshall
Copy link
Author

@jdmarshall jdmarshall commented Oct 31, 2016

I have some deep philosophical problems with suggesting that a feature that mostly affects new users should be fixed in a PR by those new users.

By all means, let's get esoteric feature requests to file their own PRs. But it comes off as flippant when it's a feature brand new users run into before they even decide if they want to be part of the ecosystem.

(It's especially grating when that bug is a port conflict. Is this 1996 or 2016?)

@MichaelCereda
Copy link

@MichaelCereda MichaelCereda commented Nov 1, 2016

By now the fastest solution is to kill the process (in my case McAfee) and face the web like a real man.
I always find interesting those type of comments because I have hard time understand if they are a sort of life coaching aimed at the self improvement or mere trolling.

As @jdmarshall said, I think that is an high priority fix because it discourages new users to adopt react-native that is a framework that I personally love.
Submitting a PR it's possible but at the same time would require centralize the port number under one configuration file., the problem with this approach is that RN currently uses 3 different environments that should in many ways be independent from external files (that's why the port number has always been hard-coded in at least 2 places).
The only problem is my opinion that the port RN is using is the 8081 that is one of the most common ever and the risk of conflict is high.
I'll try to find a solution but suggestions from the team will be highly appreciated.

@hramos hramos removed the Documentation label Nov 1, 2016
@hramos
Copy link
Contributor

@hramos hramos commented Nov 1, 2016

I was one of the people who suggested opening a PR back in August. I did not mean any ill intent with that suggestion. Certain small issues related to the documentation can be addressed faster by editing the file that contains incorrect information. As it happens, in this case, this may not actually be a documentation issue as I first suspected.

Let's see if we can agree on what the issue is here. There are at least two places where the port needs to be configured: the packager, and a client app (iOS or Android, or both).

The instructions for changing the port on the packager seem quite clear and I'd be surprised if the packager is ignoring this flag. So that leaves each of the platforms currently supported by React Native:

[x] Packager
[ ] iOS
[ ] Android

According to @jdmarshall, the RN template in iOS has the port hard coded to 8081. @perkola claims that the same is the case in Android. Can you both confirm that is the case? This will help me route the issue to the right people and/or get work started on a PR.

@satya164
Copy link
Collaborator

@satya164 satya164 commented Nov 1, 2016

I have some deep philosophical problems with suggesting that a feature that mostly affects new users should be fixed in a PR by those new users.

I hope you understand that there are 790 issues filed in the repo right now. Every one of them is important to the user filed them, and they want to get it fixed as soon as possible.

If I'm working on the code, which issues do you think I'll fix first? They will be the ones that affect me. It's not because I don't care about this issue, it's because their are higher priority bugs for me which affect me in production.

This is an open source project and the best part is that we can fix things ourselves without having to wait for the core team to prioritise it. And you're by no means a new user since you've filed the issue since 3 months back.

@hramos hramos changed the title Documentation for changing default port no longer works Port is hard coded on iOS, Android templates Apr 27, 2017
@hramos
Copy link
Contributor

@hramos hramos commented Apr 27, 2017

I've removed some stale docs in #13687. Next step would be to update the iOS/Android projects to allow the port to be configured easily without updating the source code.

@eddiewang
Copy link

@eddiewang eddiewang commented May 12, 2017

@hramos is there documentation that show how exactly to go about manually updating the ports in iOS?

@hramos
Copy link
Contributor

@hramos hramos commented May 15, 2017

No, there isn't as I removed the stale docs.

@hramos hramos changed the title Port is hard coded on iOS, Android templates Port is hard coded to 8081 on iOS, Android templates May 22, 2017
@hramos
Copy link
Contributor

@hramos hramos commented May 22, 2017

I've taken another look at this and there seems like more work is needed in the tooling. For example, react-native run-ios and react-native run-android will both attempt to launch a new packager on port 8081, even if one is already running on port 8088 (or any other port of your choosing). This can result in an error if 8081 is already in use by another process, preventing you from launching the app.

@samjt
Copy link

@samjt samjt commented Aug 13, 2018

This appears to be fixed as far as I can tell in RN 0.56, at least for iOS.
You don't need to manually edit the ports in all/any of the files.

It's possible to export the port as an environmental variable for Metro to use.
export RCT_METRO_PORT=9000; react-native run-ios
followed by
react-native start --port 9000
will generate a build that uses port 9000 and then start Metro on port 9000

I'm currently running two copies of Metro bundler side by side, one for a Storybook development app and another for the actual app I'm building.

@samjt
Copy link

@samjt samjt commented Aug 14, 2018

As a follow up, I haven't checked the Android project files, but if you see something like:
$RCT_METRO_PORT || 8081 or process.env.RCT_METRO_PORT || 8081 in the Android source files, the same thing will work there too.

Finally, if you really want to change the port permanently for all projects, you should add the line
export RCT_METRO_PORT=9000
to your .bashrc or .bash_profile file in your home folder.

@liranh85
Copy link

@liranh85 liranh85 commented Aug 19, 2018

Following @DaKaZ 's pull request (thanks for that btw!), I can now (finally) change the port as simply as react-native run-ios --port 8082 - I've tested it, and can confirm this works.

@samjt , I'm not sure why you wrote (6 days ago) that we need to first export the new port for this to work. My understanding was that you can export the new port if you don't want to always have to specify it in the run-ios/run-android command, but if you do specify it, it doesn't require exporting it.

@samjt
Copy link

@samjt samjt commented Aug 20, 2018

It's probably because I was using Storybook, but i couldn't get the port argument to work with react-native run-ios

@osdiab
Copy link

@osdiab osdiab commented Aug 31, 2018

Separately, the lack of configurability is a problem to me because I often work in public networks like those at cafes, which often don't allow for peer-to-peer connections on the network. As a result my phone can't access the bundler url and always uses pre-bundled files... very slow and annoying! Android is fine since you can tunnel with adb, but idk how to do that with iOS. And I can't use something like ngrok to open a tunnel since changing it from localhost:8081 to an arbitrary URL is neither straightforward nor documented.

Right now looking into setting up a VPN solely for this purpose, but it'd be nice to have a legitimate story for my use case.

@danrivett
Copy link

@danrivett danrivett commented Dec 13, 2018

So to follow-up on this, it appears currently we can override the metro port on iOS exporting the RCT_METRO_PORT environment variable before running npm run ios, but there's no equivalent for npm run android?

@ReneVolution
Copy link

@ReneVolution ReneVolution commented Jan 8, 2019

Can we also override RCT_METRO_PORT when starting from XCode? I have set the environment variable in the Scheme, but it has no effect. Instead, I need to manually change the #define statements in RCTDefines.h. I am new to XCode, so I might be doing something wrong. Any hint would be much appreciated.

@hramos hramos removed the Bug Report label Feb 6, 2019
nhunzaker added a commit to nhunzaker/react-native that referenced this issue Feb 24, 2019
This commit removes the hardcoded instances of port 8081 on Android
with a build configuration property. This allows setting of the port
React Native Android connects to for the local build server.

For this change to work, there must also be an update to the react
native CLI to pass along this setting.

Related issues:
facebook#9145
@nhunzaker
Copy link
Contributor

@nhunzaker nhunzaker commented Feb 24, 2019

I took a stab at this in for Android with #23616

@cpojer cpojer mentioned this issue Mar 19, 2019
45 of 160 tasks complete
@grabbou
Copy link
Collaborator

@grabbou grabbou commented Mar 19, 2019

Closing since the original issue is already fixed (you can easily change the port on iOS by setting environmental variables).

Given the complexity of the native build systems, it's not as easy as it is in JavaScript to just change or auto-detect the port.

Looks like the Android support is being added thanks to @nhunzaker.

@grabbou grabbou closed this Mar 19, 2019
@react-native-bot react-native-bot added the Bug label May 4, 2019
@grisaitis
Copy link

@grisaitis grisaitis commented May 30, 2019

Helpful tip: if you encounter the error message 'No bundle URL present' in your iOS emulator, then clean your build folder (ios/build/) and maybe node_modules/ as well. I think the build needs to be completely cleaned and redone any time the port value is changed.

@grisaitis
Copy link

@grisaitis grisaitis commented May 30, 2019

Should these environment variables be documented somewhere? I don't see anything in docs or repo READMEs.

nhunzaker added a commit to nhunzaker/react-native that referenced this issue Jun 4, 2019
This commit removes the hardcoded instances of port 8081 on Android
with a build configuration property. This allows setting of the port
React Native Android connects to for the local build server.

For this change to work, there must also be an update to the react
native CLI to pass along this setting.

Related issues:
facebook#9145
facebook-github-bot added a commit that referenced this issue Jun 5, 2019
Summary:
### Problem

According to #9145, the `--port` setting is not respected when executing `react-native run-android`. The templates that report things like what port the dev server runs on are hard coded as well.

### Solution

This commit replaces the hardcoded instances of port 8081 on Android with a build configuration property. This allows setting of the port React Native Android connects to for the local build server.

For this change to work, there must also be an update to the react native CLI to pass along this setting:

react-native-community/cli@master...nhunzaker:9145-android-no-port-hardcode-cli

To avoid some noise on their end, I figured I wouldn't submit a PR until it's this approach is deemed workable.

## Changelog

[Android][fixed] - `react-native run-android --port <x>` correctly connects to dev server and related error messages display the correct port
Pull Request resolved: #23616

Differential Revision: D15645200

Pulled By: cpojer

fbshipit-source-id: 3bdfd458b8ac3ec78290736c9ed0db2e5776ed46
kelset added a commit that referenced this issue Jun 7, 2019
Summary:
### Problem

According to #9145, the `--port` setting is not respected when executing `react-native run-android`. The templates that report things like what port the dev server runs on are hard coded as well.

### Solution

This commit replaces the hardcoded instances of port 8081 on Android with a build configuration property. This allows setting of the port React Native Android connects to for the local build server.

For this change to work, there must also be an update to the react native CLI to pass along this setting:

react-native-community/cli@master...nhunzaker:9145-android-no-port-hardcode-cli

To avoid some noise on their end, I figured I wouldn't submit a PR until it's this approach is deemed workable.

## Changelog

[Android][fixed] - `react-native run-android --port <x>` correctly connects to dev server and related error messages display the correct port
Pull Request resolved: #23616

Differential Revision: D15645200

Pulled By: cpojer

fbshipit-source-id: 3bdfd458b8ac3ec78290736c9ed0db2e5776ed46
@AdamMarcus
Copy link

@AdamMarcus AdamMarcus commented Oct 12, 2019

Just wanted to throw out that I am hitting this still while just trying to get through my first react-native demo (in Windows/Android).

@TempusFugitful
Copy link

@TempusFugitful TempusFugitful commented Nov 11, 2019

Just wanted to throw out that I am hitting this still while just trying to get through my first react-native demo (in Windows/Android).

I too am still seeing this issue. The "--port" option is seemingly ignored by the "react-native run-ios --port 9000" command, as the Metro Bundler still starts up in port 8081. The "react-native start --port 9000" command does not ignore the "--port" option. So while I can force the metro bundler to open up on a port other than 8081, it does not do so when launched as part of the overall "react-native run-ios" command.

This still doesn't solve the problem as I then have a react app installed on iOS that expects the default port, while the metro bundler is listening on the new port (if it is started by itself with the "react-native start --port 9000" command).

M-i-k-e-l added a commit to M-i-k-e-l/react-native that referenced this issue Mar 10, 2020
Summary:
### Problem

According to facebook#9145, the `--port` setting is not respected when executing `react-native run-android`. The templates that report things like what port the dev server runs on are hard coded as well.

### Solution

This commit replaces the hardcoded instances of port 8081 on Android with a build configuration property. This allows setting of the port React Native Android connects to for the local build server.

For this change to work, there must also be an update to the react native CLI to pass along this setting:

react-native-community/cli@master...nhunzaker:9145-android-no-port-hardcode-cli

To avoid some noise on their end, I figured I wouldn't submit a PR until it's this approach is deemed workable.

## Changelog

[Android][fixed] - `react-native run-android --port <x>` correctly connects to dev server and related error messages display the correct port
Pull Request resolved: facebook#23616

Differential Revision: D15645200

Pulled By: cpojer

fbshipit-source-id: 3bdfd458b8ac3ec78290736c9ed0db2e5776ed46
@facebook facebook locked as resolved and limited conversation to collaborators Mar 20, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
You can’t perform that action at this time.