Skip to main content

Sitecore XM Cloud Components - BYOC - Bring in your existing react or nextjs component library

Hi All,

Last year i did lot of research and hands on to "XM Cloud Component Builder", Very powerful futuristic tooling provided by Sitecore.

At that time it was still in "Early Access" phase.

You can have a look at my "SUGCON 2023 - Presentation on XM Cloud Component Builder"  to know about it's capabilities and use cases.

and if you are PODCAST lover, find the podcast here 


I would highly recommend going through above video or podcast to understand "Low code, No code" and what is "FeaaS" and power of it, As LCAPs (Low Code Application Platforms) are growing at the speed of around 25% every year, And it's a future.

Now, Let's talk about Part-2 of it, more advance use cases of "XM Cloud FeaaS", Once you have understanding of the component builder, you can do wonders, and this part-2 we will talk about something amazing it can do which is BYOC, Bringing Your Own Components.

What is BYOC - Bring Your Own Code (Or Components)

In Part-1, this feature BYOC was still under development, but now it is live from long time and available and as its name suggests, you can technically bring your already developed react / NextJS component directly into XM Cloud, Developers can bring their own code (BYOC) by referencing an external code base that includes components so that they can be used in the component builder interface.

Sounds so powerful right? Also, it could be great sellable point or a feature where, you do not have to rewrite your business code which you had in those components which you have created in react or NextJS, that means you can almost get them working straight into XM Cloud.

It opens endless possibilities for those customers who already have their component libraries and the sites using those components, and with composable features of XM Cloud, they can reuse their code too.

My Experience working with it.
 

There are three options I have personally configured and work like a charm.

1) If you have XM Cloud Starter Kit Repo and XM Cloud Project already, it has seamless support where you can just do certain configurations and your react/NextJS components which are in XM Cloud StarterKit code will come to life in component builder, we will see the steps later in this blog

2)  If you have existing NextJS components already, you can bring those components straight to your builder & start using them on "Pages".

3) If you have existing react components already, you can bring those components straight to your builder & start using them on "Pages".

You can bifurcate these approaches in two broader categories.

1) Using an existing rendering host of XM Cloud - When your components are made part of XM Cloud Startkit which you are already using, in that case you do not require to add any external rendering host, XM Cloud default rendering host will take care of it.

2) Using "External Rendering Host" - In cases where your react/NextJS components are already residing in some other source control and live on some other sites and which you want to bring into XM Cloud component builder, Here it needs the live URL of the site to be configured into XM Cloud, If the components are configured correctly (which I will show you in this blog), XM Cloud will read those components too.

What are the steps?

Ok, Let's talk about the steps first, 

1) If you are trying to use your react or NextJS components to be made available, then first you will need to install below in your code repo

npm install @sitecore-feaas/clientside

2) Go to your component which you want to import and write below line 

/* eg. src/components/MyComponent.js */

import * as FEAAS from "@sitecore-feaas/clientside/react"

3) You will need to register the component

FEAAS.registerComponent(ExampleClientsideComponent, {
  name: "clientside-only",
  title: "Clientside-only component",
  description: "Description of my example component",
  thumbnail:
    "https://feaasstatic.blob.core.windows.net/assets/thumbnails/byoc.svg",
  group: "D Section",
  required: ["firstName"],
  properties: {
    firstName: {
      type: "string",
      title: "First name",
    },
    lastName: {
      type: "string",
      title: "Last name",
    },
    telephone: {
      type: "number",
      title: "Telephone",
      minLength: 10,
    },
    bold: {
      type: "boolean",
      title: "Show text in bold weight",
    },
  },
  ui: {
    firstName: {
      "ui:autofocus": true,
      "ui:emptyValue": "",
      "ui:placeholder": "Write your first name",
    },
    bold: {
      "ui:widget": "radio",
    },
  },
});

Remember BYOC support is out of the box for XM Clodud Starter repo, above steps are only for if you want your existing NextJS component to be registered and available in XMC as external rendering host

I think it is very powerful way of working where you can just Bring Your Code in and it just works, That means you do not have to rewrite those components for xm cloud but you will be able to see those components exactly like your current react site and will be able to drag & drop them on the pages

Reference - Walkthrough: Registering an external React component | Sitecore Documentation

Comments

Post a Comment

Popular posts from this blog

An error occurred while receiving the HTTP response to This could be due to the service endpoint binding not using the HTTP protocol. This could also be due to an HTTP request context being aborted by the server (possibly due to the service shutting down). See server logs for more details.

You have noticed many times that everything was working fine and suddenly the below error starts coming and you find no way to work it out An error occurred while receiving the HTTP response to This could be due to the service endpoint binding not using the HTTP protocol. This could also be due to an HTTP request context being aborted by the server (possibly due to the service shutting down). See server logs for more details. The reason for this is the receiving size of WCF service is smaller then the data which is coming from service It was working before because it was small,So you will have to try to increase the receiving setting in your end point,Possible settings can be following maxStringContentLength="2147483647" maxReceivedMessageSize="2147483647" maxBufferSize="2147483647" maxArrayLength="2147483647" That would definately help you!!!
1 comment
Read more

Set up leprechaun code generation with Sitecore XM Cloud Starterkit

Hi Sitecorians, It has been amazing learning year so far and with the change in technology and shift of the focus on frontend frameworks and composable products, it has been market demand to keep learning and exploring new things. Reasons behind this blog Today's topic is something that was in my draft from April-May, and I always thought that there is already a good documentation out there for  Leprechaun  and a blog post is not needed, Until I realized that there was so many of us facing same kind of issues and same kind of problems and spending same amount of time, That is where I thought, if I could write something which can reduce that repetitive troubleshooting time, That would really help the community. 1)  In a project environment, if we get into some configuration issues, we resolve them, we make sure we are not blocked and continue, but if you think same issue, same step and same scenario will come to other people, so if we can draft it online, it will help othe...
Post a Comment
Read more

Sitecore Stream - Configure AI capabilities into Sitecore XP using Stream Platform DxP package

Hi Folks, Recently, I delivered a webinar on "Do more in era of less with AI capabilities, Ideation to execution with Sitecore Stream" and I also have a blog around the same which you can read here on  Sitecore Stream - Do more in era of less with AI capabilities, Ideation to execution The purpose of the webinar session and above blog is to first set the tone for reader and audience to understand what Sitecore Stream is and how it operates and what values it can bring in, if possible, I will share the slides too so you can go through it. That session and the blog above were more from how Sitecore Stream is solving marketer's challenges Today, I will be showing you how you can configure the power of stream and its Brand Aware AI capabilities right into your on-prem XP, Why XP is because all other SaaS based (Cloud based) DxP products like XMC, Search, CH already has the power of Stream, So I will show you the steps of configuring Stream into on-prem XP version. Prerequisit...
Post a Comment
Read more