<p>Thanks to all who attended our first webinar / AMA last week. There was some great engagement and questions that helped steer the screen-share webinar for users in the Cosmic Community as well as first-time visitors to the system. If you missed it, check out the video and be sure to attend our next one.&nbsp;</p><p><br></p><h3>Webinar Recap: Powering Modern Apps with Cosmic</h3><div class="fr-embedly " data-original-embed="<a href='https://youtu.be/NbbJAiW_Tnk' class='embedly-card'></a>"><a href="https://youtu.be/NbbJAiW_Tnk" class="embedly-card"></a></div><p><a href="https://cosmicjs.com/tony" rel="noopener noreferrer" target="_blank">Tony Spiro</a> covers the Cosmic Basics with resources like <a href="https://cosmicjs.com/getting-started" rel="noopener noreferrer" target="_blank">Getting Started</a>, the <a href="https://github.com/cosmicjs/cosmic-cli" rel="noopener noreferrer" target="_blank">Cosmic CLI</a> and Cosmic <a href="https://cosmicjs.com/getting-started#quickstart" rel="noopener noreferrer" target="_blank">Starters</a>.</p><p><br></p><h3>Conclusion</h3><p>Feel free to drop us a line if you&#39;d like to see an upcoming webinar covering a particular topic or use case. 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>

Webinar Recap: Powering Modern Apps with Cosmic

<p>Cosmic is a great content management tool which gives you the ability to upload, access, and edit your data and media files easily. These properties make it a prime candidate to use when building web-based video games as they heavily incorporate a
large combination of media images, files, and data objects. In this tutorial, we&rsquo;ll go over how to make a simple role-playing adventure game built in Vue.JS whilst using Cosmic to manage our content.</p><h3>TL;DR:</h3><p><a href="https://cosmicjs.com/apps/vue-rpg-game" rel="noopener noreferrer" target="_blank">RPG Game</a><br><a href="http://cosmic-game.cosmicapp.co" rel="noopener noreferrer" target="_blank">RPG Game Demo</a><br><a href="https://github.com/cosmicjs/vue-rpg-game">RPG Game Github</a></p><h3>Intro</h3><p>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;</p><p>Integrating with third party applications is usually one of the most frustrating tasks of setting up a new a project. However, by making a few simple calls to Cosmic&rsquo;s API, we can retrieve our data very easily.</p><h3>Setting Up Your Project</h3><p>In this tutorial, we will use vue-cli to quickly get our project up and running. We can also easily install Cosmic using npm as well:</p><p><br></p><blockquote><p>$ npm install -g vue-cli</p><p>$ vue init webpack cosmic-game</p><p>$ cd cosmic-game</p><p>$ npm install --save vuex cosmicjs</p><p>$ npm install</p><p>$ npm run dev</p></blockquote><p><br></p><p>We will then edit /config/config.js to add our bucket and add our read and write keys for authorization:</p><div class="fr-embedly        " data-original-embed="<a href='https://gist.github.com/Abeyy/3d28ce405a670dbedb05852234f925f0#file-config-js' class='embedly-card'></a>"><a href="https://gist.github.com/Abeyy/3d28ce405a670dbedb05852234f925f0#file-config-js" class="embedly-card"></a></div><p><br></p><h3>Uploading and Compartmentalizing our Game Assets using Cosmic</h3><p>To populate our game with its story, environment and characters, we will compartmentalize data in three buckets.</p><p>The first Bucket will be &ldquo;Story&rdquo;, and will contain anything related to the actual story and environment of the game. We can easily enter and edit story text, and add assets such as environment background images here. Notice how easily we can
use the Cosmic CMS to edit our data!</p><p>The next Bucket will be titled &ldquo;Hero&rdquo;. Here, as its name implies, we can add all the assets and metadata relating to the main character. This Bucket can contain all the hero&rsquo;s sprites (for example: animations for movement, actions, and
idling) as well metadata such as the hero&rsquo;s character stats.</p><p>The next and final Bucket will be &ldquo;Enemies&rdquo;, and as its name suggests will have all the enemies assets and character stats.</p><p>Being able to split up our RPG game into these three Buckets gives us a couple of unique advantages. Firstly, all assets are neatly filed away and are easily accessible. Secondly, the Cosmic CMS allows us to easily add and edit storylines, just as
easily as one would edit a blog post.</p><p><strong>&nbsp;</strong></p><h3>Accessing Data in our Game from Cosmic</h3><p>We can easily access our content from Cosmic using the Cosmic API, and populate them into three Vue.JS components which reflect the three Buckets we made for the story, hero, and enemies.</p><p>We can reference the following function in each of our components mounted calls, so that when the component loads our data from our Buckets is ready to use:</p><div class="fr-embedly      " data-original-embed="<a href='https://gist.github.com/Abeyy/9a1008dc9ec3fc73344a0db032336d43#file-getobjectfromcosmic-js' class='embedly-card'></a>"><a href="https://gist.github.com/Abeyy/9a1008dc9ec3fc73344a0db032336d43#file-getobjectfromcosmic-js" class="embedly-card"></a></div><p>Before our game starts, we can give our players exposition by pulling in the story from our &lsquo;Story&rsquo; Bucket. We can also use the story bucket to further set the scene by setting up the environment:</p><div class="fr-embedly        " data-original-embed="<a href='https://gist.github.com/Abeyy/afc04a85210b229b808cadde8f61e920#file-gethomescreenobject-js' class='embedly-card'></a>"><a href="https://gist.github.com/Abeyy/afc04a85210b229b808cadde8f61e920#file-gethomescreenobject-js" class="embedly-card"></a></div><p>As you can see in the above snippet, we easily convert data hosted on Cosmic via REST API, and can store them for use in VueJS&rsquo;s data object.</p><p>Using the same approach, create hero.vue and enemy.vue components and load in their metadata from their respective buckets.</p><p>To make component to component dialogue easier (for example, an attack method in hero.vue affecting an enemies health), you can use state management via store, provided by Vuex &ndash; which we already installed earlier using NPM. Here is an example file
of how Vuex can use the data obtained from Cosmic to manage our store:</p><div class="fr-embedly      " data-original-embed="<a href='https://gist.github.com/Abeyy/db833ce817205937a90d7303ceb7fd14#file-store-js' class='embedly-card'></a>"><a href="https://gist.github.com/Abeyy/db833ce817205937a90d7303ceb7fd14#file-store-js" class="embedly-card"></a></div><p>Now that we have all our necessary game data loaded, we can populate our game! We can load in environment images as background images in our components, add hero and enemy sprites to their respective components, and use our newly created store to handle
our battle, leveling up, and other state change logic.</p><p>Here is some example code for your home screen menu, where you can see just how we populate and update data received from Cosmic:</p><div class="fr-embedly      " data-original-embed="<a href='https://gist.github.com/Abeyy/916b3b00c3a63ecdea4e9bd617652ab6#file-homescreen-js' class='embedly-card'></a>"><a href="https://gist.github.com/Abeyy/916b3b00c3a63ecdea4e9bd617652ab6#file-homescreen-js" class="embedly-card"></a></div><p><br></p><h3>Conclusion<strong>&nbsp;</strong></h3><p>Building a video game, whether in a browser or elsewhere, requires a whole lot of data management. In this tutorial, not only did we explore how easy it is to manage the data by separating it into three different Buckets &ndash; we also saw how quickly
and easily that same data can be accessed and modified. Furthermore, integration was exceptionally simple: all one had to do was run a bash command, and make sure environment keys were properly set up.</p><p>Cosmic is a lightweight, but powerful platform &ndash; and I hope this tutorial was able to properly display its many strengths.</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>

