<p>In this tutorial, I&#39;m going to show you how to create a simple Blog application using <a href="https://astro.build/">Astro</a>, and <a href="https://cosmicjs.com/">Cosmic CMS</a>. Without further ado, grab some coffee &amp; let&#39;s build a cool app!</p><h1 id="tldr">TL;DR</h1><ul><li><p><a href="https://astro-cosmic-blog.netlify.app/">Astro Cosmic Blog Demo</a></p></li><li><p><a href="https://github.com/sumitkharche/astro-cosmic-app">Download Source Code</a></p></li><li><p>&nbsp;<a data-remove-tab-index="true" data-sk="tooltip_parent" data-stringify-link="https://www.cosmicjs.com/apps/astro-cosmic-blog" href="https://www.cosmicjs.com/apps/astro-cosmic-blog" rel="noopener noreferrer" tabindex="-1" target="_blank">Install the Astro Cosmic Blog</a></p></li></ul><h1 id="prerequisites">Prerequisites</h1><p>You need to have installed the latest stable version of <a href="https://nodejs.org/">Node JS</a> and NPM. You will have no problem following the tutorial if you have a basic understanding of:</p><ul><li>HTML, CSS, and JavaScript</li><li>import and export syntax (ES6 modules)</li><li>concepts like components</li><li>the fetch API</li></ul><p>Let&#39;s get started with our technology stack.</p><h1 id="whatisastrohttpsastrobuild">What is <a href="https://astro.build/">Astro</a>?</h1><p>Astro is nothing but a yet another new Static Site Generator (SSG) which means it produces a static pages as in output. Its a new framework for building a websites. Astro give you us flexibility to use any JavaScript framework/library. The big advantage of using astro is it ships 0% Javascript by default and it will load on demand it we need it.</p><blockquote><p>Note: Astro is still an early beta state.</p></blockquote><h1 id="whataboutcosmichttpscosmicjscom">What about <a href="https://cosmicjs.com/">Cosmic</a>?</h1><p>Cosmic is a headless CMS that will enable us to build our application surprisingly quickly and deploy it to Netlifly in moments. Unlike traditional CMS, Cosmic offers us as the developers a lot of flexibility to develop this application how we please and take it to whatever hosting platform we wish. It is also very easy to store and retrieve data, which makes it perfect for building apps like this.</p><h2 id="creatingyourblogbucketincosmic">Creating Your Blog Bucket in Cosmic</h2><p>To create a blog app we will require data. To manage and manipulate this data, we will be using the power of Cosmic buckets and objects. To get started:</p><ol><li><p>Create a <a href="https://app.cosmicjs.com/signup">free account on Cosmic</a>. If this is your first time using Cosmic, you&#39;ll see a short tutorial which will introduce some of the data types we&#39;ll be using - buckets, objects, and metafields.</p></li><li><p>Create a new empty bucket &amp; name it coffee-blog. For each blog post, we will have three object types:</p></li></ol><ul><li><p>Title</p></li><li><p>Content</p></li><li><p>Image</p></li></ul><p>So, go ahead and add these properties in your buckets along with some data for those objects. <a href="https://www.cosmicjs.com/getting-started">If you&#39;re having trouble with Buckets, Objects, or Metafields, go ahead and read the Getting Started page really quickly for some startup instructions</a>, then come on back to this article.</p><p>Now we have created our Cosmic CMS and its get time to create a Astro project and integrate Cosmic CMS into it.</p><h1 id="createaastroapplication">Create a Astro application</h1><p>To create Astro project, we have to first create a folder and navigate to it.</p><pre><code>&gt; mkdir astro-cosmic-app &amp;&amp; cd astro-cosmic-app
</code></pre><p>Now run following command to install astro:</p><pre><code>&gt; npm init astro
</code></pre><p>After that select the template &quot;Starter Kit (Generic)&quot; as shown in below image:</p><p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2csgt9rnattoq5xljm96.PNG" alt="select-template" class="fr-fic fr-dii"></p><p>After that select framework you would like to use so I will select Preact but you can select whichever you want as shown below:</p><p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ua8ur3vlf5ox87e9gm8.PNG" alt="select-framework" class="fr-fic fr-dii"></p><p>Now wait for a minutes to finish the project creation.</p><p>After that install all the packages by running below command:</p><pre><code>&gt; npm install
</code></pre><p>To run the application execute below command:</p><pre><code>&gt; npm run dev
</code></pre><p>Now open <code><a href="http://localhost:3000/">http://localhost:3000/</a></code> and see the output:</p><p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oog08p5zo8xyyopp0grg.PNG" alt="first-start-app" class="fr-fic fr-dii"></p><p>So open the application into VS Code editor and check folder structure:</p><p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wsmcujpvmwa1vqh073e5.PNG" alt="first-vs-code" class="fr-fic fr-dii"></p><ul><li><p>/public : Any static assets, like images, can be placed in the public/ directory</p></li><li><p>src/components: components are reusable piece of code. You put any Astro/React/Vue/Svelte/Preact components.</p></li><li><p>src/pages : this folder contains all the pages for your website which are .md or .astro files. Each page is exposed as a route based on its file name.</p></li></ul><p>For this blog application we are using a Start Bootstarp Clean-blog template. Download the template from <a href="https://startbootstrap.com/theme/clean-blog">here</a>.</p><p>After downloading, extract the files and copy the style.css file under /css folder of template into public folder in our project.</p><p>Also copy data of /assets from template into assets folder in our project.</p><h4 id="createaenvfile">Create a .env file</h4><p>we are using .env file to stored the cosmic bucket and read key data. So install below package:</p><pre><code>npm install --D dotenv
</code></pre><p>After that create a .env file in root level of project and add update with your details:</p><pre><code>COSMIC_BUCKET_SLUG= </code>
<code>COSMIC_READ_KEY=
</code></pre><h4 id="createdifferentcomponents">Create different components</h4><ul><li>So delete all the files in components folder. First we will create a component called &#39;BlogPostPreview.astro&#39; which takes input as single post data and display it. So in components folder create a new component as &#39;BlogPostPreview.astro&#39;</li></ul><div class="fr-embedly      " data-original-embed="<a href='https://gist.github.com/sumitkharche/b239bc2c01cfae04c1af5b97584850e0' class='embedly-card'></a>"><a href="https://gist.github.com/sumitkharche/b239bc2c01cfae04c1af5b97584850e0" class="embedly-card"></a></div><ul><li>Create another components called &quot;BaseHead.astro&quot; which contains all metadata urls, links to external css/js files.</li></ul><div class="fr-embedly      " data-original-embed="<a href='https://gist.github.com/sumitkharche/d6daf74368ce28e6023158b2512326b3' class='embedly-card'></a>"><a href="https://gist.github.com/sumitkharche/d6daf74368ce28e6023158b2512326b3" class="embedly-card"></a></div><ul><li>Create a component called &quot;footer.astro&quot; to display the footer in all pages.</li></ul><div class="fr-embedly      " data-original-embed="<a href='https://gist.github.com/sumitkharche/1cb3938a415f7b588b8ff5e2337f0586' class='embedly-card'></a>"><a href="https://gist.github.com/sumitkharche/1cb3938a415f7b588b8ff5e2337f0586" class="embedly-card"></a></div><ul><li>Create a component called &quot;Navigation.astro&quot; to display the footer in all pages.</li></ul><div class="fr-embedly      " data-original-embed="<a href='https://gist.github.com/sumitkharche/5acc85dc7d85167dca5efdd2933270cf' class='embedly-card'></a>"><a href="https://gist.github.com/sumitkharche/5acc85dc7d85167dca5efdd2933270cf" class="embedly-card"></a></div><h4 id="displayallthepostsinlandingpage">Display all the posts in landing page</h4><ul><li>First we will create a folder in src called <code>lib</code> and inside that create a file called &#39;config.js&#39; which exports our env variables as belows:</li></ul><div class="fr-embedly      " data-original-embed="<a href='https://gist.github.com/sumitkharche/c6eecbdd859878a4d7863a9e8bdcc8a6' class='embedly-card'></a>"><a href="https://gist.github.com/sumitkharche/c6eecbdd859878a4d7863a9e8bdcc8a6" class="embedly-card"></a></div><ul><li>Open a index.astro file and replace below code to display all the posts in landing page:</li></ul><div class="fr-embedly      " data-original-embed="<a href='https://gist.github.com/sumitkharche/164d00b725ddf1b01a32a99d22814af8' class='embedly-card'></a>"><a href="https://gist.github.com/sumitkharche/164d00b725ddf1b01a32a99d22814af8" class="embedly-card"></a></div><p>Now run the application using <code>npm run dev</code> and see the output in <code>http://localhost:3000/</code>.</p><p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ltrlwkfz7bljbkuwa6vq.PNG" alt="landing-page" class="fr-fic fr-dii"></p><ul><li>Create another page inside pages folder called &quot;about.astro&quot; as below:</li></ul><div class="fr-embedly      " data-original-embed="<a href='https://gist.github.com/sumitkharche/9aef0d3d6767ec84dc27bb3708b61f1e' class='embedly-card'></a>"><a href="https://gist.github.com/sumitkharche/9aef0d3d6767ec84dc27bb3708b61f1e" class="embedly-card"></a></div><ul><li>Click on About option in navigation bar to see the output:</li></ul><p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kk6p013jx1d5gus9a4ax.PNG" alt="about-page" class="fr-fic fr-dii"></p><ul><li>Now we have to create a page which create separate static page for all our posts and when user clicks on single post it will display that page. To achieve that create a folder in pages called &quot;posts&quot; and inside that create a page called &quot;[slug].astro&quot; as belows:</li></ul><div class="fr-embedly      " data-original-embed="<a href='https://gist.github.com/sumitkharche/fec5790bdf0185793cfe383d95247dd5' class='embedly-card'></a>"><a href="https://gist.github.com/sumitkharche/fec5790bdf0185793cfe383d95247dd5" class="embedly-card"></a></div><ul><li>Now run the app again and click on post to see the post details:</li></ul><p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ob3cmtmbvppmqsuhzuty.PNG" alt="post-details" class="fr-fic fr-dii"></p><p>To build application in production mode you just need to run</p><pre><code>&gt; npm run build
</code></pre><h1 id="deployit">Deploy it</h1><p>We can now deploy our application on any hosting platform. I recommend deploying it on <a href="https://www.netlify.com/">Netlify</a> because it supports project structures like this and can quickly create deployments. Checkout this <a href="https://docs.astro.build/guides/deploy/#netlify">article</a> to deploy Astro app into Netlify.</p><h1 id="conclusion">Conclusion</h1><p>In this article, I have demonstrated you how to create a blogging application using Astro and Cosmic. The Cosmic Community has a lot of examples on how to handle integration with email functions, download functions, and third-party platforms. If you&#39;re interested in building your own applications like this, <a href="https://app.cosmicjs.com/signup">get started by setting up your free account</a>.</p><p>I really hope that you enjoyed this little app, and please do not hesitate to send me your thoughts or comments about what could I have done better.</p><p>If you have any comments or questions about building apps with Cosmic, <a href="https://twitter.com/cosmicjs">reach out to us on Twitter</a> and <a href="https://www.cosmicjs.com/community">join the conversation on Slack</a>.</p><p>You can follow me on twitter <a href="https://twitter.com/sumitkharche01">@sumitkharche01</a> or <a href="https://www.linkedin.com/in/sumit-kharche-890426a9/">LinkedIn</a></p>

