Coveo for Sitecore JSS

This is for:

Developer System Administrator
Warning

Coveo will be sunsetting Coveo for Sitecore JSS in March 2023. Coveo for Sitecore JSS documentation will no longer be available after this date.

We recommend Coveo for Sitecore JSS users migrate their search interfaces. The Coveo Atomic and Headless libraries let you use your preferred web application framework (for example, React, Angular, Vue.js) to build search interfaces.

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.

Important

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.

Important

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 indexes.

Important

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 classic 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 classic 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 classic hosted search page, 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 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).

Important

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 | Coveo for Sitecore 5

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 create and edit classic hosted search pages in 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 Create Hosted Search Pages).

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

What’s Next?

Get started by installing Coveo for Sitecore JSS.