Add autocomplete search to your Strapi blog

Chuck Meyer - Apr 5 '22 - - Dev Community

Strapi is an open-source, headless CMS that builds API abstractions to retrieve your content regardless of where it's stored. It's a great tool for building content-driven applications like blogs and other media sites.

In this post, you're going to add interactive search to a Strapi blog with a Next.js front end using Algolia's Autocomplete.js library and the community-built Search plugin for Strapi.

Prerequisites

Strapi and Algolia Autcomplete.js are both build using Javascript, so you'll want node v.12 installed.

You'll build on the basic blog application from this guide using Strapi and Next.js. You should familiarize yourself with the steps in that post before building your search experience on top of it.

You'll also need an Algolia account for search. You can use your existing Algolia account or sign up for a free account.

Building the back end

Start by creating a directory to hold your project's front and back ends:

mkdir blog-strapi-algolia && cd blog-strapi-algolia
Enter fullscreen mode Exit fullscreen mode

Strapi has a set of pre-baked templates you can use to get a CMS up and running quickly. These all include Strapi itself with pre-defined content types and sample data. If you don't have a Strapi blog already, you can use the blog template to quickly set one up.

npx create-strapi-app backend  --quickstart --template @strapi/template-blog@1.0.0 blog
Enter fullscreen mode Exit fullscreen mode

After the script finishes installing, add an admin user at http://localhost:1337 so you can log in to the Strapi dashboard. This script sets up most of back end for us, including a few demo blog posts. You can read more about everything that was setup in the quick start.

Next you need to index your demo content. Fortunately, the Strapi community has you covered with a Search plugin and Algolia indexing provider built by community member Mattias van den Belt. You can read more about Mattie's plugin in the documentation, but getting up and running only requires a couple of pieces of configuration.

Go ahead and stop your Strapi server so you can install the plugin using npm (or yarn).

cd backend && npm install @mattie-bundle/strapi-plugin-search @mattie-bundle/strapi-provider-search-algoliai --save
Enter fullscreen mode Exit fullscreen mode

You'll need to add an Algolia API key and App ID to your Strapi environment. You can manage your keys by navigating the Algolia Dashboard under Settings > Team and Access > API Keys, or go directly to https://algolia.com/account/api-keys. Since Strapi is modifying your Algolia index, you'll need to provide either the admin API key (for demos) or create a key with appropriate access for your production project.

# .env
// ...
ALGOLIA_PROVIDER_APPLICATION_ID=XXXXXXXXXX
ALGOLIA_PROVIDER_ADMIN_API_KEY=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Enter fullscreen mode Exit fullscreen mode

With your credentials in place, the last step is to configure the plugin. Create or modify the ./config/plugins.js file in your backend directory. You want to tell the plugin to index the article and category content types for your blog.

'use strict';

module.exports = ({ env }) => ({
  // ...
  search: {
    enabled: true,
    config: {
      provider: 'algolia',
      providerOptions: {
        apiKey: env('ALGOLIA_PROVIDER_ADMIN_API_KEY'),
        applicationId: env('ALGOLIA_PROVIDER_APPLICATION_ID'),
      },
      contentTypes: [
        { name: 'api::article.article' },
        { name: 'api::category.category' },
      ],
    },
  },
});
Enter fullscreen mode Exit fullscreen mode

Restart your Strapi server to pick up these environment variables and the new plugin (npm run develop). The Search plugin triggers when new content is Published, so you'll need to either Unpublish and Publish the demo articles, or create a new one. Load the Strapi admin panel (http://localhost:1337/admin) and navigate to Content Manager > COLLECTION TYPES > Article and either click on an existing article to Unpublish or click on Create new Entry. Click Publish on your article to index this entry into your Algolia application. You can do the same for the category content type if you'd like to index those as well.

Building the front end

Now that you've built your back end and populated your index, it's time to build the front end for you users.

Strapi has a great blog post walking you through building a Next.js powered front end. You'll build on top of those steps here. You can either walk through their quick start yourself, or you can just clone this repo if you want to jump directly to adding search.

git clone --single-branch --branch no-search-version git@github.com:chuckmeyer/blog-strapi-frontend.git frontend
Enter fullscreen mode Exit fullscreen mode