How to Build a Blazing-Fast Astro Blog with Cosmic CMS

How to post to a Cosmic Bucket directly from the Drafts app

Build a Headless Ecommerce Product Filter with Angular and Cosmic

<p>Next.js is a React framework for building hybrid applications. It&#39;s flexible, extensible, and works great with any data provider. In this tutorial, part two of a two-part series, we&#39;ll show you how to build a blog with Cosmic CMS and Next.js (you can watch part one, <em>Getting Started with Cosmic CMS and Next.js</em> <a href="https://www.cosmicjs.com/articles/getting-started-with-cosmic-cms-and-nextjs">here</a>).<br><br>We&#39;ll run our blog locally, talk through static-site generation, and publish updates to our site. Next, we&#39;ll discuss preview mode and how to draft posts <a href="/knowledge-base/nextjs-cms">Cosmic CMS.</a> Finally, we&#39;ll walk through fallback loading states and publish our draft post to production.&nbsp;</p><p><span class="fr-video fr-fvc fr-dvb fr-draggable" contenteditable="false" draggable="true"><iframe src="//www.youtube.com/embed/sdvdwo3g3PE?wmode=opaque" frameborder="0" allowfullscreen="" style="width: 100%; height: 360px;"></iframe></span><br></p>

Building a Blog with Cosmic CMS and Next.js

