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

High CPU to completely normal CPU - SXA issue, SXA pages not loading in mobile device

  Hi Team, Today i am going to share one of the nightmarish issue with you all, We are having Sitecore 9.1.1 hosted in azure PaaS environment Our site was working just fine and no noise, but we have been working on a feature release where 7-8 months of development needed to be released to production, Big GO LIVE event right?  Also to make the development smoother we also introduced BLUE/GREEN deployment slots in the same release, so we can easily SWAP slots and go live Everything went well, we went live, we even did load and performance testing on our staging and pre-prod and we were confident enough of results Very next day we started getting "SITE DOWN" alerts, and also product owners and clients mentioned that site is very slow for them in US time and in our morning when we were accessing it, it was working lighting fast so we were clue less at start, but we started digging  1) First thing caught our eyes were HIGH CPU spikes, in US time, also without any traffic CPU u...
3 comments
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 10.3 XM Headless SXA - Placeholder "sxa-header" was not found in the current rendering data when partial designs are used

Hi Team,  Recently i worked on one migration project where app was alrady live and working on 10.2 JSS, but it was supposed to be migrated over to 10.3 headless SXA. Team already did everything and migrated things, and it was working just fine apart from couple of things, one of them and most difficult error we were getting was below   "Placeholder "sxa-header" was not found in the current rendering data" Because of above no components were getting rendered Following steps i did initially to look into the behavior of this error 1) Checked all placeholders on next app side as well as on sitecore side, all looked ok 2) Double checked that headless layout has those placeholder in allowed place holder lists  3) Double checked that my layoutserviceconfiguration is targeting "sxa-jss" configuration and not "jss" because we did not run jss set up command, its all was looking good and it was working fine for "headless-header. headless-main, headles...
Post a Comment
Read more