From 350338380c25cf0a9f9b6a5348351df1a1eaf502 Mon Sep 17 00:00:00 2001 From: Engincan VESKE Date: Mon, 13 Apr 2026 14:14:12 +0300 Subject: [PATCH 1/8] docs: add --modern option and React UI support to CLI docs Made-with: Cursor --- docs/en/cli/index.md | 927 +++++++++++++++++++++++-------------------- 1 file changed, 493 insertions(+), 434 deletions(-) diff --git a/docs/en/cli/index.md b/docs/en/cli/index.md index bdbe9493b9d..fc64304bec1 100644 --- a/docs/en/cli/index.md +++ b/docs/en/cli/index.md @@ -13,69 +13,71 @@ ABP CLI (Command Line Interface) is a command line tool to perform some common o ABP CLI is a [dotnet global tool](https://docs.microsoft.com/en-us/dotnet/core/tools/global-tools). Install it using a command line window: -````bash +```bash dotnet tool install -g Volo.Abp.Studio.Cli -```` +``` To update an existing installation: -````bash +```bash dotnet tool update -g Volo.Abp.Studio.Cli -```` +``` ## Global Options 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-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. + +- `--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. ## Commands 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. -* **[`new`](../cli#new)**: Generates a new solution based on the ABP [startup templates](../solution-templates/index.md). -* **[`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. -* **[`update`](../cli#update)**: Automatically updates all ABP related NuGet and NPM packages in a solution. -* **[`clean`](../cli#clean)**: Deletes all `BIN` and `OBJ` folders in the current folder. -* **[`add-package`](../cli#add-package)**: Adds an ABP package to a project. -* **[`add-package-ref`](../cli#add-package-ref)**: Adds package to given project. -* **[`install-module`](../cli#install-module)**: Adds a [multi-package application module](../modules/index.md) to a given module. -* **[`install-local-module`](../cli#install-local-module)**: Installs a local module to given module. -* **[`list-modules`](../cli#list-modules)**: Lists names of application modules. -* **[`list-templates`](../cli#list-templates)**: Lists the names of available templates to create a solution. -* **[`get-source`](../cli#get-source)**: Downloads the source code of a module. -* **[`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-connect`](../cli#kube-connect)**: Connects to kubernetes environment. (*Available for* ***Business*** *or higher licenses*) -* **[`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. -* **[`switch-to-preview`](../cli#switch-to-preview)**: Switches to the latest preview version of the ABP. -* **[`switch-to-nightly`](../cli#switch-to-nightly)**: Switches to the latest [nightly builds](../release-info/nightly-builds.md) of the ABP related packages on a solution. -* **[`switch-to-stable`](../cli#switch-to-stable)**: Switches to the latest stable versions of the ABP related packages on a solution. -* **[`switch-to-local`](../cli#switch-to-local)**: Changes NuGet package references on a solution to local project references. -* **[`upgrade`](../cli#upgrade)**: It converts the application to use pro modules. -* **[`translate`](../cli#translate)**: Simplifies to translate localization files when you have multiple JSON [localization](../framework/fundamentals/localization.md) files in a source control repository. -* **[`login`](../cli#login)**: Authenticates on your computer with your [abp.io](https://abp.io/) username and password. -* **[`login-info`](../cli#login-info)**: Shows the current user's login information. -* **[`logout`](../cli#logout)**: Logouts from your computer if you've authenticated before. -* **[`bundle`](../cli#bundle)**: Generates script and style references for ABP Blazor and MAUI Blazor project. -* **[`install-libs`](../cli#install-libs)**: Install NPM Packages for MVC / Razor Pages and Blazor Server UI types. -* **[`clear-download-cache`](../cli#clear-download-cache)**: Clears the templates download cache. -* **[`check-extensions`](../cli#check-extensions)**: Checks the latest version of the ABP CLI extensions. -* **[`install-old-cli`](../cli#install-old-cli)**: Installs old ABP CLI. -* **[`mcp-studio`](../cli#mcp-studio)**: Starts ABP Studio MCP bridge for AI tools (requires ABP Studio running). -* **[`generate-razor-page`](../cli#generate-razor-page)**: Generates a page class that you can use it in the ASP NET Core pipeline to return an HTML page. -* **[`generate-jwks`](../cli#generate-jwks)**: Generates an RSA key pair (JWKS public key + PEM private key) for OpenIddict `private_key_jwt` client authentication. +- `**[help](../cli#help)`**: Shows help on the usage of the 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. +- `**[update](../cli#update)**`: Automatically updates all ABP related NuGet and NPM packages in a solution. +- `**[clean](../cli#clean)**`: Deletes all `BIN` and `OBJ` folders in the current folder. +- `**[add-package](../cli#add-package)**`: Adds an ABP package to a project. +- `**[add-package-ref](../cli#add-package-ref)**`: Adds package to given project. +- `**[install-module](../cli#install-module)**`: Adds a [multi-package application module](../modules/index.md) to a given module. +- `**[install-local-module](../cli#install-local-module)**`: Installs a local module to given module. +- `**[list-modules](../cli#list-modules)**`: Lists names of application modules. +- `**[list-templates](../cli#list-templates)**`: Lists the names of available templates to create a solution. +- `**[get-source](../cli#get-source)**`: Downloads the source code of a module. +- `**[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-connect](../cli#kube-connect)**`: Connects to kubernetes environment. (*Available for* ***Business*** *or higher licenses*) +- `**[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. +- `**[switch-to-preview](../cli#switch-to-preview)**`: Switches to the latest preview version of the ABP. +- `**[switch-to-nightly](../cli#switch-to-nightly)**`: Switches to the latest [nightly builds](../release-info/nightly-builds.md) of the ABP related packages on a solution. +- `**[switch-to-stable](../cli#switch-to-stable)**`: Switches to the latest stable versions of the ABP related packages on a solution. +- `**[switch-to-local](../cli#switch-to-local)**`: Changes NuGet package references on a solution to local project references. +- `**[upgrade](../cli#upgrade)**`: It converts the application to use pro modules. +- `**[translate](../cli#translate)**`: Simplifies to translate localization files when you have multiple JSON [localization](../framework/fundamentals/localization.md) files in a source control repository. +- `**[login](../cli#login)**`: Authenticates on your computer with your [abp.io](https://abp.io/) username and password. +- `**[login-info](../cli#login-info)**`: Shows the current user's login information. +- `**[logout](../cli#logout)**`: Logouts from your computer if you've authenticated before. +- `**[bundle](../cli#bundle)**`: Generates script and style references for ABP Blazor and MAUI Blazor project. +- `**[install-libs](../cli#install-libs)**`: Install NPM Packages for MVC / Razor Pages and Blazor Server UI types. +- `**[clear-download-cache](../cli#clear-download-cache)**`: Clears the templates download cache. +- `**[check-extensions](../cli#check-extensions)**`: Checks the latest version of the ABP CLI extensions. +- `**[install-old-cli](../cli#install-old-cli)**`: Installs old ABP CLI. +- `**[mcp-studio](../cli#mcp-studio)**`: Starts ABP Studio MCP bridge for AI tools (requires ABP Studio running). +- `**[generate-razor-page](../cli#generate-razor-page)**`: Generates a page class that you can use it in the ASP NET Core pipeline to return an HTML page. +- `**[generate-jwks](../cli#generate-jwks)**`: Generates an RSA key pair (JWKS public key + PEM private key) for OpenIddict `private_key_jwt` client authentication. ### help @@ -83,16 +85,16 @@ Shows basic usages of the ABP CLI. Usage: -````bash +```bash abp help [command-name] -```` +``` Examples: -````bash +```bash abp help # Shows a general help. abp help new # Shows help about the "new" command. -```` +``` ### cli @@ -100,20 +102,20 @@ Update or remove ABP CLI. Usage: -````bash +```bash abp cli [command-name] -```` +``` Examples: -````bash +```bash abp cli update abp cli update --preview abp cli update --version 1.0.0 abp cli remove abp cli check-version abp cli clear-cache -```` +``` ### new @@ -121,216 +123,274 @@ Generates a new solution based on the ABP [startup templates](../solution-templa Usage: -````bash +```bash abp new [options] -```` +``` Examples: -````bash +```bash abp new Acme.BookStore -```` +``` -* `Acme.BookStore` is the solution name here. -* Common convention is to name a solution is like *YourCompany.YourProject*. However, you can use different naming like *YourProject* (single level namespacing) or *YourCompany.YourProduct.YourModule* (three levels namespacing). +- `Acme.BookStore` is the solution name here. +- Common convention is to name a solution is like *YourCompany.YourProject*. However, you can use different naming like *YourProject* (single level namespacing) or *YourCompany.YourProduct.YourModule* (three levels namespacing). 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: - * **`empty`**: Empty solution template. - * **`app`**: Application template. Additional options: - * `--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*) - * `angular`: Angular UI. There are some additional options for this template: - * `--tiered`: The Auth Server project comes as a separate project and runs at a different endpoint. It separates the Auth Server from the API Host application. If not specified, you will have a single endpoint in the server side. (*Available for* ***Team*** *or higher licenses*) - * `--progressive-web-app` or `-pwa`: Specifies the project as Progressive Web Application. - * `blazor-webapp`: Blazor Web App UI. There are some additional options for this template: - * `--tiered`: The Auth Server and the API Host project comes as separate projects and run at different endpoints. It has 3 startup projects: *HttpApi.Host*, *AuthServer* and *Blazor* and and each runs on different endpoints. If not specified, you will have a single endpoint for your web project. - * `--progressive-web-app` or `-pwa`: Specifies the project as Progressive Web Application. - * `blazor`: Blazor UI. There are some additional options for this template: - * `--tiered`The Auth Server project comes as a separate project and runs at a different endpoint. It separates the Auth Server from the API Host application. If not specified, you will have a single endpoint in the server side. (*Available for* ***Team*** *or higher licenses*) - * `--progressive-web-app` or `-pwa`: Specifies the project as Progressive Web Application. - * `blazor-server`: Blazor Server UI. There are some additional options for this template: - * `--tiered`: The Auth Server and the API Host project comes as separate projects and run at different endpoints. It has 3 startup projects: *HttpApi.Host*, *AuthServer* and *Blazor* and and each runs on different endpoints. If not specified, you will have a single endpoint for your web project. (*Available for* ***Team*** *or higher licenses*) - * `maui-blazor`: Blazor Maui UI (*Available for* ***Team*** *or higher licenses*). There are some additional options for this template: - * `--tiered`: The Auth Server and the API Host project comes as separate projects and run at different endpoints. It has 3 startup projects: *HttpApi.Host*, *AuthServer* and *Blazor* and and each runs on different endpoints. If not specified, you will have a single endpoint for your web project. - * `no-ui`: Without UI. No front-end layer will be created. There are some additional options for this template: - * `--tiered`: The Auth Server project comes as a separate project and runs at a different endpoint. It separates the Auth Server from the API Host application. If not specified, you will have a single endpoint in the server side. (*Available for* ***Team*** *or higher licenses*) - * `--mobile` or `-m`: Specifies the mobile application framework. Default value is `none`. Available frameworks: - * `none`: Without any mobile application. - * `react-native`: React Native. This mobile option is only available for active **license owners**. - * `maui`: MAUI. This mobile option is only available for ABP. (*Available for* ***Team*** *or higher licenses*) - * `--database-provider` or `-d`: Specifies the database provider. Default provider is `ef`. Available providers: - * `ef`: Entity Framework Core. - * `mongodb`: MongoDB. - * `--connection-string` or `-cs`: Overwrites the default connection strings in all `appsettings.json` files. The default connection string is `Server=localhost;Database=MyProjectName;Trusted_Connection=True` for EF Core and it is configured to use the SQL Server. If you want to use the EF Core, but need to change the DBMS, you can change it as [described here](../framework/data/entity-framework-core/other-dbms.md) (after creating the solution). **Note:** When specifying the connection string, make sure to enclose it in double quotes, for example: `--connection-string "Server=localhost;Database=MyProjectName;Trusted_Connection=True"`. - * `--skip-migrations` or `-sm`: Skips the creating initial database migration step. - * `--skip-migrator` or `-smr`: Skips the run database migrator step. - * `--public-website`: Public Website is a front-facing website for describing your project, listing your products and doing SEO for marketing purposes. Users can login and register on your website with this website. This option is only included in PRO templates. - * `--without-cms-kit`: When you add a public website to your solution, it automatically includes the [CmsKit](./../modules/cms-kit-pro/index.md) module. If you don't want to include *CmsKit*, you can use this parameter. - * `--separate-tenant-schema`: Creates a different DbContext for tenant schema. If not specified, the tenant schema is shared with the host schema. This option is only included in PRO templates. - * `--sample-crud-page` or `-scp`: It adds the [BookStore](./../tutorials/book-store/index.md) sample to your solution. - * `--theme` or `-th`: Specifes the theme. Default theme is `leptonx`. Available themes: - * `leptonx`: LeptonX Theme. (*Available for* ***Team*** *or higher licenses*) - * `leptonx-lite`: LeptonX-Lite Theme. - * `basic`: Basic Theme. - * `--use-open-source-template`or `-uost`: Uses the open-source template. (*Available for* ***Team*** *or higher licenses*) - * **`app-nolayers`**: Single-layer application template. Additional options: - * `--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: - * `angular`: Angular UI. There are some additional options for this template: - * `blazor`: Blazor UI. There are some additional options for this template: - * `blazor-server`: Blazor Server UI. There are some additional options for this template: - * `no-ui`: Without UI. No front-end layer will be created. There are some additional options for this template: - * `--database-provider` or `-d`: Specifies the database provider. Default provider is `ef`. Available providers: - * `ef`: Entity Framework Core. - * `mongodb`: MongoDB. - * `--connection-string` or `-cs`: Overwrites the default connection strings in all `appsettings.json` files. The default connection string is `Server=localhost;Database=MyProjectName;Trusted_Connection=True` for EF Core and it is configured to use the SQL Server. If you want to use the EF Core, but need to change the DBMS, you can change it as [described here](../framework/data/entity-framework-core/other-dbms.md) (after creating the solution). **Note:** When specifying the connection string, make sure to enclose it in double quotes, for example: `--connection-string "Server=localhost;Database=MyProjectName;Trusted_Connection=True"`. - * `--skip-migrations` or `-sm`: Skips the creating initial database migration step. - * `--skip-migrator` or `-smr`: Skips the run database migrator step. - * `--sample-crud-page` or `-scp`: It adds the [BookStore](./../tutorials/book-store/index.md) sample to your solution. - * `--theme`: Specifes the theme. Default theme is `leptonx`. Available themes: - * `leptonx`: LeptonX Theme. (*Available for* ***Team*** *or higher licenses*) - * `leptonx-lite`: LeptonX-Lite Theme. - * `basic`: Basic Theme. - * `--use-open-source-template`or `-uost`: Uses the open-source template. (*Available for* ***Team*** *or higher licenses*) - * **`microservice`**: Microservice solution template (*Available for* ***Business*** *or higher licenses*). Additional options: - * `--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: - * `angular`: Angular UI. There are some additional options for this template: - * `blazor`: Blazor UI. There are some additional options for this template: - * `blazor-server`: Blazor Server UI. There are some additional options for this template: - * `maui-blazor`: Blazor Maui UI. There are some additional options for this template: - * `no-ui`: Without UI. No front-end layer will be created. There are some additional options for this template: - * `--mobile` or `-m`: Specifies the mobile application framework. Default value is `none`. Available frameworks: - * `none`: Without any mobile application. - * `react-native`: React Native. - * `maui`: MAUI. - * `--database-provider` or `-d`: Specifies the database provider. Default provider is `ef`. Available providers: - * `ef`: Entity Framework Core. - * `mongodb`: MongoDB. - * `--theme`: Specifes the theme. Default theme is `leptonx`. Available themes: - * `leptonx`: LeptonX Theme. - * `basic`: Basic Theme. - * `--public-website`: Public Website is a front-facing website for describing your project, listing your products and doing SEO for marketing purposes. Users can login and register on your website with this website. This option is only included in PRO templates. - * `--no-grafana-dashboard` or `-ngd`: Does not add example Grafana Dashboard to the solution. -* `--output-folder` or `-o`: Specifies the output folder. Default value is the current directory. -* `--local-framework-ref` or `-lfr`: Uses local projects references to the ABP framework instead of using the NuGet packages. It tries to find the paths from `ide-state.json`. The file is located at `%UserProfile%\.abp\studio\ui\ide-state.json` (for Windows) and `~/.abp/studio/ui/ide-state.json` (for MAC). -* `--create-solution-folder` or `-csf`: Specifies if the project will be in a new folder in the output folder or directly the output folder. -* `--database-management-system` or `-dbms`: Sets the database management system. Default is **SQL Server**. Supported DBMS's: - * `SqlServer` - * `MySQL` - * `PostgreSQL` - * `SQLite` (`app` & `app-nolayers`) - * `Oracle` (`app` & `app-nolayers`) - * `Oracle-Devart` (`app` & `app-nolayers`) -* `--dont-run-install-libs`: Skip installing client side packages. -* `--dont-run-bundling`: Skip bundling for Blazor packages. -* `--no-kubernetes-configuration` or `-nkc`: Skips the Kubernetes configuration files. -* `--no-social-logins` or `-nsl`: Skipts the social login configuration. -* `--no-tests` or `-ntp`: Does not add test projects. -* *Module Options*: You can skip some modules if you don't want to add them to your solution, or include if you want them (*Available for* ***Team*** *or higher licenses*). Available commands: - * `-no-saas`: Skips the Saas module. - * `-no-gdpr`: Skips the GDPR module. - * `-no-openiddict-admin-ui`: Skips the OpenIddict Admin UI module. - * `-no-audit-logging`: Skips the Audit Logging module. - * `-no-language-management`: Skips the Language Management module. - * `-no-text-template-management`: Skips the Text Template Management module. - * `-file-management`: Includes the File Management module. - * `-chat`: Includes the Chat module. -* `--legacy`: Generates a legacy solution. - * `trust-version`: Trusts the user's version and does not check if the version exists or not. If the template with the given version is found in the cache, it will be used, otherwise throws an exception. +- `--template` or `-t`: Specifies the template name. Default template name is `app`, which generates a application solution. Available templates: + - `**empty*`*: Empty solution template. + - `**app**`: Application template. Additional options: + - `--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*) + - `angular`: Angular UI. There are some additional options for this template: + - `--tiered`: The Auth Server project comes as a separate project and runs at a different endpoint. It separates the Auth Server from the API Host application. If not specified, you will have a single endpoint in the server side. (*Available for* ***Team*** *or higher licenses*) + - `--progressive-web-app` or `-pwa`: Specifies the project as Progressive Web Application. + - `blazor-webapp`: Blazor Web App UI. There are some additional options for this template: + - `--tiered`: The Auth Server and the API Host project comes as separate projects and run at different endpoints. It has 3 startup projects: *HttpApi.Host*, *AuthServer* and *Blazor* and and each runs on different endpoints. If not specified, you will have a single endpoint for your web project. + - `--progressive-web-app` or `-pwa`: Specifies the project as Progressive Web Application. + - `blazor`: Blazor UI. There are some additional options for this template: + - `--tiered`The Auth Server project comes as a separate project and runs at a different endpoint. It separates the Auth Server from the API Host application. If not specified, you will have a single endpoint in the server side. (*Available for* ***Team*** *or higher licenses*) + - `--progressive-web-app` or `-pwa`: Specifies the project as Progressive Web Application. + - `blazor-server`: Blazor Server UI. There are some additional options for this template: + - `--tiered`: The Auth Server and the API Host project comes as separate projects and run at different endpoints. It has 3 startup projects: *HttpApi.Host*, *AuthServer* and *Blazor* and and each runs on different endpoints. If not specified, you will have a single endpoint for your web project. (*Available for* ***Team*** *or higher licenses*) + - `maui-blazor`: Blazor Maui UI (*Available for* ***Team*** *or higher licenses*). There are some additional options for this template: + - `--tiered`: The Auth Server and the API Host project comes as separate projects and run at different endpoints. It has 3 startup projects: *HttpApi.Host*, *AuthServer* and *Blazor* and and each runs on different endpoints. If not specified, you will have a single endpoint for your web project. + - `react`: React SPA UI. Only available when `--modern` flag is used. See [Modern Templates](#modern-templates) below. + - `no-ui`: Without UI. No front-end layer will be created. There are some additional options for this template: + - `--tiered`: The Auth Server project comes as a separate project and runs at a different endpoint. It separates the Auth Server from the API Host application. If not specified, you will have a single endpoint in the server side. (*Available for* ***Team*** *or higher licenses*) + - `--mobile` or `-m`: Specifies the mobile application framework. Default value is `none`. Available frameworks: + - `none`: Without any mobile application. + - `react-native`: React Native. This mobile option is only available for active **license owners**. + - `maui`: MAUI. This mobile option is only available for ABP. (*Available for* ***Team*** *or higher licenses*). Not supported with `--modern`. + - `--database-provider` or `-d`: Specifies the database provider. Default provider is `ef`. Available providers: + - `ef`: Entity Framework Core. + - `mongodb`: MongoDB. + - `--connection-string` or `-cs`: Overwrites the default connection strings in all `appsettings.json` files. The default connection string is `Server=localhost;Database=MyProjectName;Trusted_Connection=True` for EF Core and it is configured to use the SQL Server. If you want to use the EF Core, but need to change the DBMS, you can change it as [described here](../framework/data/entity-framework-core/other-dbms.md) (after creating the solution). **Note:** When specifying the connection string, make sure to enclose it in double quotes, for example: `--connection-string "Server=localhost;Database=MyProjectName;Trusted_Connection=True"`. + - `--skip-migrations` or `-sm`: Skips the creating initial database migration step. + - `--skip-migrator` or `-smr`: Skips the run database migrator step. + - `--public-website`: Public Website is a front-facing website for describing your project, listing your products and doing SEO for marketing purposes. Users can login and register on your website with this website. This option is only included in PRO templates. + - `--without-cms-kit`: When you add a public website to your solution, it automatically includes the [CmsKit](./../modules/cms-kit-pro/index.md) module. If you don't want to include *CmsKit*, you can use this parameter. + - `--separate-tenant-schema`: Creates a different DbContext for tenant schema. If not specified, the tenant schema is shared with the host schema. This option is only included in PRO templates. + - `--sample-crud-page` or `-scp`: It adds the [BookStore](./../tutorials/book-store/index.md) sample to your solution. + - `--theme` or `-th`: Specifes the theme. Default theme is `leptonx`. Available themes: + - `leptonx`: LeptonX Theme. (*Available for* ***Team*** *or higher licenses*) + - `leptonx-lite`: LeptonX-Lite Theme. + - `basic`: Basic Theme. + - `--use-open-source-template`or `-uost`: Uses the open-source template. (*Available for* ***Team*** *or higher licenses*) + - `**app-nolayers*`*: Single-layer application template. Additional options: + - `--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: + - `angular`: Angular UI. There are some additional options for this template: + - `blazor`: Blazor UI. There are some additional options for this template: + - `blazor-server`: Blazor Server UI. There are some additional options for this template: + - `react`: React SPA UI. Only available when `--modern` flag is used. See [Modern Templates](#modern-templates) below. + - `no-ui`: Without UI. No front-end layer will be created. There are some additional options for this template: + - `--database-provider` or `-d`: Specifies the database provider. Default provider is `ef`. Available providers: + - `ef`: Entity Framework Core. + - `mongodb`: MongoDB. + - `--connection-string` or `-cs`: Overwrites the default connection strings in all `appsettings.json` files. The default connection string is `Server=localhost;Database=MyProjectName;Trusted_Connection=True` for EF Core and it is configured to use the SQL Server. If you want to use the EF Core, but need to change the DBMS, you can change it as [described here](../framework/data/entity-framework-core/other-dbms.md) (after creating the solution). **Note:** When specifying the connection string, make sure to enclose it in double quotes, for example: `--connection-string "Server=localhost;Database=MyProjectName;Trusted_Connection=True"`. + - `--skip-migrations` or `-sm`: Skips the creating initial database migration step. + - `--skip-migrator` or `-smr`: Skips the run database migrator step. + - `--sample-crud-page` or `-scp`: It adds the [BookStore](./../tutorials/book-store/index.md) sample to your solution. + - `--theme`: Specifes the theme. Default theme is `leptonx`. Available themes: + - `leptonx`: LeptonX Theme. (*Available for* ***Team*** *or higher licenses*) + - `leptonx-lite`: LeptonX-Lite Theme. + - `basic`: Basic Theme. + - `--use-open-source-template`or `-uost`: Uses the open-source template. (*Available for* ***Team*** *or higher licenses*) + - `**microservice`**: Microservice solution template (*Available for* ***Business*** *or higher licenses*). Additional options: + - `--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: + - `angular`: Angular UI. There are some additional options for this template: + - `blazor`: Blazor UI. There are some additional options for this template: + - `blazor-server`: Blazor Server UI. There are some additional options for this template: + - `maui-blazor`: Blazor Maui UI. There are some additional options for this template: + - `react`: React SPA + React Admin Console. Only available when `--modern` flag is used. See [Modern Templates](#modern-templates) below. + - `no-ui`: Without UI. No front-end layer will be created. There are some additional options for this template: + - `--mobile` or `-m`: Specifies the mobile application framework. Default value is `none`. Available frameworks: + - `none`: Without any mobile application. + - `react-native`: React Native. + - `maui`: MAUI. Not supported with `--modern`. + - `--database-provider` or `-d`: Specifies the database provider. Default provider is `ef`. Available providers: + - `ef`: Entity Framework Core. + - `mongodb`: MongoDB. + - `--theme`: Specifes the theme. Default theme is `leptonx`. Available themes: + - `leptonx`: LeptonX Theme. + - `basic`: Basic Theme. + - `--public-website`: Public Website is a front-facing website for describing your project, listing your products and doing SEO for marketing purposes. Users can login and register on your website with this website. This option is only included in PRO templates. + - `--no-grafana-dashboard` or `-ngd`: Does not add example Grafana Dashboard to the solution. +- `--modern`: Uses the modern variant of the selected template. Modern templates are React-first and use a different template source shipped with ABP Studio, instead of NuGet extension packages. See [Modern Templates](#modern-templates) below. +- `--output-folder` or `-o`: Specifies the output folder. Default value is the current directory. +- `--local-framework-ref` or `-lfr`: Uses local projects references to the ABP framework instead of using the NuGet packages. It tries to find the paths from `ide-state.json`. The file is located at `%UserProfile%\.abp\studio\ui\ide-state.json` (for Windows) and `~/.abp/studio/ui/ide-state.json` (for MAC). +- `--create-solution-folder` or `-csf`: Specifies if the project will be in a new folder in the output folder or directly the output folder. +- `--database-management-system` or `-dbms`: Sets the database management system. Default is **SQL Server**. Supported DBMS's: + - `SqlServer` + - `MySQL` + - `PostgreSQL` + - `SQLite` (`app` & `app-nolayers`) + - `Oracle` (`app` & `app-nolayers`) + - `Oracle-Devart` (`app` & `app-nolayers`) +- `--dont-run-install-libs`: Skip installing client side packages. +- `--dont-run-bundling`: Skip bundling for Blazor packages. +- `--no-kubernetes-configuration` or `-nkc`: Skips the Kubernetes configuration files. +- `--no-social-logins` or `-nsl`: Skipts the social login configuration. +- `--no-multi-tenancy`: Disables multi-tenancy support in the generated solution. +- `--no-tests` or `-ntp`: Does not add test projects. +- *Module Options*: You can skip some modules if you don't want to add them to your solution, or include if you want them (*Available for* ***Team*** *or higher licenses*). Available commands: + - `-no-saas`: Skips the Saas module. + - `-no-gdpr`: Skips the GDPR module. + - `-no-openiddict-admin-ui`: Skips the OpenIddict Admin UI module. + - `-no-audit-logging`: Skips the Audit Logging module. + - `-no-language-management`: Skips the Language Management module. + - `-no-text-template-management`: Skips the Text Template Management module. + - `-file-management`: Includes the File Management module. + - `-chat`: Includes the Chat module. + - `--ai-management`: Includes the AI Management module. + - `--ai-providers`: Specifies AI providers (comma-separated). Available values: `Ollama`, `OpenAI`. Requires `--ai-management`. +- `--legacy`: Generates a legacy solution. + - `trust-version`: Trusts the user's version and does not check if the version exists or not. If the template with the given version is found in the cache, it will be used, otherwise throws an exception. + +#### Modern Templates + +Add `--modern` to any template to use its modern variant. Modern templates use a different template source (shipped with ABP Studio) compared to legacy templates (which use NuGet extension packages). They are **React-first** and have a narrower set of supported options. +```bash +abp new Acme.BookStore --template app --modern +abp new Acme.BookStore --template app-nolayers --modern +abp new Acme.BookStore --template microservice --modern +``` + + +| Template + `--modern` | UI Framework | Mobile | +| ----------------------- | ---------------------------------------------------------- | ------------------------ | +| `app --modern` | `react` (default) or `no-ui` | `none` or `react-native` | +| `app-nolayers --modern` | `react` (default) or `no-ui` | `none` or `react-native` | +| `microservice --modern` | `react` (default, includes React Admin Console) or `no-ui` | `none` or `react-native` | + + +> Blazor, Angular, MVC, and MAUI Blazor UI frameworks are **not** supported with `--modern`. The `maui` mobile option is also not supported with `--modern`. + +When using `--template microservice --modern`, the generated solution includes: + +- `apps/react/` — React SPA (main user-facing application) +- `apps/react-admin-console/` — React Admin Console (administration interface) +- `apps/auth-server/` — OpenIddict authentication server +- `gateways/web/` — YARP reverse proxy for the React apps +- `gateways/mobile/` — Gateway for mobile apps (only when `--mobile` is set) + +Two OpenIddict clients are automatically seeded: `MyProjectName_App` (React SPA) and `MyProjectName_AdminConsole` (React Admin Console). + +Examples: + +```bash +# Modern layered app with React UI +abp new Acme.BookStore --template app --modern + +# Modern single-layer app with React UI +abp new Acme.BookStore --template app-nolayers --modern + +# Modern microservice (React + React Admin Console) +abp new Acme.BookStore --template microservice --modern + +# Modern microservice with no UI +abp new Acme.BookStore --template microservice --modern --ui-framework no-ui + +# Modern microservice with PostgreSQL +abp new Acme.BookStore --template microservice --modern --database-management-system postgresql + +# Modern microservice with React Native mobile +abp new Acme.BookStore --template microservice --modern --mobile react-native +``` ### new-module Generates a new module. -````bash +```bash abp new-module [options] -```` +``` Examples: -````bash +```bash abp new-module Acme.BookStore -t module:ddd -```` +``` #### options -* `--template` or `-t`: Specifies the template name. Default template name is `module:ddd`, which generates a DDD module. Module templates are provided by the main template, see their own startup template documentation for available modules. `empty:empty` and `module:ddd` template is available for all solution structure. -* `--output-folder` or `-o`: Specifies the output folder. Default value is the current directory. -* `--target-solution` or `-ts`: If set, the new module will be added to the given solution. Otherwise the new module will added to the closest solution in the file system. If no solution found, it will throw an error. -* `--solution-folder` or `-sf`: Specifies the target folder in the [Solution Explorer](../studio/solution-explorer.md#folder) virtual folder system. -* `--database-provider` or `-d`: Specifies the database provider. Default provider is `ef`. This option is only available if the module template supports it. You can add multiple values separated by commas, such as `ef,mongodb` if the module template supports it. Available providers: - * `ef`: Entity Framework Core. - * `mongodb`: MongoDB. -* `--ui-framework` or `-u`: Specifies the UI framework. This option is only available if the module template supports it. You can add multiple values separated by commas, such as `mvc,angular` if the module template supports it. Available frameworks: - * `mvc`: ASP.NET Core MVC. - * `angular`: Angular UI. - * `blazor`: Blazor UI. - * `blazor-server`: Blazor Server UI. +- `--template` or `-t`: Specifies the template name. Default template name is `module:ddd`, which generates a DDD module. Module templates are provided by the main template, see their own startup template documentation for available modules. `empty:empty` and `module:ddd` template is available for all solution structure. +- `--output-folder` or `-o`: Specifies the output folder. Default value is the current directory. +- `--target-solution` or `-ts`: If set, the new module will be added to the given solution. Otherwise the new module will added to the closest solution in the file system. If no solution found, it will throw an error. +- `--solution-folder` or `-sf`: Specifies the target folder in the [Solution Explorer](../studio/solution-explorer.md#folder) virtual folder system. +- `--database-provider` or `-d`: Specifies the database provider. Default provider is `ef`. This option is only available if the module template supports it. You can add multiple values separated by commas, such as `ef,mongodb` if the module template supports it. Available providers: + - `ef`: Entity Framework Core. + - `mongodb`: MongoDB. +- `--ui-framework` or `-u`: Specifies the UI framework. This option is only available if the module template supports it. You can add multiple values separated by commas, such as `mvc,angular` if the module template supports it. Available frameworks: + - `mvc`: ASP.NET Core MVC. + - `angular`: Angular UI. + - `blazor`: Blazor UI. + - `blazor-server`: Blazor Server UI. ### new-package Generates a new package. -````bash +```bash abp new-package [options] -```` +``` Examples: -````bash +```bash abp new-package --name Acme.BookStore.Domain --template lib.domain -```` +``` #### options -* `--template` or `-t`: Specifies the template name. This parameter doesn't have a default value and must be set. Available templates and their sub-options: - * `lib.class-library` - * `lib.domain-shared` - * `--add-localization`: Includes default localization configuration & language files. - * `lib.domain` - * `--add-settings`: Includes default settings configuration. - * `--add-db-properties`: Includes the default Database Properties class. - * `--add-domain-shared`: Includes an additional Domain Shared package. - * `lib.application-contracts` - * `lib.application` - * `--add-mapperly`: Adds Mapperly configuration. - * `--add-application-contracts`: Includes an additional contracts package. - * `lib.ef` - * `--include-migrations`: Allows migration operations on this package. - * `--connection-string-name`: Default value is the last part of the package's namespace (or package name simply). - * `--connection-string`: Connection string value. The default value is null. You can set it later. **Note:** When specifying the connection string, make sure to enclose it in double quotes, for example: `--connection-string "Server=localhost;Database=MyProjectName;Trusted_Connection=True"`. - * `lib.mongodb` - * `lib.http-api` - * `lib.http-api-client` - * `lib.mvc` - * `--add-mapperly`: Adds Mapperly configuration. - * `lib.blazor` - * `--add-mapperly`: Adds Mapperly configuration. - * `--add-menu-contributors`: Includes default menu contributors. - * `lib.blazor-wasm` - * `lib.blazor-server` - * `host.http-api` - * `--add-serilog`: Includes Serilog configuration. - * `--add-swagger`: Includes Swagger configuration. - * `host.mvc` - * `--add-serilog`: Includes Serilog configuration. - * `--add-swagger`: Includes Swagger configuration. - * `host.blazor-wasm` - * `--backend`: Name of the backend project in the module (not path). - * `host.blazor-server` - * `abp.console` - * `csharp.console` - * `csharp.library` -* `--module-file` or `-m`: If set, the new package will be added to the given module. Otherwise the new package will added to the closest module in the file system. If no module found, it will throw an error. -* `--name` or `-n`: Specifies the name of the package. If not set, a name based on the template type and module name will be generated. -* `--folder` or `-f`: Specifies the target folder in the target module's virtual folder system. +- `--template` or `-t`: Specifies the template name. This parameter doesn't have a default value and must be set. Available templates and their sub-options: + - `lib.class-library` + - `lib.domain-shared` + - `--add-localization`: Includes default localization configuration & language files. + - `lib.domain` + - `--add-settings`: Includes default settings configuration. + - `--add-db-properties`: Includes the default Database Properties class. + - `--add-domain-shared`: Includes an additional Domain Shared package. + - `lib.application-contracts` + - `lib.application` + - `--add-mapperly`: Adds Mapperly configuration. + - `--add-application-contracts`: Includes an additional contracts package. + - `lib.ef` + - `--include-migrations`: Allows migration operations on this package. + - `--connection-string-name`: Default value is the last part of the package's namespace (or package name simply). + - `--connection-string`: Connection string value. The default value is null. You can set it later. **Note:** When specifying the connection string, make sure to enclose it in double quotes, for example: `--connection-string "Server=localhost;Database=MyProjectName;Trusted_Connection=True"`. + - `lib.mongodb` + - `lib.http-api` + - `lib.http-api-client` + - `lib.mvc` + - `--add-mapperly`: Adds Mapperly configuration. + - `lib.blazor` + - `--add-mapperly`: Adds Mapperly configuration. + - `--add-menu-contributors`: Includes default menu contributors. + - `lib.blazor-wasm` + - `lib.blazor-server` + - `host.http-api` + - `--add-serilog`: Includes Serilog configuration. + - `--add-swagger`: Includes Swagger configuration. + - `host.mvc` + - `--add-serilog`: Includes Serilog configuration. + - `--add-swagger`: Includes Swagger configuration. + - `host.blazor-wasm` + - `--backend`: Name of the backend project in the module (not path). + - `host.blazor-server` + - `abp.console` + - `csharp.console` + - `csharp.library` +- `--module-file` or `-m`: If set, the new package will be added to the given module. Otherwise the new package will added to the closest module in the file system. If no module found, it will throw an error. +- `--name` or `-n`: Specifies the name of the package. If not set, a name based on the template type and module name will be generated. +- `--folder` or `-f`: Specifies the target folder in the target module's virtual folder system. ### update @@ -338,25 +398,25 @@ Updating all ABP related packages can be tedious since there are many packages o Usage: -````bash +```bash abp update [options] -```` +``` -* If you run in a directory with a .csproj file, it updates all ABP related packages of the project to the latest versions. -* If you run in a directory with a .sln file, it updates all ABP related packages of the all projects of the solution to the latest versions. -* If you run in a directory that contains multiple solutions in sub-folders, it can update all the solutions, including Angular projects. +- If you run in a directory with a .csproj file, it updates all ABP related packages of the project to the latest versions. +- If you run in a directory with a .sln file, it updates all ABP related packages of the all projects of the solution to the latest versions. +- If you run in a directory that contains multiple solutions in sub-folders, it can update all the solutions, including Angular projects. Note that this command can upgrade your solution from a previous version, and also can upgrade it from a preview release to the stable release of the same version. #### Options -* `--npm`: Only updates NPM packages. -* `--nuget`: Only updates NuGet packages. -* `--solution-path` or `-sp`: Specify the solution path. Use the current directory by default -* `--solution-name` or `-sn`: Specify the solution name. Search `*.sln` files in the directory by default. -* `--check-all`: Check the new version of each package separately. Default is `false`. -* `--version` or `-v`: Specifies the version to use for update. If not specified, latest version is used. -* `--leptonx-version` or `-lv`: Specifies the LeptonX version to use for update. If not specified, latest version or the version that is compatible with `--version` argument is used. +- `--npm`: Only updates NPM packages. +- `--nuget`: Only updates NuGet packages. +- `--solution-path` or `-sp`: Specify the solution path. Use the current directory by default +- `--solution-name` or `-sn`: Specify the solution name. Search `*.sln` files in the directory by default. +- `--check-all`: Check the new version of each package separately. Default is `false`. +- `--version` or `-v`: Specifies the version to use for update. If not specified, latest version is used. +- `--leptonx-version` or `-lv`: Specifies the LeptonX version to use for update. If not specified, latest version or the version that is compatible with `--version` argument is used. ### clean @@ -364,41 +424,41 @@ Deletes all `BIN` and `OBJ` folders in the current folder. Usage: -````bash +```bash abp clean -```` - +``` ### add-package Adds an ABP package to a project by, -* Adding related nuget package as a dependency to the project. -* Adding `[DependsOn(...)]` attribute to the module class in the project (see the [module development document](../framework/architecture/modularity/basics.md)). +- Adding related nuget package as a dependency to the project. +- Adding `[DependsOn(...)]` attribute to the module class in the project (see the [module development document](../framework/architecture/modularity/basics.md)). > Notice that the added module may require additional configuration which is generally indicated in the documentation of the related package. Basic usage: -````bash +```bash abp add-package [options] -```` +``` Examples: -````bash +```bash abp add-package Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic -```` +``` -* This example adds the `Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic` package to the project. +- This example adds the `Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic` package to the project. #### Options -* `--project` or `-p`: Specifies the project (.csproj) file path. If not specified, CLI tries to find a .csproj file in the current directory. -* `--with-source-code`: Downloads the source code of the package to your solution folder and uses local project references instead of NuGet/NPM packages. -* `--add-to-solution-file`: Adds the downloaded package to your solution file, so you will also see the package when you open the solution on a IDE. (only available when `--with-source-code` is True) +- `--project` or `-p`: Specifies the project (.csproj) file path. If not specified, CLI tries to find a .csproj file in the current directory. +- `--with-source-code`: Downloads the source code of the package to your solution folder and uses local project references instead of NuGet/NPM packages. +- `--add-to-solution-file`: Adds the downloaded package to your solution file, so you will also see the package when you open the solution on a IDE. (only available when `--with-source-code` is True) > Currently only the source code of the basic theme packages([MVC](../framework/ui/mvc-razor-pages/basic-theme.md) and [Blazor](../framework/ui/blazor/basic-theme.md)) can be downloaded. +> > - Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic > - Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme > - Volo.Abp.AspNetCore.Components.Web.BasicTheme @@ -408,61 +468,61 @@ abp add-package Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic Adds one or more package reference to target project, also adds ABP module dependency. Both reference and target projects must belong to same module. -````bash +```bash abp add-package-ref [options] -```` +``` Examples: -````bash +```bash abp add-package-ref Acme.BookStore.Domain abp add-package-ref "Acme.BookStore.Domain Acme.BookStore.Domain.Shared" -t Acme.BookStore.Web -```` +``` #### Options -* `--target-project` or `-t`: Name of the project that reference will be added. If not set, project in the current directory will be used. +- `--target-project` or `-t`: Name of the project that reference will be added. If not set, project in the current directory will be used. ### install-module Installs a module, that is published as nuget packages, to a local module. Project relations are created according the types of the projects. For Examples: a `lib.domain-shared` project is added to `lib.domain-shared` project -````bash +```bash abp install-module [options] -```` +``` Examples: -````bash +```bash abp install-module Volo.Blogging abp install-module Volo.Blogging -t "modules/crm/Acme.Crm.abpmdl" -```` +``` #### Options -* `--target-module` or `-t`: Path (or folder path) of the target module that the other module will be installed to. If not set, the closest module to the current directory will be used. -* `--version` or `-v`: Nuget version of the module to be installed. +- `--target-module` or `-t`: Path (or folder path) of the target module that the other module will be installed to. If not set, the closest module to the current directory will be used. +- `--version` or `-v`: Nuget version of the module to be installed. ### install-local-module Installs one module to another. Project relations are created according the types of the projects. For Examples: a `lib.domain-shared` project is added to `lib.domain-shared` project -````bash +```bash abp install-local-module [options] -```` +``` Examples: -````bash +```bash abp install-local-module Acme.OrderManagement abp install-local-module Acme.OrderManagement -t "modules/crm/Acme.Crm.abpmdl" -```` +``` #### Options -* `--target-module` or `-t`: Path (or folder path) of the target module that the other module will be installed to. If not set, the closest module to the current directory will be used. +- `--target-module` or `-t`: Path (or folder path) of the target module that the other module will be installed to. If not set, the closest module to the current directory will be used. ### list-modules @@ -470,9 +530,9 @@ Lists names of open-source application modules. Usage: -````bash +```bash abp list-modules [options] -```` +``` Examples: @@ -496,9 +556,9 @@ Downloads the source code of a module to your computer. Usage: -````bash +```bash abp get-source [options] -```` +``` Examples: @@ -510,118 +570,118 @@ abp get-source Volo.Blogging --local-framework-ref --abp-path D:\GitHub\abp #### Options -* `--output-folder` or `-o`: Specifies the directory that source code will be downloaded in. If not specified, current directory is used. -* `--version` or `-v`: Specifies the version of the source code that will be downloaded. If not specified, latest version is used. -* `--preview`: If no version option is specified, this option specifies if latest [preview version](../release-info/previews.md) will be used instead of latest stable version. -* `--local-framework-ref --abp-path`: Path of [ABP GitHub repository](https://github.com/abpframework/abp) in your computer. This will be used for converting project references to your local system. If this is not specified, project references will be converted to NuGet references. +- `--output-folder` or `-o`: Specifies the directory that source code will be downloaded in. If not specified, current directory is used. +- `--version` or `-v`: Specifies the version of the source code that will be downloaded. If not specified, latest version is used. +- `--preview`: If no version option is specified, this option specifies if latest [preview version](../release-info/previews.md) will be used instead of latest stable version. +- `--local-framework-ref --abp-path`: Path of [ABP GitHub repository](https://github.com/abpframework/abp) in your computer. This will be used for converting project references to your local system. If this is not specified, project references will be converted to NuGet references. ### add-source-code Downloads the source code of a module and replaces package references with project references. This command only works if your ABP Commercial License has source-code access, or if source-code of the target module is free to all type of ABP Commercial Licenses. -````bash +```bash abp add-source-code [options] -```` +``` Examples: -````bash +```bash abp add-source-code Volo.Chat --add-to-solution-file -```` +``` #### Options -* `--target-module` or `-t`: The module that will refer the downloaded source code. If not set, the module in the current directory will be used. -* `--add-to-solution-file`: Adds the downloaded source code to C# solution file and ABP Studio solution file. +- `--target-module` or `-t`: The module that will refer the downloaded source code. If not set, the module in the current directory will be used. +- `--add-to-solution-file`: Adds the downloaded source code to C# solution file and ABP Studio solution file. ### init-solution Creates necessary files for a solution to be readable by ABP Studio. If the solution is generated via ABP Studio, you don't need this command. But it is not generated by ABP Studio, you need this command to make it work with ABP Studio. -````bash +```bash abp init-solution [options] -```` +``` Examples: -````bash +```bash abp init-solution --name Acme.BookStore -```` +``` #### Options -* `--name` or `-n`: Name for the solution. If not set, it will be the same as the name of closest c# solution in the file system. +- `--name` or `-n`: Name for the solution. If not set, it will be the same as the name of closest c# solution in the file system. ### kube-connect Connects to Kubernetes cluster (*Available for* ***Business*** *or higher licenses*). Press `ctrl+c` to disconnect. -````bash +```bash abp kube-connect [options] -```` +``` Examples: -````bash +```bash abp kube-connect abp kube-connect -p Default.abpk8s.json abp kube-connect -c docker-desktop -ns mycrm-local -```` +``` #### Options -* `--profile` or `-p`: Kubernetes Profile path or name to be used. Path can be relative (to current directory) or full path, or you can simply give the name of profile if you run this command in same directory with the solution or profile. This parameter is not needed if you use `--namespace` and `--context` parameters. -* `--namespace` or `-ns`: The namespace that services running on. -* `--context` or `-c`: The context that services running in. -* `--wireguard-password` or `-wp`: Wireguard password for the profile. This is not needed if you already set it on the ABP Studio user interface. -* `--solution-path` or `-sp`: Path of the solution. If not set, the closest solution in file system will be used. +- `--profile` or `-p`: Kubernetes Profile path or name to be used. Path can be relative (to current directory) or full path, or you can simply give the name of profile if you run this command in same directory with the solution or profile. This parameter is not needed if you use `--namespace` and `--context` parameters. +- `--namespace` or `-ns`: The namespace that services running on. +- `--context` or `-c`: The context that services running in. +- `--wireguard-password` or `-wp`: Wireguard password for the profile. This is not needed if you already set it on the ABP Studio user interface. +- `--solution-path` or `-sp`: Path of the solution. If not set, the closest solution in file system will be used. ### kube-intercept Intercepts a service running in Kubernetes environment (*Available for* ***Business*** *or higher licenses*). Press `ctrl+c` to stop interception. -````bash +```bash abp kube-intercept [options] -```` +``` Examples: -````bash +```bash abp kube-intercept mycrm-product-service -ns mycrm-local abp kube-intercept mycrm-product-service -ns mycrm-local -a MyCrm.ProductService.HttpApi.Host.csproj abp kube-intercept mycrm-product-service -ns mycrm-local -a MyCrm.ProductService.HttpApi.Host.csproj -pm 8080:80,8081:443 -```` +``` #### Options -* `--application` or `-a`: Relative or full path of the project that will intercept the service. If not set, the project in the current directory will be used. -* `--namespace` or `-ns`: The namespace that service running on. -* `--context` or `-sc`: The context that service running in. Default value is `docker-desktop`. -* `--port-mappings` or `-pm`: Port mappings for the service. +- `--application` or `-a`: Relative or full path of the project that will intercept the service. If not set, the project in the current directory will be used. +- `--namespace` or `-ns`: The namespace that service running on. +- `--context` or `-sc`: The context that service running in. Default value is `docker-desktop`. +- `--port-mappings` or `-pm`: Port mappings for the service. ### list-module-sources With this command, you can see the list of remote module sources that you can use to install modules. It is similar to the NuGet feed list in Visual Studio. -````bash +```bash abp list-module-sources -```` +``` ### add-module-source Adds a remote module source to the list of sources that you can use to install modules. -````bash +```bash abp add-module-source [options] -```` +``` You can create your own module source and add it to the list. It accepts a name and a url or a path as parameter. If you provide a path, it should be a local path that contains the modules json file. If you provide a url, it should be a url that contains the modules json file. The json file should be in the following format: -````json +```json { "name": "ABP Open Source Modules", "modules" : { @@ -631,40 +691,40 @@ You can create your own module source and add it to the list. It accepts a name ... } } -```` +``` When you add a module source, you can install modules from that source using the `install-module` command. It attempts to find the package from NuGet, such as `Volo.Abp.Account.Installer`. You can configure a private NuGet feed and publish your modules to that feed. Each module has an installer package that is utilized to install the module into a solution. When you publish your module to a private feed, you should also publish the installer package to the same feed. Examples: -````bash +```bash abp add-module-source -n "Custom Source" -p "D:\packages\abp\modules.json" abp add-module-source -n "Custom Http Source" -p "https://raw.githubusercontent.com/x/abp-module-store/main/abp-module-store.json" -```` +``` #### Options -* `--name` or `-n`: The name of the module source. -* `--path` or `-p`: The path of the module source. It can be a local path or a url. +- `--name` or `-n`: The name of the module source. +- `--path` or `-p`: The path of the module source. It can be a local path or a url. ### delete-module-source Deletes a remote module source from the list of sources that you can use to install modules. -````bash +```bash abp delete-module-source [options] -```` +``` Examples: -````bash +```bash abp delete-module-source -n "Custom Source" -```` +``` #### Options -* `--name` or `-n`: The name of the module source. +- `--name` or `-n`: The name of the module source. ### generate-proxy @@ -672,39 +732,38 @@ Generates Angular, C# or JavaScript service proxies for your HTTP APIs to make e Usage: -````bash +```bash abp generate-proxy -t [options] -```` +``` Examples: -````bash +```bash abp generate-proxy -t ng -url https://localhost:44302/ abp generate-proxy -t js -url https://localhost:44302/ abp generate-proxy -t csharp -url https://localhost:44302/ -```` +``` #### Options -* `--type` or `-t`: The name of client type. Available clients: - * `csharp`: C#, work in the `*.HttpApi.Client` project directory. There are some additional options for this client: - * `--without-contracts`: Avoid generating the application service interface, class, enum and dto types. - * `--folder`: Folder name to place generated CSharp code in. Default value: `ClientProxies`. - * `ng`: Angular. There are some additional options for this client: - * `--api-name` or `-a`: The name of the API endpoint defined in the `/src/environments/environment.ts`. Default value: `default`. - * `--source` or `-s`: Specifies the Angular project name to resolve the root namespace & API definition URL from. Default value: `defaultProject`. - * `--target`: Specifies the Angular project name to place generated code in. Default value: `defaultProject`. - * `--module`: Backend module name. Default value: `app`. - * `--entry-point`: Targets the Angular project to place the generated code. - * `--url`: Specifies api definition url. Default value is API Name's url in environment file. - * `--prompt` or `-p`: Asks the options from the command line prompt (for the unspecified options). - - * `js`: JavaScript. work in the `*.Web` project directory. There are some additional options for this client: - * `--output` or `-o`: JavaScript file path or folder to place generated code in. -* `--module` or `-m`: Specifies the name of the backend module you wish to generate proxies for. Default value: `app`. -* `--working-directory` or `-wd`: Execution directory. For `csharp` and `js` client types. -* `--url` or `-u`: API definition URL from. -* `--service-type` or `-st`: Specifies the service type to generate. `application`, `integration` and `all`, Default value: `all` for C#, `application` for JavaScript / Angular. +- `--type` or `-t`: The name of client type. Available clients: + - `csharp`: C#, work in the `*.HttpApi.Client` project directory. There are some additional options for this client: + - `--without-contracts`: Avoid generating the application service interface, class, enum and dto types. + - `--folder`: Folder name to place generated CSharp code in. Default value: `ClientProxies`. + - `ng`: Angular. There are some additional options for this client: + - `--api-name` or `-a`: The name of the API endpoint defined in the `/src/environments/environment.ts`. Default value: `default`. + - `--source` or `-s`: Specifies the Angular project name to resolve the root namespace & API definition URL from. Default value: `defaultProject`. + - `--target`: Specifies the Angular project name to place generated code in. Default value: `defaultProject`. + - `--module`: Backend module name. Default value: `app`. + - `--entry-point`: Targets the Angular project to place the generated code. + - `--url`: Specifies api definition url. Default value is API Name's url in environment file. + - `--prompt` or `-p`: Asks the options from the command line prompt (for the unspecified options). + - `js`: JavaScript. work in the `*.Web` project directory. There are some additional options for this client: + - `--output` or `-o`: JavaScript file path or folder to place generated code in. +- `--module` or `-m`: Specifies the name of the backend module you wish to generate proxies for. Default value: `app`. +- `--working-directory` or `-wd`: Execution directory. For `csharp` and `js` client types. +- `--url` or `-u`: API definition URL from. +- `--service-type` or `-st`: Specifies the service type to generate. `application`, `integration` and `all`, Default value: `all` for C#, `application` for JavaScript / Angular. > See the [Angular Service Proxies document](../framework/ui/angular/service-proxies.md) for more. @@ -716,34 +775,34 @@ This can be especially useful when you generate proxies for multiple modules bef Usage: -````bash +```bash abp remove-proxy -t [options] -```` +``` Examples: -````bash +```bash abp remove-proxy -t ng abp remove-proxy -t js -m identity -o Pages/Identity/client-proxies.js abp remove-proxy -t csharp --folder MyProxies/InnerFolder -```` +``` #### Options -* `--type` or `-t`: The name of client type. Available clients: - * `csharp`: C#, work in the `*.HttpApi.Client` project directory. There are some additional options for this client: - * `--folder`: Folder name to place generated CSharp code in. Default value: `ClientProxies`. - * `ng`: Angular. There are some additional options for this client: - * `--api-name` or `-a`: The name of the API endpoint defined in the `/src/environments/environment.ts`. Default value: `default`. - * `--source` or `-s`: Specifies the Angular project name to resolve the root namespace & API definition URL from. Default value: `defaultProject`. - * `--target`: Specifies the Angular project name to place generated code in. Default value: `defaultProject`. - * `--url`: Specifies api definition url. Default value is API Name's url in environment file. - * `--prompt` or `-p`: Asks the options from the command line prompt (for the unspecified options). - * `js`: JavaScript. work in the `*.Web` project directory. There are some additional options for this client: - * `--output` or `-o`: JavaScript file path or folder to place generated code in. -* `--module` or `-m`: Specifies the name of the backend module you wish to generate proxies for. Default value: `app`. -* `--working-directory` or `-wd`: Execution directory. For `csharp` and `js` client types. -* `--url` or `-u`: API definition URL from. +- `--type` or `-t`: The name of client type. Available clients: + - `csharp`: C#, work in the `*.HttpApi.Client` project directory. There are some additional options for this client: + - `--folder`: Folder name to place generated CSharp code in. Default value: `ClientProxies`. + - `ng`: Angular. There are some additional options for this client: + - `--api-name` or `-a`: The name of the API endpoint defined in the `/src/environments/environment.ts`. Default value: `default`. + - `--source` or `-s`: Specifies the Angular project name to resolve the root namespace & API definition URL from. Default value: `defaultProject`. + - `--target`: Specifies the Angular project name to place generated code in. Default value: `defaultProject`. + - `--url`: Specifies api definition url. Default value is API Name's url in environment file. + - `--prompt` or `-p`: Asks the options from the command line prompt (for the unspecified options). + - `js`: JavaScript. work in the `*.Web` project directory. There are some additional options for this client: + - `--output` or `-o`: JavaScript file path or folder to place generated code in. +- `--module` or `-m`: Specifies the name of the backend module you wish to generate proxies for. Default value: `app`. +- `--working-directory` or `-wd`: Execution directory. For `csharp` and `js` client types. +- `--url` or `-u`: API definition URL from. > See the [Angular Service Proxies document](../framework/ui/angular/service-proxies.md) for more. @@ -753,14 +812,13 @@ You can use this command to switch your solution or project to latest preview ve Usage: -````bash +```bash abp switch-to-preview [options] -```` +``` #### Options -* `--directory` or `-d`: Specifies the directory. The solution or project should be in that directory or in any of its sub directories. If not specified, default is the current directory. - +- `--directory` or `-d`: Specifies the directory. The solution or project should be in that directory or in any of its sub directories. If not specified, default is the current directory. ### switch-to-nightly @@ -768,13 +826,13 @@ You can use this command to switch your solution or project to latest [nightly]( Usage: -````bash +```bash abp switch-to-nightly [options] -```` +``` #### Options -* `--directory` or `-d`: Specifies the directory. The solution or project should be in that directory or in any of its sub directories. If not specified, default is the current directory. +- `--directory` or `-d`: Specifies the directory. The solution or project should be in that directory or in any of its sub directories. If not specified, default is the current directory. ### switch-to-stable @@ -782,12 +840,13 @@ If you're using the ABP preview packages (including nightly previews), you can s Usage: -````bash +```bash abp switch-to-stable [options] -```` +``` + #### Options -* `--directory` or `-d`: Specifies the directory. The solution or project should be in that directory or in any of its sub directories. If not specified, default is the current directory. +- `--directory` or `-d`: Specifies the directory. The solution or project should be in that directory or in any of its sub directories. If not specified, default is the current directory. ### switch-to-local @@ -795,20 +854,20 @@ Changes all NuGet package references to local project references for all the .cs Usage: -````bash +```bash abp switch-to-local [options] -```` -#### Options +``` -* `--solution` or `-s`: Specifies the solution directory. The solution should be in that directory or in any of its sub directories. If not specified, default is the current directory. +#### Options -* `--paths` or `-p`: Specifies the local paths that the projects are inside. You can use `|` character to separate the paths. +- `--solution` or `-s`: Specifies the solution directory. The solution should be in that directory or in any of its sub directories. If not specified, default is the current directory. +- `--paths` or `-p`: Specifies the local paths that the projects are inside. You can use `|` character to separate the paths. Examples: -````bash +```bash abp switch-to-local --paths "D:\Github\abp|D:\Github\my-repo" -```` +``` ### upgrade @@ -817,35 +876,35 @@ This command is specially designed for users who already started their developme Usage: -````bash +```bash abp upgrade [-t ] [options] -```` +``` Examples: -````bash +```bash abp upgrade -t app abp upgrade -t app --language-management --gdpr --audit-logging-ui --text-template-management --openiddict-pro abp upgrade -t app-nolayers --audit-logging-ui abp upgrade -t app-nolayers -p D:\MyProjects\MyProject -```` +``` #### Options -* `--path` or `-p`: Specifies the module path. The module should be in that directory. If not specified, the default is the current directory. -* `--gdpr`: Installs GDPR module too. -* `--language-management`: Installs Language Management module too. -* `--audit-logging-ui`: Installs Audit Logging Pro (UI) module too. -* `--text-template-management`: Installs Text Template Management module too. -* `--openiddict-pro`: Installs OpenIddict Pro (UI) module too. +- `--path` or `-p`: Specifies the module path. The module should be in that directory. If not specified, the default is the current directory. +- `--gdpr`: Installs GDPR module too. +- `--language-management`: Installs Language Management module too. +- `--audit-logging-ui`: Installs Audit Logging Pro (UI) module too. +- `--text-template-management`: Installs Text Template Management module too. +- `--openiddict-pro`: Installs OpenIddict Pro (UI) module too. ### translate Simplifies to translate [localization](../framework/fundamentals/localization.md) files when you have multiple JSON [localization](../framework/fundamentals/localization.md) files in a source control repository. -* This command will create a unified json file based on the reference culture. -* It searches all the localization `JSON` files in the current directory and all subdirectories (recursively). Then creates a single file (named `abp-translation.json` by default) that includes all the entries need to be translated. -* Once you translate the entries in this file, you can then apply your changes to the original localization files using the `--apply` command. +- This command will create a unified json file based on the reference culture. +- It searches all the localization `JSON` files in the current directory and all subdirectories (recursively). Then creates a single file (named `abp-translation.json` by default) that includes all the entries need to be translated. +- Once you translate the entries in this file, you can then apply your changes to the original localization files using the `--apply` command. > The main purpose of this command is to translate ABP localization files (since the [abp repository](https://github.com/abpframework/abp) has tens of localization files to be translated in different directories). @@ -853,38 +912,38 @@ Simplifies to translate [localization](../framework/fundamentals/localization.md First step is to create the unified translation file: -````bash +```bash abp translate -c [options] -```` +``` Examples: -````bash +```bash abp translate -c de -```` +``` This command created the unified translation file for the `de` (German) culture. ##### Additional Options -* `--reference-culture` or `-r`: Default `en`. Specifies the reference culture. -* `--output` or `-o`: Output file name. Default `abp-translation.json`. -* `--all-values` or `-all`: Include all keys to translate. By default, the unified translation file only includes the missing texts for the target culture. Specify this parameter if you may need to revise the values already translated before. +- `--reference-culture` or `-r`: Default `en`. Specifies the reference culture. +- `--output` or `-o`: Output file name. Default `abp-translation.json`. +- `--all-values` or `-all`: Include all keys to translate. By default, the unified translation file only includes the missing texts for the target culture. Specify this parameter if you may need to revise the values already translated before. #### Applying Changes Once you translate the entries in the unified translation file, you can apply your changes to the original localization files using the `--apply` parameter: -````bash +```bash abp translate --apply # apply all changes abp translate -a # shortcut for --apply -```` +``` Then review changes on your source control system to be sure that it has changed the proper files and send a Pull Request if you've translated ABP resources. Thank you in advance for your contribution. ##### Additional Options -* `--file` or `-f`: Default: `abp-translation.json`. The translation file (use only if you've used the `--output` option before). +- `--file` or `-f`: Default: `abp-translation.json`. The translation file (use only if you've used the `--output` option before). #### Online DeepL translate @@ -892,9 +951,9 @@ The `translate` command also supports online translation. You need to provide yo It will search all the `en.json(reference-culture)` files in the directory and sub-directory and then translate and generate the corresponding `zh-Hans.json(culture)` files. -````bash +```bash abp translate -c zh-Hans --online --deepl-auth-key -```` +``` ### login @@ -926,42 +985,42 @@ abp logout ### bundle -This command generates script and style references for ABP Blazor WebAssembly and MAUI Blazor project and updates the **index.html** file. It helps developers to manage dependencies required by ABP modules easily. In order for ```bundle``` command to work, its **executing directory** or passed ```--working-directory``` parameter's directory must contain a Blazor or MAUI Blazor project file(*.csproj). +This command generates script and style references for ABP Blazor WebAssembly and MAUI Blazor project and updates the **index.html** file. It helps developers to manage dependencies required by ABP modules easily. In order for `bundle` command to work, its **executing directory** or passed `--working-directory` parameter's directory must contain a Blazor or MAUI Blazor project file(*.csproj). Usage: -````bash +```bash abp bundle [options] -```` +``` > This command is no longer needed if you are using Global Assets feature. See [Managing Global Scripts & Styles](../framework/ui/blazor/global-scripts-styles.md) for more information. #### Options -* ```--working-directory``` or ```-wd```: Specifies the working directory. This option is useful when executing directory doesn't contain a Blazor project file. -* ```--force``` or ```-f```: Forces to build project before generating references. -* ```--project-type``` or ```-t```: Specifies the project type. Default type is `webassembly`. Available types: - * `webassembly` - * `maui-blazor` -* `--version` or `-v`: Specifies the ABP Framework version that the project is using. This is helpful for those who use central package management. +- `--working-directory` or `-wd`: Specifies the working directory. This option is useful when executing directory doesn't contain a Blazor project file. +- `--force` or `-f`: Forces to build project before generating references. +- `--project-type` or `-t`: Specifies the project type. Default type is `webassembly`. Available types: + - `webassembly` + - `maui-blazor` +- `--version` or `-v`: Specifies the ABP Framework version that the project is using. This is helpful for those who use central package management. `bundle` command reads the `appsettings.json` file inside the Blazor and MAUI Blazor project for bundling options. For more details about managing style and script references in Blazor or MAUI Blazor apps, see [Managing Global Scripts & Styles](../framework/ui/blazor/global-scripts-styles.md) ### install-libs -This command install NPM Packages for MVC / Razor Pages and Blazor Server UI types. Its **executing directory** or passed ```--working-directory``` parameter's directory must contain a project file(*.csproj). +This command install NPM Packages for MVC / Razor Pages and Blazor Server UI types. Its **executing directory** or passed `--working-directory` parameter's directory must contain a project file(*.csproj). `install-libs` command reads the `abp.resourcemapping.js` file to manage package. For more details see [Client Side Package Management](../framework/ui/mvc-razor-pages/client-side-package-management.md). Usage: -````bash +```bash abp install-libs [options] -```` +``` #### Options -* ```--working-directory``` or ```-wd```: Specifies the working directory. This option is useful when executing directory doesn't contain a project file. +- `--working-directory` or `-wd`: Specifies the working directory. This option is useful when executing directory doesn't contain a project file. ### check-extensions @@ -969,9 +1028,9 @@ This command checks the installed ABP CLI extensions and updates them if necessa Usage: -````bash +```bash abp check-extensions -```` +``` ### install-old-cli @@ -999,7 +1058,7 @@ abp mcp-studio [options] Options: -* `--endpoint` or `-e`: Overrides ABP Studio MCP endpoint. Default value is `http://localhost:38280/mcp/`. +- `--endpoint` or `-e`: Overrides ABP Studio MCP endpoint. Default value is `http://localhost:38280/mcp/`. Example: @@ -1092,7 +1151,7 @@ body { console.log('MyPage.js loaded!'); ``` -5. Finally, run the `generate-razor-page` command under the `Views` folder: +1. Finally, run the `generate-razor-page` command under the `Views` folder: ```bash > abp generate-razor-page @@ -1122,11 +1181,11 @@ app.Use(async (httpContext, next) => }); ``` -![Razor Page](./../images/abp-generate-razor-page.png) +Razor Page #### Options -* ```--version``` or ```-v```: Specifies the version for ABP CLI to be installed. +- `--version` or `-v`: Specifies the version for ABP CLI to be installed. ### generate-jwks @@ -1134,10 +1193,12 @@ Generates an RSA key pair for use with OpenIddict `private_key_jwt` client authe The command produces two files: -| File | Description | -|---|---| -| `.json` | JWKS (JSON Web Key Set) containing the **public key**. Paste this into the **JSON Web Key Set** field of your OpenIddict application in the ABP management UI. | -| `-private.pem` | PKCS#8 PEM **private key**. Store this securely in your client application and use it to sign JWT client assertions. | + +| File | Description | +| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `.json` | JWKS (JSON Web Key Set) containing the **public key**. Paste this into the **JSON Web Key Set** field of your OpenIddict application in the ABP management UI. | +| `-private.pem` | PKCS#8 PEM **private key**. Store this securely in your client application and use it to sign JWT client assertions. | + > **Security notice:** Never commit the private key file to source control. Add it to `.gitignore`. Only the JWKS (public key) needs to be shared with the authorization server. @@ -1149,11 +1210,11 @@ abp generate-jwks [options] #### Options -* `--output` or `-o`: Output directory. Defaults to the current directory. -* `--key-size` or `-s`: RSA key size in bits. Supported values: `2048` (default), `4096`. -* `--alg`: Signing algorithm. Supported values: `RS256` (default), `RS384`, `RS512`, `PS256`, `PS384`, `PS512`. -* `--kid`: Custom Key ID. Auto-generated if not specified. -* `--file` or `-f`: Output file name prefix. Defaults to `jwks`. Generates `.json` and `-private.pem`. +- `--output` or `-o`: Output directory. Defaults to the current directory. +- `--key-size` or `-s`: RSA key size in bits. Supported values: `2048` (default), `4096`. +- `--alg`: Signing algorithm. Supported values: `RS256` (default), `RS384`, `RS512`, `PS256`, `PS384`, `PS512`. +- `--kid`: Custom Key ID. Auto-generated if not specified. +- `--file` or `-f`: Output file name prefix. Defaults to `jwks`. Generates `.json` and `-private.pem`. #### Examples @@ -1171,9 +1232,7 @@ abp generate-jwks -o ./keys -f myapp #### Workflow 1. Run `abp generate-jwks` to generate the key pair. - 2. Open the ABP OpenIddict application management UI, select your **Confidential** application, choose **JWKS (private_key_jwt)** as the authentication method, and paste the contents of `jwks.json` into the **JSON Web Key Set** field. - 3. In your client application, load the private key from the PEM file and sign JWT client assertions: ```csharp @@ -1223,5 +1282,5 @@ var tokenResponse = await httpClient.RequestClientCredentialsTokenAsync( ## See Also -* [Examples for the new command](./new-command-samples.md) -* [Video tutorial](https://abp.io/video-courses/essentials/abp-cli) +- [Examples for the new command](./new-command-samples.md) +- [Video tutorial](https://abp.io/video-courses/essentials/abp-cli) \ No newline at end of file From 4ebf4a038b8b614881e749c14c1f88e3ff03a3f9 Mon Sep 17 00:00:00 2001 From: Engincan VESKE Date: Mon, 13 Apr 2026 16:02:03 +0300 Subject: [PATCH 2/8] docs: add React UI documentation page and nav entry Made-with: Cursor --- docs/en/docs-nav.json | 10 + docs/en/framework/ui/index.md | 3 +- docs/en/framework/ui/react/index.md | 419 ++++++++++++++++++++++++++++ 3 files changed, 431 insertions(+), 1 deletion(-) create mode 100644 docs/en/framework/ui/react/index.md diff --git a/docs/en/docs-nav.json b/docs/en/docs-nav.json index b0a76124b4d..8d2fcc6e100 100644 --- a/docs/en/docs-nav.json +++ b/docs/en/docs-nav.json @@ -1866,6 +1866,16 @@ } ] }, + { + "text": "React", + "items": [ + { + "text": "Overview", + "path": "framework/ui/react/index.md", + "isIndex": true + } + ] + }, { "text": "React Native", "items": [ diff --git a/docs/en/framework/ui/index.md b/docs/en/framework/ui/index.md index d892c63c699..ca33ca9ff1c 100644 --- a/docs/en/framework/ui/index.md +++ b/docs/en/framework/ui/index.md @@ -1,7 +1,7 @@ ```json //[doc-seo] { - "Description": "Explore ABP's UI options, including MVC, Blazor, Angular, React Native, and MAUI, to build dynamic applications effortlessly." + "Description": "Explore ABP's UI options, including React, MVC, Blazor, Angular, React Native, and MAUI, to build dynamic applications effortlessly." } ``` @@ -9,6 +9,7 @@ ABP provides several options for building the user interface (UI) in your applications. Here are some of the officially supported UI options you can use with ABP: +* [React](./react/index.md) *(modern template system only)* * [MVC / Razor Pages](./mvc-razor-pages/overall.md) * [Blazor](./blazor/overall.md) * [Angular](./angular/quick-start.md) diff --git a/docs/en/framework/ui/react/index.md b/docs/en/framework/ui/react/index.md new file mode 100644 index 00000000000..eb96bbcbe40 --- /dev/null +++ b/docs/en/framework/ui/react/index.md @@ -0,0 +1,419 @@ +```json +//[doc-seo] +{ + "Description": "Learn how to build modern web applications with ABP using React UI — a React-first approach with a dedicated Admin Console, built on Vite, shadcn/ui, Zod, and Axios." +} +``` + +# React UI + +## Introduction + +ABP provides a **React UI** option for building modern, client-side web applications. The React UI is part of the **modern template system** and is only available when creating a solution with the `--modern` flag via the [ABP CLI](../../../cli/index.md) or through the **Modern Wizard** in [ABP Studio](../../../studio/index.md). + +> React UI is **not** available in the legacy (non-modern) templates. You must use the modern template system to get a React-based solution. See [Creating a Solution](#creating-a-solution) below. + +The React UI is built on a modern, industry-standard stack: + +| Technology | Purpose | +|---|---| +| [Vite](https://vitejs.dev/) | Build tool and dev server | +| [React](https://react.dev/) | UI framework | +| [shadcn/ui](https://ui.shadcn.com/) | Component library (built on Radix UI + Tailwind CSS) | +| [Zod](https://zod.dev/) | Schema validation | +| [Axios](https://axios-http.com/) | HTTP client | +| [Vitest](https://vitest.dev/) | Unit testing | +| [React Router](https://reactrouter.com/) | Client-side routing | +| [OpenID Connect / OIDC](https://openid.net/connect/) | Authentication (via the ABP Auth Server) | + +## Two React Applications + +When you create a solution with React UI, ABP generates **two separate React applications**: + +### 1. React App (Your Application) + +Located at `apps/react/`, this is **your application** — the public-facing or user-facing SPA that you own and customize freely. It comes with: + +- A sample **Books CRUD page** (when `--sample-crud-page` is used) demonstrating how to build a full create/read/update/delete page with the ABP backend +- A plain **Users page** as a minimal reference +- Pre-configured authentication via OIDC against the ABP Auth Server +- Pre-configured HTTP client (Axios) with ABP API integration + +This is where you build your business-specific pages and features. + +### 2. React Admin Console (`Volo.Abp.AdminConsole`) + +Located at `apps/react-admin-console/`, this is the **ABP Admin Console** — a pre-built React application powered by the `Volo.Abp.AdminConsole` NuGet package. It hosts all the standard ABP module management pages, including: + +- Users & Roles management +- Organization Units +- Settings +- Audit Logs +- OpenIddict (Application, Scope management) +- Language Management *(if included)* +- Text Template Management *(if included)* +- GDPR *(if included)* +- SaaS / Tenant Management *(if included)* +- And all other optional module pages based on your solution configuration + +The Admin Console is served at the `/admin-console/` path of your backend host (e.g., `https://localhost:44300/admin-console/`). It is hosted by the `Volo.Abp.AdminConsole` package inside your `*.HttpApi.Host` project and is accessible from the main React app via a navigation link. + +> You do not need to modify the Admin Console application. It is managed by ABP and updated automatically when you update your ABP packages. + +## Architecture Overview + +``` +┌─────────────────────────────────────────────────────────┐ +│ Browser │ +│ │ +│ ┌─────────────────┐ ┌──────────────────────────┐ │ +│ │ React App │ │ React Admin Console │ │ +│ │ (apps/react/) │───▶│ (apps/react-admin- │ │ +│ │ │ │ console/) │ │ +│ │ Your pages, │ │ /admin-console/* │ │ +│ │ CRUD, etc. │ │ Users, Roles, Settings │ │ +│ └────────┬────────┘ └──────────┬───────────────┘ │ +│ │ │ │ +└───────────┼────────────────────────┼────────────────────┘ + │ │ + ▼ ▼ +┌─────────────────────────────────────────────────────────┐ +│ ABP Backend (*.HttpApi.Host) │ +│ │ +│ • REST APIs (Auto API Controllers) │ +│ • Hosts Admin Console at /admin-console/* │ +│ • OpenIddict Auth Server (or separate) │ +└─────────────────────────────────────────────────────────┘ +``` + +For the **microservice** modern template, the architecture expands with dedicated gateways: + +``` +React App ──────────────────────▶ Web Gateway (YARP) +React Admin Console ─────────────▶ Web Gateway (YARP) + │ + ├──▶ Identity Service + ├──▶ Administration Service + └──▶ Your Services... +``` + +## Creating a Solution + +### Using ABP CLI + +Pass the `--modern` flag to `abp new`: + +````bash +# Layered app with React UI (default when --modern is used) +abp new Acme.BookStore --template app --modern + +# Single-layer app with React UI +abp new Acme.BookStore --template app-nolayers --modern + +# Microservice solution with React UI + React Admin Console +abp new Acme.BookStore --template microservice --modern +```` + +The `react` UI framework is the default when `--modern` is specified. You can also pass it explicitly: + +````bash +abp new Acme.BookStore --template app --modern --ui-framework react +```` + +To create a solution without any UI (API-only backend): + +````bash +abp new Acme.BookStore --template app --modern --ui-framework no-ui +```` + +See the [ABP CLI documentation](../../../cli/index.md#modern-templates) for the full list of options. + +### Using ABP Studio + +Open ABP Studio and use the **New Solution** wizard. Select the **Modern** template variant and choose **React** as the UI framework. The wizard guides you through all available options and generates the solution. + +## Solution Structure + +After creating a solution (e.g., `Acme.BookStore --template app --modern`), the React-related files are organized as follows: + +``` +Acme.BookStore/ +├── apps/ +│ ├── react/ # Your React application +│ │ ├── src/ +│ │ │ ├── pages/ # Your page components +│ │ │ │ ├── books/ # Sample Books CRUD page +│ │ │ │ └── users/ # Sample Users page +│ │ │ ├── components/ # Shared UI components +│ │ │ ├── lib/ # Utilities, API clients +│ │ │ ├── hooks/ # Custom React hooks +│ │ │ └── main.tsx # Entry point +│ │ ├── public/ +│ │ │ └── dynamic-env.json # Runtime configuration +│ │ ├── package.json +│ │ └── vite.config.ts +│ └── react-admin-console/ # ABP Admin Console (managed by ABP) +├── src/ +│ ├── Acme.BookStore.Application/ +│ ├── Acme.BookStore.Domain/ +│ ├── Acme.BookStore.EntityFrameworkCore/ +│ └── Acme.BookStore.HttpApi.Host/ # Hosts the Admin Console +└── ... +``` + +## Configuration + +### Runtime Configuration (`dynamic-env.json`) + +The React app reads its runtime configuration from `public/dynamic-env.json`. This file is loaded at startup and allows you to change settings without rebuilding the application — useful for different environments (development, staging, production). + +```json +{ + "oAuthConfig": { + "issuer": "https://localhost:44301/", + "clientId": "Acme.BookStore_App", + "scope": "openid profile email offline_access BookStore" + }, + "apis": { + "default": { + "url": "https://localhost:44300", + "rootNamespace": "Acme.BookStore" + } + } +} +``` + +| Key | Description | +|---|---| +| `oAuthConfig.issuer` | URL of the OpenIddict Auth Server | +| `oAuthConfig.clientId` | The OpenIddict client ID registered for this app | +| `oAuthConfig.scope` | OAuth scopes to request | +| `apis.default.url` | Base URL of the backend API | +| `apis.default.rootNamespace` | Root namespace used for API proxy generation | + +For the **microservice** modern template, the `apis.default.url` points to the **Web Gateway** (YARP reverse proxy) instead of a single backend host. + +### Admin Console Configuration + +The Admin Console is configured similarly via its own `dynamic-env.json` and uses a separate OpenIddict client (`Acme.BookStore_AdminConsole`). + +## Authentication + +Both React applications authenticate using **OpenID Connect (OIDC)** against the ABP Auth Server (OpenIddict). The auth flow is handled transparently — when a user visits a protected page, they are redirected to the Auth Server login page and returned to the app after successful authentication. + +Two OpenIddict clients are automatically seeded during database migration: + +| Client ID | Application | +|---|---| +| `_App` | Main React SPA | +| `_AdminConsole` | React Admin Console | + +Both clients use the **Authorization Code flow with PKCE**, which is the recommended flow for SPAs. + +## Making API Calls + +The React app uses **Axios** as the HTTP client, pre-configured with: + +- The base URL from `dynamic-env.json` +- Automatic Bearer token injection from the OIDC session +- ABP-compatible error handling (reads `error.data` from ABP error responses) + +**Example: Fetching a list of books** + +```typescript +import { useQuery } from '@tanstack/react-query'; +import { apiClient } from '@/lib/api-client'; + +interface BookDto { + id: string; + name: string; + type: number; + publishDate: string; + price: number; +} + +interface PagedResult { + items: T[]; + totalCount: number; +} + +export function useBooks() { + return useQuery({ + queryKey: ['books'], + queryFn: () => + apiClient + .get>('/api/app/book') + .then((res) => res.data), + }); +} +``` + +## Localization + +The React app integrates with ABP's [localization system](../../../framework/fundamentals/localization.md). Localization resources are fetched from the backend at startup via the `/api/abp/application-configuration` endpoint and made available throughout the app. + +**Example: Using localization in a component** + +```typescript +import { useLocalization } from '@/hooks/use-localization'; + +export function MyComponent() { + const { l } = useLocalization('BookStore'); + + return

{l('Books')}

; +} +``` + +The `l(key)` function looks up the key in the loaded localization resources for the given resource name (`'BookStore'` in this example). + +## Authorization + +Permission checks are available via a hook that reads the current user's granted permissions from the ABP application configuration: + +```typescript +import { usePermissions } from '@/hooks/use-permissions'; + +export function BooksPage() { + const { isGranted } = usePermissions(); + + return ( +
+ {isGranted('BookStore.Books.Create') && ( + + )} +
+ ); +} +``` + +Permissions are defined on the server side using ABP's [permission system](../../../framework/fundamentals/authorization/index.md) and are automatically available in the React app. + +## Tech Stack Details + +### shadcn/ui Components + +The React app uses [shadcn/ui](https://ui.shadcn.com/) as the component library. shadcn/ui is not a traditional npm package — components are copied directly into your project under `src/components/ui/`, giving you full ownership and the ability to customize them freely. + +Common components available out of the box include: `Button`, `Input`, `Table`, `Dialog`, `Form`, `Select`, `Tabs`, `Card`, `Badge`, `Dropdown Menu`, and more. + +### Form Validation with Zod + +Forms use [Zod](https://zod.dev/) schemas for validation, integrated with [React Hook Form](https://react-hook-form.com/): + +```typescript +import { z } from 'zod'; +import { useForm } from 'react-hook-form'; +import { zodResolver } from '@hookform/resolvers/zod'; + +const createBookSchema = z.object({ + name: z.string().min(1).max(128), + price: z.number().min(0), + publishDate: z.string(), +}); + +type CreateBookInput = z.infer; + +export function CreateBookForm() { + const form = useForm({ + resolver: zodResolver(createBookSchema), + }); + + // ... +} +``` + +### Testing with Vitest + +The React app is pre-configured with [Vitest](https://vitest.dev/) for unit testing: + +```bash +# Run tests +npm run test + +# Run tests with coverage +npm run test:coverage +``` + +## Running the Application + +### Development + +1. Start the backend (from ABP Studio or `dotnet run` in the `*.HttpApi.Host` project). +2. Navigate to the React app directory and start the dev server: + +````bash +cd apps/react +npm install +npm run dev +```` + +The app will be available at `https://localhost:3000` (or the port configured in `vite.config.ts`). + +3. Access the Admin Console at the backend URL + `/admin-console/` (e.g., `https://localhost:44300/admin-console/`). + +### Production Build + +````bash +cd apps/react +npm run build +```` + +The output is placed in `dist/` and can be served by any static file host or CDN. + +## Accessing the Admin Console + +The Admin Console is accessible from within the main React app. After logging in, you will find a link to the Admin Console in the navigation. Clicking it opens the Admin Console, which is served by the backend at `/admin-console/*`. + +The Admin Console provides full management capabilities for: + +- **Identity**: Users, Roles, Claims, Organization Units +- **OpenIddict**: Applications, Scopes +- **Settings**: Application-wide and tenant-level settings +- **Audit Logs**: View and filter audit log entries +- **Language Management** *(optional)* +- **Text Template Management** *(optional)* +- **GDPR** *(optional)* +- **SaaS / Tenant Management** *(optional)* +- **And more**, depending on the modules included in your solution + +## Customization + +### Adding New Pages + +Create a new file under `src/pages/` and register the route in the router configuration: + +```typescript +// src/router.tsx (or similar) +import { BooksPage } from './pages/books/books-page'; +import { MyNewPage } from './pages/my-feature/my-new-page'; + +const routes = [ + { path: '/books', element: }, + { path: '/my-feature', element: }, + // ... +]; +``` + +### Adding Menu Items + +Add entries to the navigation configuration to include your new pages in the sidebar or top navigation: + +```typescript +// src/config/navigation.ts (or similar) +export const navigationItems = [ + { label: 'Books', path: '/books', icon: BookIcon }, + { label: 'My Feature', path: '/my-feature', icon: StarIcon }, +]; +``` + +### Customizing shadcn/ui Components + +Since shadcn/ui components live in `src/components/ui/`, you can modify them directly. For example, to change the default button variant or add a new variant, edit `src/components/ui/button.tsx`. + +## See Also + +- [ABP CLI — Modern Templates](../../../cli/index.md#modern-templates) +- [ABP Studio](../../../studio/index.md) +- [Localization](../../../framework/fundamentals/localization.md) +- [Authorization / Permissions](../../../framework/fundamentals/authorization/index.md) +- [Auto API Controllers](../../../framework/api-development/auto-controllers.md) From 8a1eff560cd4b5da6b6fc74649016c140c151df2 Mon Sep 17 00:00:00 2001 From: Engincan VESKE Date: Mon, 13 Apr 2026 16:07:04 +0300 Subject: [PATCH 3/8] docs: refactor React UI page to clarify template-specific structure Made-with: Cursor --- docs/en/framework/ui/react/index.md | 162 ++++++++++++++++------------ 1 file changed, 91 insertions(+), 71 deletions(-) diff --git a/docs/en/framework/ui/react/index.md b/docs/en/framework/ui/react/index.md index eb96bbcbe40..cb712d961d4 100644 --- a/docs/en/framework/ui/react/index.md +++ b/docs/en/framework/ui/react/index.md @@ -26,13 +26,13 @@ The React UI is built on a modern, industry-standard stack: | [React Router](https://reactrouter.com/) | Client-side routing | | [OpenID Connect / OIDC](https://openid.net/connect/) | Authentication (via the ABP Auth Server) | -## Two React Applications +## React App and Admin Console -When you create a solution with React UI, ABP generates **two separate React applications**: +Every modern React solution consists of two parts: **your React application** and the **ABP Admin Console**. -### 1. React App (Your Application) +### React App (Your Application) -Located at `apps/react/`, this is **your application** — the public-facing or user-facing SPA that you own and customize freely. It comes with: +This is **your application** — the user-facing SPA that you own and customize freely. It comes with: - A sample **Books CRUD page** (when `--sample-crud-page` is used) demonstrating how to build a full create/read/update/delete page with the ABP backend - A plain **Users page** as a minimal reference @@ -41,9 +41,16 @@ Located at `apps/react/`, this is **your application** — the public-facing or This is where you build your business-specific pages and features. -### 2. React Admin Console (`Volo.Abp.AdminConsole`) +The location of the React app differs by template type: -Located at `apps/react-admin-console/`, this is the **ABP Admin Console** — a pre-built React application powered by the `Volo.Abp.AdminConsole` NuGet package. It hosts all the standard ABP module management pages, including: +- **Layered (`app --modern`) and Single-layer (`app-nolayers --modern`)**: the React app lives at the **root of the solution** (alongside the backend projects). +- **Microservice (`microservice --modern`)**: the React app lives at `apps/react/`. + +### React Admin Console (`Volo.Abp.AdminConsole`) + +The **ABP Admin Console** is a pre-built React application that provides all standard ABP module management pages. It is delivered via the `Volo.Abp.AdminConsole` NuGet package and requires no modification on your part — it is updated automatically when you update your ABP packages. + +The Admin Console includes pages for: - Users & Roles management - Organization Units @@ -56,46 +63,12 @@ Located at `apps/react-admin-console/`, this is the **ABP Admin Console** — a - SaaS / Tenant Management *(if included)* - And all other optional module pages based on your solution configuration -The Admin Console is served at the `/admin-console/` path of your backend host (e.g., `https://localhost:44300/admin-console/`). It is hosted by the `Volo.Abp.AdminConsole` package inside your `*.HttpApi.Host` project and is accessible from the main React app via a navigation link. - -> You do not need to modify the Admin Console application. It is managed by ABP and updated automatically when you update your ABP packages. - -## Architecture Overview +How the Admin Console is hosted also differs by template type: -``` -┌─────────────────────────────────────────────────────────┐ -│ Browser │ -│ │ -│ ┌─────────────────┐ ┌──────────────────────────┐ │ -│ │ React App │ │ React Admin Console │ │ -│ │ (apps/react/) │───▶│ (apps/react-admin- │ │ -│ │ │ │ console/) │ │ -│ │ Your pages, │ │ /admin-console/* │ │ -│ │ CRUD, etc. │ │ Users, Roles, Settings │ │ -│ └────────┬────────┘ └──────────┬───────────────┘ │ -│ │ │ │ -└───────────┼────────────────────────┼────────────────────┘ - │ │ - ▼ ▼ -┌─────────────────────────────────────────────────────────┐ -│ ABP Backend (*.HttpApi.Host) │ -│ │ -│ • REST APIs (Auto API Controllers) │ -│ • Hosts Admin Console at /admin-console/* │ -│ • OpenIddict Auth Server (or separate) │ -└─────────────────────────────────────────────────────────┘ -``` - -For the **microservice** modern template, the architecture expands with dedicated gateways: +- **Layered and Single-layer templates**: The `Volo.Abp.AdminConsole` package is added directly to your `*.HttpApi.Host` project. It serves the Admin Console React app at the `/admin-console/*` path of your backend (e.g., `https://localhost:44300/admin-console/`). There is no separate `apps/react-admin-console/` folder — the Admin Console UI is embedded in and served by the backend. +- **Microservice template**: The Admin Console runs as a standalone React app at `apps/react-admin-console/`, served through the Web Gateway (YARP) alongside the main React app. -``` -React App ──────────────────────▶ Web Gateway (YARP) -React Admin Console ─────────────▶ Web Gateway (YARP) - │ - ├──▶ Identity Service - ├──▶ Administration Service - └──▶ Your Services... -``` +In both cases the Admin Console is accessible from the main React app via a navigation link. ## Creating a Solution @@ -134,30 +107,64 @@ Open ABP Studio and use the **New Solution** wizard. Select the **Modern** templ ## Solution Structure -After creating a solution (e.g., `Acme.BookStore --template app --modern`), the React-related files are organized as follows: +The layout of the React-related files depends on the template type. + +### Layered and Single-layer Templates + +For `app --modern` and `app-nolayers --modern`, the React app lives at the root of the solution alongside the backend projects. The Admin Console is embedded in the backend via the `Volo.Abp.AdminConsole` NuGet package — there is no separate React Admin Console folder. + +``` +Acme.BookStore/ +├── react/ # Your React application +│ ├── src/ +│ │ ├── pages/ # Your page components +│ │ │ ├── books/ # Sample Books CRUD page +│ │ │ └── users/ # Sample Users page +│ │ ├── components/ # Shared UI components +│ │ ├── lib/ # Utilities, API clients +│ │ ├── hooks/ # Custom React hooks +│ │ └── main.tsx # Entry point +│ ├── public/ +│ │ └── dynamic-env.json # Runtime configuration +│ ├── package.json +│ └── vite.config.ts +├── src/ +│ ├── Acme.BookStore.Application/ +│ ├── Acme.BookStore.Domain/ +│ ├── Acme.BookStore.EntityFrameworkCore/ +│ └── Acme.BookStore.HttpApi.Host/ # Hosts Admin Console at /admin-console/* +└── ... +``` + +### Microservice Template + +For `microservice --modern`, both the React app and the React Admin Console are standalone apps under the `apps/` directory, each served through the Web Gateway (YARP). ``` Acme.BookStore/ ├── apps/ │ ├── react/ # Your React application │ │ ├── src/ -│ │ │ ├── pages/ # Your page components -│ │ │ │ ├── books/ # Sample Books CRUD page -│ │ │ │ └── users/ # Sample Users page -│ │ │ ├── components/ # Shared UI components -│ │ │ ├── lib/ # Utilities, API clients -│ │ │ ├── hooks/ # Custom React hooks -│ │ │ └── main.tsx # Entry point +│ │ │ ├── pages/ +│ │ │ ├── components/ +│ │ │ ├── lib/ +│ │ │ ├── hooks/ +│ │ │ └── main.tsx │ │ ├── public/ │ │ │ └── dynamic-env.json # Runtime configuration │ │ ├── package.json │ │ └── vite.config.ts -│ └── react-admin-console/ # ABP Admin Console (managed by ABP) -├── src/ -│ ├── Acme.BookStore.Application/ -│ ├── Acme.BookStore.Domain/ -│ ├── Acme.BookStore.EntityFrameworkCore/ -│ └── Acme.BookStore.HttpApi.Host/ # Hosts the Admin Console +│ ├── react-admin-console/ # ABP Admin Console (managed by ABP) +│ │ ├── public/ +│ │ │ └── dynamic-env.json +│ │ └── ... +│ └── auth-server/ # OpenIddict Auth Server +├── gateways/ +│ └── web/ # YARP reverse proxy for React apps +├── services/ +│ ├── identity/ +│ ├── administration/ +│ └── ... └── ... ``` @@ -195,20 +202,18 @@ For the **microservice** modern template, the `apis.default.url` points to the * ### Admin Console Configuration -The Admin Console is configured similarly via its own `dynamic-env.json` and uses a separate OpenIddict client (`Acme.BookStore_AdminConsole`). +For the **microservice** template, the Admin Console has its own `dynamic-env.json` (at `apps/react-admin-console/public/dynamic-env.json`) and uses a separate OpenIddict client (`_AdminConsole`). -## Authentication +For **layered and single-layer** templates, the Admin Console is embedded in the backend via the `Volo.Abp.AdminConsole` package and does not have a separate configuration file — it inherits its settings from the backend host. -Both React applications authenticate using **OpenID Connect (OIDC)** against the ABP Auth Server (OpenIddict). The auth flow is handled transparently — when a user visits a protected page, they are redirected to the Auth Server login page and returned to the app after successful authentication. +## Authentication -Two OpenIddict clients are automatically seeded during database migration: +Both the React app and the Admin Console authenticate using **OpenID Connect (OIDC)** against the ABP Auth Server (OpenIddict). The auth flow is handled transparently — when a user visits a protected page, they are redirected to the Auth Server login page and returned to the app after successful authentication. All clients use the **Authorization Code flow with PKCE**, which is the recommended flow for SPAs. -| Client ID | Application | -|---|---| -| `_App` | Main React SPA | -| `_AdminConsole` | React Admin Console | +The number of seeded OpenIddict clients depends on the template: -Both clients use the **Authorization Code flow with PKCE**, which is the recommended flow for SPAs. +- **Layered and Single-layer templates**: one client is seeded — `_App` for the React SPA. The Admin Console is embedded in the backend and shares the same authentication context. +- **Microservice template**: two clients are seeded — `_App` for the main React SPA and `_AdminConsole` for the standalone React Admin Console app. ## Making API Calls @@ -339,7 +344,17 @@ npm run test:coverage ### Development 1. Start the backend (from ABP Studio or `dotnet run` in the `*.HttpApi.Host` project). -2. Navigate to the React app directory and start the dev server: +2. Navigate to the React app directory and start the dev server. + +For **layered and single-layer** templates, the React app is at the solution root: + +````bash +cd react +npm install +npm run dev +```` + +For the **microservice** template, it is under `apps/`: ````bash cd apps/react @@ -349,13 +364,18 @@ npm run dev The app will be available at `https://localhost:3000` (or the port configured in `vite.config.ts`). -3. Access the Admin Console at the backend URL + `/admin-console/` (e.g., `https://localhost:44300/admin-console/`). +3. Access the Admin Console: + - **Layered / Single-layer**: navigate to the backend URL + `/admin-console/` (e.g., `https://localhost:44300/admin-console/`). + - **Microservice**: navigate to the Web Gateway URL + `/admin-console/`. ### Production Build ````bash -cd apps/react -npm run build +# Layered / Single-layer +cd react && npm run build + +# Microservice +cd apps/react && npm run build ```` The output is placed in `dist/` and can be served by any static file host or CDN. From e7116facb87dd7007b08e81ed31bdd35f31e10d3 Mon Sep 17 00:00:00 2001 From: Engincan VESKE Date: Mon, 13 Apr 2026 16:10:47 +0300 Subject: [PATCH 4/8] Fix markdown formatting and code fences in docs 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. --- docs/en/cli/index.md | 19 +++-- .../framework/ui/mvc-razor-pages/overall.md | 46 ++++++------ docs/en/framework/ui/react-native/index.md | 74 +++++++------------ 3 files changed, 58 insertions(+), 81 deletions(-) diff --git a/docs/en/cli/index.md b/docs/en/cli/index.md index fc64304bec1..c6387b77292 100644 --- a/docs/en/cli/index.md +++ b/docs/en/cli/index.md @@ -28,9 +28,7 @@ dotnet tool update -g Volo.Abp.Studio.Cli 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-connect](../cli#kube-connect)**`: Connects to kubernetes environment. (*Available for* ***Business*** *or higher licenses*) -- `**[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: - - `**empty*`*: Empty solution template. - - `**app**`: Application template. Additional options: + - `**empty`**: Empty solution template. + - `**app*`*: Application template. Additional options: - `--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 - `leptonx-lite`: LeptonX-Lite Theme. - `basic`: Basic Theme. - `--use-open-source-template`or `-uost`: Uses the open-source template. (*Available for* ***Team*** *or higher licenses*) - - `**app-nolayers*`*: Single-layer application template. Additional options: + - `**app-nolayers`**: Single-layer application template. Additional options: - `--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: - `angular`: Angular UI. There are some additional options for this template: @@ -1283,4 +1281,5 @@ var tokenResponse = await httpClient.RequestClientCredentialsTokenAsync( ## See Also - [Examples for the new command](./new-command-samples.md) -- [Video tutorial](https://abp.io/video-courses/essentials/abp-cli) \ No newline at end of file +- [Video tutorial](https://abp.io/video-courses/essentials/abp-cli) + diff --git a/docs/en/framework/ui/mvc-razor-pages/overall.md b/docs/en/framework/ui/mvc-razor-pages/overall.md index fc5b0b0ac08..425c94d2d90 100644 --- a/docs/en/framework/ui/mvc-razor-pages/overall.md +++ b/docs/en/framework/ui/mvc-razor-pages/overall.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): -![basic-theme-application-layout](../../../images/basic-theme-account-layout.png) +basic-theme-application-layout See the [Theming](theming.md) document for more layout options and other details. @@ -90,13 +90,13 @@ Dynamic JavaScript API Client Proxy system allows you to consume your server sid **Example: Get a list of authors from the server** -````js +```js acme.bookStore.authors.author.getList({ maxResultCount: 10 }).then(function(result){ console.log(result.items); }); -```` +``` `acme.bookStore.authors.author.getList` is an auto-generated function that internally makes an AJAX call to the server. @@ -108,7 +108,7 @@ ABP makes it easier & type safe to write Bootstrap HTML. **Example: Render a Bootstrap modal** -````html +```html @@ -116,7 +116,7 @@ ABP makes it easier & type safe to write Bootstrap HTML. -```` +``` See the [Tag Helpers](tag-helpers) document for more. @@ -126,9 +126,9 @@ ABP provides `abp-dynamic-form` and `abp-input` tag helpers to dramatically simp **Example: Use `abp-dynamic-form` to create a complete form based on a model** -````html +```html -```` +``` See the [Forms & Validation](forms-validation.md) document for details. @@ -136,14 +136,14 @@ See the [Forms & Validation](forms-validation.md) document for details. ABP provides a flexible and modular Bundling & Minification system to create bundles and minify style/script files on runtime. -````html +```html -```` +``` 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). \ No newline at end of file diff --git a/docs/en/framework/ui/react-native/index.md b/docs/en/framework/ui/react-native/index.md index 862d836ac45..92b7c0815d2 100644 --- a/docs/en/framework/ui/react-native/index.md +++ b/docs/en/framework/ui/react-native/index.md @@ -5,12 +5,12 @@ } ``` -````json +```json //[doc-params] { "Architecture": ["Monolith", "Tiered", "Microservice"] } -```` +``` # Getting Started with React Native @@ -18,7 +18,7 @@ The ABP platform provides a basic [React Native](https://reactnative.dev/) startup template to develop mobile applications **integrated with your ABP-based backends**. -![React Native gif](../../../images/react-native-introduction.gif) +React Native gif ## How to Prepare Development Environment @@ -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: -![React Native option](../../../images/react-native-option.png) +React Native option ### 2. Using ABP CLI @@ -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](../../../images/react-native-monolith-environment-local-ip.png) +react native monolith environment local IP {{ else if Architecture == "Tiered" }} -![react native tiered environment local IP](../../../images/react-native-tiered-environment-local-ip.png) +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](../../../images/react-native-environment-local-ip.png) +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. -![expo-cli-options](../../../images/rn-options.png) +expo-cli-options 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](../../../images/rn-login-iphone.png) +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](../../../images/rn-login-android-studio.png) +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 ** {{ if Architecture == "Monolith" }} -![React Native monolith host project configuration](../../../images/react-native-monolith-be-config.png) +React Native monolith host project configuration - 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 ** {{ else if Architecture == "Tiered" }} -![React Native tiered project configuration](../../../images/react-native-tiered-be-config.png) +React Native tiered project configuration - 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 ** {{ else if Architecture == "Microservice" }} -![React Native microservice project configuration](../../../images/react-native-microservice-be-config.png) +React Native microservice project configuration - 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: - ```json //gateways/mobile/MyMicroserviceProject.MobileGateway/Properties/launchSettings.json { @@ -319,7 +299,6 @@ A React Native application running on an Android emulator or a physical phone ** } } ``` - ```json //gateways/mobile/MyMicroserviceProject.MobileGateway/appsettings.json { @@ -367,7 +346,6 @@ A React Native application running on an Android emulator or a physical phone ** } } ``` - {{ end }} -Run the backend application(s) as described in the [getting started document](../../../get-started). +Run the backend application(s) as described in the [getting started document](../../../get-started). \ No newline at end of file From 6c41530e1e82424dd059b9952ebb045bcce8d67d Mon Sep 17 00:00:00 2001 From: Engincan VESKE Date: Thu, 16 Apr 2026 15:49:37 +0300 Subject: [PATCH 5/8] Pass ExclusionFilters to ReplaceEmbeddedByPhysical for letting developers define which files should be included or excluded Add an optional ExclusionFilters parameter (default: ExclusionFilters.Sensitive) to ReplaceEmbeddedByPhysical and forward it to the PhysicalFileProvider constructor when creating PhysicalVirtualFileSetInfo. This lets callers control which files are excluded when replacing embedded virtual file sets with physical directories. --- .../Abp/VirtualFileSystem/VirtualFileSetListExtensions.cs | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/framework/src/Volo.Abp.VirtualFileSystem/Volo/Abp/VirtualFileSystem/VirtualFileSetListExtensions.cs b/framework/src/Volo.Abp.VirtualFileSystem/Volo/Abp/VirtualFileSystem/VirtualFileSetListExtensions.cs index e25721f00f8..c431f8d8991 100644 --- a/framework/src/Volo.Abp.VirtualFileSystem/Volo/Abp/VirtualFileSystem/VirtualFileSetListExtensions.cs +++ b/framework/src/Volo.Abp.VirtualFileSystem/Volo/Abp/VirtualFileSystem/VirtualFileSetListExtensions.cs @@ -64,7 +64,8 @@ private static IFileProvider CreateFileProvider( public static void ReplaceEmbeddedByPhysical( [NotNull] this VirtualFileSetList fileSets, - [NotNull] string physicalPath) + [NotNull] string physicalPath, + ExclusionFilters exclusionFilters = ExclusionFilters.Sensitive) { Check.NotNull(fileSets, nameof(fileSets)); Check.NotNullOrWhiteSpace(physicalPath, nameof(physicalPath)); @@ -83,7 +84,7 @@ public static void ReplaceEmbeddedByPhysical( thisPath = Path.Combine(thisPath, embeddedVirtualFileSet.BaseFolder!); } - fileSets[i] = new PhysicalVirtualFileSetInfo(new PhysicalFileProvider(thisPath), thisPath); + fileSets[i] = new PhysicalVirtualFileSetInfo(new PhysicalFileProvider(thisPath, exclusionFilters), thisPath); } } } From 5e12a1a2506276bb5f5251a5b3840f6432add4f8 Mon Sep 17 00:00:00 2001 From: Engincan VESKE Date: Thu, 16 Apr 2026 15:53:59 +0300 Subject: [PATCH 6/8] Revert "Pass ExclusionFilters to ReplaceEmbeddedByPhysical for letting developers define which files should be included or excluded" This reverts commit 6c41530e1e82424dd059b9952ebb045bcce8d67d. --- .../Abp/VirtualFileSystem/VirtualFileSetListExtensions.cs | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/framework/src/Volo.Abp.VirtualFileSystem/Volo/Abp/VirtualFileSystem/VirtualFileSetListExtensions.cs b/framework/src/Volo.Abp.VirtualFileSystem/Volo/Abp/VirtualFileSystem/VirtualFileSetListExtensions.cs index c431f8d8991..e25721f00f8 100644 --- a/framework/src/Volo.Abp.VirtualFileSystem/Volo/Abp/VirtualFileSystem/VirtualFileSetListExtensions.cs +++ b/framework/src/Volo.Abp.VirtualFileSystem/Volo/Abp/VirtualFileSystem/VirtualFileSetListExtensions.cs @@ -64,8 +64,7 @@ private static IFileProvider CreateFileProvider( public static void ReplaceEmbeddedByPhysical( [NotNull] this VirtualFileSetList fileSets, - [NotNull] string physicalPath, - ExclusionFilters exclusionFilters = ExclusionFilters.Sensitive) + [NotNull] string physicalPath) { Check.NotNull(fileSets, nameof(fileSets)); Check.NotNullOrWhiteSpace(physicalPath, nameof(physicalPath)); @@ -84,7 +83,7 @@ public static void ReplaceEmbeddedByPhysical( thisPath = Path.Combine(thisPath, embeddedVirtualFileSet.BaseFolder!); } - fileSets[i] = new PhysicalVirtualFileSetInfo(new PhysicalFileProvider(thisPath, exclusionFilters), thisPath); + fileSets[i] = new PhysicalVirtualFileSetInfo(new PhysicalFileProvider(thisPath), thisPath); } } } From 2b2edcb512c1ca1c31efa466d399209d3a89c24c Mon Sep 17 00:00:00 2001 From: Engincan VESKE Date: Fri, 17 Apr 2026 14:13:36 +0300 Subject: [PATCH 7/8] Update index.md --- docs/en/cli/index.md | 43 ++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 42 insertions(+), 1 deletion(-) diff --git a/docs/en/cli/index.md b/docs/en/cli/index.md index c6387b77292..33ab01f4e8e 100644 --- a/docs/en/cli/index.md +++ b/docs/en/cli/index.md @@ -39,7 +39,7 @@ 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. - `**[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-module](../cli#new-module)**`: Generates a new module based on the given template. Use `--modern` to use modern module templates. - `**[new-package](../cli#new-package)**`: Generates a new package based on the given template. - `**[update](../cli#update)**`: Automatically updates all ABP related NuGet and NPM packages in a solution. - `**[clean](../cli#clean)**`: Deletes all `BIN` and `OBJ` folders in the current folder. @@ -251,6 +251,17 @@ For more samples, go to [ABP CLI Create Solution Samples](new-command-samples.md - `--legacy`: Generates a legacy solution. - `trust-version`: Trusts the user's version and does not check if the version exists or not. If the template with the given version is found in the cache, it will be used, otherwise throws an exception. +##### Modern Template Options + +The following options apply only when `--modern` is used: + +| Option | Description | Templates | +| --- | --- | --- | +| `--shadcn-theme ` | Shadcn/UI color theme. See [Shadcn Theme Values](#shadcn-theme-values). | all `--modern` templates | +| `--admin-password ` | Initial admin user password. | all `--modern` templates | +| `--modular` | Generates a modular monolith variant. | `app-nolayers --modern` | +| `--services ` | Comma-separated additional microservice names (for example: `Ordering,Shipping`). | `microservice --modern` | + #### Modern Templates Add `--modern` to any template to use its modern variant. Modern templates use a different template source (shipped with ABP Studio) compared to legacy templates (which use NuGet extension packages). They are **React-first** and have a narrower set of supported options. @@ -270,6 +281,10 @@ abp new Acme.BookStore --template microservice --modern > Blazor, Angular, MVC, and MAUI Blazor UI frameworks are **not** supported with `--modern`. The `maui` mobile option is also not supported with `--modern`. +> +> Options that are not supported by a modern template are ignored with a warning in the CLI output. +> +> `--modern` can also be used with `--ready-config-path` and `--solution-history-id`. In these cases, the template in the JSON configuration is mapped to its modern variant. When using `--template microservice --modern`, the generated solution includes: @@ -303,6 +318,17 @@ abp new Acme.BookStore --template microservice --modern --database-management-sy abp new Acme.BookStore --template microservice --modern --mobile react-native ``` +##### Shadcn Theme Values + +Use `--shadcn-theme ` with `--modern` templates: + +- `slate` (default) +- `pink` +- `blue` +- `turquoise` +- `orange` +- `purple` + ### new-module Generates a new module. @@ -320,6 +346,7 @@ abp new-module Acme.BookStore -t module:ddd #### options - `--template` or `-t`: Specifies the template name. Default template name is `module:ddd`, which generates a DDD module. Module templates are provided by the main template, see their own startup template documentation for available modules. `empty:empty` and `module:ddd` template is available for all solution structure. +- `--modern`: Uses the modern variant of the selected module template. - `--output-folder` or `-o`: Specifies the output folder. Default value is the current directory. - `--target-solution` or `-ts`: If set, the new module will be added to the given solution. Otherwise the new module will added to the closest solution in the file system. If no solution found, it will throw an error. - `--solution-folder` or `-sf`: Specifies the target folder in the [Solution Explorer](../studio/solution-explorer.md#folder) virtual folder system. @@ -332,6 +359,20 @@ abp new-module Acme.BookStore -t module:ddd - `blazor`: Blazor UI. - `blazor-server`: Blazor Server UI. +#### Modern Module Templates + +Add `--modern` to use the modern module variant: + +```bash +abp new-module Acme.BookStore.Orders --modern +abp new-module Acme.BookStore.Orders --modern -t module:ddd +abp new-module Acme.BookStore.Orders --modern -t module:standard +``` + +When the target solution itself is modern, the modern module variant is selected automatically even if `--modern` is not passed. + +Options that are not supported by a modern module template are ignored with a warning in the CLI output. + ### new-package Generates a new package. From 3b5397bc8d69a7596b4c94cdf217ba51c938e191 Mon Sep 17 00:00:00 2001 From: Engincan VESKE Date: Fri, 17 Apr 2026 14:20:11 +0300 Subject: [PATCH 8/8] Update index.md --- docs/en/cli/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/en/cli/index.md b/docs/en/cli/index.md index 060a84b6302..b7327bdf984 100644 --- a/docs/en/cli/index.md +++ b/docs/en/cli/index.md @@ -128,7 +128,7 @@ abp new [options] Examples: ```bash -abp new Acme.BookStore --template app --modern +abp new Acme.BookStore --template app ``` - `Acme.BookStore` is the solution name here.