Cosmic Year in Review

Best Practices using React Server Components with a Headless CMS

4 Steps to Update the Next.js Marketplace Template

Migrate from WordPress to a headless CMS in 3 easy steps

Introducing Cosmic 2.0

<p>We recently launched the <a href="https://storylicensing.com" rel="noopener noreferrer" target="_blank">Story Licensing</a> application which uses some of the most powerful development tools available. &nbsp;By offloading the non-core development functionality onto available API services, we were able to build this application faster than I ever could have imagined. &nbsp;I&#39;m excited to share with you how we did it.</p><h3><br>TL;DR</h3><p><a href="https://storylicensing.com" rel="noopener noreferrer" target="_blank">Check out the live Story Licensing app</a></p><h3><br>The Requirements</h3><p><img src="https://media.giphy.com/media/cALkoAIov3Y9a/giphy.gif" style="width: 100%;" class="fr-fic fr-dib"></p><p>Every application starts with a goal and requirements. &nbsp;For this application, the goal was to acquire leads interested in purchasing the rights to repost online content from publications in the <a href="http://www.amipublications.com/" rel="noopener noreferrer" target="_blank">AMI Publications</a> network. &nbsp;Our requirements:</p><p>1. Stories (for our app, stories published on <a href="http://twitter.com/ami">@ami</a> sites) need to be quickly and easily searchable<br>2. Stories need to indicate a ranking of publicly available social validation (Claps) to the interested lead<br>3. Ability to capture the lead&#39;s email (before the search action)<br>4. Ability to capture the bid request data: story title, lead email, search term bid and send an email to the admin<br>5. Ability to manage copy content by a content manager via a content management system</p><h3><br>The Services</h3><p><img src="https://cosmic-s3.imgix.net/d14ae260-6ce0-11e8-b2d8-b962f2783be9-nextjs-algolia-cosmicjs.jpg" style="width: 100%;" class="fr-fic fr-dib"></p><p>For this app we knew we didn&#39;t want to build and manage *everything*. &nbsp; Instead, we wanted to offload non-core development to the best available services, only building what we need. &nbsp;Any web project with a time crunch (pretty much every
project) would be well-advised to do this so you don&#39;t unnecessarily reinvent functionality that already exists at a high level. &nbsp;So for this app we decided to use:</p><p>1. <a href="https://cosmicjs.com" rel="noopener noreferrer" target="_blank">Cosmic</a> for content management, data storage, this is also where our Medium articles are stored using the <a href="https://cosmicjs.com/apps/medium-backup" rel="noopener noreferrer" target="_blank">Medium Backup Application</a>.<br>2. <a href="https://algolia.com" rel="noopener noreferrer" target="_blank">Algolia</a> to search stories. &nbsp;It definitely satisfies our speedy search requirement (It&#39;s FAST!)<br>3. <a href="https://sendgrid.com" rel="noopener noreferrer" target="_blank">SendGrid</a> for sending email notifications<br>4. <a href="https://twitter.com/ami" rel="noopener noreferrer" target="_blank">@ami</a> for supplying the story library</p><p>So with all of these, we&#39;ve got the best in class services for the respective functionality. And building our application would involve locking these services together.</p><h3><br>Building the Search Functionality</h3><p><img src="https://media.giphy.com/media/c5eqVJN7oNLTq/giphy.gif" class="fr-fic fr-dib" style="width: 100%;"></p><p>For this app I knew I wanted to use <a href="https://reactjs.org/" rel="noopener noreferrer" target="_blank">React</a> (mainly for personal preference). &nbsp;So in keeping with the &quot;build only what you have to&quot; theme, the natural framework choice for me was <a href="https://nextjs.org/" rel="noopener noreferrer" target="_blank">Next.js</a>. &nbsp;Their value proposition is &quot;React Applications Made Simple&quot;. &nbsp;It makes it easy to get a React app up and running without a lot
of boilerplate development while providing for a nice developer experience.</p><p>To integrate Algolia, I needed to implement the search bar into the React app. &nbsp;Luckily, they&#39;ve got an excellent <a href="https://community.algolia.com/react-instantsearch/" rel="noopener noreferrer" target="_blank">InstantSearch React Component</a>, which allows for easy integration into React apps. &nbsp;Just set your <code>appId</code>, <code>apiKey</code> and <code>indexName</code>. &nbsp;You can find these in your Algolia dashboard.</p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/6cb53eb0-6ce8-11e8-9928-d7068ff63fd8-Screen Shot 2018-06-10 at 2.56.21 PM.png" style="width: 90%;" class="fr-fic fr-dib"></p><p>Now that I had the search bar implemented, I needed to add records to Algolia. &nbsp;To do this, I needed to add the Cosmic-saved Medium articles into Algolia. &nbsp;I created a script to add Objects from Cosmic into our Algolia search index.</p><p>Here&#39;s <code>add-records.js</code>:</p><div class="fr-embedly                                  " data-original-embed="<a href='https://gist.github.com/tonyspiro/326cec4254f2fb0a14504bf561687452' class='embedly-card'></a>"><a href="https://gist.github.com/tonyspiro/326cec4254f2fb0a14504bf561687452" class="embedly-card"></a></div><p>Next I needed to get claps for stories, because the Medium XML feed for stories (Example: <a href="https://hackernoon.com/feed">https://hackernoon.com/feed</a>) doesn&#39;t include this vital information for our app. &nbsp;So to do this, I needed to create a worker script that could run daily, updating all of our story clap counts.</p><p>Here&#39;s <code>get-claps.js</code>:</p><div class="fr-embedly                                  " data-original-embed="<a href='https://gist.github.com/tonyspiro/1b041812c301e1d3c9aef76ecf40ec31' class='embedly-card'></a>"><a href="https://gist.github.com/tonyspiro/1b041812c301e1d3c9aef76ecf40ec31" class="embedly-card"></a></div><p>This script does the following: Gets all of the saved records in Algolia, hits the <a href="https://twitter.com/ami" rel="noopener noreferrer" target="_blank">@ami</a> story URL, gets the JSON data, parses it for the clap count, and then updates the record in Algolia. &nbsp;This process can run in the background to get and save the latest claps count for each story. &nbsp;This will increase our record actions per day quota in Algolia, increasing our costs, but it&#39;s worth it to get the latest social validation for each story.</p><p>With the search results coming from Algolia, the search term relevance gets priority, but we can also reorder the stories to show the highest clap count on top:</p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/884465b0-6da7-11e8-ba26-bd4442701118-story-licensing.gif" style="width: 100%;" class="fr-fic fr-dib"></p><p><br></p><h3>Saving the Lead Emails and Bid Requests</h3><p>Since the goal of this app is to save bid requests for potential customers, we chose SendGrid for a reliable email service provider. &nbsp;I created two endpoints to save the lead email prior to search, and the bid request information after a story had been found.</p><p>Here&#39;s <code>leads.js</code> and <code>bids.js</code>:</p><div class="fr-embedly                                  " data-original-embed="<a href='https://gist.github.com/tonyspiro/7aca4425df89ce7cbf7960c4bcde2202' class='embedly-card'></a>"><a href="https://gist.github.com/tonyspiro/7aca4425df89ce7cbf7960c4bcde2202" class="embedly-card"></a></div><div class="fr-embedly                                  " data-original-embed="<a href='https://gist.github.com/tonyspiro/a11e50cd33a6606b422e3960f75281b2' class='embedly-card'></a>"><a href="https://gist.github.com/tonyspiro/a11e50cd33a6606b422e3960f75281b2" class="embedly-card"></a></div><p>Notice for both of these actions (lead email and bid request), we are also storing the data in Cosmic. &nbsp;This has been done so we can use this data for admin record keeping. &nbsp;Cosmic now has this data available to view, query and deliver
via the Cosmic API into any future applications.</p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/ea2bdfb0-6da7-11e8-ba26-bd4442701118-Screen Shot 2018-06-11 at 1.45.53 PM.png" style="width: 100%;" class="fr-fic fr-dib"></p><h3>In Conclusion</h3><p>The finished app is now available to help you find high-quality content from the <a href="http://www.amipublications.com/" rel="noopener noreferrer" target="_blank">AMI Publications</a> network to license to your website or blog. &nbsp;<a href="https://storylicensing.com" rel="noopener noreferrer" target="_blank">Check it out here</a>. &nbsp;</p><h4><br>Resources Used</h4><p><a href="https://www.npmjs.com/package/cosmicjs" rel="noopener noreferrer" target="_blank">Cosmic NPM module</a><br><a href="https://www.npmjs.com/package/react-instantsearch" rel="noopener noreferrer" target="_blank">Algolia React InstantSearch NPM module</a><br><a href="https://www.npmjs.com/package/@sendgrid/mail" rel="noopener noreferrer" target="_blank">SendGrid NPM module</a></p><p>I&#39;m happy with the way this project came together. &nbsp; The development was fast thanks to using the best services and developer tools available (Algolia, SendGrid, Next.js and Cosmic) to deliver a fast and scalable application. &nbsp;Let me know your thoughts, <a href="https://cosmicjs.com/community" rel="noopener noreferrer" target="_blank">join the conversation on Slack</a> and <a href="https://twitter.com/cosmic_js" rel="noopener noreferrer" target="_blank">follow Cosmic on Twitter</a>.</p>

