<a href="https://gridsome.org/" rel="noopener noreferrer" target="_blank">Gridsome</a> is a static site generator based on Vue.js. It&#39;s inspired by Gatsby but powered by Vue.js instead of React. Today, we&#39;ll develop a simple yet powerful blog using Gridsome.We will integrate the <a href="https://cosmicjs.com">Cosmic</a> headless CMS as a GraphQL datasource for Gridsome and then build a blazing fast blog to demonstrate the power of those systems.<h2>TL;DR</h2><a href="https://cosmicjs.com/apps/gridsome-blog" rel="noopener noreferrer" target="_blank">Check out the demo</a> <a href="https://github.com/cosmicjs/gridsome-blog" rel="noopener noreferrer" target="_blank">Download the codebase</a> <a href="https://github.com/cosmicjs/gridsome-source-cosmicjs" rel="noopener noreferrer" target="_blank">Check out the source plugin</a><h3 id="toc_1">Setting up Gridsome</h3>Fortunately, setting up Gridsome is straightforward. You can <a href="https://gridsome.org/docs/" rel="noopener noreferrer" target="_blank">follow the official documentation</a> to set up a fresh Gridsome project.<h3 id="toc_2">Integrating Cosmic into Gridsome</h3>Gridsome is using datasources, which are wrapped by a GraphQL layer, to fetch the data needed to render your website. What this means is, that, if we can&rsquo;t use one of the official datasource plugins, we have to write our own.<h3 id="toc_3">Writing a custom Cosmic source plugin</h3>Writing a custom source plugin for Gridsome is quite easy. Which I&#39;ll explain below.&nbsp;You can look the <a href="https://github.com/cosmicjs/gridsome-source-cosmicjs" rel="noopener noreferrer" target="_blank">complete code &amp; implementation on GitHub</a>.&nbsp;We can use the <code>axios</code> package to query the Cosmic API &amp; <code>lodash</code> to query the results.<pre><code>npm install --save axios lodash</code></pre>Now create two files in your project. <code>index.js</code> and &nbsp;<code>fetch.js</code>.
In &nbsp;<code>fetch.js</code>, we will simply fetch the results from Cosmic CMS.<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/jazibsawar/d50af99119b8a53093cf624c0b7939b2' class='embedly-card'></a>"><a href="https://gist.github.com/jazibsawar/d50af99119b8a53093cf624c0b7939b2" class="embedly-card"></a></div>The code above demonstrates a simple data fetching from Cosmic. It fetches all the Objects in content type and formats it properly. Now, we have to use this function and create datasource for Gridsome.In <code>index.js</code>, we have to use the above fetch code and create Gridsome Datasource Class.<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/jazibsawar/7be75d6921d678e01637ae7b70d6da28' class='embedly-card'></a>"><a href="https://gist.github.com/jazibsawar/7be75d6921d678e01637ae7b70d6da28" class="embedly-card"></a></div>The code above demonstrates a very basic implementation. It fetches objects from all the contentTypes mentioned in the config and makes it available to Gridsome to create our blog.&nbsp;Next we have to update our gridsome.config.js file to let Gridsome know about our new datasource plugin.<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/jazibsawar/c619b1caabcb1d0f0b13a5208cb170f6' class='embedly-card'></a>"><a href="https://gist.github.com/jazibsawar/c619b1caabcb1d0f0b13a5208cb170f6" class="embedly-card"></a></div>Note: This source plugin is available in NPM repository. You can install using <code>npm i --save gridsome-source-cosmicjs</code><h3 id="toc_4">Querying data with GraphQL</h3>Now that we&rsquo;ve successfully set up our new Cosmic data source, we&rsquo;re able to start the Gridsome development server and check out if everything works as expected.<code>npm run develop</code>You can use the integrated GraphQL explorer <a href="http://localhost:8080/___explore" rel="noopener noreferrer" target="_blank">http://localhost:8080/___explore</a> to test your GraphQL queries. You can view your website by opening http://localhost:8080 in the browser.<h3 id="toc_5">Building a landing page &amp; post page</h3>Everything is set up &ndash; let&rsquo;s build some pages to render the data provided by the Cosmic CMS.In Gridsome project, go to <code>src/pages/Index.vue</code> and past the following code:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/jazibsawar/095ada844db1e17088c9f76483898f97' class='embedly-card'></a>"><a href="https://gist.github.com/jazibsawar/095ada844db1e17088c9f76483898f97" class="embedly-card"></a></div>In the block, you can see the GraphQL query which is used to fetch the data we need to render our Index page. We can access the data inside the section via the <code>$page.posts &amp; $page.settings</code>variables.Now go to <code>src/layouts/Default.vue</code> and past the following code:&nbsp;<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/jazibsawar/f5ea7106053752cb6ea6a827952b41e9' class='embedly-card'></a>"><a href="https://gist.github.com/jazibsawar/f5ea7106053752cb6ea6a827952b41e9" class="embedly-card"></a></div>Now go to <code>templates</code> folder and create <code>Cosmicjs{ContentType}.vue</code> files for your object types. In our case, we have only posts. So we will create <code>CosmicjsPosts.vue</code>file.<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/jazibsawar/2ccc8a5ff147cdd59bb85df305344b17' class='embedly-card'></a>"><a href="https://gist.github.com/jazibsawar/2ccc8a5ff147cdd59bb85df305344b17" class="embedly-card"></a></div>If you want to take a closer look at the Bio component, mixins &amp; typography, you can <a href="https://github.com/cosmicjs/gridsome-blog" rel="noopener noreferrer" target="_blank">checkout the code on GitHub</a>.<h3 id="toc_6">Wrapping it up</h3>Although setting up the datasources requires some fiddling around and a lot of trial and error, the final result is pretty impressive. Especially the blazingly fast performance, data management using a Headless CMS like <a href="https://cosmicjs.com">Cosmic</a> and tiny bundle size of the resulting website, making it very tempting to choose Gridsome over single page applications.

Build a Blazing Fast Blog with Cosmic and Gridsome

