Welcome! This repository is used for custom sitecore Search demos within the SE organization. It is built on NextJs and leverages the Sitecore Search JS SDK for React.
These instructions assume you have some background in developing apps in React or NextJS. For more detailed instructions that are beginner-friendly, follow the steps outlined here instead: Search Sandbox (Beginner Instructions) in Loop
Before you begin, You must have the following installed on your computer:
Other helpful links:
- Command Line Cheat Sheet (Mac)
- Command Line Cheat Sheet (Windows)
- GIT Cheat Sheet
While not required, it is recommended to run through the CEC setup instructions outlined in Loop before setting up your local demo app. Some of the instructions outlined below require having your RFKIDs ready.
We recommend setting up a new project for each custom Sitecore Search Demo you run. This allows you to refer back to old demos or work on multiple at a time if necessary.
In your terminal, clone the repository in the folder of your choice (rename folder for clarity, e.g., customer name)
git clone https://github.com/SitecoreNA/Sitecore-Search-TS-SDK-Starter-Kit.git <project-name>Navigate into your newly created project folder and install the necessary dependencies.
npm iOpen your project files in the code editor of your choice.
In the root of your new project folder, create an .env file, then paste the following environment variables inside.
NEXT_PUBLIC_SEARCH_ENV=prod
NEXT_PUBLIC_SEARCH_CUSTOMER_KEY=<INSERT CUSTOMER KEY>
NEXT_PUBLIC_SEARCH_API_KEY=<INSERT API KEY>
NEXT_PUBLIC_SEARCH_SOURCE=<INSERT SOURCE ID>You will need to replace the Customer Key and API Key with the values from the Developer Resources > Api Access in the CEC domain you are leveraging. We are generally using the domain called Sales Engineering - AMS.
The Source ID will be generated from source you set up during the CEC setup. If you haven’t generated your Source ID yet, make sure to complete that setup first before continuing. If you need to use multiple sources, use the pipeline character to append multiple sources. Example:
NEXT_PUBLIC_SEARCH_SOURCE=1234|5678Now you're ready to run the application.
npm run devOpen http://localhost:3000 with your browser to see the result.
This application provides the essential components and functionality to run a search demo out of the box, and includes Sitecore branded default components.
To customize some of the branding elements as well as use your own widgets you may have built in the CEC, in your project folder, find the customizations.ts file in /src/app/_data/customizations.ts and open it.
Here you will find variables which allow you to override some of the most common customizations. For example, changing the header logo or selecting your own Q&A default question.
To change the default links within the footer component, find the footer.json file in /src/app/_data/footer.json and open it. You can then swap out the links with examples from the customers website.
For those who are more advanced with their coding skills, feel free to adjust any of the components to your needs. For example, you may want to adjust the default header to be more in line with the customer's website header.
Refer to your terminal and/or browser console for troublshooting errors.
Additional Troubleshooting information may be found here as well: Search Setup Troubleshooting
If you navigate to your http://localhost:3000 URL and see the following message:
Check that you are running your application properly within the terminal by running npm run dev
If you're hitting the following error message in your terminal when running the npm i command, you are most likely in the incorrect folder. The error path within the message will indicate the current folder you are in.
npm error path /you/current/path/package.json
npm error errno -2
npm error enoent Could not read package.json: Error: ENOENT: no such file or directory, open '/your/current/path/package.json'
npm error enoent This is related to npm not being able to find a file.Use cd to navigate to your repositories correct path on your computer.
Helpful Hint: You can check your current directory by using the command pwd (Mac users) or cd (Windows users). To automatically open your terminal to the correct path of your project, would be to fully close VS code, then reopen by dragging the folder onto the VS code app icon. This should automatically open your project in VS code and start you at the proper location within your terminal.
If you're seeing the following message in your terminal when running the npm run dev command, make sure you have properly installed your application packages with npm i.
> search-sandbox@0.1.0 dev
> next dev --turbopack
sh: next: command not foundIf you're seeing the following error message when opening your local application in the browser, make sure you have properly created your .env file per the directions in the Getting Started with a new Project section and it is located in the root of your project folder.
