Coveo for Sitecore JSS

Coveo for Sitecore JSS gives you the ability to deploy a Coveo-powered search interface within your Sitecore JSS apps. In this article, we present information about:

  • the scope of support for Sitecore JSS

  • functionalities available in Coveo for Sitecore JSS

  • leading practices to make the most of Coveo for Sitecore JSS

  • the Coveo for Sitecore JSS workflow, from installing Coveo for Sitecore JSS to deploying a Coveo-powered search solution to your production environment.

Coveo for Sitecore JSS is a beta package. Compatibility is only tested with a limited subset of Coveo for Sitecore and Sitecore releases.

Supported Environments

The Coveo for Sitecore JSS package currently depends on Sitecore JSS 12.0.0. The package has been tested on Sitecore 9.2 and 9.3 instances, in Sitecore JSS 12.0.0 and 13.0.0 apps.

In its current state, the Coveo for Sitecore JSS package can only be used with the Coveo for Sitecore December 2020 and newer releases due to a change in the analytics endpoint.

Supported Functionalities

The Coveo for Sitecore JSS package supports Coveo for Sitecore search pages and global search boxes in your content pages that redirect queries to your search page.

Coveo for Sitecore JSS implements lazy component loading, whether you’re referencing the CDN or the local resource files (see Using Local Resources).

In connected mode, data is fed to the Coveo for Sitecore JSS components through the .yml file hiveDataSource field value. The hiveDataSource field references a data source item in your Sitecore instance. Coveo for Sitecore JSS accesses the Coveo Search API and delivers search results from your Coveo Cloud indexes.

Disconnected mode is currently not supported.

Leading Practices

To create a full-fledged Coveo-powered search page, you can either assemble single-purpose components or use the Coveo Hosted Search Page component to pull and render the source code of one of your hosted search pages.

Simplicity of using The Coveo Hosted Search Page component

Implementation comparison. To the left, an incomplete and highly simplified Coveo-powered search page is assembled using single-purpose components, each requiring data source and YAML route file configurations. To the right, a search page is created simply by inserting the Coveo Hosted Search Page component to fetch the source code of a hosted search page. Upon creation of a hosted search page, whether directly in your Coveo organization or pushed to your organization using Coveo Turbo, it will already be functional and contain over 20 components!

The best way to work with Coveo for Sitecore JSS is to make use of the Coveo Hosted Search Page component, rather than using single-purpose components. In addition to being simpler to implement and more in line with the Sitecore-first workflow, using the Coveo Hosted Search Page component offers the following advantages:

  • You can make additional changes to the associated hosted search page in your Coveo organization or using Coveo Turbo and have those changes immediately reflected in your JSS app without needing to redeploy,

  • You can leverage all Coveo JavaScript Search Framework components ( whereas Coveo for Sitecore JSS single-purpose components only leverage a subset of the Coveo JavaScript Search Framework components and their options).

While a fair number of single-purpose Coveo for Sitecore JSS components are available, no more will be added in the future.

Example Workflow From Installation to a Production Environment Search Solution

Though the Coveo for Sitecore JSS search solution implementation and improvement process differs from one team to another, here is an idea of what a typical Coveo for Sitecore JSS workflow looks like.

Coveo for Sitecore JSS implementation workflow

One Installing phase In this phase, you learn about the architecture of Coveo for Sitecore JSS, you install the Coveo for Sitecore JSS Integration Package, and import Coveo for Sitecore JSS into your JSS app (see Install Coveo for Sitecore JSS).

Two Deployment phase In this phase, you add Coveo components to your JSS app, feed data to your components to configure them, and deploy your Coveo-enabled JSS app to your Sitecore instance (see Deploy Coveo for Sitecore JSS).

Three Search page development phase In this phase, developers use Coveo Turbo to edit locally the Coveo-powered search page(s) your app leverages. At the end of a development iteration, the search page(s) are pushed to a Coveo sandbox organization. The Coveo Hosted Search Page component(s) deployed in your JSS app then render the latest iteration of your search page(s) in your UAT environment (see Develop Hosted Search Pages With Coveo Turbo).

Four Search page deployment phase In this phase, the search page(s) tested in your UAT environment are deployed to your production environment, whether pushed through Coveo Turbo or using the Coveo Platform resource snapshot feature (see Search Page Deployment to Your Production Coveo Organization).

What’s Next?

Recommended Articles