Install Coveo for Sitecore JSS

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.

This article presents the contents of Coveo for Sitecore JSS and its installation instructions.

Coveo for Sitecore JSS consists of two parts, an NPM module and a Sitecore package (that is, the Coveo for Sitecore JSS Integration Package). The recommended version of Coveo for Sitecore to use alongside the JSS package is the March 26, 2021 release (5.0.943.3). You can find the link to download the Coveo for Sitecore JSS Integration Package in the installation instructions.

Integration Package Contents

The Coveo for Sitecore JSS Integration Package contains the following:

  • the Coveo.JavascriptServices.dll file

  • the Coveo.JavascriptServices.ImportProcessors.config file

  • the Coveo JSS Contents Resolver item

  • Coveo Hive JSS layout and template items

This package links imported Coveo components to a custom Coveo Rendering Contents Resolver, which uses the imported hiveDataSource attribute to provide data to the JSS component.

Installation Instructions

  1. Ensure you have already created a Sitecore JSS app. You will integrate Coveo for Sitecore JSS in your JSS app.

  2. In Sitecore, open the Installation Wizard and install the Coveo for Sitecore December 2020 (or newer) release for a Sitecore 9.2 or 9.3 environment (see Install).

  3. Configure and activate.

  4. Download the Coveo for Sitecore JSS Integration Package.

  5. Using the Sitecore Installation Wizard, install the Coveo.Jss.IntegrationPackage+1.X.X.XX.zip file.

  6. In the Sitecore content tree, ensure that you’ve created an API key in the /sitecore/system/Settings/Services/API Keys folder.

    Notes
    • The /sitecore/system/Settings/Services/API Keys folder is accessible in the master database.

    • The key name can be whatever you want.

    • For testing purposes only, you can set CORS Origin and AllowedControllers to *. Keep in mind that you should never do this in a serious environment.

  7. Ensure that you’ve configured your JSS app to link with your Sitecore instance.

Importing Coveo for Sitecore Jss Into Your Jss App

  1. Ensure that you’re running at least version 12 of Node.js.

  2. Run: npm install coveoforsitecore-jss

  3. Run: npm install globalize@0.1.1

  4. In your file system, in your JSS app folder, navigate to the /sitecore/definitions/components/ folder.

  5. In this /sitecore/definitions/components/ folder, create the CoveoForSitecore.sitecore.js file.

  6. Using a text editor, add the following lines to the newly created /sitecore/definitions/components/CoveoForSitecore.sitecore.js file:

    import coveoforsitecore from "coveoforsitecore-jss/dist/manifest";
    
    export default coveoforsitecore;
  7. In the scripts/generate-component-factory.js file, after the first three require statements, add the following statement:

    const { coveoForSitecoreComponentFactory } = require("coveoforsitecore-jss/dist/componentFactory");
  8. In the scripts/generate-component-factory.js file, immediately before the return /* eslint-disable */ line, add the following statement:

    coveoForSitecoreComponentFactory(imports, registrations);
  9. In the sitecore/definitions/config.js file, after the babelrc: false, statement, add the following statement:

    ignore: [/node_modules\/(?!coveoforsitecore-jss)/]