[FEAT] Separate Tabs for `npm run` and `yarn` commands by Pranav-yadav · Pull Request #3732 · facebook/react-native-website

Pranav-yadav · 2023-05-24T05:54:09Z

Summary

We're steering away from npx due to its unreliability and switching to npm run and yarn instead, for package.json scripts.

e.g.:

`npm` Tab	`yarn` Tab

RN Main PR: facebook/react-native#37521

Context

This was discussed here: facebook/react-native#37521 (comment)

P.S.: What this PR does not changes is; other npx react-native commands such as init, upgrade, bundle, etc. Since, those commands will need proper testing before such change.

netlify · 2023-05-24T05:56:45Z

✅ Deploy Preview for react-native ready!

Name	Link
🔨 Latest commit	`f93553f`
🔍 Latest deploy log	https://app.netlify.com/sites/react-native/deploys/64887cd42811b30007cfda8a
😎 Deploy Preview	https://deploy-preview-3732--react-native.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

Pranav-yadav · 2023-05-24T06:20:28Z

@kelset, I assume, this won't need to be backported to prev 1 or 2 (or even all) majors (versioned docs)?
lmk

kelset · 2023-05-24T10:00:49Z

@kelset, I assume, this won't need to be backported to prev 1 or 2 (or even all) majors (versioned docs)? lmk

no I think it's ok to just have it for 0.72, so it's consistent with your other PR.

cc @Simek this one LGTM, we can merge before the 0.72 docs cut 👍

Pranav-yadav · 2023-05-24T10:36:30Z

Sure.
Just so that we don't miss this (apart from this PR):

P.S.: What this PR does not changes is; other npx react-native commnds such as init, upgrade, bundle, etc. Since, those commands will need proper testing before such change.

@cortinico I can open a PR for those changes (switching to yarn react-native) as well; but, I don't have proper set up to test changes such and bundle and related testing.

Simek · 2023-05-24T10:59:31Z

Are there any known issues related to command switch or any migration tips that we could include?

Pranav-yadav · 2023-05-24T11:43:20Z

Are there any known issues related to command switch or any migration tips that we could include?

As I mentioned in the PR description; specifically the table, we're only changing commands (the way we call npm scripts, also not the scripts) that everyone has been using for so long time but, no one changed it on the website 🙂,
and not changing commands that will require some testing as I've mentined in the previous comment.

kelset · 2023-05-24T14:46:17Z

Are there any known issues related to command switch or any migration tips that we could include?

nothing changes, we are just pointing people to the better and safer approach. Everything stays the same for the end user.

NickGerleman

The documentation shows separate examples for Yarn and NPM, and has tabs for when instructions are different between them.

See as an example, the usage of constants.packageManagers in getting-started.md.

This change moves instructions which currently work for any package manager, and makes them only work on yarn, outside of a yarn-specific tab.

NickGerleman · 2023-05-25T08:46:17Z

We're steering away from npx due to it's unreliability

I would be interested to know more about this. Is this maybe looking at npx behavior around executing remote packages?

kelset · 2023-05-25T10:33:52Z

Is this maybe looking at npx behavior around executing remote packages?

Not just that, also about the fact that npx means that the behaviour you get changes over time potentially, and there's the extra complication of what version of the command npx picks up based on caching and stuff... it's a minefield, so if we can avoid setting up users for useless pain it'd be much better for everyone.

Pranav-yadav · 2023-05-25T15:30:56Z

We're steering away from npx due to it's unreliability

I would be interested to know more about this. Is this maybe looking at npx behavior around executing remote packages?

@kelset and @cortinico can better explain this.

P.S.: Everyone can follow the "context"; link provided in PR description, for the prior relevant discussion which requested this PR.
Here: [1] facebook/react-native#37521 (comment)
[2] facebook/react-native#37521 (comment)

NickGerleman · 2023-05-25T21:06:01Z

Is this maybe looking at npx behavior around executing remote packages?

Not just that, also about the fact that npx means that the behaviour you get changes over time potentially, and there's the extra complication of what version of the command npx picks up based on caching and stuff... it's a minefield, so if we can avoid setting up users for useless pain it'd be much better for everyone.

This is not applicable to using npx to run local scripts.

kelset · 2023-05-26T10:08:01Z

