How to use the react-dev-utils/WebpackDevServerUtils.choosePort function in react-dev-utils

chalk.cyan(
      `Attempting to bind to HOST environment variable: ${chalk.yellow(
        chalk.bold(process.env.HOST)
      )}`
    )
  );
  console.log(
    `If this was unintentional, check that you haven't mistakenly set it in your shell.`
  );
  console.log(`Learn more here: ${chalk.yellow('http://bit.ly/2mwWSwH')}`);
  console.log();
}

// We attempt to use the default port but if it is busy, we offer the user to
// run on a different port. `choosePort()` Promise resolves to the next free port.
choosePort(HOST, DEFAULT_PORT)
  .then(port => {
    if (port == null) {
      // We have not found a port.
      return;
    }
    const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
    const appName = require(paths.appPackageJson).name;
    const urls = prepareUrls(protocol, HOST, port);
    // Create a webpack compiler that is configured with custom messages.
    const compiler = createCompiler(webpack, config, appName, urls, useYarn);
    // Load proxy config
    const proxySetting = require(paths.appPackageJson).proxy;
    const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
    // Serve webpack assets generated by the compiler over a web sever.
    const serverConfig = createDevServerConfig(
      proxyConfig,

const isInteractive = process.stdout.isTTY;

// Warn and crash if required files are missing
//if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
if (!checkRequiredFiles([paths.appIndexJs])) {
  process.exit(1);
}

// Tools like Cloud9 rely on this.
const DEFAULT_CLIENT_PORT = parseInt(process.env.PORT, 10) || 3000;
const DEFAULT_SERVER_PORT = parseInt(process.env.PORT, 10) || 5678;
const HOST = process.env.HOST || '0.0.0.0';

// We attempt to use the default port but if it is busy, we offer the user to
// run on a different port. `detect()` Promise resolves to the next free port.
choosePort(HOST, DEFAULT_CLIENT_PORT)
  .then(port => {
    if (port == null) {
      // We have not found a port.
      return;
    }

    const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
    const appName = require(paths.appPackageJson).name;
    const urls = prepareUrls(protocol, HOST, port);

    // We do this before importing the wepack.config.client.dev otherwise
    // REACT_APP_CLIENT_PORT won't be set at new webpack.DefinePlugin(env.stringified)
    process.env.REACT_APP_CLIENT_PORT = port
    const configWebpackClient = require('../config/webpack.config.client.dev');

    // Create a webpack compiler that is configured with custom messages.

chalk.cyan(
      `Attempting to bind to HOST environment variable: ${chalk.yellow(
        chalk.bold(process.env.HOST)
      )}`
    )
  );
  console.log(
    `If this was unintentional, check that you haven't mistakenly set it in your shell.`
  );
  console.log(`Learn more here: ${chalk.yellow('http://bit.ly/2mwWSwH')}`);
  console.log();
}

// We attempt to use the default port but if it is busy, we offer the user to
// run on a different port. `choosePort()` Promise resolves to the next free port.
choosePort(HOST, DEFAULT_PORT)
  .then(port => {
    if (port == null) {
      // We have not found a port.
      return;
    }
    const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
    const appName = require(paths.appPackageJson).name;
    const urls = prepareUrls(protocol, HOST, port);
    // Create a webpack compiler that is configured with custom messages.
    const compiler = createCompiler(webpack, config, appName, urls, useYarn);
    // compiler.apply(new webpack.ProgressPlugin(function (percentage, msg, current, active, modulepath) {
    //   if (process.stdout.isTTY && percentage < 1) {
    //     process.stdout.cursorTo(0)
    //     modulepath = modulepath ? ' …' + modulepath.substr(modulepath.length - 30) : ''
    //     current = current ? ' ' + current : ''
    //     active = active ? ' ' + active : ''

const start = ({
  routes = [],
  defaultPort = 3000,
  docsUrl = path.resolve(process.cwd(), 'docs'),
}) => {
  app.use('/', createRouter(routes));
  choosePort('0.0.0.0', defaultPort).then((port) => {
    if (port == null) return;
    app.listen(port, () => console.log(`🚀 App started on port: ${port}`.green)); // eslint-disable-line no-console
  });

  createDocs(routes, docsUrl);
};

async function main() {
  const webpackPort = await choosePort(HOST, DEFAULT_WEBPACK_PORT);
  const apiPort = await choosePort(HOST, DEFAULT_API_PORT);

  if (webpackPort == null) {
    console.error("Could not find a port for the Webpack server.");
  }
  if (apiPort == null) {
    console.error("Could not find a port for the API server.");
  }

  const sourcecredDirectory =
    process.env.SOURCECRED_DIRECTORY || path.join(os.tmpdir(), "sourcecred");
  const apiServer = await new Promise(async (resolve, _unused_reject) => {
    let server = apiApp(sourcecredDirectory).listen(apiPort, () => {
      resolve(server);
    });
  });

export async function getAvailablePortAsync(
  options: { host?: string; defaultPort?: number } = {}
): Promise {
  try {
    const defaultPort =
      'defaultPort' in options && options.defaultPort ? options.defaultPort : DEFAULT_PORT;
    const port = await choosePort(
      'host' in options && options.host ? options.host : HOST,
      defaultPort
    );
    if (!port) throw new Error(`Port ${defaultPort} not available.`);
    else return port;
  } catch (error) {
    throw new XDLError('NO_PORT_FOUND', 'No available port found: ' + error.message);
  }
}

  .then(() => choosePort(HOST, DEFAULT_PORT),
  )

  .then(() => choosePort(HOST, DEFAULT_PORT))
  .then(port => {