diff --git a/docs/en/framework/ui/react-native/index.md b/docs/en/framework/ui/react-native/index.md index 00817eec70..a1a52d9f81 100644 --- a/docs/en/framework/ui/react-native/index.md +++ b/docs/en/framework/ui/react-native/index.md @@ -23,7 +23,7 @@ The ABP platform provides a basic [React Native](https://reactnative.dev/) start > The startup template UI is built with **[NativeWind v4](https://www.nativewind.dev/)** (Tailwind CSS for React Native) on top of a shadcn-inspired neutral palette, with full **light/dark mode** support. See [Styling with NativeWind](styling-with-nativewind.md) for the styling system reference. -React Native MobileEmulator profile +React Native startup template running on a mobile emulator ## How to Prepare Development Environment @@ -73,10 +73,10 @@ This command creates a solution containing an **Angular** or **MVC** project (de You can choose how you want to run the mobile app: -| Goal | Documentation | -| ------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | -| **Browser testing (fastest)** | [Running on Web](./running-on-web.md) — ABP Studio **Default** profile or Expo Web + HTTPS proxy at `https://localhost:8443` | -| **Emulator, simulator, or physical device** | [Running on Device](./running-on-device.md) — **MobileEmulator** profile or Cloudflare tunnel method (`yarn tunnel:api`) | +| Goal | Documentation | +| ------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Browser testing (fastest)** | [Running on Web](./running-on-web.md) — ABP Studio **Default** profile or Expo Web + HTTPS proxy at `https://localhost:8443` | +| **Emulator, simulator, or physical device** | [Running on Device](./running-on-device.md) — **Pro, non-tiered Monolith:** **MobileEmulator** profile or `yarn tunnel:api`; **Tiered / Microservice:** manual backend setup | Before running, you may need to install dependencies in the React Native project folder: @@ -85,7 +85,7 @@ Before running, you may need to install dependencies in the React Native project Run `yarn install` or `npm install` in that folder. -> **Recommended:** We suggest starting with [Running on Web](./running-on-web.md). Because, it requires the fewest setup steps and provides faster developement and hot-reload options compared to the physical device tests. +> **Recommended:** We suggest starting with [Running on Web](./running-on-web.md). Because it requires the fewest setup steps and provides faster development and hot-reload options compared to the physical device tests. ### Related guides diff --git a/docs/en/framework/ui/react-native/manual-backend-configuration.md b/docs/en/framework/ui/react-native/manual-backend-configuration.md index ebdcc496a8..0285aa3423 100644 --- a/docs/en/framework/ui/react-native/manual-backend-configuration.md +++ b/docs/en/framework/ui/react-native/manual-backend-configuration.md @@ -29,7 +29,7 @@ > **Prefer simpler options first:** > > - Browser testing → [Running on Web](./running-on-web.md) (no backend changes) -> - Non-tiered Monolith on emulator/device → [Running on Device](./running-on-device.md) with `yarn tunnel:api` or the **MobileEmulator** profile +> - Pro, non-tiered Monolith on emulator/device → [Running on Device](./running-on-device.md) with `yarn tunnel:api` or the **MobileEmulator** profile > React Native does not trust the auto-generated .NET HTTPS certificate. Use **HTTP** during this manual workflow. @@ -119,7 +119,7 @@ Update `react-native/Environment.ts` with your local IP address instead of `loca } ``` -Update `react-native/Environment.ts` with your local IP address. See the image in [Running on Device](./running-on-device.md#manual-cli-without-mobileemulator-profile). +Update `react-native/Environment.ts` with your local IP address, then start Expo as described in [Running on Device](./running-on-device.md). {{ else if Architecture == "Microservice" }} @@ -241,7 +241,7 @@ Update `react-native/Environment.ts` with your local IP address. See the image i }, "Language": { "Destinations": { - "Identity": { + "Language": { "Address": "http://192.168.1.36:44310/" } } @@ -251,7 +251,7 @@ Update `react-native/Environment.ts` with your local IP address. See the image i } ``` -Update `apps/mobile/react-native/Environment.ts` with your local IP address. See the image in [Running on Device](./running-on-device.md#manual-cli-without-mobileemulator-profile). +Update `apps/mobile/react-native/Environment.ts` with your local IP address, then start Expo as described in [Running on Device](./running-on-device.md). {{ end }} diff --git a/docs/en/framework/ui/react-native/running-on-device.md b/docs/en/framework/ui/react-native/running-on-device.md index d08438e6f1..ab1b70f271 100644 --- a/docs/en/framework/ui/react-native/running-on-device.md +++ b/docs/en/framework/ui/react-native/running-on-device.md @@ -63,7 +63,7 @@ For browser testing, see [Running on Web](./running-on-web.md). ### MobileEmulator profile (Recommended) -Monolith solutions include a **MobileEmulator** run profile in the [Solution Runner](../../../studio/running-applications). When you start it, ABP Studio specifically runs: +**Pro, non-tiered Monolith** solutions include a **MobileEmulator** run profile in the [Solution Runner](../../../studio/running-applications). When you start it, ABP Studio specifically runs: 1. The backend host 2. **ReactNativeTunnel** — runs `node scripts/tunnel.js` to expose your local backend through a Cloudflare tunnel @@ -76,7 +76,7 @@ Before the first run: Start an Android emulator (or connect a device), then start the **MobileEmulator** profile. -React Native app demo +ABP Studio Solution Runner with MobileEmulator profile selected See [Cloudflare tunnel (manual CLI)](#cloudflare-tunnel-manual-cli) below for what the tunnel script does, and [Automate Localhost Access for Expo](https://abp.io/community/articles/automate-localhost-access-for-expo-a-guide-to-dynamic-7cblqtj3) for architecture details and troubleshooting. @@ -86,7 +86,7 @@ See [Cloudflare tunnel (manual CLI)](#cloudflare-tunnel-manual-cli) below for wh {{ else }} -> **Note:** The **MobileEmulator** running profile is not included in the microservice template. Follow [Manual Backend Configuration](./manual-backend-configuration.md) and the [manual CLI steps](#manual-cli-without-mobileemulator-profile) below. +> **Note:** The **MobileEmulator** run profile is not included in the microservice template. Follow [Manual Backend Configuration](./manual-backend-configuration.md) and the [manual CLI steps](#manual-cli-without-mobileemulator-profile) below. {{ end }} @@ -182,10 +182,12 @@ If you are not using the **MobileEmulator** profile, prefer the [Cloudflare tunn > The React Native application was generated with [Expo](https://expo.io/). Expo is a set of tools built around React Native to help you quickly start an app, and it includes many features. -React Native app demo +Expo CLI showing QR code and platform launch options You can start the application on an Android emulator, an iOS simulator, or a physical phone by scanning the QR code or by choosing the corresponding option in the Expo CLI. +Enter **admin** as the username and **1q2w3E\*** as the password to log in to the application. + ### Android Studio 1. Start the emulator in **Android Studio** before running `yarn start`, `yarn android`, or `npm start`. @@ -193,4 +195,4 @@ You can start the application on an Android emulator, an iOS simulator, or a phy ### iOS Simulator -Enter **admin** as the username and **1q2w3E** as the password to log in to the application. +1. Press **i** in the Expo CLI to open the iOS simulator (macOS only). diff --git a/docs/en/framework/ui/react-native/running-on-web.md b/docs/en/framework/ui/react-native/running-on-web.md index 9607e6a901..60286f51af 100644 --- a/docs/en/framework/ui/react-native/running-on-web.md +++ b/docs/en/framework/ui/react-native/running-on-web.md @@ -68,7 +68,7 @@ Run the **Initialize Solution** task from the **Tasks** tab if you have not alre ### Start the Default profile -When you start the **Default** profile, ABP Studio runs these main application: +When you start the **Default** profile, ABP Studio runs these main applications: 1. The backend host 2. **ReactNative.LocalSslProxy** — terminates HTTPS on **`https://localhost:8443`** and forwards to Expo Web on port `8081` @@ -82,7 +82,7 @@ The solution template already adds `https://localhost:8443` to backend **CorsOri {{ end }} -You can enter **admin** as the username and **1q2w3E** as the password to log in. +You can enter **admin** as the username and **1q2w3E\*** as the password to log in. ## Manual setup (without ABP Studio) @@ -107,9 +107,9 @@ yarn web npx local-ssl-proxy --source 8443 --target 8081 --cert localhost.pem --key localhost-key.pem ``` -Alternatively, run `yarn create:local-proxy` and set `SOURCE_PORT=8443` if your template uses a different default port since it is safer. +Alternatively, run `yarn create:local-proxy` and set `SOURCE_PORT=8443` if your template uses a different default port. -5. Open **`https://localhost:8443`** in your browser. +1. Open **`https://localhost:8443`** in your browser. ## Next steps diff --git a/docs/en/tutorials/mobile/react-native/index.md b/docs/en/tutorials/mobile/react-native/index.md index 859c8b91a5..db41615d98 100644 --- a/docs/en/tutorials/mobile/react-native/index.md +++ b/docs/en/tutorials/mobile/react-native/index.md @@ -24,7 +24,7 @@ Before implementing UI changes, run the `Acme.BookStore` mobile application and 1. Open the solution in **ABP Studio** and run the **Initialize Solution** task once (creates SSL certificates and other one-time setup). 2. For browser testing, follow [Running on Web](../../../framework/ui/react-native/running-on-web.md) — start the **Default** run profile; ABP Studio opens the app at **`https://localhost:8443`**. -3. For an Android emulator or iOS simulator, follow [Running on Device](../../../framework/ui/react-native/running-on-device.md) — switch to the **MobileEmulator** run profile, update `react-native/Environment.ts`, and start the profile (or run `yarn tunnel:api` manually). +3. For an Android emulator or iOS simulator, follow [Running on Device](../../../framework/ui/react-native/running-on-device.md). The sample is a **Pro, non-tiered Monolith** solution — switch to the **MobileEmulator** run profile, update `react-native/Environment.ts`, and start the profile (or run `yarn tunnel:api` manually). For **Tiered** or **Microservice** solutions, use the manual backend steps in that guide instead. See the [React Native overview](../../../framework/ui/react-native/index.md) for environment setup and project creation.