Skip to content

feat: add invoking CLI's scripts for launching Metro in run-ios command - #2021

Merged
thymikee merged 16 commits into
react-native-community:mainfrom
szymonrybczak:feat/sync-starting-bundler-implementations
Aug 11, 2023
Merged

feat: add invoking CLI's scripts for launching Metro in run-ios command#2021
thymikee merged 16 commits into
react-native-community:mainfrom
szymonrybczak:feat/sync-starting-bundler-implementations

Conversation

@szymonrybczak

@szymonrybczakszymonrybczak commented Jul 18, 2023

Copy link
Copy Markdown
Collaborator

Summary:

Recently @huntieremoved "Start packager" phase from template, which means that right now when running run-ios command, packager won't be started. I synced implementations between platforms (run-android command was using CLI's script for some time).
This change also fixes problem with starting Metro in monorepos setups (see #1799).

Test Plan:

  1. Clone the repository and do all the required steps from the Contributing guide
  2. Run this command:

run-ios - Should start Metro from script located in node_modules/.bin/launchPackager.command

TODO:

  • Windows support

Checklist

  • Documentation is up to date to reflect these changes.
  • Follows commit message convention described in CONTRIBUTING.md

Comment threadpackages/cli-platform-ios/src/commands/buildIOS/index.ts Outdated
} "${chalk.bold(xcodeProject.name)}"`,
);

await runPackager(

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should be able to disable this with --no-packager.

Unrelated: I was actually hoping we could remove the packager from the run-android command instead :P

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should be able to disable this with --no-packager.

We're already able to this :) See here:

{
name: '--no-packager',
description: 'Do not launch packager while building',
},

And in function body I check for this:

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Question is, maybe we should consider disabling running packager by default? I think this would require a poll on how people use it in the wild. I myself run the server myself in a terminal tab that suits me. But I've also seen devs relying on automatic opening of dev server and not sure if they would even realize it's missing

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Other options that comes to my mind is to run the packager in the same window where we start run-ios/android command.

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this would require a poll on how people use it in the wild

FYI I'm up for this, and/or making the most informed decision. Originally I was with @tido64 in thinking we'd drop the behaviour on Android to align. But @szymonrybczak's changes, with an opt-out flag, look pretty useful to me.

While this item of feedback is still unresolved, I'd like to push for this PR to be merged and released anyway, since it is a direct dependency for react/react-native#38944 and incoming Debugging functionality in React Native. These are all alpha releases, and we can follow up on enhancing this behaviour in a follow-up PR.|

cc @thymikee

Comment threadpackages/cli-plugin-metro/src/commands/start/runPackager.ts Outdated
@github-actionsgithub-actionsBot added the docs Documentation change label Jul 18, 2023
@szymonrybczakszymonrybczak changed the title feat: add invoking CLI's scripts for launching Metro in run/build-ios commandsfeat: add invoking CLI's scripts for launching Metro in run-ios commandsJul 18, 2023
@szymonrybczakszymonrybczak changed the title feat: add invoking CLI's scripts for launching Metro in run-ios commandsfeat: add invoking CLI's scripts for launching Metro in run-ios commandJul 18, 2023
Comment threadpackages/cli-platform-ios/src/commands/buildIOS/buildProject.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/runPackager.ts Outdated
Comment threadpackages/cli-platform-ios/README.md
@szymonrybczak
szymonrybczakforce-pushed the feat/sync-starting-bundler-implementations branch from e9df890 to 75e3ee1CompareJuly 24, 2023 12:01
@huntie

Copy link
Copy Markdown
Collaborator

✅ Endorsed!

Comment threadpackages/cli-plugin-metro/src/commands/start/runPackager.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/runPackager/index.ts Outdated
Comment threadpackages/cli-doctor/src/tools/healthchecks/packager.ts
Comment threadpackages/cli-plugin-metro/src/commands/start/startServerInNewWindow.ts Outdated
Comment on lines +13 to +15
name: '--terminal <string>',
description:
'Launches packager in a new window using the specified terminal path.',

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Main feedback ⬇️

Interesting, can we merge this all into the start command — aligning with your proposal in react-native-community/discussions-and-proposals#613? Specifically:

  • The improved error message behaviour when start (RN CLI start) is called and something is already on the configured Metro port.
  • react-native start --terminal switches modes to integrate the startServerInNewWindow.js behaviour.

Then, we only expose startCommand and it can be used by doctor, run-android, run-ios.

cc @thymikee Does this seem feasible?

@szymonrybczak

szymonrybczak commented Aug 1, 2023

Copy link
Copy Markdown
CollaboratorAuthor

👋, update from my side. I implemented whole feedback, and I added features discussed under this RFC. I changed implementation of handling keystrokes. Before it wasn't possible to pause interactivity (to show the prompt), but right now it was possible. Without this change, after showing prompt in watch mode the user wouldn't be able to handle any keystroke.


Rigth now flow looks like now:

  • run-android starts bundler via CLI (node cli/path/ start command)
  • run-ios starts bundler via CLI (node /cli/path/ start command)

Note

When starting Android or iOS app from watchMode it runs also run-android and run-ios command so it would run again start command, but right now CLI is checking against port is busy or not so user won't see nothing.

Added interactive part 👀

  • When starting bundler and port is busy CLI will ask whether to terminate process that is running on port user requested. If user wants to kill process, CLI will kill process and starts CLI at request port.
CleanShot.2023-08-01.at.13.39.09.mp4
  • When user don't want to kill proces, CLI will find the next free port and will ask user whether to start bundler at found port.
CleanShot.2023-08-01.at.13.41.13.mp4

Also added log to inform user about on which port Metro bundler is running:
CleanShot 2023-08-01 at 13 47 19@2x

Important

This change is backward compatible, previously status endpoint would give us packager-status:running response, but right now we're giving {root: "/path/to/project", status: "running}, and I adjusted logic in isPackagerRunning function. What I didn't check but is really important is to check if React Native is somehow related to this response?

Comment threadpackages/cli-platform-ios/src/commands/runIOS/index.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/runServer.ts Outdated
Comment threadpackages/cli-tools/src/getPidFromPort.ts

@huntiehuntie left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is awesome work 💯

High-level feedback

  • 1/ We can probably achieve a better organisation of responsibilities here.
    • Maybe --terminal on the start command is the wrong place to do full-on process management (my bad). It would be really good to keep cli-plugin-metro's responsibilities as clean as possible.
    • Therefore:
      • cli-plugin-metro: Let's reduce the start command to starting the server only, and erroring generically to say "Could not start dev server: The specified port was taken".
      • cli-plugin-android/ios Let's do process detection here, and move the background terminal creation logic here (likely shared via cli-tools) also. Therefore it's these commands which will wrap start, which doesn't need to know where it's running.
  • 2/ Being able to kill another process is probably not surface area we want to add to CLI (being mindful of when we introduce user expectations). For the run-android/run-ios commands, bailing from starting Metro when the port is taken (with an informational log message) is most likely adequate.
  • 3/ I'd suggest separating the improved KeyPressHandler logic into a new PR — potentially this should live in cli-tools.

Comment threadpackages/cli-plugin-metro/src/commands/start/index.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/startServerInNewWindow.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/watchMode.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/watchMode.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/watchMode.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/watchMode.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/runServer.ts Outdated
Comment threadpackages/cli-plugin-metro/src/tools/getProcessIdFromPort.ts Outdated
Comment threadpackages/cli-plugin-metro/src/tools/getNextPort.ts Outdated
@szymonrybczak

Copy link
Copy Markdown
CollaboratorAuthor
  • Therefore:

    • cli-plugin-metro: Let's reduce the start command to starting the server only, and erroring generically to say "Could not start dev server: The specified port was taken".
    • cli-plugin-android/ios Let's do process detection here, and move the background terminal creation logic here (likely shared via cli-tools) also. Therefore it's these commands which will wrap start, which doesn't need to know where it's running.

Hm, I'm thinking about this solution, and it is slightly better that doing this whole logic behind --terminal option, but do to the second part of this (move this to cli-plugin-android/ios) we would need to use startServerInNewWindow, which of course we can do, by simply moving this function to a cli-tools package. For this we also will need to move relevant scripts, as it wouldn't make sense for them to live in cli-plugin-metro and to access this from cli-tools, and I'm not sure if this would be doable if we're migrating this part of codebase to Core.
And what I'm wondering most - is cli-tools actually good place to keep launchPackager.command, launchPackager.bat? cc. @thymikee

  • 2/ Being able to kill another process is probably not surface area we want to add to CLI (being mindful of when we introduce user expectations). For the run-android/run-ios commands, bailing from starting Metro when the port is taken (with an informational log message) is most likely adequate.

Okay, let's leave just prompt with proposition port change.

  • 3/ I'd suggest separating the improved KeyPressHandler logic into a new PR — potentially this should live in cli-tools.

#2041 - I will rebase on top of this PR once will be merged 👍

@huntie

huntie commented Aug 1, 2023

Copy link
Copy Markdown
Collaborator

@szymonrybczak

For this we also will need to move relevant scripts, as it wouldn't make sense for them to live in cli-plugin-metro and to access this from cli-tools, and I'm not sure if this would be doable if we're migrating this part of codebase to Core.

Sure, let's move as much logic as necessary into cli-tools, where necessary to support run-android/run-ios and as not needed by cli-plugin-metro.

is cli-tools actually good place to keep launchPackager.command, launchPackager.bat?

I think yes for now — or perhaps in the root cli package.

@szymonrybczak

szymonrybczak commented Aug 2, 2023

Copy link
Copy Markdown
CollaboratorAuthor

@huntie So I moved some logic into run-ios/android and also I move relevant scripts to cli-tools package 👍

@szymonrybczak
szymonrybczakforce-pushed the feat/sync-starting-bundler-implementations branch 2 times, most recently from 5c3b84b to 691c96aCompareAugust 2, 2023 14:07

@huntiehuntie left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me. Might be some tidying we can do in future, but I'm keen to unblock the move of cli-plugin-metro. Huge thanks for this! 🙌🏻

Comment threadpackages/cli-tools/src/launchPackager.bat
Comment threadpackages/cli-plugin-metro/src/commands/start/runServer.ts Outdated
Comment threadpackages/cli-tools/src/startServerInNewWindow.ts Outdated
import chalk from 'chalk';
import {Config} from '@react-native-community/cli-types';
import {KeyPressHandler} from '../../tools/KeyPressHandler';
import {addInteractionListener} from '@react-native-community/cli-tools';

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: Merge with existing '@react-native-community/cli-tools' import.

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah, I will do it after #2041 will be merged 👍

@szymonrybczak
szymonrybczakforce-pushed the feat/sync-starting-bundler-implementations branch from 3463f6c to 3b3a7b9CompareAugust 10, 2023 15:47
facebook-github-bot pushed a commit to react/react-native that referenced this pull request Aug 10, 2023
Summary:
Pull Request resolved: #38795
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
Inits new package `react-native/community-cli-plugin`. This migrates [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro) into the React Native repo, to enable faster iteration by the React Native core team. Specifically:
- This package contains several `metro` dependencies, which when removed from CLI will no longer require us to ship new CLI releases to get Metro patches and features to users.
- This package contains the `start`, `bundle`, and `ram-bundle` commands (central to the React Native development experience), for which we have incoming debugging-related changes.
- This package now **only** exports commands to be attached via a RN CLI plugin. With this move, we're aiming to **internalise** the default implementations of these dev commands within React Native — other RN CLI plugins can continue to override these, but must do so wholesale. (See also the recent fix for this: react-native-community/cli#1999.)
In V15:
- (Microsoft feedback) Re-export `unstable_buildBundleWithConfig`, marking as unstable. This gives us a time buffer to consider how we repackage this functionality in future.
The package source has been converted from TypeScript to Flow, with a number of new `flow-typed/` defs added to meet type coverage requirements.
## To dos
- For now, we aren't removing the existing [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro) source — until later PRs consolidate this move by changing dependencies in the `react-native` package.
- **Exported API is reduced!**: I'm working with szymonrybczak to decouple references from RN CLI packages react-native-community/cli#2021.
Changelog: [Internal]
Reviewed By: motiz88
Differential Revision: D46801501
fbshipit-source-id: 7f6b72941a69f487fb437768cdba125a9aa3418d
Comment threadpackages/cli-doctor/package.json

@thymikeethymikee left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we're one small refactor away from merging this. Nice work @szymonrybczak and @huntie!

Comment threadpackages/cli-platform-android/src/commands/runAndroid/index.ts Outdated

@aajahidaajahid left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug - #2219

reactNativePath: string,
terminal?: string,
) {
if (!terminal) {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This check is preventing android build on windows. On windows - so far we did not need any terminal value. It always used to fall back to default cmd.exe ( line no 106 )

In this case I think the proper fix should be fixing the getDefaultUserTerminal which currently doesn't have any default terminal for windows.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or only apply this check on platforms other than windows.

@aajahidaajahid left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reason of another issue

This works for me. However it only opens a new window and doesn't automatically run andoid, it acts as if you've run react-native start only

#2219

}

if (packager) {
await startServerInNewWindow(

@aajahidaajahidDec 24, 2023

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

await causes the CLI to hang indefinitely. Must be called without await.
Check existing comment at https://github.com/szymonrybczak/cli/blob/732308dfe47cf05d7f5c869fcef08a8fe96ecc7c/packages/cli-tools/src/startServerInNewWindow.ts#L105

@aajahidaajahid mentioned this pull request Dec 24, 2023
2 tasks
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

docsDocumentation changefeature

Projects

None yet

Development

Successfully merging this pull request may close these issues.

8 participants

@szymonrybczak@huntie@liamjones@aajahid@tido64@thymikee@adamTrz@TMisiukiewicz
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
feat: add invoking CLI's scripts for launching Metro in `run-ios` command by szymonrybczak · Pull Request #2021 · react-native-community/cli · GitHub
Skip to content

feat: add invoking CLI's scripts for launching Metro in run-ios command - #2021

Merged
thymikee merged 16 commits into
react-native-community:mainfrom
szymonrybczak:feat/sync-starting-bundler-implementations
Aug 11, 2023
Merged

feat: add invoking CLI's scripts for launching Metro in run-ios command#2021
thymikee merged 16 commits into
react-native-community:mainfrom
szymonrybczak:feat/sync-starting-bundler-implementations

Conversation

@szymonrybczak

@szymonrybczakszymonrybczak commented Jul 18, 2023

Copy link
Copy Markdown
Collaborator

Summary:

Recently @huntieremoved "Start packager" phase from template, which means that right now when running run-ios command, packager won't be started. I synced implementations between platforms (run-android command was using CLI's script for some time).
This change also fixes problem with starting Metro in monorepos setups (see #1799).

Test Plan:

  1. Clone the repository and do all the required steps from the Contributing guide
  2. Run this command:

run-ios - Should start Metro from script located in node_modules/.bin/launchPackager.command

TODO:

  • Windows support

Checklist

  • Documentation is up to date to reflect these changes.
  • Follows commit message convention described in CONTRIBUTING.md

Comment threadpackages/cli-platform-ios/src/commands/buildIOS/index.ts Outdated
} "${chalk.bold(xcodeProject.name)}"`,
);