Cosmic is an amazing content management system with options to categorize and distribute data in a way that makes sense to you. When building an expositional site for educational purposes, you have to display a large amount of text, images, videos and more. In this tutorial we will learn how to utilize the power of the Cosmic CMS to easily display, &nbsp;track, and update large amounts of data.<h3>TL;DR<a href="https://cosmicjs.com/apps/vue-the-cosmos" rel="noopener noreferrer" target="_blank"></a></h3><a href="https://cosmicjs.com/apps/vue-the-cosmos" rel="noopener noreferrer" target="_blank">Scholastic Website Demo&nbsp;</a> <a href="https://cosmicjs.com/apps/vue-the-cosmos" rel="noopener noreferrer" target="_blank"></a><a href="https://github.com/cosmicjs/vue-space-app" rel="noopener noreferrer" target="_blank">View Code on GitHub</a><a href="https://github.com/cosmicjs/vue-space-app" rel="noopener noreferrer" target="_blank"></a> What we&#39;ll be building:<img src="https://cosmic-s3.imgix.net/a7d809e0-2350-11e9-ac6b-c39b0e8426c5-vue-cosmos-1.png" data-name="vue-cosmos-1.png" style="width: 100%;" class="fr-fic fr-dib"> <h3>Intro</h3>As there are many articles on this site to help you get started using Cosmic, this tutorial will assume you have a basic understanding of how Cosmic works. Refer to the <a href="https://cosmicjs.com/getting-started" rel="noopener noreferrer" target="_blank">Getting Started Guide</a>.&nbsp;As Cosmic is an API-first CMS, it is exceptionally easy to get up and running - you just need to make a simple asynchronous call in Vue. Throughout the course of this tutorial, you will be able to see just how easy it is to divvy up data and update
it using the Cosmic CMS. Installing and Setting Up our Project:In this tutorial, we will use Vue&#39;s CLI and NPM to install Cosmic and set up our project quickly and seamlessly. We also can install Vuex to utilize its global store:<pre>$ npm install -g vue-cli
$ vue init webpack cosmic-game
$ cd cosmic-game
$ npm install --save vuex cosmicjs
$ npm install
$ npm run dev</pre>Optionally, we can also add <a href="https://getbootstrap.com/" rel="noopener noreferrer" target="_blank">Bootstrap</a> (and its dependencies of jQuery and popper.js) to our project, to leverage some pre-written CSS to organize our layouts:<pre>$ npm install bootstrap jquery popper.js</pre>If you choose to add Bootstrap to your project, after running npm install&nbsp;you also need to import it in main.js:<pre>import &#39;bootstrap&#39;; import &#39;bootstrap/dist/css/bootstrap.min.css&#39;;</pre> Uploading Asset Data To Cosmic:When creating a site for educational purposes, your site requires large amounts of text, images, videos and other assets to be hosted. As you continue to iterate on your site, it is vital to not only be able to edit those assets easily but to also be
able to access them readily.First, we need to create a Bucket for our project. Once that is done, we can leverage some unique properties that Cosmic offers to compartmentalize our data. Because the site being built in this tutorial is centered around our Solar System, let&#39;s
add a new Object Type called &quot;Cosmic Assets&quot;. The Cosmic Assets Object will be responsible for containing information, images, and other assets about the inhabitants of our Solar System. For example, if I wanted to add some information about
the planet Jupiter - I would go into the &quot;Cosmic Assets&quot; Object type, and create a new Cosmic Asset named &quot;Jupiter&quot;.&nbsp;Now, we have a Cosmic Asset that can host any data we want to tie to the planet Jupiter. We can add images of Jupiter, give expositional data, and even list quick tidbits of information using the Text Input Metafield provided by the CMS.Being able to break up data of our Cosmic Assets into the content field, image Metafield and text input Metafield make it extremely easy to take a glance at the CMS and understand where each piece of data is being rendered in our Vue.js application. Setting Up Our Application:Because our solar system contains so many objects, we should leverage the v-for&nbsp;property that Vue offers us to loop through them. This prevents us from repeating our code for each celestial object, and allows us to utilize
the full power of component based design.We use three components in this project:The first component, referred to in our project as Homescreen.vue,&nbsp;is responsible for rendering everything. It &nbsp; &nbsp;calls and obtains the data we added to the Cosmic CMS, and uses it to render our application.The second component, referred to in our project as CosmicAsset.vue,&nbsp;is a short introduction to the celestial object. It displays a small image, and the name of the celestial object. If this component is clicked, it renders the next component: CosmicPage.vue.CosmicPage.vue renders a full screen component, which gives detailed information about a specific entity. It features a big expositional paragraph, some fun facts, and other information such as size and it&#39;s distance from Earth.&nbsp;Accessing Uploaded Data from Cosmic in our Vue.JS ApplicationWe can utilize the Cosmic API to access the data that we uploaded to the CMS. First, we need to initialize the Bucket that stores our project. We do this by first instantiating Cosmic in our component, and then using a promise to return data from the specific Bucket we want. Then, we can mutate the information and add it as a property on the data object of our Vue Component. We make the call to the Cosmic API on the mounted() property of Vue&#39;s lifecycle, so that the information we need is readily available as soon as the component(s) are mounted:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/Abeyy/2c181b62154e57d81077096ccffebc33' class='embedly-card'></a>"><a href="https://gist.github.com/Abeyy/2c181b62154e57d81077096ccffebc33" class="embedly-card"></a></div><div class="fr-embedly " data-original-embed="<a href='' class='embedly-card'></a>"><a href="" class="embedly-card"></a></div>Rendering Our Components from Accessed Data:As you can see above, we find the Bucket we want, get our uploaded data from it, and mutate it how we want to. We filter the objects on the data and determine whether they are Cosmic Objects or simple content that is to be rendered on the page.We now have our Cosmic Objects stored in an array in the data property cosmicAssetObjs on the Vue Object. Using this array, we can use Vue&#39;s v-for to loop through and render our CosmicAsset component. We can break up each of these components using Boostrap classes, so they appear in a grid:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/Abeyy/b31681cccedb4e5f91a2934b384b1cc9' class='embedly-card'></a>"><a href="https://gist.github.com/Abeyy/b31681cccedb4e5f91a2934b384b1cc9" class="embedly-card"></a></div>As you can see we use the v-for property to loop through our array. For each element that we loop through, we pass that specific element as a prop for use by the component. We can see how props are used by looking at the component(s) itself:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/Abeyy/d5b0f97cb93d80af46f53759ffb27533' class='embedly-card'></a>"><a href="https://gist.github.com/Abeyy/d5b0f97cb93d80af46f53759ffb27533" class="embedly-card"></a></div><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/Abeyy/af86cef49125296b5565118e518dc100' class='embedly-card'></a>"><a href="https://gist.github.com/Abeyy/af86cef49125296b5565118e518dc100" class="embedly-card"></a></div>As you can see, we take the specific celestial entity&#39;s information in the form of an object and filter through it to display what we want it to.<h3>Conclusion</h3>In this tutorial, we uploaded a large amount of data to Cosmic so that we could create an educational application that teaches about the things in our Solar System. By leveraging the Cosmic API, we could easily and seamlessly access that data.Cosmic is a lightweight platform with an extremely powerful CMS to offer.&nbsp;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>.

How to create a scholastic website using Cosmic and Vue.js

In this tutorial, I&#39;m going to show you how to create a minimalistic but awesome single page app blog using Vue, Vuex, Vuetify, Cosmic and deploy it to Netlify. Let&rsquo;s get started.<h3>TL;DR</h3><a href="https://cosmicjs.com/apps/vuetify-blog" rel="noopener noreferrer" target="_blank">Demo Link</a> <a href="https://github.com/cosmicjs/vuetify-blog" rel="noopener noreferrer" target="_blank">View Code on Github</a><a href="https://app.netlify.com/start/deploy?repository=https://github.com/cosmicjs/vuetify-blog" rel="noopener noreferrer" target="_blank"><img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" class="fr-fic fr-dii"></a><h3>Features</h3><ul><li>Netlify hosting (plus CDN, Prerendering, Minification, etc..)</li><li>Moderated commenting system (Un-moderated by default)</li><li>Social share buttons</li><li>SEO Meta tags with Vue-Meta</li><li>Integrated content management system via Cosmic</li></ul><h3>Needed improvements</h3><ul><li>Static page content connected to Cosmic</li><li>Post categories feature</li><li>Gravatar comment integration</li><li>Back/Forward buttons to trigger post view</li></ul><h3>Prerequisites</h3>You will be required to have Node JS and npm before starting. Make sure you already have them installed. If not you can find them here: <a href="https://nodejs.org">https://nodejs.org</a>Also in order to deploy it you can use Netlify account or Cosmic hosting.<h3>Project Structure</h3>Important things to note: ~/public/_redirects This file is important since it points all your traffic to the index.html file in order for vue-router to handle the requests. To learn more about Netlify redirects <a href="https://www.netlify.com/docs/redirects/" rel="noopener noreferrer" target="_blank">visit their docs</a>. You don&#39;t need this file if you&#39;re deploying via Cosmic. ~/public/favicon.ico If you want to customize your favicon you can change this file located within the public directory.<h3>Fork and Clone</h3>First we&#39;ll be forking the repository on GitHub. Afterwards open up command line or terminal and clone it to your project folder on your local machine with this command:<pre>git clone https://github.com/cosmicjs/vuetify-blog</pre>Use BitBucket or Gitlab instead?If you prefer to use a different git provider you can just clone the repository and upload it to your desired remote.<h3>Install</h3>In your command line <code>cd</code> into the project root directory that you just cloned and run <code>npm install</code> to download and install all the required dependencies.<h3>Integrate Cosmic</h3>In your Cosmic account create a new bucket and call it whatever you want.Download this <a href="https://raw.githubusercontent.com/availit/cosmicify/master/bucket.json" rel="noopener noreferrer" target="_blank">bucket.json</a> file. And in Settings -&gt; Import / Export Data, select and upload the downloaded file. This will import all the Object Types and placeholder data.<h3>Bucket Structure</h3><h4>Settings</h4>There are a couple settings Objects to allow you to change how your blog acts. The global Object has most of the overall options such as choosing whether your comments require you to approve and publish them. Your blog&#39;s logo in the navbar, or the
&quot;Read More&quot; button text.. Meanwhile the Social profiles Object is to set the social network icons in the footer.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/63956b30-19c1-11e9-b728-e7b45d8c7a5a-cosmicify-settings.jpg" style="width: 100%;" class="fr-fic fr-dib" alt="Cosmicify settings"><h4>Posts</h4>These Objects will be all your blog posts/articles.<h4>Profiles</h4>These Objects are for the author that will be posting on the blog. You can change your name, bio and profile picture.<h4>Comments</h4>The Comments Objects are exactly that; Comments, typically created via the site&#39;s new comment form. They collect Name, Email, and the Comment.<h3>Deployment with Netlify</h3>Go to your Netlify dashboard and click &quot;<a href="https://app.netlify.com/start" rel="noopener noreferrer" target="_blank">New site from Git</a>&quot;. Choose your git provider (I use GitHub). After you authenticate you can see your list of repositories.
Select the one you created for this project you created earlier.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/d2dab0c0-19a0-11e9-8580-4d6e3f092393-netlify-newsite.jpg" style="width: 100%;" class="fr-fic fr-dib" alt="Create new site from git">Next it will make you choose a branch, then set some config options for it to run properly.Set the deploy directory to <code>dist</code> and set the deploy command to <code>npm start</code><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/3cad0880-19a2-11e9-ba91-2dc206c34b19-netlify-site-settings.jpg" style="width: 450px;" class="fr-fic fr-dib" alt="Netlify New Site Configuration">Next you&#39;ll click &#39;Show advanced&#39; in order to set some environment variables.Using the list below enter the key and values for your app. You need to enter your Bucket slug in the COSMIC_BUCKET variable. The variables with META in the name are used for the SEO tags on the site. The VUE_APP_DOMAIN is required for the article share
links to work properly. For the commenting system to work you need your COSMIC_READ_KEY and COSMIC_WRITE_KEY.Required environment variables for the project:<pre>VUE_APP_TITLE
COSMIC_BUCKET
COSMIC_READ_KEY
COSMIC_WRITE_KEY
VUE_APP_DOMAIN
VUE_APP_META_TITLE
VUE_APP_META_LOGO
VUE_APP_META_DESC</pre><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/6c036930-19a2-11e9-bcf0-ab5ce7192564-netlify-env.jpg" style="width: 450px;" class="fr-fic fr-dib" alt="Netlify Environment Variables">Once everything looks correct you can click &quot;Deploy site&quot; and it will install and build the app in a couple minutes then publish it live on the internet!<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/5a1f8e30-19a0-11e9-ba91-2dc206c34b19-netlify-building.jpg" style="width: 100%;" class="fr-fic fr-dib" alt="Netlify build log"><h3>Netlify Post Processing</h3>Netlify offers post processing that runs after your site builds. This is optional but I highly recommend enabling post processing because it enhances your site&#39;s performance and prerendering in order for Googlebot to crawl your blog content.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/78bf2ff0-19a3-11e9-998c-93738aabc140-netlify-asset-optimization.jpg" style="width: 500px;" class="fr-fic fr-dib" alt="Netlify post processing"><h3>Conclusion</h3>I built this app for fun and decided to share it with everyone. It is open source under MIT license so feel free to hack it, modify it, or break it for all I care. Build using Vue, Vuex, and Cosmic. Oh, and don&#39;t forget Vuetify, the amazing material
component library by John Leider and over 200+ open source contributors.If you have trouble or it&#39;s not working for you let me know in the comments and I&#39;ll do my best to help! Or reach out via twitter <a href="https://www.twitter.com/aaron_vail" rel="noopener noreferrer" target="_blank">@Aaron_Vail</a>

