- Step 0 - Environment Setup
- Step 1 - Basic Configuration, Options, and Markup
- Step 2 - Interacting With the Search Interface and Component Instances
- Step 3 - Understanding the Event System
- Step 4 - Modifying the Query
- Step 5 - Create Your Own Search Endpoint With Authentication - API Key and Search Tokens
- Step 6 - Result Templates
- Step 7 - Usage Analytics
- Step 8 - State and QueryStateModel - Interacting With Component State and With the URL
- Step 9 - Advanced Integration With Custom TypeScript Component - Configuration
- Step 10 - Advanced Integration With Custom TypeScript Component - Implementation
Step 0 - Environment Setup
This step explains how to set up your local machine (whether it be running on Windows, macOS, or Linux) to be able to actively follow this tutorial.
This step is not mandatory. If you simply wish to get a better understanding of the different concepts without setting up a working environment, you can skip ahead and read the rest of this tutorial.
Make sure Git is properly installed and working on your local machine. It will be needed to clone the repository required for this tutorial.
Git can be downloaded from the following URL: https://git-scm.com/download.
Node.js will be used to install the project dependencies and run a developer server for this tutorial.
You can download Node.js from the following URL: https://nodejs.org/en/.
Make sure you use Node.js v4 or later. You can check what Node.js version is installed on your local machine by typing the following command in a terminal:
Clone the Tutorial Repository
In a terminal, from the folder into which you would like the tutorial repository to be cloned, type the following command lines:
git clone https://github.com/coveo/search-ui-seed.git cd search-ui-seed
This will clone the repository into a new folder named
search-ui-seed and navigate to the root of that folder.
Install Project Dependencies
Use npm, which is the package manager for Node.js, to install the project dependencies.
In a terminal, from the root of the
search-ui-seed folder, type the following command line:
This will download and install the dependencies required to build and run the project.
Once all dependencies have been correctly installed, type the following command line:
npm run build
This will build the entire project.
After the project has been built, type the following command line:
npm run watch
This will run a webpack-dev-server, which you can access to by opening http://localhost:3000 in a web browser (see webpack dev server). When you access the webpack-dev-server, you should see a fully configured search interface pointing to a sample endpoint.
You should now proceed to Step 1 - Basic Configuration, Options, and Markup.