Don't forget to run cd frontend && npm install if you cloned the front end from the repo.

This is enough to get the basic blog site up and running. You can test it out by running npm run dev in the frontend directory.

The only thing missing is search. You'll be using the Algolia Autocomplete.js library to add an autocomplete search experience to your blog's navigation bar. When a user types into the field, the autocomplete "completes" their thought by providing full terms or results. The Autocomplete library is source agnostic, so you'll also need the Algolia InstantSearch library to connect to your index on the back end.

npm install @algolia/autocomplete-js algoliasearch @algolia/autocomplete-theme-classic --save
Enter fullscreen mode Exit fullscreen mode

To use the autocomplete library in a React project, you first need to create an Autocomplete component to wrap the library. You can find the boilerplate for this in the autocomplete documentation.

./frontend/components/autocomplete.js

import { autocomplete } from '@algolia/autocomplete-js';
import React, { createElement, Fragment, useEffect, useRef } from 'react';
import { render } from 'react-dom';

export function Autocomplete(props) {
  const containerRef = useRef(null);

  useEffect(() => {
    if (!containerRef.current) {
      return undefined;
    }

    const search = autocomplete({
      container: containerRef.current,
      renderer: { createElement, Fragment },
      render({ children }, root) {
        render(children, root);
      },
      ...props,
    });

    return () => {
      search.destroy();
    };    
  }, [props]);

  return <div ref={containerRef} />;
}
Enter fullscreen mode Exit fullscreen mode

Just like in the back end, you'll need your Algolia credentials to connect to the API. Since the front end only needs to read from the index, you can use your search key for the application. Create a ./frontend/.env.local file to store your credentials.

NEXT_PUBLIC_ALGOLIA_APP_ID=XXXXXXXXXX
NEXT_PUBLIC_ALGOLIA_SEARCH_API_KEY=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Enter fullscreen mode Exit fullscreen mode

Now you can initialize your connection to Algolia and add your new Autocomplete component by updating the code in ./frontend/components/nav.js.

import React from "react";
import Link from "next/link";

import { getAlgoliaResults } from '@algolia/autocomplete-js';
import algoliasearch from 'algoliasearch';
import { Autocomplete } from './autocomplete';
import SearchItem from './searchItem';
import "@algolia/autocomplete-theme-classic";

const searchClient = algoliasearch(
  process.env.NEXT_PUBLIC_ALGOLIA_APP_ID,
  process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_API_KEY,
);

const Nav = ({ categories }) => {
  return (
    <div>
      <nav className="uk-navbar-container" data-uk-navbar>
        <div className="uk-navbar-left">
          <ul className="uk-navbar-nav">
            <li>
              <Link href="/">
                <a>Strapi Blog</a>
              </Link>
            </li>
          </ul>
        </div>
        <div className="uk-navbar-center">
          <Autocomplete
            openOnFocus={false}
            detachedMediaQuery=''
            placeholder="Search for articles"
            getSources={({ query }) => [
              {
                sourceId: "articles",
                getItemUrl( {item} ) { return `/article/${item.slug}`},
                getItems() {
                  return getAlgoliaResults({
                    searchClient,
                    queries: [
                      {
                        indexName: "development_api::article.article",
                        query,
                      }
                    ]
                  })
                },
                templates: {
                  item({ item, components}) {
                    return <SearchItem hit={item} components={components} />;
                  }
                }
              },
            ]}
          />
        </div>
        <div className="uk-navbar-right">
          <ul className="uk-navbar-nav">
            {categories.map((category) => {
              return (
                <li key={category.id}>
                  <Link href={`/category/${category.attributes.slug}`}>
                    <a className="uk-link-reset">{category.attributes.name}</a>
                  </Link>
                </li>
              );
            })}
          </ul>
        </div>
      </nav>
    </div>
  );
};

export default Nav;
Enter fullscreen mode Exit fullscreen mode

