Skip to main content

cli

Command-line interface for working with packages in your repo.

Bundle a Package

Bundle a package using Metro. The bundling process uses optional configuration parameters and command-line overrides.

The command react-native rnx-bundle is meant to be a drop-in replacement for react-native bundle. If rnx-bundle ever becomes widely accepted, we will work on upstreaming it to @react-native-community/cli, along with supporting libraries for package configuration and Metro plugins.

Example Commands

yarn react-native rnx-bundle
yarn react-native rnx-bundle --entry-file src/index.ts --bundle-output main.jsbundle --platform ios --dev false --minify true

Example Configuration (Optional)

{
"rnx-kit": {
"bundle": {
"entryFile": "entry.js",
"assetsDest": "dist",
"plugins": [
"@rnx-kit/metro-plugin-cyclic-dependencies-detector",
[
"@rnx-kit/metro-plugin-duplicates-checker",
{ "ignoredModules": ["react-is"] }
],
"@rnx-kit/metro-plugin-typescript"
],
"targets": ["ios", "android", "windows", "macos"],
"platforms": {
"android": {
"assetsDest": "dist/res"
},
"macos": {
"plugins": [
"@rnx-kit/metro-plugin-cyclic-dependencies-detector",
[
"@rnx-kit/metro-plugin-duplicates-checker",
{ "ignoredModules": ["react-is"] }
]
]
}
}
}
}
}

Bundle Defaults

When certain parameters aren't specified in configuration or on the command-line, they are explicitly set to default values.

ParameterDefault Value
entryFile"index.js"
bundleOutput"index.<platform>.bundle" (Windows, Android), or "index.<platform>.jsbundle" (iOS, macOS)
treeShakefalse
plugins["@rnx-kit/metro-plugin-cyclic-dependencies-detector", "@rnx-kit/metro-plugin-duplicates-checker", "@rnx-kit/metro-plugin-typescript"]

Other parameters have implicit defaults, buried deep in Metro or its dependencies.

Command-Line Overrides

OverrideDescription
--id [id]Target bundle definition. This is only needed when the rnx-kit configuration has multiple bundle definitions.
--entry-file [file]Path to the root JavaScript or TypeScript file, either absolute or relative to the package.
--platform [ios | android | windows | win32 | macos]Target platform. When not given, all platforms in the rnx-kit configuration are bundled.
--dev [boolean]If false, warnings are disabled and the bundle is minified (default: true).
--minify [boolean]Controls whether or not the bundle is minified. Disabling minification is useful for test builds.
--bundle-output [path]Path to the output bundle file, either absolute or relative to the package.
--bundle-encoding [utf8 | utf16le | ascii]Character encoding to use when writing the bundle file.
--max-workers [number]Specifies the maximum number of parallel worker threads to use for transforming files. This defaults to the number of cores available on your machine.
--sourcemap-output [string]Path where the bundle source map is written, either absolute or relative to the package.
--sourcemap-sources-root [string]Path to use when relativizing file entries in the bundle source map.
--assets-dest [path]Path where bundle assets like images are written, either absolute or relative to the package. If not given, assets are ignored.
--tree-shake [boolean]Enable tree shaking to remove unused code and reduce the bundle size.
--reset-cacheReset the Metro cache.
--config [string]Path to the Metro configuration file.
-h, --helpShow usage information.

Start a Bundle Server

Start a bundle server for a package using Metro. The bundle server uses optional configuration parameters and command-line overrides.

The command react-native rnx-start is meant to be a drop-in replacement for react-native start. If rnx-start ever becomes widely accepted, we will work on upstreaming it to @react-native-community/cli, along with supporting libraries for package configuration and Metro plugins.

Example Commands

yarn react-native rnx-start
yarn react-native rnx-start --host localhost --port 8812

Example Configuration

{
"rnx-kit": {
"server": {
"projectRoot": "src",
"plugins": [
"@rnx-kit/metro-plugin-cyclic-dependencies-detector",
[
"@rnx-kit/metro-plugin-duplicates-checker",
{
"ignoredModules": ["react-is"],
"throwOnError": false
}
],
"@rnx-kit/metro-plugin-typescript"
]
}
}
}

Server Defaults

If the server configuration is not defined, it is implicitly created at runtime from the bundle configuration (or its defaults).

Command-Line Overrides

OverrideDescription
--port [number]Host port to use when listening for incoming server requests.
--host [string]Host name or address to bind when listening for incoming server requests. When not given, requests from all addresses are accepted.
--projectRoot [path]Path to the root of your react-native project. The bundle server uses this root path to resolve all web requests.
--watchFolders [paths]Additional folders which will be added to the file-watch list. Comma-separated. By default, Metro watches all project files.
--assetPlugins [list]Additional asset plugins to be used by the Metro Babel transformer. Comma-separated list containing plugin module names or absolute paths to plugin packages.
--sourceExts [list]Additional source-file extensions to include when generating bundles. Comma-separated list, excluding the leading dot.
--max-workers [number]Specifies the maximum number of parallel worker threads to use for transforming files. This defaults to the number of cores available on your machine.
--reset-cacheReset the Metro cache.
--custom-log-reporter-path [string]Path to a JavaScript file which exports a Metro TerminalReporter function. This replaces the default reporter, which writes all messages to the Metro console.
--httpsUse a secure (https) web server. When not specified, an insecure (http) web server is used.
--key [path]Path to a custom SSL private key file to use for secure (https) communication.
--cert [path]Path to a custom SSL certificate file to use for secure (https) communication.
--config [string]Path to the Metro configuration file.
--no-interactiveDisables interactive mode.

Manage Dependencies

Manage dependencies within a repository and across many repositories.

$ yarn react-native rnx-align-deps [options] [/path/to/package.json]

Refer to @rnx-kit/align-deps for details.

Generate a Third-Party Notice for a Package

Generate a 3rd-party notice, which is an aggregation of all the LICENSE files from your package's dependencies.

NOTE: A 3rd-party notice is a legal document. You are solely responsble for its content, even if you use @rnx-kit to assist you in generating it. You should consult with an attorney to ensure your notice meets all legal requirements.

$ yarn react-native rnx-write-third-party-notices [options]
OptionDescription
--root-path [path]The root of the repo. This is the starting point for finding each module in the source map dependency graph.
--source-map-file [file]The source map file associated with the package's entry file. This source map eventually leads to all package dependencies and their licenses.
--jsonFormat the 3rd-party notice file as JSON instead of text.
--output-file [file]The path to use when writing the 3rd-party notice file.
--ignore-scopes [string]Comma-separated list of npm scopes to ignore when traversing the source map dependency graph.
--ignore-modules [string]Comma-separated list of modules to ignore when traversing the source map dependency graph.
--preamble-text [string]A string to prepend to the start of the 3rd-party notice.
--additional-text [path]A string to append to the end of the 3rd-party notice.

Clean a React Native Project

Cleans your project by removing React Native related caches and modules.

$ yarn react-native rnx-clean [options]
OptionDescription
--include [string]Comma-separated flag of caches to clear e.g npm,yarn . When not specified , only non-platform specific caches are cleared. [android,cocoapods,npm,metro,watchman,yarn]
--project-root [path]Root path to your React Native project. When not specified, defaults to current working directory