How To Create An RPG Adventure Game using Vue.JS and Cosmic

<p>Cosmic makes it easy to manage content for your Bootstrap applications. In this blog we&#39;ll quickstart a <a href="https://cosmicjs.com/apps/landing-page" rel="noopener noreferrer" target="_blank">Bootstrap Landing Page</a> using the <a href="https://github.com/cosmicjs/cosmic-cli">Cosmic CLI</a>. This single page website landing page is built using Node.js and a minimal theme from <a href="http://startbootstrap.com" rel="noopener noreferrer" target="_blank">Start Bootstrap</a>. &nbsp;Install, deploy and edit every part of this landing page website from your Cosmic Bucket Dashboard. 🔥&nbsp;</p><p><br></p><h3 name="508e">TL;DR:</h3><p><a href="https://cosmicjs.com/apps/landing-page" rel="noopener noreferrer" target="_blank">Bootstrap Landing Page</a><br><a href="https://cosmicjs.com/apps/landing-page/demo" rel="noopener noreferrer" target="_blank">Boostrap Landing Page Demo</a><br><a href="https://github.com/cosmicjs/landing-page" rel="noopener noreferrer" target="_blank">Bootstrap Landing Page App Codebase</a><br><a href="https://github.com/cosmicjs/landing-page" rel="noopener noreferrer" target="_blank"></a><a href="https://cosmicjs.com/knowledge-base/bootstrap-cms" rel="noopener noreferrer" target="_blank">Bootstrap Knowledge Base</a></p><p><br></p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/44ec5440-aac8-11e8-879a-fff9b7fe1331-ezgif-2-1efc198707.gif" style="width: 100%;" class="fr-fic fr-dib"></p><p><br></p><p>Cosmic is an API-first content management platform that makes it easy to add content to any existing or new application. Cosmic enables content managers and developers to work better together. By providing an intuitive Admin Dashboard, powerful APIs, and flexible user roles, applications are built faster, more light-weight, and your whole team saves time in the process.&nbsp;</p><p><br></p><h3 name="9b20">QuickStart a Bootstrap Landing Page using a Headless CMS</h3><p name="4c02"><a href="https://cosmicjs.com" rel="noopener noreferrer" target="_blank">Cosmic</a> is an example of a robust headless CMS and API that&#39;s promoting collaboration on cross-functional teams to build apps faster. Get started building Cosmic-powered apps in seconds 🚀 We have <a data-href="https://github.com/cosmicjs/node-starter" href="https://github.com/cosmicjs/node-starter" rel="noopener" target="_blank">Node.js</a>, <a data-href="https://github.com/cosmicjs/react-starter" href="https://github.com/cosmicjs/react-starter" rel="noopener" target="_blank">React</a>, <a data-href="https://github.com/cosmicjs/vue-starter" href="https://github.com/cosmicjs/vue-starter" rel="noopener" target="_blank">Vue</a>, <a data-href="https://github.com/cosmicjs/gatsby-starter" href="https://github.com/cosmicjs/gatsby-starter" rel="noopener" target="_blank">Gatsby</a> and <a data-href="https://github.com/cosmicjs/serverless-starter" href="https://github.com/cosmicjs/serverless-starter" rel="noopener" target="_blank">Serverless</a> Starters to help you get your project started quickly. There are over 70 app examples available in the <a href="https://cosmicjs.com/apps" rel="noopener noreferrer" target="_blank">Cosmic Apps Marketplace</a> to speed up your project as well. Today we&#39;ll be using the <a href="https://github.com/cosmicjs/cosmic-cli" rel="noopener noreferrer" target="_blank">Cosmic CLI</a> to quickstart a <a href="https://cosmicjs.com/apps/landing-page" rel="noopener noreferrer" target="_blank">Bootstrap Landing Page</a>.</p><h3><br></h3><h3>🛠️ Installation</h3><p data-empty="true"><strong>Install via the <a href="https://github.com/cosmicjs/cosmic-cli">Cosmic CLI</a>:</strong></p><p data-empty="true"><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/be0d5a00-aac7-11e8-af82-5d4fe2f2426d-ice_screenshot_20180828-083401.png" style="width: 493px;" class="fr-fic fr-dib"></p><p data-empty="true">I set up an example Bucket for this blog:</p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/c6bb5620-aac7-11e8-a91c-c5910414b7c7-ezgif-2-61bea2c53b.gif" style="width: 497px;" class="fr-fic fr-dib"></p><p><br></p><p>Run <code>cosmic -h</code> for a list of all commands. Run <code>cosmic [command] -h</code> for details on options for a specific command. You&#39;re now up and running with a <a href="https://cosmicjs.com/apps/landing-page" rel="noopener noreferrer" target="_blank">Bootstrap Landing Page</a> that can be managed entirely from your Cosmic Bucket Dashboard and Command Line Terminal tool of choice.&nbsp;</p><h3>Conclusion</h3><p>I was able to easily install a <a href="https://cosmicjs.com/apps/landing-page" rel="noopener noreferrer" target="_blank">Bootstrap Landing Page</a> using a headless CMS API that I can now use to manage dynamic content changes. When ditching the installed content management system and going API-first isn&#39;t quick enough, check out the <a href="https://cosmicjs.com/getting-started" rel="noopener noreferrer" target="_blank">Starter Apps</a> from Cosmic &nbsp;to get a project up and running in seconds. 🔥</p><p>If you have any comments or questions about building Bootstrap 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>