How we built the Story Licensing app using Next.js, Algolia and Cosmic

<p>This is a quick, fully-working example of how to process an uploaded image server-side using <a href="https://www.npmjs.com/package/multer" rel="noopener noreferrer" target="_blank">Multer</a>.</p><p>Open a terminal and run the following commands:</p><pre>mkdir test
cd test
npm i cosmicjs multer express
vim index.js
// Add the gist code below to index.js
node index.js</pre><p>Then if you&#39;re using <a href="https://www.getpostman.com/" rel="noopener noreferrer" target="_blank">Postman</a>. Set this request up to test:</p><p>POST <a href="http://localhost:5000/upload-keyart"></a>http://localhost:5000/upload</p><p>Add form-data file to the request.</p><p>Let me know if you have any questions! <a href="https://cosmicjs.com/community" rel="noopener noreferrer" target="_blank">DM me in Slack</a>, or <a href="https://twitter.com/cosmic_js" rel="noopener noreferrer" target="_blank">reach out on Twitter</a>.</p><div class="fr-embedly   " data-original-embed="<a href='https://gist.github.com/tonyspiro/3c0e231857e99e88a6f668e314e69169' class='embedly-card'></a>"><a href="https://gist.github.com/tonyspiro/3c0e231857e99e88a6f668e314e69169" class="embedly-card"></a></div><p>Photo by <a href="https://unsplash.com/@danielleone?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Daniel Leone</a> on <a href="https://unsplash.com/search/photos/mountain?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>.</p><p><br></p><p><br></p>

