-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Contributing to the CLI
Parts of the CLI:
- CLI Package: The commands that run with
react-native <command>are here:
[Root]\packages\@react-native-windows\cli - Template files used with
react-native init-windowscan be found here:
[Root]\vnext\templates
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.
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:
- Build your RNW repo with
yarn build - Run
yarn linkin<root>\vnextto linkreact-native-windowsIf you get an error that another folder has already registered it simply run
yarn unlinkand then try again. - Open the target RN project (app/lib) folder
- Run
yarn link react-native-windows
Otherwise, if you're using the newer Yarn:
- Build your RNW repo with
yarn build - Open the target RN project (app/lib) folder (that doesn't have RNW yet)
- 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.
If you are making local changes to the old react-native-windows-init code, you can build and run it locally:
- Build the
react-native-windows-initpackage (packages/react-native-windows-init) locally usingyarn build` - Manually call into the CLI by using
node <root>\packages\react-native-windows-init\bin.js [...]rather than callingnpx 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--devModeoption when running that command. Sincereact-native-windows-inittakes responsibility for callingyarn add react-native-windows, the--devModeoption will tell the script to also callyarn linkon your behalf too. Note this only works for classic Yarn and still requires you to register your repo withyarn linkin yourvnextfolder.