Exploring Coveo Turbo Using Coveo JSUI

What Is Coveo Turbo?

Coveo Turbo is the initial framework to build powerful, custom components while attempting to standardize the processes and practices already in use within the community. For the purposes of this article, we'll take a look at just one of them this time around to show how to go about setting it up.

Before we can do that however, we need an environment to showcase it. In this instance, we're going to use the Coveo JSUI as the default installation of it is just what we need.

Why JSUI? Well, like Coveo Turbo is for JSUI, much of the same way that you'll be able to use Coveo Headless in combination with your favorite JS framework (e.g. React or Vuejs or Angular).

Think of JSUI as the platform for all the various and increasing Turbo components. It's not to say you're limited to only using this and only this, because as you are aware, there are several platforms, like Coveo for Sitecore's Hive that are merely platforms for building upon.

Setting Up Coveo JSUI

Before we can get to the fun of playing with Coveo Turbo, we need an environment to test it out with. What better, than Coveo JSUI which can be downloaded via Github here: https://github.com/coveo/search-ui-seed.

Step 1

After downloaded, copy the contents of the search-ui-seed-master/search-ui-seed-master directory to a project folder of your choice.

Step 2

Once copied, open up Terminal / Command Prompt, go to that directory.

Step 3

You'll be using npm to install all the node modules so if you don't already have Node JS installed, you'll need to do so. You'll need at least 8 or greater. If you need to install another Node version, be sure to read up on our blog about NVM and NPX for Multi-Project Environments. It'll allow you to run multiple Node JS versions on the same machine and likely save you the headache of trying to manage a multitude of requirements that each project might have.

Step 4

Once ready, you're going to use npm install to install all the necessary node modules of JSUI.

Step 5

After that has completed, you'll run npm run build to actually build the project and produce a website in the bin directory, complete with HTML, JS, and CSS. This command you'll be running lots as you update your project so keep it handy.

Step 6

Once completed, you'll be able to navigate to the bin directory. There, open up the index.html file produced in your local browser. You'll see the default results shown for the Coveo JSUI. We could stop here, but where's the fun in that. If you've setup a trial account, you could connect it to that but for the purposes of this article, we're sticking with the default results.

Utilizing Coveo Turbo

For the sake of the example we're going to take a look at the Recent Queries component, found here: - https://github.com/Coveo-Turbo/recent-queries. The purpose of this component is to display the recent queries you've made, kind of a breadcrumb trail, and place it wherever you'd like. Setup this component in our JSUI is straight forward; just follow along.

Step 1

First thing first, install the component using the command: npm i @coveops/recent-queries. Once complete you should see it added to the package.json file and the version that was used.

Step 2

Because we're using JSUI, which is TypeScript based, we can create a new file located under: src/ui/ and call it RecentQueries.ts.

Step 3

Open that file and fill it with the following:

import { RecentQueries, IRecentQueriesOptions } from '@coveops/recent-queries';

export interface IExtendedRecentQueriesOptions extends IRecentQueriesOptions {}

export class ExtendedRecentQueries extends RecentQueries {}
        

Step 4

Next, open up src/index.ts and update it to export our component. Your file should resemble the following when complete:

// This entry point defines all the component that should be included in your extension.

export { HelloWorld } from './ui/HelloWorld';
export * from '@coveops/recent-queries'
    

Step 5

Finally, open up pages/index.html and locate the CoveoSearchBox div. After this, include the following line (truthfully, for design purposes this can be anywhere).

<div class="CoveoRecentQueries" data-show-in-query-suggest="false"></div>
    

Step 6

Now rebuild using npm run build and once built, refresh your browser.

At first glance, it won't look like much has changed. But notice the "Recent Queries" text to the right of the search box? Keep an eye on it as we enter in queries. You'll notice after each subsequent query, it's added to the list on the right. They're clickable, though need styling, and you can even clear the list, by clicking the 'x' next to each query.

Just The Beginning

With Coveo Turbo, extending Coveo JSUI is now even easier. The benefits here are that you or your company can build components and drop them into future builds without a ton of effort. This speeds up development times of perhaps complex asks. We haven't even scratched the surface of extending this components future, but stay tuned as we'll be exploring more possibilities in the future.