Introducing Cosmic 2.0

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>.Open a terminal and run the following commands:<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>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:POST <a href="http://localhost:5000/upload-keyart"></a>http://localhost:5000/uploadAdd form-data file to the request.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>.<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>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>.

Upload Media to Your Cosmic Bucket Using Multer

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.The main points discussed are: ✅&nbsp;How to create localized content models in Cosmic ✅&nbsp;How to install the Cosmic <a href="https://github.com/cosmicjs/gatsby-localization-starter" rel="noopener noreferrer" target="_blank">Gatsby Localization Starter</a> ✅&nbsp;How Gatsby builds your localized website for performance and SEO <a href="https://github.com/cosmicjs/gatsby-starter-localization" rel="noreferrer nofollow noopener" target="_blank"></a><iframe width="640" height="360" src="//www.youtube.com/embed/16m3wRFPGAY?wmode=opaque" frameborder="0" allowfullscreen=""></iframe>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:<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>

Webinar Video: Localization with Gatsby and Cosmic 🌏

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.Below are a few practical use-cases for Cosmic Webhooks: Add Webhooks to your Bucket by going to&nbsp;<a href="https://cosmicjs.com/buckets" rel="noopener noreferrer" target="_blank">Your Bucket &gt; Settings &gt; Billing &gt; Add-ons</a> <h3>1. Slack: Send notifications to your team</h3> <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;"> 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.<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> <h3>2. Netlify: Build your website automatically</h3> <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;"> <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:<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> <h3>3. SendGrid: Send email notifications to your team</h3> <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;"> 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 must read every draft from the comfort of their email inbox.<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> <h3>BONUS: Zapier Integrations</h3> <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;"> <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.<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><h3> </h3><h3>Conclusion</h3>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;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>.

3 Simple, but Powerful, Automation Webhooks

We recently released <a href="https://cosmicjs.com/docs/functions" rel="noopener noreferrer" target="_blank">Cosmic Functions</a> (public beta). We&#39;re excited to help teams build amazing modern products together with new serverless solutions.In this short tutorial, I&#39;m going to show you how to get up and running with the <a href="https://github.com/cosmicjs/send-email-function" rel="noopener noreferrer" target="_blank">SendGrid Email Function</a> to send emails via SendGrid (to view more example functions login and go to Your Bucket &gt; Settings &gt; Functions).<h3>Deploying the Function</h3>1. Install the function To install the SendGrid function, go to Your Bucket &gt; Settings &gt; Functions, find the SendGrid function, and click &quot;Install Function&quot;.2. Add keys, and deploy After you install the function, you will be redirected to a page to add your AWS credentials and environment variables. Follow the steps to add your AWS creds (if you don&#39;t have them handy).Go to your SendGrid account and find your API Secret Key located in <a href="https://app.sendgrid.com/settings/api_keys" rel="noopener noreferrer" target="_blank">Settings &gt; API Keys</a> (you may need to create a new one) and add this as the value to SENDGRID_API_KEY.Once you have your keys added, click &quot;Deploy Function&quot; and in a minute your function will be deployed and ready for requests.<h3>Code a Web Contact Form</h3>Next, let&#39;s create a contact form to access the newly deployed endpoint. Follow these steps to install the <a href="https://cosmicjs.com/getting-started#quickstart" rel="noopener noreferrer" target="_blank">React Starter</a>:<pre>npm i -g cosmic-cli
cosmic init react-starter
cosmic develop</pre>Now go to your app codebase and go to the default page component located in <code>pages/default.js</code> and edit it to look like this:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/tonyspiro/9d3947dd3db31885914d12e894a3bff1#file-default-js' class='embedly-card'></a>"><a href="https://gist.github.com/tonyspiro/9d3947dd3db31885914d12e894a3bff1#file-default-js" class="embedly-card"></a></div>Notice a couple things here:1. We&#39;ve added a <code>form</code> element to take the input for email, first name, and last name. 2. We&#39;ve added the <code>handleSubmit</code> method to handle the form submission which takes the values of the form and sends the data to our Cosmic Function endpoint.And that&#39;s it! We&#39;ve now got an endpoint that receives the data from our form and sends it to the SendGrid API for processing.<h3>Benefits</h3>Less Code We didn&#39;t have to worry about building an API endpoint in our app to send the data to SendGrid.Less Config Hassles We don&#39;t have to worry about config hassles like possibly leaking secret keys client-side. We don&#39;t have to share API keys with anyone else, just the endpoint. Config is handled in the Cosmic Function as an Environment Variable.Reusable We can use this endpoint in any other app that needs to send an email.I hope you enjoyed this quick tour of the SendGrid Function, now ready for installation and deployment (go to Your Bucket &gt; Settings &gt; Functions). Let me know if you have any questions or comments. <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>.

