Skip to content

Commit

Permalink
Overhaul RNW CLI documentation (#947)
Browse files Browse the repository at this point in the history
## Description

This PR does multiple things in order to improve the RNW CLI
documentation, including:

* Creating separate pages for each CLI command
* Updating existing documentation to point to these new pages where
appropriate
* Updated Getting Started to use the new `init-windows` command
* Updated other references to the old `react-native-windows-init`
command with links to the new command and changed functionality
* Clarified references where we used "React Native Windows CLI" as a
generic term when we mean specific commands within the CLI

### Why
To improve out documentation in time for the 0.75 release.

Resolves microsoft/react-native-windows#13394

## Screenshots
N/A

Co-authored-by: Tatiana Kapos <tatianakapos@microsoft.com>
  • Loading branch information
jonthysell and TatianaKapos committed Jun 26, 2024
1 parent 854904c commit 8a2f48d
Show file tree
Hide file tree
Showing 20 changed files with 258 additions and 87 deletions.
7 changes: 6 additions & 1 deletion .spelling
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
accessors
APIs
Appium
autolink
autolink-windows
autolinked
autolinking
bool
Expand All @@ -14,6 +16,7 @@ Chakra
changelog
CocoaPods
codegen
codegen-windows
comboboxes
config
configJson
Expand All @@ -35,11 +38,12 @@ functor
HomeBrew
hostname
i.e.
init-windows
initializer
interop
iOS
KeyEvents
ItemGroup
KeyEvents
lifecycle
macOS
middleware
Expand Down Expand Up @@ -72,6 +76,7 @@ repo
repos
RNW-on-WinUI
roadmap
run-windows
runtime
runtimes
schemas
Expand Down
37 changes: 37 additions & 0 deletions docs/autolink-windows-cli.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
---
id: autolink-windows-cli
title: react-native autolink-windows
---

This guide will give you more information on the `autolink-windows` command of the React Native Windows CLI.

## `autolink-windows`

The `autolink-windows` CLI command is used to link the native code and build systems for a React Native for Windows app with any native community modules it uses.

**Note:** Autolinking runs automatically as part of running the [run-windows command](run-windows-cli.md), unless the `--no-autolink` argument is used.

### Usage
Runs Windows-specific autolinking for your RNW project.

```bat
npx react-native autolink-windows
```
### Options

Here are the options that `react-native autolink-windows` takes:
| Option | Input Type | Description |
|-----------------------|------------|--------------------------------------------------|
| `--logging` | boolean | Verbose output logging |
| `--check` | boolean | Only check whether any autolinked files need to change |
| `--sln` | string | Override the app solution file determined by 'react-native config', i.e. `windows\myApp.sln` |
| `--proj` | string | Override the app project file determined by 'react-native config', i.e. `windows\myApp\myApp.vcxproj` |
| `--no-telemetry` | boolean | Disables sending telemetry that allows analysis of usage and failures of the react-native-windows CLI |
| `-h`, `--help` | boolean | Display help for command |

This sends telemetry to Microsoft by default. You can prevent the telemetry from being sent by using the `--no-telemetry` command line option. See below for more details.

The software may collect information about you and your use of the software and send it to Microsoft. Microsoft may use this information to provide services and improve our products and services. You may turn off the telemetry as described in the repository. There are also some features in the software that may enable you and Microsoft to collect data from users of your applications. If you use these features, you must comply with applicable law, including providing appropriate notices to users of your applications together with a copy of Microsoft's privacy statement. Our privacy statement is located at https://go.microsoft.com/fwlink/?LinkID=824704. You can learn more about data collection and use in the help documentation and our privacy statement. Your use of the software operates as your consent to these practices.

This data collection notice only applies to the process of running the react-native-windows CLI commands.

33 changes: 33 additions & 0 deletions docs/codegen-windows-cli.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
---
id: codegen-windows-cli
title: react-native codegen-windows
---

This guide will give you more information on the `codegen-windows` command of the React Native Windows CLI.

## `codegen-windows`

The `codegen-windows` CLI command is used to generate some necessary Windows-specific native code for native modules.

### Usage
Runs Windows-specific codegen for native modules.

```bat
npx react-native codegen-windows
```
### Options

Here are the options that `react-native codegen-windows` takes:
| Option | Input Type | Description |
|-----------------------|------------|--------------------------------------------------|
| `--logging` | boolean | Verbose output logging |
| `--check` | boolean | Only check whether any codegen files need to change |
| `--no-telemetry` | boolean | Disables sending telemetry that allows analysis of usage and failures of the react-native-windows CLI |
| `-h`, `--help` | boolean | Display help for command |

This sends telemetry to Microsoft by default. You can prevent the telemetry from being sent by using the `--no-telemetry` command line option. See below for more details.

The software may collect information about you and your use of the software and send it to Microsoft. Microsoft may use this information to provide services and improve our products and services. You may turn off the telemetry as described in the repository. There are also some features in the software that may enable you and Microsoft to collect data from users of your applications. If you use these features, you must comply with applicable law, including providing appropriate notices to users of your applications together with a copy of Microsoft's privacy statement. Our privacy statement is located at https://go.microsoft.com/fwlink/?LinkID=824704. You can learn more about data collection and use in the help documentation and our privacy statement. Your use of the software operates as your consent to these practices.

This data collection notice only applies to the process of running the react-native-windows CLI commands.

12 changes: 6 additions & 6 deletions docs/debugging-javascript.md
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ InstanceSettings.UseDirectDebugger = true;

2. Then simply re-build and launch your RNW app as usual.

> For a new RNW app created using `react-native-windows-init`, `UseDirectDebugger` defaults to `false`.
> For a new RNW app `UseDirectDebugger` defaults to `true` for Debug builds, and `false` for Release builds.
#### Option 2: Using the Developer Menu

Expand Down Expand Up @@ -127,7 +127,7 @@ You can direct debug RNW apps using the (default) Chakra JS engine with [Visual
2. For C# RNW apps, open the *Debug* tab, set the *Debugger type > Application process* to *Script*, then close the properties
4. Click on *Debug* in the menu bar and select *Start Debugging*
4. **Option B:** Attach Visual Studio to the app that's already running
1. Make sure that your native app and Metro is already running (i.e. `npx react-native run-windows`)
1. Make sure that your native app and Metro is already running (i.e. using the [run-windows command](run-windows-cli.md))
2. Click on *Debug* in Visual Studio's menu bar and select *Attach to Process...*
3. Find and select the native process for your app (not Metro)
4. Make sure *Attach to:* is set to *Automatic: Script code* or *Script code*
Expand All @@ -154,7 +154,7 @@ You can direct debug RNW apps using the Hermes JS engine with [Visual Studio](ht
> **Important:** Launching the app and starting direct debug with Hermes isn't supported in Visual Studio.
4. **Option B:** Attach Visual Studio to the app that's already running
1. Make sure that your native app and Metro is already running (i.e. `npx react-native run-windows`)
1. Make sure that your native app and Metro is already running (i.e. using the [run-windows command](run-windows-cli.md))
2. Click on *Debug* in Visual Studio's menu bar and select *Attach to Process...*
3. Make sure *Connection type:* is set to *JavaScript and TypeScript (Chrome DevTools/V8 Inspector)*
> If you don't see *JavaScript and TypeScript (Chrome DevTools/V8 Inspector)*, make sure you've installed the *Node.js development* workload for your version of Visual Studio.
Expand Down Expand Up @@ -204,7 +204,7 @@ You can direct debug RNW apps using the Hermes JS engine with [VS Code](http://c
"type": "node"
}
```
3. Make sure that your native app and Metro is already running (i.e. `npx react-native run-windows`)
3. Make sure that your native app and Metro is already running (i.e. using the [run-windows command](run-windows-cli.md))
4. Open the *Run and Debug* sidebar by clicking on the button in the sidebar or by pressing `Ctrl+Shift+D`
5. Make sure the new config is selected at the top of the *Run and Debug* sidebar
6. Click on the ▶️ button or press `F5` in VS Code
Expand Down Expand Up @@ -258,7 +258,7 @@ You can direct debug RNW apps using the Hermes JS engine with [VS Code](http://c
"request": "attach"
}
```
3. Make sure that your native app and Metro is already running (i.e. `npx react-native run-windows`)
3. Make sure that your native app and Metro is already running (i.e. using the [run-windows command](run-windows-cli.md))
4. Open the *Run and Debug* sidebar by clicking on the button in the sidebar or by pressing `Ctrl+Shift+D`
5. Make sure the new config is selected at the top of the *Run and Debug* sidebar
6. Click on the ▶️ button or press `F5` in VS Code
Expand Down Expand Up @@ -326,7 +326,7 @@ InstanceSettings().UseDirectDebugger(false);
2. Then simply re-build and launch your RNW app as usual.
> For a new RNW app created using `react-native-windows-init`, `UseWebDebugger` defaults to `true` for Debug builds, and `false` for Release builds.
> Unless otherwise specified, for a new RNW app, `UseWebDebugger` defaults to `false`.
### Step 2: Connect a debugger
Expand Down
48 changes: 35 additions & 13 deletions docs/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ Make sure you have installed all of the [development dependencies](rnw-dependenc

For information around how to set up React Native, see the [React Native Getting Started Guide](https://reactnative.dev/docs/getting-started).

## Install React Native for Windows
## Create a new React Native project

Remember to call `react-native init` from the place you want your project directory to live.

Expand All @@ -27,23 +27,47 @@ npx --yes react-native@nightly init <projectName> --version "nightly"

### Navigate into this newly created directory

Once your project has been initialized, React Native will have created a new sub directory where all your generated files live.
React Native will have created your project in a new sub-directory, which you must enter before continuing.

```bat
cd projectName
cd <projectName>
```

### Install the Windows extension
### Add React Native Windows to your project's dependencies

Lastly, install the React Native for Windows packages.
<!-- Note, make sure "version" is pointing to the correct react-native-windows NPM tag in the command below. -->

<!-- 1. For the next version (i.e. in docs/getting-started.md) use "canary" -->
<!-- 2. For the latest stable version in versioned_docs use "latest" -->
<!-- 3. For older stable versions use the stable tag name, i.e. "0.73-stable" -->

<!--DOCUSAURUS_CODE_TABS-->

<!--Using Yarn (Recommended)-->

```bat
yarn add react-native-windows@canary
```

<!--Using NPM-->

```bat
npm install --save react-native-windows@canary
```

<!--END_DOCUSAURUS_CODE_TABS-->

### Initialize the React Native Windows native code and projects

Lastly, initialize the React Native for Windows application with the [init-windows command](init-windows-cli.md):

```bat
npx --yes react-native-windows-init --overwrite
npx react-native init-windows --overwrite
```

> The --overwrite flag copies a custom `metro.config.js` file. If you are starting a new app, this should have no impact. If you are adding Windows to your existing app and you have modified the `metro.config.js` file, please back up your changes, run the command and copy over to take effect.
> **Note:** RNW templates contain a customized `metro.config.js` file, which is meant to merge cleanly into the default config provided by the standard React Native project template. If you are starting a new app, overwriting `metro.config.js` should have no impact. However, if you are adding Windows to an existing app with an already modified `metro.config.js` file, please make sure to back up and re-apply your modifications after adding RNW.
For information on the options that `react-native-windows-init` takes see [React Native Windows Init CLI](https://microsoft.github.io/react-native-windows/init-cli).
> **Note:** Previous versions of the RNW Getting Started steps recommend the use of the `react-native-windows-init` command, which is being phased out. For documentation of that command, see: [React Native Windows Init CLI](https://microsoft.github.io/react-native-windows/init-cli).
## Running a React Native Windows App

Expand All @@ -52,19 +76,17 @@ For information on the options that `react-native-windows-init` takes see [React
- Without Using Visual Studio

In your React Native Windows project directory, run:
In your React Native Windows project directory, run the [run-windows command](run-windows-cli.md):

```bat
npx react-native run-windows
```

For information on the options that `@react-native-windows/cli` takes see [React Native Windows CLI](run-windows-cli.md).

A new Command Prompt window will open with the React packager as well as a `react-native-windows` app. This step may take a while during first run since it involves building the entire project and all dependencies. You can now start developing! :tada:
A new Command Prompt window will open with the React packager as well as your React Native for Windows app. This step may take a while during first run since it involves building the entire project and all dependencies. You can now start developing! :tada:

- Using Visual Studio

- From the root of the project directory, run the following script which will automatically link your app's dependencies:
- From the root of the project directory, run the [autolink-windows command](autolink-windows-cli.md), which will automatically link your app's dependencies:
```bat
npx react-native autolink-windows
```
Expand Down
4 changes: 2 additions & 2 deletions docs/hermes.md
Original file line number Diff line number Diff line change
Expand Up @@ -107,10 +107,10 @@ Follow steps 1-7 from above, and then

### Enable debugging/profiling on release builds

We keep the inspector turned off on release builds by default. If you want to debug or profile release builds, set the MSBuild property `EnableHermesInspectorInReleaseFlavor` to `'true'` when building the platform.
We keep the inspector turned off on release builds by default. If you want to debug or profile release builds, set the MSBuild property `EnableHermesInspectorInReleaseFlavor` to `'true'` when building the platform with the [run-windows command](run-windows-cli.md), i.e.:

```bash
npx react-native run-windows --msbuild EnableHermesInspectorInReleaseFlavor=true
npx react-native run-windows --msbuildprops EnableHermesInspectorInReleaseFlavor=true
```

### Known Issues
Expand Down
49 changes: 49 additions & 0 deletions docs/init-windows-cli.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
---
id: init-windows-cli
title: react-native init-windows
---

This guide will give you more information on the `init-windows` command of the React Native Windows CLI.

## `init-windows`

The `init-windows` CLI command is used to initialize a new React Native for Windows project inside an existing React Native project.

### Usage
Initializes a new RNW project from a given template.

```bat
npx react-native init-windows
```
### Options

Here are the options that `react-native init-windows` takes:
| Option | Input Type | Description |
|-----------------------|------------|--------------------------------------------------|
| `--logging` | boolean | Verbose output logging |
| `--template` | string | Specify the template to use |
| `--name` | string | The native project name. Defaults to the name property in `app.json` or `package.json` |
| `--namespace` | string | The native project namespace, expressed using dots as separators, i.e. `Level1.Level2.Level3`. Defaults to the same as name |
| `--overwrite` | boolean | Overwrite any existing files without prompting |
| `--no-telemetry` | boolean | Disables sending telemetry that allows analysis of usage and failures of the react-native-windows CLI |
| `-h`, `--help` | boolean | Display help for command |

### Templates

The following templates are available for use with `init-windows` by replacing `--template XYZ`, where `XYZ` can be:

| Template | Name |
|:-:|:--|
| `cpp-app` | React Native Windows Application (New Arch, C++, Win32, Hermes) |
| `cpp-lib` | React Native Windows Turbo Module (New Arch, C++) |
| `old/uwp-cpp-app` | React Native Windows Application (Old Arch, UWP, C++) |
| `old/uwp-cpp-lib` | React Native Windows Library (Old Arch, UWP, C++) |
| `old/uwp-cs-app` | React Native Windows Application (Old Arch, UWP, C#) |
| `old/uwp-cs-lib` | React Native Windows Library (Old Arch, UWP, C#) |

This sends telemetry to Microsoft by default. You can prevent the telemetry from being sent by using the `--no-telemetry` command line option. See below for more details.

The software may collect information about you and your use of the software and send it to Microsoft. Microsoft may use this information to provide services and improve our products and services. You may turn off the telemetry as described in the repository. There are also some features in the software that may enable you and Microsoft to collect data from users of your applications. If you use these features, you must comply with applicable law, including providing appropriate notices to users of your applications together with a copy of Microsoft's privacy statement. Our privacy statement is located at https://go.microsoft.com/fwlink/?LinkID=824704. You can learn more about data collection and use in the help documentation and our privacy statement. Your use of the software operates as your consent to these practices.

This data collection notice only applies to the process of running the react-native-windows CLI commands.

Loading

0 comments on commit 8a2f48d

Please sign in to comment.