QuickStart a Bootstrap Landing Page with a Headless CMS

<p>The Cosmic team was honored to get the opportunity to speak at <a href="http://www.toyotaconnected.com" rel="noopener noreferrer" target="_blank">Toyota Connected</a> for the <a href="https://www.meetup.com/Ember-Dallas/" rel="noopener noreferrer" target="_blank">Ember.js Dallas Meetup</a> this week. Cosmic co-founder <a href="https://cosmicjs.com/tony" rel="noopener noreferrer" target="_blank">Tony Spiro</a> presented &quot;Building Modern Apps with API Services&quot; to illustrate the growing trend of offloading core development tasks onto best-in-class API services. Using the recent <a href="https://cosmicjs.com/articles/how-we-built-the-story-licensing-app-using-nextjs-algolia-and-cosmic-js-ji95nfdo" rel="noopener noreferrer" target="_blank">Story Licensing project</a> as a Case Study, Tony outlines the process of integrating <a href="https://www.algolia.com" rel="noopener noreferrer" target="_blank">Algolia</a>, <a href="https://sendgrid.com" rel="noopener noreferrer" target="_blank">SendGrid</a> and Cosmic to deliver a robust, zippy search application that met the business requirements set forth.&nbsp;</p><p>&nbsp;</p><h3>Building Modern Apps with API Services</h3><p><span class="fr-video fr-fvc fr-dvb fr-draggable" contenteditable="false" draggable="true"><iframe src="https://www.youtube.com/embed/VMnzGJ4PN0s?wmode=opaque" frameborder="0" allowfullscreen="" style="width: 100%; height: 360px;"></iframe></span><br></p><h3>Conclusion</h3><p>Developers prefer to focus on building apps, not configuring infrastructure and other time-consuming activities. Integrating with APIs that offload core development services allows teams to build apps faster and take advantage of the API communities&#39; iterations to make their products better, often solving use cases your team may run into real-time. &nbsp;</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>

