Skip to content

Contributing to the CLI

Jon Thysell edited this page Feb 24, 2022 · 34 revisions

Where stuff lives

Parts of the CLI:

  1. Code to identify the correct version of react-native-windows to install, and install it:
    [Root]\packages\react-native-windows-init
  2. Template code: The code that actually creates the files needed to to run a create and run react-native-windows app here:
    [Root]\packages\@react-native-windows\cli
  3. Template files used in (2) can be found in:
    [Root]\vnext\templates
  4. Code for run-windows and other commands run through react-native <foo> Also in [Root]\packages\@react-native-windows\cli

Locally testing changes to the new project CLI

Testing react-native-windows-init itself

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

  1. Build the react-native-windows-init package 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.

Testing changes made to react-native-windows or @react-native-windows/cli

If you have made local changes to react-native-windows, @react-native-windows/cli, (or any other package in our repo), you can use a combination of yarn link and the --useDevMode flag to make sure the local version of all of our packages are being used.

  1. Build your RNW repo with yarn build
  2. Run yarn link in <root>\vnext for 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. Call npx react-native-windows-init --useDevMode [...], being sure to not specify a version, since you're trying to use your local copy

Note, you can also call node <root>\packages\react-native-windows-init\bin.js --useDevMode [...] as per the above example, to use your local copy of react-native-windows-init, rather than the one published to npmjs.org.

How to debug other CLI commands:

The easiest way to to debug is using VS Code. You just need to create a configuration within your template app directory that tells VS Code to launch the CLI in an instance of node and debug node on startup. Here's an example launch.json with a single configuration:

{
  "version": "0.2.0",
  "configurations"[
    {
      "type""node",
      "request""launch",
      "name""react-native windows",
      "program""${workspaceRoot}/node_modules/react-native/cli.js",
      "args"["run-windows"],
      "stopOnEntry"true
    }
  ],
  "compounds"[]
}