<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

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

How to Build a Blog using React Static 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://dotnet.microsoft.com/apps/aspnet/web-apps/blazor" rel="noopener noreferrer" target="_blank">Blazor WebAssembly</a>, &nbsp;<a href="https://tailwindcss.com/" rel="noopener noreferrer" target="_blank">Tailwind CSS</a>, and <a href="https://cosmicjs.com/" rel="noopener noreferrer" target="_blank">Cosmic</a>. Without further ado, grab some coffee &amp; let&#39;s build a cool app!</p><h3><br>TL;DR</h3><p><a href="https://www.cosmicjs.com/apps/blazor-cosmic-blog" rel="noopener noreferrer" target="_blank">Demo</a><br><a href="https://github.com/cosmicjs/blazor-blog" rel="noopener noreferrer" target="_blank">Download Source Code</a></p><h3><br>Prerequisites</h3><ul><li>Installed the latest &nbsp;<a href="https://dotnet.microsoft.com/download" rel="nofollow">.NET Core SDK</a>.&nbsp;</li><li>Install the Blazor project templates</li><li>Cosmic account</li><li>Basic knowledge of Blazor</li></ul><p>Let&#39;s get started with our technology stack.&nbsp;</p><h3><br>What is Blazor?</h3><p>Blazor is a .NET framework developed and maintained by Microsoft. It&#39;s been picking up steam over the last couple of years, and recently attracted quite a bit of attention in Spring of 2020 with the launch of Blazor WebAssembly - which is what we&#39;ll be using today. If you want to build an interactive web application using C# then you should definitely check Blazor.<br><br>According to Blazor&#39;s <a href="https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor" rel="noopener noreferrer" target="_blank">docs</a>:</p><p><em>Blazor is a free and open-source web framework that enables developers to create web apps using C# and &nbsp; HTML. It is being developed by Microsoft. Blazor lets you build interactive web UIs using C# instead of JavaScript. Blazor apps are composed of reusable web UI components implemented using C#, HTML, and CSS. Both client and server code is written in C#, allowing you to share code and libraries. Blazor can run your client-side C# code directly in the browser, using WebAssembly. Because it&#39;s real .NET running on WebAssembly, you can re-use code and libraries from server-side parts of your application.</em></p><p>There are two ways to create Blazor apps:</p><ul><li>Blazor Server</li><li>Blazor <em>WebAssembly</em></li></ul><p>So in this article, we are going to use Blazor <em>WebAssembly -&nbsp;</em>which is one way to host Blazor components client-side in the browser using a WebAssembly-based .NET runtime.</p><h3><br>What about Cosmic?</h3><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><h3><br>Creating Your Blog Bucket in Cosmic</h3><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><p>1. &nbsp;Create a<a href="https://app.cosmicjs.com/signup">&nbsp;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><p>2. Create a new empty bucket &amp; name it blazor-blog. For each blog post, we will have three object types:</p><ul><li>Title</li><li>Content</li><li>Image</li></ul><p>So, go ahead and add these properties in your buckets along with some data for those objects. If you&#39;re <a href="https://cosmicjs.com/getting-started" rel="noopener noreferrer" target="_blank">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><h3><br>Creating Your Blazor WebAssembly app</h3><p>You can now create and run your first Blazor WebAssembly app by running:</p><pre><code>dotnet new blazorwasm -o BlazorCosmicBlog --pwa
cd <code>BlazorCosmicBlog</code>
dotnet run</code></pre><p>Now open the <a href="https://localhost:44346/" rel="nofollow"></a><a href="https://localhost:44346/">https://localhost:44346/</a>&nbsp; to see the default blazor app.</p><p><img src="https://cdn.cosmicjs.com/16a37dd0-fa5c-11ea-ac76-ed0a0ac0571c-blazor-default.PNG" style="width: 736px;" class="fr-fic fr-dib" alt="Blazor sets up your default web app with a plain Hello World page. Let's customize it"></p><p><br></p><p>To fetch blog posts saved in Cosmic we require a Cosmic bucket Slug. Go to Cosmic -&gt; Bucket -&gt; Settings -&gt; Basic Settings and copy the <strong>Bucket Slug.</strong></p><p><strong><img src="https://cdn.cosmicjs.com/476e8050-fa60-11ea-ac76-ed0a0ac0571c-bucket-slug.PNG" style="width: 736px;" class="fr-fic fr-dib" alt="In the Cosmic backend, we grab a bucket slug to use with our blog application for fetching posts"></strong><br></p><p>To store the slug, create a new file <strong>appsettings.josn</strong> in the <strong>wwwroot&nbsp;</strong>folder and add the below code:</p><div class="fr-embedly                        " data-original-embed="<a href='https://gist.github.com/sumitkharche/20d690f99db80fbbcfa9113cedbf0920' class='embedly-card'></a>"><a href="https://gist.github.com/sumitkharche/20d690f99db80fbbcfa9113cedbf0920" class="embedly-card"></a></div><p>Now open the program.cs file and add the below code to load the appsettings.json file.</p><div class="fr-embedly                        " data-original-embed="<a href='https://gist.github.com/sumitkharche/eae8269167f38930ad174d322fece6b7' class='embedly-card'></a>"><a href="https://gist.github.com/sumitkharche/eae8269167f38930ad174d322fece6b7" class="embedly-card"></a></div><p>We are using Tailwind CSS to style our application, so let&#39;s add CDN into the index.html file.</p><pre>&lt;link https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css&quot; rel=&quot;stylesheet&quot;&gt;</pre><p><br></p><h3>Building Our Blog Pages</h3><p>First, we are building the main category page where we can show all the blog posts. Create a folder called Models and add class to store posts.</p><div class="fr-embedly                      " data-original-embed="<a href='https://gist.github.com/sumitkharche/0bc83a90589f4acabd36d00d83d9cfe3' class='embedly-card'></a>"><a href="https://gist.github.com/sumitkharche/0bc83a90589f4acabd36d00d83d9cfe3" class="embedly-card"></a></div><p>Go to <strong>Pages&nbsp;</strong>folder and open <strong>Index.razor</strong> component and add the below code to show list of posts fetching from Cosmic.</p><div class="fr-embedly                      " data-original-embed="<a href='https://gist.github.com/sumitkharche/beea9389a8496a9dde2ff6ada3658102' class='embedly-card'></a>"><a href="https://gist.github.com/sumitkharche/beea9389a8496a9dde2ff6ada3658102" class="embedly-card"></a></div><p>Let&#39;s run the app to see the output.</p><p><img src="https://cdn.cosmicjs.com/8eaabce0-fa60-11ea-ac76-ed0a0ac0571c-all-posts---Copy.PNG" style="width: 711px;" class="fr-fic fr-dib" alt="Running our blazor blog application for the first time, WebAssembly bulids really clean apps, eh?"></p><p>Looking good! Create a new component into the Pages folder called <strong>PostDetails.razor&nbsp;</strong>which shows the details of posts when we click on <strong>Read More&nbsp;</strong>button from all post pages.</p><p><br></p><div class="fr-embedly                    " data-original-embed="<a href='https://gist.github.com/sumitkharche/43f962509b4db8a9c319a61ff40d91ee' class='embedly-card'></a>"><a href="https://gist.github.com/sumitkharche/43f962509b4db8a9c319a61ff40d91ee" class="embedly-card"></a></div><p>Now run the app and click on <strong>Read More&nbsp;</strong>button from the Home page to see post details.<br><br><img src="https://cdn.cosmicjs.com/7a897830-fa62-11ea-ac76-ed0a0ac0571c-single-post-new---Copy.PNG" style="width: 660px;" class="fr-fic fr-dib" alt="After our final edits, our blog posts now display more detail when we click &quot;read more.&quot; We now have a fully-functioning blog!"></p><p><br></p><p>That&#39;s it! All our core features are working. We have successfully created a blog application using Blazor and Cosmic. Now it&#39;s just up to your content team members to add some blog posts to it.</p><h3><br>Deploying Your Blazor Blog to Hosting Platforms</h3><p>We can now deploy our application on any hosting platform. We are deploying our app on <a href="https://www.netlify.com/" rel="noopener noreferrer" target="_blank">Netlify</a> using Github Actions.&nbsp;</p><ol><li>Commit your code to the GitHub repository.</li><li>Login to Netlify and create a new site.&nbsp;</li><li>We need a Personal Access Token and Site Id to deploy our app to netlify. So Go to Profile and generate Personal Access Token.<br><br><img src="https://cdn.cosmicjs.com/e37c4ff0-fa64-11ea-ac76-ed0a0ac0571c-access-token.PNG" style="width: 686px;" class="fr-fic fr-dib" alt="Getting started with Netlify, first we must grab our Personal Access Token"></li><li>&nbsp; &nbsp;Go to your site -&gt; Site details<br><img src="https://cdn.cosmicjs.com/7eaf4cc0-fa65-11ea-ac76-ed0a0ac0571c-site-details.PNG" style="width: 651px;" class="fr-fic fr-dib" alt="We're looking for our API ID in the &quot;Site Details&quot; section of Netlify"></li><li>&nbsp;Go to your repository Settings -&gt; Secrets and above two secrets:<br><br><img src="https://cdn.cosmicjs.com/699aadc0-fa6f-11ea-ac76-ed0a0ac0571c-github-secrets.PNG" style="width: 647px;" class="fr-fic fr-dib fr-rounded" alt="Finally, we'll grab our secrets to deploy our .NET application with actions. Our blog will be deployed in short order!"></li><li>Click on <strong>Actions -&gt; New Workflow&nbsp;</strong>and select <strong>.NET Core&nbsp;</strong>template. After that add the below code to yml file.</li><li><div class="fr-embedly                 " data-original-embed="<a href='https://gist.github.com/sumitkharche/514f44933419cbf4f1207530ba95a05d' class='embedly-card'></a>"><a href="https://gist.github.com/sumitkharche/514f44933419cbf4f1207530ba95a05d" class="embedly-card"></a></div></li><li>Our blog app is successfully deployed to Netlify.<br><br><img src="https://cdn.cosmicjs.com/a5ad8690-fa72-11ea-ac76-ed0a0ac0571c-ezgif.com-gif-maker.gif" style="width: 696px;" class="fr-fic fr-dib" alt="Now that's a good looking blog app! Thanks for reading my Blazor tutorial"><br></li></ol><h3><br>Conclusion</h3><p>In this article, I have demonstrated you how to create a blogging application using Blazor 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" rel="noopener noreferrer" target="_blank">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" 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>

Blogs by Sumit Kharche

Start building today