How to deploy a blog using Cosmic + Vuetify to Netlify

In this tutorial I will show you how to build a progressive web app using React.js and <a href="https://cosmicjs.com/">Cosmic</a>. Our PWA will respond with status 200 when you are offline. The app will attain the last state of data and display it to you when you are offline. We will start with the basics and complete the app in full details. After completion we will deploy it to the Cosmic App Server, so let&#39;s get started. <h3>TL;DR</h3><a href="https://cosmicjs.com/apps/react-pwa-with-authentication" rel="noopener noreferrer" target="_blank">Checkout the demo</a> Admin Credentials: email: admin@abc.com password: admin<a href="https://github.com/cosmicjs/react-pwa" rel="noopener noreferrer" target="_blank">Download the codebase</a> What are We Building?As the title explained we are building a progressive web app (PWA) which will display news published by an admin. Let&#39;s start by explaining what a PWA is in simple words:A PWA is a ordinary website that has some extra and unique features which make it extraordinary. Here are those features:<ul><li>You can use these apps while you are offline, that means these apps give a response code 200 while internet is disconnected</li><li>Second most important feature is that you can install it on your device ( either desktop or mobile )</li><li>These apps are fully responsive in nature</li></ul>We will be implementing this app using React.js with the power of Cosmic. Let&#39;s start. Requirements<a href="https://nodejs.org/en/">Node.js</a> must be installed on your system to to run npm commands, with the help of which we will install react app. For more information, you can refer to <a href="https://reactjs.org/docs/getting-started.html">React Docs</a>. Getting StartedNow that our system is configured with the required modules and tools, we are going to create a progressive web app project in React.js using Cosmic. Go to your any specific folder where you want to place your project and open console (terminal) and type the
following command:<code>npx create-react-app react-pwa</code>here react-pwa is the name of your app and then goto created folder react-pwa and run command:<code>npm start</code>It will compile your basic React.js app and automatically opens in default browser. By default it runs on the port number 3000: <a href="http://localhost:3000/">http://localhost:3000/</a> Configure React App with CosmicTill now, we have just implemented the front-end part of the PWA, now it is time to configure the server i.e. Cosmic server and database. It gives two in one facility.&nbsp;First of all, <a href="https://cosmicjs.com/signup">signup on Cosmic</a>&nbsp; for free and create your first Bucket. Now create an Object-Type, which in our case is Admin. Similarly create two more object types named 1) News and 2) Comments. These three
object types have different purposes: Admin will save the credentials of admin, News will save the news published by admin and Comments will save the comments posted by users.&nbsp; <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/e4b5bb60-2264-11e9-9c47-091292362f7f-basic-setting.png" class="fr-fic fr-dib"> Now go to <code>Settings &gt; Basic Settings</code> and generate read_key as well as write_key, and save all information of this page in a separate file on your system. Now place all of this information in the folder of your project and path will be: <code>src&gt;config&gt;config.js</code> <div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kitkumar/015276ef3bfc8945670841dc8c1c38c7.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kitkumar/015276ef3bfc8945670841dc8c1c38c7.js" class="embedly-card"></a></div>To manage your project properly, you should create different folders for components, services, config files, css and images. It will help any third person to understand your code properly. All of these folders should reside in src folder. So create them
first and jump to next step. Ready Made BucketFor this project you can directly import a bucket to your dashboard, in that bucket we have already created object-types. You have to download bucket.json from our <a href="https://github.com/a9kitkumar/cosmicjs-pwa" rel="noopener noreferrer" target="_blank">git repo</a> and then just follow the steps: Choose default bucket &gt; Go to Settings &gt; go to Import / Export and click the button &quot;Add import file&quot;. It will import the bucket.json file.&nbsp; <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/6aef9c00-2265-11e9-8a29-e5a70456d705-bucket-import.png" class="fr-fic fr-dib"> Here we have created the platform to implement our PWA, so let&#39;s move to the next one. Admin Login<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/b8f3fdb0-2265-11e9-8223-85059151b988-admin-login.png" class="fr-fic fr-dib"> In our bucket, there is an object-type &quot;Admin&quot;. Create an object with title admin, and metafields email &amp; password. You can give the values of email and passwords according to you. Here we gave email: <a href="mailto:admin@abc.com">admin@abc.com</a> and password: admin. Later you can use them for admin login in our demo.&nbsp;Create a login page for admin in <code>src&gt;components&gt;login.js</code><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kitkumar/389d1ae6c54df7b633901119b16a7f45.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kitkumar/389d1ae6c54df7b633901119b16a7f45.js" class="embedly-card"></a></div>On this page we are simply logging the admin in. We have statically created the email and password in the object-type &quot;admin&quot; and with those credentials we are logging him in. Here we imported the authentication service and in the onSubmit()
function we are calling the login() function which is declared in the authentication service. In componentDidMount() we simply applied navigation when admin already logged in. Dashboard ComponentIn this component we simply displayed the three links: Home, Add News and Logout. From here admin can navigate to main page, of can add a news or can logged himself out.&nbsp;On loading we applied navigation which will take the admin to home page if he is logged out and still trying to access this page. On logout() function we cleared the local storage and on the link Add News we navigated the admin to addnews.js. Location of this file is: <code>src&gt;components&gt;dashboard.js</code><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kitkumar/f505a397efaef92b6dab51e4e07f82dd.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kitkumar/f505a397efaef92b6dab51e4e07f82dd.js" class="embedly-card"></a></div>Add NewsThis component is accessible only for admin. He can post news over here. He can add title, description and body of the news. It will save the complete thread to object-type &#39;news&#39; on the Cosmic server. Location of this component is: <code>src&gt;components&gt;addnews.js</code><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kitkumar/e576914d1663b013568dc80e4122214a.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kitkumar/e576914d1663b013568dc80e4122214a.js" class="embedly-card"></a></div>Home PageOn home page we are displaying all news which are published by the admin. First of all check its coding:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kitkumar/678fb3b790a10e1b1b4781f7023b2fa4.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kitkumar/678fb3b790a10e1b1b4781f7023b2fa4.js" class="embedly-card"></a></div>This is the news.js and it is fetching as well as displaying the news on the home page of our app. We are explaining the working of getNews() method. If your device is online, then it is fetching data from backend and displaying on the template and also
saving it on browser for offline use too. If the device is offline, then it will get the saved data from browser memory and will show to the user.&nbsp;<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/294b4c80-2266-11e9-a6c1-df07cd8ae9cb-home-page.png" class="fr-fic fr-dib"> Here you are seeing the title and description of the news and click to &quot;Complete News&quot; to read full story. This link will take you to next component: Single News ComponentThis component is fetching the single news which you clicked from the home page. Check its coding first:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kitkumar/992c502534877b9e21abccdf5020d562.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kitkumar/992c502534877b9e21abccdf5020d562.js" class="embedly-card"></a></div>It is displaying the single news as well as there is an option of comment also. Comments related to the post are displayed here and you can add comments also. singleNews() method is fetching the news at one time and we applied a filter to get the selected
news. allComments() function is getting all comments and filtering the comments related to this single post only. <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/afc59180-2266-11e9-8223-85059151b988-single-post.png" class="fr-fic fr-dib"> ServicesThere are two services named authentication service and news service. Let us explain them one by one:Authentication Service:&nbsp;This is only for logging the admin in. There is one method defined which is searching the email and password supplied the the login page and returns the result to calling method.&nbsp;<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kit/86d155522dc1a3faffeff058ae0e3dbf.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kit/86d155522dc1a3faffeff058ae0e3dbf.js" class="embedly-card"></a></div>News Service:&nbsp;This is the main service of this project which is handling almost everything here. Go through its coding first:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kit/c039fad9044e6367155d398b6a55b10a.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kit/c039fad9044e6367155d398b6a55b10a.js" class="embedly-card"></a></div>Let&#39;s explain its methods one by one:<ul><li>addNews(): It takes four parameters: title, description, newsbody and date and saves on the object type news</li><li>getNews(): As the name specifies, it fetch all news from the object-type news</li><li>submitComment(): This method submits the comment in the object type &quot;comment&quot;</li><li>allComments(): This get the submitted comments in object-type &quot;comments&quot; on the Cosmic server</li></ul> Data ModellingWe managed data on Cosmic properly, for this we created some object-types to understand the nature of each datum. Here is three object types : admin, news and comment. Admin stores the information of admin, and news stores the news published by admin.
Comment object-type is storing the comments published by readers of our news app. <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/2a6e2c30-2267-11e9-8a29-e5a70456d705-object-types.png" class="fr-fic fr-dib"> What Have We Built Till Now?I want to make clear that our app is an ordinary app until now (in development mode); it doesn&#39;t have any PWA features, so let&#39;s start making it progressive in nature. When we created this app, it already created a file serviceWorker.js in the src
folder, which handles the progressive nature of the app. At the time of online use, it automatically stores the static data of the app and reflects when the app is offline.&nbsp;Our app is not behaving a PWA because in serviceWorker it is coded to become a PWA only in production mode. So make its build and then run build, you will get some messages in the console like this: <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/d3610ec0-2267-11e9-a6c1-df07cd8ae9cb-console-msgs.png" class="fr-fic fr-dib"> This is the static data capturing of the app. If you want to capture the dynamic data, you need to code it manually. We did this in the news.js file. We stored the app data when the app is online and it automatically called when app will be offline. So
to enjoy its PWA feature, run the following commands:<code>npm run build</code><code>serve -s build</code>Our app is partial-progressive in nature now. It is storing data while offline but it can&#39;t be installed on the device yet. We&#39;ll make that happen in the next step. Make App Complete PWATo make it complete PWA, here is the final step. We need to edit manifest.json, which is present in the public folder. It should look like:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kit/b93b251a953a819cd889a5cfb2f3fe3e.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kit/b93b251a953a819cd889a5cfb2f3fe3e.js" class="embedly-card"></a></div> Here we added path of two icons, one for desktop and the other for mobile. Their size should be exactly the same and these two icons should be present in the public folder. Start_url is showing the path of build. This is the main basic coding of manifest and now
our app is pure progressive in nature. <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/6cf41730-2268-11e9-a6c1-df07cd8ae9cb-install-option.png" class="fr-fic fr-dib">In ths above screenshot you can clearly check that Chrome browser is giving the option to install this React app on your system.&nbsp;Now we are checking out app with lighthouse tool, which is provided by Google to check PWAs, check output of lighthouse below: <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/5679bcc0-2269-11e9-a6c1-df07cd8ae9cb-lighthouse-report.png" class="fr-fic fr-dib"> In report each milestone achieved by our app except 7th, which is an https related and will be fixed as we deployed it to our Cosmic server which supports HTTPs. Deploy on Cosmic ServerNow our app is ready and needs some improvement before deployment on Cosmic server. Make sure the followings:<ol><li>A public GitHub repo ( private also available if you have connected your Git account )</li><li><a href="https://devcenter.heroku.com/" rel="noopener noreferrer" target="_blank">Heroku requirements</a> should be matched</li></ol>You need to follow some steps:<ul><li>Install express with command: <code>npm install --save express</code></li><li>Modify your package.json file, and add the following code</li></ul><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kit/3f35438dd1946fe2b2edcc86388cf8b2.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kit/3f35438dd1946fe2b2edcc86388cf8b2.js" class="embedly-card"></a></div><ul><li>Now create a file app.js in the root folder and add the following code in it</li></ul><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kit/de4722ab0b8d503ec6662d0cedc45940.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kit/de4722ab0b8d503ec6662d0cedc45940.js" class="embedly-card"></a></div>&nbsp;Finally you made all necessary changes and it is now ready to deploy. Now go to: <code>bucket&gt;setting&gt;deployment</code> and click button deploy to Cosmic. After successful deployment you will receive an email and click on &quot;view app&quot; button to view the app.&nbsp;<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/f4e9e330-2269-11e9-8a29-e5a70456d705-deployment.png" class="fr-fic fr-dib"> VerdictIt is clear that with the help of Cosmic we can create powerful apps and can deploy on their server without any server setting or configuration. Here we created and deployed our React.js progressive application on Cosmic server easily without any difficulty. You don&#39;t need to install any extra software to deploy over here.&nbsp;For any query or comment related to building apps in 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>.