Care to expand and put links to back what you are trying to say? I am not sure I understand. My point is that npx is complicated and unreliable, and I'd rather not set people approaching react-native for the first time to having to deal with something like that.

Pranav-yadav · 2023-05-26T11:36:49Z

I'll be taking a break, since finished with exams and haven't taken one in a while 😅.
I've "Allowed edits by maintainers". So, please "feel free to suggest and commit changes" as you feel right.
Thanks for reviewing and providing feedback

NickGerleman · 2023-05-27T01:57:05Z

Care to expand and put links to back what you are trying to say? I am not sure I understand. My point is that npx is complicated and unreliable, and I'd rather not set people approaching react-native for the first time to having to deal with something like that.

I think "Let's not recommend npx because it's unreliable" is misguided and not really accurate. The issue that I'm guessing this roots from was around running npx react-native init and it possibly not fetching the latest version?

Apart from imo being more a CLI bug, this scenario is specific to using npx to dowload and execute remote packages, a functionality that is fully distinct from using it for executing something already installed. Node 16+ has made that separation in the command clearer too, requiring acknowledgement any time something remote is executed. npx is still the de-facto way to portably execute an installed bin entry.

I'm also not sure switching out a confined part to yarn helps at all with the goal of "discourage npx", since right before this we tell people to use npx to init their app, in the "problematic" case of npx remote fetch. And in this case there isn't an alternative.

NickGerleman · 2023-05-30T07:30:39Z

With all that said, if we want to encourage running the package.json steps instead, I think recommending “yarn” and “npm run” is fine.

Intersecting with the README, IIRC it is a documented flow to initialize a project using npm, so we’d want to double check those users get the right commands in their new project README.

kelset · 2023-06-08T11:17:33Z

@NickGerleman let me try to recap what I think we might have reached as an agreement for what we want to document to the users (both here and in the other PR facebook/react-native#37521):

npx is kept for the init command in the form of npx react-native@latest init ...
for all the other commands that are locally available in the package.json of the template like android, ios, start, etc, we will change the docs to yarn/npm run

This sounds good to me, let us know so that we have ✅ and we can let @Pranav-yadav complete this work (sorry it's taking so long Pranav 🙇‍♂️)

NickGerleman · 2023-06-08T12:09:46Z

We can do that. See the examples in #3732 (review) for how to provide different tabs for npm vs yarn on the website.

Then see https://github.com/react-native-community/cli/blob/cd981848a50565cf416fbf60d0b66720f6ddd511/packages/cli/src/commands/init/init.ts#L29 for the entrypoint to CLI code for building a new project which uses npm instead of yarn. In that case, the README in the newly generated project would need to tell users to use npm run instead of the yarn commands.

Pranav-yadav · 2023-06-08T13:24:04Z

Sure. Will take a look at it day-after-tomorrow.

^{P.S.: Busy with an interview tomorrow :)}

Pranav-yadav · 2023-06-11T19:08:31Z

@NickGerleman @kelset added separate tabs for npm run and yarn commands.
^{Edit 2: Removed this completely. --> P.S.: Left a few inline comments for you. <-- Edit: Please ignore those comments as those changes are out-of-scope for this PR, will do a follow-up PR if required :) as those changes will need more discussion.}

Also, added markdown touchups wherever necessary, such as adding ``` blocks for codes that were formatted using TABs and language formatting such as ```xml

Pranav-yadav · 2023-06-12T14:25:49Z

Following are the live deployed preview — direct links for the changes made in this PR 😇
Make sure you check all the OS, Languages, and Package Manager Tabs 👍:

docs/_getting-started-linux-android.md

NickGerleman · 2023-06-12T17:56:47Z

Everything else here LGTM

Pranav-yadav · 2023-06-13T05:43:27Z

@kelset, I assume, this won't need to be backported to prev 1 or 2 (or even all) majors (versioned docs)? lmk

no I think it's ok to just have it for 0.72, so it's consistent with your other PR.

cc @Simek this one LGTM, we can merge before the 0.72 docs cut 👍

-- #3732 (comment)

Reminder; so we don't forget to merge this before the 0.72 cut 👍

Also, since this PR ended up being a generic sitewide change, this should not be blocked by the other RN PR :)

kelset · 2023-06-13T09:24:59Z

