Connecting Algolia to Cosmic JS for awesome search functionality!

TL;DR

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 JS 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.

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.

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 JS. The Webhook POST requests include the Object their it's body. A custom 'convertDataToAlgoliaObject' utility function is used to convert that Cosmic JS 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 JS or Algolia documentation. They're both great!

Resources

Company

Builder Buckets and Free Trial Credits

You can have up to 5 Builder Buckets at any given time each with a 14-day trial. During this trial, you have free access to all Bucket Add-ons including Webhooks, Localization, Revision History and more.

At any point during of your 14-day trial you can upgrade or use the Builder Bucket Referral Program to extend your Builder Bucket free trial time.

Referral Program

Refer a friend to signup and get 14 more days of trial time which can be applied to any of your Builder Buckets. There is no limit to the number of referrals you can use to get extended trial time.

Overage Policy

Overage rate: $8 per additional 10,000 API requests per month.

If you go over your plan's API request limit for the month, Cosmic JS support will reach out to inform you. Your service will never be interrupted without outreach from Cosmic JS. At the point of contact you will have the choice to either pay overages or upgrade your Bucket to the next higher plan.