Normalize Markdown in several docs: corrected code fence markers, fixed mismatched/backticked bold items and list formatting, removed stray dashes and extra whitespace, and standardized image placeholders. Files updated: docs/en/cli/index.md (fix command list/backtick issues and trailing newlines), docs/en/framework/ui/mvc-razor-pages/overall.md (fix code fences, list markers, and image text), and docs/en/framework/ui/react-native/index.md (normalize code fences, image placeholders, CLI notes, ports/examples formatting, and a password escaping fix). These are formatting-only changes to improve consistency and rendering.
While each command may have a set of options, there are some global options that can be used with any command:
- `--skip-cli-version-check` or `-scvc`: Skips checking the latest version of the ABP CLI. If you don't specify, it will check the latest version and shows a warning message if there is a newer version of the ABP CLI.
- `--skip-extension-version-check` or `-sevc`: Skips checking the latest version of the ABP CLI extensions. If you don't specify, it will check the latest version and download the latest version if there is a newer version of the ABP CLI extensions.
- `--old`: ABP CLI has two variations: `Volo.Abp.Studio.Cli` and `Volo.Abp.Cli`. New features/templates are added to the `Volo.Abp.Studio.Cli`. But if you want to use the old version, you can use this option **at the end of your commands**. For example, `abp new Acme.BookStore --old`.
- `--help` or `-h`: Shows help for the specified command.
@ -39,7 +37,7 @@ While each command may have a set of options, there are some global options that
Here is the list of all available commands before explaining their details:
- `**[help](../cli#help)`**: Shows help on the usage of the ABP CLI.
- `**[cli](../cli#cli)**`: Update or remove ABP CLI.
- `**[cli](../cli#cli)`**: Update or remove ABP CLI.
- `**[new](../cli#new)**`: Generates a new solution based on the ABP [startup templates](../solution-templates/index.md). Use `--modern` to create solutions with the modern template system (React UI).
- `**[new-module](../cli#new-module)**`: Generates a new module based on the given template.
- `**[new-package](../cli#new-package)**`: Generates a new package based on the given template.
@ -55,9 +53,9 @@ Here is the list of all available commands before explaining their details:
- `**[add-source-code](../cli#add-source-code)**`: Downloads the source code and replaces package references with project references.
- `**[init-solution](../cli#init-solution)**`: Creates ABP Studio configuration files for a given solution.
- `**[kube-intercept](../cli#kube-intercept)*`*: Intercepts a service running in Kubernetes environment. (*Available for* ***Business*** *or higher licenses*)
- `**[list-module-sources](../cli#list-module-sources)*`*: Lists the remote module sources.
- `**[add-module-source](../cli#add-module-source)**`: Adds a remote module source.
- `**[kube-intercept](../cli#kube-intercept)`**: Intercepts a service running in Kubernetes environment. (*Available for* ***Business*** *or higher licenses*)
- `**[list-module-sources](../cli#list-module-sources)`**: Lists the remote module sources.
- `**[add-module-source](../cli#add-module-source)*`*: Adds a remote module source.
- `**[delete-module-source](../cli#delete-module-source)**`: Deletes a remote module source.
- `**[generate-proxy](../cli#generate-proxy)**`: Generates client side proxies to use HTTP API endpoints.
- `**[remove-proxy](../cli#remove-proxy)**`: Removes previously generated client side proxies.
@ -141,8 +139,8 @@ For more samples, go to [ABP CLI Create Solution Samples](new-command-samples.md
#### Options
- `--template` or `-t`: Specifies the template name. Default template name is `app`, which generates a application solution. Available templates:
- `--ui-framework` or `-u`: Specifies the UI framework. Default framework is `mvc`. Available frameworks:
- `mvc`: ASP.NET Core MVC. There are some additional options for this template:
- `--tiered`: Creates a tiered solution where Web and Http API layers are physically separated. If not specified, it creates a layered solution which is less complex and suitable for most scenarios. (*Available for* ***Team*** *or higher licenses*)
@ -181,7 +179,7 @@ For more samples, go to [ABP CLI Create Solution Samples](new-command-samples.md
@ -17,8 +17,8 @@ ABP provides a convenient and comfortable way of creating web applications using
ASP.NET Core provides two models for UI development:
***[MVC (Model-View-Controller)](https://docs.microsoft.com/en-us/aspnet/core/mvc/)** is the classic way that exists from the version 1.0. This model can be used to create UI pages/components and HTTP APIs.
***[Razor Pages](https://docs.microsoft.com/en-us/aspnet/core/razor-pages/)** was introduced with the ASP.NET Core 2.0 as a new way to create web pages.
-**[MVC (Model-View-Controller)](https://docs.microsoft.com/en-us/aspnet/core/mvc/)** is the classic way that exists from the version 1.0. This model can be used to create UI pages/components and HTTP APIs.
-**[Razor Pages](https://docs.microsoft.com/en-us/aspnet/core/razor-pages/)** was introduced with the ASP.NET Core 2.0 as a new way to create web pages.
**ABP supports both** of the MVC and the Razor Pages models. However, it is suggested to create the **UI pages with Razor Pages** approach and use the **MVC model to build HTTP APIs**. So, all the pre-build modules, samples and the documentation is based on the Razor Pages for the UI development, while you can always apply the MVC pattern to create your own pages.
@ -32,18 +32,18 @@ The [application startup template](../../../solution-templates/application-modul
ABP provides a complete [Theming](theming.md) system with the following goals:
* Reusable [application modules](../../../modules) are developed **theme-independent**, so they can work with any UI theme.
* UI theme is **decided by the final application**.
* The theme is distributed via NuGet/NPM packages, so it is **easily upgradable**.
* The final application can **customize** the selected theme.
- Reusable [application modules](../../../modules) are developed **theme-independent**, so they can work with any UI theme.
- UI theme is **decided by the final application**.
- The theme is distributed via NuGet/NPM packages, so it is **easily upgradable**.
- The final application can **customize** the selected theme.
### Current Themes
Currently, three themes are **officially provided**:
* The [Basic Theme](Basic-Theme.md) is the minimalist theme with the plain Bootstrap style. It is **open source and free**.
* The [Lepton Theme](https://abp.io/themes) is a **commercial** theme developed by the core ABP team and is a part of the [ABP](https://abp.io/) license.
* The [LeptonX Theme](https://x.leptontheme.com/) is a theme that has both [commercial](../../../ui-themes/lepton-x/mvc.md) and [lite](../../../ui-themes/lepton-x-lite/asp-net-core.md) choices.
- The [Basic Theme](Basic-Theme.md) is the minimalist theme with the plain Bootstrap style. It is **open source and free**.
- The [Lepton Theme](https://abp.io/themes) is a **commercial** theme developed by the core ABP team and is a part of the [ABP](https://abp.io/) license.
- The [LeptonX Theme](https://x.leptontheme.com/) is a theme that has both [commercial](../../../ui-themes/lepton-x/mvc.md) and [lite](../../../ui-themes/lepton-x-lite/asp-net-core.md) choices.
There are also some community-driven themes for the ABP (you can search on the web).
@ -72,7 +72,7 @@ You can use these libraries directly in your applications, without needing to ma
The themes provide the standard layouts. So, you have responsive layouts with the standard features already implemented. The screenshot below has taken from the Application Layout of the [Basic Theme](basic-theme.md):
Also, Client Side Package Management system offers a modular and consistent way of managing 3rd-party library dependencies.
@ -157,11 +157,11 @@ See the [Bundling & Minification](bundling-minification.md) and [Client Side Pac
ABP provides a lot of built-in solutions to common application requirements;
* [Widget System](widgets.md) can be used to create reusable widgets & create dashboards.
* [Page Alerts](page-alerts.md) makes it easy to show alerts to the user.
* [Modal Manager](modals.md) provides a simple way to build and use modals.
* [Data Tables](data-tables.md) integration makes straightforward to create data grids.
- [Widget System](widgets.md) can be used to create reusable widgets & create dashboards.
- [Page Alerts](page-alerts.md) makes it easy to show alerts to the user.
- [Modal Manager](modals.md) provides a simple way to build and use modals.
- [Data Tables](data-tables.md) integration makes straightforward to create data grids.
## Customization
There are a lot of ways to customize the theme and the UIs of the pre-built modules. You can override components, pages, static resources, bundles and more. See the [User Interface Customization Guide](customization-user-interface.md).
There are a lot of ways to customize the theme and the UIs of the pre-built modules. You can override components, pages, static resources, bundles and more. See the [User Interface Customization Guide](customization-user-interface.md).
The ABP platform provides a basic [React Native](https://reactnative.dev/) startup template to develop mobile applications **integrated with your ABP-based backends**.
@ -28,10 +28,9 @@ Please follow the steps below to prepare your development environment for React
2. **[Optional] Install Yarn:** You can install Yarn v1 (not v2) by following the instructions on [the installation page](https://classic.yarnpkg.com/en/docs/install). Yarn v1 provides a better developer experience compared to npm v6 and below. You can skip this step and use npm, which is built into Node.js.
3. **[Optional] Install VS Code:** [VS Code](https://code.visualstudio.com/) is a free, open-source IDE that works seamlessly with TypeScript. While you can use any IDE, including Visual Studio or Rider, VS Code typically provides the best developer experience for React Native projects.
4. **[Optional] Install an Emulator/Simulator:** If you want to test on Android emulators or iOS simulators (instead of using the Web View method), you'll need to install one of the following:
- **Android Studio & Emulator:** Install [Android Studio](https://developer.android.com/studio) and set up an Android Virtual Device (AVD) through the AVD Manager. You can follow the [Android Studio Emulator guide](https://docs.expo.dev/workflow/android-studio-emulator/) on expo.io documentation.
- **Xcode & iOS Simulator:** On macOS, install [Xcode](https://developer.apple.com/xcode/) from the App Store, which includes the iOS Simulator. You can follow the [iOS Simulator guide](https://docs.expo.dev/workflow/ios-simulator/) on expo.io documentation.
> **Note:** The Web View method (recommended for quick testing) doesn't require an emulator or simulator. If you prefer a CLI-based approach for Android, you can check the [setting up android emulator without android studio](setting-up-android-emulator.md) guide as an alternative.
- **Android Studio & Emulator:** Install [Android Studio](https://developer.android.com/studio) and set up an Android Virtual Device (AVD) through the AVD Manager. You can follow the [Android Studio Emulator guide](https://docs.expo.dev/workflow/android-studio-emulator/) on expo.io documentation.
- **Xcode & iOS Simulator:** On macOS, install [Xcode](https://developer.apple.com/xcode/) from the App Store, which includes the iOS Simulator. You can follow the [iOS Simulator guide](https://docs.expo.dev/workflow/ios-simulator/) on expo.io documentation.
> **Note:** The Web View method (recommended for quick testing) doesn't require an emulator or simulator. If you prefer a CLI-based approach for Android, you can check the [setting up android emulator without android studio](setting-up-android-emulator.md) guide as an alternative.
## How to Start a New React Native Project
@ -41,7 +40,7 @@ You have multiple options to initiate a new React Native project that works with
ABP Studio is the most convenient and flexible way to create a React Native application based on the ABP framework. Follow the [tool documentation](../../../studio) and select the option below:
@ -61,7 +60,6 @@ This command creates a solution containing an **Angular** or **MVC** project (de
Before running the React Native application, install the dependencies by running `yarn install` or `npm install` in the `react-native` directory.
### Web View (Recommended - Quickest Method)
The quickest way to test the application is by using the web view. While testing on a physical device is also supported, we recommend using [local HTTPS development](https://docs.expo.dev/guides/local-https-development/) as it requires fewer backend modifications.
@ -69,28 +67,21 @@ The quickest way to test the application is by using the web view. While testing
Follow these steps to set up the web view:
1. Navigate to the `react-native` directory and start the application by running:
```bash
```bash
yarn web
```
```
2. Generate SSL certificates by running the following command in a separate directory:
```bash
```bash
mkcert localhost
```
```
3. Set up the local proxy by running:
```bash
```bash
yarn create:local-proxy
```
```
The default port is `443`. To use a different port, specify the `SOURCE_PORT` environment variable:
```bash
SOURCE_PORT=8443 yarn create:local-proxy
```
4. If you changed the port in the previous step, update the `apiUrl` in `Environment.ts` accordingly.
5. Update the mobile application settings in the database and re-run the migrations. If you specified a custom port, ensure the port is updated in the configuration as well:
```json
```json
"OpenIddict": {
"Applications": {
"MyApplication_Mobile": {
@ -99,7 +90,7 @@ Follow these steps to set up the web view:
}
}
}
```
```
### Running on Emulator/Simulator
@ -111,17 +102,17 @@ If you prefer to test on an Android emulator or iOS simulator, you'll need to co
{{ if Architecture == "Monolith" }}
react native monolith environment local IP
{{ else if Architecture == "Tiered" }}
react native tiered environment local IP
> Make sure that `issuer` matches the running address of the `.AuthServer` project, `apiUrl` matches the running address of the `.HttpApi.Host` or `.Web` project.
{{ else }}
react native microservice environment local IP
> Make sure that `issuer` matches the running address of the `.AuthServer` project, `apiUrl` matches the running address of the `.AuthServer` project.
@ -131,22 +122,22 @@ If you prefer to test on an Android emulator or iOS simulator, you'll need to co
> 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.
In the image above, you can start the application on an Android emulator, an iOS simulator, or a physical phone by scanning the QR code with the [Expo Client](https://expo.io/tools#client) or by choosing the corresponding option.
### Expo
React Native login screen on iPhone 16
### Android Studio
1. Start the emulator in **Android Studio** before running the `yarn start` or `npm start` command.
2. Press **a** to open in Android Studio.
React Native login screen on Android Device
Enter **admin** as the username and **1q2w3E\*** as the password to log in to the application.
Enter **admin** as the username and **1q2w3E** as the password to log in to the application.
The application is up and running. You can continue to develop your application based on this startup template.
@ -172,11 +163,10 @@ A React Native application running on an Android emulator or a physical phone **
- 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": {
@ -191,11 +181,10 @@ A React Native application running on an Android emulator or a physical phone **
- 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": {
@ -207,9 +196,7 @@ A React Native application running on an Android emulator or a physical phone **
}
}
```
- Open the `appsettings.Development.json` file in the `.HttpApi.Host` folder. Add this configuration to accept global requests. Additionally, you need to configure the authentication server as mentioned above.
```json
{
"Kestrel": {
@ -230,10 +217,9 @@ A React Native application running on an Android emulator or a physical phone **
- 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": {
@ -248,9 +234,7 @@ A React Native application running on an Android emulator or a physical phone **
}
}
```
- 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, you need to apply the same process for all services you will use in the React Native application.
```json
{
"App": {
@ -271,9 +255,7 @@ A React Native application running on an Android emulator or a physical phone **
}
}
```
- Update the `appsettings.json` file in the `.IdentityService` folder. Replace the `localhost` configuration with your local IP address for the React Native application.
```json
{
//...
@ -292,9 +274,7 @@ A React Native application running on an Android emulator or a physical phone **
}
}
```
- Finally, update the mobile gateway configurations as follows:
Engincan VESKE
1 month ago