How to Build a PWA in React.js and Cosmic

In this tutorial, we are going to create an application that filters Twitter tweets by selecting a specific location on the map. We are going to use <a href="https://reactjs.org/" rel="noopener noreferrer" target="_blank">React</a> and <a href="https://cosmicjs.com/" rel="noopener noreferrer" target="_blank">Cosmic</a>. We will be using <a href="https://www.npmjs.com/package/cosmicjs" rel="noopener noreferrer" target="_blank">Cosmic npm package</a> for saving and sorting the most popular searches in our application. Let&#39;s get started.<h1 id="tldr">TL;DR</h1><a href="https://cosmicjs.com/apps/search-tweets-by-location-app" rel="noopener noreferrer" target="_blank">View the Demo</a><a href="https://github.com/cosmicjs/react-search-tweets-by-location" rel="noopener noreferrer" target="_blank">Download the GitHub repo</a><h1 id="prerequisites">Prerequisites</h1>You will be required to install <a href="https://nodejs.org/en/" rel="noopener noreferrer" target="_blank">Node JS</a> and <a href="https://www.npmjs.com/" rel="noopener noreferrer" target="_blank">NPM</a> before starting. Make sure you already have them.<h1 id="gettingstarted">Getting Started</h1><h4 id="doingeverythingusingtheexistinggitrepo">Doing everything using the existing git repo</h4>First of all, you have to be sure you have node &gt; 8.x: As our application uses external APIs, such as <a href="https://cosmicjs.com/" rel="noopener noreferrer" target="_blank">Cosmic</a>, <a href="https://developers.google.com/gmail/api/">Gmail API</a> and <a href="https://developer.twitter.com/en/docs.html" rel="noopener noreferrer" target="_blank">Twitter API</a> we have to set the environment variables for these APIs. Note you will have to create API keys in the services mentioned above to put the &quot;KEYS&quot; in the <code>.env</code> file. Here is how your <code>.env</code> file has to look like.<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/haykadamyan/3835df61c65dec024a7115a29720107a.js' class='embedly-card'></a>"><a href="https://gist.github.com/haykadamyan/3835df61c65dec024a7115a29720107a.js" class="embedly-card"></a></div>After setting up the <code>.env</code>file we have to run the following commands.&nbsp;<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/haykadamyan/2c2b001d9c444399d0648fec0a95f83e.js' class='embedly-card'></a>"><a href="https://gist.github.com/haykadamyan/2c2b001d9c444399d0648fec0a95f83e.js" class="embedly-card"></a></div>After the successful completion of the last command browser window will automatically open, and the <code>package.json</code> will look like this.&nbsp;<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/haykadamyan/d79200227dde499453519f8c835bea50.js' class='embedly-card'></a>"><a href="https://gist.github.com/haykadamyan/d79200227dde499453519f8c835bea50.js" class="embedly-card"></a></div>Now the app has to be running on <code>http://localhost:3000</code><h1><a id="Source_code_28"></a>Source code</h1><h5><a id="Serverjs_30"></a>Server.js</h5>Now it&rsquo;s time to understand how the magic works. Let&rsquo;s take a look at <code>server.js</code><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/haykadamyan/c7e5516fad13800a500fcd1b2a96ee32.js' class='embedly-card'></a>"><a href="https://gist.github.com/haykadamyan/c7e5516fad13800a500fcd1b2a96ee32.js" class="embedly-card"></a></div>Nothing special in this code, unless we take a look at the line 14. Here we setup the endpoint for the Twitter API requests, and prepare the standart request body. More about this at <a href="https://developer.twitter.com/en/docs.html">Twitter API Documentation</a><h5><a id="Pagesindexjs_40"></a>Pages/index.js</h5><code>pages/index.js</code> is our home page file, where we have our UI, and the requests to the API&rsquo;s we use.<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/haykadamyan/16682a290b202fe2188aaa96e46ff636.js' class='embedly-card'></a>"><a href="https://gist.github.com/haykadamyan/16682a290b202fe2188aaa96e46ff636.js" class="embedly-card"></a></div><h6><a id="Important_functions_47"></a>Important functions</h6><ul><li>onChangeLocation - calls search function when we select a location on the map</li><li>search - Sends request to the Twitter API and receives the tweets in the choosen location</li><li>componentDidMount - Loads the most popular search topics through <a href="https://cosmicjs.com/">Cosmic</a> API</li></ul><h5><a id="Libcosmicjs_52"></a>Lib/cosmic.js</h5><code>lib/comsic.js</code> is the file where our code of relations with Buckets has been hosted.<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/haykadamyan/9d6ec45df6fcc08a872d2169cd9b96f1.js' class='embedly-card'></a>"><a href="https://gist.github.com/haykadamyan/9d6ec45df6fcc08a872d2169cd9b96f1.js" class="embedly-card"></a></div><a id="Important_functions_58"></a>Important functions<ul><li>getSearchHistory - returns the history of the searches that were done</li><li>addHistory - checks if we have that topic searched before, if yes we make the popularity rank of the topic higher in our db, if not we add it there with the popularity rank 0.</li></ul><h5><a id="Libtwitterjs_63"></a>Lib/twitter.js</h5><code>lib/twitter.js</code> is the file where our code for <a href="https://developer.twitter.com/en/docs.html">Twitter API</a> is hosted.<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/haykadamyan/2d548514ad322ef4f3af8da806400c6f.js' class='embedly-card'></a>"><a href="https://gist.github.com/haykadamyan/2d548514ad322ef4f3af8da806400c6f.js" class="embedly-card"></a></div><h6><a id="Important_functions_69"></a>Important functions</h6><ul><li>searchTweets - sends a search request to the <a href="https://developer.twitter.com/en/docs.html">Twitter API</a></li></ul><h1><a id="Conclusion_75"></a>Conclusion</h1>In this tutorial, we&rsquo;ve learned how to build an app that filters twitter tweets by location using <a href="https://reactjs.org/">React</a> and <a href="https://cosmicjs.com/">Cosmic</a>. All the important functions and API calls that were used in the process of development are described above. If you have any questions about the development process, feel free to contact me at <a href="mailto:drprog00@gmail.com">drprog00@gmail.com</a>.

