Headless content + client side React on Enonic XP + cloud


#1

Hi, how can we set up Enonic XP to deliver headless content and rendering client side react for our company website on your cloud servers?

We also want a preview of content in Enonic before its published.


#2

Hi Vlu!
Are you simply producing a regular web page, but want it (or parts of it) rendered with React?
In this case, you have several options, but I would recommend the following:

  1. Deliver the “main elements” like header/footer traditionally, i.e. using thymeleaf
  2. Include react components and scripts with the page, and a tag for React to use as a starting point.
  3. React now takes over and needs data. You can
    a) Leave content inline with the initial HTML in JSON/similar format
    b) Have React retrieve the the data through an endpoint, preferably using lib-guillotine and GraphQL.

Done right, this will should work perfectly well in the preview also.

If you are not building a regular webpage, you will have to setup a mock rendering to get a preview, and then expose the data over an API, as described in 3b.