Video: Building Modern Apps with API Services

<p>In this blog we&#39;ll quickstart a <a href="https://cosmicjs.com/apps/todo-app" rel="noopener noreferrer" target="_blank">React ToDo App</a> using the <a href="https://github.com/cosmicjs/cosmic-cli">Cosmic CLI</a>. This is a simple todo application that consumes the Cosmic API and is built using React, Redux, Webpack and Node.js. You can read how the application was built here, or keep scrolling to quickstart the <a href="https://cosmicjs.com/apps/todo-app" rel="noopener noreferrer" target="_blank">React ToDo App</a> in seconds. 🔥&nbsp;</p><h3 name="508e">TL;DR:</h3><p><a href="https://cosmicjs.com/apps/todo-app" rel="noopener noreferrer" target="_blank">React ToDo App Page</a><br><a href="https://cosmicjs.com/apps/todo-app/demo" rel="noopener noreferrer" target="_blank">React ToDo App Demo</a><br><a href="https://github.com/cosmicjs/todo-app" rel="noopener noreferrer" target="_blank">React ToDo App Codebase</a><a href="https://cosmicjs.com/knowledge-base/react-cms" rel="noopener noreferrer" target="_blank">React Knowledge Base</a></p><p><br></p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/5f253220-a157-11e8-89c8-ff61f884caa3-1c996bb0-2fa7-11e7-8a4c-11dbea3cc073-todo-react-redux.gif" style="width: 100%;" class="fr-fic fr-dib"></p><p><br></p><p>Cosmic is an API-first content management platform that makes it easy to add content to any existing or new application. Cosmic enables content managers and developers to work better together. By providing an intuitive Admin Dashboard, powerful APIs, and flexible user roles, applications are built faster, more light-weight, and your whole team saves time in the process.&nbsp;</p><p><br></p><h3 name="9b20">QuickStart a ToDo App built on React, Redux, Node.js and Webpack&nbsp;</h3><p name="4c02"><a href="https://cosmicjs.com" rel="noopener noreferrer" target="_blank">Cosmic</a> is an example of a robust headless CMS and API that&#39;s promoting collaboration on cross-functional teams to build apps faster. Get started building Cosmic-powered apps in seconds 🚀 We have <a data-href="https://github.com/cosmicjs/node-starter" href="https://github.com/cosmicjs/node-starter" rel="noopener" target="_blank">Node.js</a>, <a data-href="https://github.com/cosmicjs/react-starter" href="https://github.com/cosmicjs/react-starter" rel="noopener" target="_blank">React</a>, <a data-href="https://github.com/cosmicjs/vue-starter" href="https://github.com/cosmicjs/vue-starter" rel="noopener" target="_blank">Vue</a>, <a data-href="https://github.com/cosmicjs/gatsby-starter" href="https://github.com/cosmicjs/gatsby-starter" rel="noopener" target="_blank">Gatsby</a> and <a data-href="https://github.com/cosmicjs/serverless-starter" href="https://github.com/cosmicjs/serverless-starter" rel="noopener" target="_blank">Serverless</a> Starters to help you get your project started quickly. There are over 70 app examples available in the <a href="https://cosmicjs.com/apps" rel="noopener noreferrer" target="_blank">Cosmic Apps Marketplace</a> to speed up your project as well. Today we&#39;ll be using the <a href="https://github.com/cosmicjs/cosmic-cli" rel="noopener noreferrer" target="_blank">Cosmic CLI</a> to quickstart a <a href="https://cosmicjs.com/apps/todo-app" rel="noopener noreferrer" target="_blank">React ToDo App</a>.</p><p name="4c02"><br></p><h3 name="9b20"><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/38c504b0-a158-11e8-9655-7b6741a1d31d-DallasStandup.com-12.png" style="width: 100%;" class="fr-fic fr-dib"></h3><h3><br></h3><h3>🛠️ Installation</h3><p data-empty="true"><strong>Install via the <a href="https://github.com/cosmicjs/cosmic-cli">Cosmic CLI</a>:</strong></p><p data-empty="true"><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/963f07e0-a157-11e8-9655-7b6741a1d31d-ice_screenshot_20180816-081440.png" style="width: 468px;" class="fr-fic fr-dib"></p><p data-empty="true">I set up an example Bucket for this blog:</p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/f283fb90-a158-11e8-9655-7b6741a1d31d-ezgif-2-808c08e542.gif" style="width: 486px;" class="fr-fic fr-dib"></p><p><br></p><p>Run <code>cosmic -h</code> for a list of all commands. Run <code>cosmic [command] -h</code> for details on options for a specific command. You&#39;re now up and running with a <a href="https://cosmicjs.com/apps/todo-app" rel="noopener noreferrer" target="_blank">React ToDo App</a> that can be managed entirely from your Cosmic Bucket Dashboard and Command Line Terminal tool of choice.&nbsp;</p><h3>Conclusion</h3><p>I was able to easily install a <a href="https://cosmicjs.com/apps/todo-app" rel="noopener noreferrer" target="_blank">React ToDo App</a> using a headless CMS API that I can now use to manage dynamic content changes. When ditching the installed content management system and going API-first isn&#39;t quick enough, check out the <a href="https://cosmicjs.com/getting-started" rel="noopener noreferrer" target="_blank">Starter Apps</a> from Cosmic &nbsp;to get a project up and running in seconds. 🔥</p><p>If you have any comments or questions about building React 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>

