Quick Start with Searchkit and React instantsearch
This guide will show you how to get started with Searchkit and React Instantsearch components.
If you use Next.js, checkout the Next.js guide for a simpler setup.
Quick Start
For this quick start, we are going to run Elasticsearch locally and build a small e-commerce search experience using Searchkit and instantsearch.
Running Elasticsearch
This quick start will need CORS enabled as we will be calling Elasticsearch / Opensearch directly from the browser. See Enable CORS to do this.
Alternatively, you can proxy the Elasticsearch / Opensearch requests. See Proxy Elasticsearch for more details.
Going to use Elasticsearch via Docker for this quick start.
For other options, see Setup Elasticsearch.
Below we are running Elasticsearch with CORS enabled and security disabled. For production, you should enable security and use an API key. See Setup Elasticsearch for more ways of connecting with authentication.
docker pull docker.elastic.co/elasticsearch/elasticsearch:8.6.2
docker network create elastic
docker run --name elasticsearch --net elastic -p 9200:9200 -p 9300:9300 -e "discovery.type=single-node" -e "xpack.security.enabled=false" -e http.cors.enabled=true -e "http.cors.allow-origin='*'" -e http.cors.allow-headers=X-Requested-With,X-Auth-Token,Content-Type,Content-Length,Authorization -e http.cors.allow-credentials=true -e network.publish_host=localhost -e xpack.security.enabled=false docker.elastic.co/elasticsearch/elasticsearch:8.6.2
Create an Index & index some data
Our data model will have the following structure:
- A
products
has manyproduct
documents - Each
product
document has aname
,price
,description
andcategories
attributes
Lets create an index called products
and add some data.
curl --location --request PUT 'http://localhost:9200/products' \
--header 'Content-Type: application/json' \
--data-raw '{
"mappings": {
"properties": {
"name": {
"type": "text"
},
"description": {
"type": "text"
},
"price": {
"type": "integer"
},
"categories": {
"type": "text",
"fields": {
"keyword": {
"type": "keyword"
}
}
}
}
}
}'
Now lets add some data to our index.
curl --location --request POST 'http://localhost:9200/products/_doc' \
--header 'Content-Type: application/json' \
--data-raw '{
"name": "Apple iPhone 12 Pro Max",
"description": "The iPhone 12 Pro Max is the most powerful iPhone ever. It has a 6.7-inch Super Retina XDR display, a Ceramic Shield front cover, and a triple-camera system with a LiDAR scanner. It also has a 5G connection, a 6-core CPU, and a 4-core GPU. The iPhone 12 Pro Max is available in 128GB, 256GB, and 512GB storage options.",
"categories": ["phones", "apple"],
"price": 800
}'
curl --location --request POST 'http://localhost:9200/products/_doc' \
--header 'Content-Type: application/json' \
--data-raw '{
"name": "Apple iPhone 12 Pro",
"description": "The iPhone 12 Pro is the most powerful iPhone ever. It has a 6.1-inch Super Retina XDR display, a Ceramic Shield front cover, and a triple-camera system with a LiDAR scanner. It also has a 5G connection, a 6-core CPU, and a 4-core GPU. The iPhone 12 Pro is available in 128GB, 256GB, and 512GB storage options.",
"categories": ["phones", "apple"],
"price": 700
}'
Installation
Installing both the API and instantsearch-client is easy. You can install them with npm or yarn.
For more details on installation and usage, see Installation.
npm install searchkit @searchkit/api @searchkit/instantsearch-client react-instantsearch-dom
Building the Frontend
Add the following code to your React app:
import React from "react";
import ReactDOM from "react-dom";
import Client from "@searchkit/instantsearch-client";
import Searchkit from "searchkit";
import { InstantSearch, SearchBox, Hits, RefinementList } from "react-instantsearch-dom";
// Create a Searchkit client
// This is the configuration for Searchkit, specifying the fields to attributes used for search, facets, etc.
const sk = new Searchkit({
connection: {
host: "http://localhost:9200",
},
search_settings: {
highlight_attributes: ["name"],
snippet_attributes: ["description"],
search_attributes: [{ field: "name", weight: 3 }, "description", "categories"],
result_attributes: ["name", "description", "price", "categories"],
facet_attributes: [{
field: "categories.keyword",
type: "string",
attribute: "categories",
}, {
field: "price",
type: "numeric",
attribute: "price",
}],
},
})
const searchClient = Client(sk);
const App = () => (
<InstantSearch indexName="bestbuy" searchClient={searchClient}>
<SearchBox />
<RefinementList attribute="categories" />
<Hits />
</InstantSearch>
);
export default App;
Adding Refinements
Refinements provide your users with a way to narrow down their search results.
See the Refinements to add refinements to your search.
Customising the UI
TODO - contributions welcome
Query Rules
Query rules allow you to customize the search results based on the user's query.
Follow the query rules guide to add query rules to your search.