Sending Emails with the SendGrid Function

A common approach to website development is to build components that can be reused across different web pages. The benefit to this approach is that you end up doing less duplicate work by managing the components rather than managing duplicate content
across different pages. &nbsp;Popular JavaScript frameworks like React, Vue and Angular utilize this concept on the application code level to much success. &nbsp;How can we benefit from this approach on the content management level?In this tutorial I&#39;m going to show you how to build a component-based website using React and the Cosmic CMS. The goal is to save developers and content managers time and provide a scalable content model.<h3> Build the Content Model</h3>* Prereqs: This article assumes you have an understanding of Cosmic concepts: Object Types, Objects and Metafields. &nbsp;If you need to brush up on these concepts, go to the <a href="https://cosmicjs.com/getting-started" rel="noopener noreferrer" target="_blank">Getting Started guide</a>.Using Cosmic Object Types and Metafields, we can create composable components that can be used across website pages. &nbsp;For our example we will create three Object Types:1. Pages 2. Sections (components used in Pages) 3. Team Members (used in the Team Section)Let&#39;s look at each Object Type:<h4> </h4><h4>Pages</h4>All Pages will include the following: 1. Title (Text) 2. Content (HTML Textarea) 3. Sections (Multiple Objects Relationship Metafield)The Multiple Objects Relationship Metafield will be used to manage the Page Sections.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/22e80ef0-89f0-11e8-bc83-f9172b473721-Screen Shot 2018-07-17 at 1.34.49 PM.png" style="width: 300px;" class="fr-fic fr-dib fr-fil"><h4> </h4><h4>Team Members</h4>Metafields: 1. Name (Text Metafield) 2. Image (File Metafield) 3. Quote (Plain Textarea Metafield) <h4>Sections</h4>The Sections Object Type will be more dynamic and allow for different Metafields.Team SectionMetafields: 1. Headline 2. Multiple Object Relationship Metafield (Team) - Name - Image - QuoteAdd your team members:<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/63cb1af0-8a97-11e8-9c55-e31a389591ba-team-gif.gif" style="width: 100%;" class="fr-fic fr-dib">Signup SectionMetafields: 1. Headline (Text Metafield) 2. Image (File Metafield) 3. Content (HTML Metafield) 4. CTA (Text Metafield) Add Sections to Pages Now that we have our Sections set up, we can add them to our Pages:<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/8b6d21c0-8a97-11e8-9c55-e31a389591ba-sections-gif.gif" style="width: 100%;" class="fr-fic fr-dib"><h3> Code it up</h3>Now that we have our content saved, let&#39;s do some coding. Download the <a href="https://github.com/cosmicjs/react-starter" rel="noopener noreferrer" target="_blank">React starter</a>:<pre class=" language-bash"><code class=" language-bash">git clone https://github.com/cosmicjs/react-starter</code></pre>Now go into the Page component and edit it to look like this:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/tonyspiro/67376ea64c4ecff6faba35cc4f7ee8ad#file-page-sections-js' class='embedly-card'></a>"><a href="https://gist.github.com/tonyspiro/67376ea64c4ecff6faba35cc4f7ee8ad#file-page-sections-js" class="embedly-card"></a></div>As you can see, we&#39;ve added Section List on our Page Object. Our Section List and Section components looks like this:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/tonyspiro/fa68ae9484899ce0ae7e8228528fdda5#file-section-js' class='embedly-card'></a>"><a href="https://gist.github.com/tonyspiro/fa68ae9484899ce0ae7e8228528fdda5#file-section-js" class="embedly-card"></a></div>Output of the Section component is determined by the data passed via the <code>section</code> prop.<h3> In Conclusion</h3>The Cosmic CMS is a great solution for building component-based websites. &nbsp;In our example, we created a Page Object with a Multiple Object Metafield connected to a Sections Object Type to add our Section components. The benefit to this approach is that we can now manage the section content in one place and reuse it across pages without having to go into each page to edit duplicate data.I hope you found this useful. If you have any further questions, <a href="https://cosmicjs.com/community" rel="noopener noreferrer" target="_blank">join our community on Slack</a> and reach out to us on Twitter.Photo by <a href="https://unsplash.com/photos/ZHVy20iPb7E?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Lance Anderson</a> on <a href="https://unsplash.com/collections/1063303/bg?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>