As you can see, you're passing a few parameters to the Autocomplete component:

  • openOnFocus={false} - tells your search not to populate results until a user starts typing
  • detachedMediaQuery=''- opens search in a detached modal, providing more room for your results
  • placeholder="Search for articles" - the text that appears in the searchbox before a search
  • getSources={({ query }) => - where you define your data sources for your autocomplete experience

Remember that Autocomplete is source agnostic. You define sources based on APIs, libraries, or static content within your application. Here, you're binding a source called articles to your Algolia index using the getAlgoliaResults function from the autocomplete-js library.

              {
                sourceId: "articles",
                getItemUrl( {item} ) { return `/article/${item.slug}`},
                getItems() {
                  return getAlgoliaResults({
                    searchClient,
                    queries: [
                      {
                        indexName: "development_api::article.article",
                        query,
                      }
                    ]
                  })
                },
                templates: {
                  item({ item, components}) {
                    return <SearchItem hit={item} components={components} />;
                  }
                }
              },
Enter fullscreen mode Exit fullscreen mode

The development_api::article.article is the index generated by the Strapi Search plugin above for your article content type. When you move to production, the plugin will create a separate production_api::article.article index in the same application.

The getItemUrl() section sets up keyboard navigation, while getItems() handles retrieving articles from your index using the query term(s) from the searchbox.

Notice the code above references a SearchItem component. This is the template you'll use to tell Autocomplete how to render your search results. Add a new component called ./frontend/components/searchItem.js with the following code.

import React from "react";

function SearchItem({ hit, components }) {
  return (
    <a className="aa-ItemLink" href={`/article/${hit.slug}`}>
      <div className="aa-ItemContent">
        <div className="ItemCategory">{hit.category.name}</div>
        <div className="aa-ItemContentBody">
          <div className="aa-ItemContentTitle">
            <components.Highlight hit={hit} attribute="title" />
          </div>
          <div className="aa-ItemContentDescription">
            <components.Highlight hit={hit} attribute="description" />
          </div>

        </div>
      </div>
    </a>
  );
};

export default SearchItem;
Enter fullscreen mode Exit fullscreen mode

With this code, you're displaying the category associated with the article, the title, and the description. Use the components.Highlight component to emphasize the part of the attribute that matched the user's query.

And with that, you're done! Start your front end server with npm run dev. You should now see the autocomplete searchbox at the top of the page. Clicking on it opens the modal search interface where you can start typing your search term.

You can see a hosted version of this front end on codesandbox, although it may take some time for the back end container to start. The before and after versions of the front end code are both available on Github as well.

If you build something cool using this blog, share it with us on Twitter (@algollia).

Image
Why Nobody Cares About Asbestos Personal Injury Lawsuit
Image
15 Top Compensation Asbestos Bloggers You Should Follow
Image
How Asbestos Class Action Litigation Its Rise To The No. 1 Trend On Social Media
Image
Experience Authentic Italian Flavors at Spago: Italian Restaurant in Windsor, Ontario
Image
A Comparative Analysis between RK3588 and RK3576 Chips: Unveiling the Technological Distinctions

opensource, linux
Image
Some Wisdom On Mesothelioma Attorney From A Five-Year-Old
Image
Jenis faedah Dari Judi Online yang Mesti Anda Tahu.
Image
🎨 All the Colors You Need with Tailwind CSS

javascript, themes, beginners, tailwindcss
Image
Why Docker is Essential for Modern Development Environments and Its Alternatives

docker
Image
The Most Popular Coffee Drip Maker It's What Gurus Do 3 Things
Image
Integrate PDF Conversion by Deploying Open-source Stirling PDF with Docker

stirling, pdf, conversion
Image
Kanapy, które zmieniają przestrzeń - stwórz swoje idealne miejsce relaksu!
Image
Head Injury Lawyers Near Me It's Not As Hard As You Think
Image
SWITCH STATEMENT

beginners, coding, basic
Image
Outlier Detection: What You Need to Know?
Image
How To Invest in Artificial Intelligence (AI) Tokens?

cryptocurrency, blockchain, crypto
Image
Internal Injury Compensation: What's No One Is Talking About
Image
napi-rs的使用

rust
Image
Simplifying System Design: Scaling (Vertical VS Horizontal)

systemdesign, architecture, learning, makingtecheasy
. . . . . . . . . . . . . . . . . . . . . . .