QuickStart a ToDo App built on React, Redux, Node.js and Webpack

<h3>First, a little backstory</h3><p>When I began planning a new project for my portfolio slash blog website I knew I had several requirements. Some of which were server side rendering, ES6/ES7 transpilation, and a quick and non-complicated minifying process for builds. But lastly there
is also a need for a Content Management System (CMS) and I was tired of everyone suggesting WordPress.. So I went on a hunt to find my new favorite CMS. And the one requirement I had was for it to be code agnostic, meaning if I ever migrate my site to
a different technology or codebase I won&#39;t need to move all my content yet again.</p><h3><br></h3><h3>What is Cosmic?</h3><p><a href="https://cosmicjs.com/?ref=SJHUGTXvf" rel="noopener noreferrer" target="_blank">Cosmic&nbsp;</a>seemed to check all the boxes for me such as being code agnostic, while being cost friendly. You essentially pay for &quot;buckets&quot; which could
be compared to a single database. Afterwards you create object types within those buckets which can be compared to tables in a database. Your created object types then define the schema for all the objects inside, whether you need a Post object, Comment,
User, whatever you can come up with!</p><p>You design the schema of metadata they will hold and their relationship to other object types. This appealed to me very much and they have an awesome NodeJS API package which fit very nicely with my NuxtJS project.</p><h3><br></h3><h3>The Cosmic Interface</h3><p>One of the features that really makes Cosmic shine is their user interface to modify your content, objects, and object types. When building your object metadata schema you can do so within the interface very easily. However if you&#39;d prefer, you can
also do everything with the API instead. Below is a screenshot of a developer feature for adding metafields to an object type.</p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/e74ba850-b1f1-11e8-947c-331d4100aab6-cosmic-metafield.jpg" style="width: 300px;" class="fr-fic fr-dib"></p><p>The interface is non-developer friendly for content creators or editors. You can add multiple users to access your bucket and they have some great user role permission settings.</p><ul><li>Admin</li><li>Developer</li><li>Editor</li><li>Contributor</li></ul><p>These are very useful if you need to add additional developers, or simply someone that shouldn&#39;t see the developer features and only allowed to edit or create content. You basically get full access control over what&#39;s inside your bucket.</p><p>However, if your user does have access to the developer features they get to see a really cool toggle to switch between the different views for developer or editor.</p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/5e68a0b0-b1f1-11e8-8b38-214cff6444e1-cosmic-dev-toggle.jpg" style="width: 145px;" class="fr-fic fr-dib"></p><h3><br></h3><h3>Connecting your app to your data</h3><p>Cosmic makes accessing your data very simple which is a huge plus for me as it cuts down on development time and allows for more flexibility with how you integrate your data.</p><p>You have the option to make applications with dynamic routing which could build a webpage based on a &quot;pages&quot; object type, and different paths for a &quot;posts&quot; object type. You really have a lot of freedom to create whatever you can imagine. When you have a dynamic application, adding new content or modifying existing content becomes a breeze for both content creators and developers. Which is a common challenge in today&#39;s typical environment.</p><h4>Javascript API Example&nbsp;</h4><p>Here is a sample snippet for fetching a list of objects of a certain object type within your bucket.</p><pre>const Cosmic = require(&#39;cosmicjs&#39;)
const api = Cosmic()
// Specify your bucket
const bucket = api.bucket({
  slug: &#39;your-unique-bucket-id&#39;,
})