<p><a href="https://nextjs.org/" rel="noopener noreferrer" target="_blank">Next.js</a> is a React framework for building hybrid applications. It&#39;s flexible, extensible, and works great with any data provider. In this tutorial, we&#39;ll show how to get started with <a href="/knowledge-base/nextjs-cms">Cosmic CMS and Next.js.</a><br><br>We&#39;ll set up a Cosmic account, explore the dashboard, talk about the data models, and finally deploy to <a href="https://vercel.com/" rel="noopener noreferrer" target="_blank">Vercel</a>. In the second part of the tutorial, we&#39;ll explain the Next.js code and walkthrough the content management workflow with Cosmic.</p><p><span class="fr-video fr-fvc fr-dvb fr-draggable" contenteditable="false" draggable="true"><iframe src="//www.youtube.com/embed/NZA1dF2IDqQ?wmode=opaque" frameborder="0" allowfullscreen="" style="width: 100%; height: 360px;"></iframe></span><br></p>

Getting Started with Cosmic CMS and Next.js

<p>Greener pastures await. Photo by <a href="https://unsplash.com/@kalenemsley?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Kalen Emsley</a> on <a href="https://unsplash.com/s/photos/mountain?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>.</p><p>Using the <a href="https://www.cosmicjs.com/extensions/contentful-importer" rel="noopener noreferrer" target="_blank">Cosmic Contentful Importer</a> to transfer your data from Contentful is extremely easy and only takes a few minutes! For a walkthrough of how I built the Contentful Importer check out my other article, <a href="https://www.cosmicjs.com/articles/creating-the-cosmic-js-contentful-importer-k5qwyunz" rel="noopener noreferrer" target="_blank">Creating the Cosmic Contentful Importer</a>.</p><p>First head to <span data-orgid="854767568389640192" data-room-id="room_bed0e40749b24a42e2890fff519f50f4" data-story-id="story_21bffee4e625c2e8ced54b2ffba27e60" data-text="<https://www.cosmicjs.com/extensions/contentful-importer>" data-timestamp="1580160724246" data-userid="854767567794049024"><a href="https://www.cosmicjs.com/extensions/contentful-importer" rel="noopener noreferrer" target="_blank">Contentful Importer Extension</a> and click the &quot;Select Extension&quot; button:</span></p><p style="text-align: center;"><img src="https://cdn.cosmicjs.com/809d7bc0-4448-11ea-8591-67efe620f8ec-Screen-Shot-2020-01-31-at-10.41.00-AM.png" style="width: 250px;" class="fr-fic fr-dib"></p><p><br></p><p>From there select the bucket you would like to add the extension to.&nbsp;</p><p>After selecting the bucket you will see the Contentful Importer extension in the left sidebar:</p><p style="text-align: center;"><img src="https://cdn.cosmicjs.com/187825d0-4449-11ea-8591-67efe620f8ec-Screen-Shot-2020-01-31-at-10.45.15-AM.png" class="fr-fic fr-dib" style="width: 250px;"></p><p><br></p><p>Now to export your data from Contentful! The first thing you&#39;ll need to do is export data using the contentful-cli. Contentful has a full walkthrough on installing the CLI <a href="https://www.contentful.com/developers/docs/tutorials/cli/installation/">here</a> and <a href="https://www.contentful.com/developers/docs/tutorials/cli/authentication/">here</a>, and a walkthrough on exporting your data <a href="https://www.contentful.com/developers/docs/tutorials/cli/import-and-export/">here</a>.&nbsp;</p><p>To install the contentful cli you can use homebrew, NPM or yarn:</p><pre># homebrew
brew install contentful-cli

