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

QuickStart an Angular Ecommerce App using a Headless CMS API

Using Cosmic and Zapier to integrate your content across the Web

<p><a href="https://cosmicjs.com" rel="noopener noreferrer" target="_blank">Cosmic</a> offers a headless CMS that 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 ends up saving time in the process. Our community just debuted a new music application that we&#39;ll use today for our demo.&nbsp;</p><p name="508e">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 a <a href="https://cosmicjs.com/apps/vue-music-website" rel="noopener noreferrer" target="_blank">Vue.js Music App</a>. This Music website was built using Vue, Nuxt and Cosmic. Users can upload and play tracks, upload and manage album art plus leave comments. It will be locally downloaded to your command line tool and available to connect with your Cosmic Bucket Dashboard.&nbsp;</p><p name="508e"><br></p><h3 name="508e">TL;DR:</h3><p><a href="https://cosmicjs.com/apps/vue-music-website" rel="noopener noreferrer" target="_blank">Vue.js Music App Page</a><br><a href="https://cosmicjs.com/apps/vue-music-website/demo" rel="noopener noreferrer" target="_blank">Vue.js Music App Demo</a><br><a href="https://github.com/cosmicjs/vue-music-website" rel="noopener noreferrer" target="_blank">Vue.js Music App Codebase</a><br><a href="https://cosmicjs.com/knowledge-base/vuejs-cms" rel="noopener noreferrer" target="_blank">Vue.js Knowledge Base</a><br><a href="https://cosmicjs.com/articles?q=vue" rel="noopener noreferrer" target="_blank">Developer Articles: Vue.js</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/1b2d61a0-9a45-11e8-9045-abb08b85fa95-ezgif-2-f776e9c183.gif" style="width: 100%;" class="fr-fic fr-dib"></p><h3 name="9b20"><br></h3><h3 name="9b20">QuickStart a Vue.js Music App using an API-first 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 Cosmic Apps Marketplace 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/vue-music-website" rel="noopener noreferrer" target="_blank">Vue.js Music 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/87a41ae0-9a45-11e8-9045-abb08b85fa95-ice_screenshot_20180807-082626.png" style="width: 540px;" 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/1102bb20-9a46-11e8-a4e3-b395642894b6-ezgif-2-3fa37afce2.gif" style="width: 524px;" 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/vue-music-website" rel="noopener noreferrer" target="_blank">Vue.js Music App</a> that can be managed entirely from your Cosmic Bucket Dashboard and Command Line Terminal tool of choice.&nbsp;</p><p><br></p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/46f7bff0-9a46-11e8-9045-abb08b85fa95-d9c61b60-99a6-11e8-9ab8-332a6e6175ae-vue-music-website-guitar.jpg" style="width: 100%;" class="fr-fic fr-dib"></p><h3>Conclusion</h3><p>I was able to easily install a <a href="https://cosmicjs.com/apps/vue-music-website" rel="noopener noreferrer" target="_blank">Vue.js Music 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 Vue 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 Vue.js Music App Using an API-first CMS

