I want to develop an admin dashboard template with chat functionality and a to-do application.
How effective would it be to use React admin templates with Plone components, and what challenges might arise?
You will have to describe in more detail what you have in mind
I've Modernize React Admin Template from AdminMart. I want to configure this template with the plone components.
Plone is a CMS which means its well suited to websites with content like blogs, publications, pages etc. dashboard apps with data is less well suited so is there is a reason you want to use a CMS?
To take any off the shelf theme and use it with volto you have two options
- take the theme apart, customise volto to make it look like the original theme. Follow the volto tutorials on how to do this. If the theme is react based this helps.
- use plone in a headless way. Get the page data from the restapi, use a framework like next.js. and use your theme with that to render your pages. Then use volto unthemed to edit those pages. In this case, it doesn't matter if the theme is react/vue/svelte or whatever
Either way a page consists of blocks of grids, paragraphs, images, sliders etc which is what you find in a websites theme rather than an admin dashboard one.
Thanks for the explanation! I need Plone for its CMS features but want a custom admin dashboard. Using Plone headless with REST API and Next.js sounds good. Do you have any guides or examples for this approach?
@vaibhav5 So you want to use CMS for some parts and the data source for the dashboard would be a different api built entirely seperate to plone?
In this case, headless is indeed a good way to go.
It's not really well documented. There was effort put into using gatsby awhile ago - Asko Soukka: Plone and Volto in a Jamstack project — Maurits van Rees, there are also talks about it, but I don't recommend going down that route. I think next.js/nuxt.js or astro give you more flexibility.
We launched a GSoC last year to make the editing experience of a headless Volto setup much better. That is one place to see examples on how it's done.
In the examples folder is a next.js and a nuxt.js example. The nuxt.js is perhaps more feature complete.
Hydra editor that these are linked to is not completed so I wouldn't recommend using it yet. But you can still have a seperate volto instance which you use to edit. It just won't look how the final page would look. If the standard blocks you want to use look similar to how your final rendered version in the frontend would look then it should be fine.
@vaibhav5 There is also this talk from last years conference
there is also the talk on hydra which might give you more context on what it was trying to do - https://www.youtube.com/live/KE9iiGH-WF4?si=tMT26nBo2i4QWRIU but wasn't enough time to go into the details on how to build your own frontend.