Using Cosmic&#39;s Webhooks, we can sync <a href="https://www.algolia.com" rel="noopener noreferrer" target="_blank">Algolia</a> with <a href="https://cosmicjs.com" rel="noopener noreferrer" target="_blank">Cosmic</a> to provide fast and powerful search functionality to our projects.<h3>TL;DR</h3><a href="https://cosmicjs.com/apps/cosmic-store-with-algolia-search" rel="noopener noreferrer" target="_blank">Demo</a> <a href="https://github.com/cosmicjs/cosmic-algolia-store" rel="noopener noreferrer" target="_blank">Source Code</a> <h3>Intro</h3>If you&#39;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&#39;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&#39;re using something different, you can still follow this pattern. Just modify it for your use-case.There are four main steps:<ol><li>Create an Algolia App</li><li>Create Cosmic Webhooks</li><li>Create API endpoints to receive the Cosmic Webhook POST requests</li><li>Add search widgets to our App</li></ol><h3> Part 1 - Create an Algolia App</h3>Navigate to <a href="https://www.algolia.com" rel="noopener noreferrer" target="_blank"></a><a href="https://www.algolia.com">https://www.algolia.com</a>. Log in or sign up for a (free) account.Once you&#39;ve logged in, navigate to the Dashboard.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/5edd3f00-6b25-11e8-9bec-bfed2d902a2b-Screenshot-2018-6-8 Algolia The Most Reliable Platform for Building Search.png" style="width: 126px;" class="fr-fic fr-dib">In the Dashboard, click &#39;NEW APPLICATION&#39;.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/95ffee60-6b25-11e8-9bec-bfed2d902a2b-Screenshot-2018-6-8 Algolia Dashboard.png" style="width: 100%;" class="fr-fic fr-dib">Give your App a name and click &#39;CREATE&#39;.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/b9e625b0-6b25-11e8-a161-9339be48e3ac-Screenshot-2018-6-8 Algolia Dashboard(1).png" style="width: 100%;" class="fr-fic fr-dib">The next page will ask you to choose a region. Pick the closest one. Then click &#39;Continue&#39;.You should now see the Dashboard for your newly created App. Click &#39;API Keys&#39; on the left side of the screen. This is a list of API Keys that you will need for later steps.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/e5f857e0-6b25-11e8-9bec-bfed2d902a2b-Screenshot-2018-6-8 Algolia Dashboard(3).png" style="width: 100%;" class="fr-fic fr-dib"> <h3>Part 2 - Create Cosmic Webhooks</h3>Log in to your Cosmic account and go to your Bucket.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/3427c130-6b26-11e8-b5bb-7f1983f4ffbc-Screenshot-2018-6-8 Dashboard.png" style="width: 100%;" class="fr-fic fr-dib">Select &#39;Settings&#39;, then &#39;Webhooks&#39; in the Dashboard menu.You should connect three different Webhooks. Replace the endpoints with whatever you&#39;d like them to be for your project<ol><li>Event: Object created and published; Endpoint - https://&lt;__YOUR_DOMAIN__&gt;/api/algolia/create</li><li>Object edited and published; Endpoint - https://&lt;__YOUR_DOMAIN__&gt;/api/algolia/edit</li><li>Object deleted; Endpoint - https://&lt;__YOUR_DOMAIN__&gt;/api/algolia/delete</li></ol><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/1dacf190-6b27-11e8-b5bb-7f1983f4ffbc-Screenshot-2018-6-8 Webhooks.png" style="width: 100%;" class="fr-fic fr-dib">Click &#39;Save Webhooks&#39;. 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. <h3>Part 3 - Create API endpoints to receive the Cosmic Webhook POST requests</h3>The demo App uses a Node.js Express server. Here&#39;s the code:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/chrisoverstreet/b3c9bbdf6c57293beacddfc0154e3c3e' class='embedly-card'></a>"><a href="https://gist.github.com/chrisoverstreet/b3c9bbdf6c57293beacddfc0154e3c3e" class="embedly-card"></a></div><div><div class="embedly-card"><div class="embedly-card-hug" style="max-width: 600px; padding: 0px; position: relative; min-width: 200px; margin: 5px auto;"><div class="embdscl0"> </div></div></div></div>First, an <a href="https://www.npmjs.com/package/algoliasearch" rel="noopener noreferrer" target="_blank">algoliasearch</a> 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&#39;d like to receive from Cosmic. &nbsp;The Webhook POST requests include the Object their it&#39;s body. A custom &#39;convertDataToAlgoliaObject&#39; utility function is used to convert that Cosmic Object into an object formatted for Algolia. Here&#39;s the code for &#39;convertDataToAlgoliaObject&#39;:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/chrisoverstreet/f28d954049fa86a2580868f63c8c1a31' class='embedly-card'></a>"><a href="https://gist.github.com/chrisoverstreet/f28d954049fa86a2580868f63c8c1a31" class="embedly-card"></a></div><div><div class="embedly-card"><div class="embedly-card-hug" style="max-width: 600px; padding: 0px; position: relative; min-width: 200px; margin: 5px auto;"><div class="embdscl0"> </div></div></div></div>This function will be different for each project. You basically just want to extract the information that will be &#39;searchable&#39;.Now, Algolia&#39;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&#39;t exist yet, so the Algolia Webhook POST requests won&#39;t be intercepted.<h3> Part 4 - Add search widgets to our App</h3>Not only does Algolia provide awesome search functionality, they also provide many libraries that can be used to display your data. I used their <a href="https://community.algolia.com/react-instantsearch/Getting_started.html" rel="noopener noreferrer" target="_blank">React Instant Search library</a> for the demo project. It provides React components that are essentially plug-and-play. You can customize their styling with your own CSS. The <a href="https://community.algolia.com/react-instantsearch/Getting_started.html" rel="noopener noreferrer" target="_blank">documentation</a> is very well-written, so there&#39;s no need to repeat it here.&nbsp;<h3> Conclusion</h3>Hopefully, you found this article helpful. If something isn&#39;t clear, check out the <a href="https://cosmicjs.com/docs" rel="noopener noreferrer" target="_blank">Cosmic</a> or <a href="https://www.algolia.com/doc/" rel="noopener noreferrer" target="_blank">Algolia</a> documentation. They&#39;re both great!