Upload Media to Your Cosmic Bucket Using Multer

<p>Thank you to everyone who joined us for our Halloween edition of our Wednesday Webinar series. In this presentation, we teamed up with <a href="https://www.gatsbyjs.org/" rel="noopener noreferrer" target="_blank">Gatsby</a> developer advocate <a href="https://twitter.com/jlengstorf" rel="noopener noreferrer" target="_blank">Jason Lengstorf</a> to discuss how to make localization for websites less spooky using Gatsby and Cosmic.</p><p><strong>The main points discussed are:</strong><br><strong>✅&nbsp;</strong>How to create localized content models in Cosmic<br><strong>✅&nbsp;</strong>How to install the Cosmic <a href="https://github.com/cosmicjs/gatsby-localization-starter" rel="noopener noreferrer" target="_blank">Gatsby Localization Starter</a><br><strong>✅&nbsp;</strong>How Gatsby builds your localized website for performance and SEO</p><p><br><strong><a href="https://github.com/cosmicjs/gatsby-starter-localization" rel="noreferrer nofollow noopener" target="_blank"></a></strong></p><p><span class="fr-video fr-fvc fr-dvb fr-draggable" contenteditable="false" draggable="true"><iframe width="640" height="360" src="//www.youtube.com/embed/16m3wRFPGAY?wmode=opaque" frameborder="0" allowfullscreen=""></iframe></span></p><p>Also we had a curveball thrown at us about localizing the language selectors. &nbsp;This has now been added to the <a href="https://github.com/cosmicjs/gatsby-localization-starter/blob/master/gatsby-config.js" rel="noopener noreferrer" target="_blank">gatsby-config.js</a> in the Gatsby Localization Starter by adding a <code>localized_name</code> property with different values for each locale:</p><div class="fr-embedly      " data-original-embed="<a href='https://gist.github.com/tonyspiro/d99317cf37f6e316ec5ab3a45e250d7d' class='embedly-card'></a>"><a href="https://gist.github.com/tonyspiro/d99317cf37f6e316ec5ab3a45e250d7d" class="embedly-card"></a></div><p><br></p><p><br></p>

Webinar Video: Localization with Gatsby and Cosmic 🌏