@Simek now that Nick gave his ✅ we can go ahead and merge this

docs/_getting-started-macos-android.md

docs/native-debugging.md

docs/publishing-to-app-store.md

Simek

LGTM, thank you for all the updates and work put into improving those command in the first place! 👍

kelset · 2023-06-14T09:49:21Z

🎉🎉🎉

Pranav-yadav · 2023-06-14T11:10:06Z

Thank you very much @kelset, @NickGerleman & @Simek ❤️ for your feedback and reviews.
PRs like this one have been teaching me a lot about having patience and thinking about the overall system and not just focusing on the ultimate goal.

…it <AppName>` (#37521) Summary: [skip-ci] I noticed that; when a _new_ RN App is created using RN CLI there is ***NO*** *README* file added to the project. Having a simple README file explaining what type of project it is, for example how other web projects do it, such as long lived `create-react-app`, now widely used `create-next-app`, etc. Why not for React Native App then? This PR; Adds README file to RN Template App ⚡, which should be added to the project when a new project is created using RN CLI. ### Website PR: facebook/react-native-website#3732 🚀😇 bypass-github-export-checks ## Changelog: [INTERNAL] [ADDED] - Add README to RN Template App ⚡ Pull Request resolved: #37521 Test Plan: - The README file should be included in the newly created RN App using RN CLI Reviewed By: NickGerleman Differential Revision: D46075719 Pulled By: cipolleschi fbshipit-source-id: efcccc09d72c57a065b36de6e787594082000e15

…it <AppName>` (#37521) Summary: [skip-ci] I noticed that; when a _new_ RN App is created using RN CLI there is ***NO*** *README* file added to the project. Having a simple README file explaining what type of project it is, for example how other web projects do it, such as long lived `create-react-app`, now widely used `create-next-app`, etc. Why not for React Native App then? This PR; Adds README file to RN Template App ⚡, which should be added to the project when a new project is created using RN CLI. ### Website PR: facebook/react-native-website#3732 🚀😇 bypass-github-export-checks ## Changelog: [INTERNAL] [ADDED] - Add README to RN Template App ⚡ Pull Request resolved: facebook/react-native#37521 Test Plan: - The README file should be included in the newly created RN App using RN CLI Reviewed By: NickGerleman Differential Revision: D46075719 Pulled By: cipolleschi fbshipit-source-id: efcccc09d72c57a065b36de6e787594082000e15 Original: facebook/react-native@377a8b7

…it <AppName>` (#37521) Summary: [skip-ci] I noticed that; when a _new_ RN App is created using RN CLI there is ***NO*** *README* file added to the project. Having a simple README file explaining what type of project it is, for example how other web projects do it, such as long lived `create-react-app`, now widely used `create-next-app`, etc. Why not for React Native App then? This PR; Adds README file to RN Template App ⚡, which should be added to the project when a new project is created using RN CLI. ### Website PR: facebook/react-native-website#3732 🚀😇 bypass-github-export-checks ## Changelog: [INTERNAL] [ADDED] - Add README to RN Template App ⚡ Pull Request resolved: facebook/react-native#37521 Test Plan: - The README file should be included in the newly created RN App using RN CLI Reviewed By: NickGerleman Differential Revision: D46075719 Pulled By: cipolleschi fbshipit-source-id: efcccc09d72c57a065b36de6e787594082000e15 Original-Commit: facebook/react-native@377a8b7

facebook-github-bot added the CLA Signed label May 24, 2023

Pranav-yadav mentioned this pull request May 24, 2023

Add README to RN Template App, added when npx react-native@latest init <AppName> facebook/react-native#37521

Closed

cortinico requested a review from rickhanlonii May 24, 2023 10:10

NickGerleman requested changes May 25, 2023

View reviewed changes

Pranav-yadav force-pushed the Pranav-yadav/deafult-yarn-commands branch from c9bdbd4 to 9bd2233 Compare June 11, 2023 18:55

Pranav-yadav changed the title ~~Default to yarn commands~~ [FEAT] Separate Tabs for npm run and yarn commands Jun 11, 2023

Pranav-yadav requested a review from NickGerleman June 12, 2023 05:04

Pranav-yadav force-pushed the Pranav-yadav/deafult-yarn-commands branch from 9bd2233 to 798f424 Compare June 12, 2023 13:53

Pranav-yadav mentioned this pull request Jun 12, 2023

Refactor: Switch to let & const from var in JS, JSX, TS & TSX code-blocks #3755

Merged

NickGerleman reviewed Jun 12, 2023

View reviewed changes

docs/_getting-started-linux-android.md Show resolved Hide resolved

NickGerleman approved these changes Jun 12, 2023

View reviewed changes

Pranav-yadav mentioned this pull request Jun 13, 2023

SECURITY: FIX unintended Email protocol resolution #3759

Merged

Simek reviewed Jun 13, 2023

View reviewed changes

docs/_getting-started-macos-android.md Outdated Show resolved Hide resolved

Simek reviewed Jun 13, 2023

View reviewed changes

docs/native-debugging.md Show resolved Hide resolved

Simek reviewed Jun 13, 2023

View reviewed changes

docs/publishing-to-app-store.md Outdated Show resolved Hide resolved

Simek requested a review from cortinico June 13, 2023 12:21

[FEAT] Separate Tabs for npm and yarn commands

f93553f

Pranav-yadav force-pushed the Pranav-yadav/deafult-yarn-commands branch from 798f424 to f93553f Compare June 13, 2023 14:27

Pranav-yadav requested a review from Simek June 13, 2023 14:44

This was referenced Jun 13, 2023

Touchups: Use <kbd> for specifying Keyboard Keys and Shortcuts #3760

Merged

SECURITY: FIX Use https links over http → Sitewide Change #3761

Merged

Simek approved these changes Jun 14, 2023

View reviewed changes

Simek merged commit 4edd396 into facebook:main Jun 14, 2023

Pranav-yadav deleted the Pranav-yadav/deafult-yarn-commands branch June 14, 2023 15:02

kelset mentioned this pull request Jul 26, 2023

docs: add npx prefix before react-native command react-native-community/cli#2035

Merged

2 tasks

Conversation

Pranav-yadav commented May 24, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

RN Main PR: facebook/react-native#37521

Context

Uh oh!

netlify bot commented May 24, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for react-native ready!

Uh oh!

Pranav-yadav commented May 24, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kelset commented May 24, 2023

Uh oh!

Pranav-yadav commented May 24, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Simek commented May 24, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Pranav-yadav commented May 24, 2023 • edited by Simek Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kelset commented May 24, 2023

Uh oh!

NickGerleman left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

NickGerleman commented May 25, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kelset commented May 25, 2023

Uh oh!

Pranav-yadav commented May 25, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

NickGerleman commented May 25, 2023

Uh oh!

kelset commented May 26, 2023

Uh oh!

Pranav-yadav commented May 26, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

NickGerleman commented May 27, 2023

Uh oh!

NickGerleman commented May 30, 2023

Uh oh!

kelset commented Jun 8, 2023

Uh oh!

NickGerleman commented Jun 8, 2023

Uh oh!

Pranav-yadav commented Jun 8, 2023

Uh oh!

Pranav-yadav commented Jun 11, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Pranav-yadav commented Jun 12, 2023

Uh oh!

Uh oh!

NickGerleman commented Jun 12, 2023

Uh oh!

Pranav-yadav commented Jun 13, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kelset commented Jun 13, 2023

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Simek left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kelset commented Jun 14, 2023

Uh oh!

Pranav-yadav commented Jun 14, 2023

Uh oh!

Pranav-yadav commented May 24, 2023 •

edited

Loading

netlify bot commented May 24, 2023 •

edited

Loading

Pranav-yadav commented May 24, 2023 •

edited

Loading

Pranav-yadav commented May 24, 2023 •

edited

Loading

Simek commented May 24, 2023 •

edited

Loading

Pranav-yadav commented May 24, 2023 •

edited by Simek

Loading

NickGerleman left a comment •

edited

Loading

NickGerleman commented May 25, 2023 •

edited

Loading

Pranav-yadav commented May 25, 2023 •

edited

Loading

Pranav-yadav commented May 26, 2023 •

edited

Loading

Pranav-yadav commented Jun 11, 2023 •

edited

Loading

Pranav-yadav commented Jun 13, 2023 •

edited

Loading

Simek left a comment •

edited

Loading