About the Starter Kit

We have launched the Sitecore Search JavaScript SDK, which allows users to create sites using Sitecore Search.

• @sitecore-search/react
• @sitecore-search/ui

As a sample using this, the Sitecore Search Starter Kit is available in the following repositories.

• Sitecore-Search-TS-SDK-Starter-Kit

This sample source code can be verified to be working at the following URL

• Sitecore Search - Demo

Do a search on the site

If you enter the keyword headless in the above demo site, you will see the following preview. Actually move the mouse cursor to see the preview change.

A drop-down menu to switch languages is also provided in the upper right corner. This allows Japanese-language content to be indexed and displayed as search results.

Execute local machine

Since a few additional steps are required to actually use the Starter Kit to display search results, we will explain the configuration steps in readme.md at a later date. For now, I would like to run it locally by connecting it to the demo instance already mentioned above.

Create a local clone of the Starter Kit repository. Then, create an .env file at the top of the repository and configure the following four items from the environment.

VITE_SEARCH_ENV=<environment - Expected values: prod, staging, prodEu or apse2 >
VITE_SEARCH_CUSTOMER_KEY=<customer key>
VITE_SEARCH_API_KEY=<API key provided in CEC>
VITE_SEARCH_PATH=<Path for the site>. This variable is optional, use it only if the site domain also includes an extra path.

Then, execute the following two lines.

npm install
npm run dev

When we accessed the displayed URL, we were able to confirm that it was working locally.

Summary

We have confirmed that the search page works with the Starter Kit, although the page can be easily created using the Sitecore Search SDK, and we have skipped over some of that part. In the next article, we will introduce the additional steps required to run the Starter Kit in the administration panel.

Tags

• Search