Using Cosmic JS’s Webhooks, we can sync with to provide fast and powerful search functionality to our projects. Algolia Cosmic JS 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 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. There are four main steps: Create an Algolia App Create Cosmic JS Webhooks Create API endpoints to receive the Cosmic JS Webhook POST requests Add search widgets to our App Part 1 — Create an Algolia App Navigate to . Log in or sign up for a (free) account. https://www.algolia.com 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 JS Webhooks Log in to your Cosmic JS 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 Event: Object created and published; Endpoint — https://<__YOUR_DOMAIN__>/api/algolia/create Object edited and published; Endpoint — https://<__YOUR_DOMAIN__>/api/algolia/edit 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 JS Webhook POST requests The demo App uses a Node.js Express server. Here’s the code: ( ).config({ : }); express = ( ); bodyParser = ( ); corser = ( ); next = ( ); routes = ( ); algoliasearch = ( ); convertDataToAlgoliaObject = ( ); fetch = ( ); port = (process.env.PORT, ) || ; dev = process.env.NODE_ENV !== ; app = next({ dev }); handler = routes.getRequestHandler(app); client = algoliasearch( process.env.ALGOLIA_APPLICATION_ID, process.env.ALGOLIA_ADMIN_API_KEY, ); itemsIndex = client.initIndex( ); app.prepare() .then( { server = express(); server.use(corser.create()); server.use(bodyParser.json()); server.post( , (req, res) => { { data } = req.body; (data.type_slug === ) { algoliaObject = convertDataToAlgoliaObject(data); itemsIndex.addObject(algoliaObject) .catch( .error(err)); } res.status( ).send(); }); server.post( , (req, res) => { { data } = req.body; (data.type_slug === ) { algoliaObject = convertDataToAlgoliaObject(data); itemsIndex.addObject(algoliaObject) .catch( .error(err)); } res.status( ).send(); }); server.post( , (req, res) => { { data } = req.body; itemsIndex.deleteObjects(data) .catch( .error(err)); res.status( ).send(); }); server .listen(port, (err) => { (err) err; .log( ); }); }); /* eslint-disable no-console */ require 'dotenv' path './.env.production' const require 'express' const require 'body-parser' const require 'corser' const require 'next' const require './routes' const require 'algoliasearch' const require './utils/convertDataToAlgoliaObject' const require 'isomorphic-fetch' const parseInt 10 3000 const 'production' const const const const 'items' => () const // ---------- API endpoints for synchronizing Algolia ----------- '/api/algolia/create' const if 'items' const => err console 200 '/api/algolia/edit' const if 'items' const => err console 200 '/api/algolia/delete' const // data is an Array of one or more Object _ids => err console 200 if throw console `> Ready on http://localhost: ` ${port} First, an client is created. It uses the Algolia Application ID and Admin API Key (which can be found in your Algolia App Dashboard). algoliasearch 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’: convertDataToAlgoliaObject = { asin; brand; categories; featured; price; thumbnail; data.metafields.forEach( { (metafield.key) { : asin = metafield.value; ; : brand = metafield.value; ; : categories = metafield.value && metafield.value.split( ); ; : featured = metafield.value.includes( ); ; : price = metafield.value; ; : thumbnail = metafield.value; ; : } }); { asin, brand, : categories || [], : data.content, : data.created_at, featured, : data.modified_at, : data._id, price, : data.published_at, : data.slug, thumbnail, : data.title, }; }; .exports = convertDataToAlgoliaObject; const ( ) => data let let let let let let ( ) => metafield switch case 'asin' break case 'brand' break case 'categories' ',' break case 'options' 'Featured' break case 'price' break case 'thumbnail' break default // Do nothing return categories content createdAt modifiedAt objectID // eslint-disable-line no-underscore-dangle publishedAt slug title module 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 for the demo project. It provides React components that are essentially plug-and-play. You can customize their styling with your own CSS. The is very well-written, so there’s no need to repeat it here. React Instant Search library documentation Conclusion Hopefully, you found this article helpful. If something isn’t clear, check out the or documentation. They’re both great! Cosmic JS Algolia This article originally appears on . the Cosmic JS website
