adds --port option to react-native run-ios as well as patches port …

Summary:
The pull request adds the `--port` option to `run-ios` allowing a developer to build and launch a react-native app using a single command line like this:
```
react-native run-ios --port 8088
```

It defaults to the current port 8081.

This pull request fixes issue #9145 and issue #14113.

This patch also extends `run-android` to properly test and launch the packager with the specified port, extending the work done in PR:  ##15316

1. Create a new react-native app, or simply clone this branch and then update your version of react-native using `yarn add file:./path/to/this/fork/of/react-native`
2. run `react-native run-ios --port 8088`
3. watch the packager start on the desired port (8088 in this case) and watch your app in your simulator connect to the packager and launch the app.
Closes facebook/react-native#16172

Differential Revision: D6612534

Pulled By: shergin

fbshipit-source-id: 50af449f5e4c32fb76ba95f4cb7bf179e35526d5

runAndroid/runAndroid.js

@@ -45,15 +45,15 @@ function runAndroid(argv, config, args) {
     return buildAndRun(args);
   }
 
-  return isPackagerRunning().then(result => {
+  return isPackagerRunning(args.port).then(result => {
     if (result === 'running') {
       console.log(chalk.bold('JS server already running.'));
     } else if (result === 'unrecognized') {
       console.warn(chalk.yellow('JS server not recognized, continuing with build...'));
     } else {
       // result == 'not_running'
       console.log(chalk.bold('Starting JS server...'));
-      startServerInNewWindow();
+      startServerInNewWindow(args.port);
     }
     return buildAndRun(args);
   });
@@ -262,7 +262,7 @@ function runOnAllDevices(args, cmd, packageNameWithSuffix, packageName, adbPath)
     }
 }
 
-function startServerInNewWindow() {
+function startServerInNewWindow(port) {
   const scriptFile = /^win/.test(process.platform) ?
     'launchPackager.bat' :
     'launchPackager.command';
@@ -271,6 +271,12 @@ function startServerInNewWindow() {
   const procConfig = {cwd: scriptsDir};
   const terminal = process.env.REACT_TERMINAL;
 
+  // setup the .packager.env file to ensure the packager starts on the right port
+  const packagerEnvFile = path.join(__dirname, '..', '..', 'scripts', '.packager.env');
+  const content = `export RCT_METRO_PORT=${port}`;
+  // ensure we overwrite file by passing the 'w' flag
+  fs.writeFileSync(packagerEnvFile, content, {encoding: 'utf8', flag: 'w'});
+
   if (process.platform === 'darwin') {
     if (terminal) {
       return child_process.spawnSync('open', ['-a', terminal, launchPackagerScript], procConfig);
@@ -333,7 +339,7 @@ module.exports = {
     description: 'Do not launch packager while building',
   }, {
     command: '--port [number]',
-    default: 8081,
+    default: process.env.RCT_METRO_PORT || 8081,
     parse: (val: string) => Number(val),
   }],
 };

runIOS/runIOS.js

@@ -78,7 +78,7 @@ function runIOS(argv, config, args) {
 function runOnDeviceByUdid(args, scheme, xcodeProject, devices) {
   const selectedDevice = matchingDeviceByUdid(devices, args.udid);
   if (selectedDevice) {
-    return runOnDevice(selectedDevice, scheme, xcodeProject, args.configuration, args.packager, args.verbose);
+    return runOnDevice(selectedDevice, scheme, xcodeProject, args.configuration, args.packager, args.verbose, args.port);
   } else {
     if (devices && devices.length > 0) {
       console.log('Could not find device with the udid: "' + args.udid + '".');
@@ -115,7 +115,7 @@ function runOnSimulator(xcodeProject, args, scheme) {
     }
     resolve(selectedSimulator.udid);
   })
-  .then((udid) => buildProject(xcodeProject, udid, scheme, args.configuration, args.packager, args.verbose))
+  .then((udid) => buildProject(xcodeProject, udid, scheme, args.configuration, args.packager, args.verbose, args.port))
   .then((appName) => {
     if (!appName) {
       appName = scheme;
@@ -135,8 +135,8 @@ function runOnSimulator(xcodeProject, args, scheme) {
   });
 }
 
-function runOnDevice(selectedDevice, scheme, xcodeProject, configuration, launchPackager, verbose) {
-  return buildProject(xcodeProject, selectedDevice.udid, scheme, configuration, launchPackager, verbose)
+function runOnDevice(selectedDevice, scheme, xcodeProject, configuration, launchPackager, verbose, port) {
+  return buildProject(xcodeProject, selectedDevice.udid, scheme, configuration, launchPackager, verbose, port)
   .then((appName) => {
     if (!appName) {
       appName = scheme;
@@ -159,7 +159,7 @@ function runOnDevice(selectedDevice, scheme, xcodeProject, configuration, launch
   });
 }
 
-function buildProject(xcodeProject, udid, scheme, configuration = 'Debug', launchPackager = false, verbose) {
+function buildProject(xcodeProject, udid, scheme, configuration = 'Debug', launchPackager = false, verbose, port) {
   return new Promise((resolve,reject) =>
   {
      var xcodebuildArgs = [
@@ -174,7 +174,7 @@ function buildProject(xcodeProject, udid, scheme, configuration = 'Debug', launc
     if (!verbose) {
       xcpretty = xcprettyAvailable() && child_process.spawn('xcpretty', [], { stdio: ['pipe', process.stdout, process.stderr] });
     }
-    const buildProcess = child_process.spawn('xcodebuild', xcodebuildArgs, getProcessOptions(launchPackager));
+    const buildProcess = child_process.spawn('xcodebuild', xcodebuildArgs, getProcessOptions(launchPackager, port));
     let buildOutput = '';
     buildProcess.stdout.on('data', function(data) {
       buildOutput += data.toString();
@@ -232,13 +232,15 @@ function printFoundDevices(devices) {
   }
 }
 
-function getProcessOptions(launchPackager) {
+function getProcessOptions(launchPackager, port) {
   if (launchPackager) {
-    return {};
+    return {
+      env: { ...process.env, RCT_METRO_PORT: port }
+    };
   }
 
   return {
-    env: Object.assign({}, process.env, { RCT_NO_LAUNCH_PACKAGER: true }),
+    env: { ...process.env, RCT_NO_LAUNCH_PACKAGER: true },
   };
 }
 
@@ -287,5 +289,9 @@ module.exports = {
   }, {
     command: '--verbose',
     description: 'Do not use xcpretty even if installed',
+  },{
+    command: '--port [number]',
+    default: process.env.RCT_METRO_PORT || 8081,
+    parse: (val: string) => Number(val),
   }],
 };

server/server.js

@@ -60,7 +60,7 @@ module.exports = {
   description: 'starts the webserver',
   options: [{
     command: '--port [number]',
-    default: 8081,
+    default: process.env.RCT_METRO_PORT || 8081,
     parse: (val: string) => Number(val),
   }, {
     command: '--host [string]',

util/isPackagerRunning.js

@@ -19,8 +19,8 @@ const fetch = require('node-fetch');
  *   - `unrecognized`: one other process is running on the port we expect the
  *                     packager to be running.
  */
-function isPackagerRunning() {
-  return fetch('http://localhost:8081/status').then(
+function isPackagerRunning(packagerPort = (process.env.RCT_METRO_PORT || 8081)) {
+  return fetch(`http://localhost:${packagerPort}/status`).then(
     res => res.text().then(body =>
       body === 'packager-status:running' ? 'running' : 'unrecognized'
     ),