CMS Kit Pro with microservice template and react - How do/should I implement it? #10843

2 Answer(s)

• 

  0

  AI-Bot created one month ago

  Support Team ABP Agent

  • CMS Kit / CMS Kit Pro is ready to use in microservice solutions, but it does not come with a ready-made React “news/blog” UI that you can drop into your React app.
  • The typical approach for “news articles” is to use CMS Kit’s Blogging feature (blog + blog posts) or Pages (if you want URL-based pages). Draft/publish is handled on the CMS side via the module’s management UI; consumption (listing/detail) is your responsibility if you’re using React without the MVC public website.

  1) What you should implement for a “News” feature

  1. Use CMS Kit Blogging as “News”:
     • Create a “News” blog in CMS Kit admin.
     • Add posts (draft/review/publish flow as provided by CMS Kit management experience).
  2. In your React app, create:
     • GET /news list page (fetch blog posts)
     • GET /news/:slug detail page

  2) How to add CMS Kit Pro to a microservice + modern (React) solution

  1. Add the module to the relevant microservice (the one that will own the CMS data/endpoints) using the standard microservice module installation approach.
  2. Enable CMS Kit / CMS Kit Pro global features in the solution (via GlobalFeatureConfigurator), then create migrations and update the DB in that service.

  Use the official “add module to microservice” guide for the gateway/routes/migrations/connection-string mapping aspects (this is the definitive integration doc for microservices).

  3) Do you need to build the React frontend yourself?

  Yes for the public-facing pages (news list/detail) in your React app.

  ABP’s React direction is “source-owned UI” (your pages live in your React app), while administration is handled by the pre-built React Admin Console. There isn’t an official “CMS Kit provides ready React public pages/widgets you can reuse” story in the verified sources.

  4) Are there examples you can use?

  • There is an official CMS Kit demo app you can reference for feature usage and overall behavior (it’s not React-based, but it’s the canonical sample for how CMS Kit is used end-to-end).
  • For your microservice wiring, follow the official microservice “add module” guide.

  5) Should you build your own CMS instead?

  If your requirement is “draft/publish news articles + store content + management UI”, CMS Kit / CMS Kit Pro is the intended ABP module for that. You’ll just implement the React pages that display the content.

  ---

  Sources (validated)

  • https://docs.abp.io/en/abp/latest/Modules/Cms-Kit/Index
  • https://docs.abp.io/en/commercial/latest/modules/cms-kit/index
  • https://abp.io/docs/latest/guides/add-module-to-microservice
  • https://github.com/abpframework/cms-kit-demo
  • https://cms-kit-demo.abpdemo.com/
  • https://abp.io/community/articles/tiwvceqd
  • https://abp.io/docs/10.4/framework/ui/react
  • https://abp.io/docs/10.4/framework/ui/react/admin-console
  • https://abp.io/community/articles/7rfmgb2v

  ---

  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)

  Save Cancel
• 

  0

  maliming created one month ago

  Support Team Fullstack Developer

  Hi,

  CMS Kit can be used as the backend in a modern microservice solution, but it does not currently provide a React administration UI or React public pages. The modern microservice template also does not create a CMS service automatically.

  For a basic news publishing feature, Volo.CmsKit is enough. Its Blogging feature provides blogs, blog posts, media support, management/public HTTP APIs, permissions, and the built-in Draft, WaitingForReview, and Published states. These are fixed states and management endpoints, not a configurable approval workflow. If you need multi-level approval, task assignment, or approval history, you need to implement those rules on top of CMS Kit.

  A practical setup is:

  1. Add a dedicated CmsService from ABP Studio and enable its integration with the current solution.
  2. Run the following command from the new service directory:

  abp install-module Volo.CmsKit
  

  Use abp install-module Volo.CmsKit.Pro only if you also need Pro features such as newsletters, polls, FAQs, URL shorting, or page feedback. CMS Kit Pro does not add another approval workflow for blog posts.

  3. Enable the CMS Kit Blogs global feature before module initialization and EF Core model creation. Confirm that the no-layer DbContext contains ConfigureCmsKit() or ConfigureCmsKitPro(), then add a migration and update the CmsService database.
  4. The generated no-layer service already includes Database Blob Storing. Confirm its provider and the AbpBlobStoring connection string instead of installing Blob Storing again.
  5. Add routes for all three CMS Kit API prefixes to the CmsService cluster in the YARP Web Gateway:

  /api/cms-kit/{**catch-all}
  /api/cms-kit-admin/{**catch-all}
  /api/cms-kit-public/{**catch-all}
  

  The /api/cms/{**catch-all} route generated for a service named CmsService does not cover these paths.

  6. Add the CmsService OAuth scope to both apps/react and apps/react-admin-console, then run the OpenIddict data seeder again. Assign the CMS Kit Blog Post read, create, update, and publish permissions to the corresponding editor/reviewer roles.
  7. Implement the CMS management pages in apps/react-admin-console and the public news list/detail pages in apps/react.

  For public news, this list endpoint returns published posts:

  GET /api/cms-kit-public/blog-posts/{blogSlug}
  

  In ABP 10.4, do not expose the following detail endpoint directly as a published-only endpoint:

  GET /api/cms-kit-public/blog-posts/{blogSlug}/{blogPostSlug}
  

  It resolves the post by the blog and post slugs without checking for the Published status. Add a facade endpoint for your React application that verifies the status before returning the article.

  The official CMS Kit Demo uses MVC / Razor Pages. There is no official React CMS Kit sample that can be added directly to this solution.

  You can find the relevant documentation here:

  • https://abp.io/docs/10.4/solution-templates/microservice/adding-new-microservices
  • https://abp.io/docs/10.4/studio/solution-explorer
  • https://abp.io/docs/10.4/modules/cms-kit
  • https://abp.io/docs/10.4/modules/cms-kit/blogging
  • https://github.com/abpframework/cms-kit-demo

  One version note: 3.0.9 is the ABP Studio version, not the ABP Framework version. A solution created with Studio 3.0.3 used ABP 10.4.0 by default, unless its package versions were upgraded separately. Updating ABP Studio does not automatically update an existing solution.

  Thanks

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel