I’m currently working on a project built with an ABP Microservice architecture, using Angular for the web UI. It has been working very well for the existing system.
Now, we need to develop a Mini App for mobile (essentially a webview embedded an existing mobile application). The project is reusing all existing backend services as the Mini App server.
The main question is about the frontend approach:
- Reusing the existing Angular UI doesn’t seem suitable because it is not optimized for mobile interfaces.
- Creating a new Angular project raises questions about how to best leverage existing ABP features and infrastructure while still ensuring a mobile-optimized UI.
What would be the recommended approach in this case to:
- Reuse as much as possible from ABP (e.g., authentication, API integration, modules, etc.)
- While building a UI that is properly optimized for mobile (Mini App / WebView context)?
Thank you!
3 Answer(s)
-
0
- Create a separate, mobile-optimized UI project (don’t try to “force” the existing ABP Angular UI to be mobile-first). Keep the existing ABP Angular app for desktop/admin use, and build a dedicated Mini App UI that consumes the same microservice backends.
- If you want to stay in the Angular ecosystem and target a WebView / mobile UI, the most ABP-friendly approach is to create an Ionic Angular (or any custom Angular) app and integrate ABP Angular packages:
- Create the new mobile UI (e.g., Ionic Angular).
- Install ABP Angular core packages in the new UI:
@abp/ng.core(authentication helpers, RestService, localization, permission checks, etc.)@abp/ng.schematics(to generate API proxies)
- Configure the new UI’s
environment.tswith your ABP AuthServer/IdentityServer settings (issuer,clientId,redirectUri,scope, andapis.default.url). - Register a separate OAuth client for the Mini App (a new
ClientId) in your AuthServer/IdentityServer seeding (and allow the Mini App origin in CORS / redirect URLs). - Generate API proxies for the new UI using ABP CLI (so you can strongly-type your HTTP calls against your existing services):
abp generate-proxy -t ng -m identity -u https://<your-authserver-or-gateway-url>- Use ABP Angular
AuthServiceto redirect to login, and use the generated proxies (orRestService) for API integration.
- This gives you maximum reuse of ABP infrastructure while letting you fully redesign the UI for mobile:
- Authentication/OIDC flow stays standard ABP (redirect to AuthServer login page from the WebView).
- API integration via ABP-generated Angular proxies.
- Localization/permission checks/config state via
@abp/ng.core. - You only rebuild the UI layer with a mobile component library/layout.
Links (verified):
- https://abp.io/community/articles/ix98a3rr
- https://abp.io/docs/latest/solution-templates/application-module/
This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.
Markdown supported.Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post) -
0
Hello,
I recommend using the ABP React Native templates to get started. You can refer to the following resources:
Overview: https://abp.io/docs/10.3/framework/ui/react-native?Architecture=Microservice Article: https://abp.io/community/articles/automate-localhost-access-for-expo-a-guide-to-dynamic-7cblqtj3#gsc.tab=0 Tutorial: https://abp.io/docs/10.3/tutorials/mobile/react-native
Please note that these templates require more manual effort compared to other UI options. They primarily demonstrate how to integrate an ABP backend with React Native components, but do not include ready-to-use libraries like those provided for Angular UI. As a result, you may need to modify or remove some of the default behaviors to suit your needs.
You can let us know if you need further assistance. Thank you for your cooperation.
Markdown supported.Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