Component-based Website Development with React and the Cosmic CMS

<a href="https://www.digitalocean.com/" rel="noopener noreferrer" target="_blank">Digital Ocean</a>, a hosting provider beloved by developers, provides a highly intuitive interface for deploying and managing application infrastructure. &nbsp;In this tutorial I&#39;m going to show you how to install and deploy a Cosmic-powered <a href="https://nuxtjs.org/" rel="noopener noreferrer" target="_blank">Nuxt.js</a> app on Digital Ocean. &nbsp;In just a few commands, and a few minutes, you&#39;ll be up and running with a Cosmic-powered app on a scalable Digital Ocean Droplet, ready for team collaboration.<h3> Getting Started</h3>To get started, let&#39;s go over what we will be installing on our Digital Ocean Droplet. &nbsp;We will be installing:1. <a href="https://nodejs.org/en/" rel="noopener noreferrer" target="_blank">Node.js</a> 2. <a href="https://www.npmjs.com/package/cosmic-cli" rel="noopener noreferrer" target="_blank">The Cosmic CLI</a> 3. <a href="https://cosmicjs.com/apps/nuxtjs-website-boilerplate" rel="noopener noreferrer" target="_blank">Nuxt.js Website Boilerplate</a> 4. <a href="https://www.nginx.com/" rel="noopener noreferrer" target="_blank">Nginx</a><h3> Creating the Droplet</h3>Go to <a href="https://www.digitalocean.com/"></a><a href="https://www.digitalocean.com">https://www.digitalocean.com</a> to login / signup. &nbsp;After logging in, create a new droplet. &nbsp;I recommend the Ubuntu with 2GB Memory. &nbsp;Then click &quot;Create&quot;.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/87118230-7311-11e8-9572-2df1de97d882-Screen%20Shot%202018-06-18%20at%2011.05.13%20AM.png" class="fr-fic fr-dii" style="width: 100%;"><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/8ec566e0-7311-11e8-9572-2df1de97d882-Screen%20Shot%202018-06-18%20at%2011.05.38%20AM.png" class="fr-fic fr-dii center-block" style="width: 100%; max-width: 500px;"><h3> Set up your Droplet</h3>After creating your Droplet, you should have received an email with your SSH login and password instructions.&nbsp;SSH into your Droplet Login to your server using your command line tool of choice with the information that was sent to you.<pre>ssh root@your-droplet-ip
Enter your password: the-password-they-emailed-to-you</pre> Install Node.js Now that you&#39;re logged in to your Droplet, start by installing <a href="https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions" rel="noopener noreferrer" target="_blank">Node.js version 10</a> with the following commands:<pre><code>curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
sudo apt-get install -y nodejs</code></pre>Check that Node.js is installed:<pre>nodejs -v # this should output v10.x.x</pre> Install the Cosmic CLIIf you haven&#39;t already, <a href="https://cosmicjs.com/signup" rel="noopener noreferrer" target="_blank">create your free Cosmic account</a>.Now you can install the <a href="https://www.npmjs.com/package/cosmic-cli" rel="noopener noreferrer" target="_blank">Cosmic CLI</a>, which is a powerful tool to help you scaffold new projects and execute actions in your Cosmic account.<pre>npm i -g cosmic-cli</pre> Login and install the App Next, we&#39;ll need to login to Cosmic via the CLI. &nbsp;Enter your email and password after logging in with the following command:<pre>cosmic login</pre>If you go to the <a href="https://cosmicjs.com/apps/nuxtjs-website-boilerplate" rel="noopener noreferrer" target="_blank">Nuxt.js Website Boilerplate App page</a>, you&#39;ll notice there is a single command to install this application. &nbsp;Run this
command:<pre><code>cosmic install-app nuxtjs-website-boilerplate</code></pre>You will then be prompted to create a new Bucket or select an existing Bucket. &nbsp;Select &quot;Create New Bucket&quot; and add a Title for your Bucket. &nbsp;At this point, a couple things will happen: Example content will be imported to your newly
created Bucket and the Nuxt.js app code will be downloaded to your Digital Ocean Droplet. Then you&#39;ll see the status of the install:<pre>Success!
App code located at /root/nuxtjs-website-boilerplate</pre>Run this command to start the app:<pre>cosmic start-app</pre>Once you see the status &quot;OPEN <a href="http://localhost:3000/">http://localhost:3000</a>&quot;, your app is built and you can go to your Droplet IP on port 3000 to view your app. &nbsp;(See screenshot below to find your Droplet IP address).<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/e2460130-731b-11e8-9572-2df1de97d882-ip.jpg" class="fr-fic fr-dii" style="width: 100%;">So looking at the above screenshot, I&#39;ll go to&nbsp;http://167.99.234.7:3000 and I&#39;ll see the app:<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/dbb30490-7315-11e8-9572-2df1de97d882-Screen%20Shot%202018-06-18%20at%2011.36.53%20AM.png" class="fr-fic fr-dii" style="width: 100%;"> Install Nginx Now that we have our app installed, let&#39;s install <a href="https://www.nginx.com/" rel="noopener noreferrer" target="_blank">Nginx</a>. &nbsp;Nginx will make it possible to run our app on port 80 (which is the port assigned to websites running on
a domain on http). &nbsp;This will allow us to view the app on just the IP address (no port) and point a domain to the IP.Stop your running app (Control+C) and run the following command to install Nginx:<pre><code data-language="shell">sudo apt-get install<code> -y </code>nginx</code></pre>Next, let&#39;s configure Nginx to run a proxy from port 80 to port 3000:<pre>sudo rm /etc/nginx/sites-enabled/default
sudo vim /etc/nginx/sites-available/<code data-language="shell">cosmicjs</code></pre>And edit this file to look exactly like this:<pre><code data-language="shell">server {
 listen 80;
    server_name example.com;
 location / {
 proxy_set_header X-Forwarded-For $remote_addr;
 proxy_set_header Host $http_host;
        proxy_pass         &quot;http://127.0.0.1:3000&quot;;
 }
}</code></pre>Notice we set the proxy_pass to port 3000, this allows Nginx to act as a reverse proxy by forwarding all incoming requests on port 80 to your Node.js app on port 3000.Next, we need to symlink our configuration to <code>sites-enabled</code> for it to be used by Nginx, since it&#39;s currently in <code>sites-available</code>:<pre><code data-language="shell">sudo ln -s /etc/nginx/sites-available/cosmicjs /etc/nginx/sites-enabled/<code data-language="shell">cosmicjs</code></code></pre><h5 id="applyingtheconfiguration"> Restart Nginx</h5>Now we need to restart Nginx to apply the changes:<pre><code data-language="shell">sudo service nginx restart</code></pre>Now run the start command again:<pre>cosmic start-app</pre>Once the app starts, go to your IP address (without the port number) and you should see your application running cleanly without the port number in the URL.At this point, you may want to run this process in the background. &nbsp;For this, <a href="https://www.npmjs.com/package/pm2" rel="noopener noreferrer" target="_blank">PM2</a> is a great solution. Add your Domain When you&#39;re ready to add a domain to your website, you&#39;ll need to do two things:1. Go to your Domain Registrar and add the IP address to your A Name Records. 2. Add your domain to your Nginx config from above (server_name), then restart Nginx, and your website is LIVE! Invite Team Members To invite team members to help manage content, login to Cosmic and go to Your Bucket &gt; Users. OR run the following command to invite team members via the Cosmic CLI!<pre>cosmic add-user --email someone@myteam.com --role editor</pre><h3> Conclusion</h3>Digital Ocean is an intuitive application hosting service provider that makes spinning up servers fast and easy. &nbsp;With the tools that come with Cosmic, you can have a website connected to a CMS, launched on Digital Ocean, ready to share with your team members in a matter of minutes. &nbsp;If you have any questions about <a href="https://cosmicjs.com/apps" rel="noopener noreferrer" target="_blank">Cosmic-powered apps</a>, join the conversation <a href="https://cosmicjs.com/community" rel="noopener noreferrer" target="_blank">on Slack</a> and reach out to us on <a href="https://twitter.com/cosmic_js" rel="noopener noreferrer" target="_blank">Twitter</a>. &nbsp;Looking forward to seeing what you build!

