Prismic with Algolia Tutorial

Developing with Prismic
1

Does anyone know of a good tutorial for creating a webhook that syncs Prismic data with Algolia?

I know it can be done by using a webhook that's triggered on content change but I've had trouble finding a walkthrough on how that webhook is created in the first place. I'd appreciate if someone knows of a tutorial.

2

I am also looking for the same since we have a poor search functionality in prismic.

1 Like
8

Hello @dhayes, @todeepthydon. Thanks for opening this conversation.
I'll add a ping to the backlog for new learning resources.

1 Like
10

Hi, is there an update on this request? This looks something I'll need in coming future. It would be great to have an idea how this can work together: Next, Prismic, Algolia. Thank you

11

Hey Team,

There's been no change here. I'm reaching out to our team to see if they have any experience or tips.

Thanks.

1 Like
12

@Phil Can you bump this up for us? Given the fact that Prismic's full text search seems to have a permanent seat on the struggle bus, it'd be nice to get some help in hooking up the webhook to Algolia.

I'm assuming that (given the fact that prismic.io uses Algolia), this integration has been done, so even if we could get some pointers about how that integration happened, that'd be swell. Thanks!

1 Like
15

Hey @jason.clark. Here are some recommendations from our DevX team!

Angelo:

Whenever a website is rebuilt, send all documents from the Prismic repository to Algolia for indexing. This can take the form of a script that runs before or after the website’s primary npm run build script. The script should perform the following:

  1. Query all Prismic documents. If only certain documents map to pages within the website, only query those documents.
  2. Assign an objectID property to each document (required by Algolia). The Prismic document’s id property should be sufficient depending on your Algolia index’s setup
  3. Assign a url mapping the document to a URL within the website. If the website uses a Prismic Link Resolver to generate URLs, that Link Resolver should be used in this step.
  4. Prune any document properties that should not be indexed. For example, the type, href, first_publication_date, last_publication_date, slugs, linked_documents, lang, and alternate_languages properties may cause issues when searching.
  5. Push the documents to an Algolia index.

The index is now available for searching via one of Algolia’s packages.

Lucie:

I wrote this article that explains pretty much the above process but with an agnostic approach and code examples (not relying on Prismic):

We hope you find this information useful!

1 Like
17

Thank you, I'll have a look

18

Hey there,
Tim Benniks talked about webhooks using prismic algolia and nuxt js, you can really see his code and a lot of things will be clearer...

I hope this help

4 Likes
20

I made a video of adding algolia to a project

[Adding Algolia to a NextJS Typescript Prismic project - YouTube]

2 Likes
21

That's awesome @ayse.stinnett! Thanks for sharing :slight_smile:

1 Like