// Specify an Object Type
const data = (await bucket.getObjects({
  type: &#39;groomsmen&#39;,
  limit: 3
})).objects</pre><p>You can see more examples in the <a href="https://cosmicjs.com/docs?ref=SJHUGTXvf" rel="noopener noreferrer" target="_blank">Cosmic Documentation</a>.</p><h3><br></h3><h3>Ok, Here is the Developer Stand Point</h3><p>No software is perfect, I know. So what are the negatives to using something like Cosmic? What are the technical details surrounding Cosmic?</p><p>Well there is something called vendor lock-in which makes a customer dependent on a <strong>vendor</strong> for products and services, unable to use another <strong>vendor</strong> without substantial switching costs. While this is a factor it&#39;s minuscule compared to vendor lock-in with Microsoft&#39;s Azure, or Google cloud services (for example, because cosmic is much more than just a CMS).</p><p>I like the freedom cosmic gives you. You can pick and choose what services you want cosmic to provide you, since they do much more than allow you to just manage and store content. They can host and deploy your app, enhance your application with extensions,
and host cloud functions, such as AWS Lambda which is currently in beta.</p><h3><br></h3><h3>Why consider migrating your CMS?</h3><p>If you value any of the advantages I&#39;ve mentioned above I encourage you to create a <a href="https://cosmicjs.com/?ref=SJHUGTXvf" rel="noopener noreferrer" target="_blank">free trial with cosmicJS</a> and perhaps test out a proof of concept. From experience it&#39;s hard to find another CMS that compares with Cosmic for all that they provide. It&#39;s really a well-rounded service that has proven to work well with many technology stacks as being code-agnostic is very important for a content system in my opinion. So far I&#39;ve been really enjoying using Cosmic in my projects, and I&#39;ve said goodbye to WordPress a long time ago.</p><h3><br></h3><h3>Conclusion</h3><p>We welcome suggestions and submissions for new open-source projects. If you&#39;d like to contribute and join our Community, or 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>

Why to consider Cosmic as your next CMS