Install a Cosmic-powered Nuxt.js App on Digital Ocean in 5 minutes

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.<h3> TL;DR</h3><a href="https://storylicensing.com" rel="noopener noreferrer" target="_blank">Check out the live Story Licensing app</a><h3> The Requirements</h3><img src="https://media.giphy.com/media/cALkoAIov3Y9a/giphy.gif" style="width: 100%;" class="fr-fic fr-dib">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:1. Stories (for our app, stories published on <a href="http://twitter.com/ami">@ami</a> sites) need to be quickly and easily searchable 2. Stories need to indicate a ranking of publicly available social validation (Claps) to the interested lead 3. Ability to capture the lead&#39;s email (before the search action) 4. Ability to capture the bid request data: story title, lead email, search term bid and send an email to the admin 5. Ability to manage copy content by a content manager via a content management system<h3> The Services</h3><img src="https://cosmic-s3.imgix.net/d14ae260-6ce0-11e8-b2d8-b962f2783be9-nextjs-algolia-cosmicjs.jpg" style="width: 100%;" class="fr-fic fr-dib">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: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>. 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!) 3. <a href="https://sendgrid.com" rel="noopener noreferrer" target="_blank">SendGrid</a> for sending email notifications 4. <a href="https://twitter.com/ami" rel="noopener noreferrer" target="_blank">@ami</a> for supplying the story librarySo 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.<h3> Building the Search Functionality</h3><img src="https://media.giphy.com/media/c5eqVJN7oNLTq/giphy.gif" class="fr-fic fr-dib" style="width: 100%;">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.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.<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">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.Here&#39;s <code>add-records.js</code>:<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>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.Here&#39;s <code>get-claps.js</code>:<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>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.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:<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"> <h3>Saving the Lead Emails and Bid Requests</h3>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.Here&#39;s <code>leads.js</code> and <code>bids.js</code>:<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>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.<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"><h3>In Conclusion</h3>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;<h4> Resources Used</h4><a href="https://www.npmjs.com/package/cosmicjs" rel="noopener noreferrer" target="_blank">Cosmic NPM module</a> <a href="https://www.npmjs.com/package/react-instantsearch" rel="noopener noreferrer" target="_blank">Algolia React InstantSearch NPM module</a> <a href="https://www.npmjs.com/package/@sendgrid/mail" rel="noopener noreferrer" target="_blank">SendGrid NPM module</a>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>.

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

