I am thrilled to share a project I've been working on with my friend and esteemed colleague, Elakk. Together, we have been exploring the capabilities of Builder.io, a visual headless CMS that facilitates the creation of fast, immersive, and dynamic experiences through a low-code approach.
Builder.io has already taken strides in offering data plugins, seamlessly integrating with other headless CMS platforms such as Contentful, Kontent.ai, and Contentstack. Recognizing the potential of this technology, we thought about extending its reach and compatibility even further by introducing a new integration for Content Hub ONE, the agile, full-headless CMS offering from Sitecore.
With this integration, Builder.io users can now harness the power of Content Hub ONE, leveraging its features to enhance content creation and management processes. The seamless collaboration between Builder.io and Content Hub ONE opens up a world of possibilities, enabling developers, designers, and content creators to optimize their workflows and deliver better digital experiences.
About Builder.io
Builder.io is a headless Content Management System (CMS) that offers a visual editor, allowing users to drag and drop components directly within their current website or application. It operates through APIs, promoting cleaner code and simpler workflows.
Key Features
Plug & Play
- Integrates seamlessly with existing websites and apps.
- Compatible with any frontend or backend technology.
- Utilizes user data, like product catalogs or customer data platforms, to create dynamic experiences.
Drag & Drop
- Empowers users to visually build with their own design systems and code components.
- Offers building blocks for creating custom experiences from scratch.
- Reduces the need for constant developer intervention in content and experience management.
Click & Go Live
- Enables one-click publishing of new experiences and A/B tests.
- Allows content scheduling to align with roadmaps and campaigns.
- Facilitates A/B testing and content personalization without compromising quality and performance.
- Provides engagement metrics for informed content and digital strategy decisions.
In summary, Builder.io offers a visual headless approach, making website and app building more intuitive, flexible, and efficient for users of all skill levels.
The data plugin
Builder.io allows us to use (or create our own) data connector plugins to enrich the data available in Visual Editor Sections and Pages from external sources. With a data plugin, teammates can select entries or query the source and bind to the results of queries directly in Builder.
Using the plugin
Since the plugin is currently under active development, it hasn't been officially submitted to Builder just yet, we're eager to welcome collaborators to join us on this and collaborate.
To get started with the plugin and become a part of our collaborative effort, you can easily clone the GitHub repository and launch the server. This approach grants you early access to explore the plugin's functionalities, test it, and provide feedback.
So, just some very simple steps to get started:
1git clone https://github.com/MiguelMinoldo/builder-contenthub-one-data-plugin.git
1npm run start
Now, we are ready to add the plugin to Builder, for doing this, go to the Account Settings and then click on Space -> Plugins:
Then, add the server we just started previously: http://localhost:1268/plugin.system.js
Now the plugin is added to our app, we just need to enter the Client Id and Client Secret from Content Hub ONE to enable the plugin:
Using Builder.io with our app
We are now ready to start integrating our website with Builder.io and connecting to Content Hub ONE content through the plugin. For this demo, I'm using Builder to integrate pages into a simple Next.js app that I also deployed to Vercel, please follow the steps from the official documentation.
Please note that on top of page building, you can also integrate section building and structured data, please check the documentation to learn more about the different approaches.
Let's start by creating a new empty page and building it with content from Content Hub ONE:
We are ready to go! I'll build a simple recipes page by using the demo content from the Content Hub ONE Next.js starter kit, check out the video to see how simple it is to start using the plugin and integrating with Content Hub ONE.
Watch as I walk you through the process of building pages and components, showcasing the simplicity and efficiency of this powerful combination:
Invalid YouTube URL: https://youtu.be/LjJc8LjyEEI
In the video, I demonstrated just how effortless it is to kickstart your app development journey by seamlessly integrating data from the Sitecore headless CMS Content Hub ONE.
Let's use now a Builder template to build a quick and better-looking page and also the "Query" option to retrieve all recipes at once, check this out in the next video!
Key Takeaways
Begin by clicking on the "Connect Data" button, which will initiate the data connection process. From the available options, select "Content Hub ONE" as the preferred data connection source:
Then, a popup will show you the different content types we have in Content Hub ONE
Next, a popup will appear, showcasing the diverse range of content types available within Content Hub ONE:
Entry and Query options
The next step is to tell the plugin if you want to get a specific content item or use the search instead.
The next step is to instruct the plugin on your preference: either retrieving a particular content item or opting for a search-based approach.
Specific Entry - Click on "ENTRY" tab and then "Pick An Entry" and you will get the contents associated with this type:
Please note that the search box helps filter results, especially when dealing with a large number of content items.
Query - Click on the "QUERY" tab, then you can configure the "Order by" option by using the dropdown. Then click on the "Advanced" option in order to enter the query, this will retrieve all content items matching the search results:
Element Data Binding
Select any component (or drag & drop a new one) to the page, then you are ready to start binding fields between Content Hub ONE and Builder.io:
Please note that you can also assign element bindings from the right panel:
Builder Preview URL
You can start developing locally, by starting your local server and setting it up as the Preview URL of Builder. When you are ready to test it, you can deploy your app to Vercel and update the Preview URL:
Important Note
During the plugin development process, we encountered certain obstacles with the way Builder.io handles content exposure through public URLs. Specifically, passing the Content Hub ONE token as a query string was deemed an unsafe option. You can find here the question raised in the Builder forum.
To overcome this challenge, we devised a middleware solution that securely encrypts and decrypts the Client Id and Secret, enabling us to query the Content Hub ONE endpoints safely. Here is an example of the middleware response:
That being said, please use this at your own risk, and as I already mentioned please feel free to collaborate with this plugin!
Conclusion
In this article, we quickly explored Builder.io, a dynamic visual headless CMS enabling fast, immersive experiences through low-code development. We extended its capabilities by integrating with Content Hub ONE from Sitecore. Our demo showcased Builder.io's seamless integration with Content Hub ONE, empowering creators to build exceptional pages and components for a Next.js app.
While under development, this integration enhances content creation and management processes. To get involved, clone the GitHub repo and join the collaboration.
I hope you find it interesting!
References
- Sitecore Content Hub ONE documentation
- Builder blog post:Using Contentful Data in Builder's Visual Editor
- Data plugin code example: Builder's data plugin example on GitHub
- Data plugin for Contentful in production: Contentful plugin on GitHub
