Algolia Setup

In order to get the search component working, we will need to set up an Algolia account.

Once the account is created, we need to do the following:

Step 1: Creating an index

Using the dashboard

In the first step, we will create a new index that will contain our records. These records will be searchable in Algolia by the user from the application front end.

The index can be named anything (for example, dev_SHOP). Also, we can have as many indices as we want, such as one for development and one for the production environment.

Using API

Another way we can create an index is from code by using the search client initIndex method, which takes the index name as a parameter before pushing the data to the Algolia dashboard.

If the index does not exist in the dashboard, then it will be created. Otherwise, it will just get updated.

The index will be created/updated when you run saveObjects or setSettings operations, which we will explore in later lessons.

//search only version of the api client, optimised for size and search:
const algoliasearch = require("algoliasearch/lite");  
require("dotenv").config();

//Initialise algolia client with app id and api key which you can find as you can see below
const client = algoliasearch( 
  process.env.REACT_APP_ALOGLIA_APP_ID,
  process.env.REACT_APP_ALGOLIA_API_KEY
);

const index = client.initIndex(process.env.REACT_APP_ALGOLIA_INDEX); // dev_SHOP

Step 2: Getting the API key

In the second step, we will get the API key and the app ID. These will be used to create the search client, which can be found in the Algolia dashboard as follows:

We will then grab the API keys and add them to our .env file in order to use them for initialising an Algolia search client.

REACT_APP_ALOGLIA_APP_ID=LSPFSUKV36
REACT_APP_ALGOLIA_API_KEY=d2a417ef4d2f93123c78a1e55e84723e37
REACT_APP_ALGOLIA_API_SEARCH_KEY=b75042f62fc89dfsdad57f23233f42d922b
REACT_APP_ALGOLIA_INDEX=dev_SHOP

Note: The above keys will not work for you as you need to grab your own from the dashboard to get the examples working.

The environmental variable can be named anything but for the interest of this course, we will use the create-react-app namespace.

Note: The Admin API key should never be used in the frontend or shared with anyone in order to maintain security. It should only be used to generate a restrictive key with certain rights and use those keys instead to create/update/delete records. In your frontend, you should use a key that has search-only rights such as Search-Only API key

To create a new API key for handling create/update/delete records, click on the New API key button and set the specific ACLs needed and the indices (if the index is not selected then the key will work with all indices) as can be seen from the following image.

Note: ACL stands for Access Control List