docs: React UI (CLI & UI Framework docs)#25245
Open
Conversation
Made-with: Cursor
Made-with: Cursor
Made-with: Cursor
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.
EngincanV
changed the title
…pers 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.
…g developers define which files should be included or excluded" This reverts commit 6c41530.
Contributor
There was a problem hiding this comment.
Pull request overview
Adds documentation for the new React UI (modern template system) and updates CLI/UI docs to describe the --modern workflow, including navigation updates so the new React docs are discoverable.
Changes:
- Added a new React UI documentation page describing the modern React solution structure, Admin Console, and configuration.
- Updated ABP CLI docs to document
--modernand “modern template” options. - Updated UI docs navigation/index pages and adjusted Markdown formatting in a few existing UI docs.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 19 comments.
Show a summary per file
| File | Description |
|---|---|
| docs/en/framework/ui/react/index.md | New React UI overview doc for modern templates (React app + Admin Console). |
| docs/en/framework/ui/react-native/index.md | Markdown formatting changes; several screenshots were replaced with plain text placeholders (needs fixes). |
| docs/en/framework/ui/mvc-razor-pages/overall.md | Markdown formatting changes; Basic Theme screenshot was replaced with plain text (needs fix). |
| docs/en/framework/ui/index.md | Adds React to the UI options list and SEO description. |
| docs/en/docs-nav.json | Adds React docs section to the left navigation. |
| docs/en/cli/index.md | Documents --modern and modern template options; multiple Markdown rendering issues introduced (needs fixes). |
| {{ else }} | ||
|
|
||
|  | ||
| react native microservice environment local IP |
There was a problem hiding this comment.
This section appears to have lost the screenshot and now shows only placeholder text. Restore the Markdown image for the microservice environment example (docs/en/images/react-native-environment-local-ip.png).
Suggested change
| react native microservice environment local IP | |
|  |
| 2. Press **a** to open in Android Studio. | ||
|
|
||
|  | ||
| React Native login screen on Android Device |
There was a problem hiding this comment.
The Android Studio login screenshot was replaced with plain text, which removes the image from the docs. Restore the Markdown image syntax referencing docs/en/images/rn-login-android-studio.png.
Suggested change
| React Native login screen on Android Device | |
|  |
Comment on lines
+39
to
+53
| - `**[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. 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. | ||
| - `**[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. |
There was a problem hiding this comment.
The command list items are wrapped in backticks with mismatched bold markers (e.g., **[help](../cli#help)**). This breaks Markdown rendering and link formatting; use normal Markdown links (optionally bolded) without surrounding backticks and ensure the ** pairs are balanced.
Suggested change
| - `**[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. 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. | |
| - `**[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. | |
| - **[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. 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. | |
| - **[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. |
| {{ if Architecture == "Monolith" }} | ||
|
|
||
|  | ||
| react native monolith environment local IP |
There was a problem hiding this comment.
This section appears to have lost the screenshot and now shows only placeholder text. Restore the Markdown image for the monolith environment example (the image file exists under docs/en/images/react-native-monolith-environment-local-ip.png).
Suggested change
| react native monolith environment local IP | |
|  |
| 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 |
There was a problem hiding this comment.
The React Native intro image was replaced with plain text ('React Native gif'), so the image no longer shows. The referenced file exists at docs/en/images/react-native-introduction.gif; restore the Markdown image syntax.
Suggested change
| React Native gif | |
|  |
Comment on lines
+141
to
+144
| - `--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: |
There was a problem hiding this comment.
The template list under --template has broken emphasis/code formatting (e.g. **empty**, **app**). This is invalid Markdown and will render oddly; consider using plain list items like - **app**: ... (or - app: ...) consistently.
| - `--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. |
There was a problem hiding this comment.
Typo: "Skipts" should be "Skips".
Suggested change
| - `--no-social-logins` or `-nsl`: Skipts the social login configuration. | |
| - `--no-social-logins` or `-nsl`: Skips the social login configuration. |
| ``` | ||
|
|
||
|  | ||
| Razor Page |
There was a problem hiding this comment.
The screenshot Markdown image for the generated Razor Page output was replaced with plain text ('Razor Page'), which removes the image from the docs. Since the image file exists (docs/en/images/abp-generate-razor-page.png), restore the  image syntax here.
Suggested change
| Razor Page | |
|  |
| 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 |
There was a problem hiding this comment.
The Basic Theme layout screenshot was replaced with plain text ('basic-theme-application-layout'), so the image no longer renders. Other UI docs still use the image at docs/en/images/basic-theme-application-layout.png; restore the Markdown image syntax here for consistency.
Suggested change
| basic-theme-application-layout | |
|  |
| ``` | ||
|
|
||
| 5. Finally, run the `generate-razor-page` command under the `Views` folder: | ||
| 1. Finally, run the `generate-razor-page` command under the `Views` folder: |
There was a problem hiding this comment.
This numbered list continues from steps 1-4 above, but this line restarts at 1. ('Finally...'). Update the numbering so it continues the sequence (e.g., step 5) or restructure the list to keep numbering consistent.
Suggested change
| 1. Finally, run the `generate-razor-page` command under the `Views` folder: | |
| 5. Finally, run the `generate-razor-page` command under the `Views` folder: |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Documented the new
--modernparam to use the new templating system with React UI support.@enisn You can wait for tests on ABP Studio & AdminConsole sides before merging this one.