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

Upload Media to Your Cosmic Bucket Using Multer

<p dir="ltr">If you are looking into the question of what a headless CMS can offer you that a traditional, full stack, front to back CMS cannot, then there are probably a couple of things that can be assumed about you. One is that you have probably dealt with a traditional web publishing CMS like WordPress or Drupal. Also that you have some technical acumen, you are probably a developer, designer, or have an interest in a web presence. Another is that you have hit some struggle or have some pain point that has led to you to look into if a headless CMS can solve that for you. This article will point out some of the advantages that a <a href="https://cosmicjs.com/headless-cms" rel="noopener noreferrer" target="_blank">headless CMS</a> offers. Hopefully, your pain point is covered in here or it sparks an idea for a new way of thinking about what you can do with a CMS.&nbsp;</p><p data-empty="true"><br></p><h3 dir="ltr">Language Flexibility</h3><p dir="ltr">If you have dealt with a traditional CMS, there is a good chance that you have lived in the land of PHP. But maybe your shop is not a PHP shop. Maybe you are a .NET or Java shop and a client has brought a new blog project to you. Maybe you are on the cutting edge and only deal in the newest of JavaScript front end frameworks like React, Vue, or Angular. With a headless CMS, you can write in whatever language you want. As long as you can make an http request to an API, you are golden. It allows you to focus on crafting the presentation of the content that gets your message across, in a language or framework that you are most comfortable working with.&nbsp;</p><p data-empty="true"><br></p><h3 dir="ltr">Design Flexibility</h3><p dir="ltr">Most CMS systems have a few types of objects that you can choose to implement, such as Pages, Posts, or Forms. With a headless CMS, you can <a href="https://cosmicjs.com/headless-cms/content-modeling" rel="noopener noreferrer" target="_blank">create objects of different types</a> and model them however you like. It is a blank canvas for you to create your content in a way that makes sense to your use case and needs. It basically allows you to create your own wide-open API-powered database without having to know about indexes and sharding.</p><p data-empty="true"><br></p><h3 dir="ltr">CMS as a Service (CaaS)</h3><p dir="ltr">Everything is &quot;X as a service&quot; now thanks to the movement to the cloud. There are some that wear knowledge of Apache server or IIS like it is a badge of honor. They know how to bounce a server when the connections to the database start pooling up. That is fantastic, but that is not for everyone. Some don&rsquo;t want those concerns. They don&rsquo;t want to have to spend nights or weekends rebooting and updating servers when traffic is low. They only want to have to worry about the endpoint where their content lives. Having a headless CMS offloads a great deal of these infrastructure concerns. For small shops or freelancers, this can be a great weight lifted off of their shoulders when they no longer have to spend time on this.</p><p data-empty="true"><br></p><h3 dir="ltr">Debugging and Testing</h3><p dir="ltr">There can be a steep learning curve for even experienced developers when developing for a traditional CMS. The inherent decoupling that a headless CMS offers allows you to use tools such as Postman or curl to test your endpoints. This can be especially useful when &nbsp;chasing down pesky bugs by allowing you to easily determine if your problem is before your request for the content, what you are requesting, or what you are doing with the data you receive from the CMS. This also allows you to build out a full test suite where you can mock your data that would be returned from the CMS.</p><p data-empty="true"><br></p><h3 dir="ltr">Futureproofing</h3><p dir="ltr">Most reliable API products take great care to version their API and not introduce breaking changes. They know that one thing that gives them an advantage is that they are more available and reliable than other solutions. They may introduce other features, but they leave it up to you if you want to implement them or you can just leave things working as they currently are. No forced updates, no library versioning hell. You are not going to have to worry if you have the right version of some obscure package installed on your server in order for your application to run properly. Also, migration to another server or horizontal scaling is as easy as just spinning your application up on another server. You don&rsquo;t have to worry about what tables in some arcane database have references to your original server. You don&rsquo;t have to have any tools to go through and update those to your new server, hoping than none of your data gets corrupted in the process as things are overwritten.</p><p data-empty="true"><br></p><p dir="ltr">These are just a few of the aspects that a <a href="https://cosmicjs.com" rel="noopener noreferrer" target="_blank">headless CMS such as Cosmic</a> can offer to developers over more traditional CMS systems. Hopefully, one or more of these struck on a problem that you have been having or sparked some imagination of something new that you now envision creating.&nbsp;</p><p dir="ltr"><a href="https://cosmicjs.com/jintrocaso" rel="noopener noreferrer" target="_blank">Jamie Introcaso</a> is a Full-Stack Developer in the <a href="https://cosmicjs.com/community" rel="noopener noreferrer" target="_blank">Cosmic Community</a>. Read about Jamie&#39;s migration from WordPress to the Cosmic Headless CMS <a href="https://cosmicjs.com/articles/moving-from-wordpress-to-limitless-opportunity-using-cosmic-js-jx2ei3kz" rel="noopener noreferrer" target="_blank">here</a>. If you have any comments or questions about building apps with <a href="https://cosmicjs.com" rel="noopener noreferrer" target="_blank">Cosmic</a>, reach out to us on <a href="https://twitter.com/cosmic_js">Twitter</a> and join the conversation on <a href="https://cosmicjs.com/community">Slack</a>.</p><p dir="ltr">Photo by <a href="https://unsplash.com/@joelfilip?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Joel Filipe</a> on <a href="https://unsplash.com/search/photos/grid?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></p>

