Using in Production

In production, it's strongly recommended not to expose your Elasticsearch instance directly to the browser. Instead, proxy all requests through your own backend server.

You have the following options available to you for securely exposing your Elasticsearch instance to the internet:

This involves creating an API route that proxies search requests to Elasticsearch. Proxying enables you to:

• Add custom headers or API keys on the server.
• Apply filters to restrict access to specific documents
• Your own user based authentication for your API
• Monitor and log search activity
• Add a caching layer between the API and Elasticsearch

Use ApiProxyConnector in the frontend to send requests to your backend, and ElasticsearchAPIConnector in the backend to forward them to Elasticsearch.

You can restrict access to indices by using an API key. We recommend you create an apiKey that is restricted to the particular index and has read-only authorization. See Kibana API keys guide. To use the API key, place it within the Elasticsearch connection configuration.

To proxy search requests through your server, use the ApiProxyConnector. This connector sends search and autocomplete requests to your backend, where the real Elasticsearch query is executed.

import { ApiProxyConnector } from "@elastic/search-ui-elasticsearch-connector";

const connector = new ApiProxyConnector({
  basePath: "http://localhost:3001/api"
  // fetchOptions: {}
});

const config = {
  apiConnector: connector
  // other Search UI config options
};

1. ⚠️ Replace with your server URL in production
2. Optional: Add headers or credentials here if needed

For more details, see the ApiProxyConnector

On your backend, handle the request using ElasticsearchAPIConnector and pass in the request body from the client:

import express from "express";
import ElasticsearchAPIConnector from "@elastic/search-ui-elasticsearch-connector";

const app = express();
app.use(express.json());

const connector = new ElasticsearchAPIConnector({
  host: "https://your-elasticsearch-host",
  index: "your-index",
  apiKey: "your-api-key"
});

app.post("/api/search", async (req, res) => {
  const { state, queryConfig } = req.body;
  const response = await connector.onSearch(state, queryConfig);
  res.json(response);
});

app.post("/api/autocomplete", async (req, res) => {
  const { state, queryConfig } = req.body;
  const response = await connector.onAutocomplete(state, queryConfig);
  res.json(response);
});

app.listen(3001);

1. ⚠️ Replace with your Elasticsearch host
2. ✅ Use the same index as your data
3. 🔒 Use a secure, read-only API key
4. { state: RequestState, queryConfig: QueryConfig } - comes from ApiProxyConnector on the frontend

For other authentication methods, check the Elasticsearch API connector reference.

For a secure and scalable production setup:

• Use ApiProxyConnector on the frontend.
• Use ElasticsearchAPIConnector on the server.
• Avoid to expose your Elasticsearch API key to the browser.
• Monitor and log if needed.