Headless CMS

Definitions & benefits

Tools & Concepts

Open source

Features

Authentication

Custom plugins & Marketplace

Webhooks

Multilingual CMS

APIs

Dynamic Zones

User roles & permissions

Content Modeling

Security & Privacy

Use Cases

Ecommerce

Blog

Forum

About Strapi

Life at Strapi

Releases & Roadmap

Events

Community

News

The Tutorials section covers an introduction to Strapi, some advanced technical content, product updates and releases. From basic workaround to in-depth development guides. 

Tutorials

How tos

Get all the latest updates, news and events.

Subscribe to the newsletter 📣

## Introduction
In today's fast-paced digital world, finding exactly what you need online should be quick and painless. Imagine entering a vast library where every book, article, and note is meticulously organized and just a whisper away. That's the kind of seamless experience advanced search brings to web applications. In this tutorial, we're diving into the magic of enhancing your e-commerce platform with top-notch search capabilities. We'll explore how to combine Strapi, Next.Js, and Algolia Search to add and implement advanced search functionalities.

## Prerequisites
Before we begin, make sure you have the following installed on your machine:

- [Node.js (version 18 or higher)](https://nodejs.org/en)
- [npm (v6 or higher)](https://docs.npmjs.com/cli/v6/commands/npm-install)

The code for this tutorial is available on my [GitHub repository](https://github.com/Claradev32/advanced-strapi-algolia-search). The Strapi CMS backend is on the **main** branch, while the frontend is on the **frontend** branch. Feel free to clone it to follow along.

## Setting up Strapi Project
Once you've met the above requirements, let's get started by creating a new Strapi application with the command below:

```bash
npx create-strapi-app@latest my-project
```
The above command will prompt you to choose your installation type. For the demonstrations in this tutorial, we'll use the **Quickstart (recommended)** type and hit the enter key to continue. Then Strapi will start the project scaffolding process.

Once the project is successfully created, run the command below to move into the project folder and spin up the development server:

```bash
cd my-project && npm run develop
```

The above command will start the server and open it on your browser.
![001-welcome-to-strapi.png](https://api-prod.strapi.io/uploads/001_welcome_to_strapi_bd6b20b354.png)

## Setting up Next.Js Project
Now that we have successfully setup our Strapi backend, let's proceed to set the Next.Js frontend by running the command below:

```bash
npx create-next-app my-nextjs-project
```
The command will take you through some prompts. For the demonstrations in this tutorial, your selections should be the same as in the screenshot below:

![002-create-nextjs-project.png](https://api-prod.strapi.io/uploads/002_create_nextjs_project_05747076fd.png)


Then wait for the scaffolding process to complete, change the directory into the project folder, and run the development server with the command:

```bash
cd my-nextjs-project && npm run dev
```

## Integrating Algolia with Strapi
Next, let's integrate Algolia with our Strapi backend to enable the search functionality. 

### Setting up an Algolia account and obtaining API keys 

First, click the [link](https://dashboard.algolia.com/users/sign_up) on the link to set up an Algolia account. You can sign up with Google, GitHub, or Email.

![003-algolia-signup.png](https://api-prod.strapi.io/uploads/003_algolia_signup_f60c3a4fc4.png)

Then navigate to **Settings > API Keys**, copy the **Application ID** and **Admin API Key** to your Strapi `.env` file:

```bash
// ...
ALGOLIA_PROVIDER_APPLICATION_ID=G9Z6UEUE
ALGOLIA_PROVIDER_ADMIN_API_KEY=043d7•••••••••••••••••••••••8332
```

![004-algolia-api-keys.png](https://api-prod.strapi.io/uploads/004_algolia_api_keys_0979f13caa.png)

Next, install the `@mattie-bundle/strapi-plugin-search` and `@mattie-bundle/strapi-provider-search-algolia` packages.

```bash
npm install @mattie-bundle/strapi-plugin-search @mattie-bundle/strapi-provider-search-algolia
```

The `@mattie-bundle/strapi-plugin-search` package installs the Strapi plugin to enable NextJs search functionality, while the `@mattie-bundle/strapi-provider-search-algolia` package installs the provider specifically using Algolia as the search engine. It integrates Strapi with Algolia's search capabilities, allowing users to leverage Algolia's powerful search features.


### Create Collection Type
Now back to our Strapi admin, let's create some products and save and publish to index this entry into your Algolia index. Navigate to **Content-Type Builder > + Create new collection type** and create a `Product` collection.

![005-create-product-collection.png](https://api-prod.strapi.io/uploads/005_create_product_collection_00414826dc.png)

The `Product` collection should have the `name` (Text), `image`(single media), `price`(float number), and `description` (Text) fields. 

![006-product-entry-fields.png](https://api-prod.strapi.io/uploads/006_product_entry_fields_5ff854d8a4.png)

Next, Navigate to **Content Manager > COLLECTION TYPES > Products**, click on **+ Create new Entry** button, and enter your product details. When you add a new entry or make changes to your `Product` collection, it will be automatically indexed in Algolia.

### Configuring Algolia in the Strapi project to index content.
Now let's update our Strapi plugin to configure Algolia. Update the `my-project/config/plugin.js` file with the code snippet below:

```javascript
module.exports = ({ env }) => ({
  search: {
    enabled: true,
    config: {
      provider: "algolia",
      providerOptions: {
        apiKey: env('ALGOLIA_API_KEY'),
        applicationId: env('ALGOLIA_APPLICATION_ID')
      },
      contentTypes: [{ name: "api::product.product", index: "strapi-store" }],
    },
  },
});
```
The code snippet configures the search functionality for our project, enabling it to use Algolia as the search provider. It sets up Algolia by specifying an API key and application ID. The configuration also details which content types are searchable, in this case, products (which we will create shortly), and assigns them to an Algolia index named **"strapi-store"**.

## Building the Search Interface in Next.Js
Now that we've created our collection and added some entries, let's build the Search interface in our Next.Js front to show the products and perform search operations.

### Installing Algolia search client in the Next.js project.
First, install the Algolia search client with the command below:
```bash
npm install algoliasearch react-instantsearch-dom
```
The `algoliasearch` package is a JavaScript client library for the Algolia search engine, providing methods to interact with the Algolia search API such as indexing, searching, and managing data. On the other hand, the `react-instantsearch-dom` package is a React component library for constructing search interfaces powered by Algolia. It provides pre-built components that can be seamlessly integrated into React applications to create dynamic search experiences with features like faceting, filtering, and pagination.

### Creating search components to display results.
Then create a `components` folder inside the `my-nextjs-project/src` directory. In the `components` folder, create a new file named `Search.tsx` and import and initialize the Algolia client with the code snippet below:

```javascript
import algoliasearch from "algoliasearch/lite";

const searchClient = algoliasearch(
  process.env.NEXT_PUBLIC_ALGOLIA_APPLICATION_ID || '',
  process.env.NEXT_PUBLIC_ALGOLIA_API_KEY || ''
);
```

Go back to your Algolia Account **Settings > API Keys**, copy the **Application ID** and **Search-Only API Key** (Using the admin key could lead to a security issues) to your Next.js. Create a `.env.local` file (if it does not exists already) in the root directory of your project and add the Algolia credentials:

```bash
NEXT_PUBLIC_ALGOLIA_APPLICATION_ID=''
NEXT_PUBLIC_ALGOLIA_API_KEY=''
```
### Syncing Strapi Content with Algolia:
Now, to keep the content in our Strapi collection in Sync with Algolia, ensuring we have a user-friendly search experience, we'll be getting the data directly from our Algolia index. We'll do that in the `components/Search.tsx` file with the code snippet below:
```javascript
import { InstantSearch } from "react-instantsearch-dom";
import { connectSearchBox } from "react-instantsearch-dom";
import { connectHits } from "react-instantsearch-dom";
import algoliasearch from "algoliasearch/lite";

const searchClient = algoliasearch(
   process.env.NEXT_PUBLIC_ALGOLIA_APPLICATION_ID,
   process.env.NEXT_PUBLIC_ALGOLIA_API_KEY
);

const CustomSearchBox = ({ currentRefinement, refine }: any) => (
  <input
    type="text"
    placeholder="Search products..."
    value={currentRefinement}
    onChange={(e) => refine(e.target.value)}
    className="w-full p-4 text-gray-700 bg-white border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
  />
);

const SearchInput = connectSearchBox(CustomSearchBox);

const Search = () => {
  const ProductCard = ({ product }: any) => (
    <div className="border rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out">
      <img
        src={`http://localhost:1337` + product.image.url}
        alt={product.name}
        className="w-full h-64 object-cover"
      />
      <div className="p-5">
        <h2 className="text-2xl font-semibold mb-2">{product.name}</h2>
        <p className="text-gray-700 mb-4">{product.description}</p>
        <div className="font-bold text-xl">Price: ${product.price}</div>
      </div>
    </div>
  );
  const CustomHits = connectHits(({ hits }) => (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      {hits.map((hit) => (
        <ProductCard key={hit.objectID} product={hit} />
      ))}
    </div>
  ));

  return (
    <div className="max-w-4xl mx-auto px-4 py-8">
      <InstantSearch
        searchClient={searchClient}
        indexName="development_strapi-store"
      >
        <h4 className="">My Store</h4>
        <div className="p-4">
          <SearchInput />
        </div>
        <CustomHits />
      </InstantSearch>
    </div>
  );
};

export default Search;
```


In the above code snippet, we imported `InstantSearch`, `connectSearchBox`, and `connectHits`. We used `InstantSearch` to configure the Algolia search client and specify our index name.

> When you specify an index name in the Strapi Algolia plugin configuration, the environment in which the app is currently running is automatically appended to the name. That is why the index name is now `development_strapi-store`.

Then we use `connectSearchBox` to create a custom search input since the default input field is not styled, and we use `connectHits` to create *CustomHits**, which allows us to configure how the products are rendered.

Next, update the code in your `my-nextjs-project/src/index.tsx` file to import the Search component:

```javascript
import Search from "@/components/Search";

export default function Home() {
  return (
    <Search/>
  );
}
```
![007-import-search-component.gif](https://api-prod.strapi.io/uploads/007_import_search_component_bbd8912e22.gif)

## Implementing The Next.Js Search features like faceting, filtering, and sorting
We've successfully added an advanced search to our Next.Js e-commerce store. Now let's extend the Next.Js search features by adding facets, filtering, and sorting. To do that, navigate to your Algolia account, go to the Search tab, and select the `development_strapi-store` index. Then click on the Configuration tab and locate Facet. Enter the price as the attribute name you want to use for faceting and click **Add**.

![008-add-algolia-facets.png](https://api-prod.strapi.io/uploads/008_add_algolia_facets_e9a1461b00.png)

Then update the `Search** component inside the `InstantSearch` component in your `components/Search.tsx` file to add the Facet feature with the code below:

```javascript
//...
 <Panel header="Price Range">
    <RefinementList attribute="price" />
 </Panel>
```

![009-filter-products.gif](https://api-prod.strapi.io/uploads/009_filter_products_021088dfb4.gif)

Now users can filter the products by price. Next, let's add the feature for sorting so users can sort the products by ascending or descending order. In your Algolia account index configuration, locate **Replicas** tab, create **+ Create Replica index** for `development_strapi-store_price_asc` and `development_strapi-store_price_desc` then click on **Review and Save Settings**.

![010-add-replica.png](https://api-prod.strapi.io/uploads/010_add_replica_f0232e04d9.png)

### Configure Sorting for Each Replica
For each replica index you've created, go to its **Configuration**, scroll to the **Ranking and sorting** section, and adjust the ranking formula to include the attribute you want to sort by. For `development_strapi-store_price_asc` price ascends and the price descends for `development_strapi-store_price_desc`, and **Review and Save Settings**.

Then update the Search component to use the names of these replica indices in the **SortBy** component as the **items** values.

```javascript
//...
import { SortBy} from "react-instantsearch-dom";

//...
<Panel header="Sort by">
  <SortBy
    defaultRefinement="development_strapi-store"
    items={[
      { value: 'development_strapi-store', label: 'Featured' },
      { value: 'development_strapi-store_price_as', label: 'Price asc.' },
      { value: 'development_strapi-store_price_desc', label: 'Price desc.' },
    ]}
  />
</Panel>
```
![011-add-sorting-for-each-replica.gif](https://api-prod.strapi.io/uploads/011_add_sorting_for_each_replica_897058f851.gif)

Now you can sort the products by price in ascending and descending order.

## Conclusion
That's it for this tutorial. You've learned how to add advanced search to a Strapi and Next.js project with Algolia. We began by setting up a Strapi and Next.js project, creating a collection type in the Strapi CMS admin, building out the application UI, configuring the Algolia plugin, and syncing Strapi content with Algolia. Additionally, we enhanced the application by adding search features like faceting, filtering, and sorting. Now that you've learned how to incorporate advanced search into your Strapi and Next.js project using Algolia, how do you plan to use these technologies in your next project?

## Resources
The code for this tutorial: [GitHub repository](https://github.com/Claradev32/advanced-strapi-algolia-search).


Advanced search to a Strapi and Next.js project with Algolia

large_Adding advanced search to a Strapi and Next.js project with Algolia.jpg

medium_Adding advanced search to a Strapi and Next.js project with Algolia.jpg

small_Adding advanced search to a Strapi and Next.js project with Algolia.jpg

thumbnail_Adding advanced search to a Strapi and Next.js project with Algolia.jpg

Adding advanced search to a Strapi and Next.js project with Algolia.jpg

Adding advanced search to a Strapi and Next.js project with Algolia

Software Engineer and perpetual learner with a passion for OS and expertise in Python, JavaScript, Go, Rust, and Web 3.0.

In the bustling digital world, where information travels at the speed of light, users expect nothing less than instant notifications. Whether it's a content update or a system alert, today's audience demands to be in the loop, in real-time. How do we achieve this fluid, lightning-fast communication? Here's where our duo, Strapi and webhooks, come into play.

Before we go further, let's demystify these tools.

**Strapi**
Think of Strapi as a helpful intermediary. It's an open-source, Node.js based headless CMS. But, unlike other content management systems, Strapi is all about giving developers the reins. It's customizable, developer-friendly, and can be integrated seamlessly with databases, frameworks, and, yes, webhooks.

**Webhooks**
Now, imagine a doorbell that rings every time there's activity outside your door. That's essentially what a webhook does for your application. It's a method allowing systems to exchange data in real-time. When an event occurs in one system, a notification is sent to another system, eliminating the need for constant manual checks.

Together, Strapi's adaptability combined with the real-time capabilities of webhooks makes for a formidable pair.

## Purpose of the Tutorial

So, why should you stick around and dive deeper into this tutorial? Simple. We're not just discussing theory here. We're about to embark on a hands-on journey where you'll learn to harness the power of Strapi and webhooks. By the end, you'll be equipped with the knowledge to set up real-time notifications for your application, ensuring your users are always informed and engaged.

We'll build a blog application, and send realtime notification emails to users when a type of content they subscribed to is created.

Ready to dive in? Let's get started and unlock the potential of real-time notifications using Strapi and webhooks!

## Setting Up the Development Environment for Strapi Webhooks

First things first, let's make sure we have Strapi installed. If you haven't already, you'd need to have Node.js on your machine. Strapi runs on Node, and it's the backbone of our setup.

Then run the command below to create your Strapi project.

``` bash
  npx create-strapi-app@latest webhook-demo
```

The above command will create and setup all the necessary files, folder and configuration required to get your application running. Navigate to http://localhost:1337/admin to login to your admin dashboard.

![01-webhooks.png](https://api-prod.strapi.io/uploads/01_webhooks_57e10beee3.png)

## Creating the Strapi content model

Once you have logged in to your Strapi dashbaord, let's create your content type models. We'll be creating a **Blog** and **Subsriber** contents types. Click on the Create your Content type button.

![02-webhooks.png](https://api-prod.strapi.io/uploads/02_webhooks_621f7756e9.png)

Now create a Blog collection and hit the Continue button to add the fields.

![03-webhooks.png](https://api-prod.strapi.io/uploads/03_webhooks_162bf363ef.png)

Add the following fields to your Blog collection:

- **title**: For the title of the blogs(use the Text type)
- **content**: For the blog content (use the Rich text type)
- **cover**: This is for the blog cover image (use the Media type).
- **category**: To specify the category the blog belongs to (use Enumaration type)

![04-webhooks.png](https://api-prod.strapi.io/uploads/04_webhooks_ffae2396b1.png)

Next, save the collection and proceed to creating the Subscribers collection with the following fields:

- **name**: The name of the subscriber (use the Text type).
- **email**: The subscriber email (use the Text type).
- **categories**: Category of blog they selected (use the Text type).

![05-webhooks.png](https://api-prod.strapi.io/uploads/05_webhooks_844f92920e.png)

## Setting up a webhook receiver

In the context of Strapi, webhooks serve as automated signals, informing external applications about specific events. For instance, every time a new content entry is added or an existing one is modified, a webhook can be configured to notify another application about this change.

For an external application to receive and process these notifications from Strapi, it requires an endpoint. This endpoint, often termed a "webhook receiver", is responsible for accepting the data sent by Strapi and then taking appropriate action based on that data.

For this demonstration, we won't be using an external application, we'll setup the webhook receiver in our Strapi applciation to send emails to subsrbers.

To get started, generate an api by running the commmand below:

``` bash
  npx strapi generate api   
```

The above command will take you through some prompts, input `notify` as the API name and select `n` for `Is this API for a plugin?` prompt.

Now let's setup up the email plugin to allow you send emails from your Strapi application. Install the Sendgrid provider for the Email plugin with the command below:

``` bash
  npm install @strapi/provider-email-sendgrid --save
```

Then create a `plugin.js` file in the config folder if it does not exists and add the email plugin config:

``` js
module.exports = ({ env }) => ({
  email: {
    config: {
      provider: 'sendgrid',
      providerOptions: {
        apiKey: env('SENDGRID_API_KEY'),
      },
      settings: {
        defaultFrom: '<EMAIL_FROM>',
        defaultReplyTo: 'EMAIL_TO',
        testAddress: 'TEST_EMAIL',
      },
    },
  },
});
```

Replace the `EMAIL_FROM`, `EMAIL_TO` and `TEST_EMAIL` with your test emails.

Then in the the `api/notify/controllers/notify.js` file, add the code snippet below:

``` js
module.exports = {
  async create(ctx) {
    if (ctx.request.body.model === "blog") {
      // Fetch users interested in this category
      const interestedUsers = await strapi.entityService.findMany(
        "api::subscriber.subscriber",
        {
          filters: {
            category: ctx.request.body.entry.catergory,
          },
        }
      );
      // Send email to each user
      for (const user of interestedUsers) {
        strapi.plugins["email"].services.email.send({
          to: user.email,
          from: "<SEND_EMAIL>",
          subject: "New Blog Update",
          text: "A New blog you are interested in has been created!",
        });
      }
    }

    return ctx.send({ message: "Emails sent successfully!" });
  },
};
```

In the above code snippet, we have created a controller that checks if the webhook triggered is from the blog model and then searches for the subscribers collection to get all the users that are interested in the blog created and send them an email.

Next, add the code snippets below to the `api/notify/routes/notify.js` to define the webhook routes:

``` js
module.exports = {
  routes: [
    {
     method: 'POST',
     path: '/notify',
     handler: 'notify.create',
     config: {
       policies: [],
       middlewares: [],
     },
    },
  ],
};
```

## Implementing webhooks in Strapi

Now let's head over to the Strapi admin to setup the webhook to connect to the webhook url. From your Strapi admin click on Settings -> Webhooks and click Create new webhook button.

![06-webhooks.png](https://api-prod.strapi.io/uploads/06_webhooks_480138243e.png)

The enter the Name for the webhook, copy and past the webhook URL you created and check the CREATE event to notify user when ever a new blog is created.

![07-webhooks.png](https://api-prod.strapi.io/uploads/07_webhooks_2c66cd38e6.png)

Click on the Save button to save the webhook and click the Trigger button to test it.

Now go ahead to create a new subscriber and then create blog and you will you notice the email will be send to all the subscribers in the catogory of blog you created.

## Conclusion
Thank you for journeying with us to the end of this tutorial. Together, we've implemented real-time notifications using webhooks in Strapi. We began with foundational insights into Strapi and webhooks, progressed to creating collection models, and culminated in setting up a webhook receiver. For a deeper dive and further exploration on Strapi webhooks, I highly recommend checking out the [official Strapi documentation](https://docs.strapi.io/dev-docs/intro).