5 Advantages to Using a Headless CMS

<p>In this tutorial, I&#39;m going to show you how to create a simple ToDo application using <a href="https://svelte.dev/" rel="noopener noreferrer" target="_blank">Svelte</a> and <a href="https://cosmicjs.com/" rel="noopener noreferrer" target="_blank">Cosmic</a>. So lets grab a cup of coffee and start coding.</p><h3>TL;DR</h3><p><a href="https://cosmicjs.com/apps/svelte-todo-app" rel="noopener noreferrer" target="_blank">Svelte ToDo App Demo</a></p><p><a href="https://github.com/cosmicjs/svelte-todo" rel="noopener noreferrer" target="_blank">Download Source Code</a></p><h3>Prerequisites</h3><p>You need to have installed the latest stable version of <a href="https://nodejs.org" rel="noopener noreferrer" target="_blank">Node JS</a> and NPM. &nbsp;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>async/await syntax</li><li>concepts like components</li><li>the axios API</li></ul><p>&nbsp;Let&#39;s get started with our technology stack.&nbsp;</p><h3>What is Svelte?</h3><p><a href="https://svelte.dev/">Svelte</a> is a JavaScript UI library created by Rich Harris. Couple of months ago Svelte 3 has been released. So you think that why we need to learn Svelte if we have React/Angular/Vue. Aren&#39;t these language/frameworks enough? &nbsp;There is great article published in Svelte which gives you the reason behind developing the Svelte. Here is link : <a href="https://svelte.dev/blog/svelte-3-rethinking-reactivity">svelte-3-rethinking-reactivity</a>&nbsp;</p><p>So below are some interesting points about Svelte:&nbsp;</p><ul><li>Svelte is a <strong>compiler</strong>, not a dependency like React or Vue</li><li>Svelte seems to need <strong>less code</strong> for the same things that with React require 40% more LOC (source: Rich Harris)</li><li>Svelte has <strong>no virtual DOM</strong>, compiles to minimal &ldquo;vanilla&rdquo; JavaScript and seems more performing than other libraries</li><li>Your app is tremendously faster. If you see &nbsp;<a href="https://github.com/krausest/js-framework-benchmark" rel="noopener noreferrer" target="_blank">this JS Framework Benchmark</a>, Svelte is very much faster than the apps built using Angular, React, Vue, etc. This is because Svelte is nothing but vanilla JS.&nbsp;</li></ul><p>If you want to learn more about the Svelte, go through &nbsp;<a href="https://svelte.dev/repl/">Svelte REPL</a>.</p><h3>What about Cosmic?</h3><p><a href="https://cosmicjs.com/" rel="noopener noreferrer" target="_blank">Cosmic</a> is an <a data-href="https://cosmicjs.com" href="https://cosmicjs.com/" rel="noopener" target="_blank">API-first CMS</a> that helps teams of developers and content editors build apps faster. It provides lots of great features which will help to easily manage data. <a href="https://cosmicjs.com/" rel="noopener noreferrer" target="_blank">Cosmic</a> is an amazing content management system with options to categorize and distribute data in a way that makes sense to you.</p><h3>Create new bucket in Cosmic</h3><p>To create app we will require fetch or store data. For this we will be using the power of Cosmic. Create a free account on &nbsp;<a href="https://cosmicjs.com/" rel="noopener noreferrer" target="_blank">Cosmic</a> and create new empty bucket &amp; name it as todo-app. For basic Todo list app will have two object types:</p><ul><li>Name</li><li>IsCompleted</li></ul><p>So add this property in bucket along with some initial data. &nbsp;<a href="https://cosmicjs.com/getting-started" rel="noopener noreferrer" target="_blank">Follow this steps to create bucket in Cosmic.</a></p><h3>Create Svelte application</h3><p>It is very easy to create Svelte app. We are using default template for creating the Todo list application.</p><pre><code>npx degit sveltejs/template todo-app
cd <code>todo-app</code></code>
npm install</pre><p>To run it on local machine hit below command.</p><pre>npm run dev</pre><p>By default Svelte app is run on &nbsp;<a href="http://localhost:5000/" rel="nofollow"></a><a href="http://localhost:5000">http://localhost:5000</a>.</p><p>So you can see the rollup.config.js file in the project. Like webpack, <a href="https://rollupjs.org/">rollup.js</a> is module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application.</p><p>The starting point of Svelte app is the main.js file. &nbsp;All the Svelte component has .svelte extension. If you take look around the files you will see the App.svelte file which is root component. So a basic Svelte component is divided into 3 parts:</p><ul><li>Under <strong>script</strong> tag you have to write your JavaScript code.</li><li>Under <strong>style</strong> tag you have to define you style. It uses CSS-in-JS style to define you CSS.</li><li>Then you can the write &nbsp;HTML markup.</li></ul><p>Now first we are fetching the Todos from Cosmic using the Cosmic Rest api. So to connect you application with Cosmic Bucket create the config.js file inside src folder and below code.</p><div class="fr-embedly             " data-original-embed="<a href='https://gist.github.com/sumitkharche/0a98120359b77ed9b73545c94aa5642a' class='embedly-card'></a>"><a href="https://gist.github.com/sumitkharche/0a98120359b77ed9b73545c94aa5642a" class="embedly-card"></a></div><p>To replace the variable defined in config.js file during the build time we have to install a new plugin called &nbsp;<a href="https://www.npmjs.com/package/rollup-plugin-replace" rel="noopener noreferrer" target="_blank">rollup-plugin-replace</a>. After installation open the rollup.config.js file and replace the below code.</p><div class="fr-embedly            " data-original-embed="<a href='https://gist.github.com/sumitkharche/79e119663f0a36fe4047be89552122bb' class='embedly-card'></a>"><a href="https://gist.github.com/sumitkharche/79e119663f0a36fe4047be89552122bb" class="embedly-card"></a></div><p>So we are completed the Cosmic integration with our Svelte app. First we are going to fetch the Todos from Cosmic Bucket. Here we are using App,svelte as our container component. Like any other libraries Svelte has also its own lifecycle methods i.e. OnMount, beforeUpdate, afterUpdate, onDestroy,etc.</p><p>&nbsp;We need to fetch data every time App.svelte component mounts. Fetching data from Cosmic Rest endpoint we will be using axios. So first install axios.&nbsp;</p><pre>npm install axios </pre><p>After that for each todo create new component called TodoItem.svelte. This component is used to display single todo. So loop over each todo and send it as props to TodoItem.svelte component. On Svelte site there is good collection of examples. You can <a href="https://svelte.dev/examples" rel="noopener noreferrer" target="_blank">see here</a>.&nbsp;</p><p>As Svelte has CSS-in-JS we can define CSS for each component. After fetching, we have to add the new todo. For doing this create input field and button in App,svelte file and on click of button call post api to add new todo in Cosmic database. Same changes are require for updating the IsComplete flag and delete todo.</p><p>Update index.html file to add Bootstrap and font-awesome:</p><div class="fr-embedly          " data-original-embed="<a href='https://gist.github.com/sumitkharche/08f97855abaaf2134cd03783f6e1b670' class='embedly-card'></a>"><a href="https://gist.github.com/sumitkharche/08f97855abaaf2134cd03783f6e1b670" class="embedly-card"></a></div><p>See the below complete code for this simple Todo list application:</p><div class="fr-embedly          " data-original-embed="<a href='https://gist.github.com/sumitkharche/bc99883bd85ad4f1acd724b5faa42cdb' class='embedly-card'></a>"><a href="https://gist.github.com/sumitkharche/bc99883bd85ad4f1acd724b5faa42cdb" class="embedly-card"></a></div><p>&nbsp;Here is the TodoItem.svelte component:</p><div class="fr-embedly          " data-original-embed="<a href='https://gist.github.com/sumitkharche/1480dea346d46037ae2795270dcd4254' class='embedly-card'></a>"><a href="https://gist.github.com/sumitkharche/1480dea346d46037ae2795270dcd4254" class="embedly-card"></a></div><p>&nbsp;So now run the below command to see the amazing Todo list application.</p><pre>$ npm run dev</pre><h3><span style="font-size: 14px;">Open <a href="http://localhost:5000/" rel="nofollow"></a><a href="http://localhost:5000">http://localhost:5000</a>.</span></h3><p><br></p><p>To build application in production mode you just need to run</p><pre>$ npm run build</pre><p>To test the production build before publishing, run below command</p><pre>$ npm run start</pre><h3><br></h3><h3>Deploy it</h3><p>We can now deploy our application on any hosting platform. I recommend deploying it on <a href="https://www.netlify.com/" rel="noopener noreferrer" target="_blank">Netlify</a> because it supports project structures like this and can quickly create deployments. You can deploy application on <a href="https://zeit.co/now">Now</a> or <a href="https://surge.sh/">Surge</a> also.&nbsp;</p><p><br></p><h3>Conclusion</h3><p>In this article I have demonstrated you how to create a Todo application using Svelte and <a href="https://cosmicjs.com/" rel="noopener noreferrer" target="_blank">Cosmic</a>. The Cosmic Community has a lot of examples on how to handle integration with email functions, download functions, and third party platforms.</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/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 the conversation on Slack</a>.</p>

