The new Cosmic dashboard is here!
Test drive it now →

Connecting Algolia to Cosmic for awesome search functionality!

Community Articles
Community Articles Connecting Algolia to Cosmic for awesome search functionality!

Using Cosmic's Webhooks, we can sync Algolia with Cosmic to provide fast and powerful search functionality to our projects.

TL;DR

Demo
Source Code

Intro

If you've ever tried to implement search yourself, then you know it can be difficult. Thankfully, Algolia has created a product that makes it easy. In this article we're going to go over how you can connect Algolia to your Cosmic backend and add it to your Apps. The demo App was built with React.js and an Express.js server. If you're using something different, you can still follow this pattern. Just modify it for your use-case.

There are four main steps:

  1. Create an Algolia App
  2. Create Cosmic Webhooks
  3. Create API endpoints to receive the Cosmic Webhook POST requests
  4. Add search widgets to our App


Part 1 - Create an Algolia App

Navigate to https://www.algolia.com. Log in or sign up for a (free) account.

Once you've logged in, navigate to the Dashboard.

In the Dashboard, click 'NEW APPLICATION'.

Give your App a name and click 'CREATE'.

The next page will ask you to choose a region. Pick the closest one. Then click 'Continue'.

You should now see the Dashboard for your newly created App. Click 'API Keys' on the left side of the screen. This is a list of API Keys that you will need for later steps.


Part 2 - Create Cosmic Webhooks

Log in to your Cosmic account and go to your Bucket.

Select 'Settings', then 'Webhooks' in the Dashboard menu.

You should connect three different Webhooks. Replace the endpoints with whatever you'd like them to be for your project

  1. Event: Object created and published; Endpoint - https://<__YOUR_DOMAIN__>/api/algolia/create
  2. Object edited and published; Endpoint - https://<__YOUR_DOMAIN__>/api/algolia/edit
  3. Object deleted; Endpoint - https://<__YOUR_DOMAIN__>/api/algolia/delete

Click 'Save Webhooks'. Now your server will receive POST requests whenever an Object is created, edited, or deleted. The next step is setting up your server to receive those requests and use them to keep Algolia synced.


Part 3 - Create API endpoints to receive the Cosmic Webhook POST requests

The demo App uses a Node.js Express server. Here's the code:


First, an algoliasearch client is created. It uses the Algolia Application ID and Admin API Key (which can be found in your Algolia App Dashboard).

Then endpoints are created for each Webhook that we'd like to receive from Cosmic.  The Webhook POST requests include the Object their it's body. A custom 'convertDataToAlgoliaObject' utility function is used to convert that Cosmic Object into an object formatted for Algolia. Here's the code for 'convertDataToAlgoliaObject':


This function will be different for each project. You basically just want to extract the information that will be 'searchable'.

Now, Algolia's algoliaseasrch library can be used to upload, edit, or delete the corresponding entry in Algolia.

The backend setup is complete! You should note, however, that no syncing will take place until you deploy your App. The custom API endpoints you created don't exist yet, so the Algolia Webhook POST requests won't be intercepted.


Part 4 - Add search widgets to our App

Not only does Algolia provide awesome search functionality, they also provide many libraries that can be used to display your data. I used their React Instant Search library for the demo project. It provides React components that are essentially plug-and-play. You can customize their styling with your own CSS. The documentation is very well-written, so there's no need to repeat it here. 


Conclusion

Hopefully, you found this article helpful. If something isn't clear, check out the Cosmic or Algolia documentation. They're both great!

You may also like


Hi, In this tutorial, we are going to create an application that filters twitter tweets by selecting a specific location on the map. We are going to use React and Cosmic. We will be using Cosmic npm package for saving and sorting the most popular searches in our application. Let's get started.
We recently released Cosmic Functions (public beta). We're excited to help teams build amazing modern products together with new serverless solutions.
In addition to Import / Export Features and Revision History, Cosmic has added Automatic Bucket Backups to deliver even more peace of mind to you and your content editing team. To add daily Backups to your Buckets go to Your Bucket Dashboard > Settings > Backups.
In this video tutorial, I show you how to use the Cosmic CLI to install and deploy a Cosmic GraphQL-powered App in 5 minutes.
Digital Ocean, a hosting provider beloved by developers, provides a highly intuitive interface for deploying and managing application infrastructure. In this tutorial I'm going to show you how to install and deploy a Cosmic-powered Nuxt.js app on Digital Ocean.
One of the largest problems I’ve faced while working on projects is having to deal with integrating content and events into third-party services.It’s time consuming, and as the demands in the application in question grows, so does the mental strain in having to keep up to pace with all the changes

Get started with Cosmic

Personal projects are free. Scale up as you grow.
Start building Talk to sales