<p><strong><span style="font-size: 24px;">TL;DR</span></strong><br><a href="https://github.com/cosmicjs/twitter-extension" rel="noopener noreferrer" target="_blank"></a><a href="https://cosmicjs.com/extensions/twitter-search" rel="noopener noreferrer" target="_blank">Install the Twitter Search Extension</a><br><a href="https://github.com/cosmicjs/twitter-extension" rel="noopener noreferrer" target="_blank">View Source Code</a></p><p><br></p><p><span style="font-size: 18px;"><strong>Intro</strong></span></p><p>In this article, we will walk through how to build a <a href="https://cosmicjs.com/extensions">Cosmic Extension</a> that can search and embed a Twitter timeline in our dashboard, and save selected Tweets from the timeline to our Bucket. &nbsp;We will utilize a couple of Twitter APIs to build our customized Twitter search API for our extension. This Cosmic Extension greatly simplifies the workflow for developers who need to embed Tweets into their websites based on dynamic Twitter search queries.</p><p><br></p><p><span style="font-size: 18px;"><strong>Get Twitter consumer key and consumer secret&nbsp;</strong></span></p><p>To be able to use the Twitter APIs, we need to have a copy of Twitter consumer key and consumer secret. To retrieve these, log into your Twitter account, then go to apps.twitter.com and apply for a developer account.</p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/312f2f60-96d0-11e8-93c9-0d7cfa50638b-Screen Shot 2018-08-02 at 8.47.27 PM.png" style="width: 100%;" class="fr-fic fr-dib fr-fil"></p><p>After getting approval from Twitter, create a new application in your developer account and fill out this form:</p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/baa49680-96d1-11e8-b52d-e18492f8c75e-Screen Shot 2018-08-02 at 8.59.26 PM.png" style="width: 100%;" class="fr-fic fr-dib fr-fil"></p><p>Next, Twitter will generate your consumer key and secret which are displayed under &#39;Details&#39; tab. Keep these since we will use them to implement our own search API.&nbsp;</p><p><br></p><p><span style="font-size: 18px;"><strong>Implement Twitter Authentication&nbsp;</strong></span></p><p>Anyone who uses our Cosmic Twitter Extension needs to sign in Twitter to be authenticated. Twitter uses oAuth 1.0 for authentication and authorization. Our extension redirects our users to a Twitter sign in and consent popup page. Upon our users&#39;
successful login to Twitter and consenting Cosmic to send Twitter APIs on their behalf, users will be returned to the dashboard and able to perform Twitter search. &nbsp; &nbsp;&nbsp;</p><p><br></p><p><span style="font-size: 18px;"><strong>Develop our customized Twitter search API</strong></span></p><p>As we mentioned above, Twitter does not provide an API for searching and embedding search results. We will develop our own customized API by using the combination of two APIs provided by Twitter. The two Twitter APIs that will become our building blocks are:</p><p>1, Twitter search API that gets a list of relevant Tweets matching a search query, in JSON.</p><p>Example from Twitter API documentation: &nbsp;</p><div class="fr-embedly      " data-original-embed="<a href='https://gist.github.com/chunan16/2fc4770af32bf2c0610dd71ba226abcf.js' class='embedly-card'></a>"><a href="https://gist.github.com/chunan16/2fc4770af32bf2c0610dd71ba226abcf.js" class="embedly-card"></a></div><p>2, API for getting the HTML of a Tweet given its author and Tweet ID, ready to be embedded on a website.&nbsp;</p><p>Example from Twitter documentation:&nbsp;</p><p>&nbsp;</p><div class="fr-embedly      " data-original-embed="<a href='https://gist.github.com/chunan16/602b7a6ffca05727be37ede2fe09fbf1.js' class='embedly-card'></a>"><a href="https://gist.github.com/chunan16/602b7a6ffca05727be37ede2fe09fbf1.js" class="embedly-card"></a></div><p>The basic idea is to use the Twitter search API to get a list of Tweets in JSON. The results return from the Twitter search API does not contain the HTML of the Tweets, so we cannot directly embed the search results into Cosmic. This is where the second
Twitter API comes into play. For each Tweet returned from the first API, we extract its author ID and Tweet ID, and use these information to invoke the second API to get its HTML. Here is the code:&nbsp;</p><div class="fr-embedly           " data-original-embed="<a href='https://gist.github.com/chunan16/83c9e976b3c002ddd80dd9d60ffa178f' class='embedly-card'></a>"><a href="https://gist.github.com/chunan16/83c9e976b3c002ddd80dd9d60ffa178f" class="embedly-card"></a></div><p><br></p><p>The rest is straightforward. We can now invoke our own search API from the browser and embed the results that are just a list of HTML blocks in Cosmic. A Tweet Object only has one Metafield which is &ldquo;html-textarea&rdquo; type. Invoke the relevant
Cosmic APIs to add or delete Tweet Object Type and Tweet Objects in Cosmic dashboard. If you have any doubts of how to use the Cosmic APIs, please check out the Cosmic API documentation.&nbsp;</p><p data-empty="true"><strong>Conclusion</strong><br>I hope you found this tutorial helpful in demonstrating how Cosmic Extensions allow you to extend the power of your Cosmic Bucket and communicate with third-party APIs like Twitter. Join the conversation on <a href="https://cosmicjs.com/community" rel="noopener noreferrer" target="_blank">the Cosmic Slack channel</a> and <a href="http://twitter.com/cosmic_js" rel="noopener noreferrer" target="_blank">reach out to Cosmic on Twitter</a>.</p>

Enabling Twitter Search in Cosmic

<p name="508e"><a href="https://cosmicjs.com" rel="noopener noreferrer" target="_blank">Cosmic</a> offers a headless CMS that 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 ends up saving time in the process.&nbsp;</p><p name="508e">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 a <a href="https://cosmicjs.com/apps/react-auth-app" rel="noopener noreferrer" target="_blank">React Auth App</a>. &nbsp;This app shows implementation of Authentication in ReactJS, NextJS and NodeJS using the Cosmic API. This app has all the basic modules like signin, signup, view/edit profile, forgot password and reset password. It will be locally downloaded to your command line tool and available to connect with your Cosmic Bucket Dashboard.&nbsp;</p><p name="508e"><br></p><h3 name="508e">TL;DR:</h3><p><a href="https://cosmicjs.com/apps/react-auth-app" rel="noopener noreferrer" target="_blank">React Auth App Page</a><br><a href="https://cosmicjs.com/apps/react-auth-app/demo" rel="noopener noreferrer" target="_blank">React Auth App Demo</a><br><a href="https://github.com/cosmicjs/react-auth-app" rel="noopener noreferrer" target="_blank">React Auth App Codebase</a><br><a href="https://cosmicjs.com/knowledge-base/react-cms" rel="noopener noreferrer" target="_blank">React Knowledge Base</a><br><a href="https://cosmicjs.com/articles?q=react" rel="noopener noreferrer" target="_blank">Developer Articles: React</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/d6300290-9654-11e8-9802-396fa6cd57fb-ezgif-2-e963d23a81.gif" style="width: 475px;" class="fr-fic fr-dib"></p><h3 name="9b20"><br></h3><h3 name="9b20">QuickStart a React Auth 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 Cosmic Apps Marketplace 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/react-auth-app" rel="noopener noreferrer" target="_blank">React Auth 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/c31b2c30-9653-11e8-ab08-31f1ed4cd97d-ice_screenshot_20180802-075815.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/5e09d790-9655-11e8-a2fb-7b36f69e10f5-ezgif-2-5f23e20a52.gif" style="width: 527px;" 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/react-auth-app" rel="noopener noreferrer" target="_blank">React Auth App</a> that can be managed entirely from your Cosmic Bucket Dashboard and Command Line Terminal tool of choice.&nbsp;</p><p><br></p><h3>Conclusion</h3><p>I was able to easily install a <a href="https://cosmicjs.com/apps/react-auth-app" rel="noopener noreferrer" target="_blank">React Auth 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>

Start building today