Build A Simple ToDo App using Svelte and Cosmic

<p>In this tutorial, I&#39;m going to show you how to create a simple but blazing fast blog using <a href="https://reactjs.org" rel="noopener noreferrer" target="_blank">React</a>, &nbsp;<a href="https://react-static.js.org" rel="noopener noreferrer" target="_blank">React Static</a>, and <a href="https://cosmicjs.com/" rel="noopener noreferrer" target="_blank">Cosmic</a>. Grab some coffee &amp; let&#39;s build a cool app!</p><h3>TL;DR</h3><p><a href="https://cosmicjs.com/apps/react-static-blog" rel="noopener noreferrer" target="_blank">Demo</a><a href="https://github.com/sumitkharche/react-static-cosmicjs-blog" rel="noopener noreferrer" target="_blank"></a><br><a href="https://github.com/cosmicjs/react-static-blog" rel="noopener noreferrer" target="_blank">Download Source Code</a></p><p><br></p><h3>Prerequisites</h3><p>You need to have installed the latest stable version of <a href="https://nodejs.org" rel="noopener noreferrer" target="_blank">Node JS</a> and NPM. Let&#39;s get started with our technology stack.&nbsp;</p><p><br></p><h3>What is React Static?</h3><p>React Static is a very fast and powerful progressive static site generator implemented based on React and its ecosystem. It&#39;s extremely lightweight, very fast, SEO-ready, and is the most React-friendly static-site library on the planet.</p><p><br></p><h3>What about Cosmic?</h3><p>Cosmic is a headless CMS which is used to build apps faster, together. It is very easy to store and retrieve data and is perfect for building apps like this.</p><p><br></p><h3>Create React Static app</h3><p>It is very easy to create React Static app. Just follow these steps:</p><p><strong>Install the CLI tool:</strong></p><pre>$ npm i -g react-static
# or
$ yarn global add react-static</pre><p>Create a new project!</p><pre>react-static create</pre><p><br>It will ask for name of project then give it as <strong>coffee-blog</strong>. After that it will ask for selecting template so you have to select <strong>basic</strong>.<br><br></p><p><img src="https://cdn.cosmicjs.com/3be25760-9847-11e9-8811-77f6df9c4f7a-ffdf0990-9830-11e9-ba89-5d57bf003870-smartmockupsjx7nxm5i.jpg" style="width: 100%;" class="fr-fic fr-dib"></p><p><br></p><h3>Create new bucket in Cosmic</h3><p>To create a blog app we will require data. For this we will be using the power of Cosmic. Create a free account on &nbsp;<a href="https://cosmicjs.com/" rel="noopener noreferrer" target="_blank">Cosmic</a> and create new empty bucket &amp; name it as coffee-blog. For every blog it will have three object types:</p><ul><li>Title</li><li>Content</li><li>Image</li></ul><p>So add this property in bucket along with some data. &nbsp;<a href="https://cosmicjs.com/getting-started" rel="noopener noreferrer" target="_blank">Follow this steps to create bucket in Cosmic.</a></p><p><br></p><h3>Integrate Cosmic into React Static App</h3><p>Create new file in coffee-blog project called <strong>config.js</strong> which will store the Cosmic Bucket, read_key &amp; write_key.</p><div class="fr-embedly                       " data-original-embed="<a href='https://gist.github.com/sumitkharche/50afb7dbaec434f51e10018267868df1' class='embedly-card'></a>"><a href="https://gist.github.com/sumitkharche/50afb7dbaec434f51e10018267868df1" class="embedly-card"></a></div><p>Now we have to fetch data from Cosmic bucket, we are using <strong>graphql</strong> to do this. By default react static app will call jsonplaceholder api. So remove this code and replace below code into <strong>static.config.js</strong>.</p><div class="fr-embedly                       " data-original-embed="<a href='https://gist.github.com/sumitkharche/a7caf712e4cb0b0fd2a3a8e1eaf70b05' class='embedly-card'></a>"><a href="https://gist.github.com/sumitkharche/a7caf712e4cb0b0fd2a3a8e1eaf70b05" class="embedly-card"></a></div><p>We are not going to learn CSS in this tutorial so add below code inside the <strong>src/app.css</strong> file.</p><p><br></p><div class="fr-embedly                      " data-original-embed="<a href='https://gist.github.com/sumitkharche/6402caefb80f7e2a01479720deb4f52c' class='embedly-card'></a>"><a href="https://gist.github.com/sumitkharche/6402caefb80f7e2a01479720deb4f52c" class="embedly-card"></a></div><p>Inside the <strong>src/App.js</strong> file add below jsx code into the return function which will show the navigation bar.</p><div class="fr-embedly                     " data-original-embed="<a href='https://gist.github.com/sumitkharche/fda0f044a18d968b13995557c5428690' class='embedly-card'></a>"><a href="https://gist.github.com/sumitkharche/fda0f044a18d968b13995557c5428690" class="embedly-card"></a></div><p>For creating landing page where we are showing list of blog posts, change the <strong>src/pages/index.js</strong> with the below code. Here we are getting posts data that we have fetch using <strong>withRouteData</strong> HOC.</p><div class="fr-embedly                   " data-original-embed="<a href='https://gist.github.com/sumitkharche/6da1c6d08fb9d921f3dadf01db302ef3' class='embedly-card'></a>"><a href="https://gist.github.com/sumitkharche/6da1c6d08fb9d921f3dadf01db302ef3" class="embedly-card"></a></div><p>Create new file under src/pages called <strong>post.js</strong> which will have individual post. So when we click on any post from homepage then this component will render to show post details. Add below code in it.</p><div class="fr-embedly                 " data-original-embed="<a href='https://gist.github.com/sumitkharche/063f8835bd76505682914e23bfa2fe20' class='embedly-card'></a>"><a href="https://gist.github.com/sumitkharche/063f8835bd76505682914e23bfa2fe20" class="embedly-card"></a></div><p><br></p><p>Now we have created homepage and a post component &amp; also fetch data from Cosmic using Graphql query. &nbsp;So now run the below command to see the amazing coffee-blog.</p><pre>$ npm run start</pre><p>Open http://localhost:3000 to see your blog.</p><p>To build application in production mode you just need to run</p><pre>$ npm run build</pre><p>To test the production build before publishing, run below command</p><pre>$ npm run serve</pre><p><br></p><h3>Deploy it</h3><p>We can now deploy our application on any hosting platform. I recommend deploying it on <a href="https://www.netlify.com/" rel="noopener noreferrer" target="_blank">Netlify</a> because it supports project structures like this and can quickly create deployments.</p><p><br></p><h3>Conclusion</h3><p>In this article I have demonstrated you how to create a blogging application using React Static and Cosmic. The Cosmic Community has a lot of examples on how to handle integration with email functions, download functions, and third party platforms.</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/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 the conversation on Slack</a>.</p><p><br></p>

Start building today