Power your blog with Algolia keyword search

Introduction

In the Using webhooks with Dynamic Content blog post, we described in detail our sample webhook integration for Algolia Search API.In this post I will walk through the setup of an end to end demo that builds on that integration and uses Amplience Dynamic Content and Algolia Search to power a simple Vue.js blog application with keyword search. To simplify setup, I will be using two popular deployment services: Heroku and Netlify.

Why Algolia + Amplience?

Assembling the pieces

Heroku and Netlify deployment

I will be using two popular deployment services: Heroku for the webhook integration and Netlify for the Vue.js blog app. Both allow simple one-click deployment directly from a Git repository.

Heroku is more suited to hosting server side applications whereas Netlify is optimised for web apps. However, you could host both apps using the same service, or host them elsewhere.

Algolia sample webhook integration

Update: From February 2020 it has no longer been necessary to use the sample webhook integration to index content in Algolia. Dynamic Content webhooks can now connect directly to Algolia’s API.

The Dynamic Content integration for Algolia Search API is a sample webhook integration that synchronises content from Dynamic Content into Algolia, allowing content authors to create and manage content and developers to index and search the content.

Vue.js demo blog application

Our Vue.js demo Algolia blog is an example web app that demonstrates how to use Algolia Search API to provide listing and search functionality for blog posts created in Dynamic Content. To reduce complexity the application assumes the use of our Dynamic Content accelerators and uses the Amplience Content Rendering Service to display individual blog posts. This approach is suitable if you already have the Dynamic Content accelerators installed. If you were creating a blog from scratch you may prefer to use our delivery SDK to fetch the JSON for each blog post then render it using Vue.Js components.

The blog listing page and search functionality is generated using Algolia search API and some of their Vue JS Instant Search Widgets.

We’ve open sourced the sample code to the application on github to so you can try it out. The demo helps to show the power of Algolia search when used with Dynamic Content.

Watch the demo video (1 minute)

This video shows the blog demo app in action- from publishing a content item to viewing the updated Algolia index and seeing the new item appear in the blog.

Setting up

If you would like to try this out yourself, you can follow the steps below, otherwise scroll down to 'Extending the demo app'.

Prerequisites

• Amplience Dynamic Content and Content Hub accounts

  • User must have developer permissions

  • The Content Rendering Service must be enabled

• An Dynamic Content API client ID and secret

• A Heroku account (a free account can be created as part of the setup)

• A Netlify account (a free account can be created as part of the setup)

• A GitHub account (a free account can be created as part of the setup)

Adding the blogpost content type

The demo integration is designed to be used with the Blog Post content type from our Dynamic Content Accelerators, together with its linked content types and associated handlebars templates.

However, for the purposes of this demo, I used a simplified schema and handlebars template. Open this gist for code snippets and details of how to set up and use this content type and install its rendering template.

Setup and deploy the Algolia sample webhook integration

By deploying our open source Algolia webhook integration to Heroku it is incredibly easy to get a search index setup that is automatically updated with new content added into Dynamic Content. Heroku allows you to setup a free account so you just deploy by clicking the “Deploy to Heroku” button directly from our main GitHub repo, or you can fork the project if you want to customise the app.

You will need to configure Heroku environment variables to connect to the Dynamic Content and Algolia APIs. You can also specify which Algolia index you want to update and which Dynamic Content content type(s) and which properties you want to index.

For full setup instructions see the README on GitHub.

Add a new Dynamic Content webhook and point it at your app

• Login to Heroku and find your app URL

  • Append /webhook to your Heroku app URL, for example https://my-algolia-demo.herokuapp.com/webhook. This will be used for the webhook URL

• In Dynamic Content add a new webhook

  • In the URL field, paste in the app URL with /webhook added as described above e.g. https://my-algolia-demo.herokuapp.com/webhook

  • Select the trigger “snapshot published”

  • Copy the webhook secret

• Go back to Heroku and view your app settings

  • Click “Reveal Config Vars”

  • Paste the webhook secret you just copied into the Var “DC_WEBHOOK_SECRET”

Test the webhook integration

Your Dynamic Content account is now connected to the webhook integration, which is in turn connected to an Algolia search index.

To test the connection:

• In Dynamic Content, create and publish a new content item This should match one of the content types configured in Heroku

• Login to Algolia

• View the correct index

• You should see data for your new item in the index

To debug connection issues:

• In Dynamic Content view the correct webhook

• Scroll down to Recent deliveries - there should be a delivery for the time your item was published

• View details to see the response from the webhook integration

• The response body should contain

  1"message":"Successfully added to index \"my-algolia-index\""

  Note: You can also login to Heroku and see the logs for your application.

Setup and deploy the Vue.js demo Algolia blog app

Once the webhook integration is successfully updating the Algolia index, you can deploy the Vue.js demo blog app to Netlify.

Because of Netlify's permission model you must fork our application on GitHub, then you can connect Netlify to your GitHub account.

You will need to set environment variables (under build & deploy settings for your app in Netlify) to connect to your Algolia index and to your Amplience account, and to reference the handlebars template you created above.

See the README for full setup and deployment instructions.

Test the blog app

In Netlify find the domain for your app and then open your app.

You should see the blog listing page load, including the blog post that you published earlier. To see the keyword search in action, publish some more blog posts with different text. Pagination will kick in when you publish more than 9 blog posts.

Click through to a blog post to see the full blog content load from the Amplience Content Rendering Service.

Extending the demo app

Displaying different content type properties

Although the demo app expects some specific property names from our Accelerators content types, the app can easily be modified to suit your own content types

Check your index in Algolia to see what properties are indexed (they should match the top level properties in the content type schemas you allowed to be indexed)

To change the properties displayed on the blog list page, you will need to modify the Vue.js components.

• edit components/search/interfaces/raw-search-results.interface.ts and add your properties

• also edit components/search/interfaces/search-results.interface.ts and add properties here too

• edit components/search/search.vue and refer to the properties you added

To change the display of the blog article page, you will need to change the associated handlebars template in Amplience Content Hub or reference a different one. The template used for the article page is specified in the environment variable DC_BLOG_POST_RENDERING_TEMPLATE.

Extending the search UI with Algolia components

Additional Algolia Vue.js Widgets are available and these can be used to quickly add common features such as refinement options, navigation components and even enable voice based search queries.

What next?

Our sample Algolia integration and Vue.js demo blog app allow you to quickly implement a demo or proof of concept for utilising Algolia search with Dynamic Content. Both apps could easily be extended to support different use cases (for example adding search refinement) and are open sourced on github, so why not fork them and give it a go yourself?