Tech with Jagmeet

Bring Your Own Components to XM Cloud: A Game Changer for Developers 

In the ever-evolving landscape of web development, the ability to customize and extend functionality is paramount. Sitecore’s XM Cloud steps up to this challenge with its “Bring Your Own Components” (BYOC) feature. This allows developers to bring their own code (BYOC) by referencing an external code base that includes components so that they can be used across the XM Cloud sites. 

The BYOC approach comes with several benefits: 

• Seamless Integration: BYOC components appear in the XM Cloud interface like default components, maintaining the privacy of its code. 

• Theming and Drag-and-Drop: You can apply theming in the Components builder and add them to pages just like any other component. 

• Hot Reloading: Hot reloading code in the browser when you develop locally, so that you can immediately see your changes on the page, including rendering the component in Pages or the final website. 

• Flexibility: BYOC allows you to create components using your preferred tools, dependencies, and techniques. 

• Reusability: Components can be reused across XM Cloud sites, streamlining the development process. 

• Automatic UI Configuration: The configuration user interface is generated automatically based on the JSON schema you provide, simplifying the content authoring experience. 

How to Add BYOC Components to XM Cloud 

There are two main ways to add your BYOC components to XM Cloud: 

1. Registering Manually: Place the components in a separate BYOC folder within your JSS Next.js application. 

To follow this approach, go to XM cloud Components –> Settings –> Rendering Host. You will find all the steps required for BYOC 
 

2. Scaffolding: Include the components in the components folder of your JSS Next.js application, alongside SXA components. Following are the steps for this approach: 

1. Run the jss scaffold command with the –byoc parameter. For example: 
   jss scaffold MyComponent –byoc 

2. The component builder automatically imports all components from the src/components directory into the JSS app as part of an automated registration flow. 

3. If you create in another folder, then automatic import and register does not work. So, you must follow below steps: 

1. First import the component, then register 
   import {registerComponent} from '@sitecore-feaas/clientside' 

registerComponent(...); 

Samples for BYOC that you can explore and utilize: https://github.com/Sitecore/feaas-nextjs-example

Rendering Modes Supported by BYOC 

BYOC supports various development and configuration options: 

• Client-Side: Ideal for adding interactive functionality like smart input fields or dynamic content. You add the client components to the byoc/index.client.ts file in your JSS app. 

• Hybrid: The recommended approach, where a client-side component is pre-rendered on the server to improve initial rendering time and SEO. A hybrid approach supports server-side indexing of the component and allows you to load static designs even before the app is fully initialized. If you use a hybrid component, make sure you import it inside index.hybrid.ts 

XM Cloud’s BYOC feature is a testament to Sitecore’s commitment to flexibility and developer empowerment. By allowing the integration of custom components, XM Cloud not only enhances the user experience but also provides developers with the tools to innovate and create without constraints.