# npm
npm install -g contentful-cli

#yarn
yarn global add contentful-cli</pre><p><br></p><p>Next you&#39;ll need to authenticate the CLI app with your account:</p><pre>$ contentful login</pre><p><br></p><p>After opening your browser you&#39;ll be prompted to login to Contentful then you&#39;ll be provided with a token:</p><p><img src="https://cdn.cosmicjs.com/9e6c9900-4449-11ea-8591-67efe620f8ec-contentful-key.png" style="width: 586px;" class="fr-fic fr-dib"></p><p><br></p><p>Finally, copy the token and paste it into the contentful login prompt in your console.&nbsp;</p><p><br></p><p>Now you can generate the Contentful export:&nbsp;</p><pre>$ contentful space export --space-id=[Your space ID] </pre><p><br></p><p>The export tool will run and produce a JSON file.&nbsp;</p><p><br></p><p>Go back to your space and upload the JSON file in the Contentful Importer extension page and click &quot;Run import&quot;:</p><p><img src="https://cdn.cosmicjs.com/1caa4be0-444b-11ea-8591-67efe620f8ec-cosmic-contentful-screen.png" style="width: 100%;" class="fr-fic fr-dib"></p><p><br></p><p>Congratulations! You&#39;ve successfully migrated your data from Contentful to Cosmic!</p>

Importing Data from Contentful to Cosmic

<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>The beauty of using a static site generator is that your back end can be completely separated from your front end. You can easily swap it out at any time no questions asked, and that&#39;s exactly what I did with <a href="https://learnbuildteach.com">Learn Build Teach</a>.
I went from markdown files to a true headless CMS in Cosmic for my courses information.</p><p><br></p><p><span style="font-size: 30px;">The Why</span></p><p>Why would I want to make this shift you might ask? Well, by completely decoupling my front end and backend, it gives me some flexibility. I have the ability to swap out my backend at any time as I mentioned. But also, it gives me the ability to leverage
that data on multiple different front end applications.&nbsp;</p><p><br></p><p>Additionally (and this is the big sell for Cosmic), if I am going to have non developers contributing to my content, they get an easy to use GUI to update information. Writing markdown files isn&#39;t extremely difficult, but it certainly can be tricky
for people that are new to it. With Cosmic, anyone with access can easily create/update content in a comfortable environment!</p><p><br></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/Qls5frYlJeI?wmode=opaque" frameborder="0" allowfullscreen=""></iframe></span><br></p><p><br></p><p><br></p><p><br></p>

VIDEO: From Markdown to Cosmic with Gatsby

<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>

Start building today