<a href="https://www.gatsbyjs.org/" rel="noopener noreferrer" target="_blank">Gatsby</a> is the new hotness for static sites, and <a href="https://www.netlify.com/" rel="noopener noreferrer" target="_blank">Netlify</a> is an amazing service that helps you deploy static sites with some brilliant automation capabilities. &nbsp;Combine these with the new <a href="https://github.com/cosmicjs/gatsby-source-cosmicjs" rel="noopener noreferrer" target="_blank">Cosmic source plugin for Gatsby</a> and you have a technology stack that scales well and is highly performant.In this tutorial, I&#39;ll show you how to deploy your Gatsby Blog to Netlify and trigger automatic builds on content edits using Cosmic Webhooks.<h3> Install the App</h3>Check out the <a href="https://cosmicjs.com/apps/gatsby-blog" rel="noopener noreferrer" target="_blank">Gatsby Blog available on Cosmic</a>. &nbsp;Install the app: 1. Create a <a href="https://app.cosmicjs.com/add-bucket">new Bucket</a> 2. Choose the option to start with an App 3. Install the Gatsby Blog<img src="https://cdn.cosmicjs.com/47de6bd0-37a2-11ea-bfe8-5b62c3bdf959-Screen-Shot-2020-01-15-at-8.20.55-AM.png" style="width: 100%;" class="fr-fic fr-dib"><h3> </h3><h3>Deploy to Netlify</h3>After you install the Gatsby Blog app, install the <a href="https://www.cosmicjs.com/extensions/deploy-to-web">Deploy to Web Extension</a>.<img src="https://cdn.cosmicjs.com/f8f073d0-37a9-11ea-bfe8-5b62c3bdf959-Screen-Shot-2020-01-15-at-9.15.49-AM.png" style="width: 100%;" class="fr-fic fr-dib">Find the Netlify option and add the Gatsby Blog GitHub URL: <a href="https://github.com/cosmicjs/gatsby-blog-cosmicjs">https://github.com/cosmicjs/gatsby-blog-cosmicjs</a> <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/083d09f0-69c2-11e8-93d9-07e88fbd23be-Screen Shot 2018-06-06 at 2.39.20 PM.png" style="width: 100%;" class="fr-fic fr-dib"><h3>Set Environment Variables</h3>In Netlify, go to Your Netlify Site &gt; Settings &gt; Build and Deploy &gt; Build environment variables. &nbsp;Set a COSMIC_BUCKET environment variable to your Cosmic Bucket slug. &nbsp;Add your COSMIC_READ_KEY &nbsp;(Optional) if you&#39;ve set this in Your Cosmic Bucket &gt; Settings.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/f7f91160-69c1-11e8-bb4b-bb841c6f890e-Screen Shot 2018-06-06 at 2.42.20 PM.png" style="width: 100%;" class="fr-fic fr-dib"> <h3>Do It Live!</h3>Your site should now be live and look like this:<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/be934ba0-69c8-11e8-a7c7-51f210bd26e5-Screen Shot 2018-06-06 at 3.31.49 PM.png" style="width: 100%;" class="fr-fic fr-dib"> <h3>Set Up Hooks</h3>Now let&#39;s make sure to tell Netlify to rebuild our site whenever content is edited in Cosmic. &nbsp;To do this, first go into Netlify&#39;s deploy settings area located in Your Netlify Site &gt; Settings &gt; Build and Deploy &gt; Build Hooks and add a Build Hook:<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/39af68a0-69c9-11e8-a629-b9b01087edc9-Screen Shot 2018-06-06 at 3.34.49 PM.png" style="width: 100%;" class="fr-fic fr-dib">Save, then copy and paste the generated build hook URL into your Cosmic Bucket &gt; Webhooks<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/53f1f930-69c9-11e8-bb4b-bb841c6f890e-Screen Shot 2018-06-06 at 3.35.13 PM.png" style="width: 100%;" class="fr-fic fr-dib"><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/856f3180-69c9-11e8-aa5e-899f1914d7b2-Screen Shot 2018-06-06 at 3.37.45 PM.png" style="width: 100%;" class="fr-fic fr-dib">This will trigger a rebuild whenever content is created, edited or deleted in Cosmic.<h3> </h3><h3>Now Edit Content!</h3>Now you&#39;ll notice whenever you add / edit / remove content in your Cosmic Bucket, a magic message is sent to Netlify to tell it to rebuild your awesome Gatsby site!<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/53daf1f0-69cd-11e8-a7c7-51f210bd26e5-Screen Shot 2018-06-06 at 4.03.58 PM.png" style="width: 100%;" class="fr-fic fr-dib"><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/5e1ef760-69cd-11e8-a629-b9b01087edc9-Screen Shot 2018-06-06 at 4.04.50 PM.png" style="width: 100%;" class="fr-fic fr-dib"><h3>In Conclusion</h3>With Gatsby, Netlify and Cosmic, building fast, scalable and highly performant websites has never been easier. With webhooks and Netlify&#39;s built-in continuous deployment, you can enjoy an amazing automated developer experience.Let me know if you have any questions! &nbsp;<a href="https://twitter.com/tonyspiro" rel="noopener noreferrer" target="_blank">Reach out to me on Twitter</a> and <a href="https://cosmicjs.com/community" rel="noopener noreferrer" target="_blank">message me on Slack</a>.

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