Skip to content

Contributing to the CLI

Jon Thysell edited this page Oct 29, 2024 · 33 revisions

Where stuff lives

Parts of the CLI:

  1. CLI Package: The commands that run with react-native <command> are here:
    [Root]\packages\@react-native-windows\cli
  2. Template files used with react-native init-windows can be found here:
    [Root]\vnext\templates

Testing local changes to RNW or its CLI commands on existing in-repo projects

If you've made local changes to your RNW repo, or to one of the CLI commands (such as react-native run-windows, react-native autolink-windows, etc.), the easiest way to do so is to test one of the many RNW apps already existing in the repo, such as packages/e2e-test-app or packages/sample-app-fabric.

If you want to debug a CLI command as it runs, you can do so by running the command in a new "JavaScript Debug Terminal" in VSCode.

Testing local changes to RNW or its CLI commands on a new project

If you've made any local changes to your RNW repo and want to test on a new project, the basic process is to use the yarn link command in your project's folder to let it know that you want to use your local RNW repo's packages instead of a version downloaded from NPM.

First, you'll need to make sure that your new app is set to use the same version of react-native-windows (and react-native) as your local RNW repo. So when you're following the steps to yarn add react-native-windows@VERSION make sure you're specifying the same version in your vnext\package.json file.

Then, after the yarn add, if your RN project is using Classic Yarn (v1.x) you must do the following:

  1. Build your RNW repo with yarn build
  2. Run yarn link in <root>\vnext to link react-native-windows

    If you get an error that another folder has already registered it simply run yarn unlink and then try again.

  3. Open the target RN project (app/lib) folder
  4. Run yarn link react-native-windows

Otherwise, if you're using the newer Yarn:

  1. Build your RNW repo with yarn build
  2. Open the target RN project (app/lib) folder (that doesn't have RNW yet)
  3. Run yarn link <root>\vnext

In either case, now your project's node_modules\react-native-windows should be a symlink to your local RNW repo. This means any changes to RNW in your repo will be used by your app, including changes to react-native-windows or the CLI commands in @react-native-windows/cli. You will be able to test and debug them as described above.

In this way, you can even test the new project command, react-native init-windows in this project folder. The command is even smart enough to know that your using a local RNW repo and will switch to building by source (instead of NuGets, which you won't have) by default.

Important: When linking your RNW repo, remember when the app builds, all RNW library files will be in your local RNW repo's build output folders. So be careful with linking and building more than one app at a time as they can overwrite one another. It's best to do your testing, then delete the test project app after you're done.

Testing react-native-windows-init on older projects (RNW < 0.75)

If you are making local changes to the old react-native-windows-init code, you can build and run it locally:

  1. Build the react-native-windows-init package (packages/react-native-windows-init) locally using yarn build`
  2. Manually call into the CLI by using node <root>\packages\react-native-windows-init\bin.js [...] rather than calling npx react-native-windows-init [...]

Note, you can pass parameters to that as usual, or use node --inspect-brk ... to allow you to attach to the call using VSCode.

Also note that this will only test the changes made directly to the react-native-windows-init package. The other packages will be downloaded from npmjs.org (according to the version you specified with --version) during the process.

Note: If you want to test local changes to RNW or its CLI commands on projects you want to create using react-native-windows-init, you'll need to use the --devMode option when running that command. Since react-native-windows-init takes responsibility for calling yarn add react-native-windows, the --devMode option will tell the script to also call yarn link on your behalf too. Note this only works for classic Yarn and still requires you to register your repo with yarn link in your vnext folder.