From ebc699ce7fc40ac3f0e24f2e46bcb3e3dbebdcc6 Mon Sep 17 00:00:00 2001
From: Alex Hunt <huntie@meta.com>
Date: Tue, 1 Oct 2024 17:14:43 -0700
Subject: [PATCH] Tweak start command output (#46770)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46770

Small updates to the `react-native start` command CLI output:

- Change "Welcome..." text to blue.
- Display server base URL instead of port only.
- Embolden key command letters.
- "Ctrl+C to exit" prompt.
- Extra newlines for balance.

Changelog: [Internal]

Reviewed By: cortinico, cipolleschi

Differential Revision: D63328267

fbshipit-source-id: 119ddb2ba68c99df532840285c3c1f922e727e8b
---
 .../src/commands/start/attachKeyHandlers.js            | 10 +++++-----
 .../src/commands/start/runServer.js                    |  8 +++++---
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/community-cli-plugin/src/commands/start/attachKeyHandlers.js b/packages/community-cli-plugin/src/commands/start/attachKeyHandlers.js
index 51fcf04e8f8..b103591b08f 100644
--- a/packages/community-cli-plugin/src/commands/start/attachKeyHandlers.js
+++ b/packages/community-cli-plugin/src/commands/start/attachKeyHandlers.js
@@ -159,11 +159,11 @@ export default function attachKeyHandlers({
     level: 'info',
     data: `Key commands available:
 
-  ${chalk.bold('i')} - run on iOS
-  ${chalk.bold('a')} - run on Android
-  ${chalk.bold('r')} - reload app(s)
-  ${chalk.bold('d')} - open Dev Menu
-  ${chalk.bold('j')} - open DevTools
+  ${chalk.bold.inverse(' i ')} - run on iOS
+  ${chalk.bold.inverse(' a ')} - run on Android
+  ${chalk.bold.inverse(' r ')} - reload app(s)
+  ${chalk.bold.inverse(' d ')} - open Dev Menu
+  ${chalk.bold.inverse(' j ')} - open DevTools
 `,
   });
 }
diff --git a/packages/community-cli-plugin/src/commands/start/runServer.js b/packages/community-cli-plugin/src/commands/start/runServer.js
index b233b5a46d3..b7614c1528c 100644
--- a/packages/community-cli-plugin/src/commands/start/runServer.js
+++ b/packages/community-cli-plugin/src/commands/start/runServer.js
@@ -72,7 +72,9 @@ async function runServer(
   const protocol = args.https === true ? 'https' : 'http';
   const devServerUrl = url.format({protocol, hostname, port});
 
-  console.info(`Welcome to React Native v${ctx.reactNativeVersion}`);
+  console.info(
+    chalk.blue(`\nWelcome to React Native v${ctx.reactNativeVersion}`),
+  );
 
   const serverStatus = await isDevServerRunning(devServerUrl, projectRoot);
 
@@ -89,7 +91,7 @@ async function runServer(
     return;
   }
 
-  console.info(`Starting dev server on port ${chalk.bold(String(port))}...`);
+  console.info(`Starting dev server on ${devServerUrl}\n`);
 
   if (args.assetPlugins) {
     // $FlowIgnore[cannot-write] Assigning to readonly property
@@ -129,7 +131,7 @@ async function runServer(
         terminalReporter.update({
           type: 'unstable_server_log',
           level: 'info',
-          data: 'Dev server ready',
+          data: `Dev server ready. ${chalk.dim('Press Ctrl+C to exit.')}`,
         });
         attachKeyHandlers({
           cliConfig: ctx,