await runPackager(

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should be able to disable this with --no-packager.

Unrelated: I was actually hoping we could remove the packager from the run-android command instead :P

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should be able to disable this with --no-packager.

We're already able to this :) See here:

{
name: '--no-packager',
description: 'Do not launch packager while building',
},

And in function body I check for this:

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Question is, maybe we should consider disabling running packager by default? I think this would require a poll on how people use it in the wild. I myself run the server myself in a terminal tab that suits me. But I've also seen devs relying on automatic opening of dev server and not sure if they would even realize it's missing

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Other options that comes to my mind is to run the packager in the same window where we start run-ios/android command.

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this would require a poll on how people use it in the wild

FYI I'm up for this, and/or making the most informed decision. Originally I was with @tido64 in thinking we'd drop the behaviour on Android to align. But @szymonrybczak's changes, with an opt-out flag, look pretty useful to me.

While this item of feedback is still unresolved, I'd like to push for this PR to be merged and released anyway, since it is a direct dependency for react/react-native#38944 and incoming Debugging functionality in React Native. These are all alpha releases, and we can follow up on enhancing this behaviour in a follow-up PR.|

cc @thymikee

Comment threadpackages/cli-plugin-metro/src/commands/start/runPackager.ts Outdated
@github-actionsgithub-actionsBot added the docs Documentation change label Jul 18, 2023
@szymonrybczakszymonrybczak changed the title feat: add invoking CLI's scripts for launching Metro in run/build-ios commandsfeat: add invoking CLI's scripts for launching Metro in run-ios commandsJul 18, 2023
@szymonrybczakszymonrybczak changed the title feat: add invoking CLI's scripts for launching Metro in run-ios commandsfeat: add invoking CLI's scripts for launching Metro in run-ios commandJul 18, 2023
Comment threadpackages/cli-platform-ios/src/commands/buildIOS/buildProject.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/runPackager.ts Outdated
Comment threadpackages/cli-platform-ios/README.md
@szymonrybczak
szymonrybczakforce-pushed the feat/sync-starting-bundler-implementations branch from e9df890 to 75e3ee1CompareJuly 24, 2023 12:01
@huntie

Copy link
Copy Markdown
Collaborator

✅ Endorsed!

Comment threadpackages/cli-plugin-metro/src/commands/start/runPackager.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/runPackager/index.ts Outdated
Comment threadpackages/cli-doctor/src/tools/healthchecks/packager.ts
Comment threadpackages/cli-plugin-metro/src/commands/start/startServerInNewWindow.ts Outdated
Comment on lines +13 to +15
name: '--terminal <string>',
description:
'Launches packager in a new window using the specified terminal path.',

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Main feedback ⬇️

Interesting, can we merge this all into the start command — aligning with your proposal in react-native-community/discussions-and-proposals#613? Specifically:

  • The improved error message behaviour when start (RN CLI start) is called and something is already on the configured Metro port.
  • react-native start --terminal switches modes to integrate the startServerInNewWindow.js behaviour.

Then, we only expose startCommand and it can be used by doctor, run-android, run-ios.

cc @thymikee Does this seem feasible?

@szymonrybczak

szymonrybczak commented Aug 1, 2023

Copy link
Copy Markdown
CollaboratorAuthor

👋, update from my side. I implemented whole feedback, and I added features discussed under this RFC. I changed implementation of handling keystrokes. Before it wasn't possible to pause interactivity (to show the prompt), but right now it was possible. Without this change, after showing prompt in watch mode the user wouldn't be able to handle any keystroke.


Rigth now flow looks like now:

  • run-android starts bundler via CLI (node cli/path/ start command)
  • run-ios starts bundler via CLI (node /cli/path/ start command)

Note

When starting Android or iOS app from watchMode it runs also run-android and run-ios command so it would run again start command, but right now CLI is checking against port is busy or not so user won't see nothing.

Added interactive part 👀

  • When starting bundler and port is busy CLI will ask whether to terminate process that is running on port user requested. If user wants to kill process, CLI will kill process and starts CLI at request port.
CleanShot.2023-08-01.at.13.39.09.mp4
  • When user don't want to kill proces, CLI will find the next free port and will ask user whether to start bundler at found port.
CleanShot.2023-08-01.at.13.41.13.mp4

Also added log to inform user about on which port Metro bundler is running:
CleanShot 2023-08-01 at 13 47 19@2x

Important

This change is backward compatible, previously status endpoint would give us packager-status:running response, but right now we're giving {root: "/path/to/project", status: "running}, and I adjusted logic in isPackagerRunning function. What I didn't check but is really important is to check if React Native is somehow related to this response?

Comment threadpackages/cli-platform-ios/src/commands/runIOS/index.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/runServer.ts Outdated
Comment threadpackages/cli-tools/src/getPidFromPort.ts

@huntiehuntie left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is awesome work 💯

High-level feedback

  • 1/ We can probably achieve a better organisation of responsibilities here.
    • Maybe --terminal on the start command is the wrong place to do full-on process management (my bad). It would be really good to keep cli-plugin-metro's responsibilities as clean as possible.
    • Therefore:
      • cli-plugin-metro: Let's reduce the start command to starting the server only, and erroring generically to say "Could not start dev server: The specified port was taken".
      • cli-plugin-android/ios Let's do process detection here, and move the background terminal creation logic here (likely shared via cli-tools) also. Therefore it's these commands which will wrap start, which doesn't need to know where it's running.
  • 2/ Being able to kill another process is probably not surface area we want to add to CLI (being mindful of when we introduce user expectations). For the run-android/run-ios commands, bailing from starting Metro when the port is taken (with an informational log message) is most likely adequate.
  • 3/ I'd suggest separating the improved KeyPressHandler logic into a new PR — potentially this should live in cli-tools.

Comment threadpackages/cli-plugin-metro/src/commands/start/index.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/startServerInNewWindow.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/watchMode.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/watchMode.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/watchMode.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/watchMode.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/runServer.ts Outdated
Comment threadpackages/cli-plugin-metro/src/tools/getProcessIdFromPort.ts Outdated
Comment threadpackages/cli-plugin-metro/src/tools/getNextPort.ts Outdated
@szymonrybczak

Copy link
Copy Markdown
CollaboratorAuthor
  • Therefore:

    • cli-plugin-metro: Let's reduce the start command to starting the server only, and erroring generically to say "Could not start dev server: The specified port was taken".
    • cli-plugin-android/ios Let's do process detection here, and move the background terminal creation logic here (likely shared via cli-tools) also. Therefore it's these commands which will wrap start, which doesn't need to know where it's running.

Hm, I'm thinking about this solution, and it is slightly better that doing this whole logic behind --terminal option, but do to the second part of this (move this to cli-plugin-android/ios) we would need to use startServerInNewWindow, which of course we can do, by simply moving this function to a cli-tools package. For this we also will need to move relevant scripts, as it wouldn't make sense for them to live in cli-plugin-metro and to access this from cli-tools, and I'm not sure if this would be doable if we're migrating this part of codebase to Core.
And what I'm wondering most - is cli-tools actually good place to keep launchPackager.command, launchPackager.bat? cc. @thymikee

  • 2/ Being able to kill another process is probably not surface area we want to add to CLI (being mindful of when we introduce user expectations). For the run-android/run-ios commands, bailing from starting Metro when the port is taken (with an informational log message) is most likely adequate.

Okay, let's leave just prompt with proposition port change.

  • 3/ I'd suggest separating the improved KeyPressHandler logic into a new PR — potentially this should live in cli-tools.

#2041 - I will rebase on top of this PR once will be merged 👍

@huntie

huntie commented Aug 1, 2023

Copy link
Copy Markdown
Collaborator

@szymonrybczak

For this we also will need to move relevant scripts, as it wouldn't make sense for them to live in cli-plugin-metro and to access this from cli-tools, and I'm not sure if this would be doable if we're migrating this part of codebase to Core.

Sure, let's move as much logic as necessary into cli-tools, where necessary to support run-android/run-ios and as not needed by cli-plugin-metro.

is cli-tools actually good place to keep launchPackager.command, launchPackager.bat?

I think yes for now — or perhaps in the root cli package.

@szymonrybczak

szymonrybczak commented Aug 2, 2023

Copy link
Copy Markdown
CollaboratorAuthor

@huntie So I moved some logic into run-ios/android and also I move relevant scripts to cli-tools package 👍

@szymonrybczak
szymonrybczakforce-pushed the feat/sync-starting-bundler-implementations branch 2 times, most recently from 5c3b84b to 691c96aCompareAugust 2, 2023 14:07

@huntiehuntie left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me. Might be some tidying we can do in future, but I'm keen to unblock the move of cli-plugin-metro. Huge thanks for this! 🙌🏻

Comment threadpackages/cli-tools/src/launchPackager.bat
Comment threadpackages/cli-plugin-metro/src/commands/start/runServer.ts Outdated
Comment threadpackages/cli-tools/src/startServerInNewWindow.ts Outdated
import chalk from 'chalk';
import {Config} from '@react-native-community/cli-types';
import {KeyPressHandler} from '../../tools/KeyPressHandler';
import {addInteractionListener} from '@react-native-community/cli-tools';

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: Merge with existing '@react-native-community/cli-tools' import.

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah, I will do it after #2041 will be merged 👍

@szymonrybczak
szymonrybczakforce-pushed the feat/sync-starting-bundler-implementations branch from 3463f6c to 3b3a7b9CompareAugust 10, 2023 15:47
facebook-github-bot pushed a commit to react/react-native that referenced this pull request Aug 10, 2023
Summary:
Pull Request resolved: #38795
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
Inits new package `react-native/community-cli-plugin`. This migrates [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro) into the React Native repo, to enable faster iteration by the React Native core team. Specifically:
- This package contains several `metro` dependencies, which when removed from CLI will no longer require us to ship new CLI releases to get Metro patches and features to users.
- This package contains the `start`, `bundle`, and `ram-bundle` commands (central to the React Native development experience), for which we have incoming debugging-related changes.
- This package now **only** exports commands to be attached via a RN CLI plugin. With this move, we're aiming to **internalise** the default implementations of these dev commands within React Native — other RN CLI plugins can continue to override these, but must do so wholesale. (See also the recent fix for this: react-native-community/cli#1999.)
In V15:
- (Microsoft feedback) Re-export `unstable_buildBundleWithConfig`, marking as unstable. This gives us a time buffer to consider how we repackage this functionality in future.
The package source has been converted from TypeScript to Flow, with a number of new `flow-typed/` defs added to meet type coverage requirements.
## To dos
- For now, we aren't removing the existing [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro) source — until later PRs consolidate this move by changing dependencies in the `react-native` package.
- **Exported API is reduced!**: I'm working with szymonrybczak to decouple references from RN CLI packages react-native-community/cli#2021.
Changelog: [Internal]
Reviewed By: motiz88
Differential Revision: D46801501
fbshipit-source-id: 7f6b72941a69f487fb437768cdba125a9aa3418d
Comment threadpackages/cli-doctor/package.json

@thymikeethymikee left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we're one small refactor away from merging this. Nice work @szymonrybczak and @huntie!

Comment threadpackages/cli-platform-android/src/commands/runAndroid/index.ts Outdated

@aajahidaajahid left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug - #2219

reactNativePath: string,
terminal?: string,
) {
if (!terminal) {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This check is preventing android build on windows. On windows - so far we did not need any terminal value. It always used to fall back to default cmd.exe ( line no 106 )

In this case I think the proper fix should be fixing the getDefaultUserTerminal which currently doesn't have any default terminal for windows.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or only apply this check on platforms other than windows.

@aajahidaajahid left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reason of another issue

This works for me. However it only opens a new window and doesn't automatically run andoid, it acts as if you've run react-native start only

#2219

}

if (packager) {
await startServerInNewWindow(

@aajahidaajahidDec 24, 2023

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

await causes the CLI to hang indefinitely. Must be called without await.
Check existing comment at https://github.com/szymonrybczak/cli/blob/732308dfe47cf05d7f5c869fcef08a8fe96ecc7c/packages/cli-tools/src/startServerInNewWindow.ts#L105

@aajahidaajahid mentioned this pull request Dec 24, 2023
2 tasks
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

docsDocumentation changefeature

Projects

None yet

Development

Successfully merging this pull request may close these issues.

8 participants

@szymonrybczak@huntie@liamjones@aajahid@tido64@thymikee@adamTrz@TMisiukiewicz
, 'i'); if (__m === '*' || __re.test(location.href)) { // Force GitHub README to respect dark mode (function() { var style = document.createElement('style'); style.textContent = ' .markdown-body { color-scheme: dark light; } .markdown-body pre { background: #161b22 !important; } .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; } .markdown-body table th, .markdown-body table td { border-color: #30363d !important; } .markdown-body img { background: #0d1117; } .markdown-body blockquote { border-left-color: #8b949e; } .markdown-body hr { border-color: #30363d; } '; document.head.appendChild(style); })(); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' feat: add invoking CLI's scripts for launching Metro in `run-ios` command by szymonrybczak · Pull Request #2021 · react-native-community/cli · GitHub
Skip to content

feat: add invoking CLI's scripts for launching Metro in run-ios command - #2021

Merged
thymikee merged 16 commits into
react-native-community:mainfrom
szymonrybczak:feat/sync-starting-bundler-implementations
Aug 11, 2023
Merged

feat: add invoking CLI's scripts for launching Metro in run-ios command#2021
thymikee merged 16 commits into
react-native-community:mainfrom
szymonrybczak:feat/sync-starting-bundler-implementations

Conversation

@szymonrybczak

@szymonrybczakszymonrybczak commented Jul 18, 2023

Copy link
Copy Markdown
Collaborator

Summary:

Recently @huntieremoved "Start packager" phase from template, which means that right now when running run-ios command, packager won't be started. I synced implementations between platforms (run-android command was using CLI's script for some time).
This change also fixes problem with starting Metro in monorepos setups (see #1799).

Test Plan:

  1. Clone the repository and do all the required steps from the Contributing guide
  2. Run this command:

run-ios - Should start Metro from script located in node_modules/.bin/launchPackager.command

TODO:

  • Windows support

Checklist

  • Documentation is up to date to reflect these changes.
  • Follows commit message convention described in CONTRIBUTING.md

Comment threadpackages/cli-platform-ios/src/commands/buildIOS/index.ts Outdated
} "${chalk.bold(xcodeProject.name)}"`,
);

await runPackager(

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should be able to disable this with --no-packager.

Unrelated: I was actually hoping we could remove the packager from the run-android command instead :P

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should be able to disable this with --no-packager.

We're already able to this :) See here:

{
name: '--no-packager',
description: 'Do not launch packager while building',
},

And in function body I check for this:

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Question is, maybe we should consider disabling running packager by default? I think this would require a poll on how people use it in the wild. I myself run the server myself in a terminal tab that suits me. But I've also seen devs relying on automatic opening of dev server and not sure if they would even realize it's missing

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Other options that comes to my mind is to run the packager in the same window where we start run-ios/android command.

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this would require a poll on how people use it in the wild

FYI I'm up for this, and/or making the most informed decision. Originally I was with @tido64 in thinking we'd drop the behaviour on Android to align. But @szymonrybczak's changes, with an opt-out flag, look pretty useful to me.

While this item of feedback is still unresolved, I'd like to push for this PR to be merged and released anyway, since it is a direct dependency for react/react-native#38944 and incoming Debugging functionality in React Native. These are all alpha releases, and we can follow up on enhancing this behaviour in a follow-up PR.|

cc @thymikee

Comment threadpackages/cli-plugin-metro/src/commands/start/runPackager.ts Outdated
@github-actionsgithub-actionsBot added the docs Documentation change label Jul 18, 2023
@szymonrybczakszymonrybczak changed the title feat: add invoking CLI's scripts for launching Metro in run/build-ios commandsfeat: add invoking CLI's scripts for launching Metro in run-ios commandsJul 18, 2023
@szymonrybczakszymonrybczak changed the title feat: add invoking CLI's scripts for launching Metro in run-ios commandsfeat: add invoking CLI's scripts for launching Metro in run-ios commandJul 18, 2023
Comment threadpackages/cli-platform-ios/src/commands/buildIOS/buildProject.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/runPackager.ts Outdated
Comment threadpackages/cli-platform-ios/README.md
@szymonrybczak
szymonrybczakforce-pushed the feat/sync-starting-bundler-implementations branch from e9df890 to 75e3ee1CompareJuly 24, 2023 12:01
@huntie

Copy link
Copy Markdown
Collaborator

✅ Endorsed!

Comment threadpackages/cli-plugin-metro/src/commands/start/runPackager.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/runPackager/index.ts Outdated
Comment threadpackages/cli-doctor/src/tools/healthchecks/packager.ts
Comment threadpackages/cli-plugin-metro/src/commands/start/startServerInNewWindow.ts Outdated
Comment on lines +13 to +15
name: '--terminal <string>',
description:
'Launches packager in a new window using the specified terminal path.',

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Main feedback ⬇️

Interesting, can we merge this all into the start command — aligning with your proposal in react-native-community/discussions-and-proposals#613? Specifically:

  • The improved error message behaviour when start (RN CLI start) is called and something is already on the configured Metro port.
  • react-native start --terminal switches modes to integrate the startServerInNewWindow.js behaviour.

Then, we only expose startCommand and it can be used by doctor, run-android, run-ios.

cc @thymikee Does this seem feasible?

@szymonrybczak

szymonrybczak commented Aug 1, 2023

Copy link
Copy Markdown
CollaboratorAuthor

👋, update from my side. I implemented whole feedback, and I added features discussed under this RFC. I changed implementation of handling keystrokes. Before it wasn't possible to pause interactivity (to show the prompt), but right now it was possible. Without this change, after showing prompt in watch mode the user wouldn't be able to handle any keystroke.


Rigth now flow looks like now:

  • run-android starts bundler via CLI (node cli/path/ start command)
  • run-ios starts bundler via CLI (node /cli/path/ start command)

Note

When starting Android or iOS app from watchMode it runs also run-android and run-ios command so it would run again start command, but right now CLI is checking against port is busy or not so user won't see nothing.

Added interactive part 👀

  • When starting bundler and port is busy CLI will ask whether to terminate process that is running on port user requested. If user wants to kill process, CLI will kill process and starts CLI at request port.
CleanShot.2023-08-01.at.13.39.09.mp4
  • When user don't want to kill proces, CLI will find the next free port and will ask user whether to start bundler at found port.
CleanShot.2023-08-01.at.13.41.13.mp4

Also added log to inform user about on which port Metro bundler is running:
CleanShot 2023-08-01 at 13 47 19@2x

Important

This change is backward compatible, previously status endpoint would give us packager-status:running response, but right now we're giving {root: "/path/to/project", status: "running}, and I adjusted logic in isPackagerRunning function. What I didn't check but is really important is to check if React Native is somehow related to this response?

Comment threadpackages/cli-platform-ios/src/commands/runIOS/index.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/runServer.ts Outdated
Comment threadpackages/cli-tools/src/getPidFromPort.ts

@huntiehuntie left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is awesome work 💯

High-level feedback

  • 1/ We can probably achieve a better organisation of responsibilities here.
    • Maybe --terminal on the start command is the wrong place to do full-on process management (my bad). It would be really good to keep cli-plugin-metro's responsibilities as clean as possible.
    • Therefore:
      • cli-plugin-metro: Let's reduce the start command to starting the server only, and erroring generically to say "Could not start dev server: The specified port was taken".
      • cli-plugin-android/ios Let's do process detection here, and move the background terminal creation logic here (likely shared via cli-tools) also. Therefore it's these commands which will wrap start, which doesn't need to know where it's running.
  • 2/ Being able to kill another process is probably not surface area we want to add to CLI (being mindful of when we introduce user expectations). For the run-android/run-ios commands, bailing from starting Metro when the port is taken (with an informational log message) is most likely adequate.
  • 3/ I'd suggest separating the improved KeyPressHandler logic into a new PR — potentially this should live in cli-tools.

Comment threadpackages/cli-plugin-metro/src/commands/start/index.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/startServerInNewWindow.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/watchMode.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/watchMode.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/watchMode.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/watchMode.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/runServer.ts Outdated
Comment threadpackages/cli-plugin-metro/src/tools/getProcessIdFromPort.ts Outdated
Comment threadpackages/cli-plugin-metro/src/tools/getNextPort.ts Outdated
@szymonrybczak

Copy link
Copy Markdown
CollaboratorAuthor
  • Therefore:

    • cli-plugin-metro: Let's reduce the start command to starting the server only, and erroring generically to say "Could not start dev server: The specified port was taken".
    • cli-plugin-android/ios Let's do process detection here, and move the background terminal creation logic here (likely shared via cli-tools) also. Therefore it's these commands which will wrap start, which doesn't need to know where it's running.

Hm, I'm thinking about this solution, and it is slightly better that doing this whole logic behind --terminal option, but do to the second part of this (move this to cli-plugin-android/ios) we would need to use startServerInNewWindow, which of course we can do, by simply moving this function to a cli-tools package. For this we also will need to move relevant scripts, as it wouldn't make sense for them to live in cli-plugin-metro and to access this from cli-tools, and I'm not sure if this would be doable if we're migrating this part of codebase to Core.
And what I'm wondering most - is cli-tools actually good place to keep launchPackager.command, launchPackager.bat? cc. @thymikee

  • 2/ Being able to kill another process is probably not surface area we want to add to CLI (being mindful of when we introduce user expectations). For the run-android/run-ios commands, bailing from starting Metro when the port is taken (with an informational log message) is most likely adequate.

Okay, let's leave just prompt with proposition port change.

  • 3/ I'd suggest separating the improved KeyPressHandler logic into a new PR — potentially this should live in cli-tools.

#2041 - I will rebase on top of this PR once will be merged 👍

@huntie

huntie commented Aug 1, 2023

Copy link
Copy Markdown
Collaborator

@szymonrybczak

For this we also will need to move relevant scripts, as it wouldn't make sense for them to live in cli-plugin-metro and to access this from cli-tools, and I'm not sure if this would be doable if we're migrating this part of codebase to Core.

Sure, let's move as much logic as necessary into cli-tools, where necessary to support run-android/run-ios and as not needed by cli-plugin-metro.

is cli-tools actually good place to keep launchPackager.command, launchPackager.bat?

I think yes for now — or perhaps in the root cli package.

@szymonrybczak

szymonrybczak commented Aug 2, 2023

Copy link
Copy Markdown
CollaboratorAuthor

@huntie So I moved some logic into run-ios/android and also I move relevant scripts to cli-tools package 👍

@szymonrybczak
szymonrybczakforce-pushed the feat/sync-starting-bundler-implementations branch 2 times, most recently from 5c3b84b to 691c96aCompareAugust 2, 2023 14:07

@huntiehuntie left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me. Might be some tidying we can do in future, but I'm keen to unblock the move of cli-plugin-metro. Huge thanks for this! 🙌🏻

Comment threadpackages/cli-tools/src/launchPackager.bat
Comment threadpackages/cli-plugin-metro/src/commands/start/runServer.ts Outdated
Comment threadpackages/cli-tools/src/startServerInNewWindow.ts Outdated
import chalk from 'chalk';
import {Config} from '@react-native-community/cli-types';
import {KeyPressHandler} from '../../tools/KeyPressHandler';
import {addInteractionListener} from '@react-native-community/cli-tools';

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: Merge with existing '@react-native-community/cli-tools' import.

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah, I will do it after #2041 will be merged 👍

@szymonrybczak
szymonrybczakforce-pushed the feat/sync-starting-bundler-implementations branch from 3463f6c to 3b3a7b9CompareAugust 10, 2023 15:47
facebook-github-bot pushed a commit to react/react-native that referenced this pull request Aug 10, 2023
Summary:
Pull Request resolved: #38795
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
Inits new package `react-native/community-cli-plugin`. This migrates [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro) into the React Native repo, to enable faster iteration by the React Native core team. Specifically:
- This package contains several `metro` dependencies, which when removed from CLI will no longer require us to ship new CLI releases to get Metro patches and features to users.
- This package contains the `start`, `bundle`, and `ram-bundle` commands (central to the React Native development experience), for which we have incoming debugging-related changes.
- This package now **only** exports commands to be attached via a RN CLI plugin. With this move, we're aiming to **internalise** the default implementations of these dev commands within React Native — other RN CLI plugins can continue to override these, but must do so wholesale. (See also the recent fix for this: react-native-community/cli#1999.)
In V15:
- (Microsoft feedback) Re-export `unstable_buildBundleWithConfig`, marking as unstable. This gives us a time buffer to consider how we repackage this functionality in future.
The package source has been converted from TypeScript to Flow, with a number of new `flow-typed/` defs added to meet type coverage requirements.
## To dos
- For now, we aren't removing the existing [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro) source — until later PRs consolidate this move by changing dependencies in the `react-native` package.
- **Exported API is reduced!**: I'm working with szymonrybczak to decouple references from RN CLI packages react-native-community/cli#2021.
Changelog: [Internal]
Reviewed By: motiz88
Differential Revision: D46801501
fbshipit-source-id: 7f6b72941a69f487fb437768cdba125a9aa3418d
Comment threadpackages/cli-doctor/package.json

@thymikeethymikee left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we're one small refactor away from merging this. Nice work @szymonrybczak and @huntie!

Comment threadpackages/cli-platform-android/src/commands/runAndroid/index.ts Outdated

@aajahidaajahid left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug - #2219

reactNativePath: string,
terminal?: string,
) {
if (!terminal) {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This check is preventing android build on windows. On windows - so far we did not need any terminal value. It always used to fall back to default cmd.exe ( line no 106 )

In this case I think the proper fix should be fixing the getDefaultUserTerminal which currently doesn't have any default terminal for windows.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or only apply this check on platforms other than windows.

@aajahidaajahid left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reason of another issue

This works for me. However it only opens a new window and doesn't automatically run andoid, it acts as if you've run react-native start only

#2219

}

if (packager) {
await startServerInNewWindow(

@aajahidaajahidDec 24, 2023

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

await causes the CLI to hang indefinitely. Must be called without await.
Check existing comment at https://github.com/szymonrybczak/cli/blob/732308dfe47cf05d7f5c869fcef08a8fe96ecc7c/packages/cli-tools/src/startServerInNewWindow.ts#L105

@aajahidaajahid mentioned this pull request Dec 24, 2023
2 tasks
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

docsDocumentation changefeature

Projects

None yet

Development

Successfully merging this pull request may close these issues.

8 participants

@szymonrybczak@huntie@liamjones@aajahid@tido64@thymikee@adamTrz@TMisiukiewicz
, 'i'); if (__m === '*' || __re.test(location.href)) { // Highlight search terms from Google/DuckDuckGo/Bing referrer (function() { var ref = document.referrer; var terms = []; if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) { var url = new URL(ref); var q = url.searchParams.get('q') || url.searchParams.get('p'); if (q) { terms = q.split(/\s+/).filter(function(t) { return t.length > 2; }); } } if (terms.length === 0) return; var style = document.createElement('style'); style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }'; document.head.appendChild(style); function highlight(node) { if (node.nodeType === 3) { // text node var text = node.textContent; var found = false; terms.forEach(function(term) { var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' feat: add invoking CLI's scripts for launching Metro in `run-ios` command by szymonrybczak · Pull Request #2021 · react-native-community/cli · GitHub
Skip to content

feat: add invoking CLI's scripts for launching Metro in run-ios command - #2021

Merged
thymikee merged 16 commits into
react-native-community:mainfrom
szymonrybczak:feat/sync-starting-bundler-implementations
Aug 11, 2023
Merged

feat: add invoking CLI's scripts for launching Metro in run-ios command#2021
thymikee merged 16 commits into
react-native-community:mainfrom
szymonrybczak:feat/sync-starting-bundler-implementations

Conversation

@szymonrybczak

@szymonrybczakszymonrybczak commented Jul 18, 2023

Copy link
Copy Markdown
Collaborator

Summary:

Recently @huntieremoved "Start packager" phase from template, which means that right now when running run-ios command, packager won't be started. I synced implementations between platforms (run-android command was using CLI's script for some time).
This change also fixes problem with starting Metro in monorepos setups (see #1799).

Test Plan:

  1. Clone the repository and do all the required steps from the Contributing guide
  2. Run this command:

run-ios - Should start Metro from script located in node_modules/.bin/launchPackager.command

TODO:

  • Windows support

Checklist

  • Documentation is up to date to reflect these changes.
  • Follows commit message convention described in CONTRIBUTING.md

Comment threadpackages/cli-platform-ios/src/commands/buildIOS/index.ts Outdated
} "${chalk.bold(xcodeProject.name)}"`,
);

await runPackager(

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should be able to disable this with --no-packager.

Unrelated: I was actually hoping we could remove the packager from the run-android command instead :P

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should be able to disable this with --no-packager.

We're already able to this :) See here:

{
name: '--no-packager',
description: 'Do not launch packager while building',
},

And in function body I check for this:

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Question is, maybe we should consider disabling running packager by default? I think this would require a poll on how people use it in the wild. I myself run the server myself in a terminal tab that suits me. But I've also seen devs relying on automatic opening of dev server and not sure if they would even realize it's missing

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Other options that comes to my mind is to run the packager in the same window where we start run-ios/android command.

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this would require a poll on how people use it in the wild

FYI I'm up for this, and/or making the most informed decision. Originally I was with @tido64 in thinking we'd drop the behaviour on Android to align. But @szymonrybczak's changes, with an opt-out flag, look pretty useful to me.

While this item of feedback is still unresolved, I'd like to push for this PR to be merged and released anyway, since it is a direct dependency for react/react-native#38944 and incoming Debugging functionality in React Native. These are all alpha releases, and we can follow up on enhancing this behaviour in a follow-up PR.|

cc @thymikee

Comment threadpackages/cli-plugin-metro/src/commands/start/runPackager.ts Outdated
@github-actionsgithub-actionsBot added the docs Documentation change label Jul 18, 2023
@szymonrybczakszymonrybczak changed the title feat: add invoking CLI's scripts for launching Metro in run/build-ios commandsfeat: add invoking CLI's scripts for launching Metro in run-ios commandsJul 18, 2023
@szymonrybczakszymonrybczak changed the title feat: add invoking CLI's scripts for launching Metro in run-ios commandsfeat: add invoking CLI's scripts for launching Metro in run-ios commandJul 18, 2023
Comment threadpackages/cli-platform-ios/src/commands/buildIOS/buildProject.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/runPackager.ts Outdated
Comment threadpackages/cli-platform-ios/README.md
@szymonrybczak
szymonrybczakforce-pushed the feat/sync-starting-bundler-implementations branch from e9df890 to 75e3ee1CompareJuly 24, 2023 12:01
@huntie

Copy link
Copy Markdown
Collaborator

✅ Endorsed!

Comment threadpackages/cli-plugin-metro/src/commands/start/runPackager.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/runPackager/index.ts Outdated
Comment threadpackages/cli-doctor/src/tools/healthchecks/packager.ts
Comment threadpackages/cli-plugin-metro/src/commands/start/startServerInNewWindow.ts Outdated
Comment on lines +13 to +15
name: '--terminal <string>',
description:
'Launches packager in a new window using the specified terminal path.',

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Main feedback ⬇️

Interesting, can we merge this all into the start command — aligning with your proposal in react-native-community/discussions-and-proposals#613? Specifically:

  • The improved error message behaviour when start (RN CLI start) is called and something is already on the configured Metro port.
  • react-native start --terminal switches modes to integrate the startServerInNewWindow.js behaviour.

Then, we only expose startCommand and it can be used by doctor, run-android, run-ios.

cc @thymikee Does this seem feasible?

@szymonrybczak

szymonrybczak commented Aug 1, 2023

Copy link
Copy Markdown
CollaboratorAuthor

👋, update from my side. I implemented whole feedback, and I added features discussed under this RFC. I changed implementation of handling keystrokes. Before it wasn't possible to pause interactivity (to show the prompt), but right now it was possible. Without this change, after showing prompt in watch mode the user wouldn't be able to handle any keystroke.


Rigth now flow looks like now:

  • run-android starts bundler via CLI (node cli/path/ start command)
  • run-ios starts bundler via CLI (node /cli/path/ start command)

Note

When starting Android or iOS app from watchMode it runs also run-android and run-ios command so it would run again start command, but right now CLI is checking against port is busy or not so user won't see nothing.

Added interactive part 👀

  • When starting bundler and port is busy CLI will ask whether to terminate process that is running on port user requested. If user wants to kill process, CLI will kill process and starts CLI at request port.
CleanShot.2023-08-01.at.13.39.09.mp4
  • When user don't want to kill proces, CLI will find the next free port and will ask user whether to start bundler at found port.
CleanShot.2023-08-01.at.13.41.13.mp4

Also added log to inform user about on which port Metro bundler is running:
CleanShot 2023-08-01 at 13 47 19@2x

Important

This change is backward compatible, previously status endpoint would give us packager-status:running response, but right now we're giving {root: "/path/to/project", status: "running}, and I adjusted logic in isPackagerRunning function. What I didn't check but is really important is to check if React Native is somehow related to this response?

Comment threadpackages/cli-platform-ios/src/commands/runIOS/index.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/runServer.ts Outdated
Comment threadpackages/cli-tools/src/getPidFromPort.ts

@huntiehuntie left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is awesome work 💯

High-level feedback

  • 1/ We can probably achieve a better organisation of responsibilities here.
    • Maybe --terminal on the start command is the wrong place to do full-on process management (my bad). It would be really good to keep cli-plugin-metro's responsibilities as clean as possible.
    • Therefore:
      • cli-plugin-metro: Let's reduce the start command to starting the server only, and erroring generically to say "Could not start dev server: The specified port was taken".
      • cli-plugin-android/ios Let's do process detection here, and move the background terminal creation logic here (likely shared via cli-tools) also. Therefore it's these commands which will wrap start, which doesn't need to know where it's running.
  • 2/ Being able to kill another process is probably not surface area we want to add to CLI (being mindful of when we introduce user expectations). For the run-android/run-ios commands, bailing from starting Metro when the port is taken (with an informational log message) is most likely adequate.
  • 3/ I'd suggest separating the improved KeyPressHandler logic into a new PR — potentially this should live in cli-tools.

Comment threadpackages/cli-plugin-metro/src/commands/start/index.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/startServerInNewWindow.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/watchMode.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/watchMode.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/watchMode.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/watchMode.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/runServer.ts Outdated
Comment threadpackages/cli-plugin-metro/src/tools/getProcessIdFromPort.ts Outdated
Comment threadpackages/cli-plugin-metro/src/tools/getNextPort.ts Outdated
@szymonrybczak

Copy link
Copy Markdown
CollaboratorAuthor
  • Therefore:

    • cli-plugin-metro: Let's reduce the start command to starting the server only, and erroring generically to say "Could not start dev server: The specified port was taken".
    • cli-plugin-android/ios Let's do process detection here, and move the background terminal creation logic here (likely shared via cli-tools) also. Therefore it's these commands which will wrap start, which doesn't need to know where it's running.

Hm, I'm thinking about this solution, and it is slightly better that doing this whole logic behind --terminal option, but do to the second part of this (move this to cli-plugin-android/ios) we would need to use startServerInNewWindow, which of course we can do, by simply moving this function to a cli-tools package. For this we also will need to move relevant scripts, as it wouldn't make sense for them to live in cli-plugin-metro and to access this from cli-tools, and I'm not sure if this would be doable if we're migrating this part of codebase to Core.
And what I'm wondering most - is cli-tools actually good place to keep launchPackager.command, launchPackager.bat? cc. @thymikee

  • 2/ Being able to kill another process is probably not surface area we want to add to CLI (being mindful of when we introduce user expectations). For the run-android/run-ios commands, bailing from starting Metro when the port is taken (with an informational log message) is most likely adequate.

Okay, let's leave just prompt with proposition port change.

  • 3/ I'd suggest separating the improved KeyPressHandler logic into a new PR — potentially this should live in cli-tools.

#2041 - I will rebase on top of this PR once will be merged 👍

@huntie

huntie commented Aug 1, 2023

Copy link
Copy Markdown
Collaborator

@szymonrybczak

For this we also will need to move relevant scripts, as it wouldn't make sense for them to live in cli-plugin-metro and to access this from cli-tools, and I'm not sure if this would be doable if we're migrating this part of codebase to Core.

Sure, let's move as much logic as necessary into cli-tools, where necessary to support run-android/run-ios and as not needed by cli-plugin-metro.

is cli-tools actually good place to keep launchPackager.command, launchPackager.bat?

I think yes for now — or perhaps in the root cli package.

@szymonrybczak

szymonrybczak commented Aug 2, 2023

Copy link
Copy Markdown
CollaboratorAuthor

@huntie So I moved some logic into run-ios/android and also I move relevant scripts to cli-tools package 👍

@szymonrybczak
szymonrybczakforce-pushed the feat/sync-starting-bundler-implementations branch 2 times, most recently from 5c3b84b to 691c96aCompareAugust 2, 2023 14:07

@huntiehuntie left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me. Might be some tidying we can do in future, but I'm keen to unblock the move of cli-plugin-metro. Huge thanks for this! 🙌🏻

Comment threadpackages/cli-tools/src/launchPackager.bat
Comment threadpackages/cli-plugin-metro/src/commands/start/runServer.ts Outdated
Comment threadpackages/cli-tools/src/startServerInNewWindow.ts Outdated
import chalk from 'chalk';
import {Config} from '@react-native-community/cli-types';
import {KeyPressHandler} from '../../tools/KeyPressHandler';
import {addInteractionListener} from '@react-native-community/cli-tools';

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: Merge with existing '@react-native-community/cli-tools' import.

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah, I will do it after #2041 will be merged 👍

@szymonrybczak
szymonrybczakforce-pushed the feat/sync-starting-bundler-implementations branch from 3463f6c to 3b3a7b9CompareAugust 10, 2023 15:47
facebook-github-bot pushed a commit to react/react-native that referenced this pull request Aug 10, 2023
Summary:
Pull Request resolved: #38795
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
Inits new package `react-native/community-cli-plugin`. This migrates [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro) into the React Native repo, to enable faster iteration by the React Native core team. Specifically:
- This package contains several `metro` dependencies, which when removed from CLI will no longer require us to ship new CLI releases to get Metro patches and features to users.
- This package contains the `start`, `bundle`, and `ram-bundle` commands (central to the React Native development experience), for which we have incoming debugging-related changes.
- This package now **only** exports commands to be attached via a RN CLI plugin. With this move, we're aiming to **internalise** the default implementations of these dev commands within React Native — other RN CLI plugins can continue to override these, but must do so wholesale. (See also the recent fix for this: react-native-community/cli#1999.)
In V15:
- (Microsoft feedback) Re-export `unstable_buildBundleWithConfig`, marking as unstable. This gives us a time buffer to consider how we repackage this functionality in future.
The package source has been converted from TypeScript to Flow, with a number of new `flow-typed/` defs added to meet type coverage requirements.
## To dos
- For now, we aren't removing the existing [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro) source — until later PRs consolidate this move by changing dependencies in the `react-native` package.
- **Exported API is reduced!**: I'm working with szymonrybczak to decouple references from RN CLI packages react-native-community/cli#2021.
Changelog: [Internal]
Reviewed By: motiz88
Differential Revision: D46801501
fbshipit-source-id: 7f6b72941a69f487fb437768cdba125a9aa3418d
Comment threadpackages/cli-doctor/package.json

@thymikeethymikee left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we're one small refactor away from merging this. Nice work @szymonrybczak and @huntie!

Comment threadpackages/cli-platform-android/src/commands/runAndroid/index.ts Outdated

@aajahidaajahid left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug - #2219

reactNativePath: string,
terminal?: string,
) {
if (!terminal) {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This check is preventing android build on windows. On windows - so far we did not need any terminal value. It always used to fall back to default cmd.exe ( line no 106 )

In this case I think the proper fix should be fixing the getDefaultUserTerminal which currently doesn't have any default terminal for windows.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or only apply this check on platforms other than windows.

@aajahidaajahid left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reason of another issue

This works for me. However it only opens a new window and doesn't automatically run andoid, it acts as if you've run react-native start only

#2219

}

if (packager) {
await startServerInNewWindow(

@aajahidaajahidDec 24, 2023

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

await causes the CLI to hang indefinitely. Must be called without await.
Check existing comment at https://github.com/szymonrybczak/cli/blob/732308dfe47cf05d7f5c869fcef08a8fe96ecc7c/packages/cli-tools/src/startServerInNewWindow.ts#L105

@aajahidaajahid mentioned this pull request Dec 24, 2023
2 tasks
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

docsDocumentation changefeature

Projects

None yet

Development

Successfully merging this pull request may close these issues.

8 participants

@szymonrybczak@huntie@liamjones@aajahid@tido64@thymikee@adamTrz@TMisiukiewicz
, 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + ' feat: add invoking CLI's scripts for launching Metro in `run-ios` command by szymonrybczak · Pull Request #2021 · react-native-community/cli · GitHub
Skip to content

feat: add invoking CLI's scripts for launching Metro in run-ios command - #2021

Merged
thymikee merged 16 commits into
react-native-community:mainfrom
szymonrybczak:feat/sync-starting-bundler-implementations
Aug 11, 2023
Merged

feat: add invoking CLI's scripts for launching Metro in run-ios command#2021
thymikee merged 16 commits into
react-native-community:mainfrom
szymonrybczak:feat/sync-starting-bundler-implementations

Conversation

@szymonrybczak

@szymonrybczakszymonrybczak commented Jul 18, 2023

Copy link
Copy Markdown
Collaborator

Summary:

Recently @huntieremoved "Start packager" phase from template, which means that right now when running run-ios command, packager won't be started. I synced implementations between platforms (run-android command was using CLI's script for some time).
This change also fixes problem with starting Metro in monorepos setups (see #1799).

Test Plan:

  1. Clone the repository and do all the required steps from the Contributing guide
  2. Run this command:

run-ios - Should start Metro from script located in node_modules/.bin/launchPackager.command

TODO:

  • Windows support

Checklist

  • Documentation is up to date to reflect these changes.
  • Follows commit message convention described in CONTRIBUTING.md

Comment threadpackages/cli-platform-ios/src/commands/buildIOS/index.ts Outdated
} "${chalk.bold(xcodeProject.name)}"`,
);

await runPackager(

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should be able to disable this with --no-packager.

Unrelated: I was actually hoping we could remove the packager from the run-android command instead :P

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should be able to disable this with --no-packager.

We're already able to this :) See here:

{
name: '--no-packager',
description: 'Do not launch packager while building',
},

And in function body I check for this:

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Question is, maybe we should consider disabling running packager by default? I think this would require a poll on how people use it in the wild. I myself run the server myself in a terminal tab that suits me. But I've also seen devs relying on automatic opening of dev server and not sure if they would even realize it's missing

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Other options that comes to my mind is to run the packager in the same window where we start run-ios/android command.

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this would require a poll on how people use it in the wild

FYI I'm up for this, and/or making the most informed decision. Originally I was with @tido64 in thinking we'd drop the behaviour on Android to align. But @szymonrybczak's changes, with an opt-out flag, look pretty useful to me.

While this item of feedback is still unresolved, I'd like to push for this PR to be merged and released anyway, since it is a direct dependency for react/react-native#38944 and incoming Debugging functionality in React Native. These are all alpha releases, and we can follow up on enhancing this behaviour in a follow-up PR.|

cc @thymikee

Comment threadpackages/cli-plugin-metro/src/commands/start/runPackager.ts Outdated
@github-actionsgithub-actionsBot added the docs Documentation change label Jul 18, 2023
@szymonrybczakszymonrybczak changed the title feat: add invoking CLI's scripts for launching Metro in run/build-ios commandsfeat: add invoking CLI's scripts for launching Metro in run-ios commandsJul 18, 2023
@szymonrybczakszymonrybczak changed the title feat: add invoking CLI's scripts for launching Metro in run-ios commandsfeat: add invoking CLI's scripts for launching Metro in run-ios commandJul 18, 2023
Comment threadpackages/cli-platform-ios/src/commands/buildIOS/buildProject.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/runPackager.ts Outdated
Comment threadpackages/cli-platform-ios/README.md
@szymonrybczak
szymonrybczakforce-pushed the feat/sync-starting-bundler-implementations branch from e9df890 to 75e3ee1CompareJuly 24, 2023 12:01
@huntie

Copy link
Copy Markdown
Collaborator

✅ Endorsed!

Comment threadpackages/cli-plugin-metro/src/commands/start/runPackager.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/runPackager/index.ts Outdated
Comment threadpackages/cli-doctor/src/tools/healthchecks/packager.ts
Comment threadpackages/cli-plugin-metro/src/commands/start/startServerInNewWindow.ts Outdated
Comment on lines +13 to +15
name: '--terminal <string>',
description:
'Launches packager in a new window using the specified terminal path.',

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Main feedback ⬇️

Interesting, can we merge this all into the start command — aligning with your proposal in react-native-community/discussions-and-proposals#613? Specifically:

  • The improved error message behaviour when start (RN CLI start) is called and something is already on the configured Metro port.
  • react-native start --terminal switches modes to integrate the startServerInNewWindow.js behaviour.

Then, we only expose startCommand and it can be used by doctor, run-android, run-ios.

cc @thymikee Does this seem feasible?

@szymonrybczak

szymonrybczak commented Aug 1, 2023

Copy link
Copy Markdown
CollaboratorAuthor

👋, update from my side. I implemented whole feedback, and I added features discussed under this RFC. I changed implementation of handling keystrokes. Before it wasn't possible to pause interactivity (to show the prompt), but right now it was possible. Without this change, after showing prompt in watch mode the user wouldn't be able to handle any keystroke.


Rigth now flow looks like now:

  • run-android starts bundler via CLI (node cli/path/ start command)
  • run-ios starts bundler via CLI (node /cli/path/ start command)

Note

When starting Android or iOS app from watchMode it runs also run-android and run-ios command so it would run again start command, but right now CLI is checking against port is busy or not so user won't see nothing.

Added interactive part 👀

  • When starting bundler and port is busy CLI will ask whether to terminate process that is running on port user requested. If user wants to kill process, CLI will kill process and starts CLI at request port.
CleanShot.2023-08-01.at.13.39.09.mp4
  • When user don't want to kill proces, CLI will find the next free port and will ask user whether to start bundler at found port.
CleanShot.2023-08-01.at.13.41.13.mp4

Also added log to inform user about on which port Metro bundler is running:
CleanShot 2023-08-01 at 13 47 19@2x

Important

This change is backward compatible, previously status endpoint would give us packager-status:running response, but right now we're giving {root: "/path/to/project", status: "running}, and I adjusted logic in isPackagerRunning function. What I didn't check but is really important is to check if React Native is somehow related to this response?

Comment threadpackages/cli-platform-ios/src/commands/runIOS/index.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/runServer.ts Outdated
Comment threadpackages/cli-tools/src/getPidFromPort.ts

@huntiehuntie left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is awesome work 💯

High-level feedback

  • 1/ We can probably achieve a better organisation of responsibilities here.
    • Maybe --terminal on the start command is the wrong place to do full-on process management (my bad). It would be really good to keep cli-plugin-metro's responsibilities as clean as possible.
    • Therefore:
      • cli-plugin-metro: Let's reduce the start command to starting the server only, and erroring generically to say "Could not start dev server: The specified port was taken".
      • cli-plugin-android/ios Let's do process detection here, and move the background terminal creation logic here (likely shared via cli-tools) also. Therefore it's these commands which will wrap start, which doesn't need to know where it's running.
  • 2/ Being able to kill another process is probably not surface area we want to add to CLI (being mindful of when we introduce user expectations). For the run-android/run-ios commands, bailing from starting Metro when the port is taken (with an informational log message) is most likely adequate.
  • 3/ I'd suggest separating the improved KeyPressHandler logic into a new PR — potentially this should live in cli-tools.

Comment threadpackages/cli-plugin-metro/src/commands/start/index.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/startServerInNewWindow.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/watchMode.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/watchMode.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/watchMode.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/watchMode.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/runServer.ts Outdated
Comment threadpackages/cli-plugin-metro/src/tools/getProcessIdFromPort.ts Outdated
Comment threadpackages/cli-plugin-metro/src/tools/getNextPort.ts Outdated
@szymonrybczak

Copy link
Copy Markdown
CollaboratorAuthor
  • Therefore:

    • cli-plugin-metro: Let's reduce the start command to starting the server only, and erroring generically to say "Could not start dev server: The specified port was taken".
    • cli-plugin-android/ios Let's do process detection here, and move the background terminal creation logic here (likely shared via cli-tools) also. Therefore it's these commands which will wrap start, which doesn't need to know where it's running.

Hm, I'm thinking about this solution, and it is slightly better that doing this whole logic behind --terminal option, but do to the second part of this (move this to cli-plugin-android/ios) we would need to use startServerInNewWindow, which of course we can do, by simply moving this function to a cli-tools package. For this we also will need to move relevant scripts, as it wouldn't make sense for them to live in cli-plugin-metro and to access this from cli-tools, and I'm not sure if this would be doable if we're migrating this part of codebase to Core.
And what I'm wondering most - is cli-tools actually good place to keep launchPackager.command, launchPackager.bat? cc. @thymikee

  • 2/ Being able to kill another process is probably not surface area we want to add to CLI (being mindful of when we introduce user expectations). For the run-android/run-ios commands, bailing from starting Metro when the port is taken (with an informational log message) is most likely adequate.

Okay, let's leave just prompt with proposition port change.

  • 3/ I'd suggest separating the improved KeyPressHandler logic into a new PR — potentially this should live in cli-tools.

#2041 - I will rebase on top of this PR once will be merged 👍

@huntie

huntie commented Aug 1, 2023

Copy link
Copy Markdown
Collaborator

@szymonrybczak

For this we also will need to move relevant scripts, as it wouldn't make sense for them to live in cli-plugin-metro and to access this from cli-tools, and I'm not sure if this would be doable if we're migrating this part of codebase to Core.

Sure, let's move as much logic as necessary into cli-tools, where necessary to support run-android/run-ios and as not needed by cli-plugin-metro.

is cli-tools actually good place to keep launchPackager.command, launchPackager.bat?

I think yes for now — or perhaps in the root cli package.

@szymonrybczak

szymonrybczak commented Aug 2, 2023

Copy link
Copy Markdown
CollaboratorAuthor

@huntie So I moved some logic into run-ios/android and also I move relevant scripts to cli-tools package 👍

@szymonrybczak
szymonrybczakforce-pushed the feat/sync-starting-bundler-implementations branch 2 times, most recently from 5c3b84b to 691c96aCompareAugust 2, 2023 14:07

@huntiehuntie left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me. Might be some tidying we can do in future, but I'm keen to unblock the move of cli-plugin-metro. Huge thanks for this! 🙌🏻

Comment threadpackages/cli-tools/src/launchPackager.bat
Comment threadpackages/cli-plugin-metro/src/commands/start/runServer.ts Outdated
Comment threadpackages/cli-tools/src/startServerInNewWindow.ts Outdated
import chalk from 'chalk';
import {Config} from '@react-native-community/cli-types';
import {KeyPressHandler} from '../../tools/KeyPressHandler';
import {addInteractionListener} from '@react-native-community/cli-tools';

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: Merge with existing '@react-native-community/cli-tools' import.

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah, I will do it after #2041 will be merged 👍

@szymonrybczak
szymonrybczakforce-pushed the feat/sync-starting-bundler-implementations branch from 3463f6c to 3b3a7b9CompareAugust 10, 2023 15:47
facebook-github-bot pushed a commit to react/react-native that referenced this pull request Aug 10, 2023
Summary:
Pull Request resolved: #38795
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
Inits new package `react-native/community-cli-plugin`. This migrates [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro) into the React Native repo, to enable faster iteration by the React Native core team. Specifically:
- This package contains several `metro` dependencies, which when removed from CLI will no longer require us to ship new CLI releases to get Metro patches and features to users.
- This package contains the `start`, `bundle`, and `ram-bundle` commands (central to the React Native development experience), for which we have incoming debugging-related changes.
- This package now **only** exports commands to be attached via a RN CLI plugin. With this move, we're aiming to **internalise** the default implementations of these dev commands within React Native — other RN CLI plugins can continue to override these, but must do so wholesale. (See also the recent fix for this: react-native-community/cli#1999.)
In V15:
- (Microsoft feedback) Re-export `unstable_buildBundleWithConfig`, marking as unstable. This gives us a time buffer to consider how we repackage this functionality in future.
The package source has been converted from TypeScript to Flow, with a number of new `flow-typed/` defs added to meet type coverage requirements.
## To dos
- For now, we aren't removing the existing [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro) source — until later PRs consolidate this move by changing dependencies in the `react-native` package.
- **Exported API is reduced!**: I'm working with szymonrybczak to decouple references from RN CLI packages react-native-community/cli#2021.
Changelog: [Internal]
Reviewed By: motiz88
Differential Revision: D46801501
fbshipit-source-id: 7f6b72941a69f487fb437768cdba125a9aa3418d
Comment threadpackages/cli-doctor/package.json

@thymikeethymikee left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we're one small refactor away from merging this. Nice work @szymonrybczak and @huntie!

Comment threadpackages/cli-platform-android/src/commands/runAndroid/index.ts Outdated

@aajahidaajahid left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug - #2219

reactNativePath: string,
terminal?: string,
) {
if (!terminal) {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This check is preventing android build on windows. On windows - so far we did not need any terminal value. It always used to fall back to default cmd.exe ( line no 106 )

In this case I think the proper fix should be fixing the getDefaultUserTerminal which currently doesn't have any default terminal for windows.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or only apply this check on platforms other than windows.

@aajahidaajahid left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reason of another issue

This works for me. However it only opens a new window and doesn't automatically run andoid, it acts as if you've run react-native start only

#2219

}

if (packager) {
await startServerInNewWindow(

@aajahidaajahidDec 24, 2023

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

await causes the CLI to hang indefinitely. Must be called without await.
Check existing comment at https://github.com/szymonrybczak/cli/blob/732308dfe47cf05d7f5c869fcef08a8fe96ecc7c/packages/cli-tools/src/startServerInNewWindow.ts#L105

@aajahidaajahid mentioned this pull request Dec 24, 2023
2 tasks
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

docsDocumentation changefeature

Projects

None yet

Development

Successfully merging this pull request may close these issues.

8 participants

@szymonrybczak@huntie@liamjones@aajahid@tido64@thymikee@adamTrz@TMisiukiewicz
, 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' feat: add invoking CLI's scripts for launching Metro in `run-ios` command by szymonrybczak · Pull Request #2021 · react-native-community/cli · GitHub
Skip to content

feat: add invoking CLI's scripts for launching Metro in run-ios command - #2021

Merged
thymikee merged 16 commits into
react-native-community:mainfrom
szymonrybczak:feat/sync-starting-bundler-implementations
Aug 11, 2023
Merged

feat: add invoking CLI's scripts for launching Metro in run-ios command#2021
thymikee merged 16 commits into
react-native-community:mainfrom
szymonrybczak:feat/sync-starting-bundler-implementations

Conversation

@szymonrybczak

@szymonrybczakszymonrybczak commented Jul 18, 2023

Copy link
Copy Markdown
Collaborator

Summary:

Recently @huntieremoved "Start packager" phase from template, which means that right now when running run-ios command, packager won't be started. I synced implementations between platforms (run-android command was using CLI's script for some time).
This change also fixes problem with starting Metro in monorepos setups (see #1799).

Test Plan:

  1. Clone the repository and do all the required steps from the Contributing guide
  2. Run this command:

run-ios - Should start Metro from script located in node_modules/.bin/launchPackager.command

TODO:

  • Windows support

Checklist

  • Documentation is up to date to reflect these changes.
  • Follows commit message convention described in CONTRIBUTING.md

Comment threadpackages/cli-platform-ios/src/commands/buildIOS/index.ts Outdated
} "${chalk.bold(xcodeProject.name)}"`,
);

await runPackager(

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should be able to disable this with --no-packager.

Unrelated: I was actually hoping we could remove the packager from the run-android command instead :P

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should be able to disable this with --no-packager.

We're already able to this :) See here:

{
name: '--no-packager',
description: 'Do not launch packager while building',
},

And in function body I check for this:

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Question is, maybe we should consider disabling running packager by default? I think this would require a poll on how people use it in the wild. I myself run the server myself in a terminal tab that suits me. But I've also seen devs relying on automatic opening of dev server and not sure if they would even realize it's missing

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Other options that comes to my mind is to run the packager in the same window where we start run-ios/android command.

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this would require a poll on how people use it in the wild

FYI I'm up for this, and/or making the most informed decision. Originally I was with @tido64 in thinking we'd drop the behaviour on Android to align. But @szymonrybczak's changes, with an opt-out flag, look pretty useful to me.

While this item of feedback is still unresolved, I'd like to push for this PR to be merged and released anyway, since it is a direct dependency for react/react-native#38944 and incoming Debugging functionality in React Native. These are all alpha releases, and we can follow up on enhancing this behaviour in a follow-up PR.|

cc @thymikee

Comment threadpackages/cli-plugin-metro/src/commands/start/runPackager.ts Outdated
@github-actionsgithub-actionsBot added the docs Documentation change label Jul 18, 2023
@szymonrybczakszymonrybczak changed the title feat: add invoking CLI's scripts for launching Metro in run/build-ios commandsfeat: add invoking CLI's scripts for launching Metro in run-ios commandsJul 18, 2023
@szymonrybczakszymonrybczak changed the title feat: add invoking CLI's scripts for launching Metro in run-ios commandsfeat: add invoking CLI's scripts for launching Metro in run-ios commandJul 18, 2023
Comment threadpackages/cli-platform-ios/src/commands/buildIOS/buildProject.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/runPackager.ts Outdated
Comment threadpackages/cli-platform-ios/README.md
@szymonrybczak
szymonrybczakforce-pushed the feat/sync-starting-bundler-implementations branch from e9df890 to 75e3ee1CompareJuly 24, 2023 12:01
@huntie

Copy link
Copy Markdown
Collaborator

✅ Endorsed!

Comment threadpackages/cli-plugin-metro/src/commands/start/runPackager.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/runPackager/index.ts Outdated
Comment threadpackages/cli-doctor/src/tools/healthchecks/packager.ts
Comment threadpackages/cli-plugin-metro/src/commands/start/startServerInNewWindow.ts Outdated
Comment on lines +13 to +15
name: '--terminal <string>',
description:
'Launches packager in a new window using the specified terminal path.',

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Main feedback ⬇️

Interesting, can we merge this all into the start command — aligning with your proposal in react-native-community/discussions-and-proposals#613? Specifically:

  • The improved error message behaviour when start (RN CLI start) is called and something is already on the configured Metro port.
  • react-native start --terminal switches modes to integrate the startServerInNewWindow.js behaviour.

Then, we only expose startCommand and it can be used by doctor, run-android, run-ios.

cc @thymikee Does this seem feasible?

@szymonrybczak

szymonrybczak commented Aug 1, 2023

Copy link
Copy Markdown
CollaboratorAuthor

👋, update from my side. I implemented whole feedback, and I added features discussed under this RFC. I changed implementation of handling keystrokes. Before it wasn't possible to pause interactivity (to show the prompt), but right now it was possible. Without this change, after showing prompt in watch mode the user wouldn't be able to handle any keystroke.


Rigth now flow looks like now:

  • run-android starts bundler via CLI (node cli/path/ start command)
  • run-ios starts bundler via CLI (node /cli/path/ start command)

Note

When starting Android or iOS app from watchMode it runs also run-android and run-ios command so it would run again start command, but right now CLI is checking against port is busy or not so user won't see nothing.

Added interactive part 👀

  • When starting bundler and port is busy CLI will ask whether to terminate process that is running on port user requested. If user wants to kill process, CLI will kill process and starts CLI at request port.
CleanShot.2023-08-01.at.13.39.09.mp4
  • When user don't want to kill proces, CLI will find the next free port and will ask user whether to start bundler at found port.
CleanShot.2023-08-01.at.13.41.13.mp4

Also added log to inform user about on which port Metro bundler is running:
CleanShot 2023-08-01 at 13 47 19@2x

Important

This change is backward compatible, previously status endpoint would give us packager-status:running response, but right now we're giving {root: "/path/to/project", status: "running}, and I adjusted logic in isPackagerRunning function. What I didn't check but is really important is to check if React Native is somehow related to this response?

Comment threadpackages/cli-platform-ios/src/commands/runIOS/index.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/runServer.ts Outdated
Comment threadpackages/cli-tools/src/getPidFromPort.ts

@huntiehuntie left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is awesome work 💯

High-level feedback

  • 1/ We can probably achieve a better organisation of responsibilities here.
    • Maybe --terminal on the start command is the wrong place to do full-on process management (my bad). It would be really good to keep cli-plugin-metro's responsibilities as clean as possible.
    • Therefore:
      • cli-plugin-metro: Let's reduce the start command to starting the server only, and erroring generically to say "Could not start dev server: The specified port was taken".
      • cli-plugin-android/ios Let's do process detection here, and move the background terminal creation logic here (likely shared via cli-tools) also. Therefore it's these commands which will wrap start, which doesn't need to know where it's running.
  • 2/ Being able to kill another process is probably not surface area we want to add to CLI (being mindful of when we introduce user expectations). For the run-android/run-ios commands, bailing from starting Metro when the port is taken (with an informational log message) is most likely adequate.
  • 3/ I'd suggest separating the improved KeyPressHandler logic into a new PR — potentially this should live in cli-tools.

Comment threadpackages/cli-plugin-metro/src/commands/start/index.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/startServerInNewWindow.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/watchMode.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/watchMode.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/watchMode.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/watchMode.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/runServer.ts Outdated
Comment threadpackages/cli-plugin-metro/src/tools/getProcessIdFromPort.ts Outdated
Comment threadpackages/cli-plugin-metro/src/tools/getNextPort.ts Outdated
@szymonrybczak

Copy link
Copy Markdown
CollaboratorAuthor
  • Therefore:

    • cli-plugin-metro: Let's reduce the start command to starting the server only, and erroring generically to say "Could not start dev server: The specified port was taken".
    • cli-plugin-android/ios Let's do process detection here, and move the background terminal creation logic here (likely shared via cli-tools) also. Therefore it's these commands which will wrap start, which doesn't need to know where it's running.

Hm, I'm thinking about this solution, and it is slightly better that doing this whole logic behind --terminal option, but do to the second part of this (move this to cli-plugin-android/ios) we would need to use startServerInNewWindow, which of course we can do, by simply moving this function to a cli-tools package. For this we also will need to move relevant scripts, as it wouldn't make sense for them to live in cli-plugin-metro and to access this from cli-tools, and I'm not sure if this would be doable if we're migrating this part of codebase to Core.
And what I'm wondering most - is cli-tools actually good place to keep launchPackager.command, launchPackager.bat? cc. @thymikee

  • 2/ Being able to kill another process is probably not surface area we want to add to CLI (being mindful of when we introduce user expectations). For the run-android/run-ios commands, bailing from starting Metro when the port is taken (with an informational log message) is most likely adequate.

Okay, let's leave just prompt with proposition port change.

  • 3/ I'd suggest separating the improved KeyPressHandler logic into a new PR — potentially this should live in cli-tools.

#2041 - I will rebase on top of this PR once will be merged 👍

@huntie

huntie commented Aug 1, 2023

Copy link
Copy Markdown
Collaborator

@szymonrybczak

For this we also will need to move relevant scripts, as it wouldn't make sense for them to live in cli-plugin-metro and to access this from cli-tools, and I'm not sure if this would be doable if we're migrating this part of codebase to Core.

Sure, let's move as much logic as necessary into cli-tools, where necessary to support run-android/run-ios and as not needed by cli-plugin-metro.

is cli-tools actually good place to keep launchPackager.command, launchPackager.bat?

I think yes for now — or perhaps in the root cli package.

@szymonrybczak

szymonrybczak commented Aug 2, 2023

Copy link
Copy Markdown
CollaboratorAuthor

@huntie So I moved some logic into run-ios/android and also I move relevant scripts to cli-tools package 👍

@szymonrybczak
szymonrybczakforce-pushed the feat/sync-starting-bundler-implementations branch 2 times, most recently from 5c3b84b to 691c96aCompareAugust 2, 2023 14:07

@huntiehuntie left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me. Might be some tidying we can do in future, but I'm keen to unblock the move of cli-plugin-metro. Huge thanks for this! 🙌🏻

Comment threadpackages/cli-tools/src/launchPackager.bat
Comment threadpackages/cli-plugin-metro/src/commands/start/runServer.ts Outdated
Comment threadpackages/cli-tools/src/startServerInNewWindow.ts Outdated
import chalk from 'chalk';
import {Config} from '@react-native-community/cli-types';
import {KeyPressHandler} from '../../tools/KeyPressHandler';
import {addInteractionListener} from '@react-native-community/cli-tools';

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: Merge with existing '@react-native-community/cli-tools' import.

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah, I will do it after #2041 will be merged 👍

@szymonrybczak
szymonrybczakforce-pushed the feat/sync-starting-bundler-implementations branch from 3463f6c to 3b3a7b9CompareAugust 10, 2023 15:47
facebook-github-bot pushed a commit to react/react-native that referenced this pull request Aug 10, 2023
Summary:
Pull Request resolved: #38795
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
Inits new package `react-native/community-cli-plugin`. This migrates [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro) into the React Native repo, to enable faster iteration by the React Native core team. Specifically:
- This package contains several `metro` dependencies, which when removed from CLI will no longer require us to ship new CLI releases to get Metro patches and features to users.
- This package contains the `start`, `bundle`, and `ram-bundle` commands (central to the React Native development experience), for which we have incoming debugging-related changes.
- This package now **only** exports commands to be attached via a RN CLI plugin. With this move, we're aiming to **internalise** the default implementations of these dev commands within React Native — other RN CLI plugins can continue to override these, but must do so wholesale. (See also the recent fix for this: react-native-community/cli#1999.)
In V15:
- (Microsoft feedback) Re-export `unstable_buildBundleWithConfig`, marking as unstable. This gives us a time buffer to consider how we repackage this functionality in future.
The package source has been converted from TypeScript to Flow, with a number of new `flow-typed/` defs added to meet type coverage requirements.
## To dos
- For now, we aren't removing the existing [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro) source — until later PRs consolidate this move by changing dependencies in the `react-native` package.
- **Exported API is reduced!**: I'm working with szymonrybczak to decouple references from RN CLI packages react-native-community/cli#2021.
Changelog: [Internal]
Reviewed By: motiz88
Differential Revision: D46801501
fbshipit-source-id: 7f6b72941a69f487fb437768cdba125a9aa3418d
Comment threadpackages/cli-doctor/package.json

@thymikeethymikee left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we're one small refactor away from merging this. Nice work @szymonrybczak and @huntie!

Comment threadpackages/cli-platform-android/src/commands/runAndroid/index.ts Outdated

@aajahidaajahid left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug - #2219

reactNativePath: string,
terminal?: string,
) {
if (!terminal) {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This check is preventing android build on windows. On windows - so far we did not need any terminal value. It always used to fall back to default cmd.exe ( line no 106 )

In this case I think the proper fix should be fixing the getDefaultUserTerminal which currently doesn't have any default terminal for windows.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or only apply this check on platforms other than windows.

@aajahidaajahid left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reason of another issue

This works for me. However it only opens a new window and doesn't automatically run andoid, it acts as if you've run react-native start only

#2219

}

if (packager) {
await startServerInNewWindow(

@aajahidaajahidDec 24, 2023

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

await causes the CLI to hang indefinitely. Must be called without await.
Check existing comment at https://github.com/szymonrybczak/cli/blob/732308dfe47cf05d7f5c869fcef08a8fe96ecc7c/packages/cli-tools/src/startServerInNewWindow.ts#L105

@aajahidaajahid mentioned this pull request Dec 24, 2023
2 tasks
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

docsDocumentation changefeature

Projects

None yet

Development

Successfully merging this pull request may close these issues.

8 participants

@szymonrybczak@huntie@liamjones@aajahid@tido64@thymikee@adamTrz@TMisiukiewicz
, 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' feat: add invoking CLI's scripts for launching Metro in `run-ios` command by szymonrybczak · Pull Request #2021 · react-native-community/cli · GitHub
Skip to content

feat: add invoking CLI's scripts for launching Metro in run-ios command - #2021

Merged
thymikee merged 16 commits into
react-native-community:mainfrom
szymonrybczak:feat/sync-starting-bundler-implementations
Aug 11, 2023
Merged

feat: add invoking CLI's scripts for launching Metro in run-ios command#2021
thymikee merged 16 commits into
react-native-community:mainfrom
szymonrybczak:feat/sync-starting-bundler-implementations

Conversation

@szymonrybczak

@szymonrybczakszymonrybczak commented Jul 18, 2023

Copy link
Copy Markdown
Collaborator

Summary:

Recently @huntieremoved "Start packager" phase from template, which means that right now when running run-ios command, packager won't be started. I synced implementations between platforms (run-android command was using CLI's script for some time).
This change also fixes problem with starting Metro in monorepos setups (see #1799).

Test Plan:

  1. Clone the repository and do all the required steps from the Contributing guide
  2. Run this command:

run-ios - Should start Metro from script located in node_modules/.bin/launchPackager.command

TODO:

  • Windows support

Checklist

  • Documentation is up to date to reflect these changes.
  • Follows commit message convention described in CONTRIBUTING.md

Comment threadpackages/cli-platform-ios/src/commands/buildIOS/index.ts Outdated
} "${chalk.bold(xcodeProject.name)}"`,
);

await runPackager(

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should be able to disable this with --no-packager.

Unrelated: I was actually hoping we could remove the packager from the run-android command instead :P

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should be able to disable this with --no-packager.

We're already able to this :) See here:

{
name: '--no-packager',
description: 'Do not launch packager while building',
},

And in function body I check for this:

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Question is, maybe we should consider disabling running packager by default? I think this would require a poll on how people use it in the wild. I myself run the server myself in a terminal tab that suits me. But I've also seen devs relying on automatic opening of dev server and not sure if they would even realize it's missing

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Other options that comes to my mind is to run the packager in the same window where we start run-ios/android command.

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this would require a poll on how people use it in the wild

FYI I'm up for this, and/or making the most informed decision. Originally I was with @tido64 in thinking we'd drop the behaviour on Android to align. But @szymonrybczak's changes, with an opt-out flag, look pretty useful to me.

While this item of feedback is still unresolved, I'd like to push for this PR to be merged and released anyway, since it is a direct dependency for react/react-native#38944 and incoming Debugging functionality in React Native. These are all alpha releases, and we can follow up on enhancing this behaviour in a follow-up PR.|

cc @thymikee

Comment threadpackages/cli-plugin-metro/src/commands/start/runPackager.ts Outdated
@github-actionsgithub-actionsBot added the docs Documentation change label Jul 18, 2023
@szymonrybczakszymonrybczak changed the title feat: add invoking CLI's scripts for launching Metro in run/build-ios commandsfeat: add invoking CLI's scripts for launching Metro in run-ios commandsJul 18, 2023
@szymonrybczakszymonrybczak changed the title feat: add invoking CLI's scripts for launching Metro in run-ios commandsfeat: add invoking CLI's scripts for launching Metro in run-ios commandJul 18, 2023
Comment threadpackages/cli-platform-ios/src/commands/buildIOS/buildProject.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/runPackager.ts Outdated
Comment threadpackages/cli-platform-ios/README.md
@szymonrybczak
szymonrybczakforce-pushed the feat/sync-starting-bundler-implementations branch from e9df890 to 75e3ee1CompareJuly 24, 2023 12:01
@huntie

Copy link
Copy Markdown
Collaborator

✅ Endorsed!

Comment threadpackages/cli-plugin-metro/src/commands/start/runPackager.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/runPackager/index.ts Outdated
Comment threadpackages/cli-doctor/src/tools/healthchecks/packager.ts
Comment threadpackages/cli-plugin-metro/src/commands/start/startServerInNewWindow.ts Outdated
Comment on lines +13 to +15
name: '--terminal <string>',
description:
'Launches packager in a new window using the specified terminal path.',

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Main feedback ⬇️

Interesting, can we merge this all into the start command — aligning with your proposal in react-native-community/discussions-and-proposals#613? Specifically:

  • The improved error message behaviour when start (RN CLI start) is called and something is already on the configured Metro port.
  • react-native start --terminal switches modes to integrate the startServerInNewWindow.js behaviour.

Then, we only expose startCommand and it can be used by doctor, run-android, run-ios.

cc @thymikee Does this seem feasible?

@szymonrybczak

szymonrybczak commented Aug 1, 2023

Copy link
Copy Markdown
CollaboratorAuthor

👋, update from my side. I implemented whole feedback, and I added features discussed under this RFC. I changed implementation of handling keystrokes. Before it wasn't possible to pause interactivity (to show the prompt), but right now it was possible. Without this change, after showing prompt in watch mode the user wouldn't be able to handle any keystroke.


Rigth now flow looks like now:

  • run-android starts bundler via CLI (node cli/path/ start command)
  • run-ios starts bundler via CLI (node /cli/path/ start command)

Note

When starting Android or iOS app from watchMode it runs also run-android and run-ios command so it would run again start command, but right now CLI is checking against port is busy or not so user won't see nothing.

Added interactive part 👀

  • When starting bundler and port is busy CLI will ask whether to terminate process that is running on port user requested. If user wants to kill process, CLI will kill process and starts CLI at request port.
CleanShot.2023-08-01.at.13.39.09.mp4
  • When user don't want to kill proces, CLI will find the next free port and will ask user whether to start bundler at found port.
CleanShot.2023-08-01.at.13.41.13.mp4

Also added log to inform user about on which port Metro bundler is running:
CleanShot 2023-08-01 at 13 47 19@2x

Important

This change is backward compatible, previously status endpoint would give us packager-status:running response, but right now we're giving {root: "/path/to/project", status: "running}, and I adjusted logic in isPackagerRunning function. What I didn't check but is really important is to check if React Native is somehow related to this response?

Comment threadpackages/cli-platform-ios/src/commands/runIOS/index.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/runServer.ts Outdated
Comment threadpackages/cli-tools/src/getPidFromPort.ts

@huntiehuntie left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is awesome work 💯

High-level feedback

  • 1/ We can probably achieve a better organisation of responsibilities here.
    • Maybe --terminal on the start command is the wrong place to do full-on process management (my bad). It would be really good to keep cli-plugin-metro's responsibilities as clean as possible.
    • Therefore:
      • cli-plugin-metro: Let's reduce the start command to starting the server only, and erroring generically to say "Could not start dev server: The specified port was taken".
      • cli-plugin-android/ios Let's do process detection here, and move the background terminal creation logic here (likely shared via cli-tools) also. Therefore it's these commands which will wrap start, which doesn't need to know where it's running.
  • 2/ Being able to kill another process is probably not surface area we want to add to CLI (being mindful of when we introduce user expectations). For the run-android/run-ios commands, bailing from starting Metro when the port is taken (with an informational log message) is most likely adequate.
  • 3/ I'd suggest separating the improved KeyPressHandler logic into a new PR — potentially this should live in cli-tools.

Comment threadpackages/cli-plugin-metro/src/commands/start/index.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/startServerInNewWindow.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/watchMode.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/watchMode.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/watchMode.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/watchMode.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/runServer.ts Outdated
Comment threadpackages/cli-plugin-metro/src/tools/getProcessIdFromPort.ts Outdated
Comment threadpackages/cli-plugin-metro/src/tools/getNextPort.ts Outdated
@szymonrybczak

Copy link
Copy Markdown
CollaboratorAuthor
  • Therefore:

    • cli-plugin-metro: Let's reduce the start command to starting the server only, and erroring generically to say "Could not start dev server: The specified port was taken".
    • cli-plugin-android/ios Let's do process detection here, and move the background terminal creation logic here (likely shared via cli-tools) also. Therefore it's these commands which will wrap start, which doesn't need to know where it's running.

Hm, I'm thinking about this solution, and it is slightly better that doing this whole logic behind --terminal option, but do to the second part of this (move this to cli-plugin-android/ios) we would need to use startServerInNewWindow, which of course we can do, by simply moving this function to a cli-tools package. For this we also will need to move relevant scripts, as it wouldn't make sense for them to live in cli-plugin-metro and to access this from cli-tools, and I'm not sure if this would be doable if we're migrating this part of codebase to Core.
And what I'm wondering most - is cli-tools actually good place to keep launchPackager.command, launchPackager.bat? cc. @thymikee

  • 2/ Being able to kill another process is probably not surface area we want to add to CLI (being mindful of when we introduce user expectations). For the run-android/run-ios commands, bailing from starting Metro when the port is taken (with an informational log message) is most likely adequate.

Okay, let's leave just prompt with proposition port change.

  • 3/ I'd suggest separating the improved KeyPressHandler logic into a new PR — potentially this should live in cli-tools.

#2041 - I will rebase on top of this PR once will be merged 👍

@huntie

huntie commented Aug 1, 2023

Copy link
Copy Markdown
Collaborator

@szymonrybczak

For this we also will need to move relevant scripts, as it wouldn't make sense for them to live in cli-plugin-metro and to access this from cli-tools, and I'm not sure if this would be doable if we're migrating this part of codebase to Core.

Sure, let's move as much logic as necessary into cli-tools, where necessary to support run-android/run-ios and as not needed by cli-plugin-metro.

is cli-tools actually good place to keep launchPackager.command, launchPackager.bat?

I think yes for now — or perhaps in the root cli package.

@szymonrybczak

szymonrybczak commented Aug 2, 2023

Copy link
Copy Markdown
CollaboratorAuthor

@huntie So I moved some logic into run-ios/android and also I move relevant scripts to cli-tools package 👍

@szymonrybczak
szymonrybczakforce-pushed the feat/sync-starting-bundler-implementations branch 2 times, most recently from 5c3b84b to 691c96aCompareAugust 2, 2023 14:07

@huntiehuntie left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me. Might be some tidying we can do in future, but I'm keen to unblock the move of cli-plugin-metro. Huge thanks for this! 🙌🏻

Comment threadpackages/cli-tools/src/launchPackager.bat
Comment threadpackages/cli-plugin-metro/src/commands/start/runServer.ts Outdated
Comment threadpackages/cli-tools/src/startServerInNewWindow.ts Outdated
import chalk from 'chalk';
import {Config} from '@react-native-community/cli-types';
import {KeyPressHandler} from '../../tools/KeyPressHandler';
import {addInteractionListener} from '@react-native-community/cli-tools';

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: Merge with existing '@react-native-community/cli-tools' import.

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah, I will do it after #2041 will be merged 👍

@szymonrybczak
szymonrybczakforce-pushed the feat/sync-starting-bundler-implementations branch from 3463f6c to 3b3a7b9CompareAugust 10, 2023 15:47
facebook-github-bot pushed a commit to react/react-native that referenced this pull request Aug 10, 2023
Summary:
Pull Request resolved: #38795
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
Inits new package `react-native/community-cli-plugin`. This migrates [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro) into the React Native repo, to enable faster iteration by the React Native core team. Specifically:
- This package contains several `metro` dependencies, which when removed from CLI will no longer require us to ship new CLI releases to get Metro patches and features to users.
- This package contains the `start`, `bundle`, and `ram-bundle` commands (central to the React Native development experience), for which we have incoming debugging-related changes.
- This package now **only** exports commands to be attached via a RN CLI plugin. With this move, we're aiming to **internalise** the default implementations of these dev commands within React Native — other RN CLI plugins can continue to override these, but must do so wholesale. (See also the recent fix for this: react-native-community/cli#1999.)
In V15:
- (Microsoft feedback) Re-export `unstable_buildBundleWithConfig`, marking as unstable. This gives us a time buffer to consider how we repackage this functionality in future.
The package source has been converted from TypeScript to Flow, with a number of new `flow-typed/` defs added to meet type coverage requirements.
## To dos
- For now, we aren't removing the existing [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro) source — until later PRs consolidate this move by changing dependencies in the `react-native` package.
- **Exported API is reduced!**: I'm working with szymonrybczak to decouple references from RN CLI packages react-native-community/cli#2021.
Changelog: [Internal]
Reviewed By: motiz88
Differential Revision: D46801501
fbshipit-source-id: 7f6b72941a69f487fb437768cdba125a9aa3418d
Comment threadpackages/cli-doctor/package.json

@thymikeethymikee left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we're one small refactor away from merging this. Nice work @szymonrybczak and @huntie!

Comment threadpackages/cli-platform-android/src/commands/runAndroid/index.ts Outdated

@aajahidaajahid left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug - #2219

reactNativePath: string,
terminal?: string,
) {
if (!terminal) {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This check is preventing android build on windows. On windows - so far we did not need any terminal value. It always used to fall back to default cmd.exe ( line no 106 )

In this case I think the proper fix should be fixing the getDefaultUserTerminal which currently doesn't have any default terminal for windows.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or only apply this check on platforms other than windows.

@aajahidaajahid left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reason of another issue

This works for me. However it only opens a new window and doesn't automatically run andoid, it acts as if you've run react-native start only

#2219

}

if (packager) {
await startServerInNewWindow(

@aajahidaajahidDec 24, 2023

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

await causes the CLI to hang indefinitely. Must be called without await.
Check existing comment at https://github.com/szymonrybczak/cli/blob/732308dfe47cf05d7f5c869fcef08a8fe96ecc7c/packages/cli-tools/src/startServerInNewWindow.ts#L105

@aajahidaajahid mentioned this pull request Dec 24, 2023
2 tasks
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

docsDocumentation changefeature

Projects

None yet

Development

Successfully merging this pull request may close these issues.

8 participants

@szymonrybczak@huntie@liamjones@aajahid@tido64@thymikee@adamTrz@TMisiukiewicz
, 'i'); if (__m === '*' || __re.test(location.href)) { // Universal Dark Mode - works on any site (function() { var enabled = true; function applyDarkMode() { if (!enabled) return; // Create style element if it doesn't exist var style = document.getElementById('universal-dark-mode-style'); if (!style) { style = document.createElement('style'); style.id = 'universal-dark-mode-style'; document.head.appendChild(style); } // Dark mode CSS - inverts colors but preserves images/video style.textContent = ' /* Invert everything except media */ html { filter: invert(1) hue-rotate(180deg) !important; background: #1a1a2e !important; } /* Restore images, videos, iframes, canvas */ img, video, iframe, canvas, svg, picture, [style*="background-image"] { filter: invert(1) hue-rotate(180deg) !important; } /* Preserve specific elements that should not be inverted */ .no-dark-mode, .no-dark-mode *, [data-theme="light"], [data-theme="light"], .ace_editor, .ace_editor *, .CodeMirror, .CodeMirror *, .monaco-editor, .monaco-editor *, .markdown-body pre, .markdown-body pre *, .highlight, .highlight *, pre code, pre code * { filter: none !important; } /* Fix common UI elements */ .modal, .popup, .dropdown-menu, .tooltip, .popover { filter: invert(1) hue-rotate(180deg) !important; background: #2d2d44 !important; border-color: #444 !important; } /* Scrollbars */ ::-webkit-scrollbar { background: #1a1a2e !important; } ::-webkit-scrollbar-thumb { background: #444 !important; } ::-webkit-scrollbar-thumb:hover { background: #555 !important; } /* Selection */ ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; } ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; } '; } function removeDarkMode() { var style = document.getElementById('universal-dark-mode-style'); if (style) style.remove(); } // Toggle with Alt+Shift+D document.addEventListener('keydown', function(e) { if (e.altKey && e.shiftKey && e.key === 'D') { e.preventDefault(); enabled = !enabled; if (enabled) { applyDarkMode(); console.log('[Universal Dark Mode] Enabled'); } else { removeDarkMode(); console.log('[Universal Dark Mode] Disabled'); } } }); // Apply on load applyDarkMode(); // Re-apply on dynamic content var observer = new MutationObserver(function(mutations) { if (enabled && !document.getElementById('universal-dark-mode-style')) { applyDarkMode(); } }); observer.observe(document.head, { childList: true }); console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle'); })(); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })(); feat: add invoking CLI's scripts for launching Metro in `run-ios` command by szymonrybczak · Pull Request #2021 · react-native-community/cli · GitHub
Skip to content

feat: add invoking CLI's scripts for launching Metro in run-ios command - #2021

Merged
thymikee merged 16 commits into
react-native-community:mainfrom
szymonrybczak:feat/sync-starting-bundler-implementations
Aug 11, 2023
Merged

feat: add invoking CLI's scripts for launching Metro in run-ios command#2021
thymikee merged 16 commits into
react-native-community:mainfrom
szymonrybczak:feat/sync-starting-bundler-implementations

Conversation

@szymonrybczak

@szymonrybczakszymonrybczak commented Jul 18, 2023

Copy link
Copy Markdown
Collaborator

Summary:

Recently @huntieremoved "Start packager" phase from template, which means that right now when running run-ios command, packager won't be started. I synced implementations between platforms (run-android command was using CLI's script for some time).
This change also fixes problem with starting Metro in monorepos setups (see #1799).

Test Plan:

  1. Clone the repository and do all the required steps from the Contributing guide
  2. Run this command:

run-ios - Should start Metro from script located in node_modules/.bin/launchPackager.command

TODO:

  • Windows support

Checklist

  • Documentation is up to date to reflect these changes.
  • Follows commit message convention described in CONTRIBUTING.md

Comment threadpackages/cli-platform-ios/src/commands/buildIOS/index.ts Outdated
} "${chalk.bold(xcodeProject.name)}"`,
);

await runPackager(

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should be able to disable this with --no-packager.

Unrelated: I was actually hoping we could remove the packager from the run-android command instead :P

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should be able to disable this with --no-packager.

We're already able to this :) See here:

{
name: '--no-packager',
description: 'Do not launch packager while building',
},

And in function body I check for this:

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Question is, maybe we should consider disabling running packager by default? I think this would require a poll on how people use it in the wild. I myself run the server myself in a terminal tab that suits me. But I've also seen devs relying on automatic opening of dev server and not sure if they would even realize it's missing

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Other options that comes to my mind is to run the packager in the same window where we start run-ios/android command.

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this would require a poll on how people use it in the wild

FYI I'm up for this, and/or making the most informed decision. Originally I was with @tido64 in thinking we'd drop the behaviour on Android to align. But @szymonrybczak's changes, with an opt-out flag, look pretty useful to me.

While this item of feedback is still unresolved, I'd like to push for this PR to be merged and released anyway, since it is a direct dependency for react/react-native#38944 and incoming Debugging functionality in React Native. These are all alpha releases, and we can follow up on enhancing this behaviour in a follow-up PR.|

cc @thymikee

Comment threadpackages/cli-plugin-metro/src/commands/start/runPackager.ts Outdated
@github-actionsgithub-actionsBot added the docs Documentation change label Jul 18, 2023
@szymonrybczakszymonrybczak changed the title feat: add invoking CLI's scripts for launching Metro in run/build-ios commandsfeat: add invoking CLI's scripts for launching Metro in run-ios commandsJul 18, 2023
@szymonrybczakszymonrybczak changed the title feat: add invoking CLI's scripts for launching Metro in run-ios commandsfeat: add invoking CLI's scripts for launching Metro in run-ios commandJul 18, 2023
Comment threadpackages/cli-platform-ios/src/commands/buildIOS/buildProject.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/runPackager.ts Outdated
Comment threadpackages/cli-platform-ios/README.md
@szymonrybczak
szymonrybczakforce-pushed the feat/sync-starting-bundler-implementations branch from e9df890 to 75e3ee1CompareJuly 24, 2023 12:01
@huntie

Copy link
Copy Markdown
Collaborator

✅ Endorsed!

Comment threadpackages/cli-plugin-metro/src/commands/start/runPackager.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/runPackager/index.ts Outdated
Comment threadpackages/cli-doctor/src/tools/healthchecks/packager.ts
Comment threadpackages/cli-plugin-metro/src/commands/start/startServerInNewWindow.ts Outdated
Comment on lines +13 to +15
name: '--terminal <string>',
description:
'Launches packager in a new window using the specified terminal path.',

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Main feedback ⬇️

Interesting, can we merge this all into the start command — aligning with your proposal in react-native-community/discussions-and-proposals#613? Specifically:

  • The improved error message behaviour when start (RN CLI start) is called and something is already on the configured Metro port.
  • react-native start --terminal switches modes to integrate the startServerInNewWindow.js behaviour.

Then, we only expose startCommand and it can be used by doctor, run-android, run-ios.

cc @thymikee Does this seem feasible?

@szymonrybczak

szymonrybczak commented Aug 1, 2023

Copy link
Copy Markdown
CollaboratorAuthor

👋, update from my side. I implemented whole feedback, and I added features discussed under this RFC. I changed implementation of handling keystrokes. Before it wasn't possible to pause interactivity (to show the prompt), but right now it was possible. Without this change, after showing prompt in watch mode the user wouldn't be able to handle any keystroke.


Rigth now flow looks like now:

  • run-android starts bundler via CLI (node cli/path/ start command)
  • run-ios starts bundler via CLI (node /cli/path/ start command)

Note

When starting Android or iOS app from watchMode it runs also run-android and run-ios command so it would run again start command, but right now CLI is checking against port is busy or not so user won't see nothing.

Added interactive part 👀

  • When starting bundler and port is busy CLI will ask whether to terminate process that is running on port user requested. If user wants to kill process, CLI will kill process and starts CLI at request port.
CleanShot.2023-08-01.at.13.39.09.mp4
  • When user don't want to kill proces, CLI will find the next free port and will ask user whether to start bundler at found port.
CleanShot.2023-08-01.at.13.41.13.mp4

Also added log to inform user about on which port Metro bundler is running:
CleanShot 2023-08-01 at 13 47 19@2x

Important

This change is backward compatible, previously status endpoint would give us packager-status:running response, but right now we're giving {root: "/path/to/project", status: "running}, and I adjusted logic in isPackagerRunning function. What I didn't check but is really important is to check if React Native is somehow related to this response?

Comment threadpackages/cli-platform-ios/src/commands/runIOS/index.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/runServer.ts Outdated
Comment threadpackages/cli-tools/src/getPidFromPort.ts

@huntiehuntie left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is awesome work 💯

High-level feedback

  • 1/ We can probably achieve a better organisation of responsibilities here.
    • Maybe --terminal on the start command is the wrong place to do full-on process management (my bad). It would be really good to keep cli-plugin-metro's responsibilities as clean as possible.
    • Therefore:
      • cli-plugin-metro: Let's reduce the start command to starting the server only, and erroring generically to say "Could not start dev server: The specified port was taken".
      • cli-plugin-android/ios Let's do process detection here, and move the background terminal creation logic here (likely shared via cli-tools) also. Therefore it's these commands which will wrap start, which doesn't need to know where it's running.
  • 2/ Being able to kill another process is probably not surface area we want to add to CLI (being mindful of when we introduce user expectations). For the run-android/run-ios commands, bailing from starting Metro when the port is taken (with an informational log message) is most likely adequate.
  • 3/ I'd suggest separating the improved KeyPressHandler logic into a new PR — potentially this should live in cli-tools.

Comment threadpackages/cli-plugin-metro/src/commands/start/index.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/startServerInNewWindow.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/watchMode.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/watchMode.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/watchMode.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/watchMode.ts Outdated
Comment threadpackages/cli-plugin-metro/src/commands/start/runServer.ts Outdated
Comment threadpackages/cli-plugin-metro/src/tools/getProcessIdFromPort.ts Outdated
Comment threadpackages/cli-plugin-metro/src/tools/getNextPort.ts Outdated
@szymonrybczak

Copy link
Copy Markdown
CollaboratorAuthor
  • Therefore:

    • cli-plugin-metro: Let's reduce the start command to starting the server only, and erroring generically to say "Could not start dev server: The specified port was taken".
    • cli-plugin-android/ios Let's do process detection here, and move the background terminal creation logic here (likely shared via cli-tools) also. Therefore it's these commands which will wrap start, which doesn't need to know where it's running.

Hm, I'm thinking about this solution, and it is slightly better that doing this whole logic behind --terminal option, but do to the second part of this (move this to cli-plugin-android/ios) we would need to use startServerInNewWindow, which of course we can do, by simply moving this function to a cli-tools package. For this we also will need to move relevant scripts, as it wouldn't make sense for them to live in cli-plugin-metro and to access this from cli-tools, and I'm not sure if this would be doable if we're migrating this part of codebase to Core.
And what I'm wondering most - is cli-tools actually good place to keep launchPackager.command, launchPackager.bat? cc. @thymikee

  • 2/ Being able to kill another process is probably not surface area we want to add to CLI (being mindful of when we introduce user expectations). For the run-android/run-ios commands, bailing from starting Metro when the port is taken (with an informational log message) is most likely adequate.

Okay, let's leave just prompt with proposition port change.

  • 3/ I'd suggest separating the improved KeyPressHandler logic into a new PR — potentially this should live in cli-tools.

#2041 - I will rebase on top of this PR once will be merged 👍

@huntie

huntie commented Aug 1, 2023

Copy link
Copy Markdown
Collaborator

@szymonrybczak

For this we also will need to move relevant scripts, as it wouldn't make sense for them to live in cli-plugin-metro and to access this from cli-tools, and I'm not sure if this would be doable if we're migrating this part of codebase to Core.

Sure, let's move as much logic as necessary into cli-tools, where necessary to support run-android/run-ios and as not needed by cli-plugin-metro.

is cli-tools actually good place to keep launchPackager.command, launchPackager.bat?

I think yes for now — or perhaps in the root cli package.

@szymonrybczak

szymonrybczak commented Aug 2, 2023

Copy link
Copy Markdown
CollaboratorAuthor

@huntie So I moved some logic into run-ios/android and also I move relevant scripts to cli-tools package 👍

@szymonrybczak
szymonrybczakforce-pushed the feat/sync-starting-bundler-implementations branch 2 times, most recently from 5c3b84b to 691c96aCompareAugust 2, 2023 14:07

@huntiehuntie left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me. Might be some tidying we can do in future, but I'm keen to unblock the move of cli-plugin-metro. Huge thanks for this! 🙌🏻

Comment threadpackages/cli-tools/src/launchPackager.bat
Comment threadpackages/cli-plugin-metro/src/commands/start/runServer.ts Outdated
Comment threadpackages/cli-tools/src/startServerInNewWindow.ts Outdated
import chalk from 'chalk';
import {Config} from '@react-native-community/cli-types';
import {KeyPressHandler} from '../../tools/KeyPressHandler';
import {addInteractionListener} from '@react-native-community/cli-tools';

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: Merge with existing '@react-native-community/cli-tools' import.

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah, I will do it after #2041 will be merged 👍

@szymonrybczak
szymonrybczakforce-pushed the feat/sync-starting-bundler-implementations branch from 3463f6c to 3b3a7b9CompareAugust 10, 2023 15:47
facebook-github-bot pushed a commit to react/react-native that referenced this pull request Aug 10, 2023
Summary:
Pull Request resolved: #38795
## Context
RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641
## Changes
Inits new package `react-native/community-cli-plugin`. This migrates [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro) into the React Native repo, to enable faster iteration by the React Native core team. Specifically:
- This package contains several `metro` dependencies, which when removed from CLI will no longer require us to ship new CLI releases to get Metro patches and features to users.
- This package contains the `start`, `bundle`, and `ram-bundle` commands (central to the React Native development experience), for which we have incoming debugging-related changes.
- This package now **only** exports commands to be attached via a RN CLI plugin. With this move, we're aiming to **internalise** the default implementations of these dev commands within React Native — other RN CLI plugins can continue to override these, but must do so wholesale. (See also the recent fix for this: react-native-community/cli#1999.)
In V15:
- (Microsoft feedback) Re-export `unstable_buildBundleWithConfig`, marking as unstable. This gives us a time buffer to consider how we repackage this functionality in future.
The package source has been converted from TypeScript to Flow, with a number of new `flow-typed/` defs added to meet type coverage requirements.
## To dos
- For now, we aren't removing the existing [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro) source — until later PRs consolidate this move by changing dependencies in the `react-native` package.
- **Exported API is reduced!**: I'm working with szymonrybczak to decouple references from RN CLI packages react-native-community/cli#2021.
Changelog: [Internal]
Reviewed By: motiz88
Differential Revision: D46801501
fbshipit-source-id: 7f6b72941a69f487fb437768cdba125a9aa3418d
Comment threadpackages/cli-doctor/package.json

@thymikeethymikee left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we're one small refactor away from merging this. Nice work @szymonrybczak and @huntie!

Comment threadpackages/cli-platform-android/src/commands/runAndroid/index.ts Outdated

@aajahidaajahid left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug - #2219

reactNativePath: string,
terminal?: string,
) {
if (!terminal) {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This check is preventing android build on windows. On windows - so far we did not need any terminal value. It always used to fall back to default cmd.exe ( line no 106 )

In this case I think the proper fix should be fixing the getDefaultUserTerminal which currently doesn't have any default terminal for windows.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or only apply this check on platforms other than windows.

@aajahidaajahid left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reason of another issue

This works for me. However it only opens a new window and doesn't automatically run andoid, it acts as if you've run react-native start only

#2219

}

if (packager) {
await startServerInNewWindow(

@aajahidaajahidDec 24, 2023

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

await causes the CLI to hang indefinitely. Must be called without await.
Check existing comment at https://github.com/szymonrybczak/cli/blob/732308dfe47cf05d7f5c869fcef08a8fe96ecc7c/packages/cli-tools/src/startServerInNewWindow.ts#L105

@aajahidaajahid mentioned this pull request Dec 24, 2023
2 tasks
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

docsDocumentation changefeature

Projects

None yet

Development

Successfully merging this pull request may close these issues.

8 participants

@szymonrybczak@huntie@liamjones@aajahid@tido64@thymikee@adamTrz@TMisiukiewicz