Docs
Quick Start

Quick Start

This guide presumes you have an Elasticsearch index with data in it. If you need help with that, check out our Setup Elasticsearch guide or our Indexing data guide.

Once you have indexed your data in Elasticsearch, you can use Searchkit and instantsearch to query your data and display it in your app.

Installation

Installing both the API and instantsearch-client is easy. You can install them with npm or yarn.

npm install @searchkit/api @searchkit/instantsearch-client

Building the Frontend

Using InstantSearch and the instantsearch-client is as simple as adding this JavaScript code to your page.

Instantsearch also supports vue, angular and react native. You can find more information about instantsearch here (opens in a new tab).

Install the dependencies:

npm install react react-dom react-instantsearch-dom

and then add this code to your page:

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";
 
const sk = new Searchkit({
  connection: {
    host: "<elasticsearch-host>",
    apiKey: "<api-key>", // optional
  },
  search_settings: {
    highlight_attributes: ["title", "actors"],
    search_attributes: ["title", "actors"],
    result_attributes: ["title", "actors"],
    facet_attributes: ["type", "rated"],
  },
})
 
const searchClient = Client(sk);
 
const App = () => (
  <InstantSearch indexName="bestbuy" searchClient={searchClient}>
    <SearchBox />
    <RefinementList attribute="type" />
    <Hits />
  </InstantSearch>
);
 
export default App;

And that's it! You can now search your data in Elasticsearch using instantsearch and Searchkit. Customise the search experience by adding widgets and customising the search settings.

CORS

You will need to enable CORS on your Elasticsearch cluster if you're directly calling Elasticsearch Server from the browser.

Read more on how to enable CORS here.

Proxy through an API (Optional)

For production use, we recommend you dont recommend calling Elasticsearch directly from the browser. Thankfully, Searchkit provides a way to proxy the search request through to a node API. This is really easy to setup.

Below this creates an API which transforms the instantsearch requests sent from the browser into Elasticsearch queries and transforms the responses into instantsearch results.

import Client from "@searchkit/api";
import { NextApiRequest, NextApiResponse } from "next";
 
const client = Client({
  connection: {
    host: "<elasticsearch-host>",
    apiKey: "<api-key>", // optional
  },
  search_settings: {
    highlight_attributes: ["title", "actors"],
    search_attributes: ["title", "actors"],
    result_attributes: ["title", "actors"],
    facet_attributes: ["type", "rated"],
  },
});
 
// example API handler for Next.js
export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const results = await client.handleRequest(req.body);
  res.send(results);
}

and then we update the instantsearch client to use the API

 
const searchClient = instantsearch({
  indexName: "imdb_movies",
  searchClient: SearchkitInstantsearchClient(sk, {
    host: "/api/search",
  }),
});
 

And that's it! You dont need to worry about the security of your Elasticsearch cluster, and you can scale your API independently of your search cluster.

Adding Filters and Facets

Filters and facets provide your users with a way to narrow down their search results.

Follow the filters guide or facets guide to add filters and facets to your search.

Customising the UI

You can customise the UI of your search results by using Instantsearch.

Searchkit is compatible with the following InstantSearch libraries:

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.

Deploying to Production

If you're using Next.js, you can deploy your app to Vercel (opens in a new tab) with a single click. If you're using Cloudflare workers, you can deploy your app through Cloudflare wrangler on Cloudflare Workers (opens in a new tab).