Connecting Algolia to Cosmic for awesome search functionality!

<a data-href="https://cosmicjs.com/" href="https://cosmicjs.com/" rel="noopener noreferrer" target="_blank">Cosmic</a> provides an excellent backend for blogs. It is a fully-featured content management system (CMS) with an intuitive user interface that a non-technical client can use to manage their site content.<h3 name="448a">TL;DR:</h3><a href="https://cosmicjs.com/apps/cosmic-react-blog" rel="noopener noreferrer" target="_blank">React + Next.js Blog App</a> <a href="https://cosmicblog.chriso.io" rel="noopener noreferrer" target="_blank">React + Next.js Blog Demo</a> <a href="https://github.com/chrisoverstreet/cosmic-blog" rel="noopener noreferrer" target="_blank">React + Next.js Blog Codebase&nbsp;</a>&nbsp;IntroEvery blog needs a solid CMS. This allows content owners to control their content without having to hire a developer to make every single change to their site. Many developers immediately think WordPress when considering a CMS. I&rsquo;d like to suggest Cosmic as an alternative, though. It&rsquo;s extremely simple to integrate from the developer&rsquo;s viewpoint and to manage from the client&rsquo;s. In this how-to article, we&rsquo;ll connect a <a data-href="https://reactjs.org/" href="https://reactjs.org/" rel="noopener" target="_blank">React</a> + <a data-href="https://nextjs.org/" href="https://nextjs.org/" rel="noopener" target="_blank">Next.js</a> app to <a data-href="https://cosmicjs.com/" href="https://cosmicjs.com/" rel="noopener" target="_blank">Cosmic</a> and go over some of the features.Getting StartedFist you&rsquo;ll need to create a free account with Cosmic. Navigate to <a data-href="https://cosmicjs.com" href="https://cosmicjs.com" rel="noopener" target="_blank"></a><a href="https://cosmicjs.com">https://cosmicjs.com</a>. Click the &lsquo;Create Free Account&rsquo; button in the header.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/15346ee0-5ea6-11e8-bd00-5b0277b2795c-Screenshot-2018-5-23 Goodbye Cosmic.png" style="width: 160px;" class="fr-fic fr-dib">Then fill in your information or simply click &lsquo;Sign up using GitHub&rsquo;.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/2542b170-5ea6-11e8-83e8-cd9f4c70414e-Screenshot-2018-5-23 Sign Up Cosmic.png" style="width: 300px;" class="fr-fic fr-dib"> The first step in creating a backend with Cosmic is to create a Bucket. &nbsp;A Bucket can be thought of as a container of Objects. Objects are any piece of data that you want to store. An Object&nbsp;could be a blog post, an image, any kind of metadata, or really any kind of anything. We&rsquo;ll discuss Objects more in the next section. For now, just know that you need a Bucket to hold all of your project data. You should now be at <a data-href="https://cosmicjs.com/buckets." href="https://cosmicjs.com/buckets." rel="noopener" target="_blank"></a><a href="https://cosmicjs.com/buckets">https://cosmicjs.com/buckets</a>. Click &lsquo;Add New Bucket&rsquo;. Type in a name for your project and click &lsquo;Save Bucket&rsquo;. <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/3892d890-5ea6-11e8-a9af-7593270a80e6-Screenshot-2018-5-23 Create Bucket Cosmic.png" style="width: 300px;" class="fr-fic fr-dib"> The Dashboard and SetupYou should now be at <a data-href="https://cosmicjs.com/****/dashboard," href="https://cosmicjs.com/****/dashboard," rel="noopener" target="_blank"></a>https://cosmicjs.com/****/dashboard, **** being a unique string of characters that identifies your bucket (also called a slug). All of your site&rsquo;s data can be managed in the Dashboard. The first thing we&rsquo;re going to do is define an Object Type. An Object Type defines a data structure. For this tutorial, we&rsquo;re going to define 4 different Object Types:&nbsp;Globals, Posts, Authors, and Social Links. Let&rsquo;s start with Posts. Post
Objects will hold all of the information needed to display a blog post on our site. Click the &lsquo;Add Object Type&rsquo; button. <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/4da37460-5ea6-11e8-b62c-8d3b550463a2-Screenshot-2018-5-23 Dashboard.png" style="width: 160px;" class="fr-fic fr-dib"> Type &lsquo;Post&rsquo; in the &lsquo;Singular Name&rsquo; field. The &lsquo;Plural Name&rsquo; and &lsquo;API Endpoint&rsquo; fields should auto-populate. <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/5ade72b0-5ea6-11e8-b59c-4fb2834b2073-Screenshot-2018-5-23 Posts.png" style="width: 700px;" class="fr-fic fr-dib">Then click the &lsquo;Metafields Template&rsquo; tab. Click &lsquo;Add Metafield&rsquo;.&nbsp;<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/68bda040-5ea6-11e8-b62c-8d3b550463a2-Screenshot-2018-5-23 Objects.png" style="width: 700px;" class="fr-fic fr-dib">Choose &lsquo;Image / File&rsquo;.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/74ae9260-5ea6-11e8-bd00-5b0277b2795c-Screenshot-2018-5-23 Objects(1).png" style="width: 150px;" class="fr-fic fr-dib">Type &lsquo;Hero&rsquo; in the &lsquo;Title&rsquo; field. The &lsquo;Key&rsquo; field should auto-populate with &lsquo;hero&rsquo;.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/7e97cda0-5ea6-11e8-b62c-8d3b550463a2-Screenshot-2018-5-23 Objects(2).png" style="width: 700px;" class="fr-fic fr-dib">Let&rsquo;s add one more metafield. Click &lsquo;Add Metafield&rsquo; again. This time select &lsquo;HTML Text Area&rsquo;.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/874888e0-5ea6-11e8-bd00-5b0277b2795c-Screenshot-2018-5-23 Objects(3).png" style="width: 150px; height: 150px;" class="fr-fic fr-dib">Give it the title &lsquo;Teaser&rsquo;. Then click &lsquo;Save Object Type&rsquo;.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/91a4d140-5ea6-11e8-83e8-cd9f4c70414e-Screenshot-2018-5-23 Objects(4).png" style="width: 160px;" class="fr-fic fr-dib">Awesome! you&rsquo;ve created your first Object Type. Let&rsquo;s do it three more times!<ol><li name="e3bd">Create an Object Type, Author. This represents a blog post author. Add an &lsquo;Image / File&rsquo; metafield and call it &lsquo;Image&rsquo;.</li><li name="3df1">Create an Object Type, Global. This is how we&rsquo;ll store meta data about our blog, like it&rsquo;s title, tag, and logo. Don&rsquo;t add any metafields.</li><li name="22b4">Create an Object Type, Social Link. We&rsquo;ll use this to store data about external social links. Add a &lsquo;Plain Text Input&rsquo; metafield and call it &lsquo;Url&rsquo;. Add an &lsquo;Image / File&rsquo; metafield and
call it &lsquo;Icon&rsquo;.</li></ol>We&rsquo;re almost done with the setup. Let&rsquo;s go back to our Post
Object Type and add one more metafield. We just defined another Object Type, Author. Wouldn&rsquo;t it be great if we could connect each Post to it&rsquo;s Author? Click &lsquo;Add Metafield&rsquo;
again. This time choose &lsquo;Single Object Relationship&rsquo;. In the dialog that appears, type &lsquo;Author&rsquo; for the &lsquo;Title&rsquo;. Then select &lsquo;Limit Search By Object Type&rsquo; and choose &lsquo;Authors&rsquo;. Then click &lsquo;Save&rsquo;.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/9f65ef80-5ea6-11e8-b62c-8d3b550463a2-Screenshot-2018-5-23 Edit Post.png" style="width: 500px;" class="fr-fic fr-dib">Setup complete! You&rsquo;ve just created an entire backend for your project. No configuring databases or servers required! 😀&nbsp; 🎉<h3 name="fd9b">Add some content</h3>Before we move on to connecting Cosmic&nbsp;to our app, let&rsquo;s add some data first. Click &lsquo;Globals&rsquo; in the Dashboard menu. Then click &lsquo;Add Global&rsquo;.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/b3034c40-5ea6-11e8-b62c-8d3b550463a2-Screenshot-2018-5-23 Globals.png" style="width: 121px;" class="fr-fic fr-dib">In the &lsquo;Title&rsquo; field, type &lsquo;Header&rsquo;. We&rsquo;ll then add 3 metafields.<ol><li name="48a8">Add a &lsquo;Plain Text Input&rsquo; metafield. Type &lsquo;Site Title&rsquo; for the &lsquo;Title&rsquo; and &lsquo;My Cosmic Blog&rsquo; for the &lsquo;Value&rsquo;. Check the &lsquo;Required&rsquo; checkbox.</li><li name="4cbe">Add another &lsquo;Plain Text Input&rsquo; metafield. Type &lsquo;Site Tag&rsquo; for the &lsquo;Title&rsquo; and &lsquo;A clean, minimalist, content-first blog powered by Cosmic&rsquo; for the &lsquo;Value&rsquo;.</li><li name="fdb4">Add an &lsquo;Image / File&rsquo; metafield. Type &lsquo;Site Logo&rsquo; for the &lsquo;Title&rsquo; and then select an image from your computer.</li></ol>Click &lsquo;Publish&rsquo;.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/bf9f7280-5ea6-11e8-83e8-cd9f4c70414e-Screenshot-2018-5-23 Edit Global.png" style="width: 212px;" class="fr-fic fr-dib">Now, lets add an Author. Click &lsquo;Authors&rsquo;, then &lsquo;Add Author&rsquo;. Enter your name for the &lsquo;Title&rsquo;. Add a brief bio for yourself in the &lsquo;Content&rsquo; section. Select an image. Then click &lsquo;Publish&rsquo;.Then, we&rsquo;ll add a Post. Click &lsquo;Posts&rsquo;, then &lsquo;Add Post&rsquo;. Enter a Title, some Content, a Teaser, &nbsp;add a Hero image, then select your name from the Author dropdown menu.&nbsp;Hopefully, you&rsquo;re getting the hang of using the Dashboard now. It&rsquo;s pretty intuitive.The last thing we&rsquo;ll do is add some Social Links. Repeat the same process as with the other Object Types. Add at least two Social Links.<h3 name="5d28">Content ✔️, Let&rsquo;s write some&nbsp;code</h3>Now we can get to the code! Clone, download, or just check out the source code at <a data-href="https://github.com/chrisoverstreet/cosmic-blog" href="https://github.com/chrisoverstreet/cosmic-blog" rel="nofollow noopener" target="_blank"></a><a href="https://github.com/chrisoverstreet/cosmic-blog">https://github.com/chrisoverstreet/cosmic-blog</a>.This isn&rsquo;t a React or Next.js tutorial, so I&rsquo;m just going to focus on the <code>/server.js</code> file. Next.js allows you to implement your own server by creating a server.js file in the root directory of your project. We&rsquo;re going to create an <a data-href="https://expressjs.com/" href="https://expressjs.com/" rel="noopener" target="_blank">express server</a>.The simplest way to connect to your Cosmic backend is with the <a data-href="https://www.npmjs.com/package/cosmicjs" href="https://www.npmjs.com/package/cosmicjs" rel="noopener" target="_blank">offical Cosmic JavaScript client</a>. To install
the client, in your terminal, type:<pre name="389e">npm i -S cosmicjs</pre>Back in server.js, import and initialize cosmicjs:<pre name="b39a">const Cosmic = require(&#39;cosmicjs&#39;);
const api = Cosmic();</pre>Now we&rsquo;re going to implement our own API to connect to Cosmic. We&rsquo;re doing this to create a layer between our App and our data. We could use the cosmicjs client whenever we wanted to fetch data in our app, but then our sensitive bucket data would be exposed to the client (like an API Write Access Key). Find your bucket slug by going back to the Cosmic Dashboard. Under the Settings menu, choose &lsquo;Basic Settings&rsquo;. Your &lsquo;Bucket slug&rsquo; should be visible. Copy it.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/2db20170-5ea7-11e8-b62c-8d3b550463a2-Screenshot-2018-5-23 Settings.png" style="width: 700px;" class="fr-fic fr-dib">Back in server.js, we&rsquo;ll create a bucket object that our API can use.<pre name="ec87">const bucket = api.bucket({ slug: 5b7536d0-59f8-11e8-8958-e7a8aba9942d });</pre>With that bucket object, we can fetch and return our data in the following way:<div class="fr-embedly " data-original-embed="<a href='' class='embedly-card'></a>"><a href="" class="embedly-card"></a></div><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/chrisoverstreet/f999f874bc1a6b868cf6e06711a8a736' class='embedly-card'></a>"><a href="https://gist.github.com/chrisoverstreet/f999f874bc1a6b868cf6e06711a8a736" class="embedly-card"></a></div><figure name="22ca"> </figure>The slug in <code>bucket.getObject()</code> is the slug used to define your Object. You can also fetch a list of Objects.<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/chrisoverstreet/0a07ff8f33dad2d26cad8f3594775161' class='embedly-card'></a>"><a href="https://gist.github.com/chrisoverstreet/0a07ff8f33dad2d26cad8f3594775161" class="embedly-card"></a></div>Here&rsquo;s the complete server.js code:<div class="fr-embedly " data-original-embed="<a href='Here's the complete server.js code:' class='embedly-card'></a>"><a href="Here" s="" the="" complete="" server.js="" code:'="" class="embedly-card"></a></div><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/chrisoverstreet/4b4c946b4bad2e6d95fd454f0304ddfb' class='embedly-card'></a>"><a href="https://gist.github.com/chrisoverstreet/4b4c946b4bad2e6d95fd454f0304ddfb" class="embedly-card"></a></div>Now we can hit our API endpoint inside our App to retrieve our data. For example, to retrieve a single post, we can use the following code:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/chrisoverstreet/63ed8ce858d30cde3d837ad65a13f509' class='embedly-card'></a>"><a href="https://gist.github.com/chrisoverstreet/63ed8ce858d30cde3d837ad65a13f509" class="embedly-card"></a></div>It&rsquo;s that simple!<h3 name="ec85">Outro</h3>This was just a high level overview of using Cosmic with React + Next.js. If you&rsquo;re like me, the best way to learn something is to jump right in and experiment with things. I invite you to download the source code for this project and tinker with it. Cosmic has much more to offer than what was mentioned in this post. Check out the articles and other information available on their site under the &lsquo;Developers&rsquo; tab.Thanks for reading! Happy coding!

Blogs by Chris Overstreet

Start building today

Blogs by Chris Overstreet

.css-9vqfqm{display:inline-block;white-space:pre;}.css-sanqhm{opacity:0;}Start building today

Start building today