How to Build a Location-based Twitter Search App with React and Cosmic

Video is hard. Encoding, serving the right version to the right browser, device optimization, bandwidth consideration, it&#39;s all pretty daunting. Thankfully there&#39;s <a href="https://mux.com/" rel="noopener noreferrer" target="_blank">Mux</a> and the new <a href="https://cosmicjs.com/extensions/mux-videos" rel="noopener noreferrer" target="_blank">Mux Videos Extension</a>, which allow you to add best-in-class video delivery to your application without the headache.In this overview, I&#39;m going to show you how to use the <a href="https://cosmicjs.com/extensions/mux-videos" rel="noopener noreferrer" target="_blank">Mux Videos Extension</a> to power video content in your application in just a few clicks. As a bonus, I&rsquo;ll show you how to create your own <a href="https://cosmicjs.com/extensions/" rel="noopener noreferrer" target="_blank">Cosmic Extension</a> to connect to your favorite API services in your Cosmic Dashboard.<h3> TL;DR</h3><a href="https://cosmicjs.com/extensions/mux-videos" rel="noopener noreferrer" target="_blank">Install the Mux Videos Extension</a> <a href="https://github.com/cosmicjs/mux-extension" rel="noopener noreferrer" target="_blank">Check out the Mux Videos Extension codebase</a> If you&#39;re not yet a Mux customer, they&rsquo;re offering a $50 credit to Cosmic customers! Create an account and mention &ldquo;Cosmic&rdquo; to their team.<h3> What is Mux?</h3><a href="https://mux.com/" rel="noopener noreferrer" target="_blank">Mux</a> is an API-first video service that helps you provide the highest quality videos to your users. By using their video steam URL to host your videos, you can be sure that your users will receive the most optimized version of the video across all devices and network bandwidth limitations.Mux and <a href="https://cosmicjs.com/">Cosmic</a> are a powerful combination. By installing the <a href="https://cosmicjs.com/extensions/mux-videos" rel="noopener noreferrer" target="_blank">Mux Videos Extension</a> to your Cosmic Bucket, you will be able to upload videos directly to Mux from your Cosmic Dashboard. Use the saved Mux Video URLs in your content to deliver the highest possible quality video experiences to your end users.<h3> How to install the Mux Extension</h3>To install the Mux Videos Extension, <a href="https://cosmicjs.com/login" rel="noopener noreferrer" target="_blank">log in to your Cosmic account</a> and navigate to Your Bucket &gt; Settings &gt; Extensions. Click the Extensions&nbsp;tab to browse all the pre-built Extensions. From there, find and install the Mux Videos Extension. <img data-action="zoom" src="https://s3-us-west-2.amazonaws.com/cosmicjs/ce6df680-146b-11e9-b763-9db7db0e6212-Screenshot-2019-01-10-at-5.03.56-AM.png" style="width: 100%;" class="fr-fic fr-dib">After installing, you will be redirected to the Extension settings page. Under Query Parameters, you will need to provide the Mux API credentials on your Mux account (<code>mux_access_token</code>, <code>mux_secret</code>). You can follow the steps <a href="https://docs.mux.com/docs/video#section-1-get-an-api-access-token">here</a> to get your Mux API credentials. <img data-action="zoom" src="https://s3-us-west-2.amazonaws.com/cosmicjs/640ae590-146c-11e9-b5ec-470c38d061b3-Screenshot-2019-01-10-at-5.09.12-AM.png" style="width: 100%;" class="fr-fic fr-dib">After entering the credentials, save your Extension. And you&#39;re good to go!<h3> How does the Extension work?</h3><img data-action="zoom" src="https://s3-us-west-2.amazonaws.com/cosmicjs/f28e9030-1496-11e9-b763-9db7db0e6212-mux-1.gif" style="width: 100%;" class="fr-fic fr-dib"> After installing the Extension and setting your Mux account keys, click the Mux Videos Extension link in the lefthand nav. Next, upload your videos. The Extension saves the uploaded video data to the Mux Videos Object Type. Now you can add your Mux Videos to any Object using an Object Metafield. Then you can fetch Mux data into your application by using the <code>mux_playback_url</code> property located in the Object metadata.&nbsp; <img data-action="zoom" src="https://s3-us-west-2.amazonaws.com/cosmicjs/0e4c1610-1499-11e9-b5ec-470c38d061b3-mux-2.gif" style="width: 100%;" class="fr-fic fr-dib"><h3> Implementation</h3>Simply add the Mux playback URL to your HTML Video player. Here&#39;s an example: <div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/tonyspiro/729b52df5b1ba48ea519cc7f641340a2' class='embedly-card'></a>"><a href="https://gist.github.com/tonyspiro/729b52df5b1ba48ea519cc7f641340a2" class="embedly-card"></a></div><div class="fr-embedly " data-original-embed="<a href='https://codesandbox.io/s/qqk777l5k4' class='embedly-card'></a>"><a href="https://codesandbox.io/s/qqk777l5k4" class="embedly-card"></a></div><h3>Conclusion</h3>By using the Mux Videos Extension, your users will thank you for delivering high-quality videos to them, optimized to their specific device and bandwidth. This is another way that Cosmic is integrating
with the best tools available, helping you create great application experiences that create more happy users.For best practices in implementing the Mux streaming URL, consult the <a href="https://docs.mux.com/docs/video" rel="noopener noreferrer" target="_blank">Mux documentation</a>.<h3> Bonus: How to create your own Cosmic Extension&nbsp;</h3>The Mux Videos Extension was built using <a href="https://vuejs.org/" rel="noopener noreferrer" target="_blank">Vue</a> and <a href="https://nuxtjs.org/" rel="noopener noreferrer" target="_blank">Nuxt</a>. Check out the <a href="https://github.com/cosmicjs/mux-extension" rel="noopener noreferrer" target="_blank">Mux Videos Extension codebase on GitHub</a>.To create your own Cosmic Extension for your <a href="https://cosmicjs.com" rel="noopener noreferrer" target="_blank">Cosmic</a> Bucket, you need at least the following required files:<pre><code>extension.json
index.html</code></pre><h4> Extension Settings</h4>The <code>extension.json</code> file includes basic information for your Extension. Here are the basic fields for the <code>extension.json</code> file in the Mux Extension (<a href="https://github.com/cosmicjs/mux-extension/blob/master/extension.json" rel="noopener noreferrer" target="_blank">see the full file here</a>):<pre><code>{
 &quot;title&quot;: &quot;Mux Videos&quot;,
 &quot;font_awesome_class&quot;: &quot;fa-film&quot;,
 &quot;image_url&quot;: &quot;https://cosmic-s3.imgix.net/ee0ef100-052b-11e9-a865-4d928f17b796-mux.png?w=600&quot;
}
</code></pre>From here, you simply create a static website with this file in the root folder and you upload it to Your Bucket &gt; Extensions &gt; Add Extension. Since this can be either a static website or SPA, you can use modern frontend
development tools like React, Vue, and Angular.&nbsp;For more information on building Extensions, check out the <a href="https://cosmicjs.com/docs/extensions">Extension documentation</a>.

