docs(react-native): update react-native and detox readme (#9157)
This commit is contained in:
Emily Xiong
GitHub
parent
5ada5adda2
commit
5542936f6a
@ -1,80 +1,13 @@
|
||||
# Detox Plugin for Nx
|
||||
<p style="text-align: center;"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx.png" width="600" alt="Nx - Smart, Fast and Extensible Build System"></p>
|
||||
|
||||
[]()
|
||||
[](https://www.npmjs.com/@nrwl/detox)
|
||||
[](https://gitter.im/nrwl-nx/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
|
||||
[](https://join.slack.com/t/nrwlcommunity/shared_invite/enQtNzU5MTE4OTQwOTk0LTgxY2E0ZWYzMWE0YzA5ZDA2MWM1NDVhNmI2ZWMyYmZhNWJiODk3MjkxZjY3MzU5ZjRmM2NmNWU1OTgyZmE4Mzc)
|
||||
{{links}}
|
||||
|
||||
</div>
|
||||
<hr>
|
||||
|
||||
## Table of Contents
|
||||
# Nx: Smart, Fast and Extensible Build System
|
||||
|
||||
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
|
||||
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
|
||||
Nx is a next generation build system with first class monorepo support and powerful integrations.
|
||||
|
||||
- [Setup](#setup)
|
||||
- [Install applesimutils (Mac only)](#install-applesimutils-mac-only)
|
||||
- [Install Jest Globally](#install-jest-globally)
|
||||
- [Commands](#commands)
|
||||
- [Manually Add E2E Folder](#manually-add-e2e-folder)
|
||||
- [Change Testing Simulator/Emulator](#change-testing-simulatoremulator)
|
||||
- [Learn more](#learn-more)
|
||||
This package is a [Detox plugin for Nx](https://nx.dev/detox/overview).
|
||||
|
||||
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
|
||||
|
||||
## Setup
|
||||
|
||||
#### Install applesimutils (Mac only)
|
||||
|
||||
[applesimutils](https://github.com/wix/AppleSimulatorUtils) is a collection of utils for Apple simulators.
|
||||
|
||||
```sh
|
||||
brew tap wix/brew
|
||||
brew install applesimutils
|
||||
```
|
||||
|
||||
#### Install Jest Globally
|
||||
|
||||
```sh
|
||||
npm install -g jest
|
||||
```
|
||||
|
||||
### Commands
|
||||
|
||||
Note: For e2e tests to work, the app must be running (`nx start <app-name>`). A built app must exist before run test commands.
|
||||
|
||||
- `nx build-ios <app-name-e2e>`: build the iOS app (Mac only)
|
||||
- `nx test-ios <app-name-e2e>`: run e2e tests on the built iOS app (Mac only)
|
||||
- `nx build-ios <app-name-e2e> --prod` and `nx test-ios <app-name-e2e> --prod`: build and run release version of iOS app. Note: you might need open the xcode project under iOS and choose a team under "Sign & Capabilities".
|
||||
- `nx build-android <app-name-e2e>`: build the android app
|
||||
- `nx test-android <app-name-e2d>`: run e2e tests on the built android app
|
||||
- `nx build-android <app-name-e2e> --prod` and `nx test-android <app-name-e2e> --prod`: build and run release version of android app.
|
||||
|
||||
### Manually Add E2E Folder
|
||||
|
||||
A `<app-name-e2e>` folder is automatically generated when you create a react native app. However, if you want to add e2e folder manually, you need to:
|
||||
|
||||
- Install @nrwl/detox
|
||||
|
||||
```sh
|
||||
# Using npm
|
||||
npm install --save-dev @nrwl/detox
|
||||
|
||||
# Using yarn
|
||||
yarn add -D @nrwl/detox
|
||||
```
|
||||
|
||||
- Run `nx generate @nrwl/detox:app <app-name-e2e>`
|
||||
- Follow instructions https://github.com/wix/Detox/blob/master/docs/Introduction.Android.md to manully change android files.
|
||||
|
||||
### Change Testing Simulator/Emulator
|
||||
|
||||
For iOS, in terminal, run `xcrun simctl list` to view a list of simulators on your Mac. To open your active simulator, `run open -a simulator`. In `<app-name-e2e>/.detoxrc.json`, you could change the simulator under `devices.simulator.device`.
|
||||
|
||||
For Android: in terminal, run `emulator -list-avds` to view a list of emulators installed. To open your emulator, run `emulator -avd <your emulator name>`. In `<app-name-e2e>/.detoxrc.json`, you could change the simulator under `devices.emulator.device`.
|
||||
|
||||
To override the device name specified in a configuration, you could use `--device-name` option: `nx test-ios <app-name-e2e> --device-name "iPhone 11"`.
|
||||
|
||||
## Learn more
|
||||
|
||||
Visit the [Nx Documentation](https://nx.dev) to learn more.
|
||||
{{content}}
|
||||
|
||||
@ -1,193 +1,13 @@
|
||||
<p style="text-align: center;"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-react.png" width="600" alt="Nx - Smart, Fast and Extensible Build System"></p>
|
||||
<p style="text-align: center;"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx.png" width="600" alt="Nx - Smart, Fast and Extensible Build System"></p>
|
||||
|
||||
{{links}}
|
||||
|
||||
<hr>
|
||||
|
||||
# React Native Plugin for Nx
|
||||
# Nx: Smart, Fast and Extensible Build System
|
||||
|
||||
{{what-is-nx}}
|
||||
Nx is a next generation build system with first class monorepo support and powerful integrations.
|
||||
|
||||
{{getting-started}}
|
||||
This package is a [React Native plugin for Nx](https://nx.dev/react-native/overview).
|
||||
|
||||
## Table of Contents
|
||||
|
||||
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
|
||||
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
|
||||
|
||||
- [Getting started](#getting-started)
|
||||
- [Create a new Nx workspace:](#create-a-new-nx-workspace)
|
||||
- [Install React Native plugin](#install-react-native-plugin)
|
||||
- [Create an app](#create-an-app)
|
||||
- [Start the JavaScript bundler](#start-the-javascript-bundler)
|
||||
- [Run on devices](#run-on-devices)
|
||||
- [Release build](#release-build)
|
||||
- [Test/lint the app](#testlint-the-app)
|
||||
- [E2e test the app](#e2e-test-the-app)
|
||||
- [Setup](#setup)
|
||||
- [Install applesimutils (Mac only)](#install-applesimutils-mac-only)
|
||||
- [Install Jest Globally](#install-jest-globally)
|
||||
- [Commands](#commands)
|
||||
- [Manually Add E2E Folder](#manually-add-e2e-folder)
|
||||
- [Change Testing Simulator/Emulator](#change-testing-simulatoremulator)
|
||||
- [Using components from React library](#using-components-from-react-library)
|
||||
- [CLI Commands and Options](#cli-commands-and-options)
|
||||
- [`start`](#start)
|
||||
- [`--port [number]`](#--port-number)
|
||||
- [`run-ios`](#run-ios)
|
||||
- [`--port [number]`](#--port-number-1)
|
||||
- [`--install`](#--install)
|
||||
- [`--sync`](#--sync)
|
||||
- [`run-android`](#run-android)
|
||||
- [`--port [number]`](#--port-number-2)
|
||||
- [`--sync`](#--sync-1)
|
||||
- [`sync-deps`](#sync-deps)
|
||||
- [`--include [string]`](#--include-string)
|
||||
- [Learn more](#learn-more)
|
||||
- [Contributing](#contributing)
|
||||
- [Debugging](#debugging)
|
||||
|
||||
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
|
||||
|
||||
## Getting started
|
||||
|
||||
### Create a new Nx workspace:
|
||||
|
||||
```sh
|
||||
npx create-nx-workspace --cli=nx --preset=empty
|
||||
```
|
||||
|
||||
### Install React Native plugin
|
||||
|
||||
```sh
|
||||
# Using npm
|
||||
npm install --save-dev @nrwl/react-native
|
||||
|
||||
# Using yarn
|
||||
yarn add -D @nrwl/react-native
|
||||
```
|
||||
|
||||
### Create an app
|
||||
|
||||
```sh
|
||||
npx nx g @nrwl/react-native:app <app-name>
|
||||
```
|
||||
|
||||
When using Nx, you can create multiple applications and themes in the same workspace. If you don't want to prefix your commands with npx, install `@nrwl/cli` globally.
|
||||
|
||||
### Start the JavaScript bundler
|
||||
|
||||
```sh
|
||||
npx nx start <app-name>
|
||||
```
|
||||
|
||||
This will start the bundler at `http://localhost:8081`.
|
||||
|
||||
### Run on devices
|
||||
|
||||
Make sure the bundler server is running.
|
||||
|
||||
**Android:**
|
||||
|
||||
```sh
|
||||
npx nx run-android <app-name>
|
||||
```
|
||||
|
||||
**iOS:** (Mac only)
|
||||
|
||||
```sh
|
||||
npx nx run-ios <app-name> --install
|
||||
```
|
||||
|
||||
Note: The `--install` flag installs Xcode dependencies before building the iOS app. This option keeps dependencies up to date.
|
||||
|
||||
### Release build
|
||||
|
||||
**Android:**
|
||||
|
||||
```sh
|
||||
npx nx build-android <app-name>
|
||||
```
|
||||
|
||||
**iOS:** (Mac only)
|
||||
|
||||
No CLI support yet. Run in the Xcode project. See: https://reactnative.dev/docs/running-on-device
|
||||
|
||||
### Test/lint the app
|
||||
|
||||
```sh
|
||||
npx nx test <app-name>
|
||||
npx nx lint <app-name>
|
||||
```
|
||||
|
||||
## Using components from React library
|
||||
|
||||
You can use a component from React library generated using Nx package for React. Once you run:
|
||||
|
||||
```sh
|
||||
npx nx g @nrwl/react-native:lib ui-button
|
||||
```
|
||||
|
||||
This will generate the `UiButton` component, which you can use in your app.
|
||||
|
||||
```jsx
|
||||
import { UiButton } from '@myorg/ui-button';
|
||||
```
|
||||
|
||||
## CLI Commands and Options
|
||||
|
||||
Usage:
|
||||
|
||||
```sh
|
||||
npx nx [command] [app] [...options]
|
||||
```
|
||||
|
||||
### `start`
|
||||
|
||||
Starts the JS bundler that communicates with connected devices.
|
||||
|
||||
#### `--port [number]`
|
||||
|
||||
The port to listen on.
|
||||
|
||||
### `run-ios`
|
||||
|
||||
Builds your app and starts it on iOS simulator.
|
||||
|
||||
#### `--port [number]`
|
||||
|
||||
The port of the JS bundler.
|
||||
|
||||
#### `--install`
|
||||
|
||||
Install dependencies for the Xcode project before building iOS app.
|
||||
|
||||
#### `--sync`
|
||||
|
||||
Sync app dependencies to its `package.json`. On by default, use `--no-sync` to turn it off.
|
||||
|
||||
### `run-android`
|
||||
|
||||
Builds your app and starts it on iOS simulator.
|
||||
|
||||
#### `--port [number]`
|
||||
|
||||
The port of the JS bundler.
|
||||
|
||||
#### `--sync`
|
||||
|
||||
Sync app dependencies to its `package.json`. On by default, use `--no-sync` to turn it off.
|
||||
|
||||
### `sync-deps`
|
||||
|
||||
Sync app dependencies to its `package.json`.
|
||||
|
||||
#### `--include [string]`
|
||||
|
||||
A comma-separate list of additional packages to include.
|
||||
|
||||
e.g. `nx sync-deps [app] --include react-native-gesture,react-native-safe-area-context`
|
||||
|
||||
## Learn more
|
||||
|
||||
Visit the [Nx Documentation](https://nx.dev) to learn more.
|
||||
{{content}}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user