<p>Our digital world is being built on top of API services. And Webhooks are the operators that enable these API services to communicate with each other. Using Cosmic Webhooks to customize your service-to-service communications, you can create some powerful
automated workflows, helping you better communicate with your team and the world.</p><p>Below are a few practical use-cases for Cosmic Webhooks:<br><br><strong>Add Webhooks to your Bucket by going to&nbsp;</strong><a href="https://cosmicjs.com/buckets" rel="noopener noreferrer" target="_blank">Your Bucket &gt; Settings &gt; Billing &gt; Add-ons</a><br><br></p><h3>1. Slack: Send notifications to your team</h3><p><br></p><p style="text-align: center;"><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/274fddc0-c0d6-11e8-9b44-5583ac3a75ef-slack.svg" class="fr-fic fr-dii" style="width: 100%; max-width: 400px;"></p><p><br></p><p>Slack is a preferred chat tool to help teams stay in constant communication. Cosmic integrates easily with your Slack workspaces, allowing you to send chat notifications whenever content is added, edited, or deleted in your Cosmic Bucket. &nbsp;This
is great for when you would like to maintain a channel to log all content edits in between mocking co-workers with gifs.</p><p><a href="https://slack.com/oauth/authorize?&client_id=11020550018.203122635188&scope=incoming-webhook" rel="noopener noreferrer" target="_blank">Add Slack to your Cosmic Bucket &raquo;</a></p><p><br></p><h3>2. Netlify: Build your website automatically</h3><p><br></p><p style="text-align: center;"><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/4a604e80-c0d6-11e8-9b44-5583ac3a75ef-netlify.png" class="fr-fic fr-dii" style="width: 100%; max-width: 400px;"></p><p><br></p><p><a href="https://www.netlify.com/" rel="noopener noreferrer" target="_blank">Netlify</a> is a web hosting provider for your modern web projects that allows for some amazing automation capabilities. One of these nice automated capabilities is the ability to trigger automatic builds. Connecting your Cosmic Bucket to Netlify is a cinch, allowing you to rebuild your Netlify-hosted web project automagically whenever content is edited in your Cosmic Bucket. Follow the link below to learn exactly how to do this:</p><p><a href="https://cosmicjs.com/articles/netlify-gatsby-cosmic-js-automatic-builds-with-webhooks-ji3fhda9" rel="noopener noreferrer" target="_blank">Add the Netlify build hook to your Cosmic Bucket &raquo;</a></p><p><br></p><h3>3. SendGrid: Send email notifications to your team</h3><p><br></p><p style="text-align: center;"><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/549f4ae0-c0d6-11e8-9b44-5583ac3a75ef-sendgrid.png" class="fr-fic fr-dii" style="width: 100%; max-width: 400px;"></p><p><br></p><p>We recently released <a href="https://cosmicjs.com/docs/functions" rel="noopener noreferrer" target="_blank">Cosmic Functions</a> to help developers deploy code quickly and easily. A clear use-case for quickly deployed endpoints via Cosmic Functions is to use them for Webhook endpoints. Check out the <a href="https://github.com/cosmicjs/webhook-email-function" rel="noopener noreferrer" target="_blank">Webhook SendGrid Email Function</a> that enables you to send an email whenever content is added, edited, or deleted in your Cosmic Bucket. This is great for when your micro-managing content editor absolutely <strong>must</strong> read every draft from the comfort of their email inbox.</p><p><a href="https://cosmicjs.com/buckets" rel="noopener noreferrer" target="_blank">Go to Your Bucket &gt; Settings &gt; Functions to add the Send Email Webhook &raquo;</a></p><p><br></p><h3>BONUS: Zapier Integrations</h3><p><br></p><p style="text-align: center;"><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/67005710-c0d6-11e8-9b44-5583ac3a75ef-zapier-logo.png" class="fr-fic fr-dii" style="width: 100%; max-width: 400px;"></p><p><br></p><p><a href="https://zapier.com/" rel="noopener noreferrer" target="_blank">Zapier</a> may be the undisputed king of webhooks. Their ecosystem of thousands of apps that communicate with each other allow you to create some powerful integrations. Use the <a href="https://zapier.com/platform/public-invite/5784/d94417b158f78245932516dc472dbfbe/" rel="noopener noreferrer" target="_blank">Cosmic Zapier App</a> (currently invite only 😉) to connect your Cosmic Bucket to any number of services including Google&#39;s Product Suite, Salesforce, Facebook, Twitter, and more.</p><p><a href="https://zapier.com/platform/public-invite/5784/d94417b158f78245932516dc472dbfbe/" rel="noopener noreferrer" target="_blank">Connect thousands of services to your Cosmic Bucket &raquo;</a></p><h3><br></h3><h3>Conclusion</h3><p>Our digital world is powered by API services. &nbsp;Cosmic Webhooks connects your Bucket to the world of API services allowing your team to automate communications to help you build better products together.&nbsp;</p><p>Let me know if you have any questions or comments about Cosmic Webhooks. <a href="https://twitter.com/cosmic_js" rel="noopener noreferrer" target="_blank">Reach out to us on Twitter</a> and <a href="https://cosmicjs.com/community" rel="noopener noreferrer" target="_blank">join our Slack community</a>.</p>

Blogs by Tony Spiro

Start building today

Blogs by Tony Spiro

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

Start building today