Mux Videos Extension Overview

In this tutorial I&rsquo;ll demonstrate how to build an Authentication app using Angular 6 and <a href="https://cosmicjs.com">Cosmic</a>. Starting from scratch, learn how to build, configure and deploy this Angular 6 Auth app to the Cosmic App Server for testing purposes.&nbsp; TL;DR<a href="https://cosmicjs.com/apps/angular-authentication-app" rel="noopener noreferrer" target="_blank">Checkout the demo</a> <a href="https://github.com/cosmicjs/angular-auth" rel="noopener noreferrer" target="_blank">Download the codebase</a><a href="https://cosmicjs.com/apps/angular-authentication-app" rel="noopener noreferrer" target="_blank"></a> PrerequisitesBefore you start, you will need to have installed the <a href="https://cli.angular.io" rel="noopener noreferrer" target="_blank">Angular CLI</a>, <a href="https://nodejs.org/en/" rel="noopener noreferrer" target="_blank">Node.js</a> and npm on your system. You can refer to these <a href="https://angular.io/guide/quickstart" rel="noopener noreferrer" target="_blank">Angular docs</a> to get some help in installation.&nbsp; Getting StartedFirst we are going to create an Angular project. For this, go to your desired folder where you want to place your Angular project, open the terminal and type the following command:<code>ng new angular-auth</code>This command automatically creates the Angular project with titled &ldquo;angular-auth&rdquo;. Now go to the project folder and run the following command:<code>cd angular-auth</code><code>ng serve &ndash;open</code>This command opens the project on browser on port 4200, i.e. <a href="http://localhost:4200/"></a><a href="http://localhost:4200/">http://localhost:4200/</a>. That means you have successfully created the basic structure of the Angular project.&nbsp; Setting up Your Cosmic Dashboard&nbsp;Start by signing in to Cosmic and creating your Bucket. After your Bucket is created you can begin by creating an Object Type called &lsquo;Users&rsquo;, which will store the registered users&rsquo; information. You can create different Object Types according to the requirements that fit your data specifications.&nbsp;Now create a Bucket and copy the key from your dashboard, which will allow users to store their data in Cosmic. For this go to Bucket &gt; Settings &gt; Basic Settings and generate new key. Similarly, create a read key which we will use to fetch data from the Cosmic server. Copy these keys and store in a safe place in your system.&nbsp;<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/2d738fc0-0de9-11e9-896c-6bb8e6fd4bda-Cosmic-JS-basic-setting.png" class="fr-fic fr-dib"> Import Bucket.jsonYou can download your bucket.json file from the <a href="https://github.com/cosmicjs/angular-auth" rel="noopener noreferrer" target="_blank">Angular Auth git repo</a> and directly import to your Bucket. This way you will not have to create Object Types. Just follow the steps: Login to Cosmic &gt; Choose default bucket &gt; Go to Settings &gt; go to Import / Export and click the button &quot;Add import file&quot; to upload the bucket.json file.&nbsp; Configuration of Cosmic in Angular ProjectTo add our Cosmic configuration in our Angular project we created the cosmic.config.ts file under src/config folder. Code is shown below:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kitkumar/46118c909e089f743ef464fe8bfa532a.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kitkumar/46118c909e089f743ef464fe8bfa532a.js" class="embedly-card"></a></div>Angular Service to Interact with CosmicHere we are creating a service in Angular which will interacts with Cosmic with the help of provided APIs. Let&#39;s create with command:<code>ng g s apicall</code>It will create two files and to separate from the rest of the code, place these files in a folder with name services, in the following location: <code>src/app/services</code><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kitkumar/142909ffcbab91d3750b1f58212d9edb.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kitkumar/142909ffcbab91d3750b1f58212d9edb.js" class="embedly-card"></a></div>In this code we are calling the Cosmic server for several different purposes. Here are the methods which are declared:<ul><li>login(): It is called to login the user with email and password.</li><li>register(): It registers the user when the user provide all details through the register page.</li><li>checkGoogleUser(): It checks the presence of the user in the database when they want to login with Google.</li><li>googleRegister(): It registers the user when they clicked the Google icon to login.</li></ul> Model Creation for AngularHere we are creating a file named user.model.ts in folder models; the location is: <code>src/app/models/user.model.ts</code>Here we declared a class named userModel which contains all the variables we are using in this project.dd<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kitkumar/3cc66d69107245ab44fdcee5774135bf.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kitkumar/3cc66d69107245ab44fdcee5774135bf.js" class="embedly-card"></a></div>Register the New UserHere we are implementing the functionality of registering the new user. We are capturing user-supplied info and saving it in the Cosmic backend. We place all components in a single folder named &#39;components&#39;, so the location of this register component will be: <code>src/app/components/register/register.component.ts</code>We can create the register component with the following command: <code>ng g c register</code><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kitkumar/240d8129e4f0da22cd6bc41a8291c9a0.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kitkumar/240d8129e4f0da22cd6bc41a8291c9a0.js" class="embedly-card"></a></div>In this component we are registering a new user. register() is the main function here which is calling login() function in first step to check whether user is already registered or not. If user is already registered she will get the message &#39;email already
exists&#39;, otherwise, it will register the user. On this page we applied full validations on name, email, password and other fields. <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/5ce626d0-0df0-11e9-a26a-cbc45be2c04a-Angular-Cosmic-JS-Register.png" class="fr-fic fr-dib"> &nbsp;Authentication&nbsp;ComponentAs the name says, it authenticates the registered user with their email and password. If you want to login with Google, you can click on the Google icon. The location of this component is: <code>src/app/components/authentication/authentication.component.ts</code><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kitkumar/682f3ad802ef7b9345760af6766ddab8.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kitkumar/682f3ad802ef7b9345760af6766ddab8.js" class="embedly-card"></a></div>Basically, this component contains two methods: the first is login() and the second is socialSignIn(). The first method calls the login() function from the API service and stores the returned data to local storage on successful attempt and then navigates to the dashboard. Similarly, the socialSignIn() method also first checks the user in Cosmic and depending on the result, registers or logs in the user. Dashboard ComponentThis component is shown only to logged-in users, so this shows the authorization in our app. The location of this component in our project is: <code>src/app/components/dashboard/dashboard.component.ts</code><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kitkumar/3ef508dad092a081cb5d6d1eccc4396d.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kitkumar/3ef508dad092a081cb5d6d1eccc4396d.js" class="embedly-card"></a></div>After a successful login attempt, the user will be redirected to this page, where the local storage of the browser will be checked to fetch the details of the user to display on the dashboard.&nbsp; <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/70456c50-0df4-11e9-a26a-cbc45be2c04a-Cosmic-JS-Angular-Dashboard.png" class="fr-fic fr-dib"> What&#39;s Happening Here&nbsp;In this auth app you need to register the first time, and after successful registration you only need to login. As you login, your email and password will be compared to the data on the Cosmic server and only registered
users will be able to navigate to the dashboard where they can see their information (which is coming from the back-end data which you saved during registration).If you&#39;re pressed for time, you can just click on the Google icon in the login form to navigate to the dashboard in single click. The main point is that all
of these functionalities have been done with Cosmic APIs. We stored complete data in the Cosmic server and fetched the data when required. <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/425603c0-0df6-11e9-896c-6bb8e6fd4bda-ng-Cosmic-JS-auth-HOme.png" class="fr-fic fr-dib"> Data Modeling in CosmicIt is good practice to create different Object Types to store different data types. We created an Object Type named &#39;Users&#39; to store the registered users with their emails. The second Object Type we created was &#39;googleusers&#39;, which contains the users
which are using Google auth for authentication. Cosmic provides different Object Types to manage data in a simple way and can be accessed easily.&nbsp;<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/ab758640-0df7-11e9-a434-2592e6fb8493-Cosmic-JS-Users-Object-Type.png" class="fr-fic fr-dib"> Registered users with the registration form <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/44431bd0-0df8-11e9-b57a-55b3efb76867-Cosmic-JS-Main-Dashboard.png" class="fr-fic fr-dib">Above is the main dashboard, with a total of 7 Objects present (meaning there are 7 users that have been registered to our app with email, Google, or both.&nbsp; Deploy on CosmicIn this step we are going to deploy our Auth app to the Cosmic &nbsp;App Server. You should follow these requirements:<ul><li>You must have a public GitHub repo (private available if you connected yourGitHub account)</li><li><a href="https://devcenter.heroku.com/" rel="noopener noreferrer" target="_blank">These requirements</a> must be met</li></ul>Now follow the steps:Modify the package.json file in Angular Project:&nbsp;Specify the versions of angular/cli and compiler/cli, so that at the time of deploy, server can configure according to these versions.&nbsp;Install Express: Now install express on the project with following command:&nbsp;<code>npm install --save express</code>Now you need to add some code in package.json. Add scripts and engines as follows:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kit/3f35438dd1946fe2b2edcc86388cf8b2.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kit/3f35438dd1946fe2b2edcc86388cf8b2.js" class="embedly-card"></a></div>Now it is necessary to create app.js file which will run the with the express, add following code to it:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kit/017171b7cd6f8ac5cf682f570995178a.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kit/017171b7cd6f8ac5cf682f570995178a.js" class="embedly-card"></a></div>Deploy Now:&nbsp;<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/ead0dde0-0dfb-11e9-8f8f-dd1c79ca06a8-Cosmic-JS-Deploy.png" class="fr-fic fr-dib">You will find the deploy option under Bucket &gt; Settings &gt; Web Hosting. Provide your git repo and deploy your app in single click. ConclusionWith the help of Cosmic you can create powerful applications. In this example we were able to build an Angular 6 Auth App and deploy in seconds. You don&#39;t need to configure a server or install any software, just click and go. 🚀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>.

How to Build an Authentication App using Angular 6 and Cosmic

<div class="fr-embedly " data-original-embed="<a href='' class='embedly-card'></a>"><a href="" class="embedly-card"></a></div>In this tutorial I&#39;m going to demonstrate how to build a photography portfolio website using React, Styled-Components and <a href="https://cosmicjs.com">Cosmic</a>. Let&#39;s get started.&nbsp;<h3>TL;DR</h3><a href="https://cosmicjs.com/apps/react-portfolio-website" rel="noopener noreferrer" target="_blank">View and install the demo</a> <a href="https://github.com/cosmicjs/react-portfolio-website" rel="noopener noreferrer" target="_blank">View the code on GitHub</a><h3>Intro</h3><a data-href="https://cosmicjs.com/" href="https://cosmicjs.com/" rel="noopener noreferrer" target="_blank">Cosmic</a> provides a good backend for your webapps. It is a fully-featured content management system (CMS) with numerous options that allows everyone on your team to collaborate to manage content. Cosmic provides many options for developers: Bucket Admins can assign different roles for their team members, create single or multiple relationships between Objects and much more.&nbsp;In this example I use:<ul><li>the multiple objects relationship metafield</li><li>images / files</li><li>default objects input</li></ul><a href="https://reactjs.org/" rel="noopener noreferrer" target="_blank">ReactJS</a>: easy and flexible JS library to create a client side app. The React CLI allows you to create single page apps with no configuration.<a href="https://www.styled-components.com/docs/basics#motivation" rel="noopener noreferrer" target="_blank">StyledComponents</a>: alternative for Static CSS, allows you to build separate components to enhance your app and make it expandable.<h3> Getting Started</h3>1. In your Cosmic dashboard click &quot;Add New Bucket&quot;.&nbsp;1.1&nbsp;Install an App&nbsp;- Install an App button, assign the application name and &quot;Save Bucket&quot;. &nbsp;After that, &nbsp;select the application from the list of applications and click &quot;Install
free&quot;. And you created all the objects necessary for the application. The last thing to do: Copy the API key from the Cosmic desktop&gt; Basic settings&gt; Bucket slug.&nbsp;1.2 &nbsp;From Scratch -&nbsp;start from scratch button, assign the application name and &quot;Save bucket&quot;. &nbsp;For this app, you need to create three objects type. Images, Categories and Sites.&nbsp;Images: Default inputs plus additional metafields called: &quot;img&quot; &nbsp;as image/file &nbsp;object type checked as required.&nbsp;Categories: Default inputs plus extra metafields called: &quot;images&quot; as multiple objects relationship (select limit Search by Images) and Image/file object called: &quot;img&quot;.&nbsp;Sites: Default inputs type plus additional metafields called: &quot;picture&quot;. I&#39;ve created the Bucket for my application, and am now ready to dive into the code. &nbsp;Link for your <a href="https://cosmicjs.com/imageapp/settings/main" rel="noopener noreferrer" target="_blank">Bucket Slug</a>. <h3>Code</h3>Clone the repo from Github or you can create from scratch. This package shows all dependencies used for app:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/3ndrius/303101ee46781d516d2d1c134cc42030' class='embedly-card'></a>"><a href="https://gist.github.com/3ndrius/303101ee46781d516d2d1c134cc42030" class="embedly-card"></a></div>After you&#39;ve installed React and all dependencies, you are ready to write code.All data is downloaded separately, a parameter is sent in the react-router. After moving to a single post, a single element is fetch and rendered in component. <h4>A brief explanation about the file structure.</h4>- Our first task is to create a file structure for the project.&nbsp;App.js default , folder component:&nbsp;buttons&nbsp;(all created buttons),headers&nbsp;(all headers),page&nbsp;(all page),parts&nbsp;(all stateless &nbsp;only const styled components),section&nbsp;(class and functional components that manage data and import other component from parts file),layout&nbsp;(app layout global style theme provider).utils&nbsp;(color and theme object). <div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/3ndrius/085df0905aeb9e07d1c86060702c853d' class='embedly-card'></a>"><a href="https://gist.github.com/3ndrius/085df0905aeb9e07d1c86060702c853d" class="embedly-card"></a></div><h3>What&#39;s Inside</h3>App.js &nbsp;file that is located routing and layout import, state for interactive elements. Here we pass data that we can pick up in another component as props. <div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/3ndrius/11c9a55ca61b0e38e24a9fc95989e7ad' class='embedly-card'></a>"><a href="https://gist.github.com/3ndrius/11c9a55ca61b0e38e24a9fc95989e7ad" class="embedly-card"></a></div><h3>Section&nbsp;</h3>Category.js&nbsp;is rendering as a home page. This displays data downloaded as props from the app.js component. &nbsp;It also imports styled components from the &quot;parts&quot; folder.<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/3ndrius/72ee66866406fba6b4b60b6dddc2241d' class='embedly-card'></a>"><a href="https://gist.github.com/3ndrius/72ee66866406fba6b4b60b6dddc2241d" class="embedly-card"></a></div>PartGrid.js -&nbsp;state component collects data from Cosmic. The page with photos in the selected category contains a link to a single photo.<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/3ndrius/4efd853215cc08b397642f5e0c5fc647' class='embedly-card'></a>"><a href="https://gist.github.com/3ndrius/4efd853215cc08b397642f5e0c5fc647" class="embedly-card"></a></div>Single.js&nbsp;- It is also a component containing state. Receives data for a single photo from Cosmic.&nbsp;<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/3ndrius/9519fbeb4d40e232310605524b0dec3d' class='embedly-card'></a>"><a href="https://gist.github.com/3ndrius/9519fbeb4d40e232310605524b0dec3d" class="embedly-card"></a></div>Layout.js - &nbsp;contains theme provider and global style. Since we used the theme provider, we can connect CSS with React and use CSS variables depending on props from the component.<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/3ndrius/3739b1fc9119df7a64385a1eb44d723e' class='embedly-card'></a>"><a href="https://gist.github.com/3ndrius/3739b1fc9119df7a64385a1eb44d723e" class="embedly-card"></a></div>Nav.js - separate state component with own styled-components and state.<h3>Parts&nbsp;</h3>In this folder there are only single tags HTML styling in CSS (styled-components) and exported as separate components.<h3>Buttons and Headers</h3>Individual HTML tags styling in styled-components): h1, button etc.<h3>Page</h3>Contact.js - State component that fetch data from Cosmic and display in app.&nbsp;<h3>Utils</h3>All global variables that we can use in our app like colors, media query, font-size etc. Variables from the files we can pass as props to other components and use in styled-components.<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/3ndrius/c3479353e7645e221fdc1fbfab4bdd05' class='embedly-card'></a>"><a href="https://gist.github.com/3ndrius/c3479353e7645e221fdc1fbfab4bdd05" class="embedly-card"></a></div><h3>Conclusion</h3>We&#39;ve just created a simple app using styled-components, React JS and Cosmic. At the beginning we saw how to create the Bucket for our app. We then created a boilerplate using the React CLI and installed dependencies. After
creating the folder structure and styling components in CSS, we downloaded data from Cosmic to display in the application.Cosmic has a great API for every application, coupled with many options for the developer and content editors that allow you to manage content seamlessly. Styled components allows you to create components that are independent, so an application can be created by many
people without causing conflicts like (class name in css ) etc. In one command the React CLI allows us to create the boilerplate for our app.&nbsp;I encourage you to install the application, add your own components and extend the functionality. Have fun!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>.

How to Build a React Portfolio Website Powered by Cosmic

* This article will assume some basic knowledge of Angular so it can focus on the specific task of requesting and showing data from Cosmic <h3>TL; DR</h3>Take a look at <a href="https://github.com/cosmicjs/angular-company-website" rel="noopener noreferrer" target="_blank">the repository</a> and&nbsp;<a href="https://cosmicjs.com/apps/angular-company-website" rel="noopener noreferrer" target="_blank">install the app</a> What is this app about?A typical company website is just a set of pages structured in a more or less simple navigation. We want to create a website that allows the user to create any number of pages and decide the structure for the navigation, without the need to wait for a code release. For that, we are going to rely on Cosmic and create the structure to hold this project. On this example, our bucket will have the following object types:<ul><li>Pages. This is a simple object, with no additional metafields.</li><li>Navigation. It will hold a collection of Pages.</li><li>Presets. This is a configuration object with a list of attributes that will help us start our app. It will hold the value for the homepage and the main navigation that we will use for the menu of our site.</li></ul> Using the APINow that we defined the structure of our data, we need to create our Angular app (I recommend using the Angular CLI) and create a service to make our calls to the Cosmic API. See how simple is to request a single page object from Cosmic:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/imaka/09edb1299113847357ae49c39f6bcdfa.js' class='embedly-card'></a>"><a href="https://gist.github.com/imaka/09edb1299113847357ae49c39f6bcdfa.js" class="embedly-card"></a></div><div class="fr-embedly " data-original-embed="<a href='' class='embedly-card'></a>"><a href="" class="embedly-card"></a></div>get a single page and save it to the stream to keep it cached for the session Note that, for nested objects, Cosmic will not return the full tree, so sometimes you will need to concatenate calls to make the most of our service, e.g.: When fetching the main presets, you would probably want to include the navigation pages.<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/imaka/ac2a762263a12c343569bc34c112ea06.js' class='embedly-card'></a>"><a href="https://gist.github.com/imaka/ac2a762263a12c343569bc34c112ea06.js" class="embedly-card"></a></div>this call will combine the result of getNavigation into the result of getPreset Our api calls need to be authenticated with a read key, we can include that on each method, but the easiest may be to create an interceptor. This will intercept all http requests, so we check if it&#39;s a Cosmic request and append the read key where necessary.<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/imaka/4dce204bc23d5e06744d7c8f03e4cc80.js' class='embedly-card'></a>"><a href="https://gist.github.com/imaka/4dce204bc23d5e06744d7c8f03e4cc80.js" class="embedly-card"></a></div>intercept and append the read or write parameters Routing to the pagesAt this point, our website does nothing, the first thing it needs to do is to know how to load its first page. We need to create a routed module for the Pages, and set it to load on the root. Once inside the module, on its own routing, we will set a route for the parameter :slug to load the Page Component. And what happens when there is no route specified? This will be our most common scenario, for that, we set an empty route with a Guard.<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/imaka/4af1a706075298f39dc594245b499eed.js' class='embedly-card'></a>"><a href="https://gist.github.com/imaka/4af1a706075298f39dc594245b499eed.js" class="embedly-card"></a></div> A guard will be executing when matching a route and before loading the component, so we will use it to fetch the main presets from Cosmic, and redirect the app to the homepage we stablished.<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/imaka/ebc77ad81df26cf06a7d29adc8fda5fb.js' class='embedly-card'></a>"><a href="https://gist.github.com/imaka/ebc77ad81df26cf06a7d29adc8fda5fb.js" class="embedly-card"></a></div>from Angular 7.1, canActivate can return either a boolean or an UrlTree ComponentsNow we have a route configuration that will load the Page component, and this is the way to load a page using the slug from the parameter list:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/imaka/f63d7cb3b0696d2903ea164c532a4a6a.js' class='embedly-card'></a>"><a href="https://gist.github.com/imaka/f63d7cb3b0696d2903ea164c532a4a6a.js" class="embedly-card"></a></div>now we can use the page object on our template With this, we have a way to navigate via url, but we should also load a menu so the user can see the pages available. For that, we will add a menu component on the core module, as it will be shared throughout the app. Our menu will be composed of a navigation
list, a logo and the company name; all of this is defined on the presets, so the menu will have a call like this:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/imaka/328fc693b2e5f31e9a85c8d35beb25c8.js' class='embedly-card'></a>"><a href="https://gist.github.com/imaka/328fc693b2e5f31e9a85c8d35beb25c8.js" class="embedly-card"></a></div>note that we specifically ask to include the navigation by adding &quot;true&quot; as a parameter to the method All of this would allow you to quickly create a website using Angular and Cosmic, all that is left to do is to create the templates and extend the configuration to meet your needs.

Start building today