-
Notifications
You must be signed in to change notification settings - Fork 1.1k
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-windows
can 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 link
in<root>\vnext
to linkreact-native-windows
If you get an error that another folder has already registered it simply run
yarn unlink
and 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-init
package (packages/react-native-windows-init) locally using
yarn 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--devMode
option when running that command. Sincereact-native-windows-init
takes responsibility for callingyarn add react-native-windows
, the--devMode
option will tell the script to also callyarn link
on your behalf too. Note this only works for classic Yarn and still requires you to register your repo withyarn link
in yourvnext
folder.