<p>In this blog we&#39;ll quickstart a <a href="https://cosmicjs.com/apps/cross-platform-blog" rel="noopener noreferrer" target="_blank">React Native Cross-Platform Blog</a> using the Cosmic CLI. This app is three apps in one: &nbsp;Web, iOS and Android app all with content powered by Cosmic. &nbsp;Go to the <a href="https://github.com/cosmicjs/cross-platform-blog" target="_blank">GitHub repo</a> to see the iOS and Android app share the same React Native codebase which cuts dev time in half. The web version runs on a light Node.js server, all with content served from the <a href="https://cosmicjs.com/" rel="nofollow">Cosmic CMS API</a>. Create your content once, deliver everywhere.</p><h3 name="508e">TL;DR:</h3><p><a href="https://cosmicjs.com/apps/cross-platform-blog" rel="noopener noreferrer" target="_blank">React Native Cross-Platform Blog Page</a><br><a href="https://cosmicjs.com/apps/cross-platform-blog/demo" rel="noopener noreferrer" target="_blank">React Native Cross-Platform Blog Demo</a><br><a href="https://github.com/cosmicjs/cross-platform-blog-web" rel="noopener noreferrer" target="_blank">React Native Cross-Platform Blog Codebase</a><br><a href="https://cosmicjs.com/knowledge-base/react-native-cms" rel="noopener noreferrer" target="_blank">React Native Knowledge Base</a></p><p><br></p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/77bd5880-9f5e-11e8-8292-499bb23480f7-14480e80-89a3-11e6-bed6-65a0e6114816-cross-platform-blog.gif" style="width: 100%;" class="fr-fic fr-dib"></p><p><br></p><h3>React Native Cross-Platform Blog Features:</h3><ol><li>Native iOS and Android apps share the same React Native codebase. Learn once, write anywhere<sup>TM</sup>.</li><li>Web is fully responsive down to mobile w/ <a href="http://getbootstrap.com/" rel="nofollow">Bootstrap</a> frontend.</li><li>Images are easily manipulated for different device / browser requirements via the Cosmic provided <a href="https://www.imgix.com/" rel="nofollow">Imgix</a> integration.</li></ol><p>Cosmic is an API-first content management platform that makes it easy to add content to any existing or new application. Developers get a suite of powerful APIs while content managers manage content in a familiar cloud-based content editor.&nbsp;</p><p><br></p><p name="508e"><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/9ec359e0-9fc0-11e8-9cd3-a30de3fdcc73-ezgif-2-e993b2504d.gif" style="width: 562px;" class="fr-fic fr-dib"></p><h3 name="9b20"><br></h3><h3 name="9b20">QuickStart a React Native Cross-Platform Blog using a CMS API</h3><p name="4c02"><a href="https://cosmicjs.com" rel="noopener noreferrer" target="_blank">Cosmic</a> is an example of a robust headless CMS and API that&#39;s promoting collaboration on cross-functional teams to build apps faster. Get started building Cosmic-powered apps in seconds 🚀 We have <a data-href="https://github.com/cosmicjs/node-starter" href="https://github.com/cosmicjs/node-starter" rel="noopener" target="_blank">Node.js</a>, <a data-href="https://github.com/cosmicjs/react-starter" href="https://github.com/cosmicjs/react-starter" rel="noopener" target="_blank">React</a>, <a data-href="https://github.com/cosmicjs/vue-starter" href="https://github.com/cosmicjs/vue-starter" rel="noopener" target="_blank">Vue</a>, <a data-href="https://github.com/cosmicjs/gatsby-starter" href="https://github.com/cosmicjs/gatsby-starter" rel="noopener" target="_blank">Gatsby</a> and <a data-href="https://github.com/cosmicjs/serverless-starter" href="https://github.com/cosmicjs/serverless-starter" rel="noopener" target="_blank">Serverless</a> Starters to help you get your project started quickly. There are over 70 app examples available in the <a href="https://cosmicjs.com/apps" rel="noopener noreferrer" target="_blank">Cosmic Apps Marketplace</a> to speed up your project as well. Today we&#39;ll be using the <a href="https://github.com/cosmicjs/cosmic-cli" rel="noopener noreferrer" target="_blank">Cosmic CLI</a> to quickstart a <a href="https://cosmicjs.com/apps/cross-platform-blog" rel="noopener noreferrer" target="_blank">React Native Cross-Platform Blog</a>.</p><p><br></p><h3>🛠️ Installation</h3><p data-empty="true"><strong>Install via the <a href="https://github.com/cosmicjs/cosmic-cli">Cosmic CLI</a>:</strong></p><p data-empty="true"><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/d3cab6e0-9f5e-11e8-b82e-c16ae3d51885-ice_screenshot_20180813-200428.png" style="width: 533px;" class="fr-fic fr-dib"></p><p data-empty="true">I set up an example Bucket for this blog:</p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/9cbb4bf0-9f5f-11e8-a29d-af80f5466c46-ezgif-2-09918db312.gif" style="width: 525px;" class="fr-fic fr-dib"></p><p><br></p><p>Run <code>cosmic -h</code> for a list of all commands. Run <code>cosmic [command] -h</code> for details on options for a specific command. You&#39;re now up and running with a <a href="https://cosmicjs.com/apps/cross-platform-blog" rel="noopener noreferrer" target="_blank">React Native Cross-Platform Blog</a> that can be managed entirely from your Cosmic Bucket Dashboard and Command Line Terminal tool of choice.&nbsp;</p><h3><br></h3><h3>Conclusion</h3><p>I was able to easily install a <a href="https://cosmicjs.com/apps/cross-platform-blog" rel="noopener noreferrer" target="_blank">React Native Cross-Platform Blog</a> using a headless CMS API that I can now use to manage dynamic content changes. When ditching the installed content management system and going API-first isn&#39;t quick enough, check out the <a href="https://cosmicjs.com/getting-started" rel="noopener noreferrer" target="_blank">Starter Apps</a> from Cosmic &nbsp;to get a project up and running in seconds. 🔥</p><p>If you have any comments or questions about building ReactNative 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>

QuickStart a React Native Cross-Platform Blog using a CMS API

