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

Why SitecoreAI - Getting into the shoes of the customer how to select right CMS

Hi Team, Lately, I have been talking to lot of our customers / potential customers and having pre-sales demos where one question always comes is "Why Sitecore" ?  Now this question can be for any product which is out for sell. And as a technician I always get into product technical features, but at the same time as a pre-sales guy, it also makes me think, surely all competitive products have same features, so definitely answer to this is not in the technicalities.  If you step back and think, we are also a customer in our daily life and buy lot of things, what is that process we go through? When we buy, how can your customer decide if this is a right fit for you or not, why we select A over B? Is it price? is it service? Is it a brand? Is it about features? Is it about brand loyalty?  When it is a technical product, I am sure it cannot start with the technicalities of the product or selecting product itself, 100% not, I feel decision is always business strategy first and ...
1 comment
Read more

Hell of sitecore aliases pipeline breaking the site with 500 error

Hello Friends, I belive this blog post is very important for everyone because, It has some very serious effect on working of your headless website, i will share my experience what we faced and how we resolved it Issue we started facing Our site started giving "Key cannot be null or empty" with YSOD like following  Side affect Because of this 500 error, Our site pages were showing 500 custom error page intermittently and our MAU (Monthly Active User) drop rate increased. Sitecore KB There is already Sitecore KB article talking about this error but the patch which is provided on this link is confusing as well as very huge and it could bring other issues along with it as that upgrade patch also has lot of other things too which i did not want to introduce in our stable CMS. Known Issues - Retrieving the child items of resource items is not thread-safe Observation Though the surfaced exception was looking similar and giving same error and behavior given on this article, We looked...
Post a Comment
Read more

Zero to Hero - A real life RCA of exact issue in Sitecore Managed Cloud environment

Hello All, The purpose of today's post is to share a real life burning and escalated scenario which was new to me and how did I approach it and how big the escalations were and what was the outcome Sitecore's goodwill was at stack not because Sitecore is not capable of handling it but just because our environment was Sitecore Managed Cloud, and any issue that comes if its infra, back end code, front end code will be first pointed as Sitecore issue and that is where our consultancy and experience will play a role to prove that it is not Sitecore issue.  Issue we faced Out of the blue our site started giving "504 Gateway Time-out", and it was reported that almost everyone is getting this error, but when we used to browse the site, everything looked good and never 504. 504 Gateway Time-out error tells that, That the request went to Content Delivery servers of Sitecore from gateway, but gateway did not get response in time from those CDs and hence it gave time out error. ...
3 comments
Read more