mirror of https://github.com/abpframework/abp.git
Volosoft Agent
4 months ago
committed by
GitHub
GitHub
16 changed files with 662 additions and 301 deletions
@ -0,0 +1,258 @@ |
|||
```json |
|||
//[doc-seo] |
|||
{ |
|||
"Description": "Configure your ABP backend for React Native emulator and device testing using local IP addresses and HTTP when Cloudflare tunnels are unavailable." |
|||
} |
|||
``` |
|||
|
|||
```json |
|||
//[doc-params] |
|||
{ |
|||
"Architecture": ["Monolith", "Tiered", "Microservice"] |
|||
} |
|||
``` |
|||
|
|||
```json |
|||
//[doc-nav] |
|||
{ |
|||
"Previous": { |
|||
"Name": "Running on Device", |
|||
"Path": "framework/ui/react-native/running-on-device" |
|||
} |
|||
} |
|||
``` |
|||
|
|||
# Manual Backend Configuration |
|||
|
|||
> **When to use this guide:** We recommend this fallback when you cannot use the [Cloudflare tunnel](./running-on-device.md#cloudflare-tunnel-manual-cli) workflow — for example, on **Tiered** or **Microservice** templates (which do not include `tunnel.js`), when corporate firewalls block `cloudflared`, or when developing fully offline. |
|||
|
|||
> **Prefer simpler options first:** |
|||
> |
|||
> - Browser testing → [Running on Web](./running-on-web.md) (no backend changes) |
|||
> - 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. |
|||
|
|||
{{ if Architecture == "Monolith" }} |
|||
|
|||
To disable the HTTPS-only settings of OpenIddict, open the `MyProjectNameHttpApiHostModule` project and add the following code block to the `PreConfigureServices` method: |
|||
|
|||
```csharp |
|||
#if DEBUG |
|||
PreConfigure<OpenIddictServerBuilder>(options => |
|||
{ |
|||
options.UseAspNetCore() |
|||
.DisableTransportSecurityRequirement(); |
|||
}); |
|||
#endif |
|||
``` |
|||
|
|||
{{ else if Architecture == "Tiered" }} |
|||
|
|||
To disable the HTTPS-only settings of OpenIddict, open the `MyProjectNameAuthServerModule` project and add the following code block to the `PreConfigureServices` method: |
|||
|
|||
```csharp |
|||
#if DEBUG |
|||
PreConfigure<OpenIddictServerBuilder>(options => |
|||
{ |
|||
options.UseAspNetCore() |
|||
.DisableTransportSecurityRequirement(); |
|||
}); |
|||
#endif |
|||
``` |
|||
|
|||
{{ end }} |
|||
|
|||
> **Important:** Before running the backend application, make sure you have completed the [database migration](../../../get-started?UI=NG&DB=EF&Tiered=No#create-the-database) if you are starting with a fresh database. |
|||
|
|||
A React Native application running on an Android emulator or a physical phone **cannot connect to the backend** on `localhost`. Bind the backend to `0.0.0.0` so it accepts requests from your local network, then update `Environment.ts` with your local IP address. |
|||
|
|||
{{ if Architecture == "Monolith" }} |
|||
|
|||
- Open the `appsettings.json` file in the `.DbMigrator` folder. Replace the `localhost` address in the `RootUrl` property with your local IP address. Then, run the database migrator. |
|||
- Open the `appsettings.Development.json` file in the `.HttpApi.Host` folder. Add this configuration to accept global requests for testing the React Native application in the development environment. |
|||
```json |
|||
{ |
|||
"Kestrel": { |
|||
"Endpoints": { |
|||
"Http": { |
|||
"Url": "http://0.0.0.0:44323" //replace with your host port |
|||
} |
|||
} |
|||
} |
|||
} |
|||
``` |
|||
|
|||
Update `react-native/Environment.ts` with your local IP address instead of `localhost`, then start Expo as described in [Running on Device](./running-on-device.md). |
|||
|
|||
{{ else if Architecture == "Tiered" }} |
|||
|
|||
- Open the `appsettings.json` file in the `.DbMigrator` folder. Replace the `localhost` address in the `RootUrl` property with your local IP address. Then, run the database migrator. |
|||
- Open the `appsettings.Development.json` file in the `.AuthServer` folder. Add this configuration to accept global requests for testing the React Native application in the development environment. |
|||
```json |
|||
{ |
|||
"Kestrel": { |
|||
"Endpoints": { |
|||
"Http": { |
|||
"Url": "http://0.0.0.0:44337" |
|||
} |
|||
} |
|||
} |
|||
} |
|||
``` |
|||
- Open the `appsettings.Development.json` file in the `.HttpApi.Host` folder. Add this configuration to accept global requests. Additionally, configure the authentication server as mentioned above. |
|||
```json |
|||
{ |
|||
"Kestrel": { |
|||
"Endpoints": { |
|||
"Http": { |
|||
"Url": "http://0.0.0.0:44389" //replace with your host port |
|||
} |
|||
} |
|||
}, |
|||
"AuthServer": { |
|||
"Authority": "http://192.168.1.37:44337/", //replace with your IP and authentication port |
|||
"MetaAddress": "http://192.168.1.37:44337/", |
|||
"RequireHttpsMetadata": false, |
|||
"Audience": "MyTieredProject" //replace with your application name |
|||
} |
|||
} |
|||
``` |
|||
|
|||
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" }} |
|||
|
|||
- Open the `appsettings.Development.json` file in the `.AuthServer` folder. Add this configuration to accept global requests for testing the React Native application in the development environment. |
|||
```json |
|||
{ |
|||
"App": { |
|||
"EnablePII": true |
|||
}, |
|||
"Kestrel": { |
|||
"Endpoints": { |
|||
"Http": { |
|||
"Url": "http://0.0.0.0:44319" |
|||
} |
|||
} |
|||
} |
|||
} |
|||
``` |
|||
- Open the `appsettings.Development.json` file in the `.AdministrationService` folder. Add this configuration to accept global requests for testing the React Native application in the development environment. You should also provide the authentication server configuration. Additionally, apply the same process for all services you will use in the React Native application. |
|||
```json |
|||
{ |
|||
"App": { |
|||
"EnablePII": true |
|||
}, |
|||
"Kestrel": { |
|||
"Endpoints": { |
|||
"Http": { |
|||
"Url": "http://0.0.0.0:44357" |
|||
} |
|||
} |
|||
}, |
|||
"AuthServer": { |
|||
"Authority": "http://192.168.1.36:44319/", |
|||
"MetaAddress": "http://192.168.1.36:44319/", |
|||
"RequireHttpsMetadata": false, |
|||
"Audience": "AdministrationService" |
|||
} |
|||
} |
|||
``` |
|||
- Update the `appsettings.json` file in the `.IdentityService` folder. Replace the `localhost` configuration with your local IP address for the React Native application. |
|||
```json |
|||
{ |
|||
//... |
|||
"OpenIddict": { |
|||
"Applications": { |
|||
//... |
|||
"ReactNative": { |
|||
"RootUrl": "exp://192.168.1.36:19000" |
|||
}, |
|||
"MobileGateway": { |
|||
"RootUrl": "http://192.168.1.36:44347/" |
|||
} |
|||
//... |
|||
} |
|||
//... |
|||
} |
|||
} |
|||
``` |
|||
- Finally, update the mobile gateway configurations as follows: |
|||
```json |
|||
//gateways/mobile/MyMicroserviceProject.MobileGateway/Properties/launchSettings.json |
|||
{ |
|||
"iisSettings": { |
|||
"windowsAuthentication": false, |
|||
"anonymousAuthentication": true, |
|||
"iisExpress": { |
|||
"applicationUrl": "http://192.168.1.36:44347" //update with your IP address |
|||
} |
|||
}, |
|||
"profiles": { |
|||
//... |
|||
"MyMicroserviceProject.MobileGateway": { |
|||
"commandName": "Project", |
|||
"dotnetRunMessages": "true", |
|||
"launchBrowser": true, |
|||
"applicationUrl": "http://192.168.1.36:44347", |
|||
"environmentVariables": { |
|||
"ASPNETCORE_ENVIRONMENT": "Development" |
|||
} |
|||
} |
|||
} |
|||
} |
|||
``` |
|||
```json |
|||
//gateways/mobile/MyMicroserviceProject.MobileGateway/appsettings.json |
|||
{ |
|||
//Update clusters with your IP address |
|||
//... |
|||
"ReverseProxy": { |
|||
//... |
|||
"Clusters": { |
|||
"AuthServer": { |
|||
"Destinations": { |
|||
"AuthServer": { |
|||
"Address": "http://192.168.1.36:44319/" |
|||
} |
|||
} |
|||
}, |
|||
"Administration": { |
|||
"Destinations": { |
|||
"Administration": { |
|||
"Address": "http://192.168.1.36:44357/" |
|||
} |
|||
} |
|||
}, |
|||
"Saas": { |
|||
"Destinations": { |
|||
"Saas": { |
|||
"Address": "http://192.168.1.36:44330/" |
|||
} |
|||
} |
|||
}, |
|||
"Identity": { |
|||
"Destinations": { |
|||
"Identity": { |
|||
"Address": "http://192.168.1.36:44397/" |
|||
} |
|||
} |
|||
}, |
|||
"Language": { |
|||
"Destinations": { |
|||
"Language": { |
|||
"Address": "http://192.168.1.36:44310/" |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
``` |
|||
|
|||
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 }} |
|||
|
|||
Run the backend application(s) as described in the [getting started document](../../../get-started). |
|||
@ -0,0 +1,201 @@ |
|||
```json |
|||
//[doc-seo] |
|||
{ |
|||
"Description": "Run your ABP React Native application on an Android emulator, iOS simulator, or physical device using ABP Studio or Cloudflare tunnel." |
|||
} |
|||
``` |
|||
|
|||
```json |
|||
//[doc-nav] |
|||
{ |
|||
"Previous": { |
|||
"Name": "Running on Web", |
|||
"Path": "framework/ui/react-native/running-on-web" |
|||
}, |
|||
"Next": { |
|||
"Name": "Manual Backend Configuration", |
|||
"Path": "framework/ui/react-native/manual-backend-configuration" |
|||
} |
|||
} |
|||
``` |
|||
|
|||
```json |
|||
//[doc-params] |
|||
{ |
|||
"Architecture": ["Monolith", "Tiered", "Microservice"] |
|||
} |
|||
``` |
|||
|
|||
# Running on a Device |
|||
|
|||
You can use this guide when you want to run the app on an **Android emulator**, **iOS simulator**, or **physical device** instead of in the browser. |
|||
|
|||
For browser testing, see [Running on Web](./running-on-web.md). |
|||
|
|||
## Prerequisites |
|||
|
|||
1. Install dependencies in the React Native project folder: |
|||
|
|||
{{ if Architecture == "Microservice" }} |
|||
|
|||
- `apps/mobile/react-native/` |
|||
|
|||
{{ else }} |
|||
|
|||
- `react-native/` |
|||
|
|||
{{ end }} |
|||
|
|||
2. Complete the [database migration](../../../get-started?UI=NG&DB=EF&Tiered=No#create-the-database) and ensure the backend host is running. |
|||
3. Set up an emulator or simulator if needed: |
|||
- **Android:** [Android Studio Emulator guide](https://docs.expo.dev/workflow/android-studio-emulator/) or [Setting Up Android Emulator Without Android Studio](./setting-up-android-emulator.md) |
|||
- **iOS (macOS):** [iOS Simulator guide](https://docs.expo.dev/workflow/ios-simulator/) |
|||
|
|||
{{ if Architecture == "Monolith" }} |
|||
|
|||
1. Install **cloudflared** before using the **MobileEmulator** profile or `yarn tunnel:api`. Follow Cloudflare's [Download and install cloudflared](https://developers.cloudflare.com/cloudflare-one/networks/connectors/cloudflare-tunnel/downloads/) guide. The template uses free Quick Tunnels (`*.trycloudflare.com`) and does not require a Cloudflare account or the remaining locally-managed tunnel steps in that document. |
|||
|
|||
{{ end }} |
|||
|
|||
## Using ABP Studio |
|||
|
|||
{{ if Architecture == "Monolith" }} |
|||
|
|||
### MobileEmulator profile (Recommended) |
|||
|
|||
**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 |
|||
3. **ReactNative** — runs `npx expo start --android` (change the `--android` flag to `--ios` in `MobileEmulator.abprun.json` or via the profile edit option in Solution Runner) |
|||
|
|||
Before the first run: |
|||
|
|||
1. [Install cloudflared](https://developers.cloudflare.com/cloudflare-one/networks/connectors/cloudflare-tunnel/downloads/) if you have not already (see [Prerequisites](#prerequisites)). |
|||
2. Switch to the **MobileEmulator** profile in the Solution Runner. |
|||
3. Open `react-native/Environment.ts` and follow the inline comments: **uncomment the tunnel configuration block** and **comment out the localhost constants**. |
|||
|
|||
Start an Android emulator (or connect a device), then start the **MobileEmulator** profile. |
|||
|
|||
<img src="../../../images/rn-mobileEmulator-profile.png" alt="ABP Studio Solution Runner with MobileEmulator profile selected" width="620" style="max-width:100%"> |
|||
|
|||
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. |
|||
|
|||
{{ else if Architecture == "Tiered" }} |
|||
|
|||
> **Note:** The **MobileEmulator** run profile is available only for **Pro, non-tiered** solutions. For tiered architectures, follow [Manual Backend Configuration](./manual-backend-configuration.md) and the [manual CLI steps](#manual-cli-without-mobileemulator-profile) below. |
|||
|
|||
{{ else }} |
|||
|
|||
> **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 }} |
|||
|
|||
## Cloudflare tunnel (manual CLI) |
|||
|
|||
{{ if Architecture == "Monolith" }} |
|||
|
|||
Non-tiered React Native templates ship with a Cloudflare tunnel automation script. The tunnel gives your mobile app a temporary **HTTPS** URL (for example `https://example.trycloudflare.com`) that forwards to your local backend — without reconfiguring Kestrel or OpenIddict over HTTP. |
|||
|
|||
> **Prerequisite:** Install **cloudflared** on your machine using Cloudflare's [Download and install cloudflared](https://developers.cloudflare.com/cloudflare-one/networks/connectors/cloudflare-tunnel/downloads/) guide before running `yarn tunnel:api` or the **MobileEmulator** profile. |
|||
|
|||
The template includes: |
|||
|
|||
| Item | Location | |
|||
| ------------------ | ------------------------------------------------------ | |
|||
| Tunnel script | `react-native/scripts/tunnel.js` | |
|||
| npm script | `yarn tunnel:api` (runs `node scripts/tunnel.js`) | |
|||
| Generated config | `react-native/tunnel-config.json` (created at runtime) | |
|||
| Environment switch | Inline comments in `react-native/Environment.ts` | |
|||
|
|||
When `tunnel.js` runs, it: |
|||
|
|||
1. Starts `cloudflared tunnel --url https://localhost:{api-port}` (port matches your backend host). |
|||
2. Captures the generated `*.trycloudflare.com` domain from the `cloudflared` output. |
|||
3. Writes `tunnel-config.json` and updates the fallback value in `Environment.ts`. |
|||
|
|||
### Steps |
|||
|
|||
1. **Switch `Environment.ts` to tunnel mode.** Open `react-native/Environment.ts` and follow the inline comments: |
|||
- **Uncomment** the tunnel configuration block (the block that reads `tunnel-config.json`). |
|||
- **Comment out** the localhost `apiUrl` / `appUrl` constants. |
|||
2. **Start the backend host** if it is not already running. |
|||
3. **Start the tunnel** from the `react-native` folder: |
|||
|
|||
```bash |
|||
yarn tunnel:api |
|||
``` |
|||
|
|||
Or: |
|||
|
|||
```bash |
|||
npm run tunnel:api |
|||
``` |
|||
|
|||
Wait until the script prints `✓ Tunnel domain saved`. |
|||
|
|||
4. **Start Expo** in a separate terminal: |
|||
|
|||
```bash |
|||
yarn start |
|||
``` |
|||
|
|||
5. Start your Android emulator, iOS simulator, or connect a physical device. |
|||
|
|||
> **With ABP Studio:** The **MobileEmulator** run profile performs steps 2–4 for you after you update `Environment.ts`. |
|||
|
|||
See [Automate Localhost Access for Expo](https://abp.io/community/articles/automate-localhost-access-for-expo-a-guide-to-dynamic-7cblqtj3) for OAuth redirect considerations, troubleshooting, and development-build guidance. |
|||
|
|||
If Cloudflare tunnels are unavailable, use [Manual Backend Configuration](./manual-backend-configuration.md) as a fallback. |
|||
|
|||
{{ else if Architecture == "Tiered" }} |
|||
|
|||
Tiered templates do not include `tunnel.js` or the `tunnel:api` script. Configure the backend using [Manual Backend Configuration](./manual-backend-configuration.md), or adapt the [Cloudflare tunnel guide](https://abp.io/community/articles/automate-localhost-access-for-expo-a-guide-to-dynamic-7cblqtj3) for your auth server and API host ports. |
|||
|
|||
{{ else }} |
|||
|
|||
Microservice templates do not include `tunnel.js` or the `tunnel:api` script. Configure the backend using [Manual Backend Configuration](./manual-backend-configuration.md), or adapt the [Cloudflare tunnel guide](https://abp.io/community/articles/automate-localhost-access-for-expo-a-guide-to-dynamic-7cblqtj3) for your auth server and mobile gateway ports. |
|||
|
|||
{{ end }} |
|||
|
|||
## Manual CLI (without MobileEmulator profile) |
|||
|
|||
{{ if Architecture == "Monolith" }} |
|||
|
|||
If you are not using the **MobileEmulator** profile, prefer the [Cloudflare tunnel workflow](#cloudflare-tunnel-manual-cli) above. Only use [Manual Backend Configuration](./manual-backend-configuration.md) when tunnels are unavailable. |
|||
|
|||
{{ else }} |
|||
|
|||
1. Configure the backend as described in [Manual Backend Configuration](./manual-backend-configuration.md). |
|||
2. Open the `Environment.ts` file in the React Native folder and replace the `localhost` address in the `apiUrl` and `issuer` properties with your local IP address: |
|||
|
|||
{{ if Architecture == "Tiered" }} |
|||
|
|||
> Make sure that `issuer` matches the running address of the `.AuthServer` project, and `apiUrl` matches the running address of the `.HttpApi.Host` or `.Web` project. |
|||
|
|||
{{ else }} |
|||
|
|||
> Make sure that `issuer` matches the running address of the `.AuthServer` project, and `apiUrl` matches the running address of the mobile gateway. |
|||
|
|||
{{ end }} |
|||
|
|||
1. Run `yarn start`, `yarn android`, or `yarn ios`. |
|||
|
|||
{{ end }} |
|||
|
|||
> 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. |
|||
|
|||
<img src="../../../images/rn-expo-qr.png" alt="Expo CLI showing QR code and platform launch options" width="520" style="max-width:100%"> |
|||
|
|||
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`. |
|||
2. Press **a** in the Expo CLI to open on Android. |
|||
|
|||
### iOS Simulator |
|||
|
|||
1. Press **i** in the Expo CLI to open the iOS simulator (macOS only). |
|||
@ -0,0 +1,116 @@ |
|||
```json |
|||
//[doc-seo] |
|||
{ |
|||
"Description": "Run your ABP React Native application in the browser using ABP Studio or Expo Web with local HTTPS." |
|||
} |
|||
``` |
|||
|
|||
```json |
|||
//[doc-params] |
|||
{ |
|||
"Architecture": ["Monolith", "Tiered", "Microservice"] |
|||
} |
|||
``` |
|||
|
|||
```json |
|||
//[doc-nav] |
|||
{ |
|||
"Previous": { |
|||
"Name": "Overview", |
|||
"Path": "framework/ui/react-native" |
|||
}, |
|||
"Next": { |
|||
"Name": "Running on Device", |
|||
"Path": "framework/ui/react-native/running-on-device" |
|||
} |
|||
} |
|||
``` |
|||
|
|||
# Running on Web |
|||
|
|||
Running the React Native app in a browser is the **fastest way to test** login, navigation, and API integrations. No emulator, Cloudflare tunnel, or manual backend configuration is required. |
|||
|
|||
## React Native project folder |
|||
|
|||
{{ if Architecture == "Microservice" }} |
|||
|
|||
- `apps/mobile/react-native/` |
|||
|
|||
{{ else }} |
|||
|
|||
- `react-native/` |
|||
|
|||
{{ end }} |
|||
|
|||
Install dependencies once with `yarn install` or `npm install` in that folder. |
|||
|
|||
## Using ABP Studio (Recommended) |
|||
|
|||
Solutions created with ABP Studio include a **Default** run profile in the [Solution Runner](../../../studio/running-applications). |
|||
|
|||
{{ if Architecture == "Monolith" }} |
|||
|
|||
<img src="../../../images/rn-default-profile.png" alt="React Native Default Profile" width="420" style="max-width:100%"> |
|||
|
|||
{{ else if Architecture == "Tiered" }} |
|||
|
|||
<img src="../../../images/rn-tiered-default-profile.png" alt="React Native Default Profile" width="420" style="max-width:100%"> |
|||
|
|||
{{ else }} |
|||
|
|||
<img src="../../../images/rn-microservice-default-profile.png" alt="React Native Default Profile" width="420" style="max-width:100%"> |
|||
|
|||
{{ end }} |
|||
|
|||
### One-time setup: Initialize Solution |
|||
|
|||
Run the **Initialize Solution** task from the **Tasks** tab if you have not already. For React Native solutions, this task also creates local SSL certificates (`localhost.pem` and `localhost-key.pem`) in the React Native folder using [mkcert](https://github.com/FiloSottile/mkcert). These certificates are required by the **Default** profile's local SSL proxy. |
|||
|
|||
### Start the Default profile |
|||
|
|||
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` |
|||
3. **ReactNative** — runs `npx expo start --web` and opens **`https://localhost:8443`** in your browser |
|||
|
|||
The solution template already adds `https://localhost:8443` to backend **CorsOrigins** and **RedirectAllowedUrls**, so no manual backend configuration is required. |
|||
|
|||
{{ if Architecture != "Microservice" }} |
|||
|
|||
<img src="../../../images/rn-web-studio.png" alt="React Native Web ABP Studio" width="520" style="max-width:100%"> |
|||
|
|||
{{ end }} |
|||
|
|||
You can enter **admin** as the username and **1q2w3E\*** as the password to log in. |
|||
|
|||
## Manual setup (without ABP Studio) |
|||
|
|||
If you are not using ABP Studio, use Expo Web with a local HTTPS proxy as described in the [Expo local HTTPS development guide](https://docs.expo.dev/guides/local-https-development/). |
|||
|
|||
1. Navigate to the React Native folder and install dependencies if you have not already. |
|||
2. Generate SSL certificates in the React Native folder: |
|||
|
|||
```bash |
|||
mkcert localhost |
|||
``` |
|||
|
|||
3. Start Expo Web: |
|||
|
|||
```bash |
|||
yarn web |
|||
``` |
|||
|
|||
4. In a separate terminal, start the local SSL proxy (port `8443` matches the ABP Studio Default profile): |
|||
|
|||
```bash |
|||
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. |
|||
|
|||
1. Open **`https://localhost:8443`** in your browser. |
|||
|
|||
## Next steps |
|||
|
|||
To test on an Android emulator, iOS simulator, or physical device, continue with [Running on Device](./running-on-device.md). |
|||
|
After Width: | Height: | Size: 631 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 47 KiB |
|
After Width: | Height: | Size: 42 KiB |
|
After Width: | Height: | Size: 126 KiB |
|
After Width: | Height: | Size: 42 KiB |
|
After Width: | Height: | Size: 29 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 57 KiB |
Loading…
Reference in new issue