0

I would like to run tests on two different builds of iOS, therefore I need the metro bundler to run on two different ports. But it's about the same repo, so I can't change all the occurrences of 8081. Also, I can't change manually the port using devtools in iOS Simulator, because it's for e2e tests with Detox, automatics.

I saw here and there that the use of RCT_METRO_PORT could work, but until now I don't success...

So here is the simple question: how do we make use of RCT_METRO_PORT so that the metro bundler runs on another port than 8081, using either a .env file or an env variable in package.json scripts?

[EDIT]: my question is not only for react native run ios but also for building release, like this script set -o pipefail && xcodebuild -workspace ios/myapp.xcworkspace -configuration Debug -scheme myapp -destination name="iPhone 12 Pro" -derivedDataPath ios/build > /dev/null

AmerllicA
  • 29,059
  • 15
  • 130
  • 154
arnaudambro
  • 2,403
  • 3
  • 25
  • 51

2 Answers2

0

this is how you can manage different ports for dev and stage env in package.json

DOCS

"scripts": {
  "android:dev": "RCT_METRO_PORT=8081 react-native run-android",
  "android:stage": "RCT_METRO_PORT=9091 react-native run-android",
  "ios:dev": "RCT_METRO_PORT=8081 react-native run-ios",
  "ios:stage": "RCT_METRO_PORT=9091 react-native run-ios",
  "start:dev": "react-native start --port 8081",
  "start:stage": "react-native start --port 9091",
  "build:dev": "export RCT_METRO_PORT=8081 && set -o pipefail && xcodebuild -workspace ios/myapp.xcworkspace -configuration Debug -scheme myapp -destination name=\"iPhone 12 Pro\" -derivedDataPath ios/build > /dev/null",
  "build:stage": "export RCT_METRO_PORT=9091 && set -o pipefail && xcodebuild -workspace ios/myapp.xcworkspace -configuration Debug -scheme myapp -destination name=\"iPhone 12 Pro\" -derivedDataPath ios/build > /dev/null",
}

OR

"scripts": {
  "android:dev": "react-native run-android --port 8081",
  "android:stage": "react-native run-android --port  9091",
  "ios:dev": "react-native run-ios --port 8081",
  "ios:stage": "react-native run-ios --port  9091",
  "start:dev": "react-native start --port 8081",
  "start:stage": "react-native start --port 9091",
  "build:dev": "export RCT_METRO_PORT=8081 && set -o pipefail && xcodebuild -workspace ios/myapp.xcworkspace -configuration Debug -scheme myapp -destination name=\"iPhone 12 Pro\" -derivedDataPath ios/build > /dev/null",
  "build:stage": "export RCT_METRO_PORT=9091 && set -o pipefail && xcodebuild -workspace ios/myapp.xcworkspace -configuration Debug -scheme myapp -destination name=\"iPhone 12 Pro\" -derivedDataPath ios/build > /dev/null",

}
Muhammad Numan
  • 23,222
  • 6
  • 63
  • 80
0

Based on this answer you must change the default port from environment variable, there are three way

  1. First: (local env): Install react-native-dotenv, and configure it on your babel config file. Then add a .env file in the root folder of your project and write RCT_METRO_PORT=8590. (8590 is sample for alternative port number)

  2. Second: (global env): Go to your bash/zsh rc file and export the environment variable with number 8590 for example:

    export RCT_METRO_PORT=8590

    hint: if your OS is windows, for second option follow this answer

  3. Third: (inline env): For each of actions you should use --port 8590:

    • Metro: yarn start --port 8590
    • Android: yarn android --port 8590
    • iOS: yarn ios --port 8590

TEST: run echo $RCT_METRO_PORT in your terminal to test 1st and 2nd way to be ensure your env var is set.

iOS Hint: For the ios folder of your project find the Pods folder and inside the Pods folder seek RCTDefines.h files, there are two of them, inside both of them change the 8081 to 8590.

For connecting to the React Native Debugger press ⌘+t and change the 8081 port to 8590.

AmerllicA
  • 29,059
  • 15
  • 130
  • 154