<p>Cosmic is an API-first content management platform that makes it easy to add content to any existing or new application. Developers get a suite of powerful APIs while content managers manage content in a familiar cloud-based content editor. To demonstrate how easy it is to get started with Cosmic, we&#39;ll utilize the <a href="https://github.com/cosmicjs/cosmic-cli" rel="noopener noreferrer" target="_blank">Cosmic CLI</a> to quickstart an <a href="https://cosmicjs.com/apps/ecommerce-app" rel="noopener noreferrer" target="_blank">Angular Ecommerce App</a>.&nbsp;</p><p>This <a href="https://cosmicjs.com/apps/ecommerce-app" rel="noopener noreferrer" target="_blank">Angular ecommerce app</a> allows you to process orders from customers and accept Stripe payments for goods and services. &nbsp;Manage inventory in your Cosmic Dashboard or in the admin area on the website. You can even subsequently deploy the app to Cosmic, Zeit, Heroku or Netlify.&nbsp;</p><p><br></p><h3 name="508e">TL;DR:</h3><p><a href="https://cosmicjs.com/apps/ecommerce-app" rel="noopener noreferrer" target="_blank">Angular Ecommerce App Page</a><br><a href="https://cosmicjs.com/apps/ecommerce-app/demo" rel="noopener noreferrer" target="_blank">Angular Ecommerce &nbsp;App Demo</a><br><a href="https://github.com/cosmicjs/ecommerce-app" rel="noopener noreferrer" target="_blank">Angular Ecommerce App Codebase</a><br><a href="https://cosmicjs.com/knowledge-base/angularjs-cms" rel="noopener noreferrer" target="_blank">Angular Knowledge Base</a><br><a href="https://cosmicjs.com/articles?q=angular" rel="noopener noreferrer" target="_blank">Developer Articles: Angular &nbsp;</a><br><a href="https://cosmicjs.com/docs" rel="noopener noreferrer" target="_blank">Developer Docs</a></p><p><br></p><p name="508e"><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/9e655640-9f0e-11e8-87ba-171a2d010821-1*HRen3I2tbVYW0LfohG5UUA.png" style="width: 100%;" class="fr-fic fr-dib"></p><h3 name="9b20"><br></h3><h3 name="9b20">QuickStart an Angular Ecommerce App using a Headless CMS API</h3><p name="4c02"><a href="https://cosmicjs.com" rel="noopener noreferrer" target="_blank">Cosmic</a> is an example of a robust headless CMS and API that&#39;s promoting collaboration on cross-functional teams to build apps faster. Get started building Cosmic-powered apps in seconds 🚀 We have <a data-href="https://github.com/cosmicjs/node-starter" href="https://github.com/cosmicjs/node-starter" rel="noopener" target="_blank">Node.js</a>, <a data-href="https://github.com/cosmicjs/react-starter" href="https://github.com/cosmicjs/react-starter" rel="noopener" target="_blank">React</a>, <a data-href="https://github.com/cosmicjs/vue-starter" href="https://github.com/cosmicjs/vue-starter" rel="noopener" target="_blank">Vue</a>, <a data-href="https://github.com/cosmicjs/gatsby-starter" href="https://github.com/cosmicjs/gatsby-starter" rel="noopener" target="_blank">Gatsby</a> and <a data-href="https://github.com/cosmicjs/serverless-starter" href="https://github.com/cosmicjs/serverless-starter" rel="noopener" target="_blank">Serverless</a> Starters to help you get your project started quickly. There are over 70 app examples available in the <a href="https://cosmicjs.com/apps" rel="noopener noreferrer" target="_blank">Cosmic Apps Marketplace</a> to speed up your project as well. Today we&#39;ll be using the <a href="https://github.com/cosmicjs/cosmic-cli" rel="noopener noreferrer" target="_blank">Cosmic CLI</a> to quickstart a <a href="https://cosmicjs.com/apps/ecommerce-app" rel="noopener noreferrer" target="_blank">Angular Ecommerce App</a>.</p><p><br></p><h3>🛠️ Installation</h3><p data-empty="true"><strong>Install via the <a href="https://github.com/cosmicjs/cosmic-cli">Cosmic CLI</a>:</strong></p><p data-empty="true"><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/6d5b7700-9eff-11e8-a70c-81cfdbcf46ed-ice_screenshot_20180813-084414.png" style="width: 522px;" class="fr-fic fr-dib"></p><p data-empty="true">I set up an example Bucket for this blog:</p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/5e4dbf10-9f00-11e8-bba4-6740ed1c934c-ezgif-2-a3f503fcae.gif" style="width: 514px;" class="fr-fic fr-dib"></p><p><br></p><p>Run <code>cosmic -h</code> for a list of all commands. Run <code>cosmic [command] -h</code> for details on options for a specific command. You&#39;re now up and running with an <a href="https://cosmicjs.com/apps/ecommerce-app" rel="noopener noreferrer" target="_blank">Angular Ecommerce App</a> that can be managed entirely from your Cosmic Bucket Dashboard and Command Line Terminal tool of choice.&nbsp;</p><h3><br></h3><h3>Conclusion</h3><p>I was able to easily install an <a href="https://cosmicjs.com/apps/ecommerce-app" rel="noopener noreferrer" target="_blank">Angular Ecommerce App</a> using a headless CMS API that I can now use to manage dynamic content changes. When ditching the installed content management system and going API-first isn&#39;t quick enough, check out the <a href="https://cosmicjs.com/getting-started" rel="noopener noreferrer" target="_blank">Starter Apps</a> from Cosmic &nbsp;to get a project up and running in seconds. 🔥</p><p>If you have any comments or questions about building Angular 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>

Start building today