{"objects":[{"_id":"636beebc3b7d06000971c644","slug":"stefan-kudla","title":"Stefan Kudla","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"BgFHSqrFnd","value":""},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"trUgJkN1Br","value":"b7993e30-605a-11ed-b192-abbbbb9eecea-avatar4.png","url":"https://cdn.cosmicjs.com/b7993e30-605a-11ed-b192-abbbbb9eecea-avatar4.png","imgix_url":"https://imgix.cosmicjs.com/b7993e30-605a-11ed-b192-abbbbb9eecea-avatar4.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2022-11-09T18:17:32.738Z","created_at":"2022-11-09T18:17:32.738Z","modified_at":"2022-11-09T18:18:15.113Z","status":"published","locale":null,"published_at":"2022-11-09T18:18:15.113Z","modified_by":"6321e6074fd8b200090bb00c","thumbnail":"https://imgix.cosmicjs.com/b7993e30-605a-11ed-b192-abbbbb9eecea-avatar4.png","publish_at":null,"unpublish_at":null,"metadata":{"username":"","profile_picture":{"url":"https://cdn.cosmicjs.com/b7993e30-605a-11ed-b192-abbbbb9eecea-avatar4.png","imgix_url":"https://imgix.cosmicjs.com/b7993e30-605a-11ed-b192-abbbbb9eecea-avatar4.png"}}},{"_id":"5aeb153759f8ac161a344eb5","bucket":"538a0d0f8ceb85ee75000001","slug":"google-analytics-view-id","title":"Google Analytics View ID","content":"","metafields":[{"key":"view_id","title":"View ID","type":"text","value":"93811727"}],"type_slug":"analytics","created":"2018-05-03T13:57:11.868Z","created_at":"2018-05-03T13:57:11.868Z","order":null,"metadata":{"view_id":"93811727"}},{"_id":"5fdcc6beabe43100078a215b","slug":"headless-cms","title":"Headless CMS explained in a few minutes","content":"

\"headless

A headless CMS uses API data to display content on a custom frontend.


What is a headless CMS?

A headless CMS is a content management system in which the content (the “body”) is separated or decoupled from where the content is presented (the “head”). Content is created using a dashboard and content is delivered using an API. By exposing an API to deliver content, a headless CMS does not restrict content to a single connected frontend “head” but rather enables content to be delivered to any number\r\nof websites or apps.

What does "headless" mean?

The term "headless" refers to headless software in which a system comes without a frontend piece of the architecture, resulting in an increased level of flexibility. A CMS can be considered headless when it comes without the frontend presentation “head” (usullay a website), and only provides a dashboard to create content and an API to deliver the content. This enables the flexibility of the content to be delivered to multiple frontend “head”s, regardless of their use case or underlying technology.

How does a headless CMS work?

A headless CMS is comprised of a content creation dashboard and a content delivery API.

1. Content creation dashboard
The headless CMS dashboard interface enables teams to collaborate around content creation. Either a hosted service, or self-hosted application, it provides an interface to manage content, upload media assets, and create publishing workflows.

2. Content delivery API
The headless CMS API enables developers to deliver content to any website or app. This is where headless CMS makes a compelling case for teams that want more flexibility in their content delivery. Instead of being locked into a rigid coupled frontend,\r\na headless CMS enables content to be freely deliverd to any location.

What is an API?

An API (application programming interface) is the way internet-connected services communicate with one another over a network. It uses HTTP endpoints which provide a dataset (commonly JSON) to be consumed or updated. Some examples of API protocols include legacy methods like SOAP and RSS, as well as more modern approaches like REST and GraphQL. (Explore a fun RESTful API)

How does headless CMS use an API?
A headless CMS provides an API to deliver content to frontend applications. By providing an API layer, the headless CMS ensures that the content can be delivered to any website or application. This is in contrast to a traditional CMS which locks you into\r\na single frontend website.

Headless CMS vs traditional CMS

Traditional CMSs (WordPress, Drupal, etc.) were developed in a time (early 2000s) when content only needed to be managed for a single website. They commonly came with open source code that a developer could install and run on a server. Along with the\r\ninstallation, came the continued maintenance of a content and user management database, server side codebase, media management, and more. After configuring and maintaining the CMS, without an API, there was usually only one place the content could go:\r\nto a single website.

\"Traditional

A traditional CMS keeps content locked into a single website.

Changing landscape
The digital landscape has changed a lot since the early 2000s. With the proliferation of internet-connected devices (mobile, AR/VR, IoT, etc.) companies are needing content to be delivered at scale with more control and flexibility. Companies with content\r\nlocked in a traditional CMS are finding themselves locked in and left behind.

Enter headless CMS
By using a headless CMS, companies can write their content once and deliver it anywhere. Their content is no longer locked into a single website, it can now be freely delivered to any website or app, building relationships with customers wherever they\r\nare. Plus content is future-ready to meet customers in any new emergent digital location.

\"Headless

A headless CMS frees content to be deployed to any website or app.



Traditional CMSHeadless CMS
TechnologyMonolithic, hosted and maintained by youBest-in-class services, hosted and maintained for you
ScalabilityLimited, one-to-oneLimitless, one-to-many
SecuritySelf-managedManaged for you
WorkflowWaterfallAgile
Developer ExperienceLocked in frontendFlexible, bring your own frontend


What about decoupled CMS?
A decoupled CMS is a traditional CMS that includes a connected frontend but also includes an API that can be used to deliver content to other websites or apps. This is more of a hybrid model that, with a self-hosted CMS, still comes with the responsibility\r\nto maintain the CMS infrastructure.

Why use a headless CMS?

Many teams are choosing to use a headless CMS because it affords them considerable time and cost savings. By avoiding the pain and time spent building and maintaining their own CMS, teams are able to focus on what really matters: building great content\r\nand user experiences.

Benefits of a headless CMS

Some benefits of a headless CMS include:

  1. Less infrastructure for developers to maintain
  2. Increased collaboration between developers and content creators
  3. Content scalability: write once, deploy anywhere
  4. Enhanced security
  5. Optimization out-of-the-box

Is headless CMS the right choice for my project?

If you answer yes to any one or a few of these questions, a headless CMS may be the right choice for you.

As a developer

  1. Are you building a website or app that requires content management using an intuitive dashboard interface?
  2. Would you rather avoid building and maintaining your own CMS infrastructure and simply "plug in" to a CMS that has flexible content modeling, global CDN caching, asset management, and image optimization?
  3. Do you want the freedom to build your application using the tools that you want to use, and not one required by a CMS?
  4. Do you want to store your content in a universal JSON format, future-proofing your application for any frontend technology changes?

As a content creator

  1. Do you want to manage content in an easy-to-use dashboard interface?
  2. Do you have developers on your team that can help you set up content models and integrate the content into your website or app?
  3. Do you want to work in parallel with your developers to build content-powered projects faster?

As a business owner or company

  1. Do you have both developers and content creators on your team that want powerful API tools, the freedom to choose their own tech stack, and an easy-to-use dashboard for creating content?
  2. Do you want to avoid the pain, time consumption, and tech debt that comes with managing your own CMS infrastructure? Would you rather outsource this service to a dedicated company focused on optimizing this part of your business?
  3. Do you need content that can be delivered to multiple locations? (Website, app, microsites, automation workflows, etc?)
  4. Do you want the convenience of one login to manage multiple projects with granular user roles and permissions for your team?

Headless CMS use cases

Some common use cases for headless CMS include websites, blogs, mobile apps, and ecommerce. Learn more about companies using a headless CMS to drive their project and business goals.

Cosmic headless CMS

As one of the longest-running headless CMS solutions on the market, Cosmic has played a big role in the evolution of content management into the era of headless CMS. Cosmic is committed to providing the best tools for developers, content creators, and\r\nteam leaders to facilitate highly effective project collaboration.

For developers
Cosmic provides developers with powerful tools to build content-driven applications. Leave the infrastructure behind and get started in minutes with Cosmic’s powerful API tools and resources. Read the Cosmic documentation.

For content creators
Cosmic is not just built for developers, content creators will find Cosmic’s approach to the content creation process intuitive and delightful. Browse content creation features.

For team leaders
Business goals move faster when content moves faster. By giving each team member what they need to succeed, Cosmic facilitates efficient team collaboration. Projects are built faster and shipped to customers sooner. The end result is customers can engage with your company faster and with an optimized content experience on a global scale. Contact us to get a custom quote for your project.

","metafields":[{"children":null,"type":"text","title":"SEO Title (H1)","key":"seo_title","id":"PlfISy81oX","value":"Headless CMS explained in a few minutes"},{"children":null,"type":"text","title":"Subheadline","key":"subheadline","id":"QIfuZriJHY","value":"Learn what a headless CMS is, how it differs from a traditional CMS, its benefits, use cases, and if it is the right choice for your project."},{"children":null,"type":"textarea","title":"SEO Description","key":"seo_description","id":"wdPtKIPWNQ","value":"Learn what a headless CMS is, how it differs from a traditional CMS, its benefits, use cases, and if it is the right choice for your project."}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"pages","created":"2020-12-18T15:11:58.420Z","created_at":"2020-12-18T15:11:58.420Z","modified_at":"2022-09-14T00:55:47.394Z","status":"published","locale":null,"modified_by":"5357ef811693be2118000001","thumbnail":"https://imgix.cosmicjs.com/c60612d0-2e33-11ed-bac3-370838fb3053-headless-cms.png","publish_at":null,"published_at":"2022-09-14T00:55:47.394Z","unpublish_at":null,"metadata":{"seo_title":"Headless CMS explained in a few minutes","subheadline":"Learn what a headless CMS is, how it differs from a traditional CMS, its benefits, use cases, and if it is the right choice for your project.","seo_description":"Learn what a headless CMS is, how it differs from a traditional CMS, its benefits, use cases, and if it is the right choice for your project."}},{"_id":"632e0c02b0377d000920d46a","slug":"react-cms-landing-page","title":"React CMS","content":"

\"React

A headless CMS uses API data to display content on a custom frontend.


What is React?

\"React

React (or ReactJS, React.js) is a JavaScript library for building user interfaces. It enables you\r\nto build robustly dynamic single-page web applications  by using a component-based architecture, purposed for greater code reusability.

React can also render on the server-side using Node.js, or on mobile apps (compilation) using React Native. Originally developed at Facebook, it\r\nis under active development by employees at Facebook and the open source community.


What is a CMS?

React only provides the “front-end” user interface (UI), handling the visual presentation of an application’s content. React applications must be complemented with a compatible “back-end” database to store and retrieve content;\r\nfurther, that data source needs a way to be managed. This data storage and management demands the need for a content management system (CMS).


What is a React CMS?

To provide content to a React CMS application, data for the React application is served either: 

\"CosmicA React CMS is created when a React UI is integrated with a CMS to handle content. To communicate with React, a CMS must offer a compatible application programming interface (API). For example, using an NPM module.

A headless CMS can be used as a flexible data source for your React application to supply content to any or all of: client-side, server-side, or during compilation. Compilation refers to the build process commonly known as static website approach, which deploys pre-rendered web pages to a static website hosting provider. Common JavaScript framework choices for a static website generator using React include: Next.js, Gatsby, and Astro.


Why use a headless CMS as a React CMS?

\"Headless

Using an API, a headless CMS can deliver content to any number of frontends. 

Using a headless CMS for your React application eliminates cumbersome layers of technological setup and maintenance from your React CMS that are necessary for coupled and decoupled CMS systems, e.g. : WordPress, Drupal, Joomla, Shopify, Magento, etc.\r\nHeadless CMS data is accessible and extensible, providing future-proofed delivery via API to any destination. This circumvents investing in CMS infrastructure maintenance, allowing development focus to be on presentation and application business logic.


React headless CMS content components
\"React

A headless CMS like Cosmic natively facilitates React’s component-based JavaScript architecture. React components integrate with Cosmic’s content model, supporting JSON data Objects, Metafields, and Object Relationships, facilitating creation of reusable React CMS components. This native JavaScript component synchronicity with React\r\nmakes Cosmic headless CMS ideal to facilitate any React application’s content needs.


React CMS Data Compatibility and Accessibility

Using available API tools like our REST, GraphQL, or Cosmic NPM module empower developers to create powerful user experiences using Cosmic as the React CMS.


What to consider when choosing a React headless CMS

When choosing a headless CMS for React, one must take into consideration the headless CMS’s adequacy to serve as a React CMS: \"Intuitive


React CMS’s ease-of-use

When choosing any content management system as your React CMS, it’s essential to consider the experience for both the developer and the content creator. The goal of a CMS is to deliver an easy-to-use dashboard for content creators, while giving\r\nthe developers comprehensive integration tools. A headless CMS, by definition, is only focused on these two experiences, and not on the presentation layer.

The Cosmic content management dashboard and APIs have simplified convoluted and repetitious procedures, and circumvented common issues. For this, it is being described among developers and content creators as “it doesn’t get much easier”.\r\nPowerful API design and tooling is available for developers, complemented by a coherent management dashboard for content creators.


Availability of React CMS Server

The most important factor of any reliable network-based React CMS application is its availability, or uptime. Without a reliable headless CMS foundation, access to the React CMS application will be impossible, inconsistent, or otherwise unstable.


Performance and speed of React headless CMS

Cosmic headless CMS serves content within the best performance recommendations of under 600 milliseconds as advocated by Google. Compliance with this best performance recommendation provides React CMS end-users the optimal user experience (UX), improving search engine optimization (SEO) and user retention.

\"GlobalCosmic headless CMS integration with React creates a React CMS that stores and delivers\r\ncontent within milliseconds powered by our global CDNs. This time is assured by reliance upon Cosmic’s global network of best-in-class headless CMS servers that consistently ensure minimal latency (response time) as your React CMS.


Security for React CMS

\"SecurityHeadless CMS data is securely delivered\r\nby the Cosmic APIs within industry standard 256-bit SSL encryption in transit and in storage in our global data centers. Additional security via two-factor authentication is also available for free. This industry standard level of security comes included\r\nwith all Cosmic accounts. 

In contrast, when using a coupled CMS system, you are responsible for providing these security features with none of the above security features included.


React CMS feature sets

To maximize React CMS workflow efficiency, Cosmic offers Webhooks, Localization, Revision History, Automatic Backups, and other headless CMS features. 


Customizability of React CMS

Cosmic's extensions facilitate specific headless React CMS needs with minimal effort. Expedite your React CMS experience with powerful pre-built headless CMS extensions that provide a range of time-saving augmentations.

\"ReactFor example, using the Algolia Search Extensionalong with Cosmic as your Headless React CMS, you can integrate powerful content search capabilities into your app. JavaScript (JS) photography galleries can be populated with the Unsplash Photos Extension, providing high-quality stock photography. Using the OneSignal Extension you can provide for automatic customer push notifications on newly published content. Along with pre-built Extensions, development teams have full control over building their own Extensions using React, or any other front-end technologies, to create powerful Headless CMS workflow capabilities.


Future-proof, extensible React CMS

The Cosmic APIs enable React CMS content to be delivered to any device using any programming language. This future-proofs content against any changes to technology or delivery location, ensuring ongoing support to preserve functionality with legacy code\r\n(backward compatibility).


React CMS interface: robust APIs

Cosmic accounts come with both REST and GraphQL APIs to deliver React CMS content. You can choose to connect directly to the API, or use a number of available clients for Node.js, PHP, Python, etc.

It’s our goal to get React CMS instances consistently available and high performing using our API. Our team is very active in providing your team the best tools to satisfy your goals.


Guidance of React CMS implementation

Complete, up-to-date React CMS guides and documentation are essential to being a developer-first solution. As developers ourselves, we continually focus on maintaining Cosmic headless CMS documentation to remain complete, accurate, and understandable.


Customer support for React CMS

\"CosmicCosmic prides itself on maintaining a synergistic\r\nteam of information technology (IT) professionals outputting greater than an ordinary IT support team of its size. We at Cosmic are always improving our core headless CMS product and suite of complementary React CMS services and resources to ensure we\r\nare at the forefront of competitive offerings in the headless React CMS industry.

Customer support from Cosmic is responsive to your headless CMS needs. We consistently provide product improvements by request for our users. Your team can consider us your outsourced content management team.

Cosmic headless CMS offers various support channels to communicate with customers:


React CMS community support

Community support is crucial to our headless CMS culture. Cosmic’s intention is to provide headless CMS resources that save time and money using our solution as your React CMS. To support and supplement this, Cosmic regularly publishes educational\r\nresources, open source libraries, example applications/boilerplates, extensions, hosts events, and more. Paid dedicated support is offered in either dedicated or enterprise support plans, each is optional with 24/7 technical assistance.


How to get started using Cosmic as your React headless CMS

  1. Create your free account with Cosmic.

  2. Browse and install one of our pre-built React CMS templates. You can view source code for the examples and also install demo content in your dashboard to learn about how to model content in Cosmic.

  3. Follow the React guide in the docs for simple step-by-step instructions to get up and running with a Cosmic-powered React app in minutes. Included below.

  4. Read the how-to articles in our community articles for React.



","metafields":[{"children":null,"type":"text","title":"SEO Title (H1)","key":"seo_title","id":"JYnvNQlfic","value":"React CMS"},{"children":null,"type":"text","title":"Subheadline","key":"subheadline","id":"lEyZQr5cJL","value":"Cosmic is a headless CMS that powers content for React websites and apps. Use our API tools to get started with Cosmic as your ideal React CMS."},{"children":null,"type":"textarea","title":"SEO Description","key":"seo_description","id":"GoL4gGN6dx","value":"Cosmic is a headless CMS that powers content for React websites and apps. Use our API tools to get started with Cosmic as your ideal React CMS."}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"pages","created":"2022-09-23T19:41:53.914Z","created_at":"2022-09-23T19:41:53.914Z","modified_at":"2022-09-23T19:49:15.821Z","status":"published","locale":null,"modified_by":"5357ef811693be2118000001","thumbnail":"https://imgix.cosmicjs.com/f3f8f6c0-3b77-11ed-931d-ddee6cce2845-react-cms.png","publish_at":null,"unpublish_at":null,"created_by":"5357ef811693be2118000001","published_at":"2022-09-23T19:49:15.821Z","metadata":{"seo_title":"React CMS","subheadline":"Cosmic is a headless CMS that powers content for React websites and apps. Use our API tools to get started with Cosmic as your ideal React CMS.","seo_description":"Cosmic is a headless CMS that powers content for React websites and apps. Use our API tools to get started with Cosmic as your ideal React CMS."}},{"_id":"634dc1311db488000947b3d1","slug":"image-cdn","title":"Image CDN explained in a few minutes","content":"

Images on the web are heavy. They make up the largest number of requests on a web page. Images that are not optimized by an image CDN on average yield a file size 40-80% larger than those using an image CDN.

An image CDN is a content delivery network designed specifically to store images and media files. Decreasing image payload, improving SEO ranking, and decreasing page load times are just a few reasons why you should consider using an image CDN to host\r\nimages for your website or application.

In this article, we’re going to cover the basic features of a content delivery network and further explain how the Cosmic image API and CDN solves the problem of delivering optimized images to users across the globe.

What is a content delivery network?

A content delivery network is a group of globally distributed servers that work together to serve internet content to users. They are spread out geographically so that wherever a user is in the world, they will receive the requested content from the server\r\nclosest to them. This speeds up webpage loading times so that users have an overall better experience within a data-driven website or application.

\"What

Consider you own a stock image platform for content creators. These content creators will visit the platform to look for images to use in their next video or article. Inevitably, content creators from all around the world will be browsing your platform\r\nto gather high-resolution images for their next piece. You want your servers to deliver the images to them as quickly as possible while they browse whether the user is based in San Francisco or Prague. A CDN provides the solution to deliver the images\r\nto both users quickly and efficiently, serving the images from the server which is geographically the closest to them.

The concept of delivery times revolves around the fact that this content is literally traveling through a wire. Your device is sending an electronic signal through the wire, requesting said content from one of the servers in the CDN, and the CDN is responding\r\nwith the content. The shorter the distance between the router or modem from which your device is connected, the faster that server will respond, which leads to happier long-time users on your platform.

What is an image CDN?

An image CDN is a content delivery network with a set of software features that optimize image files from upload to end-user delivery. An image CDN can cache images, detect the screen size of the device requesting an image, and reduce overall image file\r\nsize to increase user experience and decrease page load times.

Furthermore, using a powerful image CDN service like imgix allows you to make edits, crops, and adjustments to your images, turning static images into dynamic, responsive images that help sites and apps load faster. Picking the right image CDN can free up engineering resources and deliver an overall better user experience.

Why use an image CDN?

Aside from image optimization and user experience, using an image CDN increases website performance and reduces page load times. Faster page load times can lead to lower bounce rates, higher customer retention rates, and overall increased sales. Statistics show that a decrease of only one-tenth of a second increased conversion rates by 8.4% for retail sites and 10.1% for travel sites.

When it comes to mobile users, which account for more than half of overall web traffic, unoptimized images lead to even lower conversion rates. According to industry benchmarks, the bounce rate of a 1-second to 3-second page load increases by 32%, 1-second to 5-second increases by 90%, 1-second to 6-second increases by 106%, and 1-second to 10-second increases\r\nby 123%.

Considering that images tend to be the heaviest resource on a web page, using an image CDN will help deliver optimized and responsive images to users on every device, further speeding up page loads. Your page load time will be a make-or-break factor when\r\nit comes to increasing conversion rates and lowering bounce rates. Speed is revenue.

How does an image CDN work?

\"How

1. Upload

With a turn-key image CDN service, simply uploading a single image file is enough. The service is capable of handling and transforming the static image.

2. Store

Once uploaded, the file is cached to a globally distributed CDN. When a user first requests a file, an optimized image is created by the image CDN on the fly, and then caches the optimized version, providing faster content delivery to all users.

3. Transform

A modern image CDN comes with features to process and transform stored images. These include though are not limited to compression, formatting, text overlay, cropping, and blur. Features like these can be appended to the URL of an image:

Original URL: https://imgix.cosmicjs.com/14f4f800-48c1-11ed-a07b-05c6717a9348-sebastian-unrau-sp-p7uuT0tw-unsplash-1.jpg

Modified URL: https://imgix.cosmicjs.com/14f4f800-48c1-11ed-a07b-05c6717a9348-sebastian-unrau-sp-p7uuT0tw-unsplash-1.jpg?auto=compress,format

When using the modified URL above to add compression to and format the image, we see a 93.3% reduction in file size.

\"The

The first image is the original with a file size of 3.3MB. The second image has been compressed and formatted, resulting in a file size of 1.2MB.

4. Serve

An image CDN caches your image in many servers all around the globe. There are often many servers within several regions like Europe, North America, Asia, South America, and Australia. When a request is made for an image, whichever of these servers is\r\nclosest to the user who made the request will then deliver the image, ensuring fast and optimized delivery and a better user experience.

Using Cosmic as a free image CDN

Cosmic API and media management dashboard

With the Cosmic media management dashboard, you can easily manage and deliver images from the Cosmic image API and CDN. The media management dashboard comes integrated with Cosmic’s headless CMS by default, so once you upload images, they are ready to be connected to your Cosmic content.

Here’s a quick guide on using the media management dashboard in Cosmic:

imgix image optimization

Within the Cosmic dashboard, you can easily add some basic imgix parameters to your images like compression, formatting, and width and height adjustments. Once you adjust the settings, just click ‘save’ and your image will be optimized and\r\nready to be delivered.

\"imgix

In conclusion

Images hold a lot of weight on the web, and an image CDN is a pivotal factor when it comes to improving a website’s performance. High-performing websites can lead to higher conversion rates, lower bounce rates, and an overall better user experience.\r\nAlong with these factors, it’s important to consider what kind of features fit the requirements of your website or application and choose accordingly.

If you’ve learned a thing or two from this article and would like to test out an image CDN for yourself, you can create a Cosmic account and begin using the media management dashboard for free.

","metafields":[{"children":null,"type":"text","title":"SEO Title (H1)","key":"seo_title","id":"0RpLgcTNTL","value":"Image CDN explained in a few minutes"},{"children":null,"type":"text","title":"Subheadline","key":"subheadline","id":"dUJxO7rE2L","value":"Learn the basic features of a content delivery network and the benefits of delivering optimized images to users across the globe."},{"children":null,"type":"textarea","title":"SEO Description","key":"seo_description","id":"dFRagPPX3g","value":"Learn the basic features of a content delivery network and the benefits of delivering optimized images to users across the globe."}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"pages","created":"2022-10-17T20:55:13.894Z","created_at":"2022-10-17T20:55:13.894Z","modified_at":"2022-10-17T20:56:48.687Z","status":"published","locale":null,"modified_by":"5357ef811693be2118000001","thumbnail":"https://imgix.cosmicjs.com/345cc220-4e5e-11ed-b9f4-810dc6a26b05-f9a42850-4bcc-11ed-876e-41842b505a48-Global-CDN.png","publish_at":null,"unpublish_at":null,"created_by":"5357ef811693be2118000001","published_at":"2022-10-17T20:56:48.687Z","metadata":{"seo_title":"Image CDN explained in a few minutes","subheadline":"Learn the basic features of a content delivery network and the benefits of delivering optimized images to users across the globe.","seo_description":"Learn the basic features of a content delivery network and the benefits of delivering optimized images to users across the globe."}},{"_id":"5bec57f217b4e44581bcf56e","order":0,"slug":"a-vuetiful-holiday-meetup-cosmic-js-and-vuetify","title":"A Vuetiful Holiday Meetup: Cosmic JS and Vuetify","content":"

Cosmic JS with Vuetify Holiday Meetup
Wednesday, December 12th, 2018
6:00PM - 8:00PM

Register Here


What We'll Cover:

✅ Learn what makes Vue + Vuetify + Cosmic JS a powerful modern web stack
✅ Get access to the latest product features and news from Cosmic JS and Vuetify
✅ How to deploy a Vue + Vuetify + Cosmic JS app to Netlify with one click
✅ Q/A


Pizza, drinks and networking will be provided. 🍕🍺🎉


About the speakers:


Tony Spiro is the co-founder and CEO of Cosmic JS . An experienced software engineer building web applications since IE6, Tony started Cosmic JS to solve his own problems in application development. He is thrilled to now help teams around the world use Cosmic JS to build amazing products.

John Leider is a Senior Developer that's been building websites, apps and frameworks for the last decade. He is the Founder and CEO of Vuetify, the popular reusable semantic component framework for Vue.js. It aims to provide clean, semantic and reusable components.


Hosts and Partners

Special thanks to Simple Media for hosting and Silicon Valley Bank for providing food and refreshments. 



Register Here


","metafields":[{"value":"90761070-f3ef-11e8-a87b-cfc4e63151c7-cosmic-vuetify-netlify.jpg","key":"image","title":"Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/90761070-f3ef-11e8-a87b-cfc4e63151c7-cosmic-vuetify-netlify.jpg","imgix_url":"https://imgix.cosmicjs.com/90761070-f3ef-11e8-a87b-cfc4e63151c7-cosmic-vuetify-netlify.jpg"},{"value":"Simple Media: 2242 Monitor Street, #110, Dallas TX 75207","key":"location","title":"Location","type":"text","children":null},{"value":"6:00PM - 8:00PM","key":"time","title":"Time","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"events","created_at":"2018-11-14T17:14:26.642Z","created_by":"5716b504e9c686d006000073","created":"2018-11-14T17:14:26.642Z","status":"published","modified_at":"2018-11-29T17:05:03.707Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-11-29T17:05:03.707Z","metadata":{"image":{"url":"https://cdn.cosmicjs.com/90761070-f3ef-11e8-a87b-cfc4e63151c7-cosmic-vuetify-netlify.jpg","imgix_url":"https://imgix.cosmicjs.com/90761070-f3ef-11e8-a87b-cfc4e63151c7-cosmic-vuetify-netlify.jpg"},"location":"Simple Media: 2242 Monitor Street, #110, Dallas TX 75207","time":"6:00PM - 8:00PM"}},{"_id":"57859a5c1621de245c0004cb","order":0,"slug":"carson-gibbons-cmo-co-founder","title":"Carson Gibbons, CMO & Co-Founder","content":"

Carson Gibbons is a sales, marketing and advertising manager with experience leading digital project production for companies ranging from startups to corporations to large not-for-profits.

Carson joined Cosmic JS to help teams of developers and content creators collaborate to build modern apps faster together.

","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"image","title":"Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"https://cosmicjs.com/carsongibbons","key":"cosmic","title":"Cosmic","type":"text","children":null},{"value":"https://twitter.com/carsoncgibbons","key":"twitter","title":"Twitter","type":"text","children":null},{"value":"https://www.linkedin.com/in/carsongibbons","key":"linkedin","title":"Linkedin","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"people","created":"2016-07-13T01:33:16.699Z","status":"published","modified":"2016-07-13T16:50:33.731Z","modified_at":"2018-12-19T20:53:20.183Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-12-19T20:53:20.183Z","metadata":{"image":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"cosmic":"https://cosmicjs.com/carsongibbons","twitter":"https://twitter.com/carsoncgibbons","linkedin":"https://www.linkedin.com/in/carsongibbons"}},{"_id":"6005f9135e6bc9000759f9eb","order":0,"slug":"day-to-day","title":"DaytoDay","content":"","metafields":[{"children":null,"type":"file","title":"Logo","key":"logo","id":"w8TdzH5aNl","value":"c7655010-59f4-11eb-9e0f-fd6e504bde0d-daytoday.png","url":"https://cdn.cosmicjs.com/c7655010-59f4-11eb-9e0f-fd6e504bde0d-daytoday.png","imgix_url":"https://imgix.cosmicjs.com/c7655010-59f4-11eb-9e0f-fd6e504bde0d-daytoday.png"},{"children":null,"type":"text","title":"SEO Description","key":"seo_description","id":"jyUZd7jQdZ","value":"DaytoDay builds a headless medical application with Cosmic"},{"children":null,"type":"text","title":"Brand Color","key":"brand_color","id":"kNPo3Ngdui","value":"#5c3fd7"},{"children":null,"type":"file","title":"Background Image","key":"background_image","id":"OBSKdpuQBc","value":"4760e9f0-59d2-11eb-a540-1dc0abc1ec4b-designimage.png","url":"https://cdn.cosmicjs.com/4760e9f0-59d2-11eb-a540-1dc0abc1ec4b-designimage.png","imgix_url":"https://imgix.cosmicjs.com/4760e9f0-59d2-11eb-a540-1dc0abc1ec4b-designimage.png"},{"children":null,"type":"text","title":"Industry","key":"industry","id":"hPtlSDChjy","value":"Healthcare"},{"children":null,"type":"text","title":"Product","key":"product","id":"bA6IFC1vYW","value":"Patient Care Application"},{"children":null,"type":"file","title":"Main Image","key":"main_image","id":"labLXRzz0w","value":"6a9b8a10-59f5-11eb-9e0f-fd6e504bde0d-daytoday-screen.png","url":"https://cdn.cosmicjs.com/6a9b8a10-59f5-11eb-9e0f-fd6e504bde0d-daytoday-screen.png","imgix_url":"https://imgix.cosmicjs.com/6a9b8a10-59f5-11eb-9e0f-fd6e504bde0d-daytoday-screen.png"},{"children":[{"children":null,"type":"file","title":"Image","key":"image","id":"00Xf7nv0Jp","value":"c004c610-59f5-11eb-9e0f-fd6e504bde0d-daytoday-laptop.png","url":"https://cdn.cosmicjs.com/c004c610-59f5-11eb-9e0f-fd6e504bde0d-daytoday-laptop.png","imgix_url":"https://imgix.cosmicjs.com/c004c610-59f5-11eb-9e0f-fd6e504bde0d-daytoday-laptop.png"},{"children":null,"type":"html-textarea","title":"Text","key":"text","id":"6geR2ITDlD","value":"

If you've ever had an outpatient procedure or surgery, you may be familiar with how confusing both prep and follow-up care instructions can be. DaytoDay Health is on a mission to ensure tailored patient prep instructions, videos, and follow-up follow through. With tailored, comprehensive patient guidance, they believe vital procedures such as cardiac bypass grafts can have the good outcomes far more often.

Stepping up to guide these patients through an extremely stressful period of life was Blake, a nurse-turned-content-creator. He'd been tasked with generating huge volumes of instructions, videos, and infographics to make up their pre-and-post care instructions library.


"},{"children":null,"type":"textarea","title":"Testimonial Home","key":"testimonial_home","id":"XjSipjcoQY","value":""}],"type":"parent","title":"Section 1","key":"section_1","id":"kBxA9ADHpl","value":"

If you've ever had an outpatient procedure or surgery, you may be familiar with how confusing both prep and follow-up care instructions can be. DaytoDay Health is on a mission to ensure tailored patient prep instructions, videos, and follow-up follow through. With tailored, comprehensive patient guidance, they believe vital procedures such as cardiac bypass grafts can have the good outcomes far more often.

Stepping up to guide these patients through an extremely stressful period of life was Blake, a nurse-turned-content-creator. He'd been tasked with generating huge volumes of instructions, videos, and infographics to make up their pre-and-post care instructions library.


"},{"children":[{"children":null,"type":"file","title":"Image","key":"image","id":"5XVPxBEudi","value":"35af4d40-59f6-11eb-9e0f-fd6e504bde0d-daytoday-mobile.png","url":"https://cdn.cosmicjs.com/35af4d40-59f6-11eb-9e0f-fd6e504bde0d-daytoday-mobile.png","imgix_url":"https://imgix.cosmicjs.com/35af4d40-59f6-11eb-9e0f-fd6e504bde0d-daytoday-mobile.png"},{"children":null,"type":"html-textarea","title":"Text","key":"text","id":"52r3p9Pg0o","value":"

This would be a monumental task. Blake needed his content to be uploaded, tagged by procedure, organized by diet and medication restrictions, filed, and distributed on a per-patient basis; all of this had to be done efficiently. Whew. Their current process - using Google Sheets and a patient portal - was buckling under the workload. Handling administrative duties alone had become an impossible task. After some searching, and evaluating our competition, the DaytoDay team turned to Cosmic's headless CMS to solve this problem.

Suddenly, life got a whole lot easier. With Cosmic's unique Bucket system, Day-to-Day had found the infrastructure solution to organize their content in a way that was technically-sound and human-usable. Their team's resources were almost immediately freed up to start scaling and adding additional procedures to their library. As Blake looks to 2021, he plans to expand DaytoDay's procedures library by nearly double the volume, and possibly bring on additional content team members to help them manage additional content responsibilities they've acquired. But hey, growth is a good problem to have, right?

"}],"type":"parent","title":"Section 2","key":"section_2","id":"bQ4gnQ2uSR","value":"

This would be a monumental task. Blake needed his content to be uploaded, tagged by procedure, organized by diet and medication restrictions, filed, and distributed on a per-patient basis; all of this had to be done efficiently. Whew. Their current process - using Google Sheets and a patient portal - was buckling under the workload. Handling administrative duties alone had become an impossible task. After some searching, and evaluating our competition, the DaytoDay team turned to Cosmic's headless CMS to solve this problem.

Suddenly, life got a whole lot easier. With Cosmic's unique Bucket system, Day-to-Day had found the infrastructure solution to organize their content in a way that was technically-sound and human-usable. Their team's resources were almost immediately freed up to start scaling and adding additional procedures to their library. As Blake looks to 2021, he plans to expand DaytoDay's procedures library by nearly double the volume, and possibly bring on additional content team members to help them manage additional content responsibilities they've acquired. But hey, growth is a good problem to have, right?

"},{"children":[{"children":null,"type":"file","title":"Image","key":"image","id":"cnNOr9hLXh","value":"c2181580-59d0-11eb-a540-1dc0abc1ec4b-blakemoloneydaytoday.jpg","url":"https://cdn.cosmicjs.com/c2181580-59d0-11eb-a540-1dc0abc1ec4b-blakemoloneydaytoday.jpg","imgix_url":"https://imgix.cosmicjs.com/c2181580-59d0-11eb-a540-1dc0abc1ec4b-blakemoloneydaytoday.jpg"},{"children":null,"type":"text","title":"Author","key":"author","id":"tilDB0HV65","value":"Blake Moloney, Content Creator"},{"children":null,"type":"textarea","title":"Text","key":"text","id":"1nL5IRuDTo","value":"I knew we'd have to shift to a content management system. Contentful was the first thing we looked at, and it wasn't robust enough. [With Cosmic,] all of a sudden, life just got a whole lot easier. We made our patient education glossary into 1 Bucket and set it up to be completely variable for the patient. We could make quality changes, like, we'd written a glossary, and Cosmic let us start hyperlinking terms and definitions to simplify how our content is presented. Cosmic has been really reactive to our needs to help us get this all done."}],"type":"parent","title":"Testimonial Section","key":"testimonial_section","id":"dPpK47tKKc","value":"Blake Moloney, Content Creator"},{"children":null,"type":"switch","title":"Featured on Home","key":"featured_on_home","id":"9kBS13tUAW","value":false,"options":"yes,no"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"customers","created_at":"2021-01-18T21:09:39.431Z","created_by":"5f8088982aa32f00093977bb","modified_at":"2021-01-20T23:22:57.456Z","created":"2021-01-18T21:09:39.431Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/f0872370-59d0-11eb-a540-1dc0abc1ec4b-daytodaylogo.jpg","modified_by":"5f8088982aa32f00093977bb","publish_at":null,"unpublish_at":null,"published_at":"2021-01-20T23:22:57.456Z","metadata":{"logo":{"url":"https://cdn.cosmicjs.com/c7655010-59f4-11eb-9e0f-fd6e504bde0d-daytoday.png","imgix_url":"https://imgix.cosmicjs.com/c7655010-59f4-11eb-9e0f-fd6e504bde0d-daytoday.png"},"seo_description":"DaytoDay builds a headless medical application with Cosmic","brand_color":"#5c3fd7","background_image":{"url":"https://cdn.cosmicjs.com/4760e9f0-59d2-11eb-a540-1dc0abc1ec4b-designimage.png","imgix_url":"https://imgix.cosmicjs.com/4760e9f0-59d2-11eb-a540-1dc0abc1ec4b-designimage.png"},"industry":"Healthcare","product":"Patient Care Application","main_image":{"url":"https://cdn.cosmicjs.com/6a9b8a10-59f5-11eb-9e0f-fd6e504bde0d-daytoday-screen.png","imgix_url":"https://imgix.cosmicjs.com/6a9b8a10-59f5-11eb-9e0f-fd6e504bde0d-daytoday-screen.png"},"section_1":{"image":{"url":"https://cdn.cosmicjs.com/c004c610-59f5-11eb-9e0f-fd6e504bde0d-daytoday-laptop.png","imgix_url":"https://imgix.cosmicjs.com/c004c610-59f5-11eb-9e0f-fd6e504bde0d-daytoday-laptop.png"},"text":"

If you've ever had an outpatient procedure or surgery, you may be familiar with how confusing both prep and follow-up care instructions can be. DaytoDay Health is on a mission to ensure tailored patient prep instructions, videos, and follow-up follow through. With tailored, comprehensive patient guidance, they believe vital procedures such as cardiac bypass grafts can have the good outcomes far more often.

Stepping up to guide these patients through an extremely stressful period of life was Blake, a nurse-turned-content-creator. He'd been tasked with generating huge volumes of instructions, videos, and infographics to make up their pre-and-post care instructions library.


","testimonial_home":""},"section_2":{"image":{"url":"https://cdn.cosmicjs.com/35af4d40-59f6-11eb-9e0f-fd6e504bde0d-daytoday-mobile.png","imgix_url":"https://imgix.cosmicjs.com/35af4d40-59f6-11eb-9e0f-fd6e504bde0d-daytoday-mobile.png"},"text":"

This would be a monumental task. Blake needed his content to be uploaded, tagged by procedure, organized by diet and medication restrictions, filed, and distributed on a per-patient basis; all of this had to be done efficiently. Whew. Their current process - using Google Sheets and a patient portal - was buckling under the workload. Handling administrative duties alone had become an impossible task. After some searching, and evaluating our competition, the DaytoDay team turned to Cosmic's headless CMS to solve this problem.

Suddenly, life got a whole lot easier. With Cosmic's unique Bucket system, Day-to-Day had found the infrastructure solution to organize their content in a way that was technically-sound and human-usable. Their team's resources were almost immediately freed up to start scaling and adding additional procedures to their library. As Blake looks to 2021, he plans to expand DaytoDay's procedures library by nearly double the volume, and possibly bring on additional content team members to help them manage additional content responsibilities they've acquired. But hey, growth is a good problem to have, right?

"},"testimonial_section":{"image":{"url":"https://cdn.cosmicjs.com/c2181580-59d0-11eb-a540-1dc0abc1ec4b-blakemoloneydaytoday.jpg","imgix_url":"https://imgix.cosmicjs.com/c2181580-59d0-11eb-a540-1dc0abc1ec4b-blakemoloneydaytoday.jpg"},"author":"Blake Moloney, Content Creator","text":"I knew we'd have to shift to a content management system. Contentful was the first thing we looked at, and it wasn't robust enough. [With Cosmic,] all of a sudden, life just got a whole lot easier. We made our patient education glossary into 1 Bucket and set it up to be completely variable for the patient. We could make quality changes, like, we'd written a glossary, and Cosmic let us start hyperlinking terms and definitions to simplify how our content is presented. Cosmic has been really reactive to our needs to help us get this all done."},"featured_on_home":false}},{"_id":"5b730f6e4a28a757c9088a52","order":0,"slug":"hypometer-technologies","title":" Hypometer Technologies","content":"","metafields":[{"value":"599b13f0-9fe6-11e8-9cd3-a30de3fdcc73-hypometer-logo.jpg","key":"image","title":"Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/599b13f0-9fe6-11e8-9cd3-a30de3fdcc73-hypometer-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/599b13f0-9fe6-11e8-9cd3-a30de3fdcc73-hypometer-logo.jpg"},{"value":"\nHypometer Technologies is revolutionizing the Australian sporting experience by making predictive analytics accessible to the masses. They're using Cosmic JS to empower their team with modern tools.","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"https://cosmicjs.com/case-studies/hypometer-technologies-fantasy-insider-and-stats-insider","key":"link","title":"Link","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"home-page-case-studies","created_at":"2018-08-14T17:20:46.304Z","created_by":"5357ef811693be2118000001","created":"2018-08-14T17:20:46.304Z","status":"published","published_at":"2018-08-14T17:20:46.304Z","metadata":{"image":{"url":"https://cdn.cosmicjs.com/599b13f0-9fe6-11e8-9cd3-a30de3fdcc73-hypometer-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/599b13f0-9fe6-11e8-9cd3-a30de3fdcc73-hypometer-logo.jpg"},"teaser":"\nHypometer Technologies is revolutionizing the Australian sporting experience by making predictive analytics accessible to the masses. They're using Cosmic JS to empower their team with modern tools.","link":"https://cosmicjs.com/case-studies/hypometer-technologies-fantasy-insider-and-stats-insider"}},{"_id":"5f7687813985300007a7c9cc","order":0,"slug":"john-leider","title":"John Leider","content":"","metafields":[{"children":null,"type":"textarea","title":"Testimonial","key":"testimonial","id":"zPRcS1tZuR","value":"It was literally 10 to 15 minutes from taking the SDK, to getting the data I needed, to consuming it. We cut our server response time down from 300-400 ms to about 50 ms. Instead of needing to query the Shopify API, now we only need to query Cosmic."},{"children":null,"type":"text","title":"Author Name","key":"author_name","id":"ZfAyf3UCa0","value":"John Leider"},{"children":null,"type":"text","title":"Business","key":"business","id":"hSd9eALSkG","value":"Vuetify"},{"children":null,"type":"file","title":"Author Image","key":"author_image","id":"HwLwf7SNgV","value":"36949a70-0452-11eb-9e80-ddb9514d6310-vuetify.jpg","url":"https://cdn.cosmicjs.com/36949a70-0452-11eb-9e80-ddb9514d6310-vuetify.jpg","imgix_url":"https://imgix.cosmicjs.com/36949a70-0452-11eb-9e80-ddb9514d6310-vuetify.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"testimonials","created_at":"2020-10-02T01:50:57.976Z","created_by":"5357ef811693be2118000001","modified_at":"2020-11-05T20:30:41.491Z","created":"2020-10-02T01:50:57.976Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/36949a70-0452-11eb-9e80-ddb9514d6310-vuetify.jpg","published_at":"2020-11-05T20:30:41.491Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"metadata":{"testimonial":"It was literally 10 to 15 minutes from taking the SDK, to getting the data I needed, to consuming it. We cut our server response time down from 300-400 ms to about 50 ms. Instead of needing to query the Shopify API, now we only need to query Cosmic.","author_name":"John Leider","business":"Vuetify","author_image":{"url":"https://cdn.cosmicjs.com/36949a70-0452-11eb-9e80-ddb9514d6310-vuetify.jpg","imgix_url":"https://imgix.cosmicjs.com/36949a70-0452-11eb-9e80-ddb9514d6310-vuetify.jpg"}}},{"_id":"5ffa1d1e0046b0000799cb7b","order":0,"slug":"cosmic","title":"Cosmic","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"ZogvxZg6OL","value":""},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D0qLJ4RPBe","value":"10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2021-01-09T21:16:14.533Z","created_by":"5357ef811693be2118000001","modified_at":"2021-01-09T21:18:26.147Z","created":"2021-01-09T21:16:14.533Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/e55ef990-52bf-11eb-986d-4d7ff5faa3ab-logo.svg","published_at":"2021-01-09T21:18:26.147Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"metadata":{"username":"","profile_picture":{"url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}}},{"_id":"5a73506aa3bb966384a695fd","order":1,"slug":"unleashed","title":"Unleashed","content":"","metafields":[{"value":"88b2e180-0776-11e8-8f05-6d4eca9fceae-unleashed-xr-logo.jpg","key":"image","title":"Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/88b2e180-0776-11e8-8f05-6d4eca9fceae-unleashed-xr-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/88b2e180-0776-11e8-8f05-6d4eca9fceae-unleashed-xr-logo.jpg"},{"value":"\nUnleashed XR builds immersive technology solutions for a range of clients across industries. They choose Cosmic JS to allow developers and editors to collaborate to complete digital projects faster.","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"https://cosmicjs.com/case-studies/unleashed-xr-augmented-mixed-and-virtual-realities","key":"link","title":"Link","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"home-page-case-studies","created_at":"2018-02-01T17:37:46.680Z","created_by":"5357ef811693be2118000001","created":"2018-02-01T17:37:46.680Z","status":"published","metadata":{"image":{"url":"https://cdn.cosmicjs.com/88b2e180-0776-11e8-8f05-6d4eca9fceae-unleashed-xr-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/88b2e180-0776-11e8-8f05-6d4eca9fceae-unleashed-xr-logo.jpg"},"teaser":"\nUnleashed XR builds immersive technology solutions for a range of clients across industries. They choose Cosmic JS to allow developers and editors to collaborate to complete digital projects faster.","link":"https://cosmicjs.com/case-studies/unleashed-xr-augmented-mixed-and-virtual-realities"}},{"_id":"5bc6434de8c5124b30c50847","order":1,"slug":"webinar-localization-with-cosmic-js-and-gatsby","title":"Webinar: Localization with Cosmic JS and Gatsby ","content":"

We've partnered with Gatsby for a Spooktacular-Halloween installment of Webinar Wednesday. Cosmic co-founder Tony Spiro is teaming up with Gatsby Developer Advocate Jason Lengstorf to demonstrate how you can build powerful web apps using Gatsby and Cosmic JS.

Register here »

What you'll learn:
✅ How to create localized content models in Cosmic JS
✅ How to install the Cosmic JS Gatsby Localization Starter
✅ How Gatsby gives you incredible web performance out of the box


About the presenters:


Tony Spiro is a software engineer with over a decade of experience leading digital teams from startups to Fortune 500 companies. Tony started Cosmic JS as a side project to solve his own problems with application development.  He is thrilled to now help thousands of users around the world use Cosmic JS to build amazing products.

Jason Lengstorf is a developer advocate, senior engineer, and occasional designer at Gatsby. He’s an advocate for building highly productive teams through better communication, well designed systems and processes, and healthy work-life balance, and he blogs about that sometimes. He lives in Portland, Oregon.


Register here:

\">


","metafields":[{"value":"09083f20-d17e-11e8-b499-a91ad6b31720-gatsby-cosmic.jpeg","key":"image","title":"Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/09083f20-d17e-11e8-b499-a91ad6b31720-gatsby-cosmic.jpeg","imgix_url":"https://imgix.cosmicjs.com/09083f20-d17e-11e8-b499-a91ad6b31720-gatsby-cosmic.jpeg"},{"value":"Online","key":"location","title":"Location","type":"text","children":null},{"value":"Wednesday October 31, 12PM US ET","key":"time","title":"Time","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"events","created_at":"2018-10-16T20:00:13.198Z","created_by":"5357ef811693be2118000001","created":"2018-10-16T20:00:13.198Z","status":"published","published_at":"2018-10-23T16:17:43.590Z","modified_at":"2018-10-23T16:17:43.590Z","modified_by":"5357ef811693be2118000001","publish_at":null,"metadata":{"image":{"url":"https://cdn.cosmicjs.com/09083f20-d17e-11e8-b499-a91ad6b31720-gatsby-cosmic.jpeg","imgix_url":"https://imgix.cosmicjs.com/09083f20-d17e-11e8-b499-a91ad6b31720-gatsby-cosmic.jpeg"},"location":"Online","time":"Wednesday October 31, 12PM US ET"}},{"_id":"58fbe28d5161d90369000002","order":1,"slug":"react-cms","title":"React CMS","content":"","metafields":[{"children":null,"type":"file","title":"Image","key":"image","id":"86uwNw2H41","value":"9c2d95d0-27b0-11e7-b6ae-8108cf4caa96-react.svg","url":"https://cdn.cosmicjs.com/9c2d95d0-27b0-11e7-b6ae-8108cf4caa96-react.svg","imgix_url":"https://imgix.cosmicjs.com/9c2d95d0-27b0-11e7-b6ae-8108cf4caa96-react.svg"},{"children":null,"type":"file","title":"Thumbnail","key":"thumbnail","id":"cIUiUoed6e","value":"a1e22810-27b0-11e7-b6ae-8108cf4caa96-react.svg","url":"https://cdn.cosmicjs.com/a1e22810-27b0-11e7-b6ae-8108cf4caa96-react.svg","imgix_url":"https://imgix.cosmicjs.com/a1e22810-27b0-11e7-b6ae-8108cf4caa96-react.svg"},{"children":null,"type":"html-textarea","title":"Blurb","key":"blurb","id":"yzHCk8x1Oe","value":"

Cosmic is the best CMS for React websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

"},{"children":null,"type":"text","title":"Headline","key":"headline","id":"A5jf7eYowl","value":"React"},{"children":null,"type":"text","title":"Sub Headline","key":"sub_headline","id":"7VMwbgEBKs","value":"Cosmic and React are a perfect combination."},{"children":null,"type":"text","title":"SEO Description","key":"seo_description","id":"rt8tibFUc1","value":"Cosmic is the leading headless CMS for React applications. Our flexible infrastructure, outstanding support, and faster service means better apps."},{"children":null,"type":"file","title":"Twitter Card Image","key":"twitter_card_image","id":"aqe6PgLk9C","value":"7a43eca0-eee7-11eb-849a-8548c9a99fc0-Cosmic-React-CMS.png","url":"https://cdn.cosmicjs.com/7a43eca0-eee7-11eb-849a-8548c9a99fc0-Cosmic-React-CMS.png","imgix_url":"https://imgix.cosmicjs.com/7a43eca0-eee7-11eb-849a-8548c9a99fc0-Cosmic-React-CMS.png"},{"children":null,"type":"text","title":"SEO Title","key":"seo_title","id":"I8FhBacRUv","value":"The #1 React CMS - Build Better React Apps with Cosmic"},{"children":null,"type":"text","title":"H1","key":"h1","id":"MEpGcqXZtj","value":"Bring Your Favorite React Frontend"},{"children":null,"type":"html-textarea","title":"Code Example","key":"code_example","id":"kww1erhZo7","value":""},{"children":[{"type":"repeating_item","children":[{"title":"Title","key":"title","value":"Getting Started with Cosmic CMS and Next.js (Part 1)","type":"text","required":false},{"title":"Link","key":"link","value":"https://www.youtube.com/embed/NZA1dF2IDqQ?showinfo=0&wmode=opaque","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Title","key":"title","value":"Using Cosmic as a Headless CMS with Gatsby","type":"text","required":false},{"title":"Link","key":"link","value":"https://www.youtube.com/embed/Qls5frYlJeI?showinfo=0&wmode=opaque&widget_referrer=https%3A%2F%2Fwww.cosmicjs.com%2Fknowledge-base%2Freact-cms&enablejsapi=1&origin=https%3A%2F%2Fcdn.embedly.com&widgetid=1","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Title","key":"title","value":"Build a Cosmic-powered blog using Gatsby","type":"text","required":false},{"title":"Link","key":"link","value":"https://www.youtube.com/embed/mGcAWs1xRnY?showinfo=0&wmode=opaque&widget_referrer=https%3A%2F%2Fwww.cosmicjs.com%2Fknowledge-base%2Freact-cms&enablejsapi=1&origin=https%3A%2F%2Fcdn.embedly.com&widgetid=1","type":"text","required":false}]}],"type":"repeater","title":"Videos","key":"videos","id":"WRQcUlhzbs","value":"Getting Started with Cosmic CMS and Next.js (Part 1)","repeater_fields":[{"title":"Title","key":"title","value":"","type":"text","required":false},{"title":"Link","key":"link","value":"","type":"text","required":false}]},{"children":null,"type":"text","title":"Page Overview Title","key":"page_overview_title","id":"pI0jsahlWN","value":"Why use a Headless CMS as React’s CMS?"},{"children":null,"type":"html-textarea","title":"Page Overview","key":"page_overview","id":"ILHwoz5qEK","value":"

Using a headless CMS for your React application eliminates cumbersome layers of technological setup and maintenance from your React CMS that are necessary for coupled and decoupled CMS systems (e.g. WordPress, Drupal, Joomla, Shopify, Magento, etc.) Headless CMS data is accessible and extensible, providing future-proofed delivery via API to any destination. This circumvents investing in CMS infrastructure maintenance, allowing development focus to be on presentation and application business logic.

"},{"children":null,"type":"text","title":"Feature Section Left Video","key":"feature_section_left_video","id":"aDl1BVqy7N","value":"https://cdn.cosmicjs.com/75147100-13be-11eb-af66-95e0cc16a663-a2cf8510-fe71-11ea-a525-3597bcdfdc76-Merge-Objects.mp4"},{"children":null,"type":"html-textarea","title":"Feature Section Right","key":"feature_section_right","id":"NNQWAU7M2u","value":"

Top-Tier React CMS Features

Cosmic offers world-class API speed, industry-leading uptime reports, and a verbose feature set built for React - including:

"},{"children":null,"type":"text","title":"Apps Search Term","key":"apps_search_term","id":"DpxVUj18Bd","value":""},{"children":null,"type":"text","title":"Articles Search Term","key":"articles_search_term","id":"4NhvPeO9g9","value":""},{"children":[{"type":"repeating_item","children":[{"title":"App Slug","key":"app_slug","value":"simple-react-blog","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"App Slug","key":"app_slug","value":"nextjs-static-blog","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"App Slug","key":"app_slug","value":"react-cosmedium-blog","type":"text","required":false}]}],"type":"repeater","title":"Apps","key":"apps","id":"crDYypbyJo","value":"simple-react-blog","repeater_fields":[{"title":"App Slug","key":"app_slug","value":"","type":"text","required":false}]},{"children":[{"type":"repeating_item","children":[{"title":"Article Slug","key":"article_slug","value":"how-to-build-a-react-portfolio-website-powered-by-cosmic-js","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Article Slug","key":"article_slug","value":"how-to-build-a-location-based-twitter-search-app-with-react-and-cosmic-js","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Article Slug","key":"article_slug","value":"build-a-react-shuffle-blog-using-the-spotify-api","type":"text","required":false}]}],"type":"repeater","title":"Articles","key":"articles","id":"3VTsWe6HjF","value":"how-to-build-a-react-portfolio-website-powered-by-cosmic-js","repeater_fields":[{"title":"Article Slug","key":"article_slug","value":"","type":"text","required":false}]},{"children":[{"type":"repeating_item","children":[{"title":"Question","key":"question","value":"What is React?","type":"text","required":false},{"title":"Answer","key":"answer","value":"

React (or ReactJS, React.js) is a JavaScript library for building user interfaces. It enables you to build robustly dynamic single-page web applications by using a component-based architecture, purposed for greater code reusability.

React can also render on the server-side using Node.js, or on mobile apps (compilation) using React Native. Originally developed at Facebook, it is under active development by employees at Facebook and the open source community.

","type":"html-textarea","required":false}]},{"type":"repeating_item","children":[{"title":"Question","key":"question","value":"What is a CMS?","type":"text","required":false},{"title":"Answer","key":"answer","value":"

React only provides the “front-end” user interface (UI), handling the visual presentation of an application’s content. React applications must be complemented with a compatible “back-end” database to store and retrieve content; further, that data source needs a way to be managed. This data storage and management demands the need for a content management system (CMS).

","type":"html-textarea","required":false}]},{"type":"repeating_item","children":[{"title":"Question","key":"question","value":"What is a React CMS?","type":"text","required":false},{"title":"Answer","key":"answer","value":"

To provide content to a React CMS application, data for the React application is servable:

A React CMS is created when a React UI is integrated with a CMS to handle content. To communicate with React, a CMS must offer a compatible application programming interface (API). For example:

A headless CMS can be used as a flexible data source for your React application to supply content to any or all of: client-side, server-side, or during compilation. Compilation refers to the build process commonly known as Jamstack approach, which deploys pre-rendered web pages to a static website hosting provider.

React CMS Data Compatibility and Accessibility

Using available API tools like our REST, GraphQL, or Cosmic NPM module empower developers to create powerful user experiences using Cosmic as the React CMS.

","type":"html-textarea","required":false}]},{"type":"repeating_item","children":[{"title":"Question","key":"question","value":"Is it \"React\" or \"React.js\"? What happened to the JS?","type":"text","required":false},{"title":"Answer","key":"answer","value":"

React, formerly and often still incorrectly referred to as React.js, is one of the most popular JavaScript frameworks. React is only the new brand name for what was formerly known as React.js. In 2017, Facebook dropped the \".js\" from React's name.

","type":"html-textarea","required":false}]},{"type":"repeating_item","children":[{"title":"Question","key":"question","value":"How are Cosmic's content components \"Built\" for React?","type":"text","required":false},{"title":"Answer","key":"answer","value":"

A headless CMS like Cosmic natively facilitates React’s component-based JavaScript architecture. React components integrate with Cosmic’s content model, supporting JSON data Objects, Metafields, and Object Relationships, facilitating creation of reusable React CMS components. This native JavaScript component synchronicity with React makes Cosmic headless CMS ideal to facilitate any React application’s content needs.

","type":"html-textarea","required":false}]},{"type":"repeating_item","children":[{"title":"Question","key":"question","value":"Do you offer security features for my React CMS?","type":"text","required":false},{"title":"Answer","key":"answer","value":"

Headless CMS data is securely delivered by the Cosmic APIs within industry standard 256-bit SSL encryption in transit and in storage in our global data centers. Additional security via two-factor authentication is also available for free. This industry standard level of security comes included with all Cosmic accounts.

In contrast, when using a coupled CMS system, you are responsible for providing these security features with none of the above security features included.

","type":"html-textarea","required":false}]},{"type":"repeating_item","children":[{"title":"Question","key":"question","value":"Support for your React CMS and React developers","type":"text","required":false},{"title":"Answer","key":"answer","value":"

Community support is crucial to our headless CMS culture. Cosmic’s intention is to provide headless CMS resources that save time and money using our solution as your React CMS. To support and supplement this, Cosmic regularly publishes educational resources, open source libraries, example applications/boilerplates, extensions, hosts events, and more.

Paid dedicated support is offered in either dedicated or enterprise support plans, each is optional with 24/7 technical assistance.

You can also find us during normal and abnormal business hours in our #technical slack channel.

","type":"html-textarea","required":false}]}],"type":"repeater","title":"FAQs","key":"faqs","id":"GjOq9Ixiy2","value":"What is React?","repeater_fields":[{"title":"Question","key":"question","value":"","type":"text","required":false},{"title":"Answer","key":"answer","value":"","type":"html-textarea","required":false}]},{"children":null,"type":"markdown","title":"Code Guide","key":"code_guide","id":"1c7KZJbCRE","value":"## Getting Started with Cosmic as Your React CMS\n\nUse the following step-by-step guide to get started using Cosmic as a headless CMS for your React apps.\n\n### Initial Setup\nBefore doing any coding, let's set up a Bucket with content using the following steps:\n1. Create or log in to your [Cosmic account](https://app.cosmicjs.com).\n2. Install the [Simple Blog](https://www.cosmicjs.com/apps/simple-blog) by clicking \"Select App\" then following the steps to create a new Bucket with the demo content. Alternatively, you could start by creating a new Bucket from scratch and add an Object Type titled `Posts` that has the slug `posts` and add a File Metafield titled `Hero` with key `hero`. Then add a few Objects with your own demo content.\n\nNow that we have some demo content, we can integrate the content using the following steps to make Cosmic your headless CMS for React.\n\n### 1. Install a new React app\nYou can use [Create React App](https://github.com/facebook/create-react-app) to install a new React app that includes tooling and configurations.\n```bash\nnpm i -g create-react-app\ncreate-react-app cosmic-react-app\n```\n### 2. Install the Cosmic NPM module and SWR\n```bash\ncd cosmic-react-app\nyarn add cosmicjs swr\n```\n### 3. Add the following code into your `src/App.js` file\nFind your Bucket slug and API read key in Your Bucket > Basic Settings > API Access after [logging in](https://app.cosmicjs.com).\n```javascript\n// src/App.js\nimport React from 'react'\nimport useSWR from 'swr'\nimport Cosmic from 'cosmicjs'\nconst api = Cosmic()\n// Set these values, found in Bucket > Settings after logging in at https://app.cosmicjs.com/login\nconst bucket = api.bucket({\n slug: 'YOUR_BUCKET_SLUG',\n read_key: 'YOUR_BUCKET_READ_KEY'\n})\nconst fetchPosts = async () => {\n const data = await bucket.getObjects({\n type: 'posts',\n props: 'slug,title,metadata' // Limit the API response data by props\n })\n return data\n}\nfunction App() {\n const { data, error } = useSWR('fetch-posts', fetchPosts) // Use SWR hook\n if (!data)\n return
Loading...
\n const posts = data.objects\n return
\n { posts.map(post => \n
\n {\n post.metadata.hero &&\n
\"\"
\n }\n
{post.title}
\n
)\n }\n
\n}\nexport default App\n```\n\n### 4. Start your app\nStart your app, and go to http://localhost:3000. Dance 🎉\n```bash\nnpm start\n```\n\nSee more guides in [React CMS documentation](https://docs.cosmicjs.com/) and other headless CMS-based integrations including [Next.js](https://docs.cosmicjs.com/guides/#next-js) and [Gatsby](https://docs.cosmicjs.com/guides/#gatsby)."},{"children":null,"type":"html-textarea","title":"SEO Content","key":"seo_content","id":"wMKrFc56Td","value":""}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"kb-articles","created_at":"2017-04-22T23:09:01.747Z","created_by":"5357ef811693be2118000001","created":"2017-04-22T23:09:01.747Z","status":"published","modified_at":"2022-06-03T06:26:04.930Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-06-03T06:26:04.930Z","unpublish_at":null,"metadata":{"image":{"url":"https://cdn.cosmicjs.com/9c2d95d0-27b0-11e7-b6ae-8108cf4caa96-react.svg","imgix_url":"https://imgix.cosmicjs.com/9c2d95d0-27b0-11e7-b6ae-8108cf4caa96-react.svg"},"thumbnail":{"url":"https://cdn.cosmicjs.com/a1e22810-27b0-11e7-b6ae-8108cf4caa96-react.svg","imgix_url":"https://imgix.cosmicjs.com/a1e22810-27b0-11e7-b6ae-8108cf4caa96-react.svg"},"blurb":"

Cosmic is the best CMS for React websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

","headline":"React","sub_headline":"Cosmic and React are a perfect combination.","seo_description":"Cosmic is the leading headless CMS for React applications. Our flexible infrastructure, outstanding support, and faster service means better apps.","twitter_card_image":{"url":"https://cdn.cosmicjs.com/7a43eca0-eee7-11eb-849a-8548c9a99fc0-Cosmic-React-CMS.png","imgix_url":"https://imgix.cosmicjs.com/7a43eca0-eee7-11eb-849a-8548c9a99fc0-Cosmic-React-CMS.png"},"seo_title":"The #1 React CMS - Build Better React Apps with Cosmic","h1":"Bring Your Favorite React Frontend","code_example":"","videos":[{"title":"Getting Started with Cosmic CMS and Next.js (Part 1)","link":"https://www.youtube.com/embed/NZA1dF2IDqQ?showinfo=0&wmode=opaque"},{"title":"Using Cosmic as a Headless CMS with Gatsby","link":"https://www.youtube.com/embed/Qls5frYlJeI?showinfo=0&wmode=opaque&widget_referrer=https%3A%2F%2Fwww.cosmicjs.com%2Fknowledge-base%2Freact-cms&enablejsapi=1&origin=https%3A%2F%2Fcdn.embedly.com&widgetid=1"},{"title":"Build a Cosmic-powered blog using Gatsby","link":"https://www.youtube.com/embed/mGcAWs1xRnY?showinfo=0&wmode=opaque&widget_referrer=https%3A%2F%2Fwww.cosmicjs.com%2Fknowledge-base%2Freact-cms&enablejsapi=1&origin=https%3A%2F%2Fcdn.embedly.com&widgetid=1"}],"page_overview_title":"Why use a Headless CMS as React’s CMS?","page_overview":"

Using a headless CMS for your React application eliminates cumbersome layers of technological setup and maintenance from your React CMS that are necessary for coupled and decoupled CMS systems (e.g. WordPress, Drupal, Joomla, Shopify, Magento, etc.) Headless CMS data is accessible and extensible, providing future-proofed delivery via API to any destination. This circumvents investing in CMS infrastructure maintenance, allowing development focus to be on presentation and application business logic.

","feature_section_left_video":"https://cdn.cosmicjs.com/75147100-13be-11eb-af66-95e0cc16a663-a2cf8510-fe71-11ea-a525-3597bcdfdc76-Merge-Objects.mp4","feature_section_right":"

Top-Tier React CMS Features

Cosmic offers world-class API speed, industry-leading uptime reports, and a verbose feature set built for React - including:

","apps_search_term":"","articles_search_term":"","apps":[{"app_slug":"simple-react-blog"},{"app_slug":"nextjs-static-blog"},{"app_slug":"react-cosmedium-blog"}],"articles":[{"article_slug":"how-to-build-a-react-portfolio-website-powered-by-cosmic-js"},{"article_slug":"how-to-build-a-location-based-twitter-search-app-with-react-and-cosmic-js"},{"article_slug":"build-a-react-shuffle-blog-using-the-spotify-api"}],"faqs":[{"question":"What is React?","answer":"

React (or ReactJS, React.js) is a JavaScript library for building user interfaces. It enables you to build robustly dynamic single-page web applications by using a component-based architecture, purposed for greater code reusability.

React can also render on the server-side using Node.js, or on mobile apps (compilation) using React Native. Originally developed at Facebook, it is under active development by employees at Facebook and the open source community.

"},{"question":"What is a CMS?","answer":"

React only provides the “front-end” user interface (UI), handling the visual presentation of an application’s content. React applications must be complemented with a compatible “back-end” database to store and retrieve content; further, that data source needs a way to be managed. This data storage and management demands the need for a content management system (CMS).

"},{"question":"What is a React CMS?","answer":"

To provide content to a React CMS application, data for the React application is servable:

A React CMS is created when a React UI is integrated with a CMS to handle content. To communicate with React, a CMS must offer a compatible application programming interface (API). For example:

A headless CMS can be used as a flexible data source for your React application to supply content to any or all of: client-side, server-side, or during compilation. Compilation refers to the build process commonly known as Jamstack approach, which deploys pre-rendered web pages to a static website hosting provider.

React CMS Data Compatibility and Accessibility

Using available API tools like our REST, GraphQL, or Cosmic NPM module empower developers to create powerful user experiences using Cosmic as the React CMS.

"},{"question":"Is it \"React\" or \"React.js\"? What happened to the JS?","answer":"

React, formerly and often still incorrectly referred to as React.js, is one of the most popular JavaScript frameworks. React is only the new brand name for what was formerly known as React.js. In 2017, Facebook dropped the \".js\" from React's name.

"},{"question":"How are Cosmic's content components \"Built\" for React?","answer":"

A headless CMS like Cosmic natively facilitates React’s component-based JavaScript architecture. React components integrate with Cosmic’s content model, supporting JSON data Objects, Metafields, and Object Relationships, facilitating creation of reusable React CMS components. This native JavaScript component synchronicity with React makes Cosmic headless CMS ideal to facilitate any React application’s content needs.

"},{"question":"Do you offer security features for my React CMS?","answer":"

Headless CMS data is securely delivered by the Cosmic APIs within industry standard 256-bit SSL encryption in transit and in storage in our global data centers. Additional security via two-factor authentication is also available for free. This industry standard level of security comes included with all Cosmic accounts.

In contrast, when using a coupled CMS system, you are responsible for providing these security features with none of the above security features included.

"},{"question":"Support for your React CMS and React developers","answer":"

Community support is crucial to our headless CMS culture. Cosmic’s intention is to provide headless CMS resources that save time and money using our solution as your React CMS. To support and supplement this, Cosmic regularly publishes educational resources, open source libraries, example applications/boilerplates, extensions, hosts events, and more.

Paid dedicated support is offered in either dedicated or enterprise support plans, each is optional with 24/7 technical assistance.

You can also find us during normal and abnormal business hours in our #technical slack channel.

"}],"code_guide":"## Getting Started with Cosmic as Your React CMS\n\nUse the following step-by-step guide to get started using Cosmic as a headless CMS for your React apps.\n\n### Initial Setup\nBefore doing any coding, let's set up a Bucket with content using the following steps:\n1. Create or log in to your [Cosmic account](https://app.cosmicjs.com).\n2. Install the [Simple Blog](https://www.cosmicjs.com/apps/simple-blog) by clicking \"Select App\" then following the steps to create a new Bucket with the demo content. Alternatively, you could start by creating a new Bucket from scratch and add an Object Type titled `Posts` that has the slug `posts` and add a File Metafield titled `Hero` with key `hero`. Then add a few Objects with your own demo content.\n\nNow that we have some demo content, we can integrate the content using the following steps to make Cosmic your headless CMS for React.\n\n### 1. Install a new React app\nYou can use [Create React App](https://github.com/facebook/create-react-app) to install a new React app that includes tooling and configurations.\n```bash\nnpm i -g create-react-app\ncreate-react-app cosmic-react-app\n```\n### 2. Install the Cosmic NPM module and SWR\n```bash\ncd cosmic-react-app\nyarn add cosmicjs swr\n```\n### 3. Add the following code into your `src/App.js` file\nFind your Bucket slug and API read key in Your Bucket > Basic Settings > API Access after [logging in](https://app.cosmicjs.com).\n```javascript\n// src/App.js\nimport React from 'react'\nimport useSWR from 'swr'\nimport Cosmic from 'cosmicjs'\nconst api = Cosmic()\n// Set these values, found in Bucket > Settings after logging in at https://app.cosmicjs.com/login\nconst bucket = api.bucket({\n slug: 'YOUR_BUCKET_SLUG',\n read_key: 'YOUR_BUCKET_READ_KEY'\n})\nconst fetchPosts = async () => {\n const data = await bucket.getObjects({\n type: 'posts',\n props: 'slug,title,metadata' // Limit the API response data by props\n })\n return data\n}\nfunction App() {\n const { data, error } = useSWR('fetch-posts', fetchPosts) // Use SWR hook\n if (!data)\n return
Loading...
\n const posts = data.objects\n return
\n { posts.map(post => \n
\n {\n post.metadata.hero &&\n
\"\"
\n }\n
{post.title}
\n
)\n }\n
\n}\nexport default App\n```\n\n### 4. Start your app\nStart your app, and go to http://localhost:3000. Dance 🎉\n```bash\nnpm start\n```\n\nSee more guides in [React CMS documentation](https://docs.cosmicjs.com/) and other headless CMS-based integrations including [Next.js](https://docs.cosmicjs.com/guides/#next-js) and [Gatsby](https://docs.cosmicjs.com/guides/#gatsby).","seo_content":""}},{"_id":"5bad1c880d6e7903879ee271","slug":"slack","title":"Slack","content":"","metafields":[{"value":"https://cosmic-slack-events.cosmicapp.co","key":"link","title":"Link","type":"text","children":null},{"value":"741edfb0-c276-11e8-8edd-1f302b73a4c6-slack.jpg","key":"image","title":"Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/741edfb0-c276-11e8-8edd-1f302b73a4c6-slack.jpg","imgix_url":"https://imgix.cosmicjs.com/741edfb0-c276-11e8-8edd-1f302b73a4c6-slack.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"integrations","created":"2018-09-27T18:08:08.250Z","created_at":"2018-09-27T18:08:08.250Z","modified_at":"2018-09-29T15:38:17.173Z","status":"published","locale":null,"published_at":"2018-09-29T15:38:17.173Z","created_by":"5357ef811693be2118000001","order":1,"modified_by":"5357ef811693be2118000001","publish_at":null,"metadata":{"link":"https://cosmic-slack-events.cosmicapp.co","image":{"url":"https://cdn.cosmicjs.com/741edfb0-c276-11e8-8edd-1f302b73a4c6-slack.jpg","imgix_url":"https://imgix.cosmicjs.com/741edfb0-c276-11e8-8edd-1f302b73a4c6-slack.jpg"}}},{"_id":"538a10353ff8db6d77000002","slug":"home","title":"Home","content":"","metafields":[{"children":[{"type":"repeating_item","children":[{"title":"Question","key":"question","value":"What is a headless CMS?","type":"text","required":false},{"title":"Answer","key":"answer","value":"

A headless content management system (headless CMS) is a kind of CMS that creates more inherent separation between the back-end and the front-end of your applications. This allows for lots of useful functionality - for example, plugging an application into new front-ends (think: websites, mobile phones, smart devices) becomes much easier - because your code doesn't have any dependencies on the front-end.

This is one, simple, example of what makes headless CMS so great. In our eyes, it's going to become a primary means of content management in the coming decade. Learn more about headless content management here.

","type":"html-textarea","required":false}]},{"type":"repeating_item","children":[{"title":"Question","key":"question","value":"Is headless CMS right for me?","type":"text","required":false},{"title":"Answer","key":"answer","value":"

Hard to say. Headless CMS is not for every team, but if you're looking to reduce development time spent on CMS infrastructure, you're definitely in the right place. If you want a content management system that integrates better with the accelerating API-based economy, headless will be great for you. If you want to enable better collaboration between the infamously siloed development and marketing teams, headless is your best bet. Learn more about how to decide if headless is the best choice for your business.

","type":"html-textarea","required":false}]},{"type":"repeating_item","children":[{"title":"Question","key":"question","value":"What's the Jamstack?","type":"text","required":false},{"title":"Answer","key":"answer","value":"

Jamstack refers to a new architecture of web and application development. In a nutshell, this architecture allows for a more modern approach to creating applications. It sets your application up for success as we move into a digital age that requires more flexible applications.

There are 2 ideas that make up the new Jamstack architecture - pre-rendering, and de-coupling. That de-coupling concept is where headless CMS comes in - a headless CMS de-couples the back-end of your application from the front-end.

","type":"html-textarea","required":false}]},{"type":"repeating_item","children":[{"title":"Question","key":"question","value":"Is Cosmic open source?","type":"text","required":false},{"title":"Answer","key":"answer","value":"

The core Cosmic product is not open source. But we do provide lots of open source resources and examples to help you get started quickly. Trust our team of experts to continually update our software to make sure your team is equipped with the most modern and secure content management software. We are your outsourced content management team. More secure, continuously updated, expertly managed CMS as a service.

","type":"html-textarea","required":false}]},{"type":"repeating_item","children":[{"title":"Question","key":"question","value":"I'm a solo developer / freelancer, is Cosmic right for me?","type":"text","required":false},{"title":"Answer","key":"answer","value":"

Of course! We have a vibrant Slack Community and welcome developers of any walk of life - enterprise long-haulers and the scrappy-freelancer alike.

","type":"html-textarea","required":false}]},{"type":"repeating_item","children":[{"title":"Question","key":"question","value":"Is there a free plan?","type":"text","required":false},{"title":"Answer","key":"answer","value":"

Our personal plan is free to use on any Bucket, for unlimited time, no restrictions. Enjoy.

","type":"html-textarea","required":false}]},{"type":"repeating_item","children":[{"title":"Question","key":"question","value":"Do you have React / Vue / Angular / Next.js starter guides?","type":"text","required":false},{"title":"Answer","key":"answer","value":"

All of the above, and more. Check out our documentation for quickstart guides for all your favorite frameworks, plus a wealth of open-source, pre-built starter apps for you to peruse and pick from if you'd like to use one to get your application rolling.

","type":"html-textarea","required":false}]},{"type":"repeating_item","children":[{"title":"Question","key":"question","value":"How's your documentation?","type":"text","required":false},{"title":"Answer","key":"answer","value":"

Extensive. We take pride in our docs and keep them regularly updated.

","type":"html-textarea","required":false}]},{"type":"repeating_item","children":[{"title":"Question","key":"question","value":"I'm migrating from WordPress to headless CMS - what do I do?","type":"text","required":false},{"title":"Answer","key":"answer","value":"

We're working on compiling some extensive resources and migration guides for each use case, but for now, we offer migration assistance for anyone who's decided to take the leap with us over to Cosmic's Headless CMS platform. Reach out to us via our contact form or in our Slack Channel and we'll guide you and your development team through any questions you may have.

","type":"html-textarea","required":false}]}],"type":"repeater","title":"FAQs","key":"faqs","id":"Rr88Uo1oBL","value":"What is a headless CMS?","repeater_fields":[{"title":"Question","key":"question","value":"","type":"text","required":false},{"title":"Answer","key":"answer","value":"","type":"html-textarea","required":false}]}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"pages","created":"2014-05-31T17:24:05.368Z","order":1,"modified":"2015-01-26T03:48:22.839Z","files":"","modified_at":"2021-05-18T13:20:12.270Z","modified_by":"5357ef811693be2118000001","status":"published","publish_at":null,"published_at":"2021-05-18T13:20:12.270Z","unpublish_at":null,"thumbnail":"https://imgix.cosmicjs.com/deeb5c60-341b-11eb-9c4b-5ff458b1095b-modern-cms.png","metadata":{"faqs":[{"question":"What is a headless CMS?","answer":"

A headless content management system (headless CMS) is a kind of CMS that creates more inherent separation between the back-end and the front-end of your applications. This allows for lots of useful functionality - for example, plugging an application into new front-ends (think: websites, mobile phones, smart devices) becomes much easier - because your code doesn't have any dependencies on the front-end.

This is one, simple, example of what makes headless CMS so great. In our eyes, it's going to become a primary means of content management in the coming decade. Learn more about headless content management here.

"},{"question":"Is headless CMS right for me?","answer":"

Hard to say. Headless CMS is not for every team, but if you're looking to reduce development time spent on CMS infrastructure, you're definitely in the right place. If you want a content management system that integrates better with the accelerating API-based economy, headless will be great for you. If you want to enable better collaboration between the infamously siloed development and marketing teams, headless is your best bet. Learn more about how to decide if headless is the best choice for your business.

"},{"question":"What's the Jamstack?","answer":"

Jamstack refers to a new architecture of web and application development. In a nutshell, this architecture allows for a more modern approach to creating applications. It sets your application up for success as we move into a digital age that requires more flexible applications.

There are 2 ideas that make up the new Jamstack architecture - pre-rendering, and de-coupling. That de-coupling concept is where headless CMS comes in - a headless CMS de-couples the back-end of your application from the front-end.

"},{"question":"Is Cosmic open source?","answer":"

The core Cosmic product is not open source. But we do provide lots of open source resources and examples to help you get started quickly. Trust our team of experts to continually update our software to make sure your team is equipped with the most modern and secure content management software. We are your outsourced content management team. More secure, continuously updated, expertly managed CMS as a service.

"},{"question":"I'm a solo developer / freelancer, is Cosmic right for me?","answer":"

Of course! We have a vibrant Slack Community and welcome developers of any walk of life - enterprise long-haulers and the scrappy-freelancer alike.

"},{"question":"Is there a free plan?","answer":"

Our personal plan is free to use on any Bucket, for unlimited time, no restrictions. Enjoy.

"},{"question":"Do you have React / Vue / Angular / Next.js starter guides?","answer":"

All of the above, and more. Check out our documentation for quickstart guides for all your favorite frameworks, plus a wealth of open-source, pre-built starter apps for you to peruse and pick from if you'd like to use one to get your application rolling.

"},{"question":"How's your documentation?","answer":"

Extensive. We take pride in our docs and keep them regularly updated.

"},{"question":"I'm migrating from WordPress to headless CMS - what do I do?","answer":"

We're working on compiling some extensive resources and migration guides for each use case, but for now, we offer migration assistance for anyone who's decided to take the leap with us over to Cosmic's Headless CMS platform. Reach out to us via our contact form or in our Slack Channel and we'll guide you and your development team through any questions you may have.

"}]}},{"_id":"5ae38f736086f9690dc5aa77","order":1,"slug":"education-engineer","title":"Education Engineer","content":"

Cosmic is transforming the way content is created and delivered to the world. We provide a headless CMS to help teams build modern content-powered apps together.

We are currently looking for an Education Engineer to help create high-quality content to add more value for our customers.

If selected to join our team, you would be expected to be self-starting and provide quality, quantifiable results for our remote-first company.

Scope
The tasks will be:
- Maintain open source code
- Create step-by-step tutorials for building various use cases
- Create and maintain templates and extensions
- Create guides
- Create / maintain video content

Requirements
- Previous experience with creating high-quality developer education content (video preferred)

Other details
This is a remote position. If hired, you will engage in regular standups with the Cosmic team, directly reporting to the CEO. The role is half engineering (mostly frontend) and half marketing. Must be passionate about building great products and educational outreach. Design experience a plus.

Contact jobs@cosmicjs.com with the subject "Education Engineer" to apply.

","metafields":[{"children":null,"type":"textarea","title":"Teaser","key":"teaser","id":"et6SFofNwe","value":"Education Engineers are driven to help customers get the most value from Cosmic. We are currently looking for an Education Engineer to help create high-quality content to add more value for our customers."},{"children":null,"type":"text","title":"Font Awesome Icon","key":"font_awesome_icon","id":"5ZkQPZ2Y22","value":"fa-bullhorn"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"jobs","created_at":"2018-04-27T21:00:35.784Z","created_by":"5716b504e9c686d006000073","created":"2018-04-27T21:00:35.784Z","status":"published","modified_at":"2022-02-04T22:24:05.249Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-02-04T22:24:05.249Z","unpublish_at":null,"metadata":{"teaser":"Education Engineers are driven to help customers get the most value from Cosmic. We are currently looking for an Education Engineer to help create high-quality content to add more value for our customers.","font_awesome_icon":"fa-bullhorn"}},{"_id":"57859a0f1621de245c0004c5","order":1,"slug":"tony-spiro-ceo-co-founder","title":"Tony Spiro, CEO & Co-Founder","content":"

Tony Spiro is an experienced software engineer who knows the pain of content management in a team setting. From his experience leading digital teams from startups to Fortune 500 companies, he started Cosmic JS to solve his own problems in application development.

He is thrilled to help teams around the world use Cosmic JS to build amazing products together.

","metafields":[{"value":"3c056190-03cf-11e9-a674-8b21bc2bc0e1-me.jpg","key":"image","title":"Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/3c056190-03cf-11e9-a674-8b21bc2bc0e1-me.jpg","imgix_url":"https://imgix.cosmicjs.com/3c056190-03cf-11e9-a674-8b21bc2bc0e1-me.jpg"},{"value":"https://cosmicjs.com/tony","key":"cosmic","title":"Cosmic","type":"text","children":null},{"value":"https://twitter.com/tonyspiro","key":"twitter","title":"Twitter","type":"text","children":null},{"value":"https://www.linkedin.com/in/tonyspiro/","key":"linkedin","title":"Linkedin","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"people","created":"2016-07-13T01:31:59.156Z","status":"published","modified":"2016-08-05T22:19:20.200Z","modified_at":"2018-12-19T20:52:32.682Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-12-19T20:52:32.682Z","metadata":{"image":{"url":"https://cdn.cosmicjs.com/3c056190-03cf-11e9-a674-8b21bc2bc0e1-me.jpg","imgix_url":"https://imgix.cosmicjs.com/3c056190-03cf-11e9-a674-8b21bc2bc0e1-me.jpg"},"cosmic":"https://cosmicjs.com/tony","twitter":"https://twitter.com/tonyspiro","linkedin":"https://www.linkedin.com/in/tonyspiro/"}},{"_id":"5fb8316ce2cf050007d28d3b","order":1,"slug":"clever","title":"Clever","content":"","metafields":[{"children":null,"type":"file","title":"Logo","key":"logo","id":"beG0enqyz1","value":"de069370-59f3-11eb-9e0f-fd6e504bde0d-clever.png","url":"https://cdn.cosmicjs.com/de069370-59f3-11eb-9e0f-fd6e504bde0d-clever.png","imgix_url":"https://imgix.cosmicjs.com/de069370-59f3-11eb-9e0f-fd6e504bde0d-clever.png"},{"children":null,"type":"text","title":"SEO Description","key":"seo_description","id":"edqrUrbo7h","value":"Cosmic helps Clever Real Estate save their customers thousands on real estate fees."},{"children":null,"type":"text","title":"Brand Color","key":"brand_color","id":"xuCEjj1S52","value":"#3eb2ef"},{"children":null,"type":"file","title":"Background Image","key":"background_image","id":"evYIBkrznJ","value":"3b8959f0-2b74-11eb-8245-31a0d5eed227-list-with-clever-launch.jpg","url":"https://cdn.cosmicjs.com/3b8959f0-2b74-11eb-8245-31a0d5eed227-list-with-clever-launch.jpg","imgix_url":"https://imgix.cosmicjs.com/3b8959f0-2b74-11eb-8245-31a0d5eed227-list-with-clever-launch.jpg"},{"children":null,"type":"text","title":"Industry","key":"industry","id":"2U1EqYwJ5d","value":"Real Estate"},{"children":null,"type":"text","title":"Product","key":"product","id":"oUKz1ld6iy","value":"Agent Services & Software"},{"children":null,"type":"file","title":"Main Image","key":"main_image","id":"uN9UHKssCM","value":"e887b2a0-2b74-11eb-8245-31a0d5eed227-clever-makes-homebuying-easy.png","url":"https://cdn.cosmicjs.com/e887b2a0-2b74-11eb-8245-31a0d5eed227-clever-makes-homebuying-easy.png","imgix_url":"https://imgix.cosmicjs.com/e887b2a0-2b74-11eb-8245-31a0d5eed227-clever-makes-homebuying-easy.png"},{"children":[{"children":null,"type":"file","title":"Image","key":"image","id":"egD8ow9VxQ","value":"ee9d2990-2b74-11eb-8245-31a0d5eed227-clever-savings-form.png","url":"https://cdn.cosmicjs.com/ee9d2990-2b74-11eb-8245-31a0d5eed227-clever-savings-form.png","imgix_url":"https://imgix.cosmicjs.com/ee9d2990-2b74-11eb-8245-31a0d5eed227-clever-savings-form.png"},{"children":null,"type":"html-textarea","title":"Text","key":"text","id":"7HyJYyCoLJ","value":"

Clever was founded in late 2017 on a relatively straightforward premise - help homeowners save on real estate fees when buying or selling a home. The founders, Ben and Luke, wanted to do this while still providing great agent services, and a consistent source of leads to their agents. Working out of an apartment, Clever's founding team defined a strong culture in its early days. In particular, they cultivated tenacity, a passion for learning, and personal-growth in their team, and those values have served the company well. Today, Clever is a remote team of over 30 employees spread across the United States, all of whom share responsibility for helping hundreds of homeowners save over 26 million in Real Estate fees - so far.

As Clever was hitting its stride in early 2018, they brought on Donovan King to spearhead their efforts to migrate off of their old WordPress website. Donovan knew they were looking at migrating toward a more modern tech stack. Because Clever's solutions were handling loads of customer data on-site, in addition to managing their own content, they were not going to be well served by a traditional frontend and CMS. Gatsby and the Jamstack was the future of their site, and they needed a Headless CMS that had the flexibility to grow along with their solution.

"}],"type":"parent","title":"Section 1","key":"section_1","id":"zt8hulo6Wj","value":"

Clever was founded in late 2017 on a relatively straightforward premise - help homeowners save on real estate fees when buying or selling a home. The founders, Ben and Luke, wanted to do this while still providing great agent services, and a consistent source of leads to their agents. Working out of an apartment, Clever's founding team defined a strong culture in its early days. In particular, they cultivated tenacity, a passion for learning, and personal-growth in their team, and those values have served the company well. Today, Clever is a remote team of over 30 employees spread across the United States, all of whom share responsibility for helping hundreds of homeowners save over 26 million in Real Estate fees - so far.

As Clever was hitting its stride in early 2018, they brought on Donovan King to spearhead their efforts to migrate off of their old WordPress website. Donovan knew they were looking at migrating toward a more modern tech stack. Because Clever's solutions were handling loads of customer data on-site, in addition to managing their own content, they were not going to be well served by a traditional frontend and CMS. Gatsby and the Jamstack was the future of their site, and they needed a Headless CMS that had the flexibility to grow along with their solution.

"},{"children":[{"children":null,"type":"file","title":"Image","key":"image","id":"nrTETI3oh5","value":"3c33eba0-59f4-11eb-9e0f-fd6e504bde0d-clever-screenshot.png","url":"https://cdn.cosmicjs.com/3c33eba0-59f4-11eb-9e0f-fd6e504bde0d-clever-screenshot.png","imgix_url":"https://imgix.cosmicjs.com/3c33eba0-59f4-11eb-9e0f-fd6e504bde0d-clever-screenshot.png"},{"children":null,"type":"html-textarea","title":"Text","key":"text","id":"ZxF14oQWtT","value":"

Selecting a Headless CMS wasn't an easy decision. Donovan compared Cosmic to some of the leading competitors - Contentful being one - but ultimately, Cosmic came out on top. Why? Donovan says among other things, he liked our free trial options; because he was able to play around with the free personal plan, he realized the MVP features they'd be setting up would work best on an unopinionated, no-holds-barred CMS like Cosmic.

As Clever has rapidly grown, so too have their web applications. Cosmic has kept pace with their solutions the whole way. As they began managing more of their website content through Cosmic, Clever made use of Cosmic's plugin features to support their content team in their web content creation. Donovan decided he needed a more complex set of scripting libraries for Clever, and Cosmic's API access provided him everything he needed. Today, Clever is managing all of their website content through Cosmic, and is rapidly expanding into one of the leading real estate tech companies in the industry.

"}],"type":"parent","title":"Section 2","key":"section_2","id":"Uki8qS2HrT","value":"

Selecting a Headless CMS wasn't an easy decision. Donovan compared Cosmic to some of the leading competitors - Contentful being one - but ultimately, Cosmic came out on top. Why? Donovan says among other things, he liked our free trial options; because he was able to play around with the free personal plan, he realized the MVP features they'd be setting up would work best on an unopinionated, no-holds-barred CMS like Cosmic.

As Clever has rapidly grown, so too have their web applications. Cosmic has kept pace with their solutions the whole way. As they began managing more of their website content through Cosmic, Clever made use of Cosmic's plugin features to support their content team in their web content creation. Donovan decided he needed a more complex set of scripting libraries for Clever, and Cosmic's API access provided him everything he needed. Today, Clever is managing all of their website content through Cosmic, and is rapidly expanding into one of the leading real estate tech companies in the industry.

"},{"children":[{"children":null,"type":"file","title":"Image","key":"image","id":"AJUlIyOBeE","value":"fcc9dae0-2b74-11eb-8245-31a0d5eed227-clever-square-logo.jpg","url":"https://cdn.cosmicjs.com/fcc9dae0-2b74-11eb-8245-31a0d5eed227-clever-square-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/fcc9dae0-2b74-11eb-8245-31a0d5eed227-clever-square-logo.jpg"},{"children":null,"type":"text","title":"Author","key":"author","id":"nP3iHkgLcN","value":"Donovan King - Lead Front-end Engineer"},{"children":null,"type":"textarea","title":"Text","key":"text","id":"yOtOebMMcf","value":"One thing that's fantastic about Cosmic is the Customer Service. There have been several occasions where we had a direct line via Slack to the CEO and Cosmic had changes pushed the same day. One time I think they had a hotfix for us live to their servers in less than 45 minutes! Currently, Cosmic is the primary route for how we're publishing content - due to how flexible it is, how unopinionated it is about data schema, and other features like that. We've been able to implement some pretty complex structures on top of it. Our website structure, individual components, and much more are built in Cosmic."}],"type":"parent","title":"Testimonial Section","key":"testimonial_section","id":"SvdD20RqSe","value":"Donovan King - Lead Front-end Engineer"},{"children":null,"type":"switch","title":"Featured on Home","key":"featured_on_home","id":"ClN2ephHQz","value":false,"options":"yes,no"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"customers","created_at":"2020-11-20T21:13:16.546Z","created_by":"5f8088982aa32f00093977bb","modified_at":"2021-02-16T21:45:50.789Z","created":"2020-11-20T21:13:16.546Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/fcc9dae0-2b74-11eb-8245-31a0d5eed227-clever-square-logo.jpg","modified_by":"5f8088982aa32f00093977bb","publish_at":null,"unpublish_at":null,"published_at":"2021-02-16T21:45:50.789Z","metadata":{"logo":{"url":"https://cdn.cosmicjs.com/de069370-59f3-11eb-9e0f-fd6e504bde0d-clever.png","imgix_url":"https://imgix.cosmicjs.com/de069370-59f3-11eb-9e0f-fd6e504bde0d-clever.png"},"seo_description":"Cosmic helps Clever Real Estate save their customers thousands on real estate fees.","brand_color":"#3eb2ef","background_image":{"url":"https://cdn.cosmicjs.com/3b8959f0-2b74-11eb-8245-31a0d5eed227-list-with-clever-launch.jpg","imgix_url":"https://imgix.cosmicjs.com/3b8959f0-2b74-11eb-8245-31a0d5eed227-list-with-clever-launch.jpg"},"industry":"Real Estate","product":"Agent Services & Software","main_image":{"url":"https://cdn.cosmicjs.com/e887b2a0-2b74-11eb-8245-31a0d5eed227-clever-makes-homebuying-easy.png","imgix_url":"https://imgix.cosmicjs.com/e887b2a0-2b74-11eb-8245-31a0d5eed227-clever-makes-homebuying-easy.png"},"section_1":{"image":{"url":"https://cdn.cosmicjs.com/ee9d2990-2b74-11eb-8245-31a0d5eed227-clever-savings-form.png","imgix_url":"https://imgix.cosmicjs.com/ee9d2990-2b74-11eb-8245-31a0d5eed227-clever-savings-form.png"},"text":"

Clever was founded in late 2017 on a relatively straightforward premise - help homeowners save on real estate fees when buying or selling a home. The founders, Ben and Luke, wanted to do this while still providing great agent services, and a consistent source of leads to their agents. Working out of an apartment, Clever's founding team defined a strong culture in its early days. In particular, they cultivated tenacity, a passion for learning, and personal-growth in their team, and those values have served the company well. Today, Clever is a remote team of over 30 employees spread across the United States, all of whom share responsibility for helping hundreds of homeowners save over 26 million in Real Estate fees - so far.

As Clever was hitting its stride in early 2018, they brought on Donovan King to spearhead their efforts to migrate off of their old WordPress website. Donovan knew they were looking at migrating toward a more modern tech stack. Because Clever's solutions were handling loads of customer data on-site, in addition to managing their own content, they were not going to be well served by a traditional frontend and CMS. Gatsby and the Jamstack was the future of their site, and they needed a Headless CMS that had the flexibility to grow along with their solution.

"},"section_2":{"image":{"url":"https://cdn.cosmicjs.com/3c33eba0-59f4-11eb-9e0f-fd6e504bde0d-clever-screenshot.png","imgix_url":"https://imgix.cosmicjs.com/3c33eba0-59f4-11eb-9e0f-fd6e504bde0d-clever-screenshot.png"},"text":"

Selecting a Headless CMS wasn't an easy decision. Donovan compared Cosmic to some of the leading competitors - Contentful being one - but ultimately, Cosmic came out on top. Why? Donovan says among other things, he liked our free trial options; because he was able to play around with the free personal plan, he realized the MVP features they'd be setting up would work best on an unopinionated, no-holds-barred CMS like Cosmic.

As Clever has rapidly grown, so too have their web applications. Cosmic has kept pace with their solutions the whole way. As they began managing more of their website content through Cosmic, Clever made use of Cosmic's plugin features to support their content team in their web content creation. Donovan decided he needed a more complex set of scripting libraries for Clever, and Cosmic's API access provided him everything he needed. Today, Clever is managing all of their website content through Cosmic, and is rapidly expanding into one of the leading real estate tech companies in the industry.

"},"testimonial_section":{"image":{"url":"https://cdn.cosmicjs.com/fcc9dae0-2b74-11eb-8245-31a0d5eed227-clever-square-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/fcc9dae0-2b74-11eb-8245-31a0d5eed227-clever-square-logo.jpg"},"author":"Donovan King - Lead Front-end Engineer","text":"One thing that's fantastic about Cosmic is the Customer Service. There have been several occasions where we had a direct line via Slack to the CEO and Cosmic had changes pushed the same day. One time I think they had a hotfix for us live to their servers in less than 45 minutes! Currently, Cosmic is the primary route for how we're publishing content - due to how flexible it is, how unopinionated it is about data schema, and other features like that. We've been able to implement some pretty complex structures on top of it. Our website structure, individual components, and much more are built in Cosmic."},"featured_on_home":false}},{"_id":"5ef38693de201700072ef9d7","slug":"headless-cms-comparison-home","title":"Headless CMS Comparison Home","content":"

The purpose of this Headless CMS comparison page is to outline the differences between the Cosmic Headless CMS and a traditional installed CMS. By comparing technology, maintenance, security, features, and cost analysis, it is our goal to show you the benefits and tradeoffs to help you decide if the Cosmic Headless CMS is the right solution for your team.

","metafields":[{"children":null,"type":"file","title":"Logo","key":"logo","id":"vWHwCupBhR","value":"5abbde00-b564-11ea-a2b3-f17f1f2fdbda-wordpress-headless-cms.jpg","url":"https://cdn.cosmicjs.com/5abbde00-b564-11ea-a2b3-f17f1f2fdbda-wordpress-headless-cms.jpg","imgix_url":"https://imgix.cosmicjs.com/5abbde00-b564-11ea-a2b3-f17f1f2fdbda-wordpress-headless-cms.jpg"},{"children":null,"type":"textarea","title":"Tech","key":"tech","id":"EAyZgOIEWF","value":"LAMP: Linux, Apache, MySQL database, PHP."},{"children":null,"type":"textarea","title":"Scalability","key":"scalability","id":"x18JDtGCfS","value":"Does not scale easily. Limited by your servers, hosting provider, and budget."},{"children":null,"type":"textarea","title":"Security","key":"security","id":"ahkYpcaiv1","value":"You manage the security yourself. No default data encryption at rest or in transit."},{"children":null,"type":"textarea","title":"Maintenance","key":"maintenance","id":"W6tAppjiz6","value":"You deploy, host, and maintain everything yourself. Along with your application and content, you need to maintain updates and security for your CMS system."},{"children":null,"type":"textarea","title":"Caching","key":"caching","id":"avXekcOhkk","value":"No caching included out of the box."},{"children":null,"type":"textarea","title":"Media CDN","key":"media_cdn","id":"20sex59kzp","value":"No CDN included out of the box."},{"children":null,"type":"textarea","title":"Image Processing","key":"image_processing","id":"ZwXLHLbjbj","value":"Manually manage your own image sizes and optimizations."},{"children":null,"type":"textarea","title":"Extendability","key":"extendability","id":"hG2Ffk8pnr","value":"Themes and plugins."},{"children":null,"type":"textarea","title":"Front end","key":"front_end","id":"jbAFGYWqcX","value":"Front end is coupled with backend CMS."},{"children":null,"type":"textarea","title":"Number of Projects","key":"number_of_projects","id":"057LDyc7Ne","value":"One login, one website."},{"children":null,"type":"html-textarea","title":"Costs","key":"costs","id":"nn454l5GQ7","value":"

You will need to hire developer resources. Average salary of a full-stack developer is $111,600 per year. You may need to hire 1-3 developers to maintain the CMS.

"},{"children":null,"type":"text","title":"Vendor Name","key":"vendor_name","id":"sUi2f8xIXQ","value":"Traditional CMS"},{"children":null,"type":"switch","title":"Include in link list","key":"include_in_link_list","id":"xoN7TUQtJs","value":false,"options":"yes,no"},{"children":null,"type":"text","title":"Cost Value","key":"cost_value","id":"dHyCTj9bWH","value":"$223,200"},{"children":null,"type":"text","title":"Cost Text","key":"cost_text","id":"KGAOTZOyTy","value":"per year"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"cms-competitors","created":"2020-06-24T17:00:03.069Z","created_at":"2020-06-24T17:00:03.069Z","modified_at":"2020-06-30T18:57:24.069Z","status":"published","locale":null,"modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-06-30T18:57:24.069Z","unpublish_at":null,"order":1,"metadata":{"logo":{"url":"https://cdn.cosmicjs.com/5abbde00-b564-11ea-a2b3-f17f1f2fdbda-wordpress-headless-cms.jpg","imgix_url":"https://imgix.cosmicjs.com/5abbde00-b564-11ea-a2b3-f17f1f2fdbda-wordpress-headless-cms.jpg"},"tech":"LAMP: Linux, Apache, MySQL database, PHP.","scalability":"Does not scale easily. Limited by your servers, hosting provider, and budget.","security":"You manage the security yourself. No default data encryption at rest or in transit.","maintenance":"You deploy, host, and maintain everything yourself. Along with your application and content, you need to maintain updates and security for your CMS system.","caching":"No caching included out of the box.","media_cdn":"No CDN included out of the box.","image_processing":"Manually manage your own image sizes and optimizations.","extendability":"Themes and plugins.","front_end":"Front end is coupled with backend CMS.","number_of_projects":"One login, one website.","costs":"

You will need to hire developer resources. Average salary of a full-stack developer is $111,600 per year. You may need to hire 1-3 developers to maintain the CMS.

","vendor_name":"Traditional CMS","include_in_link_list":false,"cost_value":"$223,200","cost_text":"per year"}},{"_id":"6421de49294c3f00080fc8f1","order":1,"slug":"cosmic-dashboard-now-in-public-beta","title":"Cosmic dashboard now in public beta","content":"

We are happy to announce the public beta release of the new Cosmic dashboard. You can now sign up and begin using the new dashboard and API v3 for your production applications.

Click the link below to begin onboarding to the new dashboard. Read on to learn more about all of the new updates and features.


Dashboard updates

This release includes the following updates to the dashboard.

New markdown editor
We have completely redesigned our markdown Metafield editor. New features include:

Object type organization
It's now easier than ever to organize your Object types into folders. With the ability to add / edit / remove Object types from folders from the Object type table and edit view, this should come as a welcome feature for customers who manage lots of Object types.

More updates

Along with the public beta release of the dashboard, we have a few more exciting announcements.

New Cosmic logo
We have updated our logo to better tell our story as both a technical and creative leader in the content management space. Go to the about page to download the latest brand assets.


New documentation
We have a beautiful new documentation site to accompany the new dashboard. Browse the new dashboard features and learn about the latest capabilities with the new Cosmic API v3.


Cosmic JavaScript SDK
We have a new Cosmic JavaScript SDK which comes with lots of updates and improvements including:

Install with:

npm i @cosmicjs/sdk


Go to the NPM website page for the Cosmic JavaScript SDK for more info and read the public beta release changelog to learn more details regarding these updates.

We're excited to onboard your team to the new dashboard and help you integrate your content using the new API resources. If you would like dedicated help with migration, please contact Cosmic support with subject "Dashboard migration help" and we will follow up with assistance. We can't wait to see what you build!

","metafields":[{"children":null,"type":"object","title":"Author","key":"author","id":"vTPlun9p4R","value":"5ffa1d1e0046b0000799cb7b","required":true,"object_type":"authors","object":{"_id":"5ffa1d1e0046b0000799cb7b","slug":"cosmic","title":"Cosmic","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"ZogvxZg6OL","value":""},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D0qLJ4RPBe","value":"10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2021-01-09T21:16:14.533Z","created_by":"5357ef811693be2118000001","modified_at":"2021-01-09T21:18:26.147Z","created":"2021-01-09T21:16:14.533Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/e55ef990-52bf-11eb-986d-4d7ff5faa3ab-logo.svg","published_at":"2021-01-09T21:18:26.147Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null}},{"children":null,"type":"html-textarea","title":"Teaser","key":"teaser","id":"hefNAoa29C","value":"

We are excited to announce the new Cosmic dashboard is now available in public beta.

"},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"22Pdkx9ov4","value":"80d92080-ccdf-11ed-a5c3-fb6dd2500767-cosmic-public-beta.png","url":"https://cdn.cosmicjs.com/80d92080-ccdf-11ed-a5c3-fb6dd2500767-cosmic-public-beta.png","imgix_url":"https://imgix.cosmicjs.com/80d92080-ccdf-11ed-a5c3-fb6dd2500767-cosmic-public-beta.png"},{"children":null,"type":"textarea","title":"SEO Meta Description","key":"seo_meta_description","id":"UbH2vcFJ3x","value":"We are excited to announce the new Cosmic dashboard is now available in public beta."},{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"alQvUvqXkK","value":"2023-04-04"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2023-03-27T18:19:52.943Z","created_by":"5357ef811693be2118000001","modified_at":"2023-04-04T14:55:20.719Z","created":"2023-03-27T18:19:52.943Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/80d92080-ccdf-11ed-a5c3-fb6dd2500767-cosmic-public-beta.png","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2023-04-04T14:55:20.719Z","metadata":{"author":{"_id":"5ffa1d1e0046b0000799cb7b","slug":"cosmic","title":"Cosmic","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"ZogvxZg6OL","value":""},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D0qLJ4RPBe","value":"10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2021-01-09T21:16:14.533Z","created_by":"5357ef811693be2118000001","modified_at":"2021-01-09T21:18:26.147Z","created":"2021-01-09T21:16:14.533Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/e55ef990-52bf-11eb-986d-4d7ff5faa3ab-logo.svg","published_at":"2021-01-09T21:18:26.147Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"metadata":{"username":"","profile_picture":{"url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}}},"teaser":"

We are excited to announce the new Cosmic dashboard is now available in public beta.

","featured_image":{"url":"https://cdn.cosmicjs.com/80d92080-ccdf-11ed-a5c3-fb6dd2500767-cosmic-public-beta.png","imgix_url":"https://imgix.cosmicjs.com/80d92080-ccdf-11ed-a5c3-fb6dd2500767-cosmic-public-beta.png"},"seo_meta_description":"We are excited to announce the new Cosmic dashboard is now available in public beta.","published_date":"2023-04-04"}},{"_id":"5f6b848200e4af0007910981","order":1,"slug":"vuetify-builds-powerful-applications-cosmic","title":"Vuetify Uses Cosmic to Super-Charge Shopify Content Management","content":"

\"Vuetify


Since its founding in 2016, Vuetify has rapidly grown to become one of the leading component libraries for creating powerful Vue applications. Led by founder John Leider, the Vuetify teams' meticulous focus on creating systems that are intuitive and easy-to-use has allowed them to quickly realize great success in their space.

But in early 2020, Vuetify had a problem. Their online store was completely integrated into Shopify's back-end platform, and getting this API to communicate with the front-end of their website was far too slow and required too many queries.


\"Vuetify's

Vuetify's verbose marketplace is one of their strongest features, but managing it through the Shopify backend was cumbersome and slow, so they turned to Cosmic


On top of that, due to Vuetify's rapid expansion in recent years, they were now managing all different kinds of documents, affiliate links, and sponsors in their original code base. This was quickly becoming sub-optimal. Vuetify needed to find an API that matched their appreciation for intuitive design, and integrated all the flexible features they required. After evaluating their options, nothing seemed like the right combination of those values for Vuetify, except for Cosmic.

\"Vuetify

Vuetify allows its clients to build diverse and powerful applications, 
and Cosmic helps them manage various data types to do so


Cosmic's focus on catering the UI to developers and apparent intuition of common development challenges meant that Vuetify was able to quickly implement the fixes they needed to get data pulled out of the Shopify back-end and onto their front-end site. As CEO & founder John Leider put it:

"It was literally 10 to 15 minutes from taking the SDK, to getting the data I needed, to consuming it. We cut our server response time down from 300-400 ms to about 50 ms. Instead of needing to query the Shopify API, now we only need to query\r\nCosmic. The baseline just works out-of-the-box, and there's considerable more information and documentation if you need it."

— John Leider, Chief Executive Officer


Today, Vuetify is primarily using Cosmic to clean up their code base, reduce the need for commits, trigger a webhook to cache their Shopify products, and a handful of other tasks that has optimized both their user-experience and their workflow.

","metafields":[{"children":null,"type":"text","title":"Company","key":"company","id":"UQcL36yJNo","value":"Vuetify"},{"children":null,"type":"text","title":"Industry Type","key":"industry_type","id":"WCtKDiuff0","value":"Internet Technology"},{"children":null,"type":"textarea","title":"Teaser","key":"teaser","id":"YuQ6hy2e1d","value":"Vuetify has rapidly become one of the leading component libraries for Vue applications, but their back-end was a headache to manage. Learn how Cosmic helped them solve their challenge, and a few more along the way."},{"children":null,"type":"file","title":"Logo","key":"logo","id":"Kcbdwh7RgM","value":"08b5b190-0270-11eb-be35-433e751f849e-github-social-preview.png","url":"https://cdn.cosmicjs.com/08b5b190-0270-11eb-be35-433e751f849e-github-social-preview.png","imgix_url":"https://imgix.cosmicjs.com/08b5b190-0270-11eb-be35-433e751f849e-github-social-preview.png"},{"children":null,"type":"text","title":"Redirect Path","key":"redirect_path","id":"th15yqrwkhn0ja4ft3co","value":"/customers/vuetify"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2020-09-23T17:23:14.662Z","created_by":"5f1352f9d677c00008cf38b0","modified_at":"2020-11-05T20:42:55.330Z","created":"2020-09-23T17:23:14.662Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/08b5b190-0270-11eb-be35-433e751f849e-github-social-preview.png","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2020-11-05T20:42:55.330Z","metadata":{"company":"Vuetify","industry_type":"Internet Technology","teaser":"Vuetify has rapidly become one of the leading component libraries for Vue applications, but their back-end was a headache to manage. Learn how Cosmic helped them solve their challenge, and a few more along the way.","logo":{"url":"https://cdn.cosmicjs.com/08b5b190-0270-11eb-be35-433e751f849e-github-social-preview.png","imgix_url":"https://imgix.cosmicjs.com/08b5b190-0270-11eb-be35-433e751f849e-github-social-preview.png"},"redirect_path":"/customers/vuetify"}},{"_id":"5d235a2a6302053e6c92d996","slug":"headless-cms-for-blogs","title":"Headless CMS for Blogs","content":"

The Cosmic Headless CMS provides a flexible and scalable content management experience for developers and content creators alike. Companies manage their blog content using the Cosmic CMS because it’s intuitive to manage content, approval workflows and team members. With features like Revision History, Content Preview and Scheduled Publishing, your team can build apps and manage content faster, together. 


Whether you're building a new blog or migrating an existing one, Cosmic provides easy content modeling and migration tools to help you get started. 

","metafields":[{"children":null,"type":"text","title":"Solution Name","key":"solution_name","id":"wrrNtMopy4","value":"Blogs"},{"children":null,"type":"file","title":"Image","key":"image","id":"ZJpUv99pj7","value":"ec1d5de0-9dc0-11e9-a5b4-e5df9f8049d3-Hackernoon.png","url":"https://cdn.cosmicjs.com/ec1d5de0-9dc0-11e9-a5b4-e5df9f8049d3-Hackernoon.png","imgix_url":"https://imgix.cosmicjs.com/ec1d5de0-9dc0-11e9-a5b4-e5df9f8049d3-Hackernoon.png"},{"children":null,"type":"objects","title":"Case Studies","key":"case_studies","id":"SRzTWZot04","value":"5c8a83a0792f9825b48d8133,5a2455620cb0e3291c00002e,59f102cbd4de657279002f97","object_type":"case-studies","objects":[{"_id":"5c8a83a0792f9825b48d8133","slug":"movespring-delivers-health-resources-using-cosmic-js","title":"MoveSpring Delivers Health Resources using Cosmic","content":"

MoveSpring is a fun, easy-to-use activity and steps challenge platform. Step your way to success with quick onboarding, real-time scoring, and flexible plan options. MoveSpring is used by organizations like Best Buy, Deloitte and the American Cancer Society to make health a priority, and fun, for their employees. 



MoveSpring manages multiple content resource sections for its users, broken out by Product, Wellness, Tips and Tricks as well as Technology. The team needed a way to easily add blog and help sections that a non-technical content creator could manage. They were able to quickly model and create their content, integrate the content with their website and add their content creators to start publishing and managing dynamic content. 




"We previously used WordPress for our blog content, but found that we really wanted to utilize the same toolset (React / GraphQL) and have the same look and feel as the rest of our site, which can be challenging for a developer not familiar with WordPress. 

Additionally, we have other dynamic content we would like our Customer Success Managers and Sales team to drive without relying on our development team to build and deploy. After discovering Cosmic, our developer was able to get our new blog up and running within days. Cosmic worked exactly how we hoped it would.”

— John Contreras, CEO  

","metafields":[{"children":null,"type":"text","title":"Company","key":"company","id":"g8E7TAzNzb","value":"MoveSpring"},{"children":null,"type":"text","title":"Industry Type","key":"industry_type","id":"IazxVO2F44","value":"Health and Wellness"},{"children":null,"type":"textarea","title":"Teaser","key":"teaser","id":"MdNSCJJ6KM","value":"From the creators of Stridekick, MoveSpring is a fun, easy-to-use activity challenge platform. Step your way to success with quick onboarding, real-time scoring, and flexible plan options. MoveSpring is used by organizations like Best Buy, Deloitte and the American Cancer Society to make health a priority, and fun, for their employees. \n\n\n\n"},{"children":null,"type":"file","title":"Logo","key":"logo","id":"z7uTNVr5hZ","value":"ee70e3e0-4f29-11e9-a314-fdf908b370ef-1z3YLQ0400x400.jpg","url":"https://cdn.cosmicjs.com/ee70e3e0-4f29-11e9-a314-fdf908b370ef-1z3YLQ0400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/ee70e3e0-4f29-11e9-a314-fdf908b370ef-1z3YLQ0400x400.jpg"},{"children":null,"type":"text","title":"Redirect Path","key":"redirect_path","id":"th15yqrwkhn0ja4ft3co","value":"/customers/movespring"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2019-03-14T16:38:56.354Z","status":"published","modified_at":"2020-11-05T20:43:27.287Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-11-05T20:43:27.287Z","unpublish_at":null},{"_id":"5a2455620cb0e3291c00002e","slug":"acculevel-deploys-a-blog","title":"Acculevel Deploys a Blog","content":"

Acculevel is Your Foundation Expert. Serving the Midwest United States for the last 20 years, Acculevel knows what it means to serve and do a job right. Customer retention, reviews and loyalty are the name of their game, so to optimize these efforts and keep customers engaged and informed, Acculevel is scaling up their digital presence through its upcoming website, a new mobile application and more. Led by a new Chief Technology Officer overseeing developers and content editors, here's how Acculevel is ensuring their own foundation is solid.

Mired in an installed WordPress system was leaving Acculevel without the flexibility needed to nimbly build and publish content campaigns to engage with customers. Acculevel's tech team is currently building out a new zippy website built on a Node.js stack, complete with API integrations for ACH Authentication (Plaid) and Payment Gateway (Stripe). Acculevel needed a blog feed that would allow their new API-first methodology to pull data via the cloud while allowing their content editors to easily build and manage content in a WYSIWYG editor. With Cosmic, they were able to build and deploy a fully functioning blog in under 30 minutes.



"Cosmic provided us with a seamless on-boarding experience for creating a Bucket to manage blog content for our growing organization. We needed a programming-language agnostic API to manage content both within our existing WordPress website as well as within our new Node.js web application. Cosmic fit the bill perfectly with its simple Object schema and powerful Metafields. With Cosmic, content is just data and you can pull it however you'd like, wherever you like, allowing us  to build new tools in the future such as survey tools, employee forums and more.”

— Dylan Marsh, Chief Technology Officer  

","metafields":[{"value":"Acculevel ","key":"company","title":"Company","type":"text","children":null},{"value":"Construction","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Acculevel needed a blog feed that would allow their new API-first methodology to pull data via the cloud while allowing their content editor to easily build and manage content in a WYSIWYG editor. With Cosmic, they were able to build and deploy a fully functioning blog in under 30 minutes.\n\n\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"7621bb20-dab4-11e7-82e3-e92aaea009f5-o.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/7621bb20-dab4-11e7-82e3-e92aaea009f5-o.jpg","imgix_url":"https://imgix.cosmicjs.com/7621bb20-dab4-11e7-82e3-e92aaea009f5-o.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2017-12-03T19:49:54.515Z","created_by":"5716b504e9c686d006000073","created":"2017-12-03T19:49:54.515Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5357ef811693be2118000001","publish_at":null},{"_id":"59f102cbd4de657279002f97","slug":"datalyze-solutions-adds-blog-and-job-feeds","title":"Datalyze Solutions Adds a Blog Feed","content":"

Data. Intelligence. Applications. Location Based Analytics. When everything is converging, teams needs collaboration tools to make their lives easier. That's why Datalyze Solutions chooses Cosmic to deliver its content from the cloud for its Blog feeds. 



"Cosmic has been in use at Datalyze Solutions for more than one and a half years. Cosmic has become a critically important tool for us to publish blog posts quickly and easily. This way, our customers and partners can stay informed about the latest news from our company and other industry-relevant information. Cosmic offers exactly the flexibility and features we really need as content editors!"

— Carolin Bauer, Content Editor and Marketing Manager

","metafields":[{"value":"Datalyze Solutions","key":"company","title":"Company","type":"text","children":null},{"value":"Internet","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Data. Intelligence. Applications. Location Based Analytics. When everything is converging, teams needs collaboration tools to make their lives easier.","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"b4173bb0-dc2d-11e7-9201-fb5838341592-DS_Logo_Blau.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/b4173bb0-dc2d-11e7-9201-fb5838341592-DS_Logo_Blau.png","imgix_url":"https://imgix.cosmicjs.com/b4173bb0-dc2d-11e7-9201-fb5838341592-DS_Logo_Blau.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2017-10-25T21:31:55.033Z","created_by":"5716b504e9c686d006000073","created":"2017-10-25T21:31:55.033Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null}]},{"children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"simple-blog","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"react-static-blog","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"simple-vue-blog","type":"text","required":false}]}],"type":"repeater","title":"App Slugs","key":"app_slugs","id":"pFbkY7SWFv","value":"simple-blog","repeater_fields":[{"title":"Slug","key":"slug","value":"","type":"text","required":false}]},{"children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"onesignal","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"unsplash-photos","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"wordpress-importer","type":"text","required":false}]}],"type":"repeater","title":"Extension Slugs","key":"extension_slugs","id":"3sj4w3beMT","value":"onesignal","repeater_fields":[{"title":"Slug","key":"slug","value":"","type":"text","required":false}]},{"children":null,"type":"html-textarea","title":"Testimonial","key":"testimonial","id":"NErgVY5OCM","value":"

"When the opportunity to work with Cosmic came up, I jumped on the opportunity. Using an API-first content management platform like Cosmic was perfect (and super simple) for connecting best-in-class services like Algolia for search and SendGrid for email.  In terms of providing the framework for teams to quickly build quality professional apps, Cosmic is definitely onto something.”

"},{"children":null,"type":"text","title":"Testimonial Credit","key":"testimonial_credit","id":"n74ogsWZ8P","value":"David Smooke, CEO at Hacker Noon"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"solutions","created":"2019-07-08T14:58:50.360Z","created_at":"2019-07-08T14:58:50.360Z","modified_at":"2020-08-10T14:05:12.245Z","status":"published","locale":null,"published_at":"2020-06-16T20:50:30.706Z","modified_by":"5357ef811693be2118000001","publish_at":null,"order":1,"unpublish_at":null,"metadata":{"solution_name":"Blogs","image":{"url":"https://cdn.cosmicjs.com/ec1d5de0-9dc0-11e9-a5b4-e5df9f8049d3-Hackernoon.png","imgix_url":"https://imgix.cosmicjs.com/ec1d5de0-9dc0-11e9-a5b4-e5df9f8049d3-Hackernoon.png"},"case_studies":[{"_id":"5c8a83a0792f9825b48d8133","slug":"movespring-delivers-health-resources-using-cosmic-js","title":"MoveSpring Delivers Health Resources using Cosmic","content":"

MoveSpring is a fun, easy-to-use activity and steps challenge platform. Step your way to success with quick onboarding, real-time scoring, and flexible plan options. MoveSpring is used by organizations like Best Buy, Deloitte and the American Cancer Society to make health a priority, and fun, for their employees. 



MoveSpring manages multiple content resource sections for its users, broken out by Product, Wellness, Tips and Tricks as well as Technology. The team needed a way to easily add blog and help sections that a non-technical content creator could manage. They were able to quickly model and create their content, integrate the content with their website and add their content creators to start publishing and managing dynamic content. 




"We previously used WordPress for our blog content, but found that we really wanted to utilize the same toolset (React / GraphQL) and have the same look and feel as the rest of our site, which can be challenging for a developer not familiar with WordPress. 

Additionally, we have other dynamic content we would like our Customer Success Managers and Sales team to drive without relying on our development team to build and deploy. After discovering Cosmic, our developer was able to get our new blog up and running within days. Cosmic worked exactly how we hoped it would.”

— John Contreras, CEO  

","metafields":[{"children":null,"type":"text","title":"Company","key":"company","id":"g8E7TAzNzb","value":"MoveSpring"},{"children":null,"type":"text","title":"Industry Type","key":"industry_type","id":"IazxVO2F44","value":"Health and Wellness"},{"children":null,"type":"textarea","title":"Teaser","key":"teaser","id":"MdNSCJJ6KM","value":"From the creators of Stridekick, MoveSpring is a fun, easy-to-use activity challenge platform. Step your way to success with quick onboarding, real-time scoring, and flexible plan options. MoveSpring is used by organizations like Best Buy, Deloitte and the American Cancer Society to make health a priority, and fun, for their employees. \n\n\n\n"},{"children":null,"type":"file","title":"Logo","key":"logo","id":"z7uTNVr5hZ","value":"ee70e3e0-4f29-11e9-a314-fdf908b370ef-1z3YLQ0400x400.jpg","url":"https://cdn.cosmicjs.com/ee70e3e0-4f29-11e9-a314-fdf908b370ef-1z3YLQ0400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/ee70e3e0-4f29-11e9-a314-fdf908b370ef-1z3YLQ0400x400.jpg"},{"children":null,"type":"text","title":"Redirect Path","key":"redirect_path","id":"th15yqrwkhn0ja4ft3co","value":"/customers/movespring"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2019-03-14T16:38:56.354Z","status":"published","modified_at":"2020-11-05T20:43:27.287Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-11-05T20:43:27.287Z","unpublish_at":null,"metadata":{"company":"MoveSpring","industry_type":"Health and Wellness","teaser":"From the creators of Stridekick, MoveSpring is a fun, easy-to-use activity challenge platform. Step your way to success with quick onboarding, real-time scoring, and flexible plan options. MoveSpring is used by organizations like Best Buy, Deloitte and the American Cancer Society to make health a priority, and fun, for their employees. \n\n\n\n","logo":{"url":"https://cdn.cosmicjs.com/ee70e3e0-4f29-11e9-a314-fdf908b370ef-1z3YLQ0400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/ee70e3e0-4f29-11e9-a314-fdf908b370ef-1z3YLQ0400x400.jpg"},"redirect_path":"/customers/movespring"}},{"_id":"5a2455620cb0e3291c00002e","slug":"acculevel-deploys-a-blog","title":"Acculevel Deploys a Blog","content":"

Acculevel is Your Foundation Expert. Serving the Midwest United States for the last 20 years, Acculevel knows what it means to serve and do a job right. Customer retention, reviews and loyalty are the name of their game, so to optimize these efforts and keep customers engaged and informed, Acculevel is scaling up their digital presence through its upcoming website, a new mobile application and more. Led by a new Chief Technology Officer overseeing developers and content editors, here's how Acculevel is ensuring their own foundation is solid.

Mired in an installed WordPress system was leaving Acculevel without the flexibility needed to nimbly build and publish content campaigns to engage with customers. Acculevel's tech team is currently building out a new zippy website built on a Node.js stack, complete with API integrations for ACH Authentication (Plaid) and Payment Gateway (Stripe). Acculevel needed a blog feed that would allow their new API-first methodology to pull data via the cloud while allowing their content editors to easily build and manage content in a WYSIWYG editor. With Cosmic, they were able to build and deploy a fully functioning blog in under 30 minutes.



"Cosmic provided us with a seamless on-boarding experience for creating a Bucket to manage blog content for our growing organization. We needed a programming-language agnostic API to manage content both within our existing WordPress website as well as within our new Node.js web application. Cosmic fit the bill perfectly with its simple Object schema and powerful Metafields. With Cosmic, content is just data and you can pull it however you'd like, wherever you like, allowing us  to build new tools in the future such as survey tools, employee forums and more.”

— Dylan Marsh, Chief Technology Officer  

","metafields":[{"value":"Acculevel ","key":"company","title":"Company","type":"text","children":null},{"value":"Construction","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Acculevel needed a blog feed that would allow their new API-first methodology to pull data via the cloud while allowing their content editor to easily build and manage content in a WYSIWYG editor. With Cosmic, they were able to build and deploy a fully functioning blog in under 30 minutes.\n\n\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"7621bb20-dab4-11e7-82e3-e92aaea009f5-o.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/7621bb20-dab4-11e7-82e3-e92aaea009f5-o.jpg","imgix_url":"https://imgix.cosmicjs.com/7621bb20-dab4-11e7-82e3-e92aaea009f5-o.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2017-12-03T19:49:54.515Z","created_by":"5716b504e9c686d006000073","created":"2017-12-03T19:49:54.515Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5357ef811693be2118000001","publish_at":null,"metadata":{"company":"Acculevel ","industry_type":"Construction","teaser":"Acculevel needed a blog feed that would allow their new API-first methodology to pull data via the cloud while allowing their content editor to easily build and manage content in a WYSIWYG editor. With Cosmic, they were able to build and deploy a fully functioning blog in under 30 minutes.\n\n\n","logo":{"url":"https://cdn.cosmicjs.com/7621bb20-dab4-11e7-82e3-e92aaea009f5-o.jpg","imgix_url":"https://imgix.cosmicjs.com/7621bb20-dab4-11e7-82e3-e92aaea009f5-o.jpg"}}},{"_id":"59f102cbd4de657279002f97","slug":"datalyze-solutions-adds-blog-and-job-feeds","title":"Datalyze Solutions Adds a Blog Feed","content":"

Data. Intelligence. Applications. Location Based Analytics. When everything is converging, teams needs collaboration tools to make their lives easier. That's why Datalyze Solutions chooses Cosmic to deliver its content from the cloud for its Blog feeds. 



"Cosmic has been in use at Datalyze Solutions for more than one and a half years. Cosmic has become a critically important tool for us to publish blog posts quickly and easily. This way, our customers and partners can stay informed about the latest news from our company and other industry-relevant information. Cosmic offers exactly the flexibility and features we really need as content editors!"

— Carolin Bauer, Content Editor and Marketing Manager

","metafields":[{"value":"Datalyze Solutions","key":"company","title":"Company","type":"text","children":null},{"value":"Internet","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Data. Intelligence. Applications. Location Based Analytics. When everything is converging, teams needs collaboration tools to make their lives easier.","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"b4173bb0-dc2d-11e7-9201-fb5838341592-DS_Logo_Blau.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/b4173bb0-dc2d-11e7-9201-fb5838341592-DS_Logo_Blau.png","imgix_url":"https://imgix.cosmicjs.com/b4173bb0-dc2d-11e7-9201-fb5838341592-DS_Logo_Blau.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2017-10-25T21:31:55.033Z","created_by":"5716b504e9c686d006000073","created":"2017-10-25T21:31:55.033Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"metadata":{"company":"Datalyze Solutions","industry_type":"Internet","teaser":"Data. Intelligence. Applications. Location Based Analytics. When everything is converging, teams needs collaboration tools to make their lives easier.","logo":{"url":"https://cdn.cosmicjs.com/b4173bb0-dc2d-11e7-9201-fb5838341592-DS_Logo_Blau.png","imgix_url":"https://imgix.cosmicjs.com/b4173bb0-dc2d-11e7-9201-fb5838341592-DS_Logo_Blau.png"}}}],"app_slugs":[{"slug":"simple-blog"},{"slug":"react-static-blog"},{"slug":"simple-vue-blog"}],"extension_slugs":[{"slug":"onesignal"},{"slug":"unsplash-photos"},{"slug":"wordpress-importer"}],"testimonial":"

"When the opportunity to work with Cosmic came up, I jumped on the opportunity. Using an API-first content management platform like Cosmic was perfect (and super simple) for connecting best-in-class services like Algolia for search and SendGrid for email.  In terms of providing the framework for teams to quickly build quality professional apps, Cosmic is definitely onto something.”

","testimonial_credit":"David Smooke, CEO at Hacker Noon"}},{"_id":"5fac567a0a5526000718655e","order":2,"slug":"boundary-la","title":"Boundary LA","content":"","metafields":[{"children":null,"type":"file","title":"Logo","key":"logo","id":"HyrIETvAK7","value":"160cc530-2463-11eb-b940-89e6869fdeb0-5ef69560902e8c94aa7490c5BOUNDARY-logo-dark.svg","url":"https://cdn.cosmicjs.com/160cc530-2463-11eb-b940-89e6869fdeb0-5ef69560902e8c94aa7490c5BOUNDARY-logo-dark.svg","imgix_url":"https://imgix.cosmicjs.com/160cc530-2463-11eb-b940-89e6869fdeb0-5ef69560902e8c94aa7490c5BOUNDARY-logo-dark.svg"},{"children":null,"type":"text","title":"SEO Description","key":"seo_description","id":"LAzfLA0cy5","value":"Development and Design Agency BoundaryLA uses Cosmic to win over a Medical Services client"},{"children":null,"type":"text","title":"Brand Color","key":"brand_color","id":"xjQnz1p8w3","value":"#f27e20"},{"children":null,"type":"file","title":"Background Image","key":"background_image","id":"O3XbbIHFl0","value":"a9712b90-2472-11eb-bc9c-1da9ebee7b3c-www.boundaryla.comapproach-hires.png","url":"https://cdn.cosmicjs.com/a9712b90-2472-11eb-bc9c-1da9ebee7b3c-www.boundaryla.comapproach-hires.png","imgix_url":"https://imgix.cosmicjs.com/a9712b90-2472-11eb-bc9c-1da9ebee7b3c-www.boundaryla.comapproach-hires.png"},{"children":null,"type":"text","title":"Industry","key":"industry","id":"bwsQnIQcBU","value":"Marketing"},{"children":null,"type":"text","title":"Product","key":"product","id":"9yjbZnGKuE","value":"Agency Services"},{"children":null,"type":"file","title":"Main Image","key":"main_image","id":"gs0adV5Be3","value":"89a457a0-2473-11eb-92c7-1dc18636053a-boundary-collage.png","url":"https://cdn.cosmicjs.com/89a457a0-2473-11eb-92c7-1dc18636053a-boundary-collage.png","imgix_url":"https://imgix.cosmicjs.com/89a457a0-2473-11eb-92c7-1dc18636053a-boundary-collage.png"},{"children":[{"children":null,"type":"file","title":"Image","key":"image","id":"5uIMvdNWKM","value":"cb622060-2463-11eb-b940-89e6869fdeb0-boundary-la.png","url":"https://cdn.cosmicjs.com/cb622060-2463-11eb-b940-89e6869fdeb0-boundary-la.png","imgix_url":"https://imgix.cosmicjs.com/cb622060-2463-11eb-b940-89e6869fdeb0-boundary-la.png"},{"children":null,"type":"html-textarea","title":"Text","key":"text","id":"GG3rqARYhg","value":"

Boundary LA is one of the leading design and development agencies on the West Coast. Their designs impress the minds of consumers for hot new brands like MUD/WTR and established monoliths such as Red Bull. Their approach to building applications for their customers blends business research and modern technology solutions with a fiery creativity.

When Boundary LA was approached to build a new web application for a medical services company, Co-Founder Tyler Leonard knew they would be deploying the app with a headless CMS. He'd used other leading headless CMS services before, but for this app, they broadened their search to find something that allowed for HIPAA Compliance, better mobile integration, and fit the client's budget.



"}],"type":"parent","title":"Section 1","key":"section_1","id":"awfiyfnPYI","value":"

Boundary LA is one of the leading design and development agencies on the West Coast. Their designs impress the minds of consumers for hot new brands like MUD/WTR and established monoliths such as Red Bull. Their approach to building applications for their customers blends business research and modern technology solutions with a fiery creativity.

When Boundary LA was approached to build a new web application for a medical services company, Co-Founder Tyler Leonard knew they would be deploying the app with a headless CMS. He'd used other leading headless CMS services before, but for this app, they broadened their search to find something that allowed for HIPAA Compliance, better mobile integration, and fit the client's budget.



"},{"children":[{"children":null,"type":"file","title":"Image","key":"image","id":"CjkyK8ifer","value":"98d90b70-2465-11eb-b940-89e6869fdeb0-boundarylaapproach.png","url":"https://cdn.cosmicjs.com/98d90b70-2465-11eb-b940-89e6869fdeb0-boundarylaapproach.png","imgix_url":"https://imgix.cosmicjs.com/98d90b70-2465-11eb-b940-89e6869fdeb0-boundarylaapproach.png"},{"children":null,"type":"html-textarea","title":"Text","key":"text","id":"LK7q1IFICj","value":"

Fortunately, Cosmic seemed like the perfect solution, and after some internal consideration, Cosmic was the solution BoundaryLA selected. They've never looked back. Today, Boundary LA is building on top of their initial application with their headless back-end, and their client is successfully managing their own content through a secure, HIPAA-compliant back-end.

Mission accomplished.

"}],"type":"parent","title":"Section 2","key":"section_2","id":"OihREDUysL","value":"

Fortunately, Cosmic seemed like the perfect solution, and after some internal consideration, Cosmic was the solution BoundaryLA selected. They've never looked back. Today, Boundary LA is building on top of their initial application with their headless back-end, and their client is successfully managing their own content through a secure, HIPAA-compliant back-end.

Mission accomplished.

"},{"children":[{"children":null,"type":"file","title":"Image","key":"image","id":"zMgfDHkcqV","value":"70bb6c00-2465-11eb-b940-89e6869fdeb0-tylerleonards.jpg","url":"https://cdn.cosmicjs.com/70bb6c00-2465-11eb-b940-89e6869fdeb0-tylerleonards.jpg","imgix_url":"https://imgix.cosmicjs.com/70bb6c00-2465-11eb-b940-89e6869fdeb0-tylerleonards.jpg"},{"children":null,"type":"text","title":"Author","key":"author","id":"9uygnBzzeI","value":"Tyler Leonard, Co-Founder of BoundaryLA"},{"children":null,"type":"textarea","title":"Text","key":"text","id":"4T1LHHvg07","value":"In this case, we'd be working with a medical application, and needed HIPAA compliance from a mobile-app through to a front-end. This limited other options. We didn't want to use two separate solutions to achieve this. We've continued to build on top of everything we deployed initially. For us, we could go in and flexibly change through different social tools. Our clients have no issues maintaining it either. For the questions we have had, we've sometimes had the CEO respond directly, support all-around has been fantastic."},{"children":null,"type":"textarea","title":"Testimonial Home","key":"testimonial_home","id":"g7ol0v8tp2szrlpdeyz6","object_type":"undefined","value":"\"An all-in-one, HIPPA-compliant back-end that fit the client's budget\""}],"type":"parent","title":"Testimonial Section","key":"testimonial_section","id":"ZpjTztFpFL","value":"Tyler Leonard, Co-Founder of BoundaryLA","state":"open"},{"children":null,"type":"switch","title":"Featured on Home","key":"featured_on_home","id":"jKHapcUEt1","value":true,"options":"yes,no"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"customers","created_at":"2020-11-11T21:24:10.122Z","created_by":"5f8088982aa32f00093977bb","modified_at":"2020-12-18T15:18:18.847Z","created":"2020-11-11T21:24:10.122Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/cb622060-2463-11eb-b940-89e6869fdeb0-boundary-la.png","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2020-12-18T15:18:18.847Z","metadata":{"logo":{"url":"https://cdn.cosmicjs.com/160cc530-2463-11eb-b940-89e6869fdeb0-5ef69560902e8c94aa7490c5BOUNDARY-logo-dark.svg","imgix_url":"https://imgix.cosmicjs.com/160cc530-2463-11eb-b940-89e6869fdeb0-5ef69560902e8c94aa7490c5BOUNDARY-logo-dark.svg"},"seo_description":"Development and Design Agency BoundaryLA uses Cosmic to win over a Medical Services client","brand_color":"#f27e20","background_image":{"url":"https://cdn.cosmicjs.com/a9712b90-2472-11eb-bc9c-1da9ebee7b3c-www.boundaryla.comapproach-hires.png","imgix_url":"https://imgix.cosmicjs.com/a9712b90-2472-11eb-bc9c-1da9ebee7b3c-www.boundaryla.comapproach-hires.png"},"industry":"Marketing","product":"Agency Services","main_image":{"url":"https://cdn.cosmicjs.com/89a457a0-2473-11eb-92c7-1dc18636053a-boundary-collage.png","imgix_url":"https://imgix.cosmicjs.com/89a457a0-2473-11eb-92c7-1dc18636053a-boundary-collage.png"},"section_1":{"image":{"url":"https://cdn.cosmicjs.com/cb622060-2463-11eb-b940-89e6869fdeb0-boundary-la.png","imgix_url":"https://imgix.cosmicjs.com/cb622060-2463-11eb-b940-89e6869fdeb0-boundary-la.png"},"text":"

Boundary LA is one of the leading design and development agencies on the West Coast. Their designs impress the minds of consumers for hot new brands like MUD/WTR and established monoliths such as Red Bull. Their approach to building applications for their customers blends business research and modern technology solutions with a fiery creativity.

When Boundary LA was approached to build a new web application for a medical services company, Co-Founder Tyler Leonard knew they would be deploying the app with a headless CMS. He'd used other leading headless CMS services before, but for this app, they broadened their search to find something that allowed for HIPAA Compliance, better mobile integration, and fit the client's budget.



"},"section_2":{"image":{"url":"https://cdn.cosmicjs.com/98d90b70-2465-11eb-b940-89e6869fdeb0-boundarylaapproach.png","imgix_url":"https://imgix.cosmicjs.com/98d90b70-2465-11eb-b940-89e6869fdeb0-boundarylaapproach.png"},"text":"

Fortunately, Cosmic seemed like the perfect solution, and after some internal consideration, Cosmic was the solution BoundaryLA selected. They've never looked back. Today, Boundary LA is building on top of their initial application with their headless back-end, and their client is successfully managing their own content through a secure, HIPAA-compliant back-end.

Mission accomplished.

"},"testimonial_section":{"image":{"url":"https://cdn.cosmicjs.com/70bb6c00-2465-11eb-b940-89e6869fdeb0-tylerleonards.jpg","imgix_url":"https://imgix.cosmicjs.com/70bb6c00-2465-11eb-b940-89e6869fdeb0-tylerleonards.jpg"},"author":"Tyler Leonard, Co-Founder of BoundaryLA","text":"In this case, we'd be working with a medical application, and needed HIPAA compliance from a mobile-app through to a front-end. This limited other options. We didn't want to use two separate solutions to achieve this. We've continued to build on top of everything we deployed initially. For us, we could go in and flexibly change through different social tools. Our clients have no issues maintaining it either. For the questions we have had, we've sometimes had the CEO respond directly, support all-around has been fantastic.","testimonial_home":"\"An all-in-one, HIPPA-compliant back-end that fit the client's budget\""},"featured_on_home":true}},{"_id":"5ef386485090f100070d4dc1","slug":"wordpress-headless-cms","title":"WordPress Headless CMS","content":"

WordPress has been around for a long time, since 2004, making it ancient in internet years. It has an ecosystem and brand recognition that is second to none in the open source CMS space. However, as it tries to keep up with new Headless CMS solutions, it is showing its age. Cosmic is an alternative to WordPress that your developers and content creators will love.


Monolithic vs Headless CMS

WordPress, as a monolithic CMS, and other older installed CMS systems like it, comes with a coupled front end application layer that requires additional development and maintenance. Cosmic is a Headless CMS meaning that the content API and presentation layer are decoupled which gives your team greater flexibility when it comes to where your content can go.

Cosmic provides everything your team of developers and content creators need: powerful and intuitive APIs for developers, and an easy-to-use dashboard for content creators. We've removed all complexity and CMS maintenance, so your team can focus on building great products faster, together.


But can't WordPress go Headless?

Although you CAN make WordPress a Headless CMS, you still have a lot of work to do to bring it up to the level of an optimized CMS system that's truly headless. And along with your application, you will need to maintain the CMS itself, adding more development costs and taking away focus from what really matters: creating great content and user experiences.

","metafields":[{"children":null,"type":"file","title":"Logo","key":"logo","id":"YDlWpctl7O","value":"5abbde00-b564-11ea-a2b3-f17f1f2fdbda-wordpress-headless-cms.jpg","url":"https://cdn.cosmicjs.com/5abbde00-b564-11ea-a2b3-f17f1f2fdbda-wordpress-headless-cms.jpg","imgix_url":"https://imgix.cosmicjs.com/5abbde00-b564-11ea-a2b3-f17f1f2fdbda-wordpress-headless-cms.jpg"},{"children":null,"type":"textarea","title":"Tech","key":"tech","id":"Ilo8X7NYz3","value":"LAMP: Linux, Apache, MySQL database, PHP."},{"children":null,"type":"textarea","title":"Scalability","key":"scalability","id":"uwMJgzbspX","value":"Does not scale easily. Limited by your servers, hosting provider, and budget."},{"children":null,"type":"textarea","title":"Security","key":"security","id":"WaqzILUKhA","value":"You manage the security yourself. No default data encryption at rest or in transit."},{"children":null,"type":"textarea","title":"Maintenance","key":"maintenance","id":"qvcDwAFYpb","value":"You deploy, host, and maintain everything yourself. Along with your application and content, you need to maintain updates and security for your CMS system."},{"children":null,"type":"textarea","title":"Caching","key":"caching","id":"LbgwBj57Hj","value":"No caching included out of the box."},{"children":null,"type":"textarea","title":"Media CDN","key":"media_cdn","id":"EW15DdHPXH","value":"No CDN included out of the box."},{"children":null,"type":"textarea","title":"Image Processing","key":"image_processing","id":"M5Elf9cuQZ","value":"Manually manage your own image sizes and optimizations."},{"children":null,"type":"textarea","title":"Extendability","key":"extendability","id":"Lxfg7sHgTy","value":"Themes and plugins."},{"children":null,"type":"textarea","title":"Front end","key":"front_end","id":"e2EV5rvNbP","value":"Front end is coupled with backend CMS. Can be made to be Headless."},{"children":null,"type":"textarea","title":"Number of Projects","key":"number_of_projects","id":"iUEnodbXfJ","value":"One login, one website."},{"children":null,"type":"html-textarea","title":"Costs","key":"costs","id":"pMWcIHZgOE","value":"

You will need to hire developer resources. Average salary of a full-stack developer is $111,600 per year. You may need to hire 1-3 developers to maintain the CMS.

"},{"children":null,"type":"text","title":"Vendor Name","key":"vendor_name","id":"k6OZ6Nt0I5","value":"WordPress Headless CMS"},{"children":null,"type":"switch","title":"Include in link list","key":"include_in_link_list","id":"LqfeoWSB7N","value":true,"options":"yes,no"},{"children":null,"type":"text","title":"Cost Value","key":"cost_value","id":"j2eU4KKose","value":"$223,200"},{"children":null,"type":"text","title":"Cost Text","key":"cost_text","id":"RovKGYNDfM","value":"per year"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"cms-competitors","created":"2020-06-24T16:58:48.218Z","created_at":"2020-06-24T16:58:48.218Z","modified_at":"2020-06-28T20:53:43.556Z","status":"published","locale":null,"modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-06-28T20:53:43.556Z","unpublish_at":null,"order":2,"metadata":{"logo":{"url":"https://cdn.cosmicjs.com/5abbde00-b564-11ea-a2b3-f17f1f2fdbda-wordpress-headless-cms.jpg","imgix_url":"https://imgix.cosmicjs.com/5abbde00-b564-11ea-a2b3-f17f1f2fdbda-wordpress-headless-cms.jpg"},"tech":"LAMP: Linux, Apache, MySQL database, PHP.","scalability":"Does not scale easily. Limited by your servers, hosting provider, and budget.","security":"You manage the security yourself. No default data encryption at rest or in transit.","maintenance":"You deploy, host, and maintain everything yourself. Along with your application and content, you need to maintain updates and security for your CMS system.","caching":"No caching included out of the box.","media_cdn":"No CDN included out of the box.","image_processing":"Manually manage your own image sizes and optimizations.","extendability":"Themes and plugins.","front_end":"Front end is coupled with backend CMS. Can be made to be Headless.","number_of_projects":"One login, one website.","costs":"

You will need to hire developer resources. Average salary of a full-stack developer is $111,600 per year. You may need to hire 1-3 developers to maintain the CMS.

","vendor_name":"WordPress Headless CMS","include_in_link_list":true,"cost_value":"$223,200","cost_text":"per year"}},{"_id":"643d8809ce3e2f0008ab0d12","order":2,"slug":"html-editor-media-updates-import-export-team-members","title":"HTML editor media updates, import / export team members","content":"

We have shipped some new features now available in the new dashboard. Read about them below.


HTML editor media updates
There is a new toolbar button in the HTML editor that enables you to choose and add media already uploaded to your Bucket. Click the "Cosmic media" button in the toolbar to use it.

This\r\nis available on the Object content area as well as HTML Metafields. Select from media including images, video, as well as other file formats.


Import / export team members
You can now import team members into your Projects and Workspaces using a CSV file.

Importing team members from the old dashboard is now much easier using this feature. Follow these steps to import team members from the old dashboard:

  1. In the old dashboard, go to any Bucket team section found in Bucket > Settings > Team.
  2. Click the link that says "Export to CSV".
  3. In the new dashboard go to Project > Team. Click the button titled "Import team CSV".
  4. Upload the CSV and set the roles for each team member.


We hope you enjoy these updates. Sign up for the new dashboard to begin using these new features. Please let us know if you have any questions in our Slack channel, and reach out on Twitter.

","metafields":[{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"FKhNS4vgpF","value":"2023-04-18"},{"children":null,"type":"object","title":"Author","key":"author","id":"oHWRyiSCZ4","value":"5ffa1d1e0046b0000799cb7b","object_type":"authors","object":{"_id":"5ffa1d1e0046b0000799cb7b","slug":"cosmic","title":"Cosmic","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"ZogvxZg6OL","value":""},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D0qLJ4RPBe","value":"10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2021-01-09T21:16:14.533Z","created_by":"5357ef811693be2118000001","modified_at":"2021-01-09T21:18:26.147Z","created":"2021-01-09T21:16:14.533Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/e55ef990-52bf-11eb-986d-4d7ff5faa3ab-logo.svg","published_at":"2021-01-09T21:18:26.147Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null}},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"sEnwsHUxtM","value":"05796370-ddf9-11ed-977e-f7253dba75d2-cosmic-media.png","url":"https://cdn.cosmicjs.com/05796370-ddf9-11ed-977e-f7253dba75d2-cosmic-media.png","imgix_url":"https://imgix.cosmicjs.com/05796370-ddf9-11ed-977e-f7253dba75d2-cosmic-media.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"changelogs","created_at":"2023-04-17T17:55:21.057Z","created_by":"5357ef811693be2118000001","modified_at":"2023-04-18T15:04:07.438Z","created":"2023-04-17T17:55:21.057Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/05796370-ddf9-11ed-977e-f7253dba75d2-cosmic-media.png","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2023-04-18T15:04:07.438Z","metadata":{"published_date":"2023-04-18","author":{"_id":"5ffa1d1e0046b0000799cb7b","slug":"cosmic","title":"Cosmic","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"ZogvxZg6OL","value":""},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D0qLJ4RPBe","value":"10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2021-01-09T21:16:14.533Z","created_by":"5357ef811693be2118000001","modified_at":"2021-01-09T21:18:26.147Z","created":"2021-01-09T21:16:14.533Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/e55ef990-52bf-11eb-986d-4d7ff5faa3ab-logo.svg","published_at":"2021-01-09T21:18:26.147Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"metadata":{"username":"","profile_picture":{"url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}}},"featured_image":{"url":"https://cdn.cosmicjs.com/05796370-ddf9-11ed-977e-f7253dba75d2-cosmic-media.png","imgix_url":"https://imgix.cosmicjs.com/05796370-ddf9-11ed-977e-f7253dba75d2-cosmic-media.png"}}},{"_id":"5ca05675572e762d9baaf7c9","order":2,"slug":"mux","title":"Mux","content":"","metafields":[{"children":null,"type":"text","title":"Link","key":"link","id":"cPd9WhuRfB","value":"https://cosmicjs.com/extensions/mux-videos"},{"children":null,"type":"file","title":"Image","key":"image","id":"UtpoqcZo7q","value":"9c06ddf0-8ed7-11ea-910b-435199f15a39-mux.jpg","url":"https://cdn.cosmicjs.com/9c06ddf0-8ed7-11ea-910b-435199f15a39-mux.jpg","imgix_url":"https://imgix.cosmicjs.com/9c06ddf0-8ed7-11ea-910b-435199f15a39-mux.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"integrations","created_at":"2019-03-31T05:56:05.151Z","created_by":"5357ef811693be2118000001","created":"2019-03-31T05:56:05.151Z","status":"published","published_at":"2020-05-05T13:52:25.018Z","modified_at":"2020-05-05T13:52:25.018Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"metadata":{"link":"https://cosmicjs.com/extensions/mux-videos","image":{"url":"https://cdn.cosmicjs.com/9c06ddf0-8ed7-11ea-910b-435199f15a39-mux.jpg","imgix_url":"https://imgix.cosmicjs.com/9c06ddf0-8ed7-11ea-910b-435199f15a39-mux.jpg"}}},{"_id":"5f5fac071936450007d8a01c","order":2,"slug":"kyle-meagher","title":"Kyle Meagher","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"hsMOJCxIAj","value":"kylemeags"},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D2rdKO4lEL","value":"e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","url":"https://cdn.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","imgix_url":"https://imgix.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2020-09-14T17:44:39.110Z","created_by":"5357ef811693be2118000001","modified_at":"2020-09-14T17:45:09.251Z","created":"2020-09-14T17:44:39.110Z","status":"published","published_at":"2020-09-14T17:44:39.110Z","modified_by":"5357ef811693be2118000001","thumbnail":"https://imgix.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","metadata":{"username":"kylemeags","profile_picture":{"url":"https://cdn.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","imgix_url":"https://imgix.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg"}}},{"_id":"5ea1b85b3b2bad0009f50b2b","slug":"chris-sevilleja","title":"Chris Sevilleja","content":"","metafields":[{"children":null,"type":"textarea","title":"Testimonial","key":"testimonial","id":"sLROxFCa9l","value":"Really like Cosmic. Build your content in a CMS and get a REST or GraphQL API immediately! Slick tool to make dev quicker! Even has Gatsby Preview so you can check out changes before publishing."},{"children":null,"type":"text","title":"Author Name","key":"author_name","id":"IMI4gUfY8G","value":"Chris Sevilleja"},{"children":null,"type":"file","title":"Author Image","key":"author_image","id":"83q9IQJyai","value":"9a6dd380-8578-11ea-a693-5b45721f7339-chris-sevilleja.jpeg","url":"https://cdn.cosmicjs.com/9a6dd380-8578-11ea-a693-5b45721f7339-chris-sevilleja.jpeg","imgix_url":"https://imgix.cosmicjs.com/9a6dd380-8578-11ea-a693-5b45721f7339-chris-sevilleja.jpeg"},{"children":null,"type":"text","title":"Business","key":"business","id":"8HUUPhsB9X","value":"Scotch.io"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"testimonials","created":"2020-04-23T15:46:35.710Z","created_at":"2020-04-23T15:46:35.710Z","modified_at":"2020-10-02T01:48:34.802Z","status":"published","locale":null,"created_by":"56d66b2f903a79b904000001","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-04-23T15:46:43.868Z","unpublish_at":null,"order":2,"thumbnail":"https://imgix.cosmicjs.com/9a6dd380-8578-11ea-a693-5b45721f7339-chris-sevilleja.jpeg","metadata":{"testimonial":"Really like Cosmic. Build your content in a CMS and get a REST or GraphQL API immediately! Slick tool to make dev quicker! Even has Gatsby Preview so you can check out changes before publishing.","author_name":"Chris Sevilleja","author_image":{"url":"https://cdn.cosmicjs.com/9a6dd380-8578-11ea-a693-5b45721f7339-chris-sevilleja.jpeg","imgix_url":"https://imgix.cosmicjs.com/9a6dd380-8578-11ea-a693-5b45721f7339-chris-sevilleja.jpeg"},"business":"Scotch.io"}},{"_id":"5afefdaad7c06b6b70cc0d79","order":2,"slug":"designer","title":"Designer","content":"

Cosmic is transforming the way content is created and delivered to the world. We provide a headless CMS to help teams build modern content-powered apps together.

We are currently looking for a Designer to work on our branding and user experience for our products and marketing materials.

If selected to join our team, you would be expected to be self-starting to provide quality, quantifiable results for our remote-first company.

Contact jobs@cosmicjs.com with the subject "Designer" to apply.

","metafields":[{"children":null,"type":"textarea","title":"Teaser","key":"teaser","id":"l9xcrl4q2I","value":"We are currently looking for a Designer to work on our branding and user experience for our products and marketing materials."},{"children":null,"type":"text","title":"Font Awesome Icon","key":"font_awesome_icon","id":"zoTpaRP1UT","value":"fa-picture-o"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"jobs","created_at":"2018-05-18T16:22:02.088Z","created_by":"5357ef811693be2118000001","created":"2018-05-18T16:22:02.088Z","status":"published","modified_at":"2020-10-02T02:11:12.546Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-05-18T14:33:09.505Z","unpublish_at":null,"metadata":{"teaser":"We are currently looking for a Designer to work on our branding and user experience for our products and marketing materials.","font_awesome_icon":"fa-picture-o"}},{"_id":"631ba62d9ade990009c6ea9f","order":2,"slug":"astro-cms","title":"Astro CMS","content":"","metafields":[{"children":null,"type":"file","title":"Image","key":"image","id":"727hC8oe3x","value":"e987e2d0-307f-11ed-873b-2bc1a58daa5a-full-logo-light.png","url":"https://cdn.cosmicjs.com/e987e2d0-307f-11ed-873b-2bc1a58daa5a-full-logo-light.png","imgix_url":"https://imgix.cosmicjs.com/e987e2d0-307f-11ed-873b-2bc1a58daa5a-full-logo-light.png"},{"children":null,"type":"file","title":"Thumbnail","key":"thumbnail","id":"XJPqCCtikV","value":"eca883c0-307f-11ed-873b-2bc1a58daa5a-logomark-light.png","url":"https://cdn.cosmicjs.com/eca883c0-307f-11ed-873b-2bc1a58daa5a-logomark-light.png","imgix_url":"https://imgix.cosmicjs.com/eca883c0-307f-11ed-873b-2bc1a58daa5a-logomark-light.png"},{"children":null,"type":"html-textarea","title":"Blurb","key":"blurb","id":"wTkUNBKQK8","value":"

Cosmic is the best CMS for Astro websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

"},{"children":null,"type":"text","title":"Headline","key":"headline","id":"LIrMOfMqMw","value":"Astro"},{"children":null,"type":"text","title":"SEO Description","key":"seo_description","id":"z6wY8JVA2D","value":"Cosmic is the best Astro Headless CMS on the market. Use the GraphQL, REST, and other API tools to integrate with any website or app."},{"children":null,"type":"file","title":"Twitter Card Image","key":"twitter_card_image","id":"6YRuerHqlS","value":"e987e2d0-307f-11ed-873b-2bc1a58daa5a-full-logo-light.png","url":"https://cdn.cosmicjs.com/e987e2d0-307f-11ed-873b-2bc1a58daa5a-full-logo-light.png","imgix_url":"https://imgix.cosmicjs.com/e987e2d0-307f-11ed-873b-2bc1a58daa5a-full-logo-light.png"},{"children":null,"type":"html-textarea","title":"Code Example","key":"code_example","id":"CX1b1ZwULK","value":""},{"children":null,"type":"text","title":"SEO Title","key":"seo_title","id":"PvI0QG1KQT","value":"The Best Headless CMS for Astro"},{"children":[{"type":"repeating_item","children":[{"title":"Title","key":"title","value":"An intro to Astro with headless CMS content","type":"text","required":false},{"title":"Link","key":"link","value":"https://www.youtube.com/embed/7GNeFPn8W9E?showinfo=0&wmode=opaque","type":"text","required":false}]}],"type":"repeater","title":"Videos","key":"videos","id":"TgYdnYv8dZ","value":"An intro to Astro with headless CMS content","repeater_fields":[{"title":"Title","key":"title","value":"","type":"text","required":false},{"title":"Link","key":"link","value":"","type":"text","required":false}]},{"children":null,"type":"text","title":"Apps Search Term","key":"apps_search_term","id":"ayCpVwyBDV","value":""},{"children":null,"type":"text","title":"Articles Search Term","key":"articles_search_term","id":"X8d3xa0zsB","value":""},{"children":null,"type":"html-textarea","title":"Page Overview","key":"page_overview","id":"WOnlYTHCPW","value":""},{"children":null,"type":"html-textarea","title":"SEO Content","key":"seo_content","id":"6C6ILD78SM","value":""},{"children":null,"type":"text","title":"Page Overview Title","key":"page_overview_title","id":"xH2AkMr7E5","value":""},{"children":[{"type":"repeating_item","children":[{"title":"App Slug","key":"app_slug","value":"simple-astro-blog","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"App Slug","key":"app_slug","value":"astro-cosmic-blog","type":"text","required":false}]}],"type":"repeater","title":"Apps","key":"apps","id":"N0oRCJWgo9","value":"simple-astro-blog","repeater_fields":[{"title":"App Slug","key":"app_slug","value":"","type":"text","required":false}]},{"children":[{"type":"repeating_item","children":[{"title":"Article Slug","key":"article_slug","value":"add-a-headless-cms-to-astro-in-3-easy-steps","type":"text"}]},{"type":"repeating_item","children":[{"title":"Article Slug","key":"article_slug","value":"how-to-build-a-blazing-fast-astro-blog-with-cosmic-cms","type":"text","required":false}]}],"type":"repeater","title":"Articles","key":"articles","id":"de5GgGGX2p","value":"add-a-headless-cms-to-astro-in-3-easy-steps","repeater_fields":[{"title":"Article Slug","key":"article_slug","value":"","type":"text","required":false}]}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"kb-articles","created_at":"2022-09-09T20:46:37.362Z","created_by":"5357ef811693be2118000001","created":"2022-09-09T20:46:37.362Z","status":"published","modified_at":"2022-10-14T00:22:21.210Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"thumbnail":"https://imgix.cosmicjs.com/eca883c0-307f-11ed-873b-2bc1a58daa5a-logomark-light.png","published_at":"2022-10-14T00:22:21.210Z","metadata":{"image":{"url":"https://cdn.cosmicjs.com/e987e2d0-307f-11ed-873b-2bc1a58daa5a-full-logo-light.png","imgix_url":"https://imgix.cosmicjs.com/e987e2d0-307f-11ed-873b-2bc1a58daa5a-full-logo-light.png"},"thumbnail":{"url":"https://cdn.cosmicjs.com/eca883c0-307f-11ed-873b-2bc1a58daa5a-logomark-light.png","imgix_url":"https://imgix.cosmicjs.com/eca883c0-307f-11ed-873b-2bc1a58daa5a-logomark-light.png"},"blurb":"

Cosmic is the best CMS for Astro websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

","headline":"Astro","seo_description":"Cosmic is the best Astro Headless CMS on the market. Use the GraphQL, REST, and other API tools to integrate with any website or app.","twitter_card_image":{"url":"https://cdn.cosmicjs.com/e987e2d0-307f-11ed-873b-2bc1a58daa5a-full-logo-light.png","imgix_url":"https://imgix.cosmicjs.com/e987e2d0-307f-11ed-873b-2bc1a58daa5a-full-logo-light.png"},"code_example":"","seo_title":"The Best Headless CMS for Astro","videos":[{"title":"An intro to Astro with headless CMS content","link":"https://www.youtube.com/embed/7GNeFPn8W9E?showinfo=0&wmode=opaque"}],"apps_search_term":"","articles_search_term":"","page_overview":"","seo_content":"","page_overview_title":"","apps":[{"app_slug":"simple-astro-blog"},{"app_slug":"astro-cosmic-blog"}],"articles":[{"article_slug":"add-a-headless-cms-to-astro-in-3-easy-steps"},{"article_slug":"how-to-build-a-blazing-fast-astro-blog-with-cosmic-cms"}]}},{"_id":"63d4509b7e957c00081cce20","order":2,"slug":"cosmic-dashboard-now-in-private-beta","title":"Cosmic dashboard now in private beta","content":"

We are excited to announce the new Cosmic dashboard is now available in private beta. Starting today, a limited number of customers will be able to onboard to the new dashboard to prepare for production use. Follow the link below to begin the onboarding process and read the changelog to learn about all of the updates.

Please note, we are asking that only one admin per team be designated to join the private beta to perform project migrations, testing, and invite team members. If you are not the admin of your project(s), please forward this note to any colleagues to be the designated admin to begin this process.

We can’t wait to show you all of the updates, improvements, and new features that we know you'll love. Reach out to Cosmic support if you have any questions. Let’s go!

","metafields":[{"children":null,"type":"object","title":"Author","key":"author","id":"Zs9lyuf8QD","value":"5ffa1d1e0046b0000799cb7b","required":true,"object_type":"authors","object":{"_id":"5ffa1d1e0046b0000799cb7b","slug":"cosmic","title":"Cosmic","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"ZogvxZg6OL","value":""},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D0qLJ4RPBe","value":"10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2021-01-09T21:16:14.533Z","created_by":"5357ef811693be2118000001","modified_at":"2021-01-09T21:18:26.147Z","created":"2021-01-09T21:16:14.533Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/e55ef990-52bf-11eb-986d-4d7ff5faa3ab-logo.svg","published_at":"2021-01-09T21:18:26.147Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null}},{"children":null,"type":"html-textarea","title":"Teaser","key":"teaser","id":"f4fOuVNYrt","value":"

We are excited to announce the new Cosmic dashboard is now available in private beta.

"},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"VTzI13i3It","value":"f6579c30-a0cd-11ed-93ee-cb9a2cd68754-private-beta-og.png","url":"https://cdn.cosmicjs.com/f6579c30-a0cd-11ed-93ee-cb9a2cd68754-private-beta-og.png","imgix_url":"https://imgix.cosmicjs.com/f6579c30-a0cd-11ed-93ee-cb9a2cd68754-private-beta-og.png"},{"children":null,"type":"textarea","title":"SEO Meta Description","key":"seo_meta_description","id":"2gG315iyT2","value":"We are excited to announce the new Cosmic dashboard is now available in private beta."},{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"9AD3rTsd1a","value":"2023-01-31"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2023-01-27T22:30:51.502Z","created_by":"5357ef811693be2118000001","modified_at":"2023-01-31T17:44:12.484Z","created":"2023-01-27T22:30:51.502Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/1abd5ec0-9e94-11ed-93ee-cb9a2cd68754-cosmic-beta.png","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2023-01-31T17:44:12.484Z","metadata":{"author":{"_id":"5ffa1d1e0046b0000799cb7b","slug":"cosmic","title":"Cosmic","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"ZogvxZg6OL","value":""},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D0qLJ4RPBe","value":"10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2021-01-09T21:16:14.533Z","created_by":"5357ef811693be2118000001","modified_at":"2021-01-09T21:18:26.147Z","created":"2021-01-09T21:16:14.533Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/e55ef990-52bf-11eb-986d-4d7ff5faa3ab-logo.svg","published_at":"2021-01-09T21:18:26.147Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"metadata":{"username":"","profile_picture":{"url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}}},"teaser":"

We are excited to announce the new Cosmic dashboard is now available in private beta.

","featured_image":{"url":"https://cdn.cosmicjs.com/f6579c30-a0cd-11ed-93ee-cb9a2cd68754-private-beta-og.png","imgix_url":"https://imgix.cosmicjs.com/f6579c30-a0cd-11ed-93ee-cb9a2cd68754-private-beta-og.png"},"seo_meta_description":"We are excited to announce the new Cosmic dashboard is now available in private beta.","published_date":"2023-01-31"}},{"_id":"5b19af1122558e11e6178c16","order":2,"slug":"cookie-policy","title":"Cookie Policy","content":"

Last updated: 07/11/2019


  1. Introduction

This Notice applies to Cosmic JS Inc. (“Cosmic JS”, “we”, “our” or “us”).  

Like most websites, we employ “cookies” or similar technologies. This Cookie Notice tells you about the use of Cookies and similar technologies on the websites and Apps listed in our Privacy Policy https://cosmicjs.com/terms (collectively, the "Sites").  

When you first access our Sites, you will receive a message advising you that cookies and similar technologies are in use. By clicking “accept cookies”, closing the message, or continuing to browse the Sites, you signify that you understand\r\nand agree to the use of these technologies, as described in this Cookie Notice. 

You do not have to accept cookies and consent can be withdrawn at any time (see Section IV, How to Control Cookies, below). You can change your browser settings to refuse or restrict cookies, and you may delete them after they have been placed on your\r\ndevice at any time. If you do not accept or delete our cookies, some areas of our Sites that you access may take more time to work, or may not function properly. 

  1. What are cookies?

Cookies are small files containing a string of characters which we may store on your computer or mobile device when you visit one of our websites.  When you visit the website or App again, the cookies allow us to recognize your browser. Cookies may\r\nstore your preferences and other information but cannot read data off your hard disk or read cookie files created by other sites.

Cookies set by a website owner (in this case, Cosmic JS) are called “first party cookies”. Cookies set by parties other than the website owner are called “third party cookies”. Third party cookies enable third party features or\r\nfunctionality to be provided on or through the website (i.e. advertising, social media functions and analytics).

  1. The Cookies We Use

Cookies make the use of our Sites easier by, among other things, saving your preferences. We may also use cookies to deliver content tailored to your interests. Our cookies may enable us to relate your use of our Sites to Personal Data that you previously\r\nsubmitted. 

The information that we collect with cookies allows us to statistically analyze usage of our Sites, and to improve and customize our content and other offerings. However, we only disclose information collected with cookies to third parties on an aggregated\r\nbasis without the use of any information that personally identifies you. 

The specific types of first party and third-party cookies placed by our Sites and the purposes they perform are described in the table below: 


Type of Cookies
Who serves these cookies
How to Refuse
Strictly Necessary Cookies
These are cookies that are required for the operation of our Sites. They include, for example, cookies that enable you to log into secure areas of our websites, use a shopping cart or make use of e-billing services.
Cosmic JS
These cookies are strictly necessary to deliver the Sites and therefore cannot be refused. They can be deleted or blocked using your browser settings, however (see Section IV, How to Control Cookies, below).


Performance and Functionality Cookies
These are used to recognize you when you return to our Sites. This enables us to personalize our content for you and remember your preferences (for example, your choice of language or region), but are non-essential to the performance of the Sites.
Cosmic JS
These cookies can be deleted or blocked using your browser settings (see Section IV, How to Control Cookies, below).


Analytical or Customization Cookies
These cookies collect information about how users access and move through the Sites. We use this information in either aggregate form to help us to improve the way our Sites work, or to personalize our Sites to your interests.
Cosmic JS


Google Universal Analytics


Intercom
These cookies can be deleted or blocked using your browser settings (see Section IV, How to Control Cookies, below).
Alternatively, please follow the links below to opt-out:






Social Media Cookies
These cookies allow us to integrate social media functions into our Sites and may also be used for advertising purposes.
Twitter
Facebook
YouTube
These cookies can be deleted or blocked using your browser settings (see Section IV, How to Control Cookies, below).
Alternatively, please follow the links below to opt-out:
  • Twitter: 
https://twitter.com/personalization


  1. How to Control Cookies 

When you first access our Sites, you will receive a message advising you that cookies and similar technologies are in use. By clicking “accept cookies”, closing the message, or continuing to browse the Site, you signify that you understand\r\nand agree to the use of these technologies, as described in this Cookie Notice. 

You do not have to accept cookies and consent can be withdrawn at any time, although you may not be able to use certain features on the Sites. You can do this by clicking the appropriate opt-out provided in the cookie table above or by activating the\r\nsettings on your browser that allows you to refuse all or some cookies.

Please follow the links below to helpful information for the most popular browsers:

https://support.microsoft.com/en-gb/help/17442/windows-internet-explorer-delete-manage-cookies 

https://support.google.com/chrome/answer/95647?co=GENIE.Platform%3DDesktop&hl=en

https://support.mozilla.org/en-US/kb/enable-and-disable-cookies-website-preferences 

https://support.apple.com/kb/PH21411?locale=en_US  

In addition, you can exercise advertising cookie choices by visiting:

  1. Web Beacons

As well as cookies, we use other technologies to recognize and track visitors to our Sites. A web beacon (also known as a “tracking pixel” or “clear GIF”) is a clear graphic image (typically a one-pixel tag) that is delivered through\r\na web browser or HTML e-mail, typically in conjunction with a cookie.

Web beacons allows us, for example, to monitor how users move from one page within our websites to another, to track access to our communications, to understand whether users have come to our websites from an online advertisement displayed on a third-party\r\nwebsite, to measure how ads have been viewed and to improve site performance.  

  1. Targeted Advertising 

Please note that third parties (including, for example, advertising networks and providers of external services like web traffic analysis services) use cookies, over which we have no control. These cookies are likely to be analytical/performance cookies\r\nor targeting cookies. These companies may use information about your visits to this and other websites in order to provide relevant advertisements about goods and services that you may be interested in. They may also employ technology that is used to\r\nmeasure the effectiveness of advertisements. 

  1. Changes to this Cookie Notice

We may occasionally amend this Cookie Notice to reflect company and customer feedback, and we reserve the right to make changes to this Cookie Notice at any time. 

The provisions contained in this Cookie Notice supersede all previous notices or policies regarding our use of cookies and similar technology on our Sites. 

Please check the “Last Updated” legend at the top of this page to see when this Cookie Notice was last revised. 

We encourage you to check frequently to see the current Cookie Notice to be informed of how Cosmic JS is committed to protecting your information and providing you with improved content on our Sites in order to enhance your experience.

  1. VIII.Contact us

If you have any questions or concerns about this Notice or Cosmic JS’s data practices, please contact our Cosmic JS privacy team:

Using email at: support@cosmicjs.com
In writing to: 3208 Bonniebrook Dr. Plano, TX 75075

","metafields":[],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"pages","created_at":"2018-06-07T22:17:53.569Z","created_by":"5357ef811693be2118000001","created":"2018-06-07T22:17:53.569Z","status":"published","published_at":"2019-07-11T19:05:18.175Z","modified_at":"2019-07-11T19:05:18.175Z","modified_by":"5357ef811693be2118000001","publish_at":null,"metadata":null},{"_id":"5d235a7572d8f04604eb203a","slug":"headless-cms-for-company-websites","title":"Headless CMS for Company Websites","content":"

The Cosmic Headless CMS empowers companies to manage content for their website quickly and seamlessly. Company websites are populated with content representing numerous departments, which can create bottlenecks internally and cause content to be less timely. Cosmic solves these problems by offering a flexible CMS Dashboard for content creators to draft, manage and schedule content for publishing. Custom user roles and permissions ensure each team member has the tools to do their job.

Helpful features include Revision History and Team Usage reports, giving Managers a high level view over their projects and team's productivity. 

","metafields":[{"children":null,"type":"text","title":"Solution Name","key":"solution_name","id":"CR6YE77yZw","value":"Company Websites"},{"children":null,"type":"file","title":"Image","key":"image","id":"0x2TChvJbd","value":"caed7450-9dbd-11e9-a5b4-e5df9f8049d3-Company-Websites.png","url":"https://cdn.cosmicjs.com/caed7450-9dbd-11e9-a5b4-e5df9f8049d3-Company-Websites.png","imgix_url":"https://imgix.cosmicjs.com/caed7450-9dbd-11e9-a5b4-e5df9f8049d3-Company-Websites.png"},{"children":null,"type":"objects","title":"Case Studies","key":"case_studies","id":"aEvTJVyRlY","value":"5bd206599dca8d10e941b69b,5b86a2c6016461100076e5c7,5bd88cc2dcf8c4248f3ccc4b","object_type":"case-studies","objects":[{"_id":"5bd206599dca8d10e941b69b","slug":"derive-systems-runs-on-cosmic-js","title":"Derive Systems runs on Cosmic","content":"

Derive Systems  is a leading automotive technology company with over 2 million software installations powering upgraded experiences for drivers on the road today. Derive  connects vehicles and their engines to the digital world, enabling individuals and fleets to take control and optimize for performance, fuel efficiency, safety, and more. 



The team at Derive Systems was in search of a headless CMS that would give their developers flexibility out-of-the-box while enabling their content managers to manage content in a familiar and modern CMS Dashboard. They chose Cosmic due to its easy content modeling tools for their Blog, Press, About and Team Sections. Derive now runs a Next.js, React and Express framework that utilizes the Cosmic GraphQL API to deliver its content.




“Leveraging the Cosmic GraphQL API allows for easy updates to our news and blog, while keeping payloads small and fast. Integration with Cosmic could not be easier thanks to their great support. We look forward to developing more features on the platform.”


— Dustin Brink, Front End Developer at Derive Systems 

","metafields":[{"value":"Derive Systems","key":"company","title":"Company","type":"text","children":null},{"value":"Automotive","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Derive Systems  is a leading automotive technology company with over 2 million software installations powering upgraded experiences for drivers on the road today. Derive  connects vehicles and their engines to the digital world, enabling individuals and fleets to take control and optimize for performance, fuel efficiency, safety, and more. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"60aac7a0-ded7-11e8-86d0-2998be663226-derive.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/60aac7a0-ded7-11e8-86d0-2998be663226-derive.jpg","imgix_url":"https://imgix.cosmicjs.com/60aac7a0-ded7-11e8-86d0-2998be663226-derive.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2018-10-25T18:07:21.426Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-11-15T14:51:19.007Z"},{"_id":"5b86a2c6016461100076e5c7","slug":"consolidating-the-content-chaos-tac-switches-from-wordpress-to-cosmic-js","title":"Consolidating the Content Chaos: TAC Switches from WordPress to Cosmic","content":"

TAC - The Arnold Companies is among the largest fuel wholesalers and aviation service providers in the country. Steady growth, positive financial results and a diverse industry base consistently make TAC one of the top private companies in the US. TAC is made up of many separate brands under one corporate identity, including TAC Energy, TAC Air and Keystone Aviation. 



With TAC's old website built as stand-alone sites that linked to each other on a WordPress foundation, the user experience was over-complicated and required too many steps for visitors to find what they were looking for. Being WordPress-based, it did not allow for clear information architecture to promote the different business lines within the portfolio. 

Through a structured RFP process to identify a partner in re-thinking the customer experience and content management system, interactive agency Simple Media and Cosmic were selected. Other platform options included WordPress, Drupal, and Joomla. 

Focused on building with a mobile-first approach and consolidating the chaos of the existing number of brand sites to bring harmony to the four brands and ease-of-use in content management, TAC found an outstanding and simple solution in Cosmic. 



To learn more about the development, Brandon Reid, Lead Developer on the project breaks down the stack: 

Development Team: "TAC’s backend is powered by Node, Next.js, and Express. Next.js is used for server side rendering capabilities for SEO optimization as well as site routing. Next.js also makes it easy to integrate with Babel and Webpack since they are built right in. The team used Next.js routing API to rendering page templates for pages that have the same design layouts. TAC’s frontend is powered by React.js and the world's most popular react UI framework, Material UI. In order to use Material UI with SSR, the team had to wrap the site in a JSSProvider and use CSSBaseline. For development they used Eslint as a linter for a cleaner and more consistent codebase. 



Since TAC uses ES6 JavaScript, the team had to also implement a very small amount of polyfill to transpile ES6 to ES5 in order for the site to work with IE11. Some notable node modules used were: 



TAC's development team started building the site by using Cosmic’s React Starter, which helped them get jump-started right away. Building TAC started with implementing all globals for the site (Header, Footer, Favicon, etc), so the developers quickly created some JavaScript request functions to pull data from the Cosmic Buckets using Cosmic’s Node API. The team added those global components to the sites main _app layout, so every page would be wrapped and rendered with those globals. From there they analyzed what pages would have reusable components across multiple pages or the site, and created component views for those pages based off their analysis. 

TAC was then able to efficiently knock out page designs and implement object types in the Cosmic bucket on the fly. As TAC got closer to site launch, they noticed compatibility issues with IE11 and had to come up with a solution. At first, they were going to do a browser sniff in the codebase to display something that would work on IE. Instead, the team implemented Babel and some polyfills to solve their  compatibility issues."





"Our goal in this project was not to reinvent the brands, but to simplify the communication and process for website content management. Cosmic has allowed us to become current in our presentation and relevant in our content push. Plus, the site is easier to use for visitors and staff alike."

— Tad Perryman, VP of Marketing, TAC - The Arnold Companies

","metafields":[{"value":"The Arnold Companies","key":"company","title":"Company","type":"text","children":null},{"value":"Energy / Aviation","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"TAC - The Arnold Companies is among the largest fuel wholesalers and aviation service providers in the country. Steady growth, positive financial results and a diverse industry base consistently make TAC one of the top private companies in the US. TAC is made up of many separate brands under one corporate identity, including TAC Energy, TAC Air and Keystone Aviation. \n\n\n\n\n\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"9aaed6c0-b04d-11e8-8760-cbfd96ceee1a-30210740-966e-11e8-ab08-31f1ed4cd97d-tac-full-logo.svg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/9aaed6c0-b04d-11e8-8760-cbfd96ceee1a-30210740-966e-11e8-ab08-31f1ed4cd97d-tac-full-logo.svg","imgix_url":"https://imgix.cosmicjs.com/9aaed6c0-b04d-11e8-8760-cbfd96ceee1a-30210740-966e-11e8-ab08-31f1ed4cd97d-tac-full-logo.svg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-03-01T22:26:36.367Z","created_by":"5716b504e9c686d006000073","created":"2018-08-29T13:42:30.982Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-12-20T14:40:21.379Z"},{"_id":"5bd88cc2dcf8c4248f3ccc4b","slug":"tripwire-interactive-builds-a-react-corporate-website","title":"Tripwire Interactive Builds a React Corporate Website","content":"

Tripwire Interactive is an entertainment software developer and publisher founded in 2005 by the award-winning mod team and winners of the 2004 edition of the “$1,000,000 Make Something Unreal” competition.



Gamers want games that grab their attention and will keep them coming back for more. Tripwire Interactive has been producing those types of games since the first Red Orchestra mod that won the "Make Something Unreal" competition in 2004. Since then Tripwire has won numerous Multiplayer and FPS Game of the Year awards from top editorial sites and millions have played a Red Orchestra or Killing Floor game, with an average play time of over 40 hours, per player, per game! 



Historically using an Umbraco system, The Tripwire Interactive team needed an easy way for their marketers to maintain marketing website content for their games' parent brand. Each new game needed a dedicated landing page with marketing content. Blog,\r\nCareer and Press feeds needed to be managed by the marketing team without bottlenecking the developers. The Tripwire Interactive team chose Cosmic as their dynamic content management solution as they built their new corporate website on a modern React\r\nstack. 


"Cosmic allowed us to easily integrate a secure and fast back-end API into our React app. Cosmic fit our needs with its simple web-based dashboard so that members of our marketing team can create, edit, and delete new content on the fly. Our team\r\nhas been enjoying the ease of use with the new system."

— Owen Liversidge, Lead Developer


","metafields":[{"value":"Tripwire Interactive","key":"company","title":"Company","type":"text","children":null},{"value":"Gaming","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Gamers want games that grab their attention and will keep them coming back for more. Tripwire Interactive has been producing those types of games since the first Red Orchestra mod that won the \"Make Something Unreal\" competition in 2004. Since then Tripwire has won numerous Multiplayer and FPS Game of the Year awards from top editorial sites and millions have played a Red Orchestra or Killing Floor game, with an average play time of over 40 hours, per player, per game! \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"bcc07550-dc64-11e8-a330-792a8fc6e55e-u7wjhcn6_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/bcc07550-dc64-11e8-a330-792a8fc6e55e-u7wjhcn6_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/bcc07550-dc64-11e8-a330-792a8fc6e55e-u7wjhcn6_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2018-10-30T16:54:26.538Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-11-08T20:12:40.566Z"}]},{"children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"creative-agency","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"vuejs-store-locator","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"angular-company-website","type":"text","required":false}]}],"type":"repeater","title":"App Slugs","key":"app_slugs","id":"0VoVnWQ6LC","value":"creative-agency","repeater_fields":"\"\"\"\"[{\"title\":\"Slug\",\"key\":\"slug\",\"value\":\"\",\"type\":\"text\",\"required\":false}]\"\"\"\""},{"children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"wordpress-importer","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"export-to-csv","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"google-analytics","type":"text","required":false}]}],"type":"repeater","title":"Extension Slugs","key":"extension_slugs","id":"oc1yJadcKC","value":"wordpress-importer","repeater_fields":"\"\"\"\"[{\"title\":\"Slug\",\"key\":\"slug\",\"value\":\"\",\"type\":\"text\",\"required\":false}]\"\"\"\""},{"children":null,"type":"html-textarea","title":"Testimonial","key":"testimonial","id":"Lysc55fQtS","value":"

“Leveraging the Cosmic GraphQL API allows for easy updates to our news and blog, while keeping payloads small and fast. Integration with Cosmic could not be easier thanks to their great support. We look forward to developing more features on the platform.”

"},{"children":null,"type":"text","title":"Testimonial Credit","key":"testimonial_credit","id":"Pk3h88NstH","value":"Dustin Brink, Front End Developer at Derive Systems "}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"solutions","created":"2019-07-08T15:00:05.867Z","created_at":"2019-07-08T15:00:05.867Z","modified_at":"2020-08-10T14:05:12.245Z","status":"published","locale":null,"published_at":"2020-05-06T05:31:15.844Z","modified_by":"5357ef811693be2118000001","publish_at":null,"order":2,"unpublish_at":null,"metadata":{"solution_name":"Company Websites","image":{"url":"https://cdn.cosmicjs.com/caed7450-9dbd-11e9-a5b4-e5df9f8049d3-Company-Websites.png","imgix_url":"https://imgix.cosmicjs.com/caed7450-9dbd-11e9-a5b4-e5df9f8049d3-Company-Websites.png"},"case_studies":[{"_id":"5bd206599dca8d10e941b69b","slug":"derive-systems-runs-on-cosmic-js","title":"Derive Systems runs on Cosmic","content":"

Derive Systems  is a leading automotive technology company with over 2 million software installations powering upgraded experiences for drivers on the road today. Derive  connects vehicles and their engines to the digital world, enabling individuals and fleets to take control and optimize for performance, fuel efficiency, safety, and more. 



The team at Derive Systems was in search of a headless CMS that would give their developers flexibility out-of-the-box while enabling their content managers to manage content in a familiar and modern CMS Dashboard. They chose Cosmic due to its easy content modeling tools for their Blog, Press, About and Team Sections. Derive now runs a Next.js, React and Express framework that utilizes the Cosmic GraphQL API to deliver its content.




“Leveraging the Cosmic GraphQL API allows for easy updates to our news and blog, while keeping payloads small and fast. Integration with Cosmic could not be easier thanks to their great support. We look forward to developing more features on the platform.”


— Dustin Brink, Front End Developer at Derive Systems 

","metafields":[{"value":"Derive Systems","key":"company","title":"Company","type":"text","children":null},{"value":"Automotive","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Derive Systems  is a leading automotive technology company with over 2 million software installations powering upgraded experiences for drivers on the road today. Derive  connects vehicles and their engines to the digital world, enabling individuals and fleets to take control and optimize for performance, fuel efficiency, safety, and more. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"60aac7a0-ded7-11e8-86d0-2998be663226-derive.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/60aac7a0-ded7-11e8-86d0-2998be663226-derive.jpg","imgix_url":"https://imgix.cosmicjs.com/60aac7a0-ded7-11e8-86d0-2998be663226-derive.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2018-10-25T18:07:21.426Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-11-15T14:51:19.007Z","metadata":{"company":"Derive Systems","industry_type":"Automotive","teaser":"Derive Systems  is a leading automotive technology company with over 2 million software installations powering upgraded experiences for drivers on the road today. Derive  connects vehicles and their engines to the digital world, enabling individuals and fleets to take control and optimize for performance, fuel efficiency, safety, and more. \n","logo":{"url":"https://cdn.cosmicjs.com/60aac7a0-ded7-11e8-86d0-2998be663226-derive.jpg","imgix_url":"https://imgix.cosmicjs.com/60aac7a0-ded7-11e8-86d0-2998be663226-derive.jpg"}}},{"_id":"5b86a2c6016461100076e5c7","slug":"consolidating-the-content-chaos-tac-switches-from-wordpress-to-cosmic-js","title":"Consolidating the Content Chaos: TAC Switches from WordPress to Cosmic","content":"

TAC - The Arnold Companies is among the largest fuel wholesalers and aviation service providers in the country. Steady growth, positive financial results and a diverse industry base consistently make TAC one of the top private companies in the US. TAC is made up of many separate brands under one corporate identity, including TAC Energy, TAC Air and Keystone Aviation. 



With TAC's old website built as stand-alone sites that linked to each other on a WordPress foundation, the user experience was over-complicated and required too many steps for visitors to find what they were looking for. Being WordPress-based, it did not allow for clear information architecture to promote the different business lines within the portfolio. 

Through a structured RFP process to identify a partner in re-thinking the customer experience and content management system, interactive agency Simple Media and Cosmic were selected. Other platform options included WordPress, Drupal, and Joomla. 

Focused on building with a mobile-first approach and consolidating the chaos of the existing number of brand sites to bring harmony to the four brands and ease-of-use in content management, TAC found an outstanding and simple solution in Cosmic. 



To learn more about the development, Brandon Reid, Lead Developer on the project breaks down the stack: 

Development Team: "TAC’s backend is powered by Node, Next.js, and Express. Next.js is used for server side rendering capabilities for SEO optimization as well as site routing. Next.js also makes it easy to integrate with Babel and Webpack since they are built right in. The team used Next.js routing API to rendering page templates for pages that have the same design layouts. TAC’s frontend is powered by React.js and the world's most popular react UI framework, Material UI. In order to use Material UI with SSR, the team had to wrap the site in a JSSProvider and use CSSBaseline. For development they used Eslint as a linter for a cleaner and more consistent codebase. 



Since TAC uses ES6 JavaScript, the team had to also implement a very small amount of polyfill to transpile ES6 to ES5 in order for the site to work with IE11. Some notable node modules used were: 



TAC's development team started building the site by using Cosmic’s React Starter, which helped them get jump-started right away. Building TAC started with implementing all globals for the site (Header, Footer, Favicon, etc), so the developers quickly created some JavaScript request functions to pull data from the Cosmic Buckets using Cosmic’s Node API. The team added those global components to the sites main _app layout, so every page would be wrapped and rendered with those globals. From there they analyzed what pages would have reusable components across multiple pages or the site, and created component views for those pages based off their analysis. 

TAC was then able to efficiently knock out page designs and implement object types in the Cosmic bucket on the fly. As TAC got closer to site launch, they noticed compatibility issues with IE11 and had to come up with a solution. At first, they were going to do a browser sniff in the codebase to display something that would work on IE. Instead, the team implemented Babel and some polyfills to solve their  compatibility issues."





"Our goal in this project was not to reinvent the brands, but to simplify the communication and process for website content management. Cosmic has allowed us to become current in our presentation and relevant in our content push. Plus, the site is easier to use for visitors and staff alike."

— Tad Perryman, VP of Marketing, TAC - The Arnold Companies

","metafields":[{"value":"The Arnold Companies","key":"company","title":"Company","type":"text","children":null},{"value":"Energy / Aviation","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"TAC - The Arnold Companies is among the largest fuel wholesalers and aviation service providers in the country. Steady growth, positive financial results and a diverse industry base consistently make TAC one of the top private companies in the US. TAC is made up of many separate brands under one corporate identity, including TAC Energy, TAC Air and Keystone Aviation. \n\n\n\n\n\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"9aaed6c0-b04d-11e8-8760-cbfd96ceee1a-30210740-966e-11e8-ab08-31f1ed4cd97d-tac-full-logo.svg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/9aaed6c0-b04d-11e8-8760-cbfd96ceee1a-30210740-966e-11e8-ab08-31f1ed4cd97d-tac-full-logo.svg","imgix_url":"https://imgix.cosmicjs.com/9aaed6c0-b04d-11e8-8760-cbfd96ceee1a-30210740-966e-11e8-ab08-31f1ed4cd97d-tac-full-logo.svg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-03-01T22:26:36.367Z","created_by":"5716b504e9c686d006000073","created":"2018-08-29T13:42:30.982Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-12-20T14:40:21.379Z","metadata":{"company":"The Arnold Companies","industry_type":"Energy / Aviation","teaser":"TAC - The Arnold Companies is among the largest fuel wholesalers and aviation service providers in the country. Steady growth, positive financial results and a diverse industry base consistently make TAC one of the top private companies in the US. TAC is made up of many separate brands under one corporate identity, including TAC Energy, TAC Air and Keystone Aviation. \n\n\n\n\n\n","logo":{"url":"https://cdn.cosmicjs.com/9aaed6c0-b04d-11e8-8760-cbfd96ceee1a-30210740-966e-11e8-ab08-31f1ed4cd97d-tac-full-logo.svg","imgix_url":"https://imgix.cosmicjs.com/9aaed6c0-b04d-11e8-8760-cbfd96ceee1a-30210740-966e-11e8-ab08-31f1ed4cd97d-tac-full-logo.svg"}}},{"_id":"5bd88cc2dcf8c4248f3ccc4b","slug":"tripwire-interactive-builds-a-react-corporate-website","title":"Tripwire Interactive Builds a React Corporate Website","content":"

Tripwire Interactive is an entertainment software developer and publisher founded in 2005 by the award-winning mod team and winners of the 2004 edition of the “$1,000,000 Make Something Unreal” competition.



Gamers want games that grab their attention and will keep them coming back for more. Tripwire Interactive has been producing those types of games since the first Red Orchestra mod that won the "Make Something Unreal" competition in 2004. Since then Tripwire has won numerous Multiplayer and FPS Game of the Year awards from top editorial sites and millions have played a Red Orchestra or Killing Floor game, with an average play time of over 40 hours, per player, per game! 



Historically using an Umbraco system, The Tripwire Interactive team needed an easy way for their marketers to maintain marketing website content for their games' parent brand. Each new game needed a dedicated landing page with marketing content. Blog,\r\nCareer and Press feeds needed to be managed by the marketing team without bottlenecking the developers. The Tripwire Interactive team chose Cosmic as their dynamic content management solution as they built their new corporate website on a modern React\r\nstack. 


"Cosmic allowed us to easily integrate a secure and fast back-end API into our React app. Cosmic fit our needs with its simple web-based dashboard so that members of our marketing team can create, edit, and delete new content on the fly. Our team\r\nhas been enjoying the ease of use with the new system."

— Owen Liversidge, Lead Developer


","metafields":[{"value":"Tripwire Interactive","key":"company","title":"Company","type":"text","children":null},{"value":"Gaming","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Gamers want games that grab their attention and will keep them coming back for more. Tripwire Interactive has been producing those types of games since the first Red Orchestra mod that won the \"Make Something Unreal\" competition in 2004. Since then Tripwire has won numerous Multiplayer and FPS Game of the Year awards from top editorial sites and millions have played a Red Orchestra or Killing Floor game, with an average play time of over 40 hours, per player, per game! \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"bcc07550-dc64-11e8-a330-792a8fc6e55e-u7wjhcn6_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/bcc07550-dc64-11e8-a330-792a8fc6e55e-u7wjhcn6_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/bcc07550-dc64-11e8-a330-792a8fc6e55e-u7wjhcn6_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2018-10-30T16:54:26.538Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-11-08T20:12:40.566Z","metadata":{"company":"Tripwire Interactive","industry_type":"Gaming","teaser":"Gamers want games that grab their attention and will keep them coming back for more. Tripwire Interactive has been producing those types of games since the first Red Orchestra mod that won the \"Make Something Unreal\" competition in 2004. Since then Tripwire has won numerous Multiplayer and FPS Game of the Year awards from top editorial sites and millions have played a Red Orchestra or Killing Floor game, with an average play time of over 40 hours, per player, per game! \n","logo":{"url":"https://cdn.cosmicjs.com/bcc07550-dc64-11e8-a330-792a8fc6e55e-u7wjhcn6_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/bcc07550-dc64-11e8-a330-792a8fc6e55e-u7wjhcn6_400x400.jpg"}}}],"app_slugs":[{"slug":"creative-agency"},{"slug":"vuejs-store-locator"},{"slug":"angular-company-website"}],"extension_slugs":[{"slug":"wordpress-importer"},{"slug":"export-to-csv"},{"slug":"google-analytics"}],"testimonial":"

“Leveraging the Cosmic GraphQL API allows for easy updates to our news and blog, while keeping payloads small and fast. Integration with Cosmic could not be easier thanks to their great support. We look forward to developing more features on the platform.”

","testimonial_credit":"Dustin Brink, Front End Developer at Derive Systems "}},{"_id":"58fbe247db1c070e0900181e","order":2,"slug":"nodejs-cms","title":"Node.js CMS","content":"

Node.js CMS Templates

You can use our React CMS Templates and Node.js CMS Tutorials, which includes Node.js CMS GitHub code examples.

Node.js CMS Dashboard

Cosmic is a powerful Headless CMS that enables your team to build apps faster. Developers get flexible API tools, and content creators get an intuitive content management dashboard. Get started free.

","metafields":[{"children":null,"type":"file","title":"Image","key":"image","id":"Vgp5HgjYoo","value":"7171a4d0-27b0-11e7-b6ae-8108cf4caa96-nodejs.svg","url":"https://cdn.cosmicjs.com/7171a4d0-27b0-11e7-b6ae-8108cf4caa96-nodejs.svg","imgix_url":"https://imgix.cosmicjs.com/7171a4d0-27b0-11e7-b6ae-8108cf4caa96-nodejs.svg"},{"children":null,"type":"file","title":"Thumbnail","key":"thumbnail","id":"zh07iEptWu","value":"759e85a0-27b0-11e7-b6ae-8108cf4caa96-nodejs.svg","url":"https://cdn.cosmicjs.com/759e85a0-27b0-11e7-b6ae-8108cf4caa96-nodejs.svg","imgix_url":"https://imgix.cosmicjs.com/759e85a0-27b0-11e7-b6ae-8108cf4caa96-nodejs.svg"},{"children":null,"type":"html-textarea","title":"Blurb","key":"blurb","id":"tQ4ByvfCGH","value":"

Cosmic is the best CMS for Node.js websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

"},{"children":null,"type":"text","title":"Headline","key":"headline","id":"4IcikPO8nI","value":"Node.js"},{"children":null,"type":"text","title":"SEO Description","key":"seo_description","id":"2DbQ3kz2Rz","value":"Cosmic is the best Node.js Headless CMS on the market. Use the GraphQL, REST, and other API tools to integrate with any website or app."},{"children":null,"type":"file","title":"Twitter Card Image","key":"twitter_card_image","id":"8f1MthySJQ","value":"753075c0-2aca-11e7-ae54-e9a1fc58ec22-node.jpg","url":"https://cdn.cosmicjs.com/753075c0-2aca-11e7-ae54-e9a1fc58ec22-node.jpg","imgix_url":"https://imgix.cosmicjs.com/753075c0-2aca-11e7-ae54-e9a1fc58ec22-node.jpg"},{"children":null,"type":"html-textarea","title":"Code Example","key":"code_example","id":"23SbGaRLAB","value":""},{"children":null,"type":"text","title":"SEO Title","key":"seo_title","id":"dWjNp0LnL1","value":"The Best Headless CMS for Node.js"},{"children":[{"type":"repeating_item","children":[{"title":"Title","key":"title","value":"Getting Started with Cosmic CMS and Next.js (Part 1)","type":"text","required":false},{"title":"Link","key":"link","value":"https://www.youtube.com/embed/NZA1dF2IDqQ?showinfo=0&wmode=opaque","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Title","key":"title","value":"Building a Blog with Cosmic CMS and Next.js (Part 2)","type":"text","required":false},{"title":"Link","key":"link","value":"https://www.youtube.com/embed/sdvdwo3g3PE?showinfo=0&wmode=opaque","type":"text","required":false}]}],"type":"repeater","title":"Videos","key":"videos","id":"srD98wDobg","value":"Getting Started with Cosmic CMS and Next.js (Part 1)","repeater_fields":[{"title":"Title","key":"title","value":"","type":"text","required":false},{"title":"Link","key":"link","value":"","type":"text","required":false}]},{"children":null,"type":"text","title":"Apps Search Term","key":"apps_search_term","id":"v95tq5i2enaf3oreecdk","value":""},{"children":null,"type":"text","title":"Articles Search Term","key":"articles_search_term","id":"apps_search_term_kef9yhcej8gy","value":""},{"children":null,"type":"html-textarea","title":"Page Overview","key":"page_overview","id":"zYuPyDtTWY","value":""},{"children":null,"type":"html-textarea","title":"SEO Content","key":"seo_content","id":"6dT4bcaDeW","value":""}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"kb-articles","created_at":"2017-04-22T23:07:51.159Z","created_by":"5357ef811693be2118000001","created":"2017-04-22T23:07:51.159Z","status":"published","modified_at":"2020-09-30T14:01:38.940Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-09-30T14:01:38.940Z","unpublish_at":null,"metadata":{"image":{"url":"https://cdn.cosmicjs.com/7171a4d0-27b0-11e7-b6ae-8108cf4caa96-nodejs.svg","imgix_url":"https://imgix.cosmicjs.com/7171a4d0-27b0-11e7-b6ae-8108cf4caa96-nodejs.svg"},"thumbnail":{"url":"https://cdn.cosmicjs.com/759e85a0-27b0-11e7-b6ae-8108cf4caa96-nodejs.svg","imgix_url":"https://imgix.cosmicjs.com/759e85a0-27b0-11e7-b6ae-8108cf4caa96-nodejs.svg"},"blurb":"

Cosmic is the best CMS for Node.js websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

","headline":"Node.js","seo_description":"Cosmic is the best Node.js Headless CMS on the market. Use the GraphQL, REST, and other API tools to integrate with any website or app.","twitter_card_image":{"url":"https://cdn.cosmicjs.com/753075c0-2aca-11e7-ae54-e9a1fc58ec22-node.jpg","imgix_url":"https://imgix.cosmicjs.com/753075c0-2aca-11e7-ae54-e9a1fc58ec22-node.jpg"},"code_example":"","seo_title":"The Best Headless CMS for Node.js","videos":[{"title":"Getting Started with Cosmic CMS and Next.js (Part 1)","link":"https://www.youtube.com/embed/NZA1dF2IDqQ?showinfo=0&wmode=opaque"},{"title":"Building a Blog with Cosmic CMS and Next.js (Part 2)","link":"https://www.youtube.com/embed/sdvdwo3g3PE?showinfo=0&wmode=opaque"}],"apps_search_term":"","articles_search_term":"","page_overview":"","seo_content":""}},{"_id":"5aea0bb75958540e8514e67e","order":3,"slug":"customer-success-executive","title":"Customer Success Executive","content":"

Cosmic is transforming the way content is created and delivered to the world. We provide a headless CMS to help teams build modern content-powered apps together.

We are currently looking for an Customer Success Executive to help our customers get more value out of their use of Cosmic.

If selected to join our team, you would be expected to be self-starting and provide quality, quantifiable results for our remote-first company.

Contact jobs@cosmicjs.com with the subject "Customer Success Executive" to apply.

","metafields":[{"children":null,"type":"textarea","title":"Teaser","key":"teaser","id":"ZZvzt6G8RN","value":"As an Customer Success Executive at Cosmic, you will help our customers get more value out of their use of Cosmic"},{"children":null,"type":"text","title":"Font Awesome Icon","key":"font_awesome_icon","id":"jhGgJgAunT","value":"fa-users"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"jobs","created_at":"2018-05-02T19:04:23.318Z","created_by":"5716b504e9c686d006000073","created":"2018-05-02T19:04:23.318Z","status":"published","modified_at":"2020-10-02T02:11:12.546Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-05-18T13:19:36.442Z","unpublish_at":null,"metadata":{"teaser":"As an Customer Success Executive at Cosmic, you will help our customers get more value out of their use of Cosmic","font_awesome_icon":"fa-users"}},{"_id":"5ef386b138f28e0008b99776","slug":"drupal-headless-cms","title":"Drupal Headless CMS","content":"

Drupal has been around for a long time, since 2001, making it ancient in internet years. It's built a wide-reaching ecosystem and brand recognition in the open source CMS space. However, as it tries to keep up with new Headless CMS solutions, it is showing its age. Cosmic is an alternative to Drupal that your developers and content creators will love.


Monolithic vs Headless CMS

Drupal, as a monolithic CMS, and other older installed CMS systems like it, comes with a coupled front end application layer that requires additional development and maintenance. Cosmic is a Headless CMS meaning that the content API and presentation layer are decoupled which gives your team greater flexibility when it comes to where your content can go.

Cosmic provides everything your team of developers and content creators need: powerful and intuitive APIs for developers, and an easy-to-use dashboard for content creators. We've removed all complexity and CMS maintenance, so your team can focus on building great products faster, together.


But can't Drupal go Headless?

Although you CAN make Drupal a Headless CMS, you still have a lot of work to do to bring it up to the level of an optimized CMS system that's truly headless. And along with your application, you will need to maintain the CMS itself, adding more development costs and taking away focus from what really matters: creating great content and user experiences.

","metafields":[{"children":null,"type":"text","title":"Vendor Name","key":"vendor_name","id":"1AHNoBihoX","value":"Drupal Headless CMS"},{"children":null,"type":"file","title":"Logo","key":"logo","id":"M9SdGCQyP7","value":"65a7e8a0-b577-11ea-8df1-6dc611c1b567-drupal-headless-cms.png","url":"https://cdn.cosmicjs.com/65a7e8a0-b577-11ea-8df1-6dc611c1b567-drupal-headless-cms.png","imgix_url":"https://imgix.cosmicjs.com/65a7e8a0-b577-11ea-8df1-6dc611c1b567-drupal-headless-cms.png"},{"children":null,"type":"textarea","title":"Tech","key":"tech","id":"L9iv7AVRDP","value":"LAMP: Linux, Apache, MySQL database, PHP."},{"children":null,"type":"textarea","title":"Scalability","key":"scalability","id":"xiqtajVd4p","value":"Does not scale easily. Limited by your servers, hosting provider, and budget."},{"children":null,"type":"textarea","title":"Security","key":"security","id":"jDWPuYbCCN","value":"You manage the security yourself. No default data encryption at rest or in transit."},{"children":null,"type":"textarea","title":"Maintenance","key":"maintenance","id":"uy7DTAiGzy","value":"You deploy, host, and maintain everything yourself. Along with your application and content, you need to maintain updates and security for your CMS system."},{"children":null,"type":"textarea","title":"Caching","key":"caching","id":"iNZL7cEsQK","value":"No caching included out of the box."},{"children":null,"type":"textarea","title":"Media CDN","key":"media_cdn","id":"fzX7vsutNM","value":"No CDN included out of the box."},{"children":null,"type":"textarea","title":"Image Processing","key":"image_processing","id":"VPVIGhsCZg","value":"Manually manage your own image sizes and optimizations."},{"children":null,"type":"textarea","title":"Extendability","key":"extendability","id":"r5DHJxsaJI","value":"Themes and plugins."},{"children":null,"type":"textarea","title":"Front end","key":"front_end","id":"CZ3AkBbkj0","value":"Front end is coupled with backend CMS."},{"children":null,"type":"textarea","title":"Number of Projects","key":"number_of_projects","id":"igXKCHu47v","value":"One login, one website."},{"children":null,"type":"html-textarea","title":"Costs","key":"costs","id":"Et7SwUDVuX","value":"

You will need to hire developer resources. Average salary of a full-stack developer is $111,600 per year. You may need to hire 1-3 developers to maintain the CMS.

"},{"children":null,"type":"switch","title":"Include in link list","key":"include_in_link_list","id":"l6ED5O7HGb","value":true,"options":"yes,no"},{"children":null,"type":"text","title":"Cost Value","key":"cost_value","id":"iOhEU0Xc11","value":"$223,200"},{"children":null,"type":"text","title":"Cost Text","key":"cost_text","id":"MlkzD0D4it","value":"per year"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"cms-competitors","created":"2020-06-24T17:00:33.175Z","created_at":"2020-06-24T17:00:33.175Z","modified_at":"2020-06-28T20:52:37.297Z","status":"published","locale":null,"modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-06-28T20:52:37.297Z","unpublish_at":null,"order":3,"metadata":{"vendor_name":"Drupal Headless CMS","logo":{"url":"https://cdn.cosmicjs.com/65a7e8a0-b577-11ea-8df1-6dc611c1b567-drupal-headless-cms.png","imgix_url":"https://imgix.cosmicjs.com/65a7e8a0-b577-11ea-8df1-6dc611c1b567-drupal-headless-cms.png"},"tech":"LAMP: Linux, Apache, MySQL database, PHP.","scalability":"Does not scale easily. Limited by your servers, hosting provider, and budget.","security":"You manage the security yourself. No default data encryption at rest or in transit.","maintenance":"You deploy, host, and maintain everything yourself. Along with your application and content, you need to maintain updates and security for your CMS system.","caching":"No caching included out of the box.","media_cdn":"No CDN included out of the box.","image_processing":"Manually manage your own image sizes and optimizations.","extendability":"Themes and plugins.","front_end":"Front end is coupled with backend CMS.","number_of_projects":"One login, one website.","costs":"

You will need to hire developer resources. Average salary of a full-stack developer is $111,600 per year. You may need to hire 1-3 developers to maintain the CMS.

","include_in_link_list":true,"cost_value":"$223,200","cost_text":"per year"}},{"_id":"63a354f2e0454f00086388cc","order":3,"slug":"cosmic-year-in-review-2022","title":"Cosmic Year in Review","content":"

2022 was a productive year for us at Cosmic. I am proud of the progress we've made this year and stoked for more great things to come in 2023. Read about some of the highlights in the recap below:

2022 Highlights

New dashboard progress
Over the course of the year, we have been building, what can only be described in my humble opinion, as the best content management system in the world. Starting from the ground up, we have reimagined the experience, building it with hand-crafted precision.

Special thanks goes to the customers who have been helping to provide feedback along the way 🙌 We are coming very close to a beta release, and are looking forward to getting it into your hands for wider release, so stay tuned!


The beautiful new dashboard 😍

Infrastructure updates
We are grateful to you for choosing Cosmic to host and deliver your mission-critical content. With this trust comes our commitment to providing a resilient and performant service for your team and your customers, wherever they are in the world. This year we shipped a big update to make our global infrastructure more resilient, adding multiple regions to our data centers as well as making the dashboard up to three times faster.

Educational resources
Along with updates to improve the service experience, we've continued efforts to teach about the value of decoupling content from code to make your team more efficient and productive.

We offered new educational resources in our documentation to help you learn about the powerful capabilities of the Cosmic API.

We provided how-to articles to help you learn how you can use Cosmic to power content for various use cases such as a developer portfolio, restaurant website, and non-profit website.

As the year ends, and the web3 world seems to have vanished like a thief in the night, we offered a digital art marketplace website powered by good old fashioned centralized API services: Cosmic and Stripe.

We even launched a podcast to help you learn more about Cosmic and the latest technology trends to help you build modern apps using powerful tools (Follow Build Time on YouTube and Spotify!)

2023 and onward 🚀

I'm proud of our accomplishments in 2022 and excited for what's to come in 2023. This year, we not only focused on building a world-class product for our customers, we've also focused on building and strengthening a world-class team. And for\r\nthe Cosmic team I am very proud and grateful. But our work is not done yet, it is just beginning!

At Cosmic, we will continue to focus on helping teams build great products to better share their content with the world. It's a beautiful mission that I feel fortunate to be working on.

Cheers to a productive 2022 and we can't wait to see what you build in 2023 🥂

Tony Spiro
Cosmic CEO

","metafields":[{"children":null,"type":"object","title":"Author","key":"author","id":"AxgVe8LCgw","value":"5768b253163172890e00002c","required":true,"object_type":"authors","object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"children":null,"type":"html-textarea","title":"Teaser","key":"teaser","id":"VoIS1r71Zd","value":"

2022 was a productive year for us at Cosmic. I am proud of the progress we've made this year and stoked for more great things to come in 2023.

"},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"OwYxg9MEaf","value":"751edbb0-8165-11ed-a98f-051589794d26-cosmic-2022.png","url":"https://cdn.cosmicjs.com/751edbb0-8165-11ed-a98f-051589794d26-cosmic-2022.png","imgix_url":"https://imgix.cosmicjs.com/751edbb0-8165-11ed-a98f-051589794d26-cosmic-2022.png"},{"children":null,"type":"textarea","title":"SEO Meta Description","key":"seo_meta_description","id":"EQuHOEDJFB","value":"2022 was a productive year for us at Cosmic. I am proud of the progress we've made this year and stoked for more great things to come in 2023."},{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"EdNSlOqbJJ","value":"2022-12-22"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2022-12-21T18:48:17.853Z","created_by":"5357ef811693be2118000001","modified_at":"2022-12-22T16:32:57.573Z","created":"2022-12-21T18:48:17.854Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/751edbb0-8165-11ed-a98f-051589794d26-cosmic-2022.png","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2022-12-22T16:32:57.573Z","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

2022 was a productive year for us at Cosmic. I am proud of the progress we've made this year and stoked for more great things to come in 2023.

","featured_image":{"url":"https://cdn.cosmicjs.com/751edbb0-8165-11ed-a98f-051589794d26-cosmic-2022.png","imgix_url":"https://imgix.cosmicjs.com/751edbb0-8165-11ed-a98f-051589794d26-cosmic-2022.png"},"seo_meta_description":"2022 was a productive year for us at Cosmic. I am proud of the progress we've made this year and stoked for more great things to come in 2023.","published_date":"2022-12-22"}},{"_id":"5d235aaf957da74a7c432562","slug":"headless-cms-for-press-websites","title":"Headless CMS for Press Websites","content":"

Global organizations use the Cosmic Headless CMS to publish content like blogs, news updates, press releases, quarterly financials, case studies and more. With Cosmic, press teams can publish multi-language content localized to over 400 regions, all from the same Dashboard. Approval Workflows, Revision History and Content Preview assist press directors as they manage content for upcoming campaigns in collaboration with their content creators. The Cosmic headless CMS approach promotes the most collaboration and flexibility for your team.

All content stored in Cosmic is available for easy export and reuse, so press content can live forever and be migrated from project to project. 

","metafields":[{"children":null,"type":"text","title":"Solution Name","key":"solution_name","id":"rcgbKYTwDb","value":"Press Websites"},{"children":null,"type":"file","title":"Image","key":"image","id":"RUdMyB2eTV","value":"39b60450-9f54-11e9-ac09-4be8a5631b5e-Hostmaker.png","url":"https://cdn.cosmicjs.com/39b60450-9f54-11e9-ac09-4be8a5631b5e-Hostmaker.png","imgix_url":"https://imgix.cosmicjs.com/39b60450-9f54-11e9-ac09-4be8a5631b5e-Hostmaker.png"},{"children":null,"type":"objects","title":"Case Studies","key":"case_studies","id":"M2C9X1oO3n","value":"596663e8880d69fb6c000194,5b743e111a739a78a5f0725b,5be9ca96cc3f3e2ce66ce511","object_type":"case-studies","objects":[{"_id":"596663e8880d69fb6c000194","slug":"joblift-elevates-their-stack","title":"Joblift Elevates Their Stack ","content":"

In any bustling economy, a key piece of capital is human capital. When the most precious portion of capital is required, Joblift seeks to connect positions with people. They choose Cosmic to deliver their content via the cloud. 



Joblift manages localized content to serve Job, Press and Blog feeds to its various markets, including the UK, Netherlands and Germany. Easy user roles and permissions equip their team with the tools they need to seamlessly run a global organization. 


"Cosmic has completely sped up our ability to upload our content easily and efficiently. With Cosmic we now have a smooth process for uploading press releases which reflects the quality content on our website.”

— Ashleigh Grady, Content Editor and Marketing Manager

","metafields":[{"value":"Joblift","key":"company","title":"Company","type":"text","children":null},{"value":"Career Services","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"In any bustling economy, a key piece of capital is human capital. When the most precious portion of capital is required, Joblift seeks to connect positions with people. They choose Cosmic to deliver their content via the cloud. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created":"2017-07-12T18:01:12.194Z","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","status":"published","publish_at":null,"published_at":"2018-12-19T21:44:38.361Z"},{"_id":"5b743e111a739a78a5f0725b","slug":"hostmaker-manages-localized-content","title":"Hostmaker Manages Localized Content ","content":"

Hostmaker is a property management company that operates across 9 cities in 6 countries. Hostmaker manages properties that are being rented to vacationers and lodgers from around the world. They take the hosts' home and provide cleaning and decor services prior to listing the location on up to 15 various travel booking platforms. Hostmaker's hosts love the service for the superior volume that they continue to deliver compared to their competitors, which are driven by proprietary pricing strategies, local market expertise and global industry experience. 



Hostmaker's tech team needed a solution for their product marketing managers to update Landing Pages, Case Studies, Press Releases and FAQs for the various markets they manage, including cities such as Rome, London and Barcelona. Localizing content for Hostmaker's audiences is a mission-critical piece of the marketing strategy that is driving such tremendous growth. Hostmaker chose Cosmic to give their cross-functional team the tools they need to perform their jobs. Now Hostmaker's developers can build reusable components and scalable content models while their marketers can manage content specific to a particular locale. 



\">



"We’ve been using Cosmic for around a year. At first there were some issues with components that prohibited us from performing all our desired tasks, but all those issues were quickly solved by the Cosmic Team. As of now, the tools are great, and have even improved during our use of the platform. It does all the things we need at the moment. As a tool Cosmic has been not only ideal for managing components on the site but adaptive enough for our non-tech users to create landing pages and modify existing content, saving us precious dev time.”


— Hostmaker Digital Team

","metafields":[{"value":"Hostmaker","key":"company","title":"Company","type":"text","children":null},{"value":"Hospitality ","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Hostmaker is a property management company that operates across 9 cities in 6 countries. Hostmaker manages properties that are being rented to vacationers and lodgers from around the world. They take the hosts' home and provide cleaning and decor services prior to listing the location on up to 15 various travel booking platforms. Hostmaker's hosts love the service for the superior volume that they continue to deliver compared to their competitors, which are driven by proprietary pricing strategies, local market expertise and global industry experience. \n\n\n\n\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"2f1889b0-a64d-11e8-a8cb-19319ae2c1b8-B13ds9DG_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/2f1889b0-a64d-11e8-a8cb-19319ae2c1b8-B13ds9DG_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/2f1889b0-a64d-11e8-a8cb-19319ae2c1b8-B13ds9DG_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-03-01T22:26:36.367Z","created_by":"5716b504e9c686d006000073","created":"2018-08-15T14:52:01.115Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-09-25T15:10:44.600Z"},{"_id":"5be9ca96cc3f3e2ce66ce511","slug":"road-redemption-launches-a-marketing-microsite","title":"Road Redemption Launches a Marketing Microsite","content":"

Tripwire Interactive, a leading entertainment software developer and publisher founded in 2005, recently launched its corporate website on Cosmic. The Tripwire Interactive team can now easily manage microsite content for each game with a dedicated studio manager as its content creator. This is important as Tripwire is always debuting new marketing campaigns to accompany game launches. 



Road Redemption is the first of many games to have innovative content creator access provided via a headless CMS API that delivers the best of both worlds for cross-functional teams. Read more about how Tripwire Interactive builds apps faster using Cosmic.


"Cosmic allowed us to easily integrate a secure and fast back-end API into our React app. Cosmic fit our needs with its simple web-based dashboard so that members of our marketing team can create, edit, and delete new content on the fly. Our team\r\nhas been enjoying the ease of use with the new system."

— Owen Liversidge, Lead Developer


","metafields":[{"value":"Road Redemption ","key":"company","title":"Company","type":"text","children":null},{"value":"Gaming","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Tripwire Interactive, a leading entertainment software developer and publisher founded in 2005, recently launched its corporate website on Cosmic. The Tripwire Interactive team can now easily manage microsite content for each game with a dedicated studio manager as its content creator. This is important as Tripwire is always debuting new marketing campaigns to accompany game launches. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"a4f8e050-e6ab-11e8-93f0-a94cde6f34a7-64d11670-dddf-11e8-95d7-dfced904ba0c-RR_Logo_Hires_TrasparenrBack-(1).png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/a4f8e050-e6ab-11e8-93f0-a94cde6f34a7-64d11670-dddf-11e8-95d7-dfced904ba0c-RR_Logo_Hires_TrasparenrBack-(1).png","imgix_url":"https://imgix.cosmicjs.com/a4f8e050-e6ab-11e8-93f0-a94cde6f34a7-64d11670-dddf-11e8-95d7-dfced904ba0c-RR_Logo_Hires_TrasparenrBack-(1).png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2018-11-12T18:46:46.371Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-11-13T21:30:43.964Z"}]},{"children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"react-cosmedium-blog","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"simple-react-blog","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"simple-vue-blog","type":"text","required":false}]}],"type":"repeater","title":"App Slugs","key":"app_slugs","id":"nAhl8qK6YO","value":"react-cosmedium-blog","repeater_fields":[{"title":"Slug","key":"slug","value":"","type":"text","required":false}]},{"children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"wordpress-importer","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"unsplash-photos","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"onesignal","type":"text","required":false}]}],"type":"repeater","title":"Extension Slugs","key":"extension_slugs","id":"bUu2BQkiLt","value":"wordpress-importer","repeater_fields":[{"title":"Slug","key":"slug","value":"","type":"text","required":false}]},{"children":null,"type":"html-textarea","title":"Testimonial","key":"testimonial","id":"YaGtL7K5fz","value":"

"As a tool Cosmic has been not only ideal for managing components on the site but adaptive enough for our non-tech users to create landing pages and modify existing content, saving us precious dev time.”

"},{"children":null,"type":"text","title":"Testimonial Credit","key":"testimonial_credit","id":"L9c2N6jzBK","value":"Hostmaker Digital Team"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"solutions","created":"2019-07-08T15:01:03.706Z","created_at":"2019-07-08T15:01:03.706Z","modified_at":"2020-08-10T14:05:12.245Z","status":"published","locale":null,"published_at":"2020-06-16T20:45:38.770Z","modified_by":"5357ef811693be2118000001","publish_at":null,"order":3,"unpublish_at":null,"metadata":{"solution_name":"Press Websites","image":{"url":"https://cdn.cosmicjs.com/39b60450-9f54-11e9-ac09-4be8a5631b5e-Hostmaker.png","imgix_url":"https://imgix.cosmicjs.com/39b60450-9f54-11e9-ac09-4be8a5631b5e-Hostmaker.png"},"case_studies":[{"_id":"596663e8880d69fb6c000194","slug":"joblift-elevates-their-stack","title":"Joblift Elevates Their Stack ","content":"

In any bustling economy, a key piece of capital is human capital. When the most precious portion of capital is required, Joblift seeks to connect positions with people. They choose Cosmic to deliver their content via the cloud. 



Joblift manages localized content to serve Job, Press and Blog feeds to its various markets, including the UK, Netherlands and Germany. Easy user roles and permissions equip their team with the tools they need to seamlessly run a global organization. 


"Cosmic has completely sped up our ability to upload our content easily and efficiently. With Cosmic we now have a smooth process for uploading press releases which reflects the quality content on our website.”

— Ashleigh Grady, Content Editor and Marketing Manager

","metafields":[{"value":"Joblift","key":"company","title":"Company","type":"text","children":null},{"value":"Career Services","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"In any bustling economy, a key piece of capital is human capital. When the most precious portion of capital is required, Joblift seeks to connect positions with people. They choose Cosmic to deliver their content via the cloud. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created":"2017-07-12T18:01:12.194Z","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","status":"published","publish_at":null,"published_at":"2018-12-19T21:44:38.361Z","metadata":{"company":"Joblift","industry_type":"Career Services","teaser":"In any bustling economy, a key piece of capital is human capital. When the most precious portion of capital is required, Joblift seeks to connect positions with people. They choose Cosmic to deliver their content via the cloud. \n","logo":{"url":"https://cdn.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg"}}},{"_id":"5b743e111a739a78a5f0725b","slug":"hostmaker-manages-localized-content","title":"Hostmaker Manages Localized Content ","content":"

Hostmaker is a property management company that operates across 9 cities in 6 countries. Hostmaker manages properties that are being rented to vacationers and lodgers from around the world. They take the hosts' home and provide cleaning and decor services prior to listing the location on up to 15 various travel booking platforms. Hostmaker's hosts love the service for the superior volume that they continue to deliver compared to their competitors, which are driven by proprietary pricing strategies, local market expertise and global industry experience. 



Hostmaker's tech team needed a solution for their product marketing managers to update Landing Pages, Case Studies, Press Releases and FAQs for the various markets they manage, including cities such as Rome, London and Barcelona. Localizing content for Hostmaker's audiences is a mission-critical piece of the marketing strategy that is driving such tremendous growth. Hostmaker chose Cosmic to give their cross-functional team the tools they need to perform their jobs. Now Hostmaker's developers can build reusable components and scalable content models while their marketers can manage content specific to a particular locale. 



\">



"We’ve been using Cosmic for around a year. At first there were some issues with components that prohibited us from performing all our desired tasks, but all those issues were quickly solved by the Cosmic Team. As of now, the tools are great, and have even improved during our use of the platform. It does all the things we need at the moment. As a tool Cosmic has been not only ideal for managing components on the site but adaptive enough for our non-tech users to create landing pages and modify existing content, saving us precious dev time.”


— Hostmaker Digital Team

","metafields":[{"value":"Hostmaker","key":"company","title":"Company","type":"text","children":null},{"value":"Hospitality ","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Hostmaker is a property management company that operates across 9 cities in 6 countries. Hostmaker manages properties that are being rented to vacationers and lodgers from around the world. They take the hosts' home and provide cleaning and decor services prior to listing the location on up to 15 various travel booking platforms. Hostmaker's hosts love the service for the superior volume that they continue to deliver compared to their competitors, which are driven by proprietary pricing strategies, local market expertise and global industry experience. \n\n\n\n\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"2f1889b0-a64d-11e8-a8cb-19319ae2c1b8-B13ds9DG_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/2f1889b0-a64d-11e8-a8cb-19319ae2c1b8-B13ds9DG_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/2f1889b0-a64d-11e8-a8cb-19319ae2c1b8-B13ds9DG_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-03-01T22:26:36.367Z","created_by":"5716b504e9c686d006000073","created":"2018-08-15T14:52:01.115Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-09-25T15:10:44.600Z","metadata":{"company":"Hostmaker","industry_type":"Hospitality ","teaser":"Hostmaker is a property management company that operates across 9 cities in 6 countries. Hostmaker manages properties that are being rented to vacationers and lodgers from around the world. They take the hosts' home and provide cleaning and decor services prior to listing the location on up to 15 various travel booking platforms. Hostmaker's hosts love the service for the superior volume that they continue to deliver compared to their competitors, which are driven by proprietary pricing strategies, local market expertise and global industry experience. \n\n\n\n\n","logo":{"url":"https://cdn.cosmicjs.com/2f1889b0-a64d-11e8-a8cb-19319ae2c1b8-B13ds9DG_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/2f1889b0-a64d-11e8-a8cb-19319ae2c1b8-B13ds9DG_400x400.jpg"}}},{"_id":"5be9ca96cc3f3e2ce66ce511","slug":"road-redemption-launches-a-marketing-microsite","title":"Road Redemption Launches a Marketing Microsite","content":"

Tripwire Interactive, a leading entertainment software developer and publisher founded in 2005, recently launched its corporate website on Cosmic. The Tripwire Interactive team can now easily manage microsite content for each game with a dedicated studio manager as its content creator. This is important as Tripwire is always debuting new marketing campaigns to accompany game launches. 



Road Redemption is the first of many games to have innovative content creator access provided via a headless CMS API that delivers the best of both worlds for cross-functional teams. Read more about how Tripwire Interactive builds apps faster using Cosmic.


"Cosmic allowed us to easily integrate a secure and fast back-end API into our React app. Cosmic fit our needs with its simple web-based dashboard so that members of our marketing team can create, edit, and delete new content on the fly. Our team\r\nhas been enjoying the ease of use with the new system."

— Owen Liversidge, Lead Developer


","metafields":[{"value":"Road Redemption ","key":"company","title":"Company","type":"text","children":null},{"value":"Gaming","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Tripwire Interactive, a leading entertainment software developer and publisher founded in 2005, recently launched its corporate website on Cosmic. The Tripwire Interactive team can now easily manage microsite content for each game with a dedicated studio manager as its content creator. This is important as Tripwire is always debuting new marketing campaigns to accompany game launches. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"a4f8e050-e6ab-11e8-93f0-a94cde6f34a7-64d11670-dddf-11e8-95d7-dfced904ba0c-RR_Logo_Hires_TrasparenrBack-(1).png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/a4f8e050-e6ab-11e8-93f0-a94cde6f34a7-64d11670-dddf-11e8-95d7-dfced904ba0c-RR_Logo_Hires_TrasparenrBack-(1).png","imgix_url":"https://imgix.cosmicjs.com/a4f8e050-e6ab-11e8-93f0-a94cde6f34a7-64d11670-dddf-11e8-95d7-dfced904ba0c-RR_Logo_Hires_TrasparenrBack-(1).png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2018-11-12T18:46:46.371Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-11-13T21:30:43.964Z","metadata":{"company":"Road Redemption ","industry_type":"Gaming","teaser":"Tripwire Interactive, a leading entertainment software developer and publisher founded in 2005, recently launched its corporate website on Cosmic. The Tripwire Interactive team can now easily manage microsite content for each game with a dedicated studio manager as its content creator. This is important as Tripwire is always debuting new marketing campaigns to accompany game launches. \n","logo":{"url":"https://cdn.cosmicjs.com/a4f8e050-e6ab-11e8-93f0-a94cde6f34a7-64d11670-dddf-11e8-95d7-dfced904ba0c-RR_Logo_Hires_TrasparenrBack-(1).png","imgix_url":"https://imgix.cosmicjs.com/a4f8e050-e6ab-11e8-93f0-a94cde6f34a7-64d11670-dddf-11e8-95d7-dfced904ba0c-RR_Logo_Hires_TrasparenrBack-(1).png"}}}],"app_slugs":[{"slug":"react-cosmedium-blog"},{"slug":"simple-react-blog"},{"slug":"simple-vue-blog"}],"extension_slugs":[{"slug":"wordpress-importer"},{"slug":"unsplash-photos"},{"slug":"onesignal"}],"testimonial":"

"As a tool Cosmic has been not only ideal for managing components on the site but adaptive enough for our non-tech users to create landing pages and modify existing content, saving us precious dev time.”

","testimonial_credit":"Hostmaker Digital Team"}},{"_id":"5a01dc0d508dc15a7900002d","order":3,"slug":"big-fish-home-case-study","title":"Big Fish Home Case Study","content":"","metafields":[{"value":"c21c50b0-c3d7-11e7-8406-7bb6a804057f-fairway-solitare.png","key":"image","title":"Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/c21c50b0-c3d7-11e7-8406-7bb6a804057f-fairway-solitare.png","imgix_url":"https://imgix.cosmicjs.com/c21c50b0-c3d7-11e7-8406-7bb6a804057f-fairway-solitare.png"},{"value":"When Big Fish launches a new game for iOS, Android, or Web, they use a marketing landing page to promote the launch. Big Fish uses Cosmic JS to curate and update content on each of their landing pages.","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"https://cosmicjs.com/case-studies/big-fish-launches-marketing-and-tutorial-content-for-games","key":"link","title":"Link","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"home-page-case-studies","created_at":"2017-11-07T16:15:09.059Z","created_by":"5357ef811693be2118000001","created":"2017-11-07T16:15:09.059Z","status":"published","modified_at":"2017-11-07T20:45:40.325Z","modified_by":"5357ef811693be2118000001","publish_at":null,"metadata":{"image":{"url":"https://cdn.cosmicjs.com/c21c50b0-c3d7-11e7-8406-7bb6a804057f-fairway-solitare.png","imgix_url":"https://imgix.cosmicjs.com/c21c50b0-c3d7-11e7-8406-7bb6a804057f-fairway-solitare.png"},"teaser":"When Big Fish launches a new game for iOS, Android, or Web, they use a marketing landing page to promote the launch. Big Fish uses Cosmic JS to curate and update content on each of their landing pages.","link":"https://cosmicjs.com/case-studies/big-fish-launches-marketing-and-tutorial-content-for-games"}},{"_id":"595e933ba76e1fd9730001bd","order":3,"slug":"vuejs-cms","title":"Vue.js CMS","content":"

Vue.js CMS Templates

You can use our Vue.js CMS Templates, which includes Vue.js CMS GitHub code examples.

Vue.js CMS Dashboard

Cosmic offers a Headless CMS to enable your team to build apps faster. Developers get powerful API tools, and content creators get an intuitive content management dashboard. Get started free.

","metafields":[{"children":null,"type":"file","title":"Image","key":"image","id":"HnCGHSoilc","value":"c7807470-8ee9-11ea-a8ae-93035d8042eb-vuejs-cms.png","url":"https://cdn.cosmicjs.com/c7807470-8ee9-11ea-a8ae-93035d8042eb-vuejs-cms.png","imgix_url":"https://imgix.cosmicjs.com/c7807470-8ee9-11ea-a8ae-93035d8042eb-vuejs-cms.png"},{"children":null,"type":"file","title":"Thumbnail","key":"thumbnail","id":"7AQzHDOQoK","value":"858dda70-6288-11e7-ab3d-9ddd8313526f-96da6390-e18a-11e6-a19e-716cc90a0c51-Vue.js_Logo.svg","url":"https://cdn.cosmicjs.com/858dda70-6288-11e7-ab3d-9ddd8313526f-96da6390-e18a-11e6-a19e-716cc90a0c51-Vue.js_Logo.svg","imgix_url":"https://imgix.cosmicjs.com/858dda70-6288-11e7-ab3d-9ddd8313526f-96da6390-e18a-11e6-a19e-716cc90a0c51-Vue.js_Logo.svg"},{"children":null,"type":"html-textarea","title":"Blurb","key":"blurb","id":"k8S5vwrsEg","value":"

Cosmic is the best CMS for Vue.js websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

"},{"children":null,"type":"text","title":"Headline","key":"headline","id":"JdxMZqvoPK","value":"Vue.js"},{"children":null,"type":"text","title":"SEO Description","key":"seo_description","id":"kYZrLEpN0h","value":"Cosmic is the best CMS for Vue.js websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators."},{"children":null,"type":"file","title":"Twitter Card Image","key":"twitter_card_image","id":"0ELQruXqWF","value":"8453e9c0-eee7-11eb-849a-8548c9a99fc0-Cosmic-Vue-CMS.png","url":"https://cdn.cosmicjs.com/8453e9c0-eee7-11eb-849a-8548c9a99fc0-Cosmic-Vue-CMS.png","imgix_url":"https://imgix.cosmicjs.com/8453e9c0-eee7-11eb-849a-8548c9a99fc0-Cosmic-Vue-CMS.png"},{"children":null,"type":"html-textarea","title":"Code Example","key":"code_example","id":"RflK27pQcw","value":""},{"children":null,"type":"text","title":"SEO Title","key":"seo_title","id":"qPowgLntuk","value":"Best Headless CMS for Vue.js"},{"children":[],"type":"repeater","title":"Videos","key":"videos","id":"BoFDqqLUeP","value":"","repeater_fields":[{"title":"Title","key":"title","value":"","type":"text","required":false},{"title":"Link","key":"link","value":"","type":"text","required":false}]},{"children":null,"type":"text","title":"Apps Search Term","key":"apps_search_term","id":"0j2XD9Gog1","value":""},{"children":null,"type":"text","title":"Articles Search Term","key":"articles_search_term","id":"8RgqbG1UTr","value":""},{"children":null,"type":"text","title":"Page Overview Title","key":"page_overview_title","id":"gj036836gx4c73fpdjzb","value":""},{"children":null,"type":"html-textarea","title":"Page Overview","key":"page_overview","id":"iSVFzvAn9h","value":""},{"children":null,"type":"html-textarea","title":"SEO Content","key":"seo_content","id":"lcsUSsZiB9","value":""},{"children":[],"type":"repeater","title":"Apps","key":"apps","id":"dkpxmwigd1z8x4ants9f","value":"","repeater_fields":[{"title":"App Slug","key":"app_slug","value":"","type":"text","required":false}]},{"children":[],"type":"repeater","title":"Articles","key":"articles","id":"dwil4bqojngnkej4v85k","value":"","repeater_fields":[{"title":"Article Slug","key":"article_slug","value":"","type":"text","required":false}]}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"kb-articles","created_at":"2017-04-22T23:07:51.159Z","created_by":"5357ef811693be2118000001","created":"2017-07-06T19:44:59.812Z","status":"published","modified_at":"2021-07-27T14:32:51.045Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2021-07-27T14:32:51.045Z","unpublish_at":null,"metadata":{"image":{"url":"https://cdn.cosmicjs.com/c7807470-8ee9-11ea-a8ae-93035d8042eb-vuejs-cms.png","imgix_url":"https://imgix.cosmicjs.com/c7807470-8ee9-11ea-a8ae-93035d8042eb-vuejs-cms.png"},"thumbnail":{"url":"https://cdn.cosmicjs.com/858dda70-6288-11e7-ab3d-9ddd8313526f-96da6390-e18a-11e6-a19e-716cc90a0c51-Vue.js_Logo.svg","imgix_url":"https://imgix.cosmicjs.com/858dda70-6288-11e7-ab3d-9ddd8313526f-96da6390-e18a-11e6-a19e-716cc90a0c51-Vue.js_Logo.svg"},"blurb":"

Cosmic is the best CMS for Vue.js websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

","headline":"Vue.js","seo_description":"Cosmic is the best CMS for Vue.js websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.","twitter_card_image":{"url":"https://cdn.cosmicjs.com/8453e9c0-eee7-11eb-849a-8548c9a99fc0-Cosmic-Vue-CMS.png","imgix_url":"https://imgix.cosmicjs.com/8453e9c0-eee7-11eb-849a-8548c9a99fc0-Cosmic-Vue-CMS.png"},"code_example":"","seo_title":"Best Headless CMS for Vue.js","videos":[],"apps_search_term":"","articles_search_term":"","page_overview_title":"","page_overview":"","seo_content":"","apps":[],"articles":[]}},{"_id":"5ea1b8776bc68d0007e51bd3","slug":"katie-prowd","title":"Katie Prowd","content":"","metafields":[{"children":null,"type":"textarea","title":"Testimonial","key":"testimonial","id":"dVBSAS6zOc","value":"The headless CMS we chose had to tick a lot of boxes. At the end of the day, though, it needed to be easy for our external writers to use. We recorded a quick screencast video internally showing how to set up a piece of content, sent that out to our team, and I haven’t had a question from any of our writers since."},{"children":null,"type":"text","title":"Author Name","key":"author_name","id":"yPjurVDEdy","value":"Katie Prowd"},{"children":null,"type":"text","title":"Business","key":"business","id":"kjJkGXFOFE","value":"Co-Founder of Hypometer Technologies"},{"children":null,"type":"file","title":"Author Image","key":"author_image","id":"VrOT8UtDB8","value":"cdfcd5d0-856d-11ea-856b-416510aa3c93-katie.jpeg","url":"https://cdn.cosmicjs.com/cdfcd5d0-856d-11ea-856b-416510aa3c93-katie.jpeg","imgix_url":"https://imgix.cosmicjs.com/cdfcd5d0-856d-11ea-856b-416510aa3c93-katie.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"testimonials","created":"2020-04-23T15:47:03.913Z","created_at":"2020-04-23T15:47:03.913Z","modified_at":"2020-10-02T01:48:41.244Z","status":"published","locale":null,"created_by":"56d66b2f903a79b904000001","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-04-23T15:47:37.600Z","unpublish_at":null,"order":3,"thumbnail":"https://imgix.cosmicjs.com/cdfcd5d0-856d-11ea-856b-416510aa3c93-katie.jpeg","metadata":{"testimonial":"The headless CMS we chose had to tick a lot of boxes. At the end of the day, though, it needed to be easy for our external writers to use. We recorded a quick screencast video internally showing how to set up a piece of content, sent that out to our team, and I haven’t had a question from any of our writers since.","author_name":"Katie Prowd","business":"Co-Founder of Hypometer Technologies","author_image":{"url":"https://cdn.cosmicjs.com/cdfcd5d0-856d-11ea-856b-416510aa3c93-katie.jpeg","imgix_url":"https://imgix.cosmicjs.com/cdfcd5d0-856d-11ea-856b-416510aa3c93-katie.jpeg"}}},{"_id":"5bad1c6add42057ecb90054a","slug":"algolia","title":"Algolia","content":"","metafields":[{"value":"https://cosmicjs.com/extensions/algolia-search","key":"link","title":"Link","type":"text","children":false,"has_length_edit":true,"parent":false},{"value":"95179e90-c277-11e8-9f7c-33ff0775acd8-al.jpg","key":"image","title":"Image","type":"file","children":false,"has_length_edit":false,"parent":false,"url":"https://cdn.cosmicjs.com/95179e90-c277-11e8-9f7c-33ff0775acd8-al.jpg","imgix_url":"https://imgix.cosmicjs.com/95179e90-c277-11e8-9f7c-33ff0775acd8-al.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"integrations","created":"2018-09-27T18:07:38.380Z","created_at":"2018-09-27T18:07:38.380Z","modified_at":"2018-09-27T18:07:38.380Z","status":"published","locale":null,"published_at":"2018-09-27T18:07:38.380Z","created_by":"5357ef811693be2118000001","order":3,"metadata":{"link":"https://cosmicjs.com/extensions/algolia-search","image":{"url":"https://cdn.cosmicjs.com/95179e90-c277-11e8-9f7c-33ff0775acd8-al.jpg","imgix_url":"https://imgix.cosmicjs.com/95179e90-c277-11e8-9f7c-33ff0775acd8-al.jpg"}}},{"_id":"5768b253163172890e00002c","order":3,"slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},{"_id":"5f31a4a9edba7300080e5a34","order":4,"slug":"kaya-ismail","title":"Kaya Ismail","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"hsMOJCxIAj","value":""},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D2rdKO4lEL","value":"8579d4e0-db42-11ea-84a8-4b73110d28e6-kaya-ismail.png","url":"https://cdn.cosmicjs.com/8579d4e0-db42-11ea-84a8-4b73110d28e6-kaya-ismail.png","imgix_url":"https://imgix.cosmicjs.com/8579d4e0-db42-11ea-84a8-4b73110d28e6-kaya-ismail.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2020-08-10T19:48:57.679Z","created_by":"5357ef811693be2118000001","modified_at":"2020-09-14T17:45:13.790Z","created":"2020-08-10T19:48:57.679Z","status":"published","published_at":"2020-08-10T19:48:57.679Z","modified_by":"5357ef811693be2118000001","thumbnail":"https://imgix.cosmicjs.com/8579d4e0-db42-11ea-84a8-4b73110d28e6-kaya-ismail.png","metadata":{"username":"","profile_picture":{"url":"https://cdn.cosmicjs.com/8579d4e0-db42-11ea-84a8-4b73110d28e6-kaya-ismail.png","imgix_url":"https://imgix.cosmicjs.com/8579d4e0-db42-11ea-84a8-4b73110d28e6-kaya-ismail.png"}}},{"_id":"5ea2fd4df443b700079fdec4","slug":"owen-liversidge","title":"Owen Liversidge","content":"","metafields":[{"children":null,"type":"textarea","title":"Testimonial","key":"testimonial","id":"KEZY64i9i5","value":"Cosmic allowed us to easily integrate a secure and fast back-end API into our React app. Cosmic fit our needs with its simple web-based dashboard so that members of our marketing team can create, edit, and delete new content on the fly. Our team has been enjoying the ease of use with the new system."},{"children":null,"type":"text","title":"Author Name","key":"author_name","id":"hRIRsI4bjG","value":"Owen Liversidge"},{"children":null,"type":"text","title":"Business","key":"business","id":"3IRSXrKVJD","value":"Lead Developer, Tripwire Interactive"},{"children":null,"type":"file","title":"Author Image","key":"author_image","id":"4qBTG4ZvWM","value":"5531e5a0-863a-11ea-84bd-5ddd5c96ac0f-owen.jpeg","url":"https://cdn.cosmicjs.com/5531e5a0-863a-11ea-84bd-5ddd5c96ac0f-owen.jpeg","imgix_url":"https://imgix.cosmicjs.com/5531e5a0-863a-11ea-84bd-5ddd5c96ac0f-owen.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"testimonials","created":"2020-04-24T14:53:01.850Z","created_at":"2020-04-24T14:53:01.850Z","modified_at":"2020-10-02T01:48:55.987Z","status":"published","locale":null,"created_by":"56d66b2f903a79b904000001","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-10-02T01:48:55.987Z","unpublish_at":null,"order":4,"thumbnail":"https://imgix.cosmicjs.com/5531e5a0-863a-11ea-84bd-5ddd5c96ac0f-owen.jpeg","metadata":{"testimonial":"Cosmic allowed us to easily integrate a secure and fast back-end API into our React app. Cosmic fit our needs with its simple web-based dashboard so that members of our marketing team can create, edit, and delete new content on the fly. Our team has been enjoying the ease of use with the new system.","author_name":"Owen Liversidge","business":"Lead Developer, Tripwire Interactive","author_image":{"url":"https://cdn.cosmicjs.com/5531e5a0-863a-11ea-84bd-5ddd5c96ac0f-owen.jpeg","imgix_url":"https://imgix.cosmicjs.com/5531e5a0-863a-11ea-84bd-5ddd5c96ac0f-owen.jpeg"}}},{"_id":"59f49a7cee2adb545c0005bc","order":4,"slug":"life-is-good-shares-gratitude","title":"Life is Good Shares Gratitude","content":"

The Life is Good community shares one simple, unifying mission: to spread the power of optimism. In that spirit, the Life is Good team built a Gratitude Wall for some user-generated-thanksgiving. This widget will allow users to add "sticky notes" with their name and what they are grateful for to the gratitude board. 



The Gratitude Wall is adapted from the Cosmic Sticky Notes App, built on React, Redux and Node.js. The Wall is currently running on Heroku and is i-framed into WordPress on its landing page. The Life is Good team also built a simple moderation application so that their team can easily approve or delete User Generated Content as it flows in. They also built client-side moderation during content entry, which checks against a banned list of words and blocks submission.



"Cosmic provided us with a robust scaffolding to accept, store, and moderate User Generated Content and display it in a custom web app in real time. With Cosmic, we were able to develop an MVP in a matter of hours and focus our resources on UX and design versus content management. The Cosmic Support Team was extremely helpful throughout the process. We’re excited to leverage these tools again for future projects.”

— Chris Schwab, Front End Engineer  

","metafields":[{"value":"Life is Good","key":"company","title":"Company","type":"text","children":null},{"value":"Ecommerce | Apparel","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Spread the power of optimism. In that spirit, the Life is Good team built a Gratitude Wall for some user-generated-thanksgiving. This widget will allow users to add \"sticky notes\" with their name and what they are grateful for to the gratitude board. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg","imgix_url":"https://imgix.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2017-10-28T14:55:56.103Z","created_by":"5716b504e9c686d006000073","created":"2017-10-28T14:55:56.103Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2019-07-25T21:53:35.289Z","metadata":{"company":"Life is Good","industry_type":"Ecommerce | Apparel","teaser":"Spread the power of optimism. In that spirit, the Life is Good team built a Gratitude Wall for some user-generated-thanksgiving. This widget will allow users to add \"sticky notes\" with their name and what they are grateful for to the gratitude board. \n","logo":{"url":"https://cdn.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg","imgix_url":"https://imgix.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg"}}},{"_id":"6424a8f8381f7c0008a471d4","order":4,"slug":"new-dashboard-public-beta-release","title":"New dashboard public beta release","content":"

Summary

Read below to learn about the latest changes. Note: These changes are in addition to the private beta release changelog.\r\nIt is recommended you read that if you haven't already.


Dashboard changes


Cosmic JavaScript SDK
Install the new Cosmic JavaScript SDK by running npm i @cosmicjs/sdk in your terminal. You should expect the following changes:

  1. We've added TypeScript support. Though limited, we plan to continue to include more TypeScript support.
  2. Simpler config and authentication methods. See authentication in docs.
  3. Improved methods for working with Objects including:
  4. Legacy methods are no longer supported for getObjects, getMedia etc.
  5. Much lighter package size compared to the old NPM module (only 23kb unpacked!).

See more examples for all methods in the API reference section of the new Cosmic docs.

We hope you enjoy these updates. Sign up for the new dashboard to begin using all of the new and improved features.

","metafields":[{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"AskVBF6exv","value":"2023-04-04"},{"children":null,"type":"object","title":"Author","key":"author","id":"r7qeIx7SsM","value":"5ffa1d1e0046b0000799cb7b","object_type":"authors","object":{"_id":"5ffa1d1e0046b0000799cb7b","slug":"cosmic","title":"Cosmic","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"ZogvxZg6OL","value":""},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D0qLJ4RPBe","value":"10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2021-01-09T21:16:14.533Z","created_by":"5357ef811693be2118000001","modified_at":"2021-01-09T21:18:26.147Z","created":"2021-01-09T21:16:14.533Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/e55ef990-52bf-11eb-986d-4d7ff5faa3ab-logo.svg","published_at":"2021-01-09T21:18:26.147Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null}},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"osxO08j0Pl","value":"","url":null,"imgix_url":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"changelogs","created_at":"2023-03-29T21:09:11.999Z","created_by":"5357ef811693be2118000001","modified_at":"2023-04-04T16:27:14.263Z","created":"2023-03-29T21:09:11.999Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/80d92080-ccdf-11ed-a5c3-fb6dd2500767-cosmic-public-beta.png","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2023-04-04T16:27:14.263Z","metadata":{"published_date":"2023-04-04","author":{"_id":"5ffa1d1e0046b0000799cb7b","slug":"cosmic","title":"Cosmic","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"ZogvxZg6OL","value":""},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D0qLJ4RPBe","value":"10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2021-01-09T21:16:14.533Z","created_by":"5357ef811693be2118000001","modified_at":"2021-01-09T21:18:26.147Z","created":"2021-01-09T21:16:14.533Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/e55ef990-52bf-11eb-986d-4d7ff5faa3ab-logo.svg","published_at":"2021-01-09T21:18:26.147Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"metadata":{"username":"","profile_picture":{"url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}}},"featured_image":{"url":null,"imgix_url":null}}},{"_id":"5d235af46302053e6c92d99b","slug":"headless-cms-for-marketing-campaigns","title":"Headless CMS for Marketing Campaigns","content":"

Teams launching marketing campaigns, product launch countdowns and user-generated-content campaigns use the Cosmic Headless CMS to model, create and deliver content quickly. Developers are given API tools and resources to integrate content with any website or app, while marketers can manage everything from marketing copy to user-generated-data. Content creation takes minutes and marketers can easily manage campaign results as well as edit marketing copy and images without bottlenecking their development team.

Features like Scheduled Publishing and Webhooks allow teams to plan campaign releases and create workflows with third-party tools.

","metafields":[{"children":null,"type":"text","title":"Solution Name","key":"solution_name","id":"wZUqSnAMZu","value":"Marketing Campaigns"},{"children":null,"type":"file","title":"Image","key":"image","id":"drIIdu7WXa","value":"63cd02c0-9f54-11e9-ac09-4be8a5631b5e-91e5cf60-cb0d-11e7-8977-434a79150a3c-Screen-Shot-2017-11-16-at-1.59.39-PM.png","url":"https://cdn.cosmicjs.com/63cd02c0-9f54-11e9-ac09-4be8a5631b5e-91e5cf60-cb0d-11e7-8977-434a79150a3c-Screen-Shot-2017-11-16-at-1.59.39-PM.png","imgix_url":"https://imgix.cosmicjs.com/63cd02c0-9f54-11e9-ac09-4be8a5631b5e-91e5cf60-cb0d-11e7-8977-434a79150a3c-Screen-Shot-2017-11-16-at-1.59.39-PM.png"},{"children":null,"type":"objects","title":"Case Studies","key":"case_studies","id":"2sAduEtNPU","value":"59f49a7cee2adb545c0005bc,59663607a6a3f55962000e40,59666b26c863d9eb6c0001f5","object_type":"case-studies","objects":[{"_id":"59f49a7cee2adb545c0005bc","slug":"life-is-good-shares-gratitude","title":"Life is Good Shares Gratitude","content":"

The Life is Good community shares one simple, unifying mission: to spread the power of optimism. In that spirit, the Life is Good team built a Gratitude Wall for some user-generated-thanksgiving. This widget will allow users to add "sticky notes" with their name and what they are grateful for to the gratitude board. 



The Gratitude Wall is adapted from the Cosmic Sticky Notes App, built on React, Redux and Node.js. The Wall is currently running on Heroku and is i-framed into WordPress on its landing page. The Life is Good team also built a simple moderation application so that their team can easily approve or delete User Generated Content as it flows in. They also built client-side moderation during content entry, which checks against a banned list of words and blocks submission.



"Cosmic provided us with a robust scaffolding to accept, store, and moderate User Generated Content and display it in a custom web app in real time. With Cosmic, we were able to develop an MVP in a matter of hours and focus our resources on UX and design versus content management. The Cosmic Support Team was extremely helpful throughout the process. We’re excited to leverage these tools again for future projects.”

— Chris Schwab, Front End Engineer  

","metafields":[{"value":"Life is Good","key":"company","title":"Company","type":"text","children":null},{"value":"Ecommerce | Apparel","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Spread the power of optimism. In that spirit, the Life is Good team built a Gratitude Wall for some user-generated-thanksgiving. This widget will allow users to add \"sticky notes\" with their name and what they are grateful for to the gratitude board. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg","imgix_url":"https://imgix.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2017-10-28T14:55:56.103Z","created_by":"5716b504e9c686d006000073","created":"2017-10-28T14:55:56.103Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2019-07-25T21:53:35.289Z"},{"_id":"59663607a6a3f55962000e40","slug":"big-fish-launches-marketing-and-tutorial-content-for-games","title":"Big Fish Launches Marketing and Tutorial Content for Games","content":"

When Big Fish launches a new game for iOS, Android, or Web, they use a marketing landing page to promote the launch. Big Fish wanted their game studios to have the ability to curate and update content on each of their landing pages. Other CMS systems weren’t as flexible enough for their needs. Cosmic provides Big Fish with more creative freedom to build landing pages while allowing game studios to make updates on their own.




"We use Cosmic buckets for each of our mobile game landing pages. While our API and storage usage is low, the number of buckets we need is high, which makes the new Clusters Feature a perfect solution for our company use cases. It allows us to\r\nhave a single consolidated invoice, with an overall API and data-limit, but up to 35 buckets for our use."

— Jessica Chappell, Web Developer 

Read more about Big Fish and their games.

","metafields":[{"value":"Big Fish","key":"company","title":"Company","type":"text","children":null},{"value":"Gaming","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"When Big Fish launches a new game for iOS, Android, or Web, they use a marketing landing page to promote the launch. Other CMS systems weren’t as flexible enough for their needs. Cosmic provides Big Fish with more creative freedom to build landing pages while allowing game studios to make updates on their own.\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png","imgix_url":"https://imgix.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created":"2017-07-12T14:45:27.402Z","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","status":"published","publish_at":null,"published_at":"2018-11-08T23:15:38.911Z"},{"_id":"59666b26c863d9eb6c0001f5","slug":"brand-new-congress-elects-a-new-cms","title":"Brand New Congress Elects a New CMS","content":"

Every democracy requires representation. Brand New Congress intends to elect a new set of representatives, and is doing so with the help of Cosmic to deliver their content via the cloud.



“Brand New Congress moved from a traditional CMS to Cosmic as part of a re-implementation of our website. It’s been great! First, Cosmic’s API-first approach creates a separation between content and implementation, which gave us the flexibility to implement our website in a way that made the most sense for our use case: mostly server side rendered with small React widgets, without worrying about compatibility with existing CMSes. Second, Cosmic’s user roles – developer and editor – where the developer defines a schema and the editor edits objects within those parameters – give me (the developer) the confidence that my content editors cannot accidentally\r\nbreak the site or edit the content in some incompatible way.”

— Ben Paul Ryan Parker, Director of Technology, Brand New Congress

","metafields":[{"value":"Brand New Congress","key":"company","title":"Company","type":"text","children":null},{"value":"Non-Profit","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Every democracy requires representation. Brand New Congress intends to elect a new set of representatives, and is doing so with the help of Cosmic to deliver their content via the cloud. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"60ba6a80-674a-11e7-a522-2b0861658cb0-Brand_New_Congress_logo.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/60ba6a80-674a-11e7-a522-2b0861658cb0-Brand_New_Congress_logo.png","imgix_url":"https://imgix.cosmicjs.com/60ba6a80-674a-11e7-a522-2b0861658cb0-Brand_New_Congress_logo.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created":"2017-07-12T18:32:06.453Z","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","status":"published","publish_at":null}]},{"children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"react-blog","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"landing-page","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"single-page-sales-funnel","type":"text","required":false}]}],"type":"repeater","title":"App Slugs","key":"app_slugs","id":"TgYM4CSaRw","value":"react-blog","repeater_fields":[{"title":"Slug","key":"slug","value":"","type":"text","required":false}]},{"children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"seo-manager","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"twitter-search","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"google-analytics","type":"text","required":false}]}],"type":"repeater","title":"Extension Slugs","key":"extension_slugs","id":"bRjruxfRIf","value":"seo-manager","repeater_fields":[{"title":"Slug","key":"slug","value":"","type":"text","required":false}]},{"children":null,"type":"html-textarea","title":"Testimonial","key":"testimonial","id":"QYcLji31NN","value":"

"Cosmic provided us with a robust scaffolding to accept, store, and moderate User Generated Content and display it in a custom web app in real time. With Cosmic, we were able to develop an MVP in a matter of hours and focus our resources on UX and design versus content management.”

"},{"children":null,"type":"text","title":"Testimonial Credit","key":"testimonial_credit","id":"nTebS1PeuG","value":"Chris Schwab, Front End Engineer at Life is Good"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"solutions","created":"2019-07-08T15:02:12.719Z","created_at":"2019-07-08T15:02:12.719Z","modified_at":"2020-08-10T14:05:12.245Z","status":"published","locale":null,"published_at":"2020-08-05T00:44:50.689Z","modified_by":"5357ef811693be2118000001","publish_at":null,"order":4,"unpublish_at":null,"metadata":{"solution_name":"Marketing Campaigns","image":{"url":"https://cdn.cosmicjs.com/63cd02c0-9f54-11e9-ac09-4be8a5631b5e-91e5cf60-cb0d-11e7-8977-434a79150a3c-Screen-Shot-2017-11-16-at-1.59.39-PM.png","imgix_url":"https://imgix.cosmicjs.com/63cd02c0-9f54-11e9-ac09-4be8a5631b5e-91e5cf60-cb0d-11e7-8977-434a79150a3c-Screen-Shot-2017-11-16-at-1.59.39-PM.png"},"case_studies":[{"_id":"59f49a7cee2adb545c0005bc","slug":"life-is-good-shares-gratitude","title":"Life is Good Shares Gratitude","content":"

The Life is Good community shares one simple, unifying mission: to spread the power of optimism. In that spirit, the Life is Good team built a Gratitude Wall for some user-generated-thanksgiving. This widget will allow users to add "sticky notes" with their name and what they are grateful for to the gratitude board. 



The Gratitude Wall is adapted from the Cosmic Sticky Notes App, built on React, Redux and Node.js. The Wall is currently running on Heroku and is i-framed into WordPress on its landing page. The Life is Good team also built a simple moderation application so that their team can easily approve or delete User Generated Content as it flows in. They also built client-side moderation during content entry, which checks against a banned list of words and blocks submission.



"Cosmic provided us with a robust scaffolding to accept, store, and moderate User Generated Content and display it in a custom web app in real time. With Cosmic, we were able to develop an MVP in a matter of hours and focus our resources on UX and design versus content management. The Cosmic Support Team was extremely helpful throughout the process. We’re excited to leverage these tools again for future projects.”

— Chris Schwab, Front End Engineer  

","metafields":[{"value":"Life is Good","key":"company","title":"Company","type":"text","children":null},{"value":"Ecommerce | Apparel","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Spread the power of optimism. In that spirit, the Life is Good team built a Gratitude Wall for some user-generated-thanksgiving. This widget will allow users to add \"sticky notes\" with their name and what they are grateful for to the gratitude board. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg","imgix_url":"https://imgix.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2017-10-28T14:55:56.103Z","created_by":"5716b504e9c686d006000073","created":"2017-10-28T14:55:56.103Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2019-07-25T21:53:35.289Z","metadata":{"company":"Life is Good","industry_type":"Ecommerce | Apparel","teaser":"Spread the power of optimism. In that spirit, the Life is Good team built a Gratitude Wall for some user-generated-thanksgiving. This widget will allow users to add \"sticky notes\" with their name and what they are grateful for to the gratitude board. \n","logo":{"url":"https://cdn.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg","imgix_url":"https://imgix.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg"}}},{"_id":"59663607a6a3f55962000e40","slug":"big-fish-launches-marketing-and-tutorial-content-for-games","title":"Big Fish Launches Marketing and Tutorial Content for Games","content":"

When Big Fish launches a new game for iOS, Android, or Web, they use a marketing landing page to promote the launch. Big Fish wanted their game studios to have the ability to curate and update content on each of their landing pages. Other CMS systems weren’t as flexible enough for their needs. Cosmic provides Big Fish with more creative freedom to build landing pages while allowing game studios to make updates on their own.




"We use Cosmic buckets for each of our mobile game landing pages. While our API and storage usage is low, the number of buckets we need is high, which makes the new Clusters Feature a perfect solution for our company use cases. It allows us to\r\nhave a single consolidated invoice, with an overall API and data-limit, but up to 35 buckets for our use."

— Jessica Chappell, Web Developer 

Read more about Big Fish and their games.

","metafields":[{"value":"Big Fish","key":"company","title":"Company","type":"text","children":null},{"value":"Gaming","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"When Big Fish launches a new game for iOS, Android, or Web, they use a marketing landing page to promote the launch. Other CMS systems weren’t as flexible enough for their needs. Cosmic provides Big Fish with more creative freedom to build landing pages while allowing game studios to make updates on their own.\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png","imgix_url":"https://imgix.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created":"2017-07-12T14:45:27.402Z","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","status":"published","publish_at":null,"published_at":"2018-11-08T23:15:38.911Z","metadata":{"company":"Big Fish","industry_type":"Gaming","teaser":"When Big Fish launches a new game for iOS, Android, or Web, they use a marketing landing page to promote the launch. Other CMS systems weren’t as flexible enough for their needs. Cosmic provides Big Fish with more creative freedom to build landing pages while allowing game studios to make updates on their own.\n","logo":{"url":"https://cdn.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png","imgix_url":"https://imgix.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png"}}},{"_id":"59666b26c863d9eb6c0001f5","slug":"brand-new-congress-elects-a-new-cms","title":"Brand New Congress Elects a New CMS","content":"

Every democracy requires representation. Brand New Congress intends to elect a new set of representatives, and is doing so with the help of Cosmic to deliver their content via the cloud.



“Brand New Congress moved from a traditional CMS to Cosmic as part of a re-implementation of our website. It’s been great! First, Cosmic’s API-first approach creates a separation between content and implementation, which gave us the flexibility to implement our website in a way that made the most sense for our use case: mostly server side rendered with small React widgets, without worrying about compatibility with existing CMSes. Second, Cosmic’s user roles – developer and editor – where the developer defines a schema and the editor edits objects within those parameters – give me (the developer) the confidence that my content editors cannot accidentally\r\nbreak the site or edit the content in some incompatible way.”

— Ben Paul Ryan Parker, Director of Technology, Brand New Congress

","metafields":[{"value":"Brand New Congress","key":"company","title":"Company","type":"text","children":null},{"value":"Non-Profit","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Every democracy requires representation. Brand New Congress intends to elect a new set of representatives, and is doing so with the help of Cosmic to deliver their content via the cloud. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"60ba6a80-674a-11e7-a522-2b0861658cb0-Brand_New_Congress_logo.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/60ba6a80-674a-11e7-a522-2b0861658cb0-Brand_New_Congress_logo.png","imgix_url":"https://imgix.cosmicjs.com/60ba6a80-674a-11e7-a522-2b0861658cb0-Brand_New_Congress_logo.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created":"2017-07-12T18:32:06.453Z","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","status":"published","publish_at":null,"metadata":{"company":"Brand New Congress","industry_type":"Non-Profit","teaser":"Every democracy requires representation. Brand New Congress intends to elect a new set of representatives, and is doing so with the help of Cosmic to deliver their content via the cloud. \n","logo":{"url":"https://cdn.cosmicjs.com/60ba6a80-674a-11e7-a522-2b0861658cb0-Brand_New_Congress_logo.png","imgix_url":"https://imgix.cosmicjs.com/60ba6a80-674a-11e7-a522-2b0861658cb0-Brand_New_Congress_logo.png"}}}],"app_slugs":[{"slug":"react-blog"},{"slug":"landing-page"},{"slug":"single-page-sales-funnel"}],"extension_slugs":[{"slug":"seo-manager"},{"slug":"twitter-search"},{"slug":"google-analytics"}],"testimonial":"

"Cosmic provided us with a robust scaffolding to accept, store, and moderate User Generated Content and display it in a custom web app in real time. With Cosmic, we were able to develop an MVP in a matter of hours and focus our resources on UX and design versus content management.”

","testimonial_credit":"Chris Schwab, Front End Engineer at Life is Good"}},{"_id":"6369837ab4aff30008703195","order":4,"slug":"choosing-the-right-headless-cms","title":"Choosing the right headless CMS [A universal guide]","content":"


With a variety of headless CMS choices out there, how do you know which one to pick? Image hosting, content writing experience, and developer experience are all things to consider during this tedious process.

In this article, we’re going to dive into the many factors to consider when choosing a headless CMS. If you’re new to headless CMS, let this be your guide to confidently making the best choice for your project and team needs.

The evolution of CMS

Founded in 1982, FileNet was the creator of software to help enterprises manage their content and business processes. Although this software is much different from a modern CMS, it could be coined as the very first CMS ever created.

About two decades later came the rise of the monolithic CMS. WordPress and Drupal would take a huge slice of the pie in this market, with WordPress being one of the most used CMS in the world. In the year 2022, there are about 835 million WordPress sites currently active on the internet.

With the rising demand for omnichannel content delivery, headless CMS entered the scene with a solution that would allow content to be stored in a single content management system and delivered to several mediums using an API. A headless CMS cuts the\r\ncoupling between the presentation and content layers, allowing you to code your user interface and fetch content directly to your website or application.

Content creation experience

Organization and editing experience should be important factors when choosing a headless CMS. You have to consider what kind of user experience your content creators, marketing team, or editors should have.

A great headless CMS empowers the user (of the CMS), providing them with many features and a pleasant content creation experience. An organized dashboard, limitless content types and content creation capabilities, and versioning/scheduling features are\r\nall things that a great headless CMS is capable of.

Media management capabilities

Images on the web are heavy. Choosing a CMS with built-in media management and image optimization is crucial. In the modern web, images make up the largest number of requests on a web page.

Many CMSes come optimized with an Image CDN service, so lots of the heavy lifting is done for the developer. If you care about user experience, delivering optimized images will ensure that users around the globe are getting the best user experience when visiting your site.

When choosing a headless CMS, it’s important to consider how media is managed in the dashboard and under the hood. Images, videos, and documents are all things that deserve some optimization out of the box. It would be a bit of a pain to have to\r\naccess your media from another service other than your headless CMS.

Consider the experience your content creators and editors will endure. They will be the ones constantly uploading and accessing media within the dashboard, and a good headless CMS will provide them with a smooth and understandable process.

Developer experience

Whether you are a developer or not, a developer will be needed to implement the headless CMS into your codebase. A great headless CMS should provide them with educational resources, code examples, and templates\r\nto lower the learning curve.

While the initial time spent integrating a headless CMS into your application or website may be higher than a monolithic CMS, great documentation, how-to guides, SDKs, and pre-coded templates will speed up this process for the developer. Don’t hesitate\r\nto explore the website for the headless CMS you are inquiring on. Are there plenty of articles and blog posts relating to headless CMS topics; “how-to” guides? Is there in-depth documentation? Can you read it from a technical perspective and\r\nunderstand it from a non-technical perspective? The value is not just in the product itself, but also in the ecosystem of resources supporting it.

The next type of developer consideration is the integration capabilities. Many headless CMSes take on an API-first approach, improving the underlying functionality of the CMS. Developers love having options, and having a choice between Rest and GraphQL APIs could be a make-or-break factor. Furthermore, having an NPM module is highly beneficial, making it easier to connect your code with your content, fetch data, perform CRUD operations, and handle file uploads. Being able to npm install a package provided by the headless CMS makes it that much easier to connect to the API.

Community is key. Look for an official Slack or Discord channel, as it will have developers that actually work on the headless CMS itself. They’re there to help answer questions, walk you through problems, and consider feature integrations based\r\non feedback. The community will also have developers using the CMS for work, personal projects, and freelance. If developers enjoy using the headless CMS, chances are they’re happy to help others when they run into an issue as well. This is a sign\r\nof a healthy, active community that uses the CMS frequently.

Architecture and support

Ever implement a software product or service into your application, only to get stuck on a particular step of the process or find that a crucial feature is missing? This could be the make-or-break factor of your decision. Having great support from the\r\nheadless CMS provider is important.

Good support means direct conversation with the engineering team, guidance on the implementation of the headless CMS, and sometimes features built specifically for your company’s case.

Composability and content modeling

When considering a headless CMS as a content management system, people often consider the composability aspect. A headless CMS simply does not care how you structure your content. It is entirely up to you how you build your landing pages, blog posts,\r\nand menus. A monolithic CMS like WordPress or a website builder like Squarespace often lays out your content structure for you, whereas a headless CMS gives you the individual building blocks themselves.

Text fields, number inputs, radio switches, markdown editors, JSON blocks… the list goes on. Having a variety of metafields to choose from equals freedom. Constructing a cohesive experience for your content is an art in itself, and a great headless CMS allows you to be creative in this process.

When crafting your content model, content relationships are like superpowers. When selecting a headless CMS, take note if it provides the capability to create content relationships. This can streamline content reusability and related content fetching.

The API should make it possible to access related content easily. When fetching one content type, it should provide any related data without any additional API requests or technical challenges. For example, when fetching a single blog post it should also be possible to provide the related author and category information.

Team workflows

With any content management system, it’s important to pay attention to the collaboration aspect. When you have a team working within a headless CMS, you will often have an array of roles like developers, editors, and administrators. Sometimes, you\r\nmay even need to simply share content externally.

Different tiers of permissions will be needed for different roles. For example, a manager should get access to several editing properties in the project itself. Creating new groups of content and setting the template for what content will be\r\naccepted within that piece of content. An editor should really just be able to do simple tasks related to editing the actual content within the content. Editing copy and filling in input fields should suffice.

Some CMS solutions are innovating on content approval workflows, incorporating a Git-like process for branching and merging numerous pieces of content. Changes are made within a CMS and the author of the changes saves them to a merge request.\r\nOther members of the project can view the changes (the before and after), reviewing and iterating as needed. Once approved, the changes are then ‘merged’ into the production ‘branch’ of the content.

Another great feature is preview mode. Preview mode in a headless CMS will allow content updates to be previewed before changes go live. With this feature, you make changes in your headless CMS, save them as a draft, then are able to share a preview link with anyone. Anyone with the link will be able to access draft content. Using Next.js preview mode with a headless CMS, you can achieve this through Next.js API routes.

Small teams may not feel the effect of these features, though when it comes to larger teams of ten or even hundreds with access to a single project, they will be felt. These workflow features are crucial for high-performance teams prioritizing content velocity.

In conclusion

The market of headless CMS is plentiful, and this is a good thing. With many choices comes many things to consider, and with the right direction and information, you should have no problem finding the right headless CMS for your project. After all, one\r\nsize does not fit all, and you should test around a bit and choose the solution you enjoy using the most.

I hope this guide gave you a better understanding of the foundational features of a headless CMS and what to look for when choosing one.

","metafields":[{"children":null,"type":"object","title":"Author","key":"author","id":"brhtqBKa9h","value":"636beebc3b7d06000971c644","required":true,"object_type":"authors","object":{"_id":"636beebc3b7d06000971c644","slug":"stefan-kudla","title":"Stefan Kudla","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"BgFHSqrFnd","value":""},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"trUgJkN1Br","value":"b7993e30-605a-11ed-b192-abbbbb9eecea-avatar4.png","url":"https://cdn.cosmicjs.com/b7993e30-605a-11ed-b192-abbbbb9eecea-avatar4.png","imgix_url":"https://imgix.cosmicjs.com/b7993e30-605a-11ed-b192-abbbbb9eecea-avatar4.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2022-11-09T18:17:32.738Z","created_at":"2022-11-09T18:17:32.738Z","modified_at":"2022-11-09T18:18:15.113Z","status":"published","locale":null,"published_at":"2022-11-09T18:18:15.113Z","modified_by":"6321e6074fd8b200090bb00c","thumbnail":"https://imgix.cosmicjs.com/b7993e30-605a-11ed-b192-abbbbb9eecea-avatar4.png","publish_at":null,"unpublish_at":null}},{"children":null,"type":"html-textarea","title":"Teaser","key":"teaser","id":"aZHFEnp5ty","value":"

Your guide to confidently choosing the best headless CMS for your project and team needs.

"},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"73qBW6dCOS","value":"5679b3a0-6050-11ed-b192-abbbbb9eecea-choosing-the-right-headless-cms.png","url":"https://cdn.cosmicjs.com/5679b3a0-6050-11ed-b192-abbbbb9eecea-choosing-the-right-headless-cms.png","imgix_url":"https://imgix.cosmicjs.com/5679b3a0-6050-11ed-b192-abbbbb9eecea-choosing-the-right-headless-cms.png"},{"children":null,"type":"textarea","title":"SEO Meta Description","key":"seo_meta_description","id":"3recrCSMjt","value":"Your guide to confidently choosing the best headless CMS for your project and team needs."},{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"WbffIHTrbO","value":"2022-11-09"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2022-11-07T22:15:22.520Z","created_by":"6321e6074fd8b200090bb00c","modified_at":"2022-11-09T19:33:22.384Z","created":"2022-11-07T22:15:22.520Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/5679b3a0-6050-11ed-b192-abbbbb9eecea-choosing-the-right-headless-cms.png","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2022-11-09T19:33:22.384Z","metadata":{"author":{"_id":"636beebc3b7d06000971c644","slug":"stefan-kudla","title":"Stefan Kudla","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"BgFHSqrFnd","value":""},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"trUgJkN1Br","value":"b7993e30-605a-11ed-b192-abbbbb9eecea-avatar4.png","url":"https://cdn.cosmicjs.com/b7993e30-605a-11ed-b192-abbbbb9eecea-avatar4.png","imgix_url":"https://imgix.cosmicjs.com/b7993e30-605a-11ed-b192-abbbbb9eecea-avatar4.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2022-11-09T18:17:32.738Z","created_at":"2022-11-09T18:17:32.738Z","modified_at":"2022-11-09T18:18:15.113Z","status":"published","locale":null,"published_at":"2022-11-09T18:18:15.113Z","modified_by":"6321e6074fd8b200090bb00c","thumbnail":"https://imgix.cosmicjs.com/b7993e30-605a-11ed-b192-abbbbb9eecea-avatar4.png","publish_at":null,"unpublish_at":null,"metadata":{"username":"","profile_picture":{"url":"https://cdn.cosmicjs.com/b7993e30-605a-11ed-b192-abbbbb9eecea-avatar4.png","imgix_url":"https://imgix.cosmicjs.com/b7993e30-605a-11ed-b192-abbbbb9eecea-avatar4.png"}}},"teaser":"

Your guide to confidently choosing the best headless CMS for your project and team needs.

","featured_image":{"url":"https://cdn.cosmicjs.com/5679b3a0-6050-11ed-b192-abbbbb9eecea-choosing-the-right-headless-cms.png","imgix_url":"https://imgix.cosmicjs.com/5679b3a0-6050-11ed-b192-abbbbb9eecea-choosing-the-right-headless-cms.png"},"seo_meta_description":"Your guide to confidently choosing the best headless CMS for your project and team needs.","published_date":"2022-11-09"}},{"_id":"5ef386ccde201700072ef9d9","slug":"ghost-headless-cms","title":"Ghost Headless CMS","content":"

Ghost has been around for some time offering what they describe as a lighter option than WordPress.  Their previous motto "just a blogging platform", has changed to "Node.js open source Headless CMS" recently to join the headless CMS space to offer their previously monolithic CMS as API-first. Cosmic is an alternative to Ghost that your developers and content creators will love.


Monolithic vs Headless CMS

Ghost, as a monolithic CMS, and other older installed CMS systems like it, comes with a coupled front end application layer that requires additional development and maintenance. Cosmic is a Headless CMS meaning that the content API and presentation layer are decoupled which gives your team great flexibility.

Cosmic provides everything your team of developers and content creators need: powerful and intuitive APIs for developers, and an easy-to-use dashboard for content creators. We've removed all complexity and CMS maintenance, so your team can focus on building great products faster, together.


Isn't Ghost also Headless?

Although Ghost can be used as a Headless CMS, you still have a lot of work to do to bring it up to the level of an optimized CMS system that's truly headless. Plus you will need to maintain the CMS itself AND your application, adding more development cost, taking focus away from what really matters: creating great content and user experiences.

","metafields":[{"children":null,"type":"switch","title":"Include in link list","key":"include_in_link_list","id":"YqgDtBQ4Se","value":true,"options":"yes,no"},{"children":null,"type":"text","title":"Vendor Name","key":"vendor_name","id":"ZUEelPp2C0","value":"Ghost Headless CMS"},{"children":null,"type":"file","title":"Logo","key":"logo","id":"09LdvODI5L","value":"9a36ed70-b57a-11ea-a093-f552856bebad-ghost-headless-cms.svg","url":"https://cdn.cosmicjs.com/9a36ed70-b57a-11ea-a093-f552856bebad-ghost-headless-cms.svg","imgix_url":"https://imgix.cosmicjs.com/9a36ed70-b57a-11ea-a093-f552856bebad-ghost-headless-cms.svg"},{"children":null,"type":"textarea","title":"Tech","key":"tech","id":"BJcvHoveVN","value":"Node.js, Nginx, MySQL."},{"children":null,"type":"textarea","title":"Scalability","key":"scalability","id":"HVFfyQ2kY8","value":"Does not scale easily. Limited by your servers, hosting provider, and budget."},{"children":null,"type":"textarea","title":"Security","key":"security","id":"TtQEoiMU0p","value":"You manage the security yourself. No default data encryption at rest or in transit."},{"children":null,"type":"textarea","title":"Maintenance","key":"maintenance","id":"bWnLlSeR3F","value":"You deploy, host, and maintain everything yourself. Along with your application and content, you need to maintain updates and security for your CMS system."},{"children":null,"type":"textarea","title":"Caching","key":"caching","id":"7V9qW4FXUo","value":"No caching included out of the box."},{"children":null,"type":"textarea","title":"Media CDN","key":"media_cdn","id":"doj24uly1Q","value":"No CDN included out of the box."},{"children":null,"type":"textarea","title":"Image Processing","key":"image_processing","id":"B3etMuNl0y","value":"Manually manage your own image sizes and optimizations."},{"children":null,"type":"textarea","title":"Extendability","key":"extendability","id":"wQEFQq8O5J","value":"Themes and integrations."},{"children":null,"type":"textarea","title":"Front end","key":"front_end","id":"b07QtfdXIY","value":"Front end is coupled with backend CMS. Can be made to be Headless."},{"children":null,"type":"textarea","title":"Number of Projects","key":"number_of_projects","id":"xP07Q7IM11","value":"One login, one website."},{"children":null,"type":"html-textarea","title":"Costs","key":"costs","id":"dXygK3uHf3","value":"

You will need to hire developer resources. Average salary of a full-stack developer is $111,600 per year. You may need to hire 1-3 developers to maintain the CMS.

"},{"children":null,"type":"text","title":"Cost Value","key":"cost_value","id":"bbaWQjrFhE","value":"$223,200"},{"children":null,"type":"text","title":"Cost Text","key":"cost_text","id":"chYy9TuvTO","value":"per year"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"cms-competitors","created":"2020-06-24T17:01:00.714Z","created_at":"2020-06-24T17:01:00.714Z","modified_at":"2020-06-28T20:52:20.697Z","status":"published","locale":null,"modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-06-28T20:52:20.697Z","unpublish_at":null,"order":4,"metadata":{"include_in_link_list":true,"vendor_name":"Ghost Headless CMS","logo":{"url":"https://cdn.cosmicjs.com/9a36ed70-b57a-11ea-a093-f552856bebad-ghost-headless-cms.svg","imgix_url":"https://imgix.cosmicjs.com/9a36ed70-b57a-11ea-a093-f552856bebad-ghost-headless-cms.svg"},"tech":"Node.js, Nginx, MySQL.","scalability":"Does not scale easily. Limited by your servers, hosting provider, and budget.","security":"You manage the security yourself. No default data encryption at rest or in transit.","maintenance":"You deploy, host, and maintain everything yourself. Along with your application and content, you need to maintain updates and security for your CMS system.","caching":"No caching included out of the box.","media_cdn":"No CDN included out of the box.","image_processing":"Manually manage your own image sizes and optimizations.","extendability":"Themes and integrations.","front_end":"Front end is coupled with backend CMS. Can be made to be Headless.","number_of_projects":"One login, one website.","costs":"

You will need to hire developer resources. Average salary of a full-stack developer is $111,600 per year. You may need to hire 1-3 developers to maintain the CMS.

","cost_value":"$223,200","cost_text":"per year"}},{"_id":"5fa46192b86f520007f78507","slug":"finnauto","title":"Finn.auto","content":"","metafields":[{"children":null,"type":"file","title":"Logo","key":"logo","id":"MrZGWdliav","value":"a727eac0-1f83-11eb-9856-f5ec37319d23-finn.auto.svg","url":"https://cdn.cosmicjs.com/a727eac0-1f83-11eb-9856-f5ec37319d23-finn.auto.svg","imgix_url":"https://imgix.cosmicjs.com/a727eac0-1f83-11eb-9856-f5ec37319d23-finn.auto.svg"},{"children":null,"type":"text","title":"SEO Description","key":"seo_description","id":"D2QVi8BRGw","value":" The Finn.auto team has accelerated their application development and content creation velocity to deliver faster results for their car subscription customers."},{"children":null,"type":"text","title":"Brand color","key":"brand_color","id":"8doq4b3Yz0","value":"#2856C1"},{"children":null,"type":"file","title":"Background Image","key":"background_image","id":"6CtXiuStNM","value":"bf89c150-1f6b-11eb-a5a0-df4a1ce90a71-finn-car.jpg","url":"https://cdn.cosmicjs.com/bf89c150-1f6b-11eb-a5a0-df4a1ce90a71-finn-car.jpg","imgix_url":"https://imgix.cosmicjs.com/bf89c150-1f6b-11eb-a5a0-df4a1ce90a71-finn-car.jpg"},{"children":null,"type":"file","title":"Main image","key":"main_image","id":"NovMP0KK4t","value":"ae697280-1f6b-11eb-a5a0-df4a1ce90a71-finn.jpg","url":"https://cdn.cosmicjs.com/ae697280-1f6b-11eb-a5a0-df4a1ce90a71-finn.jpg","imgix_url":"https://imgix.cosmicjs.com/ae697280-1f6b-11eb-a5a0-df4a1ce90a71-finn.jpg"},{"children":[{"children":null,"type":"html-textarea","title":"Text","key":"text","id":"TI5HcFT8C1","value":"

Finn.auto is not your typical auto rental company. If you aren't familiar with their Germany-based service, they're probably unlike anything you've ever heard of before. They don't call themselves a car rental company, although they do drop a vehicle off at your door. They aren't really a green-energy company either, although all their vehicles drive climate-neutral. Calling them a subscription service doesn't exactly do them justice, but it might be most on-the-nose. So what is Finn.auto?

"},{"children":null,"type":"file","title":"Image","key":"image","id":"2oMOwzjcoA","value":"1594e2a0-1f6c-11eb-a5a0-df4a1ce90a71-finn-screen.jpeg","url":"https://cdn.cosmicjs.com/1594e2a0-1f6c-11eb-a5a0-df4a1ce90a71-finn-screen.jpeg","imgix_url":"https://imgix.cosmicjs.com/1594e2a0-1f6c-11eb-a5a0-df4a1ce90a71-finn-screen.jpeg"}],"type":"parent","title":"Section 1","key":"section_1","id":"rFME4WMGc4","value":"

Finn.auto is not your typical auto rental company. If you aren't familiar with their Germany-based service, they're probably unlike anything you've ever heard of before. They don't call themselves a car rental company, although they do drop a vehicle off at your door. They aren't really a green-energy company either, although all their vehicles drive climate-neutral. Calling them a subscription service doesn't exactly do them justice, but it might be most on-the-nose. So what is Finn.auto?

"},{"children":[{"children":null,"type":"html-textarea","title":"Text","key":"text","id":"1lQ37cypdN","value":"

Co-Founder Maximilian Wühr would tell you they're a car-subscription company; an all-inclusive-service that eliminates every imaginable hassle that comes with acquiring, owning, renting, driving, or maintaining your vehicle. Select a vehicle in a few minutes online, and Finn.auto will take care of everything from registration and insurance, to doorstep drop-off, to the long-term maintenance of your car. Perhaps the only thing they can't do is refuel for you.

To get their proof of concept rolling, Finn.auto managed leads with a combination of Webflow, Google Sheets, Airtable, and a handful of other intermediate solutions. Did it work? Better than they'd hoped. Clever setup? No one could doubt that. Still, as more leads began rolling in their pipeline, the founders knew they would need to professionalize their setup.

"},{"children":null,"type":"file","title":"Image","key":"image","id":"dJjNKrwhq2","value":"c9bcdb30-1f89-11eb-a576-4393b78b9c1f-finn-car.jpeg","url":"https://cdn.cosmicjs.com/c9bcdb30-1f89-11eb-a576-4393b78b9c1f-finn-car.jpeg","imgix_url":"https://imgix.cosmicjs.com/c9bcdb30-1f89-11eb-a576-4393b78b9c1f-finn-car.jpeg"}],"type":"parent","title":"Section 2","key":"section_2","id":"HPWi9E27Y1","value":"

Co-Founder Maximilian Wühr would tell you they're a car-subscription company; an all-inclusive-service that eliminates every imaginable hassle that comes with acquiring, owning, renting, driving, or maintaining your vehicle. Select a vehicle in a few minutes online, and Finn.auto will take care of everything from registration and insurance, to doorstep drop-off, to the long-term maintenance of your car. Perhaps the only thing they can't do is refuel for you.

To get their proof of concept rolling, Finn.auto managed leads with a combination of Webflow, Google Sheets, Airtable, and a handful of other intermediate solutions. Did it work? Better than they'd hoped. Clever setup? No one could doubt that. Still, as more leads began rolling in their pipeline, the founders knew they would need to professionalize their setup.

"},{"children":[{"children":null,"type":"file","title":"Image","key":"image","id":"9cIEMFkXDD","value":"3da33fd0-1f6c-11eb-a5a0-df4a1ce90a71-max-wuhr.jpg","url":"https://cdn.cosmicjs.com/3da33fd0-1f6c-11eb-a5a0-df4a1ce90a71-max-wuhr.jpg","imgix_url":"https://imgix.cosmicjs.com/3da33fd0-1f6c-11eb-a5a0-df4a1ce90a71-max-wuhr.jpg"},{"children":null,"type":"textarea","title":"Text","key":"text","id":"2Nc1ncE2qv","value":"We liked Cosmic because we wanted something as object-oriented as we were at the time. It was easy for a developer with object-orientation and object relationship - way superior to other kinds of CMS. On the other hand, the editing tool is seamless, which we liked for the content-side. It was very feature-rich for both developers and content editing, which was the gap we wanted to bridge. There were very few limitations to objects or anything else.\n\nEvery API Call was cached, and this was something we noticed as the way we would have built it ourselves. We liked that. The thought for developers was apparent. Cosmic is: us never having to ask a developer to change anything on the backend of our website. It separated out the content and structure, let us manage our own front-end how we like it, and now we'll be using it for every piece of content that goes up on the website."},{"children":null,"type":"text","title":"Author","key":"author","id":"drEsJ929v0","value":"Maximilian Wühr, Co-Founder & VP of User-Acquisition"},{"children":null,"type":"textarea","title":"Testimonial Home","key":"testimonial_home","id":"jzgyihl9ikl38jlgdto4","object_type":"undefined","value":"\"Cosmic is easy for developers familiar with object-orientation - way superior to other kinds of CMS.\""}],"type":"parent","title":"Testimonial Section","key":"testimonial_section","id":"DVO2gCo3DQ","value":"We liked Cosmic because we wanted something as object-oriented as we were at the time. It was easy for a developer with object-orientation and object relationship - way superior to other kinds of CMS. On the other hand, the editing tool is seamless, which we liked for the content-side. It was very feature-rich for both developers and content editing, which was the gap we wanted to bridge. There were very few limitations to objects or anything else.\n\nEvery API Call was cached, and this was something we noticed as the way we would have built it ourselves. We liked that. The thought for developers was apparent. Cosmic is: us never having to ask a developer to change anything on the backend of our website. It separated out the content and structure, let us manage our own front-end how we like it, and now we'll be using it for every piece of content that goes up on the website."},{"children":null,"type":"text","title":"Industry","key":"industry","id":"F1kQlP8PwO","value":"Automotive"},{"children":null,"type":"text","title":"Product","key":"product","id":"6UgKkgEJwC","value":"CO2 Neutral Car Subscription"},{"children":null,"type":"switch","title":"Featured on Home","key":"featured_on_home","id":"RB0OJs4IWn","value":true,"options":"yes,no"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"customers","created":"2020-11-05T20:33:22.357Z","created_at":"2020-11-05T20:33:22.357Z","modified_at":"2020-12-18T15:19:35.892Z","status":"published","locale":null,"modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-12-18T15:19:35.892Z","unpublish_at":null,"thumbnail":"https://imgix.cosmicjs.com/bf89c150-1f6b-11eb-a5a0-df4a1ce90a71-finn-car.jpg","order":4,"metadata":{"logo":{"url":"https://cdn.cosmicjs.com/a727eac0-1f83-11eb-9856-f5ec37319d23-finn.auto.svg","imgix_url":"https://imgix.cosmicjs.com/a727eac0-1f83-11eb-9856-f5ec37319d23-finn.auto.svg"},"seo_description":" The Finn.auto team has accelerated their application development and content creation velocity to deliver faster results for their car subscription customers.","brand_color":"#2856C1","background_image":{"url":"https://cdn.cosmicjs.com/bf89c150-1f6b-11eb-a5a0-df4a1ce90a71-finn-car.jpg","imgix_url":"https://imgix.cosmicjs.com/bf89c150-1f6b-11eb-a5a0-df4a1ce90a71-finn-car.jpg"},"main_image":{"url":"https://cdn.cosmicjs.com/ae697280-1f6b-11eb-a5a0-df4a1ce90a71-finn.jpg","imgix_url":"https://imgix.cosmicjs.com/ae697280-1f6b-11eb-a5a0-df4a1ce90a71-finn.jpg"},"section_1":{"text":"

Finn.auto is not your typical auto rental company. If you aren't familiar with their Germany-based service, they're probably unlike anything you've ever heard of before. They don't call themselves a car rental company, although they do drop a vehicle off at your door. They aren't really a green-energy company either, although all their vehicles drive climate-neutral. Calling them a subscription service doesn't exactly do them justice, but it might be most on-the-nose. So what is Finn.auto?

","image":{"url":"https://cdn.cosmicjs.com/1594e2a0-1f6c-11eb-a5a0-df4a1ce90a71-finn-screen.jpeg","imgix_url":"https://imgix.cosmicjs.com/1594e2a0-1f6c-11eb-a5a0-df4a1ce90a71-finn-screen.jpeg"}},"section_2":{"text":"

Co-Founder Maximilian Wühr would tell you they're a car-subscription company; an all-inclusive-service that eliminates every imaginable hassle that comes with acquiring, owning, renting, driving, or maintaining your vehicle. Select a vehicle in a few minutes online, and Finn.auto will take care of everything from registration and insurance, to doorstep drop-off, to the long-term maintenance of your car. Perhaps the only thing they can't do is refuel for you.

To get their proof of concept rolling, Finn.auto managed leads with a combination of Webflow, Google Sheets, Airtable, and a handful of other intermediate solutions. Did it work? Better than they'd hoped. Clever setup? No one could doubt that. Still, as more leads began rolling in their pipeline, the founders knew they would need to professionalize their setup.

","image":{"url":"https://cdn.cosmicjs.com/c9bcdb30-1f89-11eb-a576-4393b78b9c1f-finn-car.jpeg","imgix_url":"https://imgix.cosmicjs.com/c9bcdb30-1f89-11eb-a576-4393b78b9c1f-finn-car.jpeg"}},"testimonial_section":{"image":{"url":"https://cdn.cosmicjs.com/3da33fd0-1f6c-11eb-a5a0-df4a1ce90a71-max-wuhr.jpg","imgix_url":"https://imgix.cosmicjs.com/3da33fd0-1f6c-11eb-a5a0-df4a1ce90a71-max-wuhr.jpg"},"text":"We liked Cosmic because we wanted something as object-oriented as we were at the time. It was easy for a developer with object-orientation and object relationship - way superior to other kinds of CMS. On the other hand, the editing tool is seamless, which we liked for the content-side. It was very feature-rich for both developers and content editing, which was the gap we wanted to bridge. There were very few limitations to objects or anything else.\n\nEvery API Call was cached, and this was something we noticed as the way we would have built it ourselves. We liked that. The thought for developers was apparent. Cosmic is: us never having to ask a developer to change anything on the backend of our website. It separated out the content and structure, let us manage our own front-end how we like it, and now we'll be using it for every piece of content that goes up on the website.","author":"Maximilian Wühr, Co-Founder & VP of User-Acquisition","testimonial_home":"\"Cosmic is easy for developers familiar with object-orientation - way superior to other kinds of CMS.\""},"industry":"Automotive","product":"CO2 Neutral Car Subscription","featured_on_home":true}},{"_id":"5a4bbb1669aed5562c000010","order":4,"slug":"enterprise","title":"Enterprise","content":"","metafields":[{"object_type":"case-studies","value":"59f49a7cee2adb545c0005bc,59663607a6a3f55962000e40,596663e8880d69fb6c000194,5aa7cd8c3078516dd48d6ad2","key":"case_studies","title":"Case Studies","type":"objects","children":null,"objects":[{"_id":"59f49a7cee2adb545c0005bc","slug":"life-is-good-shares-gratitude","title":"Life is Good Shares Gratitude","content":"

The Life is Good community shares one simple, unifying mission: to spread the power of optimism. In that spirit, the Life is Good team built a Gratitude Wall for some user-generated-thanksgiving. This widget will allow users to add "sticky notes" with their name and what they are grateful for to the gratitude board. 



The Gratitude Wall is adapted from the Cosmic Sticky Notes App, built on React, Redux and Node.js. The Wall is currently running on Heroku and is i-framed into WordPress on its landing page. The Life is Good team also built a simple moderation application so that their team can easily approve or delete User Generated Content as it flows in. They also built client-side moderation during content entry, which checks against a banned list of words and blocks submission.



"Cosmic provided us with a robust scaffolding to accept, store, and moderate User Generated Content and display it in a custom web app in real time. With Cosmic, we were able to develop an MVP in a matter of hours and focus our resources on UX and design versus content management. The Cosmic Support Team was extremely helpful throughout the process. We’re excited to leverage these tools again for future projects.”

— Chris Schwab, Front End Engineer  

","metafields":[{"value":"Life is Good","key":"company","title":"Company","type":"text","children":null},{"value":"Ecommerce | Apparel","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Spread the power of optimism. In that spirit, the Life is Good team built a Gratitude Wall for some user-generated-thanksgiving. This widget will allow users to add \"sticky notes\" with their name and what they are grateful for to the gratitude board. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg","imgix_url":"https://imgix.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2017-10-28T14:55:56.103Z","created_by":"5716b504e9c686d006000073","created":"2017-10-28T14:55:56.103Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2019-07-25T21:53:35.289Z"},{"_id":"59663607a6a3f55962000e40","slug":"big-fish-launches-marketing-and-tutorial-content-for-games","title":"Big Fish Launches Marketing and Tutorial Content for Games","content":"

When Big Fish launches a new game for iOS, Android, or Web, they use a marketing landing page to promote the launch. Big Fish wanted their game studios to have the ability to curate and update content on each of their landing pages. Other CMS systems weren’t as flexible enough for their needs. Cosmic provides Big Fish with more creative freedom to build landing pages while allowing game studios to make updates on their own.




"We use Cosmic buckets for each of our mobile game landing pages. While our API and storage usage is low, the number of buckets we need is high, which makes the new Clusters Feature a perfect solution for our company use cases. It allows us to\r\nhave a single consolidated invoice, with an overall API and data-limit, but up to 35 buckets for our use."

— Jessica Chappell, Web Developer 

Read more about Big Fish and their games.

","metafields":[{"value":"Big Fish","key":"company","title":"Company","type":"text","children":null},{"value":"Gaming","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"When Big Fish launches a new game for iOS, Android, or Web, they use a marketing landing page to promote the launch. Other CMS systems weren’t as flexible enough for their needs. Cosmic provides Big Fish with more creative freedom to build landing pages while allowing game studios to make updates on their own.\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png","imgix_url":"https://imgix.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created":"2017-07-12T14:45:27.402Z","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","status":"published","publish_at":null,"published_at":"2018-11-08T23:15:38.911Z"},{"_id":"596663e8880d69fb6c000194","slug":"joblift-elevates-their-stack","title":"Joblift Elevates Their Stack ","content":"

In any bustling economy, a key piece of capital is human capital. When the most precious portion of capital is required, Joblift seeks to connect positions with people. They choose Cosmic to deliver their content via the cloud. 



Joblift manages localized content to serve Job, Press and Blog feeds to its various markets, including the UK, Netherlands and Germany. Easy user roles and permissions equip their team with the tools they need to seamlessly run a global organization. 


"Cosmic has completely sped up our ability to upload our content easily and efficiently. With Cosmic we now have a smooth process for uploading press releases which reflects the quality content on our website.”

— Ashleigh Grady, Content Editor and Marketing Manager

","metafields":[{"value":"Joblift","key":"company","title":"Company","type":"text","children":null},{"value":"Career Services","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"In any bustling economy, a key piece of capital is human capital. When the most precious portion of capital is required, Joblift seeks to connect positions with people. They choose Cosmic to deliver their content via the cloud. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created":"2017-07-12T18:01:12.194Z","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","status":"published","publish_at":null,"published_at":"2018-12-19T21:44:38.361Z"},{"_id":"5aa7cd8c3078516dd48d6ad2","slug":"bookabus-builds-a-localized-transportation-website","title":"Bookabus Builds a Localized Transportation Website","content":"

Bookabus is an innovative start-up in the travel and mobility industry, serving as one of the largest coach hire and bus rental booking services in Europe. Whether it’s a day trip with 20 people or a large-scale event with 500 people, Bookabus, together with its partners, ensures a carefree and high-quality travel experience for groups and events. 



Bookabus needed a new website to communicate their transport routes, terms and marketing materials.  A big requirement was the ability to localize their content into different languages for the different areas they're servicing, including the UK, Netherlands, Germany, Spain, and Belgium.  They chose to build their new transportation website with Cosmic because of the ease of use and powerful localization capabilities.



"Cosmic allowed us to easily integrate dynamic content into our website. The product is a great value for your money. This is especially true given that their customer service is top-notch."

— Harrie Pieters, Web Developer 

","metafields":[{"value":"Bookabus","key":"company","title":"Company","type":"text","children":null},{"value":"Transportation","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Bookabus is an innovative start-up in the travel and mobility industry, serving as one of the largest coach hire and bus rental booking services in Europe. Whether it’s a day trip with 20 people or a large-scale event with 500 people, Bookabus, together with its partners, ensures a carefree and high-quality travel experience for groups and events. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"61777d70-26bf-11e8-808d-f7104bba2cfa-7bb0413cfa3f2b5a11182ebb782aa208.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/61777d70-26bf-11e8-808d-f7104bba2cfa-7bb0413cfa3f2b5a11182ebb782aa208.png","imgix_url":"https://imgix.cosmicjs.com/61777d70-26bf-11e8-808d-f7104bba2cfa-7bb0413cfa3f2b5a11182ebb782aa208.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-03-13T13:09:32.089Z","created_by":"5716b504e9c686d006000073","created":"2018-03-13T13:09:32.089Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-04-19T21:23:26.384Z"}]}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"pages","created_at":"2018-01-02T17:02:14.282Z","created_by":"5357ef811693be2118000001","created":"2018-01-02T17:02:14.282Z","status":"published","modified_at":"2018-06-22T22:23:06.421Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-06-22T22:23:06.421Z","metadata":{"case_studies":[{"_id":"59f49a7cee2adb545c0005bc","slug":"life-is-good-shares-gratitude","title":"Life is Good Shares Gratitude","content":"

The Life is Good community shares one simple, unifying mission: to spread the power of optimism. In that spirit, the Life is Good team built a Gratitude Wall for some user-generated-thanksgiving. This widget will allow users to add "sticky notes" with their name and what they are grateful for to the gratitude board. 



The Gratitude Wall is adapted from the Cosmic Sticky Notes App, built on React, Redux and Node.js. The Wall is currently running on Heroku and is i-framed into WordPress on its landing page. The Life is Good team also built a simple moderation application so that their team can easily approve or delete User Generated Content as it flows in. They also built client-side moderation during content entry, which checks against a banned list of words and blocks submission.



"Cosmic provided us with a robust scaffolding to accept, store, and moderate User Generated Content and display it in a custom web app in real time. With Cosmic, we were able to develop an MVP in a matter of hours and focus our resources on UX and design versus content management. The Cosmic Support Team was extremely helpful throughout the process. We’re excited to leverage these tools again for future projects.”

— Chris Schwab, Front End Engineer  

","metafields":[{"value":"Life is Good","key":"company","title":"Company","type":"text","children":null},{"value":"Ecommerce | Apparel","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Spread the power of optimism. In that spirit, the Life is Good team built a Gratitude Wall for some user-generated-thanksgiving. This widget will allow users to add \"sticky notes\" with their name and what they are grateful for to the gratitude board. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg","imgix_url":"https://imgix.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2017-10-28T14:55:56.103Z","created_by":"5716b504e9c686d006000073","created":"2017-10-28T14:55:56.103Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2019-07-25T21:53:35.289Z","metadata":{"company":"Life is Good","industry_type":"Ecommerce | Apparel","teaser":"Spread the power of optimism. In that spirit, the Life is Good team built a Gratitude Wall for some user-generated-thanksgiving. This widget will allow users to add \"sticky notes\" with their name and what they are grateful for to the gratitude board. \n","logo":{"url":"https://cdn.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg","imgix_url":"https://imgix.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg"}}},{"_id":"59663607a6a3f55962000e40","slug":"big-fish-launches-marketing-and-tutorial-content-for-games","title":"Big Fish Launches Marketing and Tutorial Content for Games","content":"

When Big Fish launches a new game for iOS, Android, or Web, they use a marketing landing page to promote the launch. Big Fish wanted their game studios to have the ability to curate and update content on each of their landing pages. Other CMS systems weren’t as flexible enough for their needs. Cosmic provides Big Fish with more creative freedom to build landing pages while allowing game studios to make updates on their own.




"We use Cosmic buckets for each of our mobile game landing pages. While our API and storage usage is low, the number of buckets we need is high, which makes the new Clusters Feature a perfect solution for our company use cases. It allows us to\r\nhave a single consolidated invoice, with an overall API and data-limit, but up to 35 buckets for our use."

— Jessica Chappell, Web Developer 

Read more about Big Fish and their games.

","metafields":[{"value":"Big Fish","key":"company","title":"Company","type":"text","children":null},{"value":"Gaming","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"When Big Fish launches a new game for iOS, Android, or Web, they use a marketing landing page to promote the launch. Other CMS systems weren’t as flexible enough for their needs. Cosmic provides Big Fish with more creative freedom to build landing pages while allowing game studios to make updates on their own.\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png","imgix_url":"https://imgix.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created":"2017-07-12T14:45:27.402Z","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","status":"published","publish_at":null,"published_at":"2018-11-08T23:15:38.911Z","metadata":{"company":"Big Fish","industry_type":"Gaming","teaser":"When Big Fish launches a new game for iOS, Android, or Web, they use a marketing landing page to promote the launch. Other CMS systems weren’t as flexible enough for their needs. Cosmic provides Big Fish with more creative freedom to build landing pages while allowing game studios to make updates on their own.\n","logo":{"url":"https://cdn.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png","imgix_url":"https://imgix.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png"}}},{"_id":"596663e8880d69fb6c000194","slug":"joblift-elevates-their-stack","title":"Joblift Elevates Their Stack ","content":"

In any bustling economy, a key piece of capital is human capital. When the most precious portion of capital is required, Joblift seeks to connect positions with people. They choose Cosmic to deliver their content via the cloud. 



Joblift manages localized content to serve Job, Press and Blog feeds to its various markets, including the UK, Netherlands and Germany. Easy user roles and permissions equip their team with the tools they need to seamlessly run a global organization. 


"Cosmic has completely sped up our ability to upload our content easily and efficiently. With Cosmic we now have a smooth process for uploading press releases which reflects the quality content on our website.”

— Ashleigh Grady, Content Editor and Marketing Manager

","metafields":[{"value":"Joblift","key":"company","title":"Company","type":"text","children":null},{"value":"Career Services","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"In any bustling economy, a key piece of capital is human capital. When the most precious portion of capital is required, Joblift seeks to connect positions with people. They choose Cosmic to deliver their content via the cloud. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created":"2017-07-12T18:01:12.194Z","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","status":"published","publish_at":null,"published_at":"2018-12-19T21:44:38.361Z","metadata":{"company":"Joblift","industry_type":"Career Services","teaser":"In any bustling economy, a key piece of capital is human capital. When the most precious portion of capital is required, Joblift seeks to connect positions with people. They choose Cosmic to deliver their content via the cloud. \n","logo":{"url":"https://cdn.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg"}}},{"_id":"5aa7cd8c3078516dd48d6ad2","slug":"bookabus-builds-a-localized-transportation-website","title":"Bookabus Builds a Localized Transportation Website","content":"

Bookabus is an innovative start-up in the travel and mobility industry, serving as one of the largest coach hire and bus rental booking services in Europe. Whether it’s a day trip with 20 people or a large-scale event with 500 people, Bookabus, together with its partners, ensures a carefree and high-quality travel experience for groups and events. 



Bookabus needed a new website to communicate their transport routes, terms and marketing materials.  A big requirement was the ability to localize their content into different languages for the different areas they're servicing, including the UK, Netherlands, Germany, Spain, and Belgium.  They chose to build their new transportation website with Cosmic because of the ease of use and powerful localization capabilities.



"Cosmic allowed us to easily integrate dynamic content into our website. The product is a great value for your money. This is especially true given that their customer service is top-notch."

— Harrie Pieters, Web Developer 

","metafields":[{"value":"Bookabus","key":"company","title":"Company","type":"text","children":null},{"value":"Transportation","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Bookabus is an innovative start-up in the travel and mobility industry, serving as one of the largest coach hire and bus rental booking services in Europe. Whether it’s a day trip with 20 people or a large-scale event with 500 people, Bookabus, together with its partners, ensures a carefree and high-quality travel experience for groups and events. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"61777d70-26bf-11e8-808d-f7104bba2cfa-7bb0413cfa3f2b5a11182ebb782aa208.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/61777d70-26bf-11e8-808d-f7104bba2cfa-7bb0413cfa3f2b5a11182ebb782aa208.png","imgix_url":"https://imgix.cosmicjs.com/61777d70-26bf-11e8-808d-f7104bba2cfa-7bb0413cfa3f2b5a11182ebb782aa208.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-03-13T13:09:32.089Z","created_by":"5716b504e9c686d006000073","created":"2018-03-13T13:09:32.089Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-04-19T21:23:26.384Z","metadata":{"company":"Bookabus","industry_type":"Transportation","teaser":"Bookabus is an innovative start-up in the travel and mobility industry, serving as one of the largest coach hire and bus rental booking services in Europe. Whether it’s a day trip with 20 people or a large-scale event with 500 people, Bookabus, together with its partners, ensures a carefree and high-quality travel experience for groups and events. \n","logo":{"url":"https://cdn.cosmicjs.com/61777d70-26bf-11e8-808d-f7104bba2cfa-7bb0413cfa3f2b5a11182ebb782aa208.png","imgix_url":"https://imgix.cosmicjs.com/61777d70-26bf-11e8-808d-f7104bba2cfa-7bb0413cfa3f2b5a11182ebb782aa208.png"}}}]}},{"_id":"58fbe2f65161d90369000006","order":4,"slug":"angularjs-cms","title":"Angular CMS","content":"

Cosmic makes it easy to manage content for your Angular websites and applications. 

Angular CMS Templates

You can use our Angular CMS Templates, which includes Angular CMS GitHub code examples.

Angular CMS Dashboard

Cosmic is a powerful Headless CMS that enables your team to build apps faster. Developers get flexible API tools, and content creators get an intuitive content management dashboard. Get started free.

","metafields":[{"children":null,"type":"file","title":"Image","key":"image","id":"2fjpwi1YyE","value":"52f011e0-f3e7-11e8-b494-31af6b9cb765-angular-seeklogo.com.svg","url":"https://cdn.cosmicjs.com/52f011e0-f3e7-11e8-b494-31af6b9cb765-angular-seeklogo.com.svg","imgix_url":"https://imgix.cosmicjs.com/52f011e0-f3e7-11e8-b494-31af6b9cb765-angular-seeklogo.com.svg"},{"children":null,"type":"file","title":"Thumbnail","key":"thumbnail","id":"k3v400xp2T","value":"1a576450-f3e7-11e8-b494-31af6b9cb765-angular.svg","url":"https://cdn.cosmicjs.com/1a576450-f3e7-11e8-b494-31af6b9cb765-angular.svg","imgix_url":"https://imgix.cosmicjs.com/1a576450-f3e7-11e8-b494-31af6b9cb765-angular.svg"},{"children":null,"type":"html-textarea","title":"Blurb","key":"blurb","id":"VcINy2Qzt1","value":"

Cosmic is the best CMS for Angular websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

"},{"children":null,"type":"text","title":"Headline","key":"headline","id":"vYxxnbWfQQ","value":"Angular"},{"children":null,"type":"text","title":"SEO Description","key":"seo_description","id":"y4b1K4Xqpx","value":"Cosmic is the best CMS for Angular websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators."},{"children":null,"type":"file","title":"Twitter Card Image","key":"twitter_card_image","id":"UTPyNsatB8","value":"2051b220-f3e7-11e8-a2f6-9bca35b9aa63-angular.png","url":"https://cdn.cosmicjs.com/2051b220-f3e7-11e8-a2f6-9bca35b9aa63-angular.png","imgix_url":"https://imgix.cosmicjs.com/2051b220-f3e7-11e8-a2f6-9bca35b9aa63-angular.png"},{"children":null,"type":"html-textarea","title":"Code Example","key":"code_example","id":"3Bj2DSyKbZ","value":""},{"children":null,"type":"text","title":"SEO Title","key":"seo_title","id":"SbhI3Uaag6","value":"Best Headless CMS for Angular"},{"children":[],"type":"repeater","title":"Videos","key":"videos","id":"zXMAIvhlqc","value":"","repeater_fields":[{"title":"Title","key":"title","value":"","type":"text","required":false},{"title":"Link","key":"link","value":"","type":"text","required":false}]}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"kb-articles","created_at":"2017-04-22T23:10:46.250Z","created_by":"5357ef811693be2118000001","created":"2017-04-22T23:10:46.250Z","status":"published","modified_at":"2020-06-29T16:19:42.749Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-06-29T16:19:42.749Z","unpublish_at":null,"metadata":{"image":{"url":"https://cdn.cosmicjs.com/52f011e0-f3e7-11e8-b494-31af6b9cb765-angular-seeklogo.com.svg","imgix_url":"https://imgix.cosmicjs.com/52f011e0-f3e7-11e8-b494-31af6b9cb765-angular-seeklogo.com.svg"},"thumbnail":{"url":"https://cdn.cosmicjs.com/1a576450-f3e7-11e8-b494-31af6b9cb765-angular.svg","imgix_url":"https://imgix.cosmicjs.com/1a576450-f3e7-11e8-b494-31af6b9cb765-angular.svg"},"blurb":"

Cosmic is the best CMS for Angular websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

","headline":"Angular","seo_description":"Cosmic is the best CMS for Angular websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.","twitter_card_image":{"url":"https://cdn.cosmicjs.com/2051b220-f3e7-11e8-a2f6-9bca35b9aa63-angular.png","imgix_url":"https://imgix.cosmicjs.com/2051b220-f3e7-11e8-a2f6-9bca35b9aa63-angular.png"},"code_example":"","seo_title":"Best Headless CMS for Angular","videos":[]}},{"_id":"5f20ace72314e3000868449c","order":4,"slug":"fastly","title":"Fastly","content":"","metafields":[{"children":null,"type":"text","title":"Link","key":"link","id":"QYbXw6EthR","value":"https://github.com/cosmicjs/purge-function"},{"children":null,"type":"file","title":"Image","key":"image","id":"a61v9GNFQB","value":"7159b100-d125-11ea-95a6-2fa651cba029-fastly.svg","url":"https://cdn.cosmicjs.com/7159b100-d125-11ea-95a6-2fa651cba029-fastly.svg","imgix_url":"https://imgix.cosmicjs.com/7159b100-d125-11ea-95a6-2fa651cba029-fastly.svg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"integrations","created_at":"2020-07-28T22:55:35.085Z","created_by":"5357ef811693be2118000001","modified_at":"2020-07-28T22:55:35.085Z","created":"2020-07-28T22:55:35.085Z","status":"published","published_at":"2020-07-28T22:55:35.085Z","metadata":{"link":"https://github.com/cosmicjs/purge-function","image":{"url":"https://cdn.cosmicjs.com/7159b100-d125-11ea-95a6-2fa651cba029-fastly.svg","imgix_url":"https://imgix.cosmicjs.com/7159b100-d125-11ea-95a6-2fa651cba029-fastly.svg"}}},{"_id":"5afde8d07e53925430f7ccb7","order":4,"slug":"software-engineer","title":"Software Engineer","content":"

We're looking for a talented software engineer with skills in Node.js, MongoDB and API development.  You'll be tasked with developing and maintaining the core application components for Cosmic: The APIs, Web Dashboard, Database and general infrastructure. 

Skills required:

Bonus points:

Contact jobs@cosmicjs.com to apply.

","metafields":[{"children":null,"type":"textarea","title":"Teaser","key":"teaser","id":"RwJ6g2g8un","value":"We're looking for a talented software engineer with skills in API development, Node.js, MongoDB. "},{"children":null,"type":"text","title":"Font Awesome Icon","key":"font_awesome_icon","id":"H0oYdM7wV7","value":"fa-wrench"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"jobs","created_at":"2018-05-17T20:40:48.128Z","created_by":"5357ef811693be2118000001","created":"2018-05-17T20:40:48.128Z","status":"published","modified_at":"2020-10-02T02:11:12.546Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-05-18T13:20:33.613Z","unpublish_at":null,"metadata":{"teaser":"We're looking for a talented software engineer with skills in API development, Node.js, MongoDB. ","font_awesome_icon":"fa-wrench"}},{"_id":"5ef64e9ef3c07a00071076ee","slug":"sitecore-headless-cms","title":"Sitecore Headless CMS","content":"

Sitecore has been around for a long time, since 2001, making it ancient in internet years. It describes itself as a customer experience management system, maintaining full end-to-end control over the backend and presentation layer. However, as it tries to keep up with new Headless CMS solutions, it is showing its age. Cosmic is an alternative to Sitecore that your developers and content creators will love.


Monolithic vs Headless CMS

Sitecore, as a monolithic CMS, and other older installed CMS systems like it, comes with a coupled front end application layer that requires additional development and maintenance. Cosmic is a Headless CMS meaning that the content API and presentation layer are decoupled which gives your team greater flexibility when it comes to where your content can go.

Cosmic provides everything your team of developers and content creators need: powerful and intuitive APIs for developers, and an easy-to-use dashboard for content creators. We've removed all complexity and CMS maintenance, so your team can focus on building great products faster, together.


But can't Sitecore go Headless?

Although you CAN make Sitecore a Headless CMS, you still have a lot of work to do to bring it up to the level of an optimized CMS system that's truly headless. And along with your application, you will need to maintain the CMS itself, adding more development costs and taking away focus from what really matters: creating great content and user experiences in your main website or app.


Do they recommend going Headless?

Not really and encourage against it (surprise). From their website:

"Headless is not new; it’s just a “new” buzzword. We have always believed in decoupling presentation from content, but a strictly headless CMS introduces significant risk in that it increases the complexity of your solution for both your developers and your marketers. Sure, headless CMSs certainly free developers to choose whatever front-end user interface technology they’d prefer, and that might give you an app with a great user interface. But the downside is that your app’s customer experience will also be decoupled. You won’t be able to personalize that experience, or respond in real time with relevant content, or test and optimize and manage forms and market in context of user interactions. Is a standout user interface worth it if it’s that isolated?"

","metafields":[{"children":null,"type":"file","title":"Logo","key":"logo","id":"pEDPPoR2wr","value":"5f3091b0-b7df-11ea-bc3d-59980ac072b1-sitecore-headless-cms.jpg","url":"https://cdn.cosmicjs.com/5f3091b0-b7df-11ea-bc3d-59980ac072b1-sitecore-headless-cms.jpg","imgix_url":"https://imgix.cosmicjs.com/5f3091b0-b7df-11ea-bc3d-59980ac072b1-sitecore-headless-cms.jpg"},{"children":null,"type":"textarea","title":"Tech","key":"tech","id":"Xkx1Q7eNBh","value":"ASP.net, SQL database."},{"children":null,"type":"textarea","title":"Scalability","key":"scalability","id":"TE1yCOHzrU","value":"Does not scale easily. Limited by servers."},{"children":null,"type":"textarea","title":"Security","key":"security","id":"e4wG0Laz98","value":"Sitecore security."},{"children":null,"type":"textarea","title":"Maintenance","key":"maintenance","id":"XT6Fj8JNR4","value":"They deploy, host, and maintain everything for you. Along with your application and content, you need to maintain updates and security for your CMS system."},{"children":null,"type":"textarea","title":"Caching","key":"caching","id":"6MANd15kX1","value":"No caching included out of the box."},{"children":null,"type":"textarea","title":"Media CDN","key":"media_cdn","id":"FuOJGBTnqI","value":"No CDN included out of the box."},{"children":null,"type":"textarea","title":"Image Processing","key":"image_processing","id":"Du8DXHLgFF","value":"Manually manage your own image sizes and optimizations."},{"children":null,"type":"textarea","title":"Extendability","key":"extendability","id":"kc4iF8scz0","value":"Possible. Limited. Complicated."},{"children":null,"type":"textarea","title":"Front end","key":"front_end","id":"79Zh5Ke9df","value":"Front end is coupled with backend CMS. Can be made to be Headless."},{"children":null,"type":"textarea","title":"Number of Projects","key":"number_of_projects","id":"YLSNIIN8ia","value":"One login, one website."},{"children":null,"type":"html-textarea","title":"Costs","key":"costs","id":"y3qZs0RN4Q","value":"

You will need to hire developer resources as this system is WAY complicated and outdated. Average salary of a full-stack developer is $111,600 per year. You may need to hire 1-3 developers to maintain the CMS. Plus the cost of licensing Sitecore can be astronomical.

"},{"children":null,"type":"text","title":"Vendor Name","key":"vendor_name","id":"SCjUBMWCgh","value":"Sitecore"},{"children":null,"type":"switch","title":"Include in link list","key":"include_in_link_list","id":"BwE2POFQEr","value":true,"options":"yes,no"},{"children":null,"type":"text","title":"Cost Value","key":"cost_value","id":"kN8qewEDuK","value":"$523,200+"},{"children":null,"type":"text","title":"Cost Text","key":"cost_text","id":"wgkMw3ZGen","value":"per year"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"cms-competitors","created":"2020-06-26T19:38:06.451Z","created_at":"2020-06-26T19:38:06.451Z","modified_at":"2020-06-28T20:53:13.297Z","status":"published","locale":null,"modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-06-28T20:53:13.297Z","unpublish_at":null,"order":5,"metadata":{"logo":{"url":"https://cdn.cosmicjs.com/5f3091b0-b7df-11ea-bc3d-59980ac072b1-sitecore-headless-cms.jpg","imgix_url":"https://imgix.cosmicjs.com/5f3091b0-b7df-11ea-bc3d-59980ac072b1-sitecore-headless-cms.jpg"},"tech":"ASP.net, SQL database.","scalability":"Does not scale easily. Limited by servers.","security":"Sitecore security.","maintenance":"They deploy, host, and maintain everything for you. Along with your application and content, you need to maintain updates and security for your CMS system.","caching":"No caching included out of the box.","media_cdn":"No CDN included out of the box.","image_processing":"Manually manage your own image sizes and optimizations.","extendability":"Possible. Limited. Complicated.","front_end":"Front end is coupled with backend CMS. Can be made to be Headless.","number_of_projects":"One login, one website.","costs":"

You will need to hire developer resources as this system is WAY complicated and outdated. Average salary of a full-stack developer is $111,600 per year. You may need to hire 1-3 developers to maintain the CMS. Plus the cost of licensing Sitecore can be astronomical.

","vendor_name":"Sitecore","include_in_link_list":true,"cost_value":"$523,200+","cost_text":"per year"}},{"_id":"6406c07561ff89000812cd01","order":5,"slug":"new-gatsby-source-plugin","title":"New Gatsby source plugin","content":"

We are excited to announce the release of our new Gatsby source plugin. Rebuilt from the ground up, the new plugin makes use\r\nof new features and best practices with Gatsby and the Cosmic API.

Changes include:

Important notes:

How to install:

To update to the new plugin run the following command in your Gatsby app:

npm install --save @cosmicjs/gatsby-source-cosmic

Go to the Cosmic Gatsby source plugin on NPM to learn how to get started.

","metafields":[{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"qADwLinqP9","value":"2023-03-07"},{"children":null,"type":"object","title":"Author","key":"author","id":"e8jNrYzye2","value":"5ffa1d1e0046b0000799cb7b","object_type":"authors","object":{"_id":"5ffa1d1e0046b0000799cb7b","slug":"cosmic","title":"Cosmic","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"ZogvxZg6OL","value":""},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D0qLJ4RPBe","value":"10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2021-01-09T21:16:14.533Z","created_by":"5357ef811693be2118000001","modified_at":"2021-01-09T21:18:26.147Z","created":"2021-01-09T21:16:14.533Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/e55ef990-52bf-11eb-986d-4d7ff5faa3ab-logo.svg","published_at":"2021-01-09T21:18:26.147Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null}},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"B5wzGS9Fhh","value":"4ddfcd70-bca2-11ed-9c72-1b0394f51b24-gatsby-changelog.png","url":"https://cdn.cosmicjs.com/4ddfcd70-bca2-11ed-9c72-1b0394f51b24-gatsby-changelog.png","imgix_url":"https://imgix.cosmicjs.com/4ddfcd70-bca2-11ed-9c72-1b0394f51b24-gatsby-changelog.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"changelogs","created_at":"2023-03-07T04:41:25.696Z","created_by":"5357ef811693be2118000001","modified_at":"2023-03-07T18:08:22.756Z","created":"2023-03-07T04:41:25.696Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/4ddfcd70-bca2-11ed-9c72-1b0394f51b24-gatsby-changelog.png","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2023-03-07T18:08:22.756Z","metadata":{"published_date":"2023-03-07","author":{"_id":"5ffa1d1e0046b0000799cb7b","slug":"cosmic","title":"Cosmic","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"ZogvxZg6OL","value":""},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D0qLJ4RPBe","value":"10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2021-01-09T21:16:14.533Z","created_by":"5357ef811693be2118000001","modified_at":"2021-01-09T21:18:26.147Z","created":"2021-01-09T21:16:14.533Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/e55ef990-52bf-11eb-986d-4d7ff5faa3ab-logo.svg","published_at":"2021-01-09T21:18:26.147Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"metadata":{"username":"","profile_picture":{"url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}}},"featured_image":{"url":"https://cdn.cosmicjs.com/4ddfcd70-bca2-11ed-9c72-1b0394f51b24-gatsby-changelog.png","imgix_url":"https://imgix.cosmicjs.com/4ddfcd70-bca2-11ed-9c72-1b0394f51b24-gatsby-changelog.png"}}},{"_id":"5d235c2772d8f04604eb2045","slug":"headless-cms-for-ecommerce-websites","title":"Headless CMS for Ecommerce Websites","content":"

The Cosmic Headless CMS provides flexible content modeling that allows e-commerce teams to manage product inventories, seasonal sales campaigns and product-centric landing pages all from the Cosmic Dashboard. Developers, marketers, data analysts and product managers can all collaborate in Cosmic using unique user roles and permissions. Teams can revise published products, schedule new product launches and integrate with any cart or payment gateway.

Whether you're managing content for products or FAQ's, your e-commerce team has a robust toolkit for content modeling and delivery to all your websites and applications. 

","metafields":[{"children":null,"type":"text","title":"Solution Name","key":"solution_name","id":"IlsRsBVbSt","value":"Ecommerce Websites"},{"children":null,"type":"file","title":"Image","key":"image","id":"70ycrxA4wI","value":"d03eb2f0-9f54-11e9-ac09-4be8a5631b5e-6845e0b0-4235-11e8-86fe-0b7f31f36651-Screen-Shot-2018-04-17-at-6.48.12-AM.png","url":"https://cdn.cosmicjs.com/d03eb2f0-9f54-11e9-ac09-4be8a5631b5e-6845e0b0-4235-11e8-86fe-0b7f31f36651-Screen-Shot-2018-04-17-at-6.48.12-AM.png","imgix_url":"https://imgix.cosmicjs.com/d03eb2f0-9f54-11e9-ac09-4be8a5631b5e-6845e0b0-4235-11e8-86fe-0b7f31f36651-Screen-Shot-2018-04-17-at-6.48.12-AM.png"},{"children":null,"type":"objects","title":"Case Studies","key":"case_studies","id":"zjNowDqbOt","value":"59f49a7cee2adb545c0005bc,59663607a6a3f55962000e40,5aa7cd8c3078516dd48d6ad2","object_type":"case-studies","objects":[{"_id":"59f49a7cee2adb545c0005bc","slug":"life-is-good-shares-gratitude","title":"Life is Good Shares Gratitude","content":"

The Life is Good community shares one simple, unifying mission: to spread the power of optimism. In that spirit, the Life is Good team built a Gratitude Wall for some user-generated-thanksgiving. This widget will allow users to add "sticky notes" with their name and what they are grateful for to the gratitude board. 



The Gratitude Wall is adapted from the Cosmic Sticky Notes App, built on React, Redux and Node.js. The Wall is currently running on Heroku and is i-framed into WordPress on its landing page. The Life is Good team also built a simple moderation application so that their team can easily approve or delete User Generated Content as it flows in. They also built client-side moderation during content entry, which checks against a banned list of words and blocks submission.



"Cosmic provided us with a robust scaffolding to accept, store, and moderate User Generated Content and display it in a custom web app in real time. With Cosmic, we were able to develop an MVP in a matter of hours and focus our resources on UX and design versus content management. The Cosmic Support Team was extremely helpful throughout the process. We’re excited to leverage these tools again for future projects.”

— Chris Schwab, Front End Engineer  

","metafields":[{"value":"Life is Good","key":"company","title":"Company","type":"text","children":null},{"value":"Ecommerce | Apparel","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Spread the power of optimism. In that spirit, the Life is Good team built a Gratitude Wall for some user-generated-thanksgiving. This widget will allow users to add \"sticky notes\" with their name and what they are grateful for to the gratitude board. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg","imgix_url":"https://imgix.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2017-10-28T14:55:56.103Z","created_by":"5716b504e9c686d006000073","created":"2017-10-28T14:55:56.103Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2019-07-25T21:53:35.289Z"},{"_id":"59663607a6a3f55962000e40","slug":"big-fish-launches-marketing-and-tutorial-content-for-games","title":"Big Fish Launches Marketing and Tutorial Content for Games","content":"

When Big Fish launches a new game for iOS, Android, or Web, they use a marketing landing page to promote the launch. Big Fish wanted their game studios to have the ability to curate and update content on each of their landing pages. Other CMS systems weren’t as flexible enough for their needs. Cosmic provides Big Fish with more creative freedom to build landing pages while allowing game studios to make updates on their own.




"We use Cosmic buckets for each of our mobile game landing pages. While our API and storage usage is low, the number of buckets we need is high, which makes the new Clusters Feature a perfect solution for our company use cases. It allows us to\r\nhave a single consolidated invoice, with an overall API and data-limit, but up to 35 buckets for our use."

— Jessica Chappell, Web Developer 

Read more about Big Fish and their games.

","metafields":[{"value":"Big Fish","key":"company","title":"Company","type":"text","children":null},{"value":"Gaming","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"When Big Fish launches a new game for iOS, Android, or Web, they use a marketing landing page to promote the launch. Other CMS systems weren’t as flexible enough for their needs. Cosmic provides Big Fish with more creative freedom to build landing pages while allowing game studios to make updates on their own.\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png","imgix_url":"https://imgix.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created":"2017-07-12T14:45:27.402Z","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","status":"published","publish_at":null,"published_at":"2018-11-08T23:15:38.911Z"},{"_id":"5aa7cd8c3078516dd48d6ad2","slug":"bookabus-builds-a-localized-transportation-website","title":"Bookabus Builds a Localized Transportation Website","content":"

Bookabus is an innovative start-up in the travel and mobility industry, serving as one of the largest coach hire and bus rental booking services in Europe. Whether it’s a day trip with 20 people or a large-scale event with 500 people, Bookabus, together with its partners, ensures a carefree and high-quality travel experience for groups and events. 



Bookabus needed a new website to communicate their transport routes, terms and marketing materials.  A big requirement was the ability to localize their content into different languages for the different areas they're servicing, including the UK, Netherlands, Germany, Spain, and Belgium.  They chose to build their new transportation website with Cosmic because of the ease of use and powerful localization capabilities.



"Cosmic allowed us to easily integrate dynamic content into our website. The product is a great value for your money. This is especially true given that their customer service is top-notch."

— Harrie Pieters, Web Developer 

","metafields":[{"value":"Bookabus","key":"company","title":"Company","type":"text","children":null},{"value":"Transportation","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Bookabus is an innovative start-up in the travel and mobility industry, serving as one of the largest coach hire and bus rental booking services in Europe. Whether it’s a day trip with 20 people or a large-scale event with 500 people, Bookabus, together with its partners, ensures a carefree and high-quality travel experience for groups and events. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"61777d70-26bf-11e8-808d-f7104bba2cfa-7bb0413cfa3f2b5a11182ebb782aa208.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/61777d70-26bf-11e8-808d-f7104bba2cfa-7bb0413cfa3f2b5a11182ebb782aa208.png","imgix_url":"https://imgix.cosmicjs.com/61777d70-26bf-11e8-808d-f7104bba2cfa-7bb0413cfa3f2b5a11182ebb782aa208.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-03-13T13:09:32.089Z","created_by":"5716b504e9c686d006000073","created":"2018-03-13T13:09:32.089Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-04-19T21:23:26.384Z"}]},{"children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"ecommerce-app","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"gatsby-ecommerce-website","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"ecommerce-personalization","type":"text","required":false}]}],"type":"repeater","title":"App Slugs","key":"app_slugs","id":"pQ4ulCNQEq","value":"ecommerce-app","repeater_fields":"\"\"\"\"[{\"title\":\"Slug\",\"key\":\"slug\",\"value\":\"\",\"type\":\"text\",\"required\":false}]\"\"\"\""},{"children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"wordpress-importer","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"product-manager","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"amazon-product-search","type":"text","required":false}]}],"type":"repeater","title":"Extension Slugs","key":"extension_slugs","id":"aIe2BhPgjA","value":"wordpress-importer","repeater_fields":"\"\"\"\"[{\"title\":\"Slug\",\"key\":\"slug\",\"value\":\"\",\"type\":\"text\",\"required\":false}]\"\"\"\""},{"children":null,"type":"html-textarea","title":"Testimonial","key":"testimonial","id":"Y1HahZouaf","value":"

"Cosmic allowed us to easily integrate dynamic content into our website. The product is a great value for your money. This is especially true given that their customer service is top-notch."

"},{"children":null,"type":"text","title":"Testimonial Credit","key":"testimonial_credit","id":"ltWKZYKah7","value":"Harrie Pieters, Web Developer at Bookabus"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"solutions","created":"2019-07-08T15:07:19.015Z","created_at":"2019-07-08T15:07:19.015Z","modified_at":"2020-08-10T14:05:12.245Z","status":"published","locale":null,"published_at":"2020-05-06T05:32:28.737Z","modified_by":"5357ef811693be2118000001","publish_at":null,"order":5,"unpublish_at":null,"metadata":{"solution_name":"Ecommerce Websites","image":{"url":"https://cdn.cosmicjs.com/d03eb2f0-9f54-11e9-ac09-4be8a5631b5e-6845e0b0-4235-11e8-86fe-0b7f31f36651-Screen-Shot-2018-04-17-at-6.48.12-AM.png","imgix_url":"https://imgix.cosmicjs.com/d03eb2f0-9f54-11e9-ac09-4be8a5631b5e-6845e0b0-4235-11e8-86fe-0b7f31f36651-Screen-Shot-2018-04-17-at-6.48.12-AM.png"},"case_studies":[{"_id":"59f49a7cee2adb545c0005bc","slug":"life-is-good-shares-gratitude","title":"Life is Good Shares Gratitude","content":"

The Life is Good community shares one simple, unifying mission: to spread the power of optimism. In that spirit, the Life is Good team built a Gratitude Wall for some user-generated-thanksgiving. This widget will allow users to add "sticky notes" with their name and what they are grateful for to the gratitude board. 



The Gratitude Wall is adapted from the Cosmic Sticky Notes App, built on React, Redux and Node.js. The Wall is currently running on Heroku and is i-framed into WordPress on its landing page. The Life is Good team also built a simple moderation application so that their team can easily approve or delete User Generated Content as it flows in. They also built client-side moderation during content entry, which checks against a banned list of words and blocks submission.



"Cosmic provided us with a robust scaffolding to accept, store, and moderate User Generated Content and display it in a custom web app in real time. With Cosmic, we were able to develop an MVP in a matter of hours and focus our resources on UX and design versus content management. The Cosmic Support Team was extremely helpful throughout the process. We’re excited to leverage these tools again for future projects.”

— Chris Schwab, Front End Engineer  

","metafields":[{"value":"Life is Good","key":"company","title":"Company","type":"text","children":null},{"value":"Ecommerce | Apparel","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Spread the power of optimism. In that spirit, the Life is Good team built a Gratitude Wall for some user-generated-thanksgiving. This widget will allow users to add \"sticky notes\" with their name and what they are grateful for to the gratitude board. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg","imgix_url":"https://imgix.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2017-10-28T14:55:56.103Z","created_by":"5716b504e9c686d006000073","created":"2017-10-28T14:55:56.103Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2019-07-25T21:53:35.289Z","metadata":{"company":"Life is Good","industry_type":"Ecommerce | Apparel","teaser":"Spread the power of optimism. In that spirit, the Life is Good team built a Gratitude Wall for some user-generated-thanksgiving. This widget will allow users to add \"sticky notes\" with their name and what they are grateful for to the gratitude board. \n","logo":{"url":"https://cdn.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg","imgix_url":"https://imgix.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg"}}},{"_id":"59663607a6a3f55962000e40","slug":"big-fish-launches-marketing-and-tutorial-content-for-games","title":"Big Fish Launches Marketing and Tutorial Content for Games","content":"

When Big Fish launches a new game for iOS, Android, or Web, they use a marketing landing page to promote the launch. Big Fish wanted their game studios to have the ability to curate and update content on each of their landing pages. Other CMS systems weren’t as flexible enough for their needs. Cosmic provides Big Fish with more creative freedom to build landing pages while allowing game studios to make updates on their own.




"We use Cosmic buckets for each of our mobile game landing pages. While our API and storage usage is low, the number of buckets we need is high, which makes the new Clusters Feature a perfect solution for our company use cases. It allows us to\r\nhave a single consolidated invoice, with an overall API and data-limit, but up to 35 buckets for our use."

— Jessica Chappell, Web Developer 

Read more about Big Fish and their games.

","metafields":[{"value":"Big Fish","key":"company","title":"Company","type":"text","children":null},{"value":"Gaming","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"When Big Fish launches a new game for iOS, Android, or Web, they use a marketing landing page to promote the launch. Other CMS systems weren’t as flexible enough for their needs. Cosmic provides Big Fish with more creative freedom to build landing pages while allowing game studios to make updates on their own.\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png","imgix_url":"https://imgix.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created":"2017-07-12T14:45:27.402Z","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","status":"published","publish_at":null,"published_at":"2018-11-08T23:15:38.911Z","metadata":{"company":"Big Fish","industry_type":"Gaming","teaser":"When Big Fish launches a new game for iOS, Android, or Web, they use a marketing landing page to promote the launch. Other CMS systems weren’t as flexible enough for their needs. Cosmic provides Big Fish with more creative freedom to build landing pages while allowing game studios to make updates on their own.\n","logo":{"url":"https://cdn.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png","imgix_url":"https://imgix.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png"}}},{"_id":"5aa7cd8c3078516dd48d6ad2","slug":"bookabus-builds-a-localized-transportation-website","title":"Bookabus Builds a Localized Transportation Website","content":"

Bookabus is an innovative start-up in the travel and mobility industry, serving as one of the largest coach hire and bus rental booking services in Europe. Whether it’s a day trip with 20 people or a large-scale event with 500 people, Bookabus, together with its partners, ensures a carefree and high-quality travel experience for groups and events. 



Bookabus needed a new website to communicate their transport routes, terms and marketing materials.  A big requirement was the ability to localize their content into different languages for the different areas they're servicing, including the UK, Netherlands, Germany, Spain, and Belgium.  They chose to build their new transportation website with Cosmic because of the ease of use and powerful localization capabilities.



"Cosmic allowed us to easily integrate dynamic content into our website. The product is a great value for your money. This is especially true given that their customer service is top-notch."

— Harrie Pieters, Web Developer 

","metafields":[{"value":"Bookabus","key":"company","title":"Company","type":"text","children":null},{"value":"Transportation","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Bookabus is an innovative start-up in the travel and mobility industry, serving as one of the largest coach hire and bus rental booking services in Europe. Whether it’s a day trip with 20 people or a large-scale event with 500 people, Bookabus, together with its partners, ensures a carefree and high-quality travel experience for groups and events. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"61777d70-26bf-11e8-808d-f7104bba2cfa-7bb0413cfa3f2b5a11182ebb782aa208.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/61777d70-26bf-11e8-808d-f7104bba2cfa-7bb0413cfa3f2b5a11182ebb782aa208.png","imgix_url":"https://imgix.cosmicjs.com/61777d70-26bf-11e8-808d-f7104bba2cfa-7bb0413cfa3f2b5a11182ebb782aa208.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-03-13T13:09:32.089Z","created_by":"5716b504e9c686d006000073","created":"2018-03-13T13:09:32.089Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-04-19T21:23:26.384Z","metadata":{"company":"Bookabus","industry_type":"Transportation","teaser":"Bookabus is an innovative start-up in the travel and mobility industry, serving as one of the largest coach hire and bus rental booking services in Europe. Whether it’s a day trip with 20 people or a large-scale event with 500 people, Bookabus, together with its partners, ensures a carefree and high-quality travel experience for groups and events. \n","logo":{"url":"https://cdn.cosmicjs.com/61777d70-26bf-11e8-808d-f7104bba2cfa-7bb0413cfa3f2b5a11182ebb782aa208.png","imgix_url":"https://imgix.cosmicjs.com/61777d70-26bf-11e8-808d-f7104bba2cfa-7bb0413cfa3f2b5a11182ebb782aa208.png"}}}],"app_slugs":[{"slug":"ecommerce-app"},{"slug":"gatsby-ecommerce-website"},{"slug":"ecommerce-personalization"}],"extension_slugs":[{"slug":"wordpress-importer"},{"slug":"product-manager"},{"slug":"amazon-product-search"}],"testimonial":"

"Cosmic allowed us to easily integrate dynamic content into our website. The product is a great value for your money. This is especially true given that their customer service is top-notch."

","testimonial_credit":"Harrie Pieters, Web Developer at Bookabus"}},{"_id":"59663607a6a3f55962000e40","slug":"big-fish-launches-marketing-and-tutorial-content-for-games","title":"Big Fish Launches Marketing and Tutorial Content for Games","content":"

When Big Fish launches a new game for iOS, Android, or Web, they use a marketing landing page to promote the launch. Big Fish wanted their game studios to have the ability to curate and update content on each of their landing pages. Other CMS systems weren’t as flexible enough for their needs. Cosmic provides Big Fish with more creative freedom to build landing pages while allowing game studios to make updates on their own.




"We use Cosmic buckets for each of our mobile game landing pages. While our API and storage usage is low, the number of buckets we need is high, which makes the new Clusters Feature a perfect solution for our company use cases. It allows us to\r\nhave a single consolidated invoice, with an overall API and data-limit, but up to 35 buckets for our use."

— Jessica Chappell, Web Developer 

Read more about Big Fish and their games.

","metafields":[{"value":"Big Fish","key":"company","title":"Company","type":"text","children":null},{"value":"Gaming","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"When Big Fish launches a new game for iOS, Android, or Web, they use a marketing landing page to promote the launch. Other CMS systems weren’t as flexible enough for their needs. Cosmic provides Big Fish with more creative freedom to build landing pages while allowing game studios to make updates on their own.\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png","imgix_url":"https://imgix.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created":"2017-07-12T14:45:27.402Z","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","status":"published","order":5,"publish_at":null,"published_at":"2018-11-08T23:15:38.911Z","metadata":{"company":"Big Fish","industry_type":"Gaming","teaser":"When Big Fish launches a new game for iOS, Android, or Web, they use a marketing landing page to promote the launch. Other CMS systems weren’t as flexible enough for their needs. Cosmic provides Big Fish with more creative freedom to build landing pages while allowing game studios to make updates on their own.\n","logo":{"url":"https://cdn.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png","imgix_url":"https://imgix.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png"}}},{"_id":"5fa4615dec4b3d0008bbecd6","slug":"movespring","title":"MoveSpring","content":"","metafields":[{"children":null,"type":"file","title":"Logo","key":"logo","id":"cyXKkxlBBJ","value":"f845bad0-4678-11e9-8449-05a08cc194da-movespringlogoblue.svg","url":"https://cdn.cosmicjs.com/f845bad0-4678-11e9-8449-05a08cc194da-movespringlogoblue.svg","imgix_url":"https://imgix.cosmicjs.com/f845bad0-4678-11e9-8449-05a08cc194da-movespringlogoblue.svg"},{"children":null,"type":"text","title":"SEO Description","key":"seo_description","id":"1p64OJkIQo","value":"MoveSpring is a fun, easy-to-use activity and steps challenge platform. Step your way to success with quick onboarding, real-time scoring, and flexible plan options."},{"children":null,"type":"text","title":"Brand color","key":"brand_color","id":"w7OGyTyKnH","value":"#4f9cfb"},{"children":null,"type":"file","title":"Background Image","key":"background_image","id":"CFCb7MYuVV","value":"1f12f4a0-1f9b-11eb-a576-4393b78b9c1f-movespring-screens.png","url":"https://cdn.cosmicjs.com/1f12f4a0-1f9b-11eb-a576-4393b78b9c1f-movespring-screens.png","imgix_url":"https://imgix.cosmicjs.com/1f12f4a0-1f9b-11eb-a576-4393b78b9c1f-movespring-screens.png"},{"children":null,"type":"file","title":"Main image","key":"main_image","id":"IYxuiY4yNr","value":"30041d20-1f9b-11eb-a576-4393b78b9c1f-movespring-mobile.jpeg","url":"https://cdn.cosmicjs.com/30041d20-1f9b-11eb-a576-4393b78b9c1f-movespring-mobile.jpeg","imgix_url":"https://imgix.cosmicjs.com/30041d20-1f9b-11eb-a576-4393b78b9c1f-movespring-mobile.jpeg"},{"children":[{"children":null,"type":"html-textarea","title":"Text","key":"text","id":"D3YbDvjRjB","value":"

MoveSpring is a fun, easy-to-use activity and steps challenge platform. Step your way to success with quick onboarding, real-time scoring, and flexible plan options. MoveSpring is used by organizations like Best Buy, Deloitte and the American Cancer Society to make health a priority, and fun, for their employees. 

"},{"children":null,"type":"file","title":"Image","key":"image","id":"pqwL6WhJtB","value":"e0f465f0-1f9a-11eb-a576-4393b78b9c1f-movespring.png","url":"https://cdn.cosmicjs.com/e0f465f0-1f9a-11eb-a576-4393b78b9c1f-movespring.png","imgix_url":"https://imgix.cosmicjs.com/e0f465f0-1f9a-11eb-a576-4393b78b9c1f-movespring.png"}],"type":"parent","title":"Section 1","key":"section_1","id":"TwBe7O5jzz","value":"

MoveSpring is a fun, easy-to-use activity and steps challenge platform. Step your way to success with quick onboarding, real-time scoring, and flexible plan options. MoveSpring is used by organizations like Best Buy, Deloitte and the American Cancer Society to make health a priority, and fun, for their employees. 

"},{"children":[{"children":null,"type":"html-textarea","title":"Text","key":"text","id":"r78jSOlzNp","value":"

MoveSpring manages multiple content resource sections for its users, broken out by Product, Wellness, Tips and Tricks as well as Technology. The team needed a way to easily add blog and help sections that a non-technical content creator could manage. They were able to quickly model and create their content, integrate the content with their website and add their content creators to start publishing and managing dynamic content. 

"},{"children":null,"type":"file","title":"Image","key":"image","id":"2CRcEDaXJ2","value":"42b3f020-1f9c-11eb-a576-4393b78b9c1f-team.png","url":"https://cdn.cosmicjs.com/42b3f020-1f9c-11eb-a576-4393b78b9c1f-team.png","imgix_url":"https://imgix.cosmicjs.com/42b3f020-1f9c-11eb-a576-4393b78b9c1f-team.png"}],"type":"parent","title":"Section 2","key":"section_2","id":"JbcAbuX0wu","value":"

MoveSpring manages multiple content resource sections for its users, broken out by Product, Wellness, Tips and Tricks as well as Technology. The team needed a way to easily add blog and help sections that a non-technical content creator could manage. They were able to quickly model and create their content, integrate the content with their website and add their content creators to start publishing and managing dynamic content. 

"},{"children":[{"children":null,"type":"file","title":"Image","key":"image","id":"lxMSbXsSvQ","value":"4dc83350-1f9b-11eb-a576-4393b78b9c1f-John-Contreras.jpeg","url":"https://cdn.cosmicjs.com/4dc83350-1f9b-11eb-a576-4393b78b9c1f-John-Contreras.jpeg","imgix_url":"https://imgix.cosmicjs.com/4dc83350-1f9b-11eb-a576-4393b78b9c1f-John-Contreras.jpeg"},{"children":null,"type":"textarea","title":"Text","key":"text","id":"FlfrjYTon9","value":"We previously used WordPress for our blog content, but found that we really wanted to utilize the same toolset (React / GraphQL) and have the same look and feel as the rest of our site, which can be challenging for a developer not familiar with WordPress. \n\nAdditionally, we have other dynamic content we would like our Customer Success Managers and Sales team to drive without relying on our development team to build and deploy. After discovering Cosmic, our developer was able to get our new blog up and running within days. Cosmic worked exactly how we hoped it would."},{"children":null,"type":"text","title":"Author","key":"author","id":"I1y4yfT7Of","value":"John Contreras, CEO"}],"type":"parent","title":"Testimonial Section","key":"testimonial_section","id":"TOlF3GXLxt","value":"We previously used WordPress for our blog content, but found that we really wanted to utilize the same toolset (React / GraphQL) and have the same look and feel as the rest of our site, which can be challenging for a developer not familiar with WordPress. \n\nAdditionally, we have other dynamic content we would like our Customer Success Managers and Sales team to drive without relying on our development team to build and deploy. After discovering Cosmic, our developer was able to get our new blog up and running within days. Cosmic worked exactly how we hoped it would."},{"children":null,"type":"text","title":"Industry","key":"industry","id":"uWOXKIBnXj","value":"Health and Wellness"},{"children":null,"type":"text","title":"Product","key":"product","id":"5pDXNqBsgc","value":"Mobile App"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"customers","created":"2020-11-05T20:32:29.952Z","created_at":"2020-11-05T20:32:29.952Z","modified_at":"2020-11-05T20:33:41.175Z","status":"published","locale":null,"modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-11-05T20:32:35.995Z","unpublish_at":null,"thumbnail":"https://imgix.cosmicjs.com/30041d20-1f9b-11eb-a576-4393b78b9c1f-movespring-mobile.jpeg","order":5,"metadata":{"logo":{"url":"https://cdn.cosmicjs.com/f845bad0-4678-11e9-8449-05a08cc194da-movespringlogoblue.svg","imgix_url":"https://imgix.cosmicjs.com/f845bad0-4678-11e9-8449-05a08cc194da-movespringlogoblue.svg"},"seo_description":"MoveSpring is a fun, easy-to-use activity and steps challenge platform. Step your way to success with quick onboarding, real-time scoring, and flexible plan options.","brand_color":"#4f9cfb","background_image":{"url":"https://cdn.cosmicjs.com/1f12f4a0-1f9b-11eb-a576-4393b78b9c1f-movespring-screens.png","imgix_url":"https://imgix.cosmicjs.com/1f12f4a0-1f9b-11eb-a576-4393b78b9c1f-movespring-screens.png"},"main_image":{"url":"https://cdn.cosmicjs.com/30041d20-1f9b-11eb-a576-4393b78b9c1f-movespring-mobile.jpeg","imgix_url":"https://imgix.cosmicjs.com/30041d20-1f9b-11eb-a576-4393b78b9c1f-movespring-mobile.jpeg"},"section_1":{"text":"

MoveSpring is a fun, easy-to-use activity and steps challenge platform. Step your way to success with quick onboarding, real-time scoring, and flexible plan options. MoveSpring is used by organizations like Best Buy, Deloitte and the American Cancer Society to make health a priority, and fun, for their employees. 

","image":{"url":"https://cdn.cosmicjs.com/e0f465f0-1f9a-11eb-a576-4393b78b9c1f-movespring.png","imgix_url":"https://imgix.cosmicjs.com/e0f465f0-1f9a-11eb-a576-4393b78b9c1f-movespring.png"}},"section_2":{"text":"

MoveSpring manages multiple content resource sections for its users, broken out by Product, Wellness, Tips and Tricks as well as Technology. The team needed a way to easily add blog and help sections that a non-technical content creator could manage. They were able to quickly model and create their content, integrate the content with their website and add their content creators to start publishing and managing dynamic content. 

","image":{"url":"https://cdn.cosmicjs.com/42b3f020-1f9c-11eb-a576-4393b78b9c1f-team.png","imgix_url":"https://imgix.cosmicjs.com/42b3f020-1f9c-11eb-a576-4393b78b9c1f-team.png"}},"testimonial_section":{"image":{"url":"https://cdn.cosmicjs.com/4dc83350-1f9b-11eb-a576-4393b78b9c1f-John-Contreras.jpeg","imgix_url":"https://imgix.cosmicjs.com/4dc83350-1f9b-11eb-a576-4393b78b9c1f-John-Contreras.jpeg"},"text":"We previously used WordPress for our blog content, but found that we really wanted to utilize the same toolset (React / GraphQL) and have the same look and feel as the rest of our site, which can be challenging for a developer not familiar with WordPress. \n\nAdditionally, we have other dynamic content we would like our Customer Success Managers and Sales team to drive without relying on our development team to build and deploy. After discovering Cosmic, our developer was able to get our new blog up and running within days. Cosmic worked exactly how we hoped it would.","author":"John Contreras, CEO"},"industry":"Health and Wellness","product":"Mobile App"}},{"_id":"5ca0564b592d422e61a72605","order":5,"slug":"imgix","title":"imgix","content":"","metafields":[{"children":null,"type":"text","title":"Link","key":"link","id":"AZwNXIoMwl","value":"https://cosmicjs.com/extensions/imgix-editor"},{"children":null,"type":"file","title":"Image","key":"image","id":"ollf7eKIZ0","value":"c26408b0-8ed7-11ea-910b-435199f15a39-imgix.jpg","url":"https://cdn.cosmicjs.com/c26408b0-8ed7-11ea-910b-435199f15a39-imgix.jpg","imgix_url":"https://imgix.cosmicjs.com/c26408b0-8ed7-11ea-910b-435199f15a39-imgix.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"integrations","created_at":"2019-03-31T05:55:23.909Z","created_by":"5357ef811693be2118000001","created":"2019-03-31T05:55:23.909Z","status":"published","published_at":"2020-05-05T13:53:13.412Z","modified_at":"2020-05-05T13:53:13.412Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"metadata":{"link":"https://cosmicjs.com/extensions/imgix-editor","image":{"url":"https://cdn.cosmicjs.com/c26408b0-8ed7-11ea-910b-435199f15a39-imgix.jpg","imgix_url":"https://imgix.cosmicjs.com/c26408b0-8ed7-11ea-910b-435199f15a39-imgix.jpg"}}},{"_id":"5b450b580cfaf8031d40578e","order":5,"slug":"gatsby-cms","title":"Gatsby CMS","content":"

Gatsby CMS Templates

You can use our Gatsby CMS Templates, which includes Gatsby CMS GitHub code examples.

Gatsby CMS Dashboard

Cosmic offers a Headless CMS to enable your team to build apps faster. Developers get powerful API tools, and content creators get an intuitive content management dashboard. Get started free.

","metafields":[{"children":null,"type":"file","title":"Image","key":"image","id":"ZaqnFiq062","value":"17c79a80-cf72-11ea-a03b-a9b51dcc4b0e-gatsby-cms.svg","url":"https://cdn.cosmicjs.com/17c79a80-cf72-11ea-a03b-a9b51dcc4b0e-gatsby-cms.svg","imgix_url":"https://imgix.cosmicjs.com/17c79a80-cf72-11ea-a03b-a9b51dcc4b0e-gatsby-cms.svg"},{"children":null,"type":"file","title":"Thumbnail","key":"thumbnail","id":"vK0c1hXNj1","value":"17c79a80-cf72-11ea-a03b-a9b51dcc4b0e-gatsby-cms.svg","url":"https://cdn.cosmicjs.com/17c79a80-cf72-11ea-a03b-a9b51dcc4b0e-gatsby-cms.svg","imgix_url":"https://imgix.cosmicjs.com/17c79a80-cf72-11ea-a03b-a9b51dcc4b0e-gatsby-cms.svg"},{"children":null,"type":"html-textarea","title":"Blurb","key":"blurb","id":"CfHSJxgzY3","value":"

Cosmic is the best CMS for Gatsby websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

"},{"children":null,"type":"text","title":"Headline","key":"headline","id":"sVMM82hPRy","value":"Gatsby"},{"children":null,"type":"text","title":"SEO Description","key":"seo_description","id":"zCXfE4Gyt9","value":"Cosmic is the best CMS for Gatsby websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators."},{"children":null,"type":"file","title":"Twitter Card Image","key":"twitter_card_image","id":"fI5S1u9CR1","value":"00fc1180-fd2c-11eb-aaf9-c7d10ae67fc2-Cosmic-Gatsby-CMS.png","url":"https://cdn.cosmicjs.com/00fc1180-fd2c-11eb-aaf9-c7d10ae67fc2-Cosmic-Gatsby-CMS.png","imgix_url":"https://imgix.cosmicjs.com/00fc1180-fd2c-11eb-aaf9-c7d10ae67fc2-Cosmic-Gatsby-CMS.png"},{"children":null,"type":"html-textarea","title":"Code Example","key":"code_example","id":"xJ8j4o1ktC","value":""},{"children":null,"type":"text","title":"SEO Title","key":"seo_title","id":"srVS40iQ4T","value":"Best Headless CMS for Gatsby"},{"children":[{"type":"repeating_item","children":[{"title":"Title","key":"title","value":"Using Cosmic as a Headless CMS with Gatsby","type":"text","required":false},{"title":"Link","key":"link","value":"https://www.youtube.com/embed/Qls5frYlJeI?showinfo=0&wmode=opaque&widget_referrer=https%3A%2F%2Fwww.cosmicjs.com%2Fknowledge-base%2Freact-cms&enablejsapi=1&origin=https%3A%2F%2Fcdn.embedly.com&widgetid=1","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Title","key":"title","value":"Build a Cosmic-powered blog using Gatsby","type":"text","required":false},{"title":"Link","key":"link","value":"https://www.youtube.com/embed/mGcAWs1xRnY?showinfo=0&wmode=opaque&widget_referrer=https%3A%2F%2Fwww.cosmicjs.com%2Fknowledge-base%2Freact-cms&enablejsapi=1&origin=https%3A%2F%2Fcdn.embedly.com&widgetid=1","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Title","key":"title","value":"Webinar: Localization with Cosmic and Gatsby","type":"text","required":false},{"title":"Link","key":"link","value":"https://www.youtube.com/embed/16m3wRFPGAY?showinfo=0&wmode=opaque&widget_referrer=https%3A%2F%2Fwww.cosmicjs.com%2Fknowledge-base%2Freact-cms&enablejsapi=1&origin=https%3A%2F%2Fcdn.embedly.com&widgetid=1","type":"text","required":false}]}],"type":"repeater","title":"Videos","key":"videos","id":"TQNXHqHIy1","value":"Using Cosmic as a Headless CMS with Gatsby","repeater_fields":[{"title":"Title","key":"title","value":"","type":"text","required":false},{"title":"Link","key":"link","value":"","type":"text","required":false}]},{"children":null,"type":"text","title":"Apps Search Term","key":"apps_search_term","id":"lKUHXkU3KV","value":""},{"children":null,"type":"text","title":"Articles Search Term","key":"articles_search_term","id":"EO80afZlN5","value":""},{"children":null,"type":"text","title":"Page Overview Title","key":"page_overview_title","id":"Ulxp7GzueH","value":""},{"children":null,"type":"html-textarea","title":"Page Overview","key":"page_overview","id":"8JsGitDZdv","value":""},{"children":null,"type":"html-textarea","title":"SEO Content","key":"seo_content","id":"c8JLXEEdLy","value":""},{"children":[],"type":"repeater","title":"Apps","key":"apps","id":"F9KSXqc93G","value":"","repeater_fields":[{"title":"App Slug","key":"app_slug","value":"","type":"text","required":false}]},{"children":[],"type":"repeater","title":"Articles","key":"articles","id":"SHeNrwPsri","value":"","repeater_fields":[{"title":"Article Slug","key":"article_slug","value":"","type":"text","required":false}]}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"kb-articles","created_at":"2017-04-22T23:09:01.747Z","created_by":"5357ef811693be2118000001","created":"2018-07-10T19:39:04.763Z","status":"published","modified_at":"2021-08-14T18:18:23.200Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2021-08-14T18:18:23.200Z","unpublish_at":null,"metadata":{"image":{"url":"https://cdn.cosmicjs.com/17c79a80-cf72-11ea-a03b-a9b51dcc4b0e-gatsby-cms.svg","imgix_url":"https://imgix.cosmicjs.com/17c79a80-cf72-11ea-a03b-a9b51dcc4b0e-gatsby-cms.svg"},"thumbnail":{"url":"https://cdn.cosmicjs.com/17c79a80-cf72-11ea-a03b-a9b51dcc4b0e-gatsby-cms.svg","imgix_url":"https://imgix.cosmicjs.com/17c79a80-cf72-11ea-a03b-a9b51dcc4b0e-gatsby-cms.svg"},"blurb":"

Cosmic is the best CMS for Gatsby websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

","headline":"Gatsby","seo_description":"Cosmic is the best CMS for Gatsby websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.","twitter_card_image":{"url":"https://cdn.cosmicjs.com/00fc1180-fd2c-11eb-aaf9-c7d10ae67fc2-Cosmic-Gatsby-CMS.png","imgix_url":"https://imgix.cosmicjs.com/00fc1180-fd2c-11eb-aaf9-c7d10ae67fc2-Cosmic-Gatsby-CMS.png"},"code_example":"","seo_title":"Best Headless CMS for Gatsby","videos":[{"title":"Using Cosmic as a Headless CMS with Gatsby","link":"https://www.youtube.com/embed/Qls5frYlJeI?showinfo=0&wmode=opaque&widget_referrer=https%3A%2F%2Fwww.cosmicjs.com%2Fknowledge-base%2Freact-cms&enablejsapi=1&origin=https%3A%2F%2Fcdn.embedly.com&widgetid=1"},{"title":"Build a Cosmic-powered blog using Gatsby","link":"https://www.youtube.com/embed/mGcAWs1xRnY?showinfo=0&wmode=opaque&widget_referrer=https%3A%2F%2Fwww.cosmicjs.com%2Fknowledge-base%2Freact-cms&enablejsapi=1&origin=https%3A%2F%2Fcdn.embedly.com&widgetid=1"},{"title":"Webinar: Localization with Cosmic and Gatsby","link":"https://www.youtube.com/embed/16m3wRFPGAY?showinfo=0&wmode=opaque&widget_referrer=https%3A%2F%2Fwww.cosmicjs.com%2Fknowledge-base%2Freact-cms&enablejsapi=1&origin=https%3A%2F%2Fcdn.embedly.com&widgetid=1"}],"apps_search_term":"","articles_search_term":"","page_overview_title":"","page_overview":"","seo_content":"","apps":[],"articles":[]}},{"_id":"5f185e5ba4ce590007de290b","order":5,"slug":"disha","title":"Disha Sharma","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"IbUug3RuT1","value":"disha"},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"QhOaNP5Nw8","value":"f2c65180-d8cd-11ea-8d02-d3e2c968eb26-disha.png","url":"https://cdn.cosmicjs.com/f2c65180-d8cd-11ea-8d02-d3e2c968eb26-disha.png","imgix_url":"https://imgix.cosmicjs.com/f2c65180-d8cd-11ea-8d02-d3e2c968eb26-disha.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2020-07-22T15:42:19.367Z","created_by":"5357ef811693be2118000001","modified_at":"2020-09-14T17:45:18.405Z","created":"2020-07-22T15:42:19.367Z","status":"published","published_at":"2020-08-07T16:49:29.355Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"thumbnail":"https://imgix.cosmicjs.com/f2c65180-d8cd-11ea-8d02-d3e2c968eb26-disha.png","metadata":{"username":"disha","profile_picture":{"url":"https://cdn.cosmicjs.com/f2c65180-d8cd-11ea-8d02-d3e2c968eb26-disha.png","imgix_url":"https://imgix.cosmicjs.com/f2c65180-d8cd-11ea-8d02-d3e2c968eb26-disha.png"}}},{"_id":"59e78bc6757934735d0000e9","slug":"usage-licenses","title":"Usage Licenses","content":"

Use of an item (purchased App or Extension)  is bound by the license you purchase. A license grants you a non-exclusive and non-transferable right to use and incorporate the item in your personal or commercial projects. There are several licenses available:


Single Application License

  1. Your use of the item is restricted to a single installation.
  2. You may use the item in work which you are creating for your own purposes or for your client.
  3. You must not incorporate the item in a work which is created for redistribution or resale by you or your client.
  4. The item may not be redistributed or resold.
  5. If the item contains licensed components, those components must only be used within the item and you must not extract and use them on a stand-alone basis.
  6. If the item was created using materials which are the subject of a GNU General Public License (GPL), your use of the item is subject to the terms of the GPL in place of the foregoing conditions (to the extent the GPL applies).


Multiple Applications License

  1. Your use of the item may extend to multiple installations.
  2. You may use the item in work which you are creating for your own purposes or for your clients.
  3. You must not incorporate the item in a work which is created for redistribution or resale by you or your clients.
  4. The item may not be redistributed or resold.
  5. If the item contains licensed components, those components must only be used within the item and you must not extract and use them on a stand-alone basis.
  6. If the item was created using materials which are the subject of a GNU General Public License (GPL), your use of the item is subject to the terms of the GPL in place of the foregoing conditions (to the extent the GPL applies).


Extended License

This license must be purchased if you intend to license, sublicense, redistribute, or resell the final product.

  1. Your use of the item may extend to multiple installations.
  2. You may use the item in work which you are creating for your own purposes or for your clients.
  3. You may license, sublicense, redistribute, or resell the item in the following circumstances:
    1. the item is incorporated into a larger work you have created; or
    2. if you modify the item and resell the end product.
  4. If the item contains licensed components, those components must only be used within the item and you must not extract and use them on a stand-alone basis.
  5. If the item was created using materials which are the subject of a GNU General Public License (GPL), your use of the item is subject to the terms of the GPL in place of the foregoing conditions (to the extent the GPL applies).
","metafields":[],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"pages","created":"2017-10-18T17:13:42.455Z","created_at":"2017-10-18T17:13:42.455Z","modified_at":"2017-10-18T17:13:42.455Z","created_by":"5357ef811693be2118000001","order":5,"metadata":null},{"_id":"636a75e51d16ae000807d31f","order":5,"slug":"global-infrastructure-updates","title":"Global infrastructure updates","content":"

We are pleased to share that we have expanded our global infrastructure to include coverage\r\nof more regions around the globe to ensure greater service reliability and performance. Regions now include:

  1. US West (us-west-2)
  2. US East (us-east-1)
  3. Ireland (eu-west-1)
  4. Australia (ap-southeast-2)

… more regions coming soon


What does this mean?
With this update comes increased resiliency and performance for our global customers.

  1. Resiliency: If there is ever an outage in a region due to an upstream cloud service provider outage (for example if US West goes down) the DNS will automatically route to the nearest regional deployment (US East).
  2. Performance boost: Customers should now notice performance improvements from our dashboard and API (between 2x-3x faster) which should make your dashboard workflows and API requests more responsive and faster wherever you are in the world.


Recent issues
We recently experienced two service outages due to an upstream issue with one of our cloud service providers. Because of an over-dependence on a single region, our dashboard and API (non-cached requests) were down for up to 30 minutes (though cached API\r\nrequests were still reachable). This is unacceptable.


Our response
This is our response to this incident. It fixes this vulnerability to ensure that this issue never happens again as well as brings the performance benefits stated above.


Uptime matters. It matters to our customers and it matters to the Cosmic team. By choosing Cosmic we understand that you are entrusting us with your mission-critical content to be ready when and where you need it. We are committed to constantly improving\r\nour service to continue building your trust with maximum uptime and service reliability. On this solid foundation, we know great things can be built. We are pleased to share this update with you to further help your team build great products together\r\nwith reliable uptime and improved global performance.

Please let me know if you have any questions. Join our community on Slack and follow Cosmic on Twitter for the latest updates.

Tony Spiro
Cosmic CEO

","metafields":[{"children":null,"type":"object","title":"Author","key":"author","id":"HJ3S7aWixP","value":"5768b253163172890e00002c","required":true,"object_type":"authors","object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"children":null,"type":"html-textarea","title":"Teaser","key":"teaser","id":"VhV6x25JaP","value":"

We are pleased to share that we have expanded our global infrastructure to include coverage of more regions around the globe to ensure greater service reliability and performance.

"},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"A84Gug7pez","value":"92d6b810-5f93-11ed-8cf5-3be6a6f9365d-perf.png","url":"https://cdn.cosmicjs.com/92d6b810-5f93-11ed-8cf5-3be6a6f9365d-perf.png","imgix_url":"https://imgix.cosmicjs.com/92d6b810-5f93-11ed-8cf5-3be6a6f9365d-perf.png"},{"children":null,"type":"textarea","title":"SEO Meta Description","key":"seo_meta_description","id":"Ep1iAHXw30","value":"We are pleased to share that we have expanded our global infrastructure to include coverage of more regions around the globe to ensure greater service reliability and performance."},{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"gMZvuFzYG1","value":"2022-11-08"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2022-11-08T15:29:41.731Z","created_by":"5357ef811693be2118000001","modified_at":"2022-11-08T19:04:21.211Z","created":"2022-11-08T15:29:41.731Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/92d6b810-5f93-11ed-8cf5-3be6a6f9365d-perf.png","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2022-11-08T19:04:21.211Z","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

We are pleased to share that we have expanded our global infrastructure to include coverage of more regions around the globe to ensure greater service reliability and performance.

","featured_image":{"url":"https://cdn.cosmicjs.com/92d6b810-5f93-11ed-8cf5-3be6a6f9365d-perf.png","imgix_url":"https://imgix.cosmicjs.com/92d6b810-5f93-11ed-8cf5-3be6a6f9365d-perf.png"},"seo_meta_description":"We are pleased to share that we have expanded our global infrastructure to include coverage of more regions around the globe to ensure greater service reliability and performance.","published_date":"2022-11-08"}},{"_id":"5bad2366a6c4790aab95facf","order":6,"slug":"unsplash","title":"Unsplash","content":"","metafields":[{"value":"https://cosmicjs.com/extensions/unsplash-photos","key":"link","title":"Link","type":"text","children":null},{"value":"5e044590-c284-11e8-ba71-bd5fda05f958-2000px-Logo_of_Unsplash.png","key":"image","title":"Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/5e044590-c284-11e8-ba71-bd5fda05f958-2000px-Logo_of_Unsplash.png","imgix_url":"https://imgix.cosmicjs.com/5e044590-c284-11e8-ba71-bd5fda05f958-2000px-Logo_of_Unsplash.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"integrations","created_at":"2018-09-27T18:37:26.120Z","created_by":"5716b504e9c686d006000073","created":"2018-09-27T18:37:26.120Z","status":"published","published_at":"2018-09-27T18:37:26.120Z","metadata":{"link":"https://cosmicjs.com/extensions/unsplash-photos","image":{"url":"https://cdn.cosmicjs.com/5e044590-c284-11e8-ba71-bd5fda05f958-2000px-Logo_of_Unsplash.png","imgix_url":"https://imgix.cosmicjs.com/5e044590-c284-11e8-ba71-bd5fda05f958-2000px-Logo_of_Unsplash.png"}}},{"_id":"5fa4605151ad8700082812ec","slug":"vuetify","title":"Vuetify","content":"","metafields":[{"children":null,"type":"file","title":"Logo","key":"logo","id":"GwQxfUA6Og","value":"fe54f800-1f9d-11eb-9446-a99141d2db14-vuetify.svg","url":"https://cdn.cosmicjs.com/fe54f800-1f9d-11eb-9446-a99141d2db14-vuetify.svg","imgix_url":"https://imgix.cosmicjs.com/fe54f800-1f9d-11eb-9446-a99141d2db14-vuetify.svg"},{"children":null,"type":"text","title":"SEO Description","key":"seo_description","id":"difVhIqjAw","value":"Vuetify needed to find an API that matched their appreciation for intuitive design, and integrated all the flexible features they required. After evaluating their options, nothing seemed like the right combination of those values for Vuetify, except for Cosmic."},{"children":null,"type":"text","title":"Brand Color","key":"brand_color","id":"qe2u8dEvrz","value":"#1867c0"},{"children":null,"type":"file","title":"Background Image","key":"background_image","id":"BNLCkGYZEP","value":"b22e6190-1f9e-11eb-9446-a99141d2db14-vuetify-store.png","url":"https://cdn.cosmicjs.com/b22e6190-1f9e-11eb-9446-a99141d2db14-vuetify-store.png","imgix_url":"https://imgix.cosmicjs.com/b22e6190-1f9e-11eb-9446-a99141d2db14-vuetify-store.png"},{"children":null,"type":"text","title":"Industry","key":"industry","id":"elVDK8LTbV","value":"Developer Tools"},{"children":null,"type":"text","title":"Product","key":"product","id":"Icgn6qijcx","value":"Vue.js Component Framework"},{"children":null,"type":"file","title":"Main Image","key":"main_image","id":"TWfMXL3THx","value":"e0ba62d0-1f9d-11eb-9446-a99141d2db14-vuetify.png","url":"https://cdn.cosmicjs.com/e0ba62d0-1f9d-11eb-9446-a99141d2db14-vuetify.png","imgix_url":"https://imgix.cosmicjs.com/e0ba62d0-1f9d-11eb-9446-a99141d2db14-vuetify.png"},{"children":[{"children":null,"type":"file","title":"Image","key":"image","id":"KLR7pg8w08","value":"956ef4b0-1f9f-11eb-9446-a99141d2db14-vuetify-dash-2.png","url":"https://cdn.cosmicjs.com/956ef4b0-1f9f-11eb-9446-a99141d2db14-vuetify-dash-2.png","imgix_url":"https://imgix.cosmicjs.com/956ef4b0-1f9f-11eb-9446-a99141d2db14-vuetify-dash-2.png"},{"children":null,"type":"html-textarea","title":"Text","key":"text","id":"21v6QyDPJQ","value":"

Since its founding in 2016, Vuetify has rapidly grown to become one of the leading component libraries for creating powerful Vue applications. Led by founder John Leider, the Vuetify teams' meticulous focus on creating systems that are intuitive and easy-to-use has allowed them to quickly realize great success in their space.

But in early 2020, Vuetify had a problem. Their online store was completely integrated into Shopify's back-end platform, and getting this API to communicate with the front-end of their website was far too slow and required too many queries.

"}],"type":"parent","title":"Section 1","key":"section_1","id":"2eitBLDAUi","value":"

Since its founding in 2016, Vuetify has rapidly grown to become one of the leading component libraries for creating powerful Vue applications. Led by founder John Leider, the Vuetify teams' meticulous focus on creating systems that are intuitive and easy-to-use has allowed them to quickly realize great success in their space.

But in early 2020, Vuetify had a problem. Their online store was completely integrated into Shopify's back-end platform, and getting this API to communicate with the front-end of their website was far too slow and required too many queries.

"},{"children":[{"children":null,"type":"file","title":"Image","key":"image","id":"vVsGfUVLwt","value":"a09f9980-1f9e-11eb-9446-a99141d2db14-vuetify-dash-1.png","url":"https://cdn.cosmicjs.com/a09f9980-1f9e-11eb-9446-a99141d2db14-vuetify-dash-1.png","imgix_url":"https://imgix.cosmicjs.com/a09f9980-1f9e-11eb-9446-a99141d2db14-vuetify-dash-1.png"},{"children":null,"type":"html-textarea","title":"Text","key":"text","id":"HbS6OIpYJ0","value":"

On top of that, due to Vuetify's rapid expansion in recent years, they were now managing all different kinds of documents, affiliate links, and sponsors in their original code base. This was quickly becoming sub-optimal. Vuetify needed to find an API that matched their appreciation for intuitive design, and integrated all the flexible features they required. After evaluating their options, nothing seemed like the right combination of those values for Vuetify, except for Cosmic.

"}],"type":"parent","title":"Section 2","key":"section_2","id":"8GEkPxSbIy","value":"

On top of that, due to Vuetify's rapid expansion in recent years, they were now managing all different kinds of documents, affiliate links, and sponsors in their original code base. This was quickly becoming sub-optimal. Vuetify needed to find an API that matched their appreciation for intuitive design, and integrated all the flexible features they required. After evaluating their options, nothing seemed like the right combination of those values for Vuetify, except for Cosmic.

"},{"children":[{"children":null,"type":"file","title":"Image","key":"image","id":"BVPxhRNuRc","value":"ba9266f0-1f9f-11eb-9446-a99141d2db14-john.jpeg","url":"https://cdn.cosmicjs.com/ba9266f0-1f9f-11eb-9446-a99141d2db14-john.jpeg","imgix_url":"https://imgix.cosmicjs.com/ba9266f0-1f9f-11eb-9446-a99141d2db14-john.jpeg"},{"children":null,"type":"text","title":"Author","key":"author","id":"yCtTrUD8pp","value":"John Leider, Chief Executive Officer"},{"children":null,"type":"textarea","title":"Text","key":"text","id":"VuzYKNz7FA","value":"It was literally 10 to 15 minutes from taking the SDK, to getting the data I needed, to consuming it. We cut our server response time down from 300-400 ms to about 50 ms. Instead of needing to query the Shopify API, now we only need to query Cosmic. The baseline just works out-of-the-box, and there's considerable more information and documentation if you need it."},{"children":null,"type":"textarea","title":"Testimonial Home","key":"testimonial_home","id":"exbexpyc0uphm7bue1sd","object_type":"undefined","value":"\"We cut our server response time down from 300-400 ms to about 50 ms. The Baseline just works out of the box.\""}],"type":"parent","title":"Testimonial Section","key":"testimonial_section","id":"PnRAXzdkfg","value":"John Leider, Chief Executive Officer"},{"children":null,"type":"switch","title":"Featured on Home","key":"featured_on_home","id":"uo2l5VWXlB","value":true,"options":"yes,no"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"customers","created":"2020-11-05T20:28:01.225Z","created_at":"2020-11-05T20:28:01.225Z","modified_at":"2020-12-18T15:20:04.477Z","status":"published","locale":null,"modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-12-18T15:20:04.477Z","unpublish_at":null,"thumbnail":"https://imgix.cosmicjs.com/e0ba62d0-1f9d-11eb-9446-a99141d2db14-vuetify.png","order":6,"metadata":{"logo":{"url":"https://cdn.cosmicjs.com/fe54f800-1f9d-11eb-9446-a99141d2db14-vuetify.svg","imgix_url":"https://imgix.cosmicjs.com/fe54f800-1f9d-11eb-9446-a99141d2db14-vuetify.svg"},"seo_description":"Vuetify needed to find an API that matched their appreciation for intuitive design, and integrated all the flexible features they required. After evaluating their options, nothing seemed like the right combination of those values for Vuetify, except for Cosmic.","brand_color":"#1867c0","background_image":{"url":"https://cdn.cosmicjs.com/b22e6190-1f9e-11eb-9446-a99141d2db14-vuetify-store.png","imgix_url":"https://imgix.cosmicjs.com/b22e6190-1f9e-11eb-9446-a99141d2db14-vuetify-store.png"},"industry":"Developer Tools","product":"Vue.js Component Framework","main_image":{"url":"https://cdn.cosmicjs.com/e0ba62d0-1f9d-11eb-9446-a99141d2db14-vuetify.png","imgix_url":"https://imgix.cosmicjs.com/e0ba62d0-1f9d-11eb-9446-a99141d2db14-vuetify.png"},"section_1":{"image":{"url":"https://cdn.cosmicjs.com/956ef4b0-1f9f-11eb-9446-a99141d2db14-vuetify-dash-2.png","imgix_url":"https://imgix.cosmicjs.com/956ef4b0-1f9f-11eb-9446-a99141d2db14-vuetify-dash-2.png"},"text":"

Since its founding in 2016, Vuetify has rapidly grown to become one of the leading component libraries for creating powerful Vue applications. Led by founder John Leider, the Vuetify teams' meticulous focus on creating systems that are intuitive and easy-to-use has allowed them to quickly realize great success in their space.

But in early 2020, Vuetify had a problem. Their online store was completely integrated into Shopify's back-end platform, and getting this API to communicate with the front-end of their website was far too slow and required too many queries.

"},"section_2":{"image":{"url":"https://cdn.cosmicjs.com/a09f9980-1f9e-11eb-9446-a99141d2db14-vuetify-dash-1.png","imgix_url":"https://imgix.cosmicjs.com/a09f9980-1f9e-11eb-9446-a99141d2db14-vuetify-dash-1.png"},"text":"

On top of that, due to Vuetify's rapid expansion in recent years, they were now managing all different kinds of documents, affiliate links, and sponsors in their original code base. This was quickly becoming sub-optimal. Vuetify needed to find an API that matched their appreciation for intuitive design, and integrated all the flexible features they required. After evaluating their options, nothing seemed like the right combination of those values for Vuetify, except for Cosmic.

"},"testimonial_section":{"image":{"url":"https://cdn.cosmicjs.com/ba9266f0-1f9f-11eb-9446-a99141d2db14-john.jpeg","imgix_url":"https://imgix.cosmicjs.com/ba9266f0-1f9f-11eb-9446-a99141d2db14-john.jpeg"},"author":"John Leider, Chief Executive Officer","text":"It was literally 10 to 15 minutes from taking the SDK, to getting the data I needed, to consuming it. We cut our server response time down from 300-400 ms to about 50 ms. Instead of needing to query the Shopify API, now we only need to query Cosmic. The baseline just works out-of-the-box, and there's considerable more information and documentation if you need it.","testimonial_home":"\"We cut our server response time down from 300-400 ms to about 50 ms. The Baseline just works out of the box.\""},"featured_on_home":true}},{"_id":"58fc0b235161d903690003e1","order":6,"slug":"graphql-cms","title":"GraphQL CMS","content":"

Cosmic JS provides a GraphQL CMS solution that allows you to build efficient apps that only get what they need from the API. Get a feel for GraphQL by taking a spin through our GraphQL Apps and check out the tutorials below.

GraphQL CMS Articles

Developer Community: GraphQL Articles
How to Build a React Website Powered by the Cosmic JS GraphQL API

GraphQL CMS Resources

GraphQL API Documentation
GraphQL Apps
Official JavaScript Client 
Cosmic JS GitHub

Examples

Simple AJAX example:

","metafields":[{"children":null,"type":"file","title":"Image","key":"image","id":"cRhBFFLtt9","value":"c1df5170-27c8-11e7-9631-b17e7278f329-graphql.svg","url":"https://cdn.cosmicjs.com/c1df5170-27c8-11e7-9631-b17e7278f329-graphql.svg","imgix_url":"https://imgix.cosmicjs.com/c1df5170-27c8-11e7-9631-b17e7278f329-graphql.svg"},{"children":null,"type":"file","title":"Thumbnail","key":"thumbnail","id":"xSWDBgGlIw","value":"c1df5170-27c8-11e7-9631-b17e7278f329-graphql.svg","url":"https://cdn.cosmicjs.com/c1df5170-27c8-11e7-9631-b17e7278f329-graphql.svg","imgix_url":"https://imgix.cosmicjs.com/c1df5170-27c8-11e7-9631-b17e7278f329-graphql.svg"},{"children":null,"type":"html-textarea","title":"Blurb","key":"blurb","id":"BPFTZjeq5N","value":"

Cosmic is the best CMS for GraphQL-powered websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers (REST and GraphQL options)  and an intuitive admin dashboard for content creators.

"},{"children":null,"type":"text","title":"Headline","key":"headline","id":"xqvD504oxb","value":"GraphQL"},{"children":null,"type":"text","title":"SEO Description","key":"seo_description","id":"JJWP1kBZF2","value":"Cosmic is the best CMS for GraphQL-powered websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers (REST and GraphQL options) and an intuitive admin dashboard for content creators."},{"children":null,"type":"file","title":"Twitter Card Image","key":"twitter_card_image","id":"oFogxrjQHH","value":"9e3c1eb0-2aca-11e7-ae54-e9a1fc58ec22-graphql.jpg","url":"https://cdn.cosmicjs.com/9e3c1eb0-2aca-11e7-ae54-e9a1fc58ec22-graphql.jpg","imgix_url":"https://imgix.cosmicjs.com/9e3c1eb0-2aca-11e7-ae54-e9a1fc58ec22-graphql.jpg"},{"children":null,"type":"html-textarea","title":"Code Example","key":"code_example","id":"IMqLHIo7vR","value":""},{"children":null,"type":"text","title":"SEO Title","key":"seo_title","id":"3W4ufg8lxO","value":"Best Headless CMS for GraphQL"},{"children":[],"type":"repeater","title":"Videos","key":"videos","id":"frgtgqfrpylludl8pnsi","value":"","repeater_fields":[{"title":"Title","key":"title","value":"","type":"text","required":false},{"title":"Link","key":"link","value":"","type":"text","required":false}]}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"kb-articles","created_at":"2017-04-23T02:02:11.194Z","created_by":"5357ef811693be2118000001","created":"2017-04-23T02:02:11.194Z","status":"published","modified_at":"2020-06-27T19:12:19.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-06-27T19:12:19.885Z","unpublish_at":null,"metadata":{"image":{"url":"https://cdn.cosmicjs.com/c1df5170-27c8-11e7-9631-b17e7278f329-graphql.svg","imgix_url":"https://imgix.cosmicjs.com/c1df5170-27c8-11e7-9631-b17e7278f329-graphql.svg"},"thumbnail":{"url":"https://cdn.cosmicjs.com/c1df5170-27c8-11e7-9631-b17e7278f329-graphql.svg","imgix_url":"https://imgix.cosmicjs.com/c1df5170-27c8-11e7-9631-b17e7278f329-graphql.svg"},"blurb":"

Cosmic is the best CMS for GraphQL-powered websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers (REST and GraphQL options)  and an intuitive admin dashboard for content creators.

","headline":"GraphQL","seo_description":"Cosmic is the best CMS for GraphQL-powered websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers (REST and GraphQL options) and an intuitive admin dashboard for content creators.","twitter_card_image":{"url":"https://cdn.cosmicjs.com/9e3c1eb0-2aca-11e7-ae54-e9a1fc58ec22-graphql.jpg","imgix_url":"https://imgix.cosmicjs.com/9e3c1eb0-2aca-11e7-ae54-e9a1fc58ec22-graphql.jpg"},"code_example":"","seo_title":"Best Headless CMS for GraphQL","videos":[]}},{"_id":"5ef64ed6f3c07a00071076ef","slug":"adobe-experience-manager","title":"Adobe Experience Manager","content":"

Adobe Experience Manager (AEM) describes itself as a comprehensive content management solution for building websites, mobile apps and forms. They offer a hybrid CMS, offering a decoupled CMS or headless-only CMS. However, as it tries to keep up with new pure Headless CMS solutions, it would rather you not use it as a Headless CMS. Cosmic is an alternative to Adobe Experience Manager (AEM) that your developers and content creators will love.


Monolithic vs Headless CMS

Adobe Experience Manager (AEM), as a monolithic CMS, and other older installed CMS systems like it, comes with a coupled front end application layer that requires additional development and maintenance. Cosmic is a Headless CMS meaning that the content API and presentation layer are decoupled which gives your team greater flexibility when it comes to where your content can go.

Cosmic provides everything your team of developers and content creators need: powerful and intuitive APIs for developers, and an easy-to-use dashboard for content creators. We've removed all complexity and CMS maintenance, so your team can focus on building great products faster, together.


But can't Adobe Experience Manager (AEM) go Headless?

Although you CAN use Adobe Experience Manager (AEM) as a Headless CMS, you still have a lot of work to do to bring it up to the level of an optimized CMS system that's truly headless. And along with your application, you will need to maintain the CMS itself, adding more development costs and taking away focus from what really matters: creating great content and user experiences in your main website or app.


Do they recommend going Headless?

Not really and encourage against it (surprise). From their website:

"Experience Manager is a hybrid CMS, giving you the flexibility to be used as a decoupled CMS or headless-only CMS. However, Experience Manager is best used with a hybrid approach that supports channel-centric content management and provides headless CMS functionality at the same time."

And (falsely) claim that going Headless is a challenge for Enterprise:

Speed of execution is the primary drawback. And you can experience issues with asset management, access control and security, workflow management for authoring and publishing, version control, translations, personalization, and more.

","metafields":[{"children":null,"type":"file","title":"Logo","key":"logo","id":"X4WJiFEkYM","value":"9f138fe0-b7e3-11ea-bc3d-59980ac072b1-adobe-experience-manager.png","url":"https://cdn.cosmicjs.com/9f138fe0-b7e3-11ea-bc3d-59980ac072b1-adobe-experience-manager.png","imgix_url":"https://imgix.cosmicjs.com/9f138fe0-b7e3-11ea-bc3d-59980ac072b1-adobe-experience-manager.png"},{"children":null,"type":"textarea","title":"Tech","key":"tech","id":"ybF4wyIh2b","value":"Java, Apache. Database options: MongoDB, Oracle Database, Microsoft SQL Server."},{"children":null,"type":"textarea","title":"Scalability","key":"scalability","id":"MUU1rX5j4E","value":"Does not scale easily. Limited by servers."},{"children":null,"type":"textarea","title":"Security","key":"security","id":"Qd8Bs5Nk1s","value":"You maintain the security yourself."},{"children":null,"type":"textarea","title":"Maintenance","key":"maintenance","id":"I3uDH1hJpD","value":"They deploy, host, and maintain everything for you. Along with your application and content, you need to maintain updates and security for your CMS system."},{"children":null,"type":"textarea","title":"Caching","key":"caching","id":"DjhuHYksnk","value":"No caching included out of the box."},{"children":null,"type":"textarea","title":"Media CDN","key":"media_cdn","id":"81XhI5pdf6","value":"No CDN included out of the box."},{"children":null,"type":"textarea","title":"Image Processing","key":"image_processing","id":"gq576RdZoZ","value":"Manually manage your own image sizes and optimizations."},{"children":null,"type":"textarea","title":"Extendability","key":"extendability","id":"aEg60UwQAE","value":"Possible. Limited. Complicated."},{"children":null,"type":"textarea","title":"Front end","key":"front_end","id":"7MRfSgwkLF","value":"Front end is coupled with backend CMS. Can be made to be Headless."},{"children":null,"type":"textarea","title":"Number of Projects","key":"number_of_projects","id":"ysoDrwp5Se","value":"One login, one website."},{"children":null,"type":"html-textarea","title":"Costs","key":"costs","id":"RAUsuwBToz","value":"

You will need to hire developer resources as this system is WAY complicated and outdated. Average salary of a full-stack developer is $111,600 per year. You may need to hire 1-3 developers to maintain the CMS. Plus the cost of licensing Adobe Experience Manager (AEM) can be astronomical.

"},{"children":null,"type":"text","title":"Vendor Name","key":"vendor_name","id":"VrbOFFDLXI","value":"Adobe Experience Manager (AEM)"},{"children":null,"type":"switch","title":"Include in link list","key":"include_in_link_list","id":"rD9dDRk1rI","value":true,"options":"yes,no"},{"children":null,"type":"text","title":"Cost Value","key":"cost_value","id":"7XCqKArD1n","value":"$523,200+"},{"children":null,"type":"text","title":"Cost Text","key":"cost_text","id":"xHDDQiakJo","value":"per year"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"cms-competitors","created":"2020-06-26T19:39:02.878Z","created_at":"2020-06-26T19:39:02.878Z","modified_at":"2020-06-28T20:52:59.047Z","status":"published","locale":null,"modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-06-28T20:52:59.047Z","unpublish_at":null,"order":6,"metadata":{"logo":{"url":"https://cdn.cosmicjs.com/9f138fe0-b7e3-11ea-bc3d-59980ac072b1-adobe-experience-manager.png","imgix_url":"https://imgix.cosmicjs.com/9f138fe0-b7e3-11ea-bc3d-59980ac072b1-adobe-experience-manager.png"},"tech":"Java, Apache. Database options: MongoDB, Oracle Database, Microsoft SQL Server.","scalability":"Does not scale easily. Limited by servers.","security":"You maintain the security yourself.","maintenance":"They deploy, host, and maintain everything for you. Along with your application and content, you need to maintain updates and security for your CMS system.","caching":"No caching included out of the box.","media_cdn":"No CDN included out of the box.","image_processing":"Manually manage your own image sizes and optimizations.","extendability":"Possible. Limited. Complicated.","front_end":"Front end is coupled with backend CMS. Can be made to be Headless.","number_of_projects":"One login, one website.","costs":"

You will need to hire developer resources as this system is WAY complicated and outdated. Average salary of a full-stack developer is $111,600 per year. You may need to hire 1-3 developers to maintain the CMS. Plus the cost of licensing Adobe Experience Manager (AEM) can be astronomical.

","vendor_name":"Adobe Experience Manager (AEM)","include_in_link_list":true,"cost_value":"$523,200+","cost_text":"per year"}},{"_id":"63d81a9ec17b1f000808178d","order":6,"slug":"new-dashboard-private-beta-and-api-v3-release","title":"New dashboard private beta and API v3 release","content":"

We are excited to announce the release of the new dashboard in private beta along with the API v3. This release has been a long time in the making and we are looking forward to helping you upgrade to the new dashboard and API for production use. 

Below is a list of changes that you should be aware of. Sign up for the new dashboard to get all of the latest features noted below.


Summary


What’s new?

  1. New Cosmic dashboard now ready for customer upgrades
  2. New Cosmic API version (v3)
  3. New Cosmic NPM module (@next v5.0.0)

We’ve rebuilt the dashboard and the API from the ground up. Importing from dashboard v1 to v2 should be smooth as long as your modeling is compatible. Please note the breaking changes which may require updates to your content modeling to upgrade\r\nto the new versions.


Compatibility checking
In the old dashboard,  go to  Bucket Settings > Import / Export and find the area titled “Dashboard v2 compatibility” to note any compatibility issues that may occur with the migration. These can be fixed in the old dashboard, or in the new dashboard.


🔒 Object Type modeling locked - Potentially breaking

In the old dashboard, Objects could individually have a different content model than the Object type model. This has proven to be an undesired behavior, especially since we rolled out Singleton Object types which better satisfies the use case for unique\r\nObject models.

In the new dashboard, Objects are now strongly typed and strictly connected to the Object type model. This includes when making any changes to keys, adding Metafields, deleting Metafields or updating the order of Metafields.


✅ Metafield modeling restrictions - Potentially  breaking

** Parents are now only allowed at the first level **

We have made updates to allowable Metafield modeling which may break some modeling:

  1. Parent Metafields are now only allowed at the first level. Parent Metafields cannot contain any other Parent Metafields.
  2. Repeater Metafields cannot contain Parent Metafields.


📁 Object type folders - New feature

Object type folders are now available to help you better organize your Object types. This should be a welcome feature for those of you who are using Cosmic to store and manage a lot of different Object types.


📍API updates - Improvements

  1. Depth update
    In the API v3, if you are using the the high-level metadata set in props, you will now need to include the depth parameter to retrieve nested Object data. For example, if you have Blog Posts that have an Object Metafield in the model connected to Authors, to retrieve the Author Object along with Blog Posts, you will need to set the depth parameter to 1.

    depth:0 returns the Object id (string)

    {  \r\n  "title": "My Blog Post",\r\n  "slug": "my-blog-post",\r\n  "metadata": {\r\n    "author": "asdfasdf12341234"\r\n  }\r\n}

    depth:1 returns the nested Object data (object)

    {\r\n  "title": "My Blog Post",\r\n  "slug": "my-blog-post",\r\n  "metadata": {\r\n    "author": {\r\n      "id": "asdfasdf12341234",\r\n      "title": "John Doe",\r\n      "slug": "john-doe"\r\n      ...\r\n    }\r\n  }\r\n}

    The default depth value is 0. This is only applicable if you have metadata included in props without any further name-spaced declarations. Circular references are prohibited.

  2. API Metafield updates

    Objects no longer return metafields from the API, only metadata. You can still get metafields from the Object type from the API.

    Metafield values are now strongly typed, so any Metafields that do not have values set will return as null. For example, if you don’t set a value on a Number Metafield, it will now return null instead of empty string.


🪄 Dashboard - Adding / editing Objects - Improvement

Adding and editing Object Metadata via the API got a lot better.

Before 😫
Before, adding Metadata was cumbersome requiring you to explicitly state all Metafield properties and values when making your edit Object API request.


Now 🥳
Now you only need to include the metadata values. Much simpler and concise.


🖼️ Dashboard - Media Metafield validation - Improvement

We have added new Media Metafield validations to enable you to restrict Media Metafields to images, audio, video, and document file types. Along with granular file type restrictions, you can also include a maximum file size to help guide your content\r\ncreators to optimize your content creation and Bucket file storage.

Media previews are also much improved, giving you the ability to preview video, audio, and PDF files.


🆘 Migration Troubleshooting

There may be issues when you attempt to import from the old dashboard into the new dashboard. Some common issues may be:

  1. Object and Object type Metafields model issues
  2. If importing a Bucket into the new dashboard that previously contained modeling that is not supported, it will be ignored. IE: if you have a Parent inside of a Parent Metafield or any other unsupported Metafield model.


🏗️ Product architecture and pricing updates

The product architecture has been updated to two main usage levels:

  1. Projects
  2. Workspaces


➡️ Features TBD

There are a few features that we are still working on, but are planning on including them in a future release:

  1. Merge Requests
  2. Single Sign On
  3. Workspace subdomain
  4. Mobile dashboard access
  5. CLI connected to API v3


This is a big release for us and we hope you enjoy all of the updates. Sign up for the new dashboard to reserve your spot in line. Follow us on Twitter and join our Slack community to stay up with the latest updates.

","metafields":[{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"sKNJERlB9V","value":"2023-01-31"},{"children":null,"type":"object","title":"Author","key":"author","id":"4x2DuJhBHj","value":"5ffa1d1e0046b0000799cb7b","object_type":"authors","object":{"_id":"5ffa1d1e0046b0000799cb7b","slug":"cosmic","title":"Cosmic","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"ZogvxZg6OL","value":""},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D0qLJ4RPBe","value":"10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2021-01-09T21:16:14.533Z","created_by":"5357ef811693be2118000001","modified_at":"2021-01-09T21:18:26.147Z","created":"2021-01-09T21:16:14.533Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/e55ef990-52bf-11eb-986d-4d7ff5faa3ab-logo.svg","published_at":"2021-01-09T21:18:26.147Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null}},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"nIdg8gne2L","value":"f6579c30-a0cd-11ed-93ee-cb9a2cd68754-private-beta-og.png","url":"https://cdn.cosmicjs.com/f6579c30-a0cd-11ed-93ee-cb9a2cd68754-private-beta-og.png","imgix_url":"https://imgix.cosmicjs.com/f6579c30-a0cd-11ed-93ee-cb9a2cd68754-private-beta-og.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"changelogs","created_at":"2023-01-30T19:29:33.876Z","created_by":"5357ef811693be2118000001","modified_at":"2023-02-26T21:22:53.572Z","created":"2023-01-30T19:29:33.876Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/f6579c30-a0cd-11ed-93ee-cb9a2cd68754-private-beta-og.png","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2023-02-26T21:22:53.572Z","metadata":{"published_date":"2023-01-31","author":{"_id":"5ffa1d1e0046b0000799cb7b","slug":"cosmic","title":"Cosmic","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"ZogvxZg6OL","value":""},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D0qLJ4RPBe","value":"10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2021-01-09T21:16:14.533Z","created_by":"5357ef811693be2118000001","modified_at":"2021-01-09T21:18:26.147Z","created":"2021-01-09T21:16:14.533Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/e55ef990-52bf-11eb-986d-4d7ff5faa3ab-logo.svg","published_at":"2021-01-09T21:18:26.147Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"metadata":{"username":"","profile_picture":{"url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}}},"featured_image":{"url":"https://cdn.cosmicjs.com/f6579c30-a0cd-11ed-93ee-cb9a2cd68754-private-beta-og.png","imgix_url":"https://imgix.cosmicjs.com/f6579c30-a0cd-11ed-93ee-cb9a2cd68754-private-beta-og.png"}}},{"_id":"631fbb3d4f10370009c9a309","order":6,"slug":"new-dashboard-updates-metafields-localization-and-more","title":"New dashboard updates: Metafields, localization, and more","content":"

We're excited to share new dashboard updates and fixes with you. Read below and sign up to get on the waitlist to preview the new dashboard.


🎨 Color and emoji Metafields

Say hello to a couple of new Metafields, color and emoji.

Color Metafield
The color Metafield has been one of our most-requested additions and it's now available! Select a color using a color picker, or simply add any valid HEX value.

Emoji Metafield
Why not? Select from numerous emojis to create even more expressive content 😉 


🌎 Improved localization

We've made some nice quality of life updates to our localization feature. We think you'll agree that the experience of localizing content in the new dashboard is simple and intuitive.


📜 Fixed HTML editor toolbar scrolling

The fixed HTML editor scrolling toolbar makes it easy to update your content with the available tools wherever you are on the page.


🐛 Content model editing fix

We fixed an issue where the model was not being updated when you navigate from editing a Content Type to the Object page. It's fixed now!


🖥️ Try it out

We are on a mission to build the best content management solution in the world. There's more work to do, so if you haven't joined, please sign up to get on the waitlist to try it out during this alpha development phase, and help us by providing your feedback.

We're excited to be closing in on the beta release, the majority of the work ahead is mainly preparing for migration. We will be to sure to let you know soon what steps will be needed (if any) to prepare your projects for the new dashboard.

Follow us on Twitter, subscribe on YouTube, and join our team on Slack to stay in touch with the latest Cosmic news and feature updates.

Sincerely,
Cosmic Team

","metafields":[{"children":null,"type":"object","title":"Author","key":"author","id":"4PVN74VYyw","value":"5ffa1d1e0046b0000799cb7b","required":true,"object_type":"authors","object":{"_id":"5ffa1d1e0046b0000799cb7b","slug":"cosmic","title":"Cosmic","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"ZogvxZg6OL","value":""},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D0qLJ4RPBe","value":"10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2021-01-09T21:16:14.533Z","created_by":"5357ef811693be2118000001","modified_at":"2021-01-09T21:18:26.147Z","created":"2021-01-09T21:16:14.533Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/e55ef990-52bf-11eb-986d-4d7ff5faa3ab-logo.svg","published_at":"2021-01-09T21:18:26.147Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null}},{"children":null,"type":"html-textarea","title":"Teaser","key":"teaser","id":"0gLuTf03lo","value":"

We've released some new features for the new dashboard that we are excited to share with you.

"},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"pq9VCU72en","value":"a3a38e80-94d6-11ec-96f2-43bdd99faa64-new-features.png","url":"https://cdn.cosmicjs.com/a3a38e80-94d6-11ec-96f2-43bdd99faa64-new-features.png","imgix_url":"https://imgix.cosmicjs.com/a3a38e80-94d6-11ec-96f2-43bdd99faa64-new-features.png"},{"children":null,"type":"textarea","title":"SEO Meta Description","key":"seo_meta_description","id":"IvKlvbxvRZ","value":"We've released some new features for the new dashboard that we are excited to share with you."},{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"b3NrFBXrhQ","value":"2022-09-13"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2022-09-12T23:05:33.197Z","created_by":"5357ef811693be2118000001","modified_at":"2022-09-13T17:23:27.384Z","created":"2022-09-12T23:05:33.197Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/a3a38e80-94d6-11ec-96f2-43bdd99faa64-new-features.png","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2022-09-13T17:23:27.384Z","metadata":{"author":{"_id":"5ffa1d1e0046b0000799cb7b","slug":"cosmic","title":"Cosmic","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"ZogvxZg6OL","value":""},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D0qLJ4RPBe","value":"10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2021-01-09T21:16:14.533Z","created_by":"5357ef811693be2118000001","modified_at":"2021-01-09T21:18:26.147Z","created":"2021-01-09T21:16:14.533Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/e55ef990-52bf-11eb-986d-4d7ff5faa3ab-logo.svg","published_at":"2021-01-09T21:18:26.147Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"metadata":{"username":"","profile_picture":{"url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}}},"teaser":"

We've released some new features for the new dashboard that we are excited to share with you.

","featured_image":{"url":"https://cdn.cosmicjs.com/a3a38e80-94d6-11ec-96f2-43bdd99faa64-new-features.png","imgix_url":"https://imgix.cosmicjs.com/a3a38e80-94d6-11ec-96f2-43bdd99faa64-new-features.png"},"seo_meta_description":"We've released some new features for the new dashboard that we are excited to share with you.","published_date":"2022-09-13"}},{"_id":"581a5d0ae107c5410e002931","order":6,"slug":"service-level-agreement","title":"Service Level Agreement","content":"

Service Level Agreement and Uptime Guarantee

Version 1.0 - May 2016

This Cosmic JS Service Level Agreement (“SLA”) between Cosmic JS, Inc. (“Cosmic JS”, “us” or “we”) and users of the Cosmic JS Services (“you”) governs the use of the Cosmic JS API and Web Hosting Services under the provisions of the Cosmic JS Terms of Service (the “Terms”).

Unless otherwise provided herein, this SLA is subject to the provisions of the Terms. Capitalized words and phrases have the meaning specified in the Terms. We reserve the right to change the terms of this SLA in accordance with the Terms.

1. Service Commitment: 99.95% Uptime

Cosmic JS will use commercially reasonable efforts to make the Cosmic JS API and Web Hosting Services available with a Monthly Uptime Percentage of at least 99.95% during any monthly billing cycle (the “Service Commitment”). Subject to the Cosmic JS SLA Exclusions, if we do not meet the Service Commitment, you will be eligible to receive a Service Credit.

A Monthly Uptime Percentage of 99.95% means that we guarantee you will experience no more than 21.56 min/month of Unavailability.

2. Definitions

“Cosmic JS API and Web Hosting Services” mean your data, files and hosted apps and running on Cosmic JS.

“Maintenance” means scheduled Unavailability of the API and Web Hosting Services, as announced by us prior to the API and Web Hosting Services becoming Unavailable.

“Monthly Uptime Percentage” is calculated by subtracting from 100% the percentage of minutes during the month in which the Cosmic JS API and Web Hosting Services were Unavailable. Monthly Uptime Percentage measurements exclude downtime resulting directly or indirectly from any Cosmic JS SLA Exclusion.

“Service Credit” means a credit denominated in US dollars, calculated as set forth below, that we may credit back to an eligible account.

“Unavailable” and “Unavailability” mean:
- For apps, when all of your apps have no external connectivity - For the API, when the Cosmic JS API has no connectivity, as confirmed by our monitoring.

3. Service Commitments and Service Credits

Service Credits are calculated as a percentage of the total charges paid by you (excluding one-time payments, e.g. for training, etc.) for the monthly billing cycle in which the Unavailability occurred in accordance with the schedule below:

We will apply any Service Credits only against future payments for the Services otherwise due from you. At our discretion, we may issue the Service Credit to the credit card you used to pay for the billing cycle in which the Unavailability occurred. Service Credits will not entitle you to any refund or other payment from Cosmic JS. A Service Credit will be applicable and issued only if the credit amount for the applicable monthly billing cycle is greater than one dollar ($1 USD). Service Credits may not be transferred or applied to any other account.

4. Sole Remedy

Unless otherwise provided in the Terms, your sole and exclusive remedy for any unavailability, non-performance, or other failure by us to provide the Cosmic JS API and Web Hosting Services is the receipt of a Service Credit (if eligible) in accordance with the terms of this SLA.

5. Credit Request and Payment Procedures

To receive a Service Credit, you must submit a claim by emailing support@cosmicjs.com. To be eligible, the credit request must be received by us by the end of the second billing cycle after which the incident occurred and must include:

If the Monthly Uptime Percentage of such request is confirmed by us and is less than the Service Commitment, then we will issue the Service Credit to you within one billing cycle following the month in which your request is confirmed by us. Your failure to provide the request and other information as required above will disqualify you from receiving a Service Credit.

6. Cosmic JS SLA Exclusions

The Service Commitment does not apply to any unavailability, suspension or termination of the Cosmic JS API and Web Hosting Services, or any other Cosmic JS API and Web Hosting Service performance issues:
1. That result from a suspension or Remedial Action, as described in the Terms;
2. Caused by factors outside of our reasonable control, including any force majeure event, Internet access, or problems beyond the demarcation point of the Cosmic JS network;
3. That result from any actions or inactions of you or any third party;
4. That result from the equipment, software or other technology of you or any third party (other than third party equipment within our direct control);
5. That result from failures of Cosmic JS API and Web Hosting Services not attributable to Unavailability; or
6. That result from any Maintenance.

If availability is impacted by factors other than those used in our Monthly Uptime Percentage calculation, then we may issue a Service Credit considering such factors at our discretion.

","metafields":[],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"pages","created_at":"2016-11-02T21:39:22.890Z","created_by":"5357ef811693be2118000001","created":"2016-11-02T21:39:22.890Z","status":"published","modified_at":"2016-11-02T22:13:56.265Z","modified_by":"5357ef811693be2118000001","metadata":null},{"_id":"5b4753096d4f364510bf1290","order":6,"slug":"hypometer-technologies-fantasy-insider-and-stats-insider","title":"Hypometer Technologies: Fantasy Insider and Stats Insider","content":"

Hypometer Technologies is revolutionizing the Australian sporting experience by making predictive analytics accessible to the masses. Their next generation sports media platforms are the form guide for every big game, and the go-to sites for trusted predictive analytics.

Historically the team managed content via WordPress, but as they scaled their content WordPress started to bottleneck them. They pivoted to working with the WordPress API, which resulted in slow load times as WordPress would call all assets and return unnecessary data in the API call. 

Recently the tech team was searching for a solution to manage dynamic content for their blogs, Fantasy Insider and Stats Insider. They wanted to remain decoupled from their application's codebase when managing content, so they started researching headless CMS systems. They chose Cosmic due to the simplicity of API integration and the content editing tools that would empower their marketers and writers. 

In addition, Cosmic allowed the Hypometer team to write scripts to migrate existing WordPress post content over to Cosmic for editing and publishing. 


Fantasy Insider

Built On: Python | Angular | Cosmic

Fantasy Insider is the market leader for daily fantasy sports information in Australia, with over half of the active market visiting the site for content or predictive tools each week.



Stats Insider

Built On: Python | Angular | Cosmic

Launched in early 2018, Stats Insider is Australia's first advanced sports analytics and predictive data platform for sports fans, punters and fantasy sports players.

Stats Insider will be providing information and predictions for US sports from August. Stay up to date with them on Twitter.  


"The headless CMS we chose had to tick a lot of boxes. At the end of the day, though, it needed to be easy for our external writers to use. We recorded a quick screencast video internally showing how to set up a piece of content, sent that out to our team, and I haven’t had a question from any of our writers since. We’ve just started to use Cosmic for other things like an activity status bar on Stats Insider which frees up more time for our developers and makes our workflow more flexible.”

— Katie Prowd, Co-Founder of Fantasy Insider

","metafields":[{"value":"Hypometer Technologies","key":"company","title":"Company","type":"text","children":null},{"value":"Fantasy Sports","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Hypometer Technologies is revolutionizing the Australian sporting experience by making predictive analytics accessible to the masses. Their next generation sports media platforms are the form guide for every big game, and the go-to sites for trusted predictive analytics.\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"1818c5e0-8b63-11e8-8b12-1d164d145eab-15122993_1073313959433910_7212266943208762093_o.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/1818c5e0-8b63-11e8-8b12-1d164d145eab-15122993_1073313959433910_7212266943208762093_o.png","imgix_url":"https://imgix.cosmicjs.com/1818c5e0-8b63-11e8-8b12-1d164d145eab-15122993_1073313959433910_7212266943208762093_o.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-12T13:09:29.236Z","created_by":"5716b504e9c686d006000073","created":"2018-07-12T13:09:29.236Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-07-20T13:31:54.633Z","metadata":{"company":"Hypometer Technologies","industry_type":"Fantasy Sports","teaser":"Hypometer Technologies is revolutionizing the Australian sporting experience by making predictive analytics accessible to the masses. Their next generation sports media platforms are the form guide for every big game, and the go-to sites for trusted predictive analytics.\n","logo":{"url":"https://cdn.cosmicjs.com/1818c5e0-8b63-11e8-8b12-1d164d145eab-15122993_1073313959433910_7212266943208762093_o.png","imgix_url":"https://imgix.cosmicjs.com/1818c5e0-8b63-11e8-8b12-1d164d145eab-15122993_1073313959433910_7212266943208762093_o.png"}}},{"_id":"5d235c7c72d8f04604eb204b","slug":"headless-cms-for-emerging-tech","title":"Headless CMS for Emerging Tech","content":"

Teams using the Cosmic Headless CMS are able to model and create content for delivery to all of their websites and apps, including emerging tech like VR and AR, wearables, and more. Manage video, rich text and notifications from the comfort of your Cosmic Bucket Dashboard for a variety of devices. Content is available for reuse once published in the Cosmic Headless CMS, saving teams time and money.

Features like Webhooks, Scheduled Publishing and the Cosmic suite of APIs make integrating with any internet-connected application easy and seamless.

","metafields":[{"children":null,"type":"text","title":"Solution Name","key":"solution_name","id":"4PY7Ii24rW","value":"Emerging Tech"},{"children":null,"type":"file","title":"Image","key":"image","id":"5RSs8cH4D1","value":"52263510-9dc3-11e9-a5b4-e5df9f8049d3-f70db6b0-5abd-11e8-a6f7-cb94a52bca9d-109999224655216202658486799915322872806436o.jpg","url":"https://cdn.cosmicjs.com/52263510-9dc3-11e9-a5b4-e5df9f8049d3-f70db6b0-5abd-11e8-a6f7-cb94a52bca9d-109999224655216202658486799915322872806436o.jpg","imgix_url":"https://imgix.cosmicjs.com/52263510-9dc3-11e9-a5b4-e5df9f8049d3-f70db6b0-5abd-11e8-a6f7-cb94a52bca9d-109999224655216202658486799915322872806436o.jpg"},{"children":null,"type":"objects","title":"Case Studies","key":"case_studies","id":"oklU2lXQye","value":"59663607a6a3f55962000e40,5ade6e0e2b218820ec24bff1,5a72248572c6845e0d90b5d5","object_type":"case-studies","objects":[{"_id":"59663607a6a3f55962000e40","slug":"big-fish-launches-marketing-and-tutorial-content-for-games","title":"Big Fish Launches Marketing and Tutorial Content for Games","content":"

When Big Fish launches a new game for iOS, Android, or Web, they use a marketing landing page to promote the launch. Big Fish wanted their game studios to have the ability to curate and update content on each of their landing pages. Other CMS systems weren’t as flexible enough for their needs. Cosmic provides Big Fish with more creative freedom to build landing pages while allowing game studios to make updates on their own.




"We use Cosmic buckets for each of our mobile game landing pages. While our API and storage usage is low, the number of buckets we need is high, which makes the new Clusters Feature a perfect solution for our company use cases. It allows us to\r\nhave a single consolidated invoice, with an overall API and data-limit, but up to 35 buckets for our use."

— Jessica Chappell, Web Developer 

Read more about Big Fish and their games.

","metafields":[{"value":"Big Fish","key":"company","title":"Company","type":"text","children":null},{"value":"Gaming","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"When Big Fish launches a new game for iOS, Android, or Web, they use a marketing landing page to promote the launch. Other CMS systems weren’t as flexible enough for their needs. Cosmic provides Big Fish with more creative freedom to build landing pages while allowing game studios to make updates on their own.\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png","imgix_url":"https://imgix.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created":"2017-07-12T14:45:27.402Z","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","status":"published","publish_at":null,"published_at":"2018-11-08T23:15:38.911Z"},{"_id":"5ade6e0e2b218820ec24bff1","slug":"medical-realities-delivers-vr-surgical-content","title":"Medical Realities Delivers VR Surgical Content","content":"

The Medical Realties Platform is a technology powerhouse designed to deliver realism and immersion. Delivering high-quality surgical training using Virtual Reality, Medical Realities lets you become immersed while world-class surgeons teach their interactive modules, which includes 360-degree 4K video and a testing system within the application. 



The Medical Realities team needed a way for educators (non-technical editors) to manage content that could be served to VR headsets for consumption by trainees, so they chose Cosmic to manage and deliver their content from the cloud through an API. 



"Cosmic allowed us to easily spin up content models that would allow our non-technical editors to manage the most sophisticated medical VR content out there. Our developers were equipped with robust Docs and Example Apps to get them started and were able to use the bleeding-edge frameworks necessary to run Virtual Reality."

— Joe Marritt, Lead Web Developer 

","metafields":[{"value":"Medical Realities","key":"company","title":"Company","type":"text","children":null},{"value":"Healthcare and Virtual Reality ","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"The Medical Realties Platform is a technology powerhouse designed to deliver realism and immersion. Delivering high-quality surgical training using Virtual Reality, Medical Realities lets you become immersed while world-class surgeons teach their interactive modules, which includes 360-degree 4K video and a testing system within the application. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"0a95ad50-474f-11e8-b969-053c57b3610c-medical-realities-1.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/0a95ad50-474f-11e8-b969-053c57b3610c-medical-realities-1.png","imgix_url":"https://imgix.cosmicjs.com/0a95ad50-474f-11e8-b969-053c57b3610c-medical-realities-1.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-04-23T23:36:46.885Z","created_by":"5716b504e9c686d006000073","created":"2018-04-23T23:36:46.885Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-05-18T17:07:50.800Z"},{"_id":"5a72248572c6845e0d90b5d5","slug":"unleashed-xr-augmented-mixed-and-virtual-realities","title":"Unleashed XR: Augmented, Mixed and Virtual Realities","content":"


The Unleashed XR team designs and develops augmented reality, mixed reality and virtual reality solutions for a range of clients across industries. XR (extended reality) is the term referring to the full spectrum from reality to complete virtual environments. Through a structured design thinking process, Unleashed XR designs and develops applications that meet the unique needs of their clients. Unleashed XR is driven by ensuring their services have a tangible positive impact on their clients, making activities, processes and experiences superior, more efficient, cheaper and safer.

Unleashed XR needed a new blog that allowed developers, editors and contributors to collaborate in the cloud, so they chose Cosmic. They plan on re-vamping the website of their sister business, Unleashed VR, using Cosmic's powerful tools in the near future.

"We just launched our new website which utilizes the power of Cosmic. Cosmic was a huge help in the setup of our blog, particularly the Media management, which Cosmic proved invaluable for in respect to optimizing videos and images. Additionally we were able to use Cosmic to stream our videos straight to a Unity Mobile application that we are working on as well. This was great in optimizing the speed of the app, and we're looking forward to integrating Cosmic in as many ways as possible."

— Tyler Smith, Lead Software Developer  

","metafields":[{"value":"Unleashed XR","key":"company","title":"Company","type":"text","children":null},{"value":"Virtual Reality Software","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"The Unleashed XR team designs and develops augmented reality, mixed reality and virtual reality solutions for a range of clients across industries. Unleashed XR needed a new blog that allowed developers, editors and contributors to collaborate in the cloud, so they chose Cosmic.","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"a9fd29f0-0702-11e8-a43c-e17c6c324439-Logo&Name_PurpleUnleashedXR.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/a9fd29f0-0702-11e8-a43c-e17c6c324439-Logo&Name_PurpleUnleashedXR.png","imgix_url":"https://imgix.cosmicjs.com/a9fd29f0-0702-11e8-a43c-e17c6c324439-Logo&Name_PurpleUnleashedXR.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-01-31T20:18:13.948Z","created_by":"5716b504e9c686d006000073","created":"2018-01-31T20:18:13.948Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5357ef811693be2118000001","publish_at":null}]},{"children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"vue-rpg-game","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"cosmic-messenger","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"vue-garage-sale","type":"text","required":false}]}],"type":"repeater","title":"App Slugs","key":"app_slugs","id":"w89uw0EXLa","value":"vue-rpg-game","repeater_fields":"\"\"\"\"\"[{\"title\":\"Slug\",\"key\":\"slug\",\"value\":\"\",\"type\":\"text\",\"required\":false}]\"\"\"\"\""},{"children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"wordpress-importer","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"mux-videos","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"imgix-editor","type":"text","required":false}]}],"type":"repeater","title":"Extension Slugs","key":"extension_slugs","id":"goy5SJqroE","value":"wordpress-importer","repeater_fields":"\"\"\"\"\"[{\"title\":\"Slug\",\"key\":\"slug\",\"value\":\"\",\"type\":\"text\",\"required\":false}]\"\"\"\"\""},{"children":null,"type":"html-textarea","title":"Testimonial","key":"testimonial","id":"8sEONWPVzB","value":"

"Cosmic allowed us to easily spin up content models that would allow our non-technical editors to manage the most sophisticated medical VR content out there. Our developers were equipped with robust Docs and Example Apps to get them started and were able to use the bleeding-edge frameworks necessary to run Virtual Reality."

"},{"children":null,"type":"text","title":"Testimonial Credit","key":"testimonial_credit","id":"L4MNfBlGeH","value":"Joe Marritt, Lead Web Developer at Medical Realities"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"solutions","created":"2019-07-08T15:08:44.006Z","created_at":"2019-07-08T15:08:44.006Z","modified_at":"2020-08-10T14:05:12.245Z","status":"published","locale":null,"published_at":"2020-05-06T05:32:59.830Z","modified_by":"5357ef811693be2118000001","publish_at":null,"order":6,"unpublish_at":null,"metadata":{"solution_name":"Emerging Tech","image":{"url":"https://cdn.cosmicjs.com/52263510-9dc3-11e9-a5b4-e5df9f8049d3-f70db6b0-5abd-11e8-a6f7-cb94a52bca9d-109999224655216202658486799915322872806436o.jpg","imgix_url":"https://imgix.cosmicjs.com/52263510-9dc3-11e9-a5b4-e5df9f8049d3-f70db6b0-5abd-11e8-a6f7-cb94a52bca9d-109999224655216202658486799915322872806436o.jpg"},"case_studies":[{"_id":"59663607a6a3f55962000e40","slug":"big-fish-launches-marketing-and-tutorial-content-for-games","title":"Big Fish Launches Marketing and Tutorial Content for Games","content":"

When Big Fish launches a new game for iOS, Android, or Web, they use a marketing landing page to promote the launch. Big Fish wanted their game studios to have the ability to curate and update content on each of their landing pages. Other CMS systems weren’t as flexible enough for their needs. Cosmic provides Big Fish with more creative freedom to build landing pages while allowing game studios to make updates on their own.




"We use Cosmic buckets for each of our mobile game landing pages. While our API and storage usage is low, the number of buckets we need is high, which makes the new Clusters Feature a perfect solution for our company use cases. It allows us to\r\nhave a single consolidated invoice, with an overall API and data-limit, but up to 35 buckets for our use."

— Jessica Chappell, Web Developer 

Read more about Big Fish and their games.

","metafields":[{"value":"Big Fish","key":"company","title":"Company","type":"text","children":null},{"value":"Gaming","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"When Big Fish launches a new game for iOS, Android, or Web, they use a marketing landing page to promote the launch. Other CMS systems weren’t as flexible enough for their needs. Cosmic provides Big Fish with more creative freedom to build landing pages while allowing game studios to make updates on their own.\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png","imgix_url":"https://imgix.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created":"2017-07-12T14:45:27.402Z","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","status":"published","publish_at":null,"published_at":"2018-11-08T23:15:38.911Z","metadata":{"company":"Big Fish","industry_type":"Gaming","teaser":"When Big Fish launches a new game for iOS, Android, or Web, they use a marketing landing page to promote the launch. Other CMS systems weren’t as flexible enough for their needs. Cosmic provides Big Fish with more creative freedom to build landing pages while allowing game studios to make updates on their own.\n","logo":{"url":"https://cdn.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png","imgix_url":"https://imgix.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png"}}},{"_id":"5ade6e0e2b218820ec24bff1","slug":"medical-realities-delivers-vr-surgical-content","title":"Medical Realities Delivers VR Surgical Content","content":"

The Medical Realties Platform is a technology powerhouse designed to deliver realism and immersion. Delivering high-quality surgical training using Virtual Reality, Medical Realities lets you become immersed while world-class surgeons teach their interactive modules, which includes 360-degree 4K video and a testing system within the application. 



The Medical Realities team needed a way for educators (non-technical editors) to manage content that could be served to VR headsets for consumption by trainees, so they chose Cosmic to manage and deliver their content from the cloud through an API. 



"Cosmic allowed us to easily spin up content models that would allow our non-technical editors to manage the most sophisticated medical VR content out there. Our developers were equipped with robust Docs and Example Apps to get them started and were able to use the bleeding-edge frameworks necessary to run Virtual Reality."

— Joe Marritt, Lead Web Developer 

","metafields":[{"value":"Medical Realities","key":"company","title":"Company","type":"text","children":null},{"value":"Healthcare and Virtual Reality ","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"The Medical Realties Platform is a technology powerhouse designed to deliver realism and immersion. Delivering high-quality surgical training using Virtual Reality, Medical Realities lets you become immersed while world-class surgeons teach their interactive modules, which includes 360-degree 4K video and a testing system within the application. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"0a95ad50-474f-11e8-b969-053c57b3610c-medical-realities-1.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/0a95ad50-474f-11e8-b969-053c57b3610c-medical-realities-1.png","imgix_url":"https://imgix.cosmicjs.com/0a95ad50-474f-11e8-b969-053c57b3610c-medical-realities-1.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-04-23T23:36:46.885Z","created_by":"5716b504e9c686d006000073","created":"2018-04-23T23:36:46.885Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-05-18T17:07:50.800Z","metadata":{"company":"Medical Realities","industry_type":"Healthcare and Virtual Reality ","teaser":"The Medical Realties Platform is a technology powerhouse designed to deliver realism and immersion. Delivering high-quality surgical training using Virtual Reality, Medical Realities lets you become immersed while world-class surgeons teach their interactive modules, which includes 360-degree 4K video and a testing system within the application. \n","logo":{"url":"https://cdn.cosmicjs.com/0a95ad50-474f-11e8-b969-053c57b3610c-medical-realities-1.png","imgix_url":"https://imgix.cosmicjs.com/0a95ad50-474f-11e8-b969-053c57b3610c-medical-realities-1.png"}}},{"_id":"5a72248572c6845e0d90b5d5","slug":"unleashed-xr-augmented-mixed-and-virtual-realities","title":"Unleashed XR: Augmented, Mixed and Virtual Realities","content":"


The Unleashed XR team designs and develops augmented reality, mixed reality and virtual reality solutions for a range of clients across industries. XR (extended reality) is the term referring to the full spectrum from reality to complete virtual environments. Through a structured design thinking process, Unleashed XR designs and develops applications that meet the unique needs of their clients. Unleashed XR is driven by ensuring their services have a tangible positive impact on their clients, making activities, processes and experiences superior, more efficient, cheaper and safer.

Unleashed XR needed a new blog that allowed developers, editors and contributors to collaborate in the cloud, so they chose Cosmic. They plan on re-vamping the website of their sister business, Unleashed VR, using Cosmic's powerful tools in the near future.

"We just launched our new website which utilizes the power of Cosmic. Cosmic was a huge help in the setup of our blog, particularly the Media management, which Cosmic proved invaluable for in respect to optimizing videos and images. Additionally we were able to use Cosmic to stream our videos straight to a Unity Mobile application that we are working on as well. This was great in optimizing the speed of the app, and we're looking forward to integrating Cosmic in as many ways as possible."

— Tyler Smith, Lead Software Developer  

","metafields":[{"value":"Unleashed XR","key":"company","title":"Company","type":"text","children":null},{"value":"Virtual Reality Software","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"The Unleashed XR team designs and develops augmented reality, mixed reality and virtual reality solutions for a range of clients across industries. Unleashed XR needed a new blog that allowed developers, editors and contributors to collaborate in the cloud, so they chose Cosmic.","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"a9fd29f0-0702-11e8-a43c-e17c6c324439-Logo&Name_PurpleUnleashedXR.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/a9fd29f0-0702-11e8-a43c-e17c6c324439-Logo&Name_PurpleUnleashedXR.png","imgix_url":"https://imgix.cosmicjs.com/a9fd29f0-0702-11e8-a43c-e17c6c324439-Logo&Name_PurpleUnleashedXR.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-01-31T20:18:13.948Z","created_by":"5716b504e9c686d006000073","created":"2018-01-31T20:18:13.948Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5357ef811693be2118000001","publish_at":null,"metadata":{"company":"Unleashed XR","industry_type":"Virtual Reality Software","teaser":"The Unleashed XR team designs and develops augmented reality, mixed reality and virtual reality solutions for a range of clients across industries. Unleashed XR needed a new blog that allowed developers, editors and contributors to collaborate in the cloud, so they chose Cosmic.","logo":{"url":"https://cdn.cosmicjs.com/a9fd29f0-0702-11e8-a43c-e17c6c324439-Logo&Name_PurpleUnleashedXR.png","imgix_url":"https://imgix.cosmicjs.com/a9fd29f0-0702-11e8-a43c-e17c6c324439-Logo&Name_PurpleUnleashedXR.png"}}}],"app_slugs":[{"slug":"vue-rpg-game"},{"slug":"cosmic-messenger"},{"slug":"vue-garage-sale"}],"extension_slugs":[{"slug":"wordpress-importer"},{"slug":"mux-videos"},{"slug":"imgix-editor"}],"testimonial":"

"Cosmic allowed us to easily spin up content models that would allow our non-technical editors to manage the most sophisticated medical VR content out there. Our developers were equipped with robust Docs and Example Apps to get them started and were able to use the bleeding-edge frameworks necessary to run Virtual Reality."

","testimonial_credit":"Joe Marritt, Lead Web Developer at Medical Realities"}},{"_id":"59aea3f20ba82c9e770006b1","order":6,"slug":"flynn-buckingham","title":"Flynn Buckingham","content":"","metafields":[{"value":"93257c90-923c-11e7-a292-7fa737c9dc7c-flynn.jpeg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/93257c90-923c-11e7-a292-7fa737c9dc7c-flynn.jpeg","imgix_url":"https://imgix.cosmicjs.com/93257c90-923c-11e7-a292-7fa737c9dc7c-flynn.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-09-05T13:17:38.764Z","created_by":"5357ef811693be2118000001","created":"2017-09-05T13:17:38.764Z","status":"published","modified_at":"2020-09-14T17:45:23.837Z","modified_by":"5357ef811693be2118000001","thumbnail":"https://imgix.cosmicjs.com/93257c90-923c-11e7-a292-7fa737c9dc7c-flynn.jpeg","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/93257c90-923c-11e7-a292-7fa737c9dc7c-flynn.jpeg","imgix_url":"https://imgix.cosmicjs.com/93257c90-923c-11e7-a292-7fa737c9dc7c-flynn.jpeg"}}},{"_id":"5ea1b8ac6bc68d0007e51bd6","slug":"dustin-brink","title":"Dustin Brink","content":"","metafields":[{"children":null,"type":"textarea","title":"Testimonial","key":"testimonial","id":"su6HFdBUcP","value":"Leveraging the Cosmic GraphQL API allows for easy updates to our news and blog, while keeping payloads small and fast. Integration with Cosmic could not be easier thanks to their great support. We look forward to developing more features on the platform."},{"children":null,"type":"text","title":"Author Name","key":"author_name","id":"h2gbsWcDC1","value":"Dustin Brink"},{"children":null,"type":"text","title":"Business","key":"business","id":"SAfD60o1Gx","value":"Derive Systems"},{"children":null,"type":"file","title":"Author Image","key":"author_image","id":"xbqBERycTY","value":"f43752d0-856c-11ea-856b-416510aa3c93-dustin.jpeg","url":"https://cdn.cosmicjs.com/f43752d0-856c-11ea-856b-416510aa3c93-dustin.jpeg","imgix_url":"https://imgix.cosmicjs.com/f43752d0-856c-11ea-856b-416510aa3c93-dustin.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"testimonials","created":"2020-04-23T15:47:56.500Z","created_at":"2020-04-23T15:47:56.500Z","modified_at":"2020-10-28T16:16:19.526Z","status":"published","locale":null,"created_by":"56d66b2f903a79b904000001","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-10-28T16:16:19.526Z","unpublish_at":null,"order":6,"thumbnail":"https://imgix.cosmicjs.com/f43752d0-856c-11ea-856b-416510aa3c93-dustin.jpeg","metadata":{"testimonial":"Leveraging the Cosmic GraphQL API allows for easy updates to our news and blog, while keeping payloads small and fast. Integration with Cosmic could not be easier thanks to their great support. We look forward to developing more features on the platform.","author_name":"Dustin Brink","business":"Derive Systems","author_image":{"url":"https://cdn.cosmicjs.com/f43752d0-856c-11ea-856b-416510aa3c93-dustin.jpeg","imgix_url":"https://imgix.cosmicjs.com/f43752d0-856c-11ea-856b-416510aa3c93-dustin.jpeg"}}},{"_id":"596663e8880d69fb6c000194","slug":"joblift-elevates-their-stack","title":"Joblift Elevates Their Stack ","content":"

In any bustling economy, a key piece of capital is human capital. When the most precious portion of capital is required, Joblift seeks to connect positions with people. They choose Cosmic to deliver their content via the cloud. 



Joblift manages localized content to serve Job, Press and Blog feeds to its various markets, including the UK, Netherlands and Germany. Easy user roles and permissions equip their team with the tools they need to seamlessly run a global organization. 


"Cosmic has completely sped up our ability to upload our content easily and efficiently. With Cosmic we now have a smooth process for uploading press releases which reflects the quality content on our website.”

— Ashleigh Grady, Content Editor and Marketing Manager

","metafields":[{"value":"Joblift","key":"company","title":"Company","type":"text","children":null},{"value":"Career Services","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"In any bustling economy, a key piece of capital is human capital. When the most precious portion of capital is required, Joblift seeks to connect positions with people. They choose Cosmic to deliver their content via the cloud. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created":"2017-07-12T18:01:12.194Z","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","status":"published","order":7,"publish_at":null,"published_at":"2018-12-19T21:44:38.361Z","metadata":{"company":"Joblift","industry_type":"Career Services","teaser":"In any bustling economy, a key piece of capital is human capital. When the most precious portion of capital is required, Joblift seeks to connect positions with people. They choose Cosmic to deliver their content via the cloud. \n","logo":{"url":"https://cdn.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg"}}},{"_id":"63053a0095c44c0009bee31a","order":7,"slug":"npm-module-updates-v4-2","title":"NPM module updates - v4.2.*","content":"

We are excited to roll out new updates to the Cosmic NPM module (v4.2.*). This update adds new chain-style methods (Note: there are no breaking changes). Review the updates below.

Getting Started

Get started by installing the latest module version npm install cosmicjs@latest then import the package into your app.

\">

Then set your Bucket slug and read key. These can be found in Your Bucket > Settings > API Access after logging in to your Cosmic dashboard.

\">

Now use the new chain methods to find, add, edit, and delete Objects and Media in your Bucket.

\">

Changes

What's new

  1. Added chain methods for Objects:
  1. Added chain methods for Media:

Old methods

For the old npm-v4.1.19 methods, see the docs version for npm-v4.1.19. These methods include:

  1. Objects
  1. Media


We hope you enjoy these new methods for using the Cosmic NPM module. Review all of the methods now available in the Cosmic docs. To stay up with the latest updates to Cosmic, follow us on Twitter, subscribe on YouTube, join us on Slack.

","metafields":[{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"SUwTZIVeBJ","value":"2022-08-24"},{"children":null,"type":"object","title":"Author","key":"author","id":"9TWCUCrtpF","value":"5ffa1d1e0046b0000799cb7b","object_type":"authors","object":{"_id":"5ffa1d1e0046b0000799cb7b","slug":"cosmic","title":"Cosmic","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"ZogvxZg6OL","value":""},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D0qLJ4RPBe","value":"10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2021-01-09T21:16:14.533Z","created_by":"5357ef811693be2118000001","modified_at":"2021-01-09T21:18:26.147Z","created":"2021-01-09T21:16:14.533Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/e55ef990-52bf-11eb-986d-4d7ff5faa3ab-logo.svg","published_at":"2021-01-09T21:18:26.147Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null}},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"bAkIa79Xli","value":"","url":null,"imgix_url":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"changelogs","created_at":"2022-08-23T20:35:12.730Z","created_by":"5357ef811693be2118000001","modified_at":"2022-08-24T21:55:43.040Z","created":"2022-08-23T20:35:12.730Z","status":"published","thumbnail":"","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2022-08-24T21:55:43.040Z","metadata":{"published_date":"2022-08-24","author":{"_id":"5ffa1d1e0046b0000799cb7b","slug":"cosmic","title":"Cosmic","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"ZogvxZg6OL","value":""},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D0qLJ4RPBe","value":"10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2021-01-09T21:16:14.533Z","created_by":"5357ef811693be2118000001","modified_at":"2021-01-09T21:18:26.147Z","created":"2021-01-09T21:16:14.533Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/e55ef990-52bf-11eb-986d-4d7ff5faa3ab-logo.svg","published_at":"2021-01-09T21:18:26.147Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"metadata":{"username":"","profile_picture":{"url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}}},"featured_image":{"url":null,"imgix_url":null}}},{"_id":"5ef64eba9b657600076de6fc","slug":"craft-cms","title":"Craft CMS","content":"

Craft CMS was created by the digital agency Pixel & Tonic in 2011 and describes itself as a flexible, user-friendly CMS for creating custom digital experiences on the web and beyond. Cosmic is an alternative to Craft CMS that your developers and content creators will love.


Monolithic vs Headless CMS

Craft CMS, as a monolithic CMS, and other older installed CMS systems like it, comes with a coupled front end application layer that requires additional development and maintenance. Cosmic is a Headless CMS meaning that the content API and presentation layer are decoupled which gives your team greater flexibility when it comes to where your content can go.

Cosmic provides everything your team of developers and content creators need: powerful and intuitive APIs for developers, and an easy-to-use dashboard for content creators. We've removed all complexity and CMS maintenance, so your team can focus on building great products faster, together.


But can't Craft CMS go Headless?

Although you CAN make Craft CMS a Headless CMS, you still have a lot of work to do to bring it up to the level of an optimized CMS system that's truly headless. And along with your application, you will need to maintain the CMS itself, adding more development costs and taking away focus from what really matters: creating great content and user experiences in your main website or app.

","metafields":[{"children":null,"type":"file","title":"Logo","key":"logo","id":"hpoQy8sJ8D","value":"1ba90340-b7e0-11ea-bc3d-59980ac072b1-craft-cms.jpg","url":"https://cdn.cosmicjs.com/1ba90340-b7e0-11ea-bc3d-59980ac072b1-craft-cms.jpg","imgix_url":"https://imgix.cosmicjs.com/1ba90340-b7e0-11ea-bc3d-59980ac072b1-craft-cms.jpg"},{"children":null,"type":"textarea","title":"Tech","key":"tech","id":"D2RXiAFMaO","value":"LAMP: Linux, Apache, PHP. MySQL / Postgres database."},{"children":null,"type":"textarea","title":"Scalability","key":"scalability","id":"eOsvg0S3W9","value":"Does not scale easily. Limited by your servers, hosting provider, and budget."},{"children":null,"type":"textarea","title":"Security","key":"security","id":"hwNtF8rjrK","value":"You manage the security yourself. No default data encryption at rest or in transit."},{"children":null,"type":"textarea","title":"Maintenance","key":"maintenance","id":"hGXiZdeMIZ","value":"You deploy, host, and maintain everything yourself. Along with your application and content, you need to maintain updates and security for your CMS system."},{"children":null,"type":"textarea","title":"Caching","key":"caching","id":"7JTzQY1A24","value":"No caching included out of the box."},{"children":null,"type":"textarea","title":"Media CDN","key":"media_cdn","id":"7ieFBQUOVw","value":"No CDN included out of the box."},{"children":null,"type":"textarea","title":"Image Processing","key":"image_processing","id":"8VKaZD70z6","value":"Manually manage your own image sizes and optimizations."},{"children":null,"type":"textarea","title":"Extendability","key":"extendability","id":"UWahqMvyV9","value":"Templates and plugins."},{"children":null,"type":"textarea","title":"Front end","key":"front_end","id":"6h93MixcDw","value":"Front end is coupled with backend CMS. Can be made to be Headless."},{"children":null,"type":"textarea","title":"Number of Projects","key":"number_of_projects","id":"BMYwtRcixT","value":"One login, one website."},{"children":null,"type":"html-textarea","title":"Costs","key":"costs","id":"GkXboOx9y3","value":"

You will need to hire developer resources. Average salary of a full-stack developer is $111,600 per year. You may need to hire 1-3 developers to maintain the CMS.

"},{"children":null,"type":"text","title":"Vendor Name","key":"vendor_name","id":"HVkyM3w8Sk","value":"Craft CMS"},{"children":null,"type":"switch","title":"Include in link list","key":"include_in_link_list","id":"iU6ZVrvM3u","value":true,"options":"yes,no"},{"children":null,"type":"text","title":"Cost Value","key":"cost_value","id":"EHanTcLdHS","value":"$223,200"},{"children":null,"type":"text","title":"Cost Text","key":"cost_text","id":"xX5JD9o4JD","value":"per year"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"cms-competitors","created":"2020-06-26T19:38:34.993Z","created_at":"2020-06-26T19:38:34.993Z","modified_at":"2020-06-28T20:53:31.333Z","status":"published","locale":null,"modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-06-28T20:53:31.333Z","unpublish_at":null,"order":7,"metadata":{"logo":{"url":"https://cdn.cosmicjs.com/1ba90340-b7e0-11ea-bc3d-59980ac072b1-craft-cms.jpg","imgix_url":"https://imgix.cosmicjs.com/1ba90340-b7e0-11ea-bc3d-59980ac072b1-craft-cms.jpg"},"tech":"LAMP: Linux, Apache, PHP. MySQL / Postgres database.","scalability":"Does not scale easily. Limited by your servers, hosting provider, and budget.","security":"You manage the security yourself. No default data encryption at rest or in transit.","maintenance":"You deploy, host, and maintain everything yourself. Along with your application and content, you need to maintain updates and security for your CMS system.","caching":"No caching included out of the box.","media_cdn":"No CDN included out of the box.","image_processing":"Manually manage your own image sizes and optimizations.","extendability":"Templates and plugins.","front_end":"Front end is coupled with backend CMS. Can be made to be Headless.","number_of_projects":"One login, one website.","costs":"

You will need to hire developer resources. Average salary of a full-stack developer is $111,600 per year. You may need to hire 1-3 developers to maintain the CMS.

","vendor_name":"Craft CMS","include_in_link_list":true,"cost_value":"$223,200","cost_text":"per year"}},{"_id":"599b30c44f629e3a5900010f","order":7,"slug":"jazib-sawar","title":"Jazib Sawar","content":"","metafields":[{"value":"d3261f20-1a9d-11ea-a8c4-6b69c807b1d7-12.jpg","id":"MoCJXLYqwC","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/d3261f20-1a9d-11ea-a8c4-6b69c807b1d7-12.jpg","imgix_url":"https://imgix.cosmicjs.com/d3261f20-1a9d-11ea-a8c4-6b69c807b1d7-12.jpg"},{"value":"jazibsawar","id":"","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-08-21T19:13:08.011Z","created_by":"5357ef811693be2118000001","created":"2017-08-21T19:13:08.011Z","status":"published","modified_at":"2020-09-15T15:41:11.076Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-12-09T16:06:31.900Z","thumbnail":"https://imgix.cosmicjs.com/d3261f20-1a9d-11ea-a8c4-6b69c807b1d7-12.jpg","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/d3261f20-1a9d-11ea-a8c4-6b69c807b1d7-12.jpg","imgix_url":"https://imgix.cosmicjs.com/d3261f20-1a9d-11ea-a8c4-6b69c807b1d7-12.jpg"},"username":"jazibsawar"}},{"_id":"5bad1c960d6e7903879ee272","slug":"analytics","title":"Analytics","content":"","metafields":[{"value":"https://cosmicjs.com/extensions/google-analytics","key":"link","title":"Link","type":"text","children":false,"has_length_edit":true,"parent":false},{"value":"3631e850-c276-11e8-8edd-1f302b73a4c6-g.png","key":"image","title":"Image","type":"file","children":false,"has_length_edit":false,"parent":false,"url":"https://cdn.cosmicjs.com/3631e850-c276-11e8-8edd-1f302b73a4c6-g.png","imgix_url":"https://imgix.cosmicjs.com/3631e850-c276-11e8-8edd-1f302b73a4c6-g.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"integrations","created":"2018-09-27T18:08:22.748Z","created_at":"2018-09-27T18:08:22.748Z","modified_at":"2018-09-27T18:08:22.748Z","status":"published","locale":null,"published_at":"2018-09-27T18:08:22.748Z","created_by":"5357ef811693be2118000001","order":7,"metadata":{"link":"https://cosmicjs.com/extensions/google-analytics","image":{"url":"https://cdn.cosmicjs.com/3631e850-c276-11e8-8edd-1f302b73a4c6-g.png","imgix_url":"https://imgix.cosmicjs.com/3631e850-c276-11e8-8edd-1f302b73a4c6-g.png"}}},{"_id":"5f383668e247dd0008fb2705","order":7,"slug":"mongodb-cms","title":"MongoDB CMS","content":"","metafields":[{"children":null,"type":"file","title":"Image","key":"image","id":"ygpI9IbxYR","value":"24198fd0-f4ac-11ec-a2eb-c1653f3f9199-mongodb-cms.png","url":"https://cdn.cosmicjs.com/24198fd0-f4ac-11ec-a2eb-c1653f3f9199-mongodb-cms.png","imgix_url":"https://imgix.cosmicjs.com/24198fd0-f4ac-11ec-a2eb-c1653f3f9199-mongodb-cms.png"},{"children":null,"type":"file","title":"Thumbnail","key":"thumbnail","id":"7gaZzZBPz2","value":"6b606d80-df2f-11ea-a072-f38fe2ab3178-mongodb-cms.svg","url":"https://cdn.cosmicjs.com/6b606d80-df2f-11ea-a072-f38fe2ab3178-mongodb-cms.svg","imgix_url":"https://imgix.cosmicjs.com/6b606d80-df2f-11ea-a072-f38fe2ab3178-mongodb-cms.svg"},{"children":null,"type":"html-textarea","title":"Blurb","key":"blurb","id":"r9V0TqrsDi","value":"

Cosmic is the best CMS for MongoDB websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

"},{"children":null,"type":"text","title":"Headline","key":"headline","id":"un8Gfkyd6N","value":"MongoDB"},{"children":null,"type":"text","title":"SEO Description","key":"seo_description","id":"GI17CWLolM","value":"Cosmic is the best CMS for MongoDB websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators."},{"children":null,"type":"file","title":"Twitter Card Image","key":"twitter_card_image","id":"5aADDkQoy2","value":"24198fd0-f4ac-11ec-a2eb-c1653f3f9199-mongodb-cms.png","url":"https://cdn.cosmicjs.com/24198fd0-f4ac-11ec-a2eb-c1653f3f9199-mongodb-cms.png","imgix_url":"https://imgix.cosmicjs.com/24198fd0-f4ac-11ec-a2eb-c1653f3f9199-mongodb-cms.png"},{"children":null,"type":"html-textarea","title":"Code Example","key":"code_example","id":"xl1RKNzb8i","value":""},{"children":null,"type":"text","title":"SEO Title","key":"seo_title","id":"Y6RzhqNdQl","value":"Best MongoDB Headless CMS"},{"children":[],"type":"repeater","title":"Videos","key":"videos","id":"P641AUWFzQ","value":"","repeater_fields":[{"title":"Title","key":"title","value":"","type":"text","required":false},{"title":"Link","key":"link","value":"","type":"text","required":false}]},{"children":null,"type":"text","title":"Apps Search Term","key":"apps_search_term","id":"kUi5NkTI0e","value":"react"},{"children":null,"type":"text","title":"Articles Search Term","key":"articles_search_term","id":"2yfyZkRdcz","value":"react"},{"children":null,"type":"html-textarea","title":"Page Overview","key":"page_overview","id":"tLU8Rx9bIO","value":""},{"children":null,"type":"html-textarea","title":"SEO Content","key":"seo_content","id":"iVObuSI72E","value":""},{"children":null,"type":"text","title":"Page Overview Title","key":"page_overview_title","id":"gj036836gx4c73fpdjzb","value":""},{"children":[],"type":"repeater","title":"Apps","key":"apps","id":"dkpxmwigd1z8x4ants9f","value":"","repeater_fields":[{"title":"App Slug","key":"app_slug","value":"","type":"text","required":false}]},{"children":[],"type":"repeater","title":"Articles","key":"articles","id":"dwil4bqojngnkej4v85k","value":"","repeater_fields":[{"title":"Article Slug","key":"article_slug","value":"","type":"text","required":false}]}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"kb-articles","created_at":"2020-08-15T19:24:24.407Z","created_by":"5357ef811693be2118000001","created":"2020-08-15T19:24:24.407Z","status":"published","modified_at":"2022-06-25T17:28:37.050Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2022-06-25T17:28:37.050Z","metadata":{"image":{"url":"https://cdn.cosmicjs.com/24198fd0-f4ac-11ec-a2eb-c1653f3f9199-mongodb-cms.png","imgix_url":"https://imgix.cosmicjs.com/24198fd0-f4ac-11ec-a2eb-c1653f3f9199-mongodb-cms.png"},"thumbnail":{"url":"https://cdn.cosmicjs.com/6b606d80-df2f-11ea-a072-f38fe2ab3178-mongodb-cms.svg","imgix_url":"https://imgix.cosmicjs.com/6b606d80-df2f-11ea-a072-f38fe2ab3178-mongodb-cms.svg"},"blurb":"

Cosmic is the best CMS for MongoDB websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

","headline":"MongoDB","seo_description":"Cosmic is the best CMS for MongoDB websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.","twitter_card_image":{"url":"https://cdn.cosmicjs.com/24198fd0-f4ac-11ec-a2eb-c1653f3f9199-mongodb-cms.png","imgix_url":"https://imgix.cosmicjs.com/24198fd0-f4ac-11ec-a2eb-c1653f3f9199-mongodb-cms.png"},"code_example":"","seo_title":"Best MongoDB Headless CMS","videos":[],"apps_search_term":"react","articles_search_term":"react","page_overview":"","seo_content":"","page_overview_title":"","apps":[],"articles":[]}},{"_id":"5d235b9872d8f04604eb2040","slug":"headless-cms-for-modern-stack-websites","title":"Headless CMS for Modern Stack Websites","content":"

The Cosmic Headless CMS powers content for your modern stack websites with speed and flexibility out-of-the-box. Your team is free to use their favorite modern tools to power content for websites, mobile apps, static websites and more. Create structured content models to reuse across all your websites and applications. API tools and resources are available to help you start building with the latest static site generators, workflows and integrations.

Use tools like React, Vue, GraphQL, Gatsby and Serverless technologies to build performant apps whose content is editable via the Cosmic web-based Dashboard. 

","metafields":[{"children":null,"type":"text","title":"Solution Name","key":"solution_name","id":"2zJ2KZg9t6","value":"Modern Stack Websites"},{"children":null,"type":"file","title":"Image","key":"image","id":"811Ib0t852","value":"abe9e700-9dc2-11e9-a5b4-e5df9f8049d3-tripwire.png","url":"https://cdn.cosmicjs.com/abe9e700-9dc2-11e9-a5b4-e5df9f8049d3-tripwire.png","imgix_url":"https://imgix.cosmicjs.com/abe9e700-9dc2-11e9-a5b4-e5df9f8049d3-tripwire.png"},{"children":null,"type":"objects","title":"Case Studies","key":"case_studies","id":"LDRGacRwH6","value":"5b4753096d4f364510bf1290,5bd206599dca8d10e941b69b,5a73423ee520776813591ee2","object_type":"case-studies","objects":[{"_id":"5b4753096d4f364510bf1290","slug":"hypometer-technologies-fantasy-insider-and-stats-insider","title":"Hypometer Technologies: Fantasy Insider and Stats Insider","content":"

Hypometer Technologies is revolutionizing the Australian sporting experience by making predictive analytics accessible to the masses. Their next generation sports media platforms are the form guide for every big game, and the go-to sites for trusted predictive analytics.

Historically the team managed content via WordPress, but as they scaled their content WordPress started to bottleneck them. They pivoted to working with the WordPress API, which resulted in slow load times as WordPress would call all assets and return unnecessary data in the API call. 

Recently the tech team was searching for a solution to manage dynamic content for their blogs, Fantasy Insider and Stats Insider. They wanted to remain decoupled from their application's codebase when managing content, so they started researching headless CMS systems. They chose Cosmic due to the simplicity of API integration and the content editing tools that would empower their marketers and writers. 

In addition, Cosmic allowed the Hypometer team to write scripts to migrate existing WordPress post content over to Cosmic for editing and publishing. 


Fantasy Insider

Built On: Python | Angular | Cosmic

Fantasy Insider is the market leader for daily fantasy sports information in Australia, with over half of the active market visiting the site for content or predictive tools each week.



Stats Insider

Built On: Python | Angular | Cosmic

Launched in early 2018, Stats Insider is Australia's first advanced sports analytics and predictive data platform for sports fans, punters and fantasy sports players.

Stats Insider will be providing information and predictions for US sports from August. Stay up to date with them on Twitter.  


"The headless CMS we chose had to tick a lot of boxes. At the end of the day, though, it needed to be easy for our external writers to use. We recorded a quick screencast video internally showing how to set up a piece of content, sent that out to our team, and I haven’t had a question from any of our writers since. We’ve just started to use Cosmic for other things like an activity status bar on Stats Insider which frees up more time for our developers and makes our workflow more flexible.”

— Katie Prowd, Co-Founder of Fantasy Insider

","metafields":[{"value":"Hypometer Technologies","key":"company","title":"Company","type":"text","children":null},{"value":"Fantasy Sports","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Hypometer Technologies is revolutionizing the Australian sporting experience by making predictive analytics accessible to the masses. Their next generation sports media platforms are the form guide for every big game, and the go-to sites for trusted predictive analytics.\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"1818c5e0-8b63-11e8-8b12-1d164d145eab-15122993_1073313959433910_7212266943208762093_o.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/1818c5e0-8b63-11e8-8b12-1d164d145eab-15122993_1073313959433910_7212266943208762093_o.png","imgix_url":"https://imgix.cosmicjs.com/1818c5e0-8b63-11e8-8b12-1d164d145eab-15122993_1073313959433910_7212266943208762093_o.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-12T13:09:29.236Z","created_by":"5716b504e9c686d006000073","created":"2018-07-12T13:09:29.236Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-07-20T13:31:54.633Z"},{"_id":"5bd206599dca8d10e941b69b","slug":"derive-systems-runs-on-cosmic-js","title":"Derive Systems runs on Cosmic","content":"

Derive Systems  is a leading automotive technology company with over 2 million software installations powering upgraded experiences for drivers on the road today. Derive  connects vehicles and their engines to the digital world, enabling individuals and fleets to take control and optimize for performance, fuel efficiency, safety, and more. 



The team at Derive Systems was in search of a headless CMS that would give their developers flexibility out-of-the-box while enabling their content managers to manage content in a familiar and modern CMS Dashboard. They chose Cosmic due to its easy content modeling tools for their Blog, Press, About and Team Sections. Derive now runs a Next.js, React and Express framework that utilizes the Cosmic GraphQL API to deliver its content.




“Leveraging the Cosmic GraphQL API allows for easy updates to our news and blog, while keeping payloads small and fast. Integration with Cosmic could not be easier thanks to their great support. We look forward to developing more features on the platform.”


— Dustin Brink, Front End Developer at Derive Systems 

","metafields":[{"value":"Derive Systems","key":"company","title":"Company","type":"text","children":null},{"value":"Automotive","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Derive Systems  is a leading automotive technology company with over 2 million software installations powering upgraded experiences for drivers on the road today. Derive  connects vehicles and their engines to the digital world, enabling individuals and fleets to take control and optimize for performance, fuel efficiency, safety, and more. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"60aac7a0-ded7-11e8-86d0-2998be663226-derive.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/60aac7a0-ded7-11e8-86d0-2998be663226-derive.jpg","imgix_url":"https://imgix.cosmicjs.com/60aac7a0-ded7-11e8-86d0-2998be663226-derive.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2018-10-25T18:07:21.426Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-11-15T14:51:19.007Z"},{"_id":"5a73423ee520776813591ee2","slug":"rocket-radio-builds-a-podcast-streaming-website","title":"Rocket Radio Builds a Podcast-Streaming Website","content":"

Rocket Radio is a San Francisco Bay Area Music Network that creates podcasts featuring music and interviews with established and rising stars in the music industry. With shows covering all music genres, they needed a new website that allowed for numerous content editors and developers representing a blended team. See how Rocket Radio  built their new podcast website using Node.js, React.js, Redux and Cosmic.



The Rocket Radio tech team built out a single page application with Node, React and Redux using Example Apps from the Cosmic Community. The team was able to leverage the Cosmic API to build out core components from Authentication to a news gallery to podcast listening features.



"From Docs to Example Apps and Service, it was all there. Cosmic provided a huge boost in cutting development time all while helping our team meet its goals. I would certainly recommend Cosmic to anyone seeking to build out a website using some of the latest technology while looking to stay ahead of the game."

— Gus A., Senior Software Engineer 


\">
","metafields":[{"value":"Rocket Radio","key":"company","title":"Company","type":"text","children":null},{"value":"Music and Entertainment","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Rocket Radio is a San Francisco Bay Area Music Network that creates podcasts featuring music and interviews with established and rising stars in the music industry. With shows covering all music genres, they needed a new website that allowed for numerous content editors and developers representing a blended team. See how Rocket Radio built their new podcast website using Node.js React.js, Redux and Cosmic.\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"acbb5cf0-076d-11e8-a43c-e17c6c324439-IMG_0380.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/acbb5cf0-076d-11e8-a43c-e17c6c324439-IMG_0380.jpg","imgix_url":"https://imgix.cosmicjs.com/acbb5cf0-076d-11e8-a43c-e17c6c324439-IMG_0380.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-02-01T16:37:18.070Z","created_by":"5716b504e9c686d006000073","created":"2018-02-01T16:37:18.070Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-08-30T20:32:56.765Z"}]},{"children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"gatsby-blog","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"jamstack-fitness-website","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"cross-platform-blog","type":"text","required":false}]}],"type":"repeater","title":"App Slugs","key":"app_slugs","id":"SGakjep877","value":"gatsby-blog","repeater_fields":"\"\"\"\"\"[{\"title\":\"Slug\",\"key\":\"slug\",\"value\":\"\",\"type\":\"text\",\"required\":false}]\"\"\"\"\""},{"children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"wordpress-importer","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"algolia-search","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"imgix-editor","type":"text","required":false}]}],"type":"repeater","title":"Extension Slugs","key":"extension_slugs","id":"UHkyhMIBJU","value":"wordpress-importer","repeater_fields":"\"\"\"\"\"[{\"title\":\"Slug\",\"key\":\"slug\",\"value\":\"\",\"type\":\"text\",\"required\":false}]\"\"\"\"\""},{"children":null,"type":"html-textarea","title":"Testimonial","key":"testimonial","id":"K8ywqylljB","value":"

"Cosmic allowed us to easily integrate a secure and fast back-end API into our React app. Cosmic fit our needs with its simple web-based dashboard so that members of our marketing team can create, edit, and delete new content on the fly. Our team has been enjoying the ease of use with the new system."

"},{"children":null,"type":"text","title":"Testimonial Credit","key":"testimonial_credit","id":"zpiXc4OE0h","value":"Owen Liversidge, Lead Developer at Tripwire Interactive"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"solutions","created":"2019-07-08T15:04:56.206Z","created_at":"2019-07-08T15:04:56.206Z","modified_at":"2020-08-10T14:05:12.245Z","status":"published","locale":null,"published_at":"2020-05-06T05:33:29.829Z","modified_by":"5357ef811693be2118000001","publish_at":null,"order":7,"unpublish_at":null,"metadata":{"solution_name":"Modern Stack Websites","image":{"url":"https://cdn.cosmicjs.com/abe9e700-9dc2-11e9-a5b4-e5df9f8049d3-tripwire.png","imgix_url":"https://imgix.cosmicjs.com/abe9e700-9dc2-11e9-a5b4-e5df9f8049d3-tripwire.png"},"case_studies":[{"_id":"5b4753096d4f364510bf1290","slug":"hypometer-technologies-fantasy-insider-and-stats-insider","title":"Hypometer Technologies: Fantasy Insider and Stats Insider","content":"

Hypometer Technologies is revolutionizing the Australian sporting experience by making predictive analytics accessible to the masses. Their next generation sports media platforms are the form guide for every big game, and the go-to sites for trusted predictive analytics.

Historically the team managed content via WordPress, but as they scaled their content WordPress started to bottleneck them. They pivoted to working with the WordPress API, which resulted in slow load times as WordPress would call all assets and return unnecessary data in the API call. 

Recently the tech team was searching for a solution to manage dynamic content for their blogs, Fantasy Insider and Stats Insider. They wanted to remain decoupled from their application's codebase when managing content, so they started researching headless CMS systems. They chose Cosmic due to the simplicity of API integration and the content editing tools that would empower their marketers and writers. 

In addition, Cosmic allowed the Hypometer team to write scripts to migrate existing WordPress post content over to Cosmic for editing and publishing. 


Fantasy Insider

Built On: Python | Angular | Cosmic

Fantasy Insider is the market leader for daily fantasy sports information in Australia, with over half of the active market visiting the site for content or predictive tools each week.



Stats Insider

Built On: Python | Angular | Cosmic

Launched in early 2018, Stats Insider is Australia's first advanced sports analytics and predictive data platform for sports fans, punters and fantasy sports players.

Stats Insider will be providing information and predictions for US sports from August. Stay up to date with them on Twitter.  


"The headless CMS we chose had to tick a lot of boxes. At the end of the day, though, it needed to be easy for our external writers to use. We recorded a quick screencast video internally showing how to set up a piece of content, sent that out to our team, and I haven’t had a question from any of our writers since. We’ve just started to use Cosmic for other things like an activity status bar on Stats Insider which frees up more time for our developers and makes our workflow more flexible.”

— Katie Prowd, Co-Founder of Fantasy Insider

","metafields":[{"value":"Hypometer Technologies","key":"company","title":"Company","type":"text","children":null},{"value":"Fantasy Sports","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Hypometer Technologies is revolutionizing the Australian sporting experience by making predictive analytics accessible to the masses. Their next generation sports media platforms are the form guide for every big game, and the go-to sites for trusted predictive analytics.\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"1818c5e0-8b63-11e8-8b12-1d164d145eab-15122993_1073313959433910_7212266943208762093_o.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/1818c5e0-8b63-11e8-8b12-1d164d145eab-15122993_1073313959433910_7212266943208762093_o.png","imgix_url":"https://imgix.cosmicjs.com/1818c5e0-8b63-11e8-8b12-1d164d145eab-15122993_1073313959433910_7212266943208762093_o.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-12T13:09:29.236Z","created_by":"5716b504e9c686d006000073","created":"2018-07-12T13:09:29.236Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-07-20T13:31:54.633Z","metadata":{"company":"Hypometer Technologies","industry_type":"Fantasy Sports","teaser":"Hypometer Technologies is revolutionizing the Australian sporting experience by making predictive analytics accessible to the masses. Their next generation sports media platforms are the form guide for every big game, and the go-to sites for trusted predictive analytics.\n","logo":{"url":"https://cdn.cosmicjs.com/1818c5e0-8b63-11e8-8b12-1d164d145eab-15122993_1073313959433910_7212266943208762093_o.png","imgix_url":"https://imgix.cosmicjs.com/1818c5e0-8b63-11e8-8b12-1d164d145eab-15122993_1073313959433910_7212266943208762093_o.png"}}},{"_id":"5bd206599dca8d10e941b69b","slug":"derive-systems-runs-on-cosmic-js","title":"Derive Systems runs on Cosmic","content":"

Derive Systems  is a leading automotive technology company with over 2 million software installations powering upgraded experiences for drivers on the road today. Derive  connects vehicles and their engines to the digital world, enabling individuals and fleets to take control and optimize for performance, fuel efficiency, safety, and more. 



The team at Derive Systems was in search of a headless CMS that would give their developers flexibility out-of-the-box while enabling their content managers to manage content in a familiar and modern CMS Dashboard. They chose Cosmic due to its easy content modeling tools for their Blog, Press, About and Team Sections. Derive now runs a Next.js, React and Express framework that utilizes the Cosmic GraphQL API to deliver its content.




“Leveraging the Cosmic GraphQL API allows for easy updates to our news and blog, while keeping payloads small and fast. Integration with Cosmic could not be easier thanks to their great support. We look forward to developing more features on the platform.”


— Dustin Brink, Front End Developer at Derive Systems 

","metafields":[{"value":"Derive Systems","key":"company","title":"Company","type":"text","children":null},{"value":"Automotive","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Derive Systems  is a leading automotive technology company with over 2 million software installations powering upgraded experiences for drivers on the road today. Derive  connects vehicles and their engines to the digital world, enabling individuals and fleets to take control and optimize for performance, fuel efficiency, safety, and more. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"60aac7a0-ded7-11e8-86d0-2998be663226-derive.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/60aac7a0-ded7-11e8-86d0-2998be663226-derive.jpg","imgix_url":"https://imgix.cosmicjs.com/60aac7a0-ded7-11e8-86d0-2998be663226-derive.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2018-10-25T18:07:21.426Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-11-15T14:51:19.007Z","metadata":{"company":"Derive Systems","industry_type":"Automotive","teaser":"Derive Systems  is a leading automotive technology company with over 2 million software installations powering upgraded experiences for drivers on the road today. Derive  connects vehicles and their engines to the digital world, enabling individuals and fleets to take control and optimize for performance, fuel efficiency, safety, and more. \n","logo":{"url":"https://cdn.cosmicjs.com/60aac7a0-ded7-11e8-86d0-2998be663226-derive.jpg","imgix_url":"https://imgix.cosmicjs.com/60aac7a0-ded7-11e8-86d0-2998be663226-derive.jpg"}}},{"_id":"5a73423ee520776813591ee2","slug":"rocket-radio-builds-a-podcast-streaming-website","title":"Rocket Radio Builds a Podcast-Streaming Website","content":"

Rocket Radio is a San Francisco Bay Area Music Network that creates podcasts featuring music and interviews with established and rising stars in the music industry. With shows covering all music genres, they needed a new website that allowed for numerous content editors and developers representing a blended team. See how Rocket Radio  built their new podcast website using Node.js, React.js, Redux and Cosmic.



The Rocket Radio tech team built out a single page application with Node, React and Redux using Example Apps from the Cosmic Community. The team was able to leverage the Cosmic API to build out core components from Authentication to a news gallery to podcast listening features.



"From Docs to Example Apps and Service, it was all there. Cosmic provided a huge boost in cutting development time all while helping our team meet its goals. I would certainly recommend Cosmic to anyone seeking to build out a website using some of the latest technology while looking to stay ahead of the game."

— Gus A., Senior Software Engineer 


\">
","metafields":[{"value":"Rocket Radio","key":"company","title":"Company","type":"text","children":null},{"value":"Music and Entertainment","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Rocket Radio is a San Francisco Bay Area Music Network that creates podcasts featuring music and interviews with established and rising stars in the music industry. With shows covering all music genres, they needed a new website that allowed for numerous content editors and developers representing a blended team. See how Rocket Radio built their new podcast website using Node.js React.js, Redux and Cosmic.\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"acbb5cf0-076d-11e8-a43c-e17c6c324439-IMG_0380.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/acbb5cf0-076d-11e8-a43c-e17c6c324439-IMG_0380.jpg","imgix_url":"https://imgix.cosmicjs.com/acbb5cf0-076d-11e8-a43c-e17c6c324439-IMG_0380.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-02-01T16:37:18.070Z","created_by":"5716b504e9c686d006000073","created":"2018-02-01T16:37:18.070Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-08-30T20:32:56.765Z","metadata":{"company":"Rocket Radio","industry_type":"Music and Entertainment","teaser":"Rocket Radio is a San Francisco Bay Area Music Network that creates podcasts featuring music and interviews with established and rising stars in the music industry. With shows covering all music genres, they needed a new website that allowed for numerous content editors and developers representing a blended team. See how Rocket Radio built their new podcast website using Node.js React.js, Redux and Cosmic.\n","logo":{"url":"https://cdn.cosmicjs.com/acbb5cf0-076d-11e8-a43c-e17c6c324439-IMG_0380.jpg","imgix_url":"https://imgix.cosmicjs.com/acbb5cf0-076d-11e8-a43c-e17c6c324439-IMG_0380.jpg"}}}],"app_slugs":[{"slug":"gatsby-blog"},{"slug":"jamstack-fitness-website"},{"slug":"cross-platform-blog"}],"extension_slugs":[{"slug":"wordpress-importer"},{"slug":"algolia-search"},{"slug":"imgix-editor"}],"testimonial":"

"Cosmic allowed us to easily integrate a secure and fast back-end API into our React app. Cosmic fit our needs with its simple web-based dashboard so that members of our marketing team can create, edit, and delete new content on the fly. Our team has been enjoying the ease of use with the new system."

","testimonial_credit":"Owen Liversidge, Lead Developer at Tripwire Interactive"}},{"_id":"62f268ed9c03fd0009e2c574","order":7,"slug":"new-dashboard-updates-content-type-model-improvements-global-nav-updates-and-more","title":"New dashboard updates: content type model improvements, global nav updates, and more","content":"

We're excited to share a big release for the new dashboard. Read below and sign up to get on the waitlist to preview the new dashboard.

🛠️ Content type updates

Content modeling is at the heart of the Cosmic content management experience. And with this latest release, content modeling got even better. Now whenever you update your content model in your content type settings, ALL of the existing Objects in the type will be\r\nupdated.

Prior to this update, updating the model on all of your existing Objects was manual and cumbersome, now it's automatic! We think you'll enjoy this improvement when working with ongoing updates to your content model.


🧭 Global nav updates

The navigation has been dramatically improved with this release. You'll notice that everything is centered and easy to get to. This is a small update that makes a big difference to improve your navigation efficiency.


🤝 Roles and permissions

We've made a big update to how roles and permissions are done. You can now set roles at the Project level (If you have a Workspace, it's done at the Workspace level). This will enable teams to more efficiently add team members for collaboration.


🖥️ Try it out

Note: If you have already been testing the new dashboard in the private alpha release, and had previously added content, you will notice that your content has been removed. This is because we made lots of content model updates. You can still log in with your alpha testing account.

We are on a mission to build the best content management solution in the world and there's more work to do! If you haven't joined, sign up to get on the waitlist to try it out during this alpha development phase, and help us by providing your feedback.

A lot of folks have asked us when this will be ready for wider release and the answer is VERY SOON. We're excited to be closing in on the beta release. Follow us on Twitter, subscribe on YouTube, and join our team on Slack to stay in touch with the latest Cosmic news and feature updates.

Sincerely,
Cosmic Team

","metafields":[{"children":null,"type":"object","title":"Author","key":"author","id":"oDhPZkjFJS","value":"5ffa1d1e0046b0000799cb7b","required":true,"object_type":"authors","object":{"_id":"5ffa1d1e0046b0000799cb7b","slug":"cosmic","title":"Cosmic","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"ZogvxZg6OL","value":""},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D0qLJ4RPBe","value":"10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2021-01-09T21:16:14.533Z","created_by":"5357ef811693be2118000001","modified_at":"2021-01-09T21:18:26.147Z","created":"2021-01-09T21:16:14.533Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/e55ef990-52bf-11eb-986d-4d7ff5faa3ab-logo.svg","published_at":"2021-01-09T21:18:26.147Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null}},{"children":null,"type":"html-textarea","title":"Teaser","key":"teaser","id":"koOJyZaSJB","value":"

We've released some new features for the new dashboard that we are excited to share with you.

"},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"Z0SUn9W5IW","value":"a3a38e80-94d6-11ec-96f2-43bdd99faa64-new-features.png","url":"https://cdn.cosmicjs.com/a3a38e80-94d6-11ec-96f2-43bdd99faa64-new-features.png","imgix_url":"https://imgix.cosmicjs.com/a3a38e80-94d6-11ec-96f2-43bdd99faa64-new-features.png"},{"children":null,"type":"textarea","title":"SEO Meta Description","key":"seo_meta_description","id":"qSL91WdiHz","value":"We've released some new features for the new dashboard that we are excited to share with you."},{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"seaH6CLq0M","value":"2022-08-09"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2022-08-09T14:02:21.760Z","created_by":"5357ef811693be2118000001","modified_at":"2022-08-09T19:33:54.893Z","created":"2022-08-09T14:02:21.760Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/a3a38e80-94d6-11ec-96f2-43bdd99faa64-new-features.png","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2022-08-09T19:33:54.893Z","metadata":{"author":{"_id":"5ffa1d1e0046b0000799cb7b","slug":"cosmic","title":"Cosmic","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"ZogvxZg6OL","value":""},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D0qLJ4RPBe","value":"10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2021-01-09T21:16:14.533Z","created_by":"5357ef811693be2118000001","modified_at":"2021-01-09T21:18:26.147Z","created":"2021-01-09T21:16:14.533Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/e55ef990-52bf-11eb-986d-4d7ff5faa3ab-logo.svg","published_at":"2021-01-09T21:18:26.147Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"metadata":{"username":"","profile_picture":{"url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}}},"teaser":"

We've released some new features for the new dashboard that we are excited to share with you.

","featured_image":{"url":"https://cdn.cosmicjs.com/a3a38e80-94d6-11ec-96f2-43bdd99faa64-new-features.png","imgix_url":"https://imgix.cosmicjs.com/a3a38e80-94d6-11ec-96f2-43bdd99faa64-new-features.png"},"seo_meta_description":"We've released some new features for the new dashboard that we are excited to share with you.","published_date":"2022-08-09"}},{"_id":"59528e59833ff0503d000e98","order":8,"slug":"matt-cain","title":"Matt Cain","content":"","metafields":[{"value":"9ff99380-5b59-11e7-a33a-a9e1bde9cf9a-matt-cain.jpeg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/9ff99380-5b59-11e7-a33a-a9e1bde9cf9a-matt-cain.jpeg","imgix_url":"https://imgix.cosmicjs.com/9ff99380-5b59-11e7-a33a-a9e1bde9cf9a-matt-cain.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-06-27T16:56:57.686Z","created_by":"5357ef811693be2118000001","created":"2017-06-27T16:56:57.686Z","status":"published","modified_at":"2023-01-20T22:01:28.380Z","modified_by":"5357ef811693be2118000001","thumbnail":"https://imgix.cosmicjs.com/9ff99380-5b59-11e7-a33a-a9e1bde9cf9a-matt-cain.jpeg","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/9ff99380-5b59-11e7-a33a-a9e1bde9cf9a-matt-cain.jpeg","imgix_url":"https://imgix.cosmicjs.com/9ff99380-5b59-11e7-a33a-a9e1bde9cf9a-matt-cain.jpeg"}}},{"_id":"5bad1c34f394147a6754be77","slug":"zapier","title":"Zapier","content":"","metafields":[{"children":null,"type":"text","title":"Link","key":"link","id":"29kCcYJz4U","value":"https://zapier.com/platform/public-invite/5784/d94417b158f78245932516dc472dbfbe/"},{"children":null,"type":"file","title":"Image","key":"image","id":"rs10eNLtPC","value":"33960010-8ed8-11ea-910b-435199f15a39-zapier.jpg","url":"https://cdn.cosmicjs.com/33960010-8ed8-11ea-910b-435199f15a39-zapier.jpg","imgix_url":"https://imgix.cosmicjs.com/33960010-8ed8-11ea-910b-435199f15a39-zapier.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"integrations","created":"2018-09-27T18:06:44.885Z","created_at":"2018-09-27T18:06:44.885Z","modified_at":"2020-05-05T13:56:23.379Z","status":"published","locale":null,"published_at":"2020-05-05T13:56:23.379Z","created_by":"5357ef811693be2118000001","modified_by":"5357ef811693be2118000001","publish_at":null,"order":8,"unpublish_at":null,"metadata":{"link":"https://zapier.com/platform/public-invite/5784/d94417b158f78245932516dc472dbfbe/","image":{"url":"https://cdn.cosmicjs.com/33960010-8ed8-11ea-910b-435199f15a39-zapier.jpg","imgix_url":"https://imgix.cosmicjs.com/33960010-8ed8-11ea-910b-435199f15a39-zapier.jpg"}}},{"_id":"5f1a32d2c56a150007c78944","order":8,"slug":"ecommerce-cms","title":"Ecommerce CMS","content":"","metafields":[{"children":null,"type":"file","title":"Image","key":"image","id":"ud4EBv55MP","value":"84df39f0-cd49-11ea-a03b-a9b51dcc4b0e-171-shopping-cart.svg","url":"https://cdn.cosmicjs.com/84df39f0-cd49-11ea-a03b-a9b51dcc4b0e-171-shopping-cart.svg","imgix_url":"https://imgix.cosmicjs.com/84df39f0-cd49-11ea-a03b-a9b51dcc4b0e-171-shopping-cart.svg"},{"children":null,"type":"file","title":"Thumbnail","key":"thumbnail","id":"DVexaXi6cX","value":"84df39f0-cd49-11ea-a03b-a9b51dcc4b0e-171-shopping-cart.svg","url":"https://cdn.cosmicjs.com/84df39f0-cd49-11ea-a03b-a9b51dcc4b0e-171-shopping-cart.svg","imgix_url":"https://imgix.cosmicjs.com/84df39f0-cd49-11ea-a03b-a9b51dcc4b0e-171-shopping-cart.svg"},{"children":null,"type":"html-textarea","title":"Blurb","key":"blurb","id":"Z4AcrWh4gn","value":"

Cosmic is the best CMS for Ecommerce websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

"},{"children":null,"type":"text","title":"Headline","key":"headline","id":"xngL2db52p","value":"Ecommerce"},{"children":null,"type":"text","title":"SEO Description","key":"seo_description","id":"VKTyIhPf8a","value":"Cosmic is the best CMS for Ecommerce websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators."},{"children":null,"type":"file","title":"Twitter Card Image","key":"twitter_card_image","id":"2y5awK3EvS","value":"aefb8f90-cd49-11ea-a03b-a9b51dcc4b0e-ecommerce-cms.png","url":"https://cdn.cosmicjs.com/aefb8f90-cd49-11ea-a03b-a9b51dcc4b0e-ecommerce-cms.png","imgix_url":"https://imgix.cosmicjs.com/aefb8f90-cd49-11ea-a03b-a9b51dcc4b0e-ecommerce-cms.png"},{"children":null,"type":"text","title":"SEO Title","key":"seo_title","id":"81PJe0z8TQ","value":"Best Headless CMS for Ecommerce"},{"children":null,"type":"html-textarea","title":"Code Example","key":"code_example","id":"LX6WC65zeD","value":""},{"children":[],"type":"repeater","title":"Videos","key":"videos","id":"XHtcjFTjVc","value":"Using Cosmic as a Headless CMS with Gatsby","repeater_fields":[{"title":"Title","key":"title","value":"","type":"text","required":false},{"title":"Link","key":"link","value":"","type":"text","required":false}]}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"kb-articles","created_at":"2020-07-24T01:01:06.368Z","created_by":"5357ef811693be2118000001","created":"2020-07-24T01:01:06.368Z","status":"published","modified_at":"2020-07-24T01:05:59.460Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2020-07-24T01:05:59.460Z","metadata":{"image":{"url":"https://cdn.cosmicjs.com/84df39f0-cd49-11ea-a03b-a9b51dcc4b0e-171-shopping-cart.svg","imgix_url":"https://imgix.cosmicjs.com/84df39f0-cd49-11ea-a03b-a9b51dcc4b0e-171-shopping-cart.svg"},"thumbnail":{"url":"https://cdn.cosmicjs.com/84df39f0-cd49-11ea-a03b-a9b51dcc4b0e-171-shopping-cart.svg","imgix_url":"https://imgix.cosmicjs.com/84df39f0-cd49-11ea-a03b-a9b51dcc4b0e-171-shopping-cart.svg"},"blurb":"

Cosmic is the best CMS for Ecommerce websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

","headline":"Ecommerce","seo_description":"Cosmic is the best CMS for Ecommerce websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.","twitter_card_image":{"url":"https://cdn.cosmicjs.com/aefb8f90-cd49-11ea-a03b-a9b51dcc4b0e-ecommerce-cms.png","imgix_url":"https://imgix.cosmicjs.com/aefb8f90-cd49-11ea-a03b-a9b51dcc4b0e-ecommerce-cms.png"},"seo_title":"Best Headless CMS for Ecommerce","code_example":"","videos":[]}},{"_id":"5ef386e238f28e0008b99777","slug":"contentful-headless-cms","title":"Contentful Headless CMS","content":"

Contentful is a Headless CMS that positions itself as a content management platform to create, manage and publish content on any digital channel. Cosmic is an alternative to Contentful that your developers and content creators will love.


Developers and Creators

Contentful, like Cosmic, offers both a REST and GraphQL API (but Enterprise only!). Check out the Cosmic API docs and the Contentful API docs\r\nto see the difference in approach.

Cosmic provides everything your team of developers and content creators need: powerful and intuitive APIs for developers, and an easy-to-use dashboard for content creators. We've removed all complexity and CMS maintenance, so your team can focus on building great products faster, together.


Limitations

With Contentful, you will see that they put some pretty hard limits on content item count, localization, user roles, and more.

","metafields":[{"children":null,"type":"switch","title":"Include in link list","key":"include_in_link_list","id":"szxvIclbIj","value":true,"options":"yes,no"},{"children":null,"type":"text","title":"Vendor Name","key":"vendor_name","id":"yAFvvyQnSW","value":"Contentful Headless CMS"},{"children":null,"type":"file","title":"Logo","key":"logo","id":"8DCfdgUhpC","value":"5d0764c0-b59d-11ea-b8bd-530a54ec910b-contentful-headless-cms.png","url":"https://cdn.cosmicjs.com/5d0764c0-b59d-11ea-b8bd-530a54ec910b-contentful-headless-cms.png","imgix_url":"https://imgix.cosmicjs.com/5d0764c0-b59d-11ea-b8bd-530a54ec910b-contentful-headless-cms.png"},{"children":null,"type":"textarea","title":"Tech","key":"tech","id":"PQ5iGZ3X5j","value":"Technology not indicated."},{"children":null,"type":"textarea","title":"Scalability","key":"scalability","id":"kQb8WuTLYX","value":"Managed scalability."},{"children":null,"type":"textarea","title":"Security","key":"security","id":"JOv74bXjJz","value":"They manage your dashboard."},{"children":null,"type":"textarea","title":"Maintenance","key":"maintenance","id":"aDTAvzfvbq","value":"They manage your CMS."},{"children":null,"type":"textarea","title":"Caching","key":"caching","id":"fZff7k21vx","value":"Caching included on the API."},{"children":null,"type":"textarea","title":"Media CDN","key":"media_cdn","id":"P6qGrBHKEx","value":"CDN included."},{"children":null,"type":"textarea","title":"Image Processing","key":"image_processing","id":"cMqRxSineo","value":"Image sizes and optimization capabilities."},{"children":null,"type":"textarea","title":"Extendability","key":"extendability","id":"Vj7I5uQKDF","value":"UI extensions and apps."},{"children":null,"type":"textarea","title":"Front end","key":"front_end","id":"I5f614UlTa","value":"Front end is decoupled from the backend CMS."},{"children":null,"type":"textarea","title":"Number of Projects","key":"number_of_projects","id":"UvNuiMlunv","value":"One login, multiple projects."},{"children":null,"type":"html-textarea","title":"Costs","key":"costs","id":"fSqIQfKvVO","value":"

Watch out for a large price cliff to climb from an entry plan to anything larger. You'll be at an Enterprise level taking out a second mortgage on your house before you know it.

"},{"children":null,"type":"text","title":"Cost Value","key":"cost_value","id":"j0PBxUIFjp","value":"HIGH"},{"children":null,"type":"text","title":"Cost Text","key":"cost_text","id":"wByEEvzM66","value":""}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"cms-competitors","created":"2020-06-24T17:01:22.393Z","created_at":"2020-06-24T17:01:22.393Z","modified_at":"2020-06-28T20:52:08.415Z","status":"published","locale":null,"modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-06-28T20:52:08.415Z","unpublish_at":null,"order":8,"metadata":{"include_in_link_list":true,"vendor_name":"Contentful Headless CMS","logo":{"url":"https://cdn.cosmicjs.com/5d0764c0-b59d-11ea-b8bd-530a54ec910b-contentful-headless-cms.png","imgix_url":"https://imgix.cosmicjs.com/5d0764c0-b59d-11ea-b8bd-530a54ec910b-contentful-headless-cms.png"},"tech":"Technology not indicated.","scalability":"Managed scalability.","security":"They manage your dashboard.","maintenance":"They manage your CMS.","caching":"Caching included on the API.","media_cdn":"CDN included.","image_processing":"Image sizes and optimization capabilities.","extendability":"UI extensions and apps.","front_end":"Front end is decoupled from the backend CMS.","number_of_projects":"One login, multiple projects.","costs":"

Watch out for a large price cliff to climb from an entry plan to anything larger. You'll be at an Enterprise level taking out a second mortgage on your house before you know it.

","cost_value":"HIGH","cost_text":""}},{"_id":"62e85ac12335bc000989af15","order":8,"slug":"introducing-build-time-a-new-podcast-by-cosmic","title":"Introducing Build Time: a new podcast by Cosmic","content":"

We are excited to announce our new podcast: Build Time, now available on your favorite podcast platforms.

Watch on YouTube

\r\n
Listen on Spotify


Listen on Apple Podcasts


Why did we start a podcast?
Our mission at Cosmic is to provide the best content management service in the world. And we believe educational content is critical to helping you get the most out of Cosmic.

By offering a podcast, we are giving you another way to learn how to build great content-powered products using Cosmic and other applicable tools and services.

Our goal is for listeners to learn more about features offered by Cosmic and provide insights into techniques, libraries, frameworks, and collaboration tools in the content management and app development space.

Episode #1
Our first episode discusses the article How to use Next.js Image with a headless CMS. We show you how to use the Next.js Image component to optimize the delivery of your Cosmic-hosted images. We also discuss general best practices and techniques to optimize images for page speed and website user experiences.

Show ideas
We are committed to helping our customers build great products using the best technology. And since we are also passionate about building great products, Build Time will serve as a way for us to stay up-to-date with the best techniques to build modern\r\nproducts and share our experience with you.

We are happy to consider your ideas for Cosmic features you would like us to highlight as well as any other topics you would like to see featured in the show. For episode ideas and any guest requests, please reach out to us on Slack , Twitter, or email us.

Happy listening!
Cosmic Education Team

","metafields":[{"children":null,"type":"object","title":"Author","key":"author","id":"rioE7jq830","value":"5ffa1d1e0046b0000799cb7b","required":true,"object_type":"authors","object":{"_id":"5ffa1d1e0046b0000799cb7b","slug":"cosmic","title":"Cosmic","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"ZogvxZg6OL","value":""},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D0qLJ4RPBe","value":"10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2021-01-09T21:16:14.533Z","created_by":"5357ef811693be2118000001","modified_at":"2021-01-09T21:18:26.147Z","created":"2021-01-09T21:16:14.533Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/e55ef990-52bf-11eb-986d-4d7ff5faa3ab-logo.svg","published_at":"2021-01-09T21:18:26.147Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null}},{"children":null,"type":"html-textarea","title":"Teaser","key":"teaser","id":"kXo4utf6vw","value":"

We are excited to announce our new podcast: Build Time, now available on your favorite content platforms.

"},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"Gz3D5i60Do","value":"d6c91900-11f0-11ed-b476-13ceb56f12f2-banner.png","url":"https://cdn.cosmicjs.com/d6c91900-11f0-11ed-b476-13ceb56f12f2-banner.png","imgix_url":"https://imgix.cosmicjs.com/d6c91900-11f0-11ed-b476-13ceb56f12f2-banner.png"},{"children":null,"type":"textarea","title":"SEO Meta Description","key":"seo_meta_description","id":"CKkh7hoDr3","value":"We are excited to announce our new podcast: Build Time, now available on your favorite content platforms."},{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"vrwaWbDMqi","value":"2022-08-02"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2022-08-01T22:59:13.309Z","created_by":"5357ef811693be2118000001","modified_at":"2022-08-02T14:16:12.596Z","created":"2022-08-01T22:59:13.309Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/d6c91900-11f0-11ed-b476-13ceb56f12f2-banner.png","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2022-08-02T14:16:12.596Z","metadata":{"author":{"_id":"5ffa1d1e0046b0000799cb7b","slug":"cosmic","title":"Cosmic","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"ZogvxZg6OL","value":""},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D0qLJ4RPBe","value":"10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2021-01-09T21:16:14.533Z","created_by":"5357ef811693be2118000001","modified_at":"2021-01-09T21:18:26.147Z","created":"2021-01-09T21:16:14.533Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/e55ef990-52bf-11eb-986d-4d7ff5faa3ab-logo.svg","published_at":"2021-01-09T21:18:26.147Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"metadata":{"username":"","profile_picture":{"url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}}},"teaser":"

We are excited to announce our new podcast: Build Time, now available on your favorite content platforms.

","featured_image":{"url":"https://cdn.cosmicjs.com/d6c91900-11f0-11ed-b476-13ceb56f12f2-banner.png","imgix_url":"https://imgix.cosmicjs.com/d6c91900-11f0-11ed-b476-13ceb56f12f2-banner.png"},"seo_meta_description":"We are excited to announce our new podcast: Build Time, now available on your favorite content platforms.","published_date":"2022-08-02"}},{"_id":"5d235b4f957da74a7c43256e","slug":"headless-cms-for-native-apps","title":"Headless CMS for Native Apps","content":"

When you create content in the Cosmic Headless CMS, you're able to deliver it to all your websites and native apps. Create once and deliver everywhere. Content creators are given a web-based Dashboard to create content that iOS and Android apps can consume just like their website. This ensures messaging-consistency and the ability to reach all of your users, regardless of their device.

Cosmic allows you to manage content from a single Dashboard that powers all of your content-powered applications.  

","metafields":[{"children":null,"type":"text","title":"Solution Name","key":"solution_name","id":"gst5u08S95","value":"Native Apps"},{"children":null,"type":"file","title":"Image","key":"image","id":"8M7SMbufZJ","value":"633ad600-9dc1-11e9-a5b4-e5df9f8049d3-Plato.png","url":"https://cdn.cosmicjs.com/633ad600-9dc1-11e9-a5b4-e5df9f8049d3-Plato.png","imgix_url":"https://imgix.cosmicjs.com/633ad600-9dc1-11e9-a5b4-e5df9f8049d3-Plato.png"},{"children":null,"type":"objects","title":"Case Studies","key":"case_studies","id":"Rg9SiJ8pJN","value":"5ade6e0e2b218820ec24bff1,5bd889bf80b80325461575c5,5bea030f3ca4d02ee5b4abbd","object_type":"case-studies","objects":[{"_id":"5ade6e0e2b218820ec24bff1","slug":"medical-realities-delivers-vr-surgical-content","title":"Medical Realities Delivers VR Surgical Content","content":"

The Medical Realties Platform is a technology powerhouse designed to deliver realism and immersion. Delivering high-quality surgical training using Virtual Reality, Medical Realities lets you become immersed while world-class surgeons teach their interactive modules, which includes 360-degree 4K video and a testing system within the application. 



The Medical Realities team needed a way for educators (non-technical editors) to manage content that could be served to VR headsets for consumption by trainees, so they chose Cosmic to manage and deliver their content from the cloud through an API. 



"Cosmic allowed us to easily spin up content models that would allow our non-technical editors to manage the most sophisticated medical VR content out there. Our developers were equipped with robust Docs and Example Apps to get them started and were able to use the bleeding-edge frameworks necessary to run Virtual Reality."

— Joe Marritt, Lead Web Developer 

","metafields":[{"value":"Medical Realities","key":"company","title":"Company","type":"text","children":null},{"value":"Healthcare and Virtual Reality ","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"The Medical Realties Platform is a technology powerhouse designed to deliver realism and immersion. Delivering high-quality surgical training using Virtual Reality, Medical Realities lets you become immersed while world-class surgeons teach their interactive modules, which includes 360-degree 4K video and a testing system within the application. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"0a95ad50-474f-11e8-b969-053c57b3610c-medical-realities-1.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/0a95ad50-474f-11e8-b969-053c57b3610c-medical-realities-1.png","imgix_url":"https://imgix.cosmicjs.com/0a95ad50-474f-11e8-b969-053c57b3610c-medical-realities-1.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-04-23T23:36:46.885Z","created_by":"5716b504e9c686d006000073","created":"2018-04-23T23:36:46.885Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-05-18T17:07:50.800Z"},{"_id":"5bd889bf80b80325461575c5","slug":"plato-delivers-mobile-news-feed-content-with-cosmic-js","title":"Plato Delivers Mobile News Feed Content with Cosmic","content":"

Plato's mission is to bring people together through meaningful & social games. Plato combines chat & games seamlessly, as the first messenger built from the ground up to support full multiplayer games. With a team comprised of Yahoo and gaming veterans plus backing from WhatsApp, Plato is available now on iOS & Android.



Plato had a home-built CMS that, between operational costs and the engineering salaries to maintain it, was costing far too much. The team decided to replace their internal system with Cosmic to allow their developers to build new content models when they need to while empowering editors to manage content without bottlenecking the development team. 

Plato's new tech stack is Golang based and hosted on AWS. Plato's mobile clients, written in Swift and Kotlin, access their news feed content, which is ATOM Syndication Format. The application uses the Cosmic REST API to pull articles and package them into an ATOM-compliant feed. 



"It is refreshing to use an API-first CMS, rather than trying to integrate with a complex, monolithic system and adapt it to our specific use case.”

— Jesse Macnish, Chief Technology Officer  

","metafields":[{"value":"Plato","key":"company","title":"Company","type":"text","children":null},{"value":"Gaming ","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Plato's mission is to bring people together through meaningful & social games. Plato combines chat & games seamlessly, as the first messenger built from the ground up to support full multiplayer games. With a team comprised of Yahoo and gaming veterans plus backing from WhatsApp, Plato is available now on iOS & Android.\n\n\n\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"e6fd2940-1390-11e9-a4d9-67aa1af4f618-pauHfhZ9_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e6fd2940-1390-11e9-a4d9-67aa1af4f618-pauHfhZ9_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e6fd2940-1390-11e9-a4d9-67aa1af4f618-pauHfhZ9_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2018-10-30T16:41:35.346Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2019-01-08T23:23:29.527Z"},{"_id":"5bea030f3ca4d02ee5b4abbd","slug":"killing-floor-2-launches-twisted-christmas-seasons-beatings","title":"Killing Floor 2 Launches Twisted Christmas: Season's Beatings","content":"

Tripwire Interactive recently launched its corporate website on Cosmic and can now easily manage microsite content for each game via a dedicated studio manager as its content creator. Killing Floor 2 is one of the studio's most popular games and incorporates seasonal promotions associated with its product release schedule. 



Twisted Christmas, a seasonal campaign designed to promote Killing Floor 2, has an "Advent Calendar" that debuts a new piece of content everyday leading up to Killing Floor 2's release. The team at Tripwire Interactive was able to build their application and create their marketing landing page easily using Cosmic. Using the Scheduled Publishing feature, they created all of the content for the countdown and set each Object to publish at its respective date. Now they're free to work on other projects knowing their content is publishing on schedule. Read more about how Tripwire Interactive builds apps faster using Cosmic.


"Cosmic allowed us to easily integrate a secure and fast back-end API into our React app. Cosmic fit our needs with its simple web-based dashboard so that members of our marketing team can create, edit, and delete new content on the fly. Our team\r\nhas been enjoying the ease of use with the new system."

— Owen Liversidge, Lead Developer


","metafields":[{"value":"Killing Floor 2","key":"company","title":"Company","type":"text","children":null},{"value":"Gaming","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Twisted Christmas, a seasonal campaign designed to promote Killing Floor 2, has an \"Advent Calendar\" that debuts a new piece of content everyday leading up to Killing Floor 2's release. The team at Tripwire Interactive was able to build their application and create their marketing landing page easily using Cosmic. Using the Scheduled Publishing feature, they created all of the content for the countdown and set each Object to publish at its respective date. Now they're free to work on other projects knowing their content is publishing on schedule. Read more about how Tripwire Interactive builds apps faster using Cosmic.\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"89f06f40-e6cd-11e8-93f0-a94cde6f34a7-KF2_Logo.5b251745.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/89f06f40-e6cd-11e8-93f0-a94cde6f34a7-KF2_Logo.5b251745.png","imgix_url":"https://imgix.cosmicjs.com/89f06f40-e6cd-11e8-93f0-a94cde6f34a7-KF2_Logo.5b251745.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2018-11-12T22:47:43.586Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-11-13T14:43:47.754Z"}]},{"children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"cross-platform-blog","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"react-native-twitter-clone","type":"text","required":false}]}],"type":"repeater","title":"App Slugs","key":"app_slugs","id":"W7yjsqRxnn","value":"cross-platform-blog","repeater_fields":"\"\"\"\"\"[{\"title\":\"Slug\",\"key\":\"slug\",\"value\":\"\",\"type\":\"text\",\"required\":false}]\"\"\"\"\""},{"children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"imgix-editor","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"export-to-csv","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"mux-videos","type":"text","required":false}]}],"type":"repeater","title":"Extension Slugs","key":"extension_slugs","id":"H83sPIFr6X","value":"imgix-editor","repeater_fields":"\"\"\"\"\"[{\"title\":\"Slug\",\"key\":\"slug\",\"value\":\"\",\"type\":\"text\",\"required\":false}]\"\"\"\"\""},{"children":null,"type":"html-textarea","title":"Testimonial","key":"testimonial","id":"JZvZibYtnF","value":"

"It is refreshing to use an API-first CMS, rather than trying to integrate with a complex, monolithic system and adapt it to our specific use case.”

"},{"children":null,"type":"text","title":"Testimonial Credit","key":"testimonial_credit","id":"NHFqLiTjlz","value":"Jesse Macnish, Chief Technology Officer at Plato Chat"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"solutions","created":"2019-07-08T15:03:43.051Z","created_at":"2019-07-08T15:03:43.051Z","modified_at":"2020-08-10T14:05:12.245Z","status":"published","locale":null,"published_at":"2020-05-06T05:37:13.727Z","modified_by":"5357ef811693be2118000001","publish_at":null,"order":8,"unpublish_at":null,"metadata":{"solution_name":"Native Apps","image":{"url":"https://cdn.cosmicjs.com/633ad600-9dc1-11e9-a5b4-e5df9f8049d3-Plato.png","imgix_url":"https://imgix.cosmicjs.com/633ad600-9dc1-11e9-a5b4-e5df9f8049d3-Plato.png"},"case_studies":[{"_id":"5ade6e0e2b218820ec24bff1","slug":"medical-realities-delivers-vr-surgical-content","title":"Medical Realities Delivers VR Surgical Content","content":"

The Medical Realties Platform is a technology powerhouse designed to deliver realism and immersion. Delivering high-quality surgical training using Virtual Reality, Medical Realities lets you become immersed while world-class surgeons teach their interactive modules, which includes 360-degree 4K video and a testing system within the application. 



The Medical Realities team needed a way for educators (non-technical editors) to manage content that could be served to VR headsets for consumption by trainees, so they chose Cosmic to manage and deliver their content from the cloud through an API. 



"Cosmic allowed us to easily spin up content models that would allow our non-technical editors to manage the most sophisticated medical VR content out there. Our developers were equipped with robust Docs and Example Apps to get them started and were able to use the bleeding-edge frameworks necessary to run Virtual Reality."

— Joe Marritt, Lead Web Developer 

","metafields":[{"value":"Medical Realities","key":"company","title":"Company","type":"text","children":null},{"value":"Healthcare and Virtual Reality ","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"The Medical Realties Platform is a technology powerhouse designed to deliver realism and immersion. Delivering high-quality surgical training using Virtual Reality, Medical Realities lets you become immersed while world-class surgeons teach their interactive modules, which includes 360-degree 4K video and a testing system within the application. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"0a95ad50-474f-11e8-b969-053c57b3610c-medical-realities-1.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/0a95ad50-474f-11e8-b969-053c57b3610c-medical-realities-1.png","imgix_url":"https://imgix.cosmicjs.com/0a95ad50-474f-11e8-b969-053c57b3610c-medical-realities-1.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-04-23T23:36:46.885Z","created_by":"5716b504e9c686d006000073","created":"2018-04-23T23:36:46.885Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-05-18T17:07:50.800Z","metadata":{"company":"Medical Realities","industry_type":"Healthcare and Virtual Reality ","teaser":"The Medical Realties Platform is a technology powerhouse designed to deliver realism and immersion. Delivering high-quality surgical training using Virtual Reality, Medical Realities lets you become immersed while world-class surgeons teach their interactive modules, which includes 360-degree 4K video and a testing system within the application. \n","logo":{"url":"https://cdn.cosmicjs.com/0a95ad50-474f-11e8-b969-053c57b3610c-medical-realities-1.png","imgix_url":"https://imgix.cosmicjs.com/0a95ad50-474f-11e8-b969-053c57b3610c-medical-realities-1.png"}}},{"_id":"5bd889bf80b80325461575c5","slug":"plato-delivers-mobile-news-feed-content-with-cosmic-js","title":"Plato Delivers Mobile News Feed Content with Cosmic","content":"

Plato's mission is to bring people together through meaningful & social games. Plato combines chat & games seamlessly, as the first messenger built from the ground up to support full multiplayer games. With a team comprised of Yahoo and gaming veterans plus backing from WhatsApp, Plato is available now on iOS & Android.



Plato had a home-built CMS that, between operational costs and the engineering salaries to maintain it, was costing far too much. The team decided to replace their internal system with Cosmic to allow their developers to build new content models when they need to while empowering editors to manage content without bottlenecking the development team. 

Plato's new tech stack is Golang based and hosted on AWS. Plato's mobile clients, written in Swift and Kotlin, access their news feed content, which is ATOM Syndication Format. The application uses the Cosmic REST API to pull articles and package them into an ATOM-compliant feed. 



"It is refreshing to use an API-first CMS, rather than trying to integrate with a complex, monolithic system and adapt it to our specific use case.”

— Jesse Macnish, Chief Technology Officer  

","metafields":[{"value":"Plato","key":"company","title":"Company","type":"text","children":null},{"value":"Gaming ","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Plato's mission is to bring people together through meaningful & social games. Plato combines chat & games seamlessly, as the first messenger built from the ground up to support full multiplayer games. With a team comprised of Yahoo and gaming veterans plus backing from WhatsApp, Plato is available now on iOS & Android.\n\n\n\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"e6fd2940-1390-11e9-a4d9-67aa1af4f618-pauHfhZ9_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e6fd2940-1390-11e9-a4d9-67aa1af4f618-pauHfhZ9_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e6fd2940-1390-11e9-a4d9-67aa1af4f618-pauHfhZ9_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2018-10-30T16:41:35.346Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2019-01-08T23:23:29.527Z","metadata":{"company":"Plato","industry_type":"Gaming ","teaser":"Plato's mission is to bring people together through meaningful & social games. Plato combines chat & games seamlessly, as the first messenger built from the ground up to support full multiplayer games. With a team comprised of Yahoo and gaming veterans plus backing from WhatsApp, Plato is available now on iOS & Android.\n\n\n\n","logo":{"url":"https://cdn.cosmicjs.com/e6fd2940-1390-11e9-a4d9-67aa1af4f618-pauHfhZ9_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e6fd2940-1390-11e9-a4d9-67aa1af4f618-pauHfhZ9_400x400.jpg"}}},{"_id":"5bea030f3ca4d02ee5b4abbd","slug":"killing-floor-2-launches-twisted-christmas-seasons-beatings","title":"Killing Floor 2 Launches Twisted Christmas: Season's Beatings","content":"

Tripwire Interactive recently launched its corporate website on Cosmic and can now easily manage microsite content for each game via a dedicated studio manager as its content creator. Killing Floor 2 is one of the studio's most popular games and incorporates seasonal promotions associated with its product release schedule. 



Twisted Christmas, a seasonal campaign designed to promote Killing Floor 2, has an "Advent Calendar" that debuts a new piece of content everyday leading up to Killing Floor 2's release. The team at Tripwire Interactive was able to build their application and create their marketing landing page easily using Cosmic. Using the Scheduled Publishing feature, they created all of the content for the countdown and set each Object to publish at its respective date. Now they're free to work on other projects knowing their content is publishing on schedule. Read more about how Tripwire Interactive builds apps faster using Cosmic.


"Cosmic allowed us to easily integrate a secure and fast back-end API into our React app. Cosmic fit our needs with its simple web-based dashboard so that members of our marketing team can create, edit, and delete new content on the fly. Our team\r\nhas been enjoying the ease of use with the new system."

— Owen Liversidge, Lead Developer


","metafields":[{"value":"Killing Floor 2","key":"company","title":"Company","type":"text","children":null},{"value":"Gaming","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Twisted Christmas, a seasonal campaign designed to promote Killing Floor 2, has an \"Advent Calendar\" that debuts a new piece of content everyday leading up to Killing Floor 2's release. The team at Tripwire Interactive was able to build their application and create their marketing landing page easily using Cosmic. Using the Scheduled Publishing feature, they created all of the content for the countdown and set each Object to publish at its respective date. Now they're free to work on other projects knowing their content is publishing on schedule. Read more about how Tripwire Interactive builds apps faster using Cosmic.\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"89f06f40-e6cd-11e8-93f0-a94cde6f34a7-KF2_Logo.5b251745.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/89f06f40-e6cd-11e8-93f0-a94cde6f34a7-KF2_Logo.5b251745.png","imgix_url":"https://imgix.cosmicjs.com/89f06f40-e6cd-11e8-93f0-a94cde6f34a7-KF2_Logo.5b251745.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2018-11-12T22:47:43.586Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-11-13T14:43:47.754Z","metadata":{"company":"Killing Floor 2","industry_type":"Gaming","teaser":"Twisted Christmas, a seasonal campaign designed to promote Killing Floor 2, has an \"Advent Calendar\" that debuts a new piece of content everyday leading up to Killing Floor 2's release. The team at Tripwire Interactive was able to build their application and create their marketing landing page easily using Cosmic. Using the Scheduled Publishing feature, they created all of the content for the countdown and set each Object to publish at its respective date. Now they're free to work on other projects knowing their content is publishing on schedule. Read more about how Tripwire Interactive builds apps faster using Cosmic.\n","logo":{"url":"https://cdn.cosmicjs.com/89f06f40-e6cd-11e8-93f0-a94cde6f34a7-KF2_Logo.5b251745.png","imgix_url":"https://imgix.cosmicjs.com/89f06f40-e6cd-11e8-93f0-a94cde6f34a7-KF2_Logo.5b251745.png"}}}],"app_slugs":[{"slug":"cross-platform-blog"},{"slug":"react-native-twitter-clone"}],"extension_slugs":[{"slug":"imgix-editor"},{"slug":"export-to-csv"},{"slug":"mux-videos"}],"testimonial":"

"It is refreshing to use an API-first CMS, rather than trying to integrate with a complex, monolithic system and adapt it to our specific use case.”

","testimonial_credit":"Jesse Macnish, Chief Technology Officer at Plato Chat"}},{"_id":"57a93b7f34d05c0c23000003","order":8,"slug":"partners","title":"Partners","content":"
","metafields":[{"value":"

Whether you are a designer, developer, consulting firm or agency, there are ways to partner with us to build slick websites & apps, and share in the rewards. Browse the Cosmic JS Partner Programs below. 

","key":"intro_text","title":"Intro Text","type":"html-textarea","children":null},{"value":"

Developer Program

No matter what your preferred programming language, we’re interested in the applications you build becoming new content-ready apps in our app store. You’ll take home 70% of the price of the purchased app.  Check out some examples of possible payouts for you.

InstallsApp PriceYour Payout
1000$99$69,300
100$199$13,930
50$299$10,465
","key":"developer_program","title":"Developer Program","type":"html-textarea","children":null},{"value":"

Agency + Consulting Program

You’re going to save a lot of time and money using Cosmic JS anyway, but we realize the tech recommendations you make reflect your work, so to say thanks, we’ve formed the agency partner program. Set up admin buckets and publish content on behalf of your clients, and let them contribute as well! You can split billing among buckets, by accounts, really however you’d like! We’ll take 15% off of the cost of the plan to say \"thanks for your support\". Below are examples of payouts based on different monthly tier pricing.

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Monthly Bucket PlanMonthly Retail Price EachMonthly Credit Accrual
300 Small 
$9$405
100 Medium$49 $735
50 Large$99$742.50
","key":"agency_program","title":"Agency Program","type":"html-textarea","children":null},{"value":"

Affiliate Program

Do you have an audience that can benefit from signing up with Cosmic JS? Whether you are running a developer blog, are very active on social media, or would just like to send some friends a link, we make it easy for you to spread the good word about Cosmic JS and benefit in the process. By signing up as an Affiliate Partner you will receive a custom link that you can share with your audience and friends. When the user signs up and upgrades to a paid account, you will receive a $10 credit applied to your account.

","key":"affiliate_program","title":"Affiliate Program","type":"html-textarea","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"pages","created":"2016-08-09T02:10:07.868Z","status":"published","modified":"2016-08-17T23:04:24.705Z","modified_at":"2016-09-30T15:21:31.750Z","modified_by":"5357ef811693be2118000001","metadata":{"intro_text":"

Whether you are a designer, developer, consulting firm or agency, there are ways to partner with us to build slick websites & apps, and share in the rewards. Browse the Cosmic JS Partner Programs below. 

","developer_program":"

Developer Program

No matter what your preferred programming language, we’re interested in the applications you build becoming new content-ready apps in our app store. You’ll take home 70% of the price of the purchased app.  Check out some examples of possible payouts for you.

InstallsApp PriceYour Payout
1000$99$69,300
100$199$13,930
50$299$10,465
","agency_program":"

Agency + Consulting Program

You’re going to save a lot of time and money using Cosmic JS anyway, but we realize the tech recommendations you make reflect your work, so to say thanks, we’ve formed the agency partner program. Set up admin buckets and publish content on behalf of your clients, and let them contribute as well! You can split billing among buckets, by accounts, really however you’d like! We’ll take 15% off of the cost of the plan to say \"thanks for your support\". Below are examples of payouts based on different monthly tier pricing.

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Monthly Bucket PlanMonthly Retail Price EachMonthly Credit Accrual
300 Small 
$9$405
100 Medium$49 $735
50 Large$99$742.50
","affiliate_program":"

Affiliate Program

Do you have an audience that can benefit from signing up with Cosmic JS? Whether you are running a developer blog, are very active on social media, or would just like to send some friends a link, we make it easy for you to spread the good word about Cosmic JS and benefit in the process. By signing up as an Affiliate Partner you will receive a custom link that you can share with your audience and friends. When the user signs up and upgrades to a paid account, you will receive a $10 credit applied to your account.

"}},{"_id":"6297b10fefc57200099ac551","order":9,"slug":"new-docs-examples","title":"New docs examples","content":"

We've added new examples to the Cosmic documentation to help you learn common Cosmic API methods and use cases. The new examples feature simple copy + paste code for Node.js, cURL, GraphQL, and the Cosmic CLI.

You can run the following code as is or add your Bucket access keys to connect to your Bucket content. Learn all of the available examples and follow along with the code examples below which use the Cosmic NPM module.


Go to the Cosmic docs to check out the new examples.


Setup & running Node.js

To run the following code examples, make sure you have Node.js installed on your machine. Then run the following setup commands in your terminal to make the Cosmic NPM module available in a new Node.js project:

mkdir cosmic-example\r\ncd cosmic-example\r\nyarn add cosmicjs

Add any of the code examples below to an index.js file and run node to see the results:

node index.js


Basic queries

The basic queries show you how to get a list of Objects in your Bucket by Object Type as well as getting a single Object in your Bucket by Object slug.

Get Objects by type:

\">

Get single Object by slug:

\">

Advanced queries

The advanced queries show you some of the capabilities to get content by more detailed search options such as metadata values, $gte (greater than or equal to), $lte(less than or equal to), $ne (not equal to), and more.

Search Objects by metadata value:

\">

Search Objects by metadata number value less than or equal to using $lte:

\">

Search Objects not equal to metadata value using $ne:

\">

Check out more examples of advanced queries in the docs.


Other Examples

Other examples include adding a new Object and uploading media using React Dropzone.  Copy + paste the code, add your Bucket access keys, and run the code to learn how to add content to your Cosmic Bucket.


We hope you enjoy these additions to our extensive documentation to help you better implement Cosmic-powered content into your websites and apps. Check out the Cosmic docs examples section and let us know what you think!

","metafields":[{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"P9ObpddZrW","value":"2022-06-07"},{"children":null,"type":"object","title":"Author","key":"author","id":"NHPoJDULTG","value":"5ffa1d1e0046b0000799cb7b","object_type":"authors","object":{"_id":"5ffa1d1e0046b0000799cb7b","slug":"cosmic","title":"Cosmic","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"ZogvxZg6OL","value":""},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D0qLJ4RPBe","value":"10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2021-01-09T21:16:14.533Z","created_by":"5357ef811693be2118000001","modified_at":"2021-01-09T21:18:26.147Z","created":"2021-01-09T21:16:14.533Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/e55ef990-52bf-11eb-986d-4d7ff5faa3ab-logo.svg","published_at":"2021-01-09T21:18:26.147Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null}},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"KIOF4zUS7p","value":"","url":null,"imgix_url":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"changelogs","created_at":"2022-06-01T18:33:51.901Z","created_by":"5357ef811693be2118000001","modified_at":"2022-06-07T16:52:39.424Z","created":"2022-06-01T18:33:51.901Z","status":"published","thumbnail":"","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2022-06-07T16:52:39.424Z","metadata":{"published_date":"2022-06-07","author":{"_id":"5ffa1d1e0046b0000799cb7b","slug":"cosmic","title":"Cosmic","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"ZogvxZg6OL","value":""},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D0qLJ4RPBe","value":"10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2021-01-09T21:16:14.533Z","created_by":"5357ef811693be2118000001","modified_at":"2021-01-09T21:18:26.147Z","created":"2021-01-09T21:16:14.533Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/e55ef990-52bf-11eb-986d-4d7ff5faa3ab-logo.svg","published_at":"2021-01-09T21:18:26.147Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"metadata":{"username":"","profile_picture":{"url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}}},"featured_image":{"url":null,"imgix_url":null}}},{"_id":"5d4985bc171a3305b388670a","order":9,"slug":"cms-software-for-company-websites","title":"CMS Software for Company Websites","content":"

Cosmic provides flexible CMS Software for developers and content creators managing content for company websites. Companies manage content using Cosmic's CMS Software because the Dashboard is simple and intuitive to manage content, workflows and team members. 

Teams using CMS Software to power blog content don't have to maintain their own server and content management system. Teams are able to focus on building modern apps and websites, instead of maintaining infrastructure.  


What is Headless CMS Software?

Headless CMS Software works by providing non-technical editors with a Dashboard UI to model, create and publish content while providing developers with API tools and resources to integrate content with any website or app. By decoupling content from code, teams create a central content repository that can power all of their content-powered applications. 

","metafields":[{"children":null,"type":"text","title":"Solution Name","key":"solution_name","id":"U02jcO67T6","value":"CMS Software for Company Websites"},{"children":null,"type":"file","title":"Image","key":"image","id":"SyWXpuYiK0","value":"b6b99c30-b851-11e9-9bf7-1514bfd4b10b-caed7450-9dbd-11e9-a5b4-e5df9f8049d3-Company-Websites.png","url":"https://cdn.cosmicjs.com/b6b99c30-b851-11e9-9bf7-1514bfd4b10b-caed7450-9dbd-11e9-a5b4-e5df9f8049d3-Company-Websites.png","imgix_url":"https://imgix.cosmicjs.com/b6b99c30-b851-11e9-9bf7-1514bfd4b10b-caed7450-9dbd-11e9-a5b4-e5df9f8049d3-Company-Websites.png"},{"children":null,"type":"objects","title":"Case Studies","key":"case_studies","id":"qQFLzA3hTZ","value":"5bd206599dca8d10e941b69b,5b86a2c6016461100076e5c7,5bd88cc2dcf8c4248f3ccc4b","object_type":"case-studies","objects":[{"_id":"5bd206599dca8d10e941b69b","slug":"derive-systems-runs-on-cosmic-js","title":"Derive Systems runs on Cosmic","content":"

Derive Systems  is a leading automotive technology company with over 2 million software installations powering upgraded experiences for drivers on the road today. Derive  connects vehicles and their engines to the digital world, enabling individuals and fleets to take control and optimize for performance, fuel efficiency, safety, and more. 



The team at Derive Systems was in search of a headless CMS that would give their developers flexibility out-of-the-box while enabling their content managers to manage content in a familiar and modern CMS Dashboard. They chose Cosmic due to its easy content modeling tools for their Blog, Press, About and Team Sections. Derive now runs a Next.js, React and Express framework that utilizes the Cosmic GraphQL API to deliver its content.




“Leveraging the Cosmic GraphQL API allows for easy updates to our news and blog, while keeping payloads small and fast. Integration with Cosmic could not be easier thanks to their great support. We look forward to developing more features on the platform.”


— Dustin Brink, Front End Developer at Derive Systems 

","metafields":[{"value":"Derive Systems","key":"company","title":"Company","type":"text","children":null},{"value":"Automotive","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Derive Systems  is a leading automotive technology company with over 2 million software installations powering upgraded experiences for drivers on the road today. Derive  connects vehicles and their engines to the digital world, enabling individuals and fleets to take control and optimize for performance, fuel efficiency, safety, and more. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"60aac7a0-ded7-11e8-86d0-2998be663226-derive.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/60aac7a0-ded7-11e8-86d0-2998be663226-derive.jpg","imgix_url":"https://imgix.cosmicjs.com/60aac7a0-ded7-11e8-86d0-2998be663226-derive.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2018-10-25T18:07:21.426Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-11-15T14:51:19.007Z"},{"_id":"5b86a2c6016461100076e5c7","slug":"consolidating-the-content-chaos-tac-switches-from-wordpress-to-cosmic-js","title":"Consolidating the Content Chaos: TAC Switches from WordPress to Cosmic","content":"

TAC - The Arnold Companies is among the largest fuel wholesalers and aviation service providers in the country. Steady growth, positive financial results and a diverse industry base consistently make TAC one of the top private companies in the US. TAC is made up of many separate brands under one corporate identity, including TAC Energy, TAC Air and Keystone Aviation. 



With TAC's old website built as stand-alone sites that linked to each other on a WordPress foundation, the user experience was over-complicated and required too many steps for visitors to find what they were looking for. Being WordPress-based, it did not allow for clear information architecture to promote the different business lines within the portfolio. 

Through a structured RFP process to identify a partner in re-thinking the customer experience and content management system, interactive agency Simple Media and Cosmic were selected. Other platform options included WordPress, Drupal, and Joomla. 

Focused on building with a mobile-first approach and consolidating the chaos of the existing number of brand sites to bring harmony to the four brands and ease-of-use in content management, TAC found an outstanding and simple solution in Cosmic. 



To learn more about the development, Brandon Reid, Lead Developer on the project breaks down the stack: 

Development Team: "TAC’s backend is powered by Node, Next.js, and Express. Next.js is used for server side rendering capabilities for SEO optimization as well as site routing. Next.js also makes it easy to integrate with Babel and Webpack since they are built right in. The team used Next.js routing API to rendering page templates for pages that have the same design layouts. TAC’s frontend is powered by React.js and the world's most popular react UI framework, Material UI. In order to use Material UI with SSR, the team had to wrap the site in a JSSProvider and use CSSBaseline. For development they used Eslint as a linter for a cleaner and more consistent codebase. 



Since TAC uses ES6 JavaScript, the team had to also implement a very small amount of polyfill to transpile ES6 to ES5 in order for the site to work with IE11. Some notable node modules used were: 



TAC's development team started building the site by using Cosmic’s React Starter, which helped them get jump-started right away. Building TAC started with implementing all globals for the site (Header, Footer, Favicon, etc), so the developers quickly created some JavaScript request functions to pull data from the Cosmic Buckets using Cosmic’s Node API. The team added those global components to the sites main _app layout, so every page would be wrapped and rendered with those globals. From there they analyzed what pages would have reusable components across multiple pages or the site, and created component views for those pages based off their analysis. 

TAC was then able to efficiently knock out page designs and implement object types in the Cosmic bucket on the fly. As TAC got closer to site launch, they noticed compatibility issues with IE11 and had to come up with a solution. At first, they were going to do a browser sniff in the codebase to display something that would work on IE. Instead, the team implemented Babel and some polyfills to solve their  compatibility issues."





"Our goal in this project was not to reinvent the brands, but to simplify the communication and process for website content management. Cosmic has allowed us to become current in our presentation and relevant in our content push. Plus, the site is easier to use for visitors and staff alike."

— Tad Perryman, VP of Marketing, TAC - The Arnold Companies

","metafields":[{"value":"The Arnold Companies","key":"company","title":"Company","type":"text","children":null},{"value":"Energy / Aviation","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"TAC - The Arnold Companies is among the largest fuel wholesalers and aviation service providers in the country. Steady growth, positive financial results and a diverse industry base consistently make TAC one of the top private companies in the US. TAC is made up of many separate brands under one corporate identity, including TAC Energy, TAC Air and Keystone Aviation. \n\n\n\n\n\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"9aaed6c0-b04d-11e8-8760-cbfd96ceee1a-30210740-966e-11e8-ab08-31f1ed4cd97d-tac-full-logo.svg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/9aaed6c0-b04d-11e8-8760-cbfd96ceee1a-30210740-966e-11e8-ab08-31f1ed4cd97d-tac-full-logo.svg","imgix_url":"https://imgix.cosmicjs.com/9aaed6c0-b04d-11e8-8760-cbfd96ceee1a-30210740-966e-11e8-ab08-31f1ed4cd97d-tac-full-logo.svg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-03-01T22:26:36.367Z","created_by":"5716b504e9c686d006000073","created":"2018-08-29T13:42:30.982Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-12-20T14:40:21.379Z"},{"_id":"5bd88cc2dcf8c4248f3ccc4b","slug":"tripwire-interactive-builds-a-react-corporate-website","title":"Tripwire Interactive Builds a React Corporate Website","content":"

Tripwire Interactive is an entertainment software developer and publisher founded in 2005 by the award-winning mod team and winners of the 2004 edition of the “$1,000,000 Make Something Unreal” competition.



Gamers want games that grab their attention and will keep them coming back for more. Tripwire Interactive has been producing those types of games since the first Red Orchestra mod that won the "Make Something Unreal" competition in 2004. Since then Tripwire has won numerous Multiplayer and FPS Game of the Year awards from top editorial sites and millions have played a Red Orchestra or Killing Floor game, with an average play time of over 40 hours, per player, per game! 



Historically using an Umbraco system, The Tripwire Interactive team needed an easy way for their marketers to maintain marketing website content for their games' parent brand. Each new game needed a dedicated landing page with marketing content. Blog,\r\nCareer and Press feeds needed to be managed by the marketing team without bottlenecking the developers. The Tripwire Interactive team chose Cosmic as their dynamic content management solution as they built their new corporate website on a modern React\r\nstack. 


"Cosmic allowed us to easily integrate a secure and fast back-end API into our React app. Cosmic fit our needs with its simple web-based dashboard so that members of our marketing team can create, edit, and delete new content on the fly. Our team\r\nhas been enjoying the ease of use with the new system."

— Owen Liversidge, Lead Developer


","metafields":[{"value":"Tripwire Interactive","key":"company","title":"Company","type":"text","children":null},{"value":"Gaming","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Gamers want games that grab their attention and will keep them coming back for more. Tripwire Interactive has been producing those types of games since the first Red Orchestra mod that won the \"Make Something Unreal\" competition in 2004. Since then Tripwire has won numerous Multiplayer and FPS Game of the Year awards from top editorial sites and millions have played a Red Orchestra or Killing Floor game, with an average play time of over 40 hours, per player, per game! \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"bcc07550-dc64-11e8-a330-792a8fc6e55e-u7wjhcn6_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/bcc07550-dc64-11e8-a330-792a8fc6e55e-u7wjhcn6_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/bcc07550-dc64-11e8-a330-792a8fc6e55e-u7wjhcn6_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2018-10-30T16:54:26.538Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-11-08T20:12:40.566Z"}]},{"children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"simple-react-blog","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"conference-website","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"gatsby-agency-portfolio","type":"text","required":false}]}],"type":"repeater","title":"App Slugs","key":"app_slugs","id":"LBAeql2XWM","value":"simple-react-blog","repeater_fields":[{"title":"Slug","key":"slug","value":"","type":"text","required":false}]},{"children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"wordpress-importer","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"export-to-csv","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"algolia-search","type":"text","required":false}]}],"type":"repeater","title":"Extension SLugs","key":"extension_slugs","id":"hTbR0IThu4","value":"wordpress-importer","repeater_fields":[{"title":"Slug","key":"slug","value":"","type":"text","required":false}]},{"children":null,"type":"textarea","title":"Testimonial","key":"testimonial","id":"pnyX7ReSPS","value":"“Leveraging the Cosmic GraphQL API allows for easy updates to our news and blog, while keeping payloads small and fast. Integration with Cosmic could not be easier thanks to their great support. We look forward to developing more features on the platform.”"},{"children":null,"type":"text","title":"Testimonial Credit","key":"testimonial_credit","id":"ary4eMgR2a","value":"Dustin Brink, Front End Developer at Derive Systems"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"solutions","created_at":"2019-08-05T20:18:17.006Z","created_by":"5716b504e9c686d006000073","modified_at":"2020-05-06T05:34:08.396Z","created":"2019-08-06T13:50:52.995Z","status":"published","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-05-06T05:34:08.396Z","unpublish_at":null,"metadata":{"solution_name":"CMS Software for Company Websites","image":{"url":"https://cdn.cosmicjs.com/b6b99c30-b851-11e9-9bf7-1514bfd4b10b-caed7450-9dbd-11e9-a5b4-e5df9f8049d3-Company-Websites.png","imgix_url":"https://imgix.cosmicjs.com/b6b99c30-b851-11e9-9bf7-1514bfd4b10b-caed7450-9dbd-11e9-a5b4-e5df9f8049d3-Company-Websites.png"},"case_studies":[{"_id":"5bd206599dca8d10e941b69b","slug":"derive-systems-runs-on-cosmic-js","title":"Derive Systems runs on Cosmic","content":"

Derive Systems  is a leading automotive technology company with over 2 million software installations powering upgraded experiences for drivers on the road today. Derive  connects vehicles and their engines to the digital world, enabling individuals and fleets to take control and optimize for performance, fuel efficiency, safety, and more. 



The team at Derive Systems was in search of a headless CMS that would give their developers flexibility out-of-the-box while enabling their content managers to manage content in a familiar and modern CMS Dashboard. They chose Cosmic due to its easy content modeling tools for their Blog, Press, About and Team Sections. Derive now runs a Next.js, React and Express framework that utilizes the Cosmic GraphQL API to deliver its content.




“Leveraging the Cosmic GraphQL API allows for easy updates to our news and blog, while keeping payloads small and fast. Integration with Cosmic could not be easier thanks to their great support. We look forward to developing more features on the platform.”


— Dustin Brink, Front End Developer at Derive Systems 

","metafields":[{"value":"Derive Systems","key":"company","title":"Company","type":"text","children":null},{"value":"Automotive","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Derive Systems  is a leading automotive technology company with over 2 million software installations powering upgraded experiences for drivers on the road today. Derive  connects vehicles and their engines to the digital world, enabling individuals and fleets to take control and optimize for performance, fuel efficiency, safety, and more. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"60aac7a0-ded7-11e8-86d0-2998be663226-derive.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/60aac7a0-ded7-11e8-86d0-2998be663226-derive.jpg","imgix_url":"https://imgix.cosmicjs.com/60aac7a0-ded7-11e8-86d0-2998be663226-derive.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2018-10-25T18:07:21.426Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-11-15T14:51:19.007Z","metadata":{"company":"Derive Systems","industry_type":"Automotive","teaser":"Derive Systems  is a leading automotive technology company with over 2 million software installations powering upgraded experiences for drivers on the road today. Derive  connects vehicles and their engines to the digital world, enabling individuals and fleets to take control and optimize for performance, fuel efficiency, safety, and more. \n","logo":{"url":"https://cdn.cosmicjs.com/60aac7a0-ded7-11e8-86d0-2998be663226-derive.jpg","imgix_url":"https://imgix.cosmicjs.com/60aac7a0-ded7-11e8-86d0-2998be663226-derive.jpg"}}},{"_id":"5b86a2c6016461100076e5c7","slug":"consolidating-the-content-chaos-tac-switches-from-wordpress-to-cosmic-js","title":"Consolidating the Content Chaos: TAC Switches from WordPress to Cosmic","content":"

TAC - The Arnold Companies is among the largest fuel wholesalers and aviation service providers in the country. Steady growth, positive financial results and a diverse industry base consistently make TAC one of the top private companies in the US. TAC is made up of many separate brands under one corporate identity, including TAC Energy, TAC Air and Keystone Aviation. 



With TAC's old website built as stand-alone sites that linked to each other on a WordPress foundation, the user experience was over-complicated and required too many steps for visitors to find what they were looking for. Being WordPress-based, it did not allow for clear information architecture to promote the different business lines within the portfolio. 

Through a structured RFP process to identify a partner in re-thinking the customer experience and content management system, interactive agency Simple Media and Cosmic were selected. Other platform options included WordPress, Drupal, and Joomla. 

Focused on building with a mobile-first approach and consolidating the chaos of the existing number of brand sites to bring harmony to the four brands and ease-of-use in content management, TAC found an outstanding and simple solution in Cosmic. 



To learn more about the development, Brandon Reid, Lead Developer on the project breaks down the stack: 

Development Team: "TAC’s backend is powered by Node, Next.js, and Express. Next.js is used for server side rendering capabilities for SEO optimization as well as site routing. Next.js also makes it easy to integrate with Babel and Webpack since they are built right in. The team used Next.js routing API to rendering page templates for pages that have the same design layouts. TAC’s frontend is powered by React.js and the world's most popular react UI framework, Material UI. In order to use Material UI with SSR, the team had to wrap the site in a JSSProvider and use CSSBaseline. For development they used Eslint as a linter for a cleaner and more consistent codebase. 



Since TAC uses ES6 JavaScript, the team had to also implement a very small amount of polyfill to transpile ES6 to ES5 in order for the site to work with IE11. Some notable node modules used were: 



TAC's development team started building the site by using Cosmic’s React Starter, which helped them get jump-started right away. Building TAC started with implementing all globals for the site (Header, Footer, Favicon, etc), so the developers quickly created some JavaScript request functions to pull data from the Cosmic Buckets using Cosmic’s Node API. The team added those global components to the sites main _app layout, so every page would be wrapped and rendered with those globals. From there they analyzed what pages would have reusable components across multiple pages or the site, and created component views for those pages based off their analysis. 

TAC was then able to efficiently knock out page designs and implement object types in the Cosmic bucket on the fly. As TAC got closer to site launch, they noticed compatibility issues with IE11 and had to come up with a solution. At first, they were going to do a browser sniff in the codebase to display something that would work on IE. Instead, the team implemented Babel and some polyfills to solve their  compatibility issues."





"Our goal in this project was not to reinvent the brands, but to simplify the communication and process for website content management. Cosmic has allowed us to become current in our presentation and relevant in our content push. Plus, the site is easier to use for visitors and staff alike."

— Tad Perryman, VP of Marketing, TAC - The Arnold Companies

","metafields":[{"value":"The Arnold Companies","key":"company","title":"Company","type":"text","children":null},{"value":"Energy / Aviation","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"TAC - The Arnold Companies is among the largest fuel wholesalers and aviation service providers in the country. Steady growth, positive financial results and a diverse industry base consistently make TAC one of the top private companies in the US. TAC is made up of many separate brands under one corporate identity, including TAC Energy, TAC Air and Keystone Aviation. \n\n\n\n\n\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"9aaed6c0-b04d-11e8-8760-cbfd96ceee1a-30210740-966e-11e8-ab08-31f1ed4cd97d-tac-full-logo.svg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/9aaed6c0-b04d-11e8-8760-cbfd96ceee1a-30210740-966e-11e8-ab08-31f1ed4cd97d-tac-full-logo.svg","imgix_url":"https://imgix.cosmicjs.com/9aaed6c0-b04d-11e8-8760-cbfd96ceee1a-30210740-966e-11e8-ab08-31f1ed4cd97d-tac-full-logo.svg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-03-01T22:26:36.367Z","created_by":"5716b504e9c686d006000073","created":"2018-08-29T13:42:30.982Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-12-20T14:40:21.379Z","metadata":{"company":"The Arnold Companies","industry_type":"Energy / Aviation","teaser":"TAC - The Arnold Companies is among the largest fuel wholesalers and aviation service providers in the country. Steady growth, positive financial results and a diverse industry base consistently make TAC one of the top private companies in the US. TAC is made up of many separate brands under one corporate identity, including TAC Energy, TAC Air and Keystone Aviation. \n\n\n\n\n\n","logo":{"url":"https://cdn.cosmicjs.com/9aaed6c0-b04d-11e8-8760-cbfd96ceee1a-30210740-966e-11e8-ab08-31f1ed4cd97d-tac-full-logo.svg","imgix_url":"https://imgix.cosmicjs.com/9aaed6c0-b04d-11e8-8760-cbfd96ceee1a-30210740-966e-11e8-ab08-31f1ed4cd97d-tac-full-logo.svg"}}},{"_id":"5bd88cc2dcf8c4248f3ccc4b","slug":"tripwire-interactive-builds-a-react-corporate-website","title":"Tripwire Interactive Builds a React Corporate Website","content":"

Tripwire Interactive is an entertainment software developer and publisher founded in 2005 by the award-winning mod team and winners of the 2004 edition of the “$1,000,000 Make Something Unreal” competition.



Gamers want games that grab their attention and will keep them coming back for more. Tripwire Interactive has been producing those types of games since the first Red Orchestra mod that won the "Make Something Unreal" competition in 2004. Since then Tripwire has won numerous Multiplayer and FPS Game of the Year awards from top editorial sites and millions have played a Red Orchestra or Killing Floor game, with an average play time of over 40 hours, per player, per game! 



Historically using an Umbraco system, The Tripwire Interactive team needed an easy way for their marketers to maintain marketing website content for their games' parent brand. Each new game needed a dedicated landing page with marketing content. Blog,\r\nCareer and Press feeds needed to be managed by the marketing team without bottlenecking the developers. The Tripwire Interactive team chose Cosmic as their dynamic content management solution as they built their new corporate website on a modern React\r\nstack. 


"Cosmic allowed us to easily integrate a secure and fast back-end API into our React app. Cosmic fit our needs with its simple web-based dashboard so that members of our marketing team can create, edit, and delete new content on the fly. Our team\r\nhas been enjoying the ease of use with the new system."

— Owen Liversidge, Lead Developer


","metafields":[{"value":"Tripwire Interactive","key":"company","title":"Company","type":"text","children":null},{"value":"Gaming","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Gamers want games that grab their attention and will keep them coming back for more. Tripwire Interactive has been producing those types of games since the first Red Orchestra mod that won the \"Make Something Unreal\" competition in 2004. Since then Tripwire has won numerous Multiplayer and FPS Game of the Year awards from top editorial sites and millions have played a Red Orchestra or Killing Floor game, with an average play time of over 40 hours, per player, per game! \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"bcc07550-dc64-11e8-a330-792a8fc6e55e-u7wjhcn6_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/bcc07550-dc64-11e8-a330-792a8fc6e55e-u7wjhcn6_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/bcc07550-dc64-11e8-a330-792a8fc6e55e-u7wjhcn6_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2018-10-30T16:54:26.538Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-11-08T20:12:40.566Z","metadata":{"company":"Tripwire Interactive","industry_type":"Gaming","teaser":"Gamers want games that grab their attention and will keep them coming back for more. Tripwire Interactive has been producing those types of games since the first Red Orchestra mod that won the \"Make Something Unreal\" competition in 2004. Since then Tripwire has won numerous Multiplayer and FPS Game of the Year awards from top editorial sites and millions have played a Red Orchestra or Killing Floor game, with an average play time of over 40 hours, per player, per game! \n","logo":{"url":"https://cdn.cosmicjs.com/bcc07550-dc64-11e8-a330-792a8fc6e55e-u7wjhcn6_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/bcc07550-dc64-11e8-a330-792a8fc6e55e-u7wjhcn6_400x400.jpg"}}}],"app_slugs":[{"slug":"simple-react-blog"},{"slug":"conference-website"},{"slug":"gatsby-agency-portfolio"}],"extension_slugs":[{"slug":"wordpress-importer"},{"slug":"export-to-csv"},{"slug":"algolia-search"}],"testimonial":"“Leveraging the Cosmic GraphQL API allows for easy updates to our news and blog, while keeping payloads small and fast. Integration with Cosmic could not be easier thanks to their great support. We look forward to developing more features on the platform.”","testimonial_credit":"Dustin Brink, Front End Developer at Derive Systems"}},{"_id":"596f7774804e4a0c61000098","order":9,"slug":"phil-andrews","title":"Phil Andrews","content":"","metafields":[{"value":"1b623f80-6c95-11e7-95fb-e75796c08fcc-gOyHLnup_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/1b623f80-6c95-11e7-95fb-e75796c08fcc-gOyHLnup_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/1b623f80-6c95-11e7-95fb-e75796c08fcc-gOyHLnup_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-06-27T16:56:57.686Z","created_by":"5357ef811693be2118000001","created":"2017-07-19T15:15:00.525Z","status":"published","modified_at":"2017-07-19T15:15:35.891Z","modified_by":"5716b504e9c686d006000073","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/1b623f80-6c95-11e7-95fb-e75796c08fcc-gOyHLnup_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/1b623f80-6c95-11e7-95fb-e75796c08fcc-gOyHLnup_400x400.jpg"}}},{"_id":"538a103e3ff8db6d77000003","slug":"about","title":"About","content":"

Cosmic is a hosted and enterprise headless CMS solution that helps teams build content-powered applications faster, easier, together. Developers get powerful API tools and content creators get an easy-to-use dashboard to create rich content experiences.


Our Goals
Our goal is to make the application development process faster, easier, and more scalable for teams of all sizes. In a time when content remains king in the digital landscape, content velocity with a headless CMS is a powerful tool for any business, and it's our goal to empower these future-minded companies.


Our Commitment
Teams rely on our infrastructure for mission-critical content delivery, and we take this responsibility very seriously. We are committed to customer success by providing a secure, dependable, and performant content management solution for our customers. Our technology and customer support is unmatched in the industry and building trust in our service is our top priority.

","metafields":[{"children":null,"type":"file","title":"Logos","key":"logos","id":"Ffb9h9cfiC","value":"26167900-1a9f-11e9-ac35-750902641903-Cosmic-JS-logos.zip","url":"https://cdn.cosmicjs.com/26167900-1a9f-11e9-ac35-750902641903-Cosmic-JS-logos.zip","imgix_url":"https://cdn.cosmicjs.com/26167900-1a9f-11e9-ac35-750902641903-Cosmic-JS-logos.zip"},{"children":[{"type":"repeating_item","children":[{"title":"Person","key":"person","value":"57859a0f1621de245c0004c5","type":"object","required":false,"object_type":"people","object":{"_id":"57859a0f1621de245c0004c5","slug":"tony-spiro-ceo-co-founder","title":"Tony Spiro, CEO & Co-Founder","content":"

Tony Spiro is an experienced software engineer who knows the pain of content management in a team setting. From his experience leading digital teams from startups to Fortune 500 companies, he started Cosmic JS to solve his own problems in application development.

He is thrilled to help teams around the world use Cosmic JS to build amazing products together.

","metafields":[{"value":"3c056190-03cf-11e9-a674-8b21bc2bc0e1-me.jpg","key":"image","title":"Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/3c056190-03cf-11e9-a674-8b21bc2bc0e1-me.jpg","imgix_url":"https://imgix.cosmicjs.com/3c056190-03cf-11e9-a674-8b21bc2bc0e1-me.jpg"},{"value":"https://cosmicjs.com/tony","key":"cosmic","title":"Cosmic","type":"text","children":null},{"value":"https://twitter.com/tonyspiro","key":"twitter","title":"Twitter","type":"text","children":null},{"value":"https://www.linkedin.com/in/tonyspiro/","key":"linkedin","title":"Linkedin","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"people","created":"2016-07-13T01:31:59.156Z","status":"published","modified":"2016-08-05T22:19:20.200Z","modified_at":"2018-12-19T20:52:32.682Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-12-19T20:52:32.682Z"}}]},{"type":"repeating_item","children":[{"title":"Person","key":"person","value":"57859a5c1621de245c0004cb","type":"object","required":false,"object_type":"people","object":{"_id":"57859a5c1621de245c0004cb","slug":"carson-gibbons-cmo-co-founder","title":"Carson Gibbons, CMO & Co-Founder","content":"

Carson Gibbons is a sales, marketing and advertising manager with experience leading digital project production for companies ranging from startups to corporations to large not-for-profits.

Carson joined Cosmic JS to help teams of developers and content creators collaborate to build modern apps faster together.

","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"image","title":"Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"https://cosmicjs.com/carsongibbons","key":"cosmic","title":"Cosmic","type":"text","children":null},{"value":"https://twitter.com/carsoncgibbons","key":"twitter","title":"Twitter","type":"text","children":null},{"value":"https://www.linkedin.com/in/carsongibbons","key":"linkedin","title":"Linkedin","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"people","created":"2016-07-13T01:33:16.699Z","status":"published","modified":"2016-07-13T16:50:33.731Z","modified_at":"2018-12-19T20:53:20.183Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-12-19T20:53:20.183Z"}}]}],"type":"repeater","title":"People","key":"people","id":"uN39DsGag2","value":"","repeater_fields":[{"title":"Person","key":"person","value":"","type":"object","required":false,"object_type":"people"}]}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"pages","created":"2014-05-31T17:24:14.951Z","order":9,"modified":"2016-08-03T19:54:00.629Z","files":"","status":"published","modified_at":"2020-07-05T18:04:07.039Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-07-05T18:04:07.039Z","unpublish_at":null,"metadata":{"logos":{"url":"https://cdn.cosmicjs.com/26167900-1a9f-11e9-ac35-750902641903-Cosmic-JS-logos.zip","imgix_url":"https://cdn.cosmicjs.com/26167900-1a9f-11e9-ac35-750902641903-Cosmic-JS-logos.zip"},"people":[{"person":{"_id":"57859a0f1621de245c0004c5","slug":"tony-spiro-ceo-co-founder","title":"Tony Spiro, CEO & Co-Founder","content":"

Tony Spiro is an experienced software engineer who knows the pain of content management in a team setting. From his experience leading digital teams from startups to Fortune 500 companies, he started Cosmic JS to solve his own problems in application development.

He is thrilled to help teams around the world use Cosmic JS to build amazing products together.

","metafields":[{"value":"3c056190-03cf-11e9-a674-8b21bc2bc0e1-me.jpg","key":"image","title":"Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/3c056190-03cf-11e9-a674-8b21bc2bc0e1-me.jpg","imgix_url":"https://imgix.cosmicjs.com/3c056190-03cf-11e9-a674-8b21bc2bc0e1-me.jpg"},{"value":"https://cosmicjs.com/tony","key":"cosmic","title":"Cosmic","type":"text","children":null},{"value":"https://twitter.com/tonyspiro","key":"twitter","title":"Twitter","type":"text","children":null},{"value":"https://www.linkedin.com/in/tonyspiro/","key":"linkedin","title":"Linkedin","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"people","created":"2016-07-13T01:31:59.156Z","status":"published","modified":"2016-08-05T22:19:20.200Z","modified_at":"2018-12-19T20:52:32.682Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-12-19T20:52:32.682Z","metadata":{"image":{"url":"https://cdn.cosmicjs.com/3c056190-03cf-11e9-a674-8b21bc2bc0e1-me.jpg","imgix_url":"https://imgix.cosmicjs.com/3c056190-03cf-11e9-a674-8b21bc2bc0e1-me.jpg"},"cosmic":"https://cosmicjs.com/tony","twitter":"https://twitter.com/tonyspiro","linkedin":"https://www.linkedin.com/in/tonyspiro/"}}},{"person":{"_id":"57859a5c1621de245c0004cb","slug":"carson-gibbons-cmo-co-founder","title":"Carson Gibbons, CMO & Co-Founder","content":"

Carson Gibbons is a sales, marketing and advertising manager with experience leading digital project production for companies ranging from startups to corporations to large not-for-profits.

Carson joined Cosmic JS to help teams of developers and content creators collaborate to build modern apps faster together.

","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"image","title":"Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"https://cosmicjs.com/carsongibbons","key":"cosmic","title":"Cosmic","type":"text","children":null},{"value":"https://twitter.com/carsoncgibbons","key":"twitter","title":"Twitter","type":"text","children":null},{"value":"https://www.linkedin.com/in/carsongibbons","key":"linkedin","title":"Linkedin","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"people","created":"2016-07-13T01:33:16.699Z","status":"published","modified":"2016-07-13T16:50:33.731Z","modified_at":"2018-12-19T20:53:20.183Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-12-19T20:53:20.183Z","metadata":{"image":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"cosmic":"https://cosmicjs.com/carsongibbons","twitter":"https://twitter.com/carsoncgibbons","linkedin":"https://www.linkedin.com/in/carsongibbons"}}}]}},{"_id":"5aa7cd8c3078516dd48d6ad2","order":9,"slug":"bookabus-builds-a-localized-transportation-website","title":"Bookabus Builds a Localized Transportation Website","content":"

Bookabus is an innovative start-up in the travel and mobility industry, serving as one of the largest coach hire and bus rental booking services in Europe. Whether it’s a day trip with 20 people or a large-scale event with 500 people, Bookabus, together with its partners, ensures a carefree and high-quality travel experience for groups and events. 



Bookabus needed a new website to communicate their transport routes, terms and marketing materials.  A big requirement was the ability to localize their content into different languages for the different areas they're servicing, including the UK, Netherlands, Germany, Spain, and Belgium.  They chose to build their new transportation website with Cosmic because of the ease of use and powerful localization capabilities.



"Cosmic allowed us to easily integrate dynamic content into our website. The product is a great value for your money. This is especially true given that their customer service is top-notch."

— Harrie Pieters, Web Developer 

","metafields":[{"value":"Bookabus","key":"company","title":"Company","type":"text","children":null},{"value":"Transportation","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Bookabus is an innovative start-up in the travel and mobility industry, serving as one of the largest coach hire and bus rental booking services in Europe. Whether it’s a day trip with 20 people or a large-scale event with 500 people, Bookabus, together with its partners, ensures a carefree and high-quality travel experience for groups and events. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"61777d70-26bf-11e8-808d-f7104bba2cfa-7bb0413cfa3f2b5a11182ebb782aa208.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/61777d70-26bf-11e8-808d-f7104bba2cfa-7bb0413cfa3f2b5a11182ebb782aa208.png","imgix_url":"https://imgix.cosmicjs.com/61777d70-26bf-11e8-808d-f7104bba2cfa-7bb0413cfa3f2b5a11182ebb782aa208.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-03-13T13:09:32.089Z","created_by":"5716b504e9c686d006000073","created":"2018-03-13T13:09:32.089Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-04-19T21:23:26.384Z","metadata":{"company":"Bookabus","industry_type":"Transportation","teaser":"Bookabus is an innovative start-up in the travel and mobility industry, serving as one of the largest coach hire and bus rental booking services in Europe. Whether it’s a day trip with 20 people or a large-scale event with 500 people, Bookabus, together with its partners, ensures a carefree and high-quality travel experience for groups and events. \n","logo":{"url":"https://cdn.cosmicjs.com/61777d70-26bf-11e8-808d-f7104bba2cfa-7bb0413cfa3f2b5a11182ebb782aa208.png","imgix_url":"https://imgix.cosmicjs.com/61777d70-26bf-11e8-808d-f7104bba2cfa-7bb0413cfa3f2b5a11182ebb782aa208.png"}}},{"_id":"6296a4b8140745000917ed91","order":9,"slug":"new-dashboard-updates-workspaces-navigation-extensions","title":"New dashboard updates: workspaces, navigation, and Extensions","content":"

We've released some new features for the new dashboard that we would like to share with you. Read below and sign up to get on the waitlist to preview the new dashboard.

🧭 Navigation

We are on a mission to provide the easiest way to manage content and it all starts with organization. We think you'll agree that our new navigation / information architecture is intuitive and makes everything in your dashboard easy to find.


🏢 Workspaces

A big reason to use a content management system is to collaborate with team members around content creation. Cosmic Workspaces enables you to add your company name and brand to the top of your dashboard to keep everyone on track and on brand. Now your\r\ncompany brand is top of mind (and top of page!).


🧩 Extensions

We've made a big update to how Extensions are built. Extensions can be added to the Object editing pages to connect to third party APIs and display any https / frame-enabled URL. We think you'll love it and your colleagues will love it too! (Disclaimer: We do not encourage workplace rick rolling)


💻 Try it out

We are on a mission to build the best content management solution in the world, but there's still more work to do! If you haven't joined, sign up to get on the waitlist to try it out during this alpha development phase, and help us by providing your feedback.

Follow us on Twitter, and join our team on Slack to stay in touch with the latest Cosmic news.

Sincerely,
Cosmic Team

","metafields":[{"children":null,"type":"object","title":"Author","key":"author","id":"71DqZRcN0W","value":"5ffa1d1e0046b0000799cb7b","required":true,"object_type":"authors","object":{"_id":"5ffa1d1e0046b0000799cb7b","slug":"cosmic","title":"Cosmic","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"ZogvxZg6OL","value":""},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D0qLJ4RPBe","value":"10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2021-01-09T21:16:14.533Z","created_by":"5357ef811693be2118000001","modified_at":"2021-01-09T21:18:26.147Z","created":"2021-01-09T21:16:14.533Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/e55ef990-52bf-11eb-986d-4d7ff5faa3ab-logo.svg","published_at":"2021-01-09T21:18:26.147Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null}},{"children":null,"type":"html-textarea","title":"Teaser","key":"teaser","id":"9iF8TvGMbf","value":"

We've released some new features for the new dashboard that we are excited to share with you.

"},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"phuLCAcZUX","value":"a3a38e80-94d6-11ec-96f2-43bdd99faa64-new-features.png","url":"https://cdn.cosmicjs.com/a3a38e80-94d6-11ec-96f2-43bdd99faa64-new-features.png","imgix_url":"https://imgix.cosmicjs.com/a3a38e80-94d6-11ec-96f2-43bdd99faa64-new-features.png"},{"children":null,"type":"textarea","title":"SEO Meta Description","key":"seo_meta_description","id":"rMauxpXMSQ","value":"We've released some new features for the new dashboard that we are excited to share with you."},{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"hSB0eu4WAA","value":"2022-06-01"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2022-05-31T23:28:56.674Z","created_by":"5357ef811693be2118000001","modified_at":"2022-06-01T17:31:31.328Z","created":"2022-05-31T23:28:56.674Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/a3a38e80-94d6-11ec-96f2-43bdd99faa64-new-features.png","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2022-06-01T17:31:31.328Z","metadata":{"author":{"_id":"5ffa1d1e0046b0000799cb7b","slug":"cosmic","title":"Cosmic","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"ZogvxZg6OL","value":""},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D0qLJ4RPBe","value":"10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2021-01-09T21:16:14.533Z","created_by":"5357ef811693be2118000001","modified_at":"2021-01-09T21:18:26.147Z","created":"2021-01-09T21:16:14.533Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/e55ef990-52bf-11eb-986d-4d7ff5faa3ab-logo.svg","published_at":"2021-01-09T21:18:26.147Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"metadata":{"username":"","profile_picture":{"url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}}},"teaser":"

We've released some new features for the new dashboard that we are excited to share with you.

","featured_image":{"url":"https://cdn.cosmicjs.com/a3a38e80-94d6-11ec-96f2-43bdd99faa64-new-features.png","imgix_url":"https://imgix.cosmicjs.com/a3a38e80-94d6-11ec-96f2-43bdd99faa64-new-features.png"},"seo_meta_description":"We've released some new features for the new dashboard that we are excited to share with you.","published_date":"2022-06-01"}},{"_id":"5ef386f6de201700072ef9db","slug":"strapi-headless-cms","title":"Strapi Headless CMS","content":"

Strapi is an open source Node.js Headless CMS that offers the ability to build customizable APIs. Cosmic is an alternative to Strapi that your developers and content creators will love.


Developers and Creators

Strapi, like Cosmic, offers both a REST and GraphQL API. Check out the Cosmic API docs and the Strapi API docs to see the difference in approach. 

Cosmic provides everything your team of developers and content creators need: powerful and intuitive APIs for developers, and an easy-to-use dashboard for content creators. We've removed all complexity and CMS maintenance, so your team can focus on building great products faster, together.


Additional Maintenance

With Strapi, you will need to maintain and host everything yourself, adding additional development costs to your projects. With Cosmic, we provide a hosted web dashboard so can focus on what really matters: creating great content and user experiences, not CMS infrastructure and maintenance.

","metafields":[{"children":null,"type":"switch","title":"Include in link list","key":"include_in_link_list","id":"YOxrdUd1VB","value":true,"options":"yes,no"},{"children":null,"type":"text","title":"Vendor Name","key":"vendor_name","id":"o30BNE5DFX","value":"Strapi Headless CMS"},{"children":null,"type":"file","title":"Logo","key":"logo","id":"92knrxNiSp","value":"59523d10-b57e-11ea-a5ec-e53cdd11dc02-strapi-headless-cms.png","url":"https://cdn.cosmicjs.com/59523d10-b57e-11ea-a5ec-e53cdd11dc02-strapi-headless-cms.png","imgix_url":"https://imgix.cosmicjs.com/59523d10-b57e-11ea-a5ec-e53cdd11dc02-strapi-headless-cms.png"},{"children":null,"type":"textarea","title":"Tech","key":"tech","id":"kbvBvW8yiB","value":"MongoDB database, Node.js."},{"children":null,"type":"textarea","title":"Scalability","key":"scalability","id":"xTnfi9BDHB","value":"Does not scale easily. Limited by your servers, hosting provider, and budget."},{"children":null,"type":"textarea","title":"Security","key":"security","id":"RPF4wZ41o8","value":"You manage the security yourself. No default data encryption at rest or in transit."},{"children":null,"type":"textarea","title":"Maintenance","key":"maintenance","id":"tMojHp4iRw","value":"You deploy, host, and maintain everything yourself. Along with your application and content, you need to maintain updates and security for your CMS system."},{"children":null,"type":"textarea","title":"Caching","key":"caching","id":"8Py1wuPiGy","value":"No caching included out of the box."},{"children":null,"type":"textarea","title":"Media CDN","key":"media_cdn","id":"VaeBBxTdDu","value":"No CDN included out of the box."},{"children":null,"type":"textarea","title":"Image Processing","key":"image_processing","id":"E8YhX1c08l","value":"Manually manage your own image sizes and optimizations."},{"children":null,"type":"textarea","title":"Extendability","key":"extendability","id":"G1TuCsivLC","value":"Themes and integrations."},{"children":null,"type":"textarea","title":"Front end","key":"front_end","id":"MOexxE2Xwq","value":"Front end is decoupled from the backend CMS."},{"children":null,"type":"textarea","title":"Number of Projects","key":"number_of_projects","id":"uA2WGbJi6l","value":"One login, multiple projects."},{"children":null,"type":"html-textarea","title":"Costs","key":"costs","id":"XHG1bhuRbN","value":"

You will need to hire developer resources to maintain the CMS. Average salary of a full-stack developer is $111,600 per year. You may need to hire 1-3 developers to maintain the CMS.

"},{"children":null,"type":"text","title":"Cost Value","key":"cost_value","id":"dU0CjkPo8K","value":"$223,200"},{"children":null,"type":"text","title":"Cost Text","key":"cost_text","id":"bgkNPI7OqM","value":"per year"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"cms-competitors","created":"2020-06-24T17:01:42.439Z","created_at":"2020-06-24T17:01:42.439Z","modified_at":"2020-06-28T20:51:54.481Z","status":"published","locale":null,"modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-06-28T20:51:54.481Z","unpublish_at":null,"order":9,"metadata":{"include_in_link_list":true,"vendor_name":"Strapi Headless CMS","logo":{"url":"https://cdn.cosmicjs.com/59523d10-b57e-11ea-a5ec-e53cdd11dc02-strapi-headless-cms.png","imgix_url":"https://imgix.cosmicjs.com/59523d10-b57e-11ea-a5ec-e53cdd11dc02-strapi-headless-cms.png"},"tech":"MongoDB database, Node.js.","scalability":"Does not scale easily. Limited by your servers, hosting provider, and budget.","security":"You manage the security yourself. No default data encryption at rest or in transit.","maintenance":"You deploy, host, and maintain everything yourself. Along with your application and content, you need to maintain updates and security for your CMS system.","caching":"No caching included out of the box.","media_cdn":"No CDN included out of the box.","image_processing":"Manually manage your own image sizes and optimizations.","extendability":"Themes and integrations.","front_end":"Front end is decoupled from the backend CMS.","number_of_projects":"One login, multiple projects.","costs":"

You will need to hire developer resources to maintain the CMS. Average salary of a full-stack developer is $111,600 per year. You may need to hire 1-3 developers to maintain the CMS.

","cost_value":"$223,200","cost_text":"per year"}},{"_id":"5bad3ef6261a690929006840","order":9,"slug":"hubspot","title":"Hubspot","content":"","metafields":[{"value":"https://cosmicjs.com/articles/integrating-cosmic-powered-content-with-hubspot-jml1p9ne","key":"link","title":"Link","type":"text","children":null},{"value":"9835a860-c330-11e8-9635-9f5441634386-hubspotlogo.png","key":"image","title":"Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/9835a860-c330-11e8-9635-9f5441634386-hubspotlogo.png","imgix_url":"https://imgix.cosmicjs.com/9835a860-c330-11e8-9635-9f5441634386-hubspotlogo.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"integrations","created_at":"2018-09-27T20:35:02.744Z","created_by":"5716b504e9c686d006000073","created":"2018-09-27T20:35:02.744Z","status":"published","modified_at":"2018-09-28T15:10:22.971Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-09-28T15:10:22.971Z","metadata":{"link":"https://cosmicjs.com/articles/integrating-cosmic-powered-content-with-hubspot-jml1p9ne","image":{"url":"https://cdn.cosmicjs.com/9835a860-c330-11e8-9635-9f5441634386-hubspotlogo.png","imgix_url":"https://imgix.cosmicjs.com/9835a860-c330-11e8-9635-9f5441634386-hubspotlogo.png"}}},{"_id":"5adf8a81bbfc7673c7bcb926","order":9,"slug":"nextjs-cms","title":"Next.js CMS ","content":"

Next.js CMS Templates

You can use our Next.js CMS Templates, which includes Next.js CMS GitHub code examples.


Next.js CMS Dashboard

Cosmic offers a Headless CMS to enable your team to build apps faster. Developers get powerful API tools, and content creators get an intuitive content management dashboard. Get started free.

","metafields":[{"children":null,"type":"file","title":"Image","key":"image","id":"cCjW50uVoP","value":"aa1afc30-8eed-11ea-a8ae-93035d8042eb-nextjs-cms.png","url":"https://cdn.cosmicjs.com/aa1afc30-8eed-11ea-a8ae-93035d8042eb-nextjs-cms.png","imgix_url":"https://imgix.cosmicjs.com/aa1afc30-8eed-11ea-a8ae-93035d8042eb-nextjs-cms.png"},{"children":null,"type":"file","title":"Thumbnail","key":"thumbnail","id":"uYAMADRPBv","value":"0b0e65e0-dfad-11e9-8580-4df517ea2cd1-nextjs.jpg","url":"https://cdn.cosmicjs.com/0b0e65e0-dfad-11e9-8580-4df517ea2cd1-nextjs.jpg","imgix_url":"https://imgix.cosmicjs.com/0b0e65e0-dfad-11e9-8580-4df517ea2cd1-nextjs.jpg"},{"children":null,"type":"html-textarea","title":"Blurb","key":"blurb","id":"cW5an89YMf","value":"

Cosmic is the best CMS for Next.js websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

"},{"children":null,"type":"text","title":"Headline","key":"headline","id":"ZVZgVrEFGP","value":"Next.js"},{"children":null,"type":"text","title":"SEO Description","key":"seo_description","id":"OnbdXkdzY0","value":"Cosmic is the best CMS for Next.js websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators."},{"children":null,"type":"file","title":"Twitter Card Image","key":"twitter_card_image","id":"BhOX5RKT7k","value":"0e5d42c0-dfad-11e9-8580-4df517ea2cd1-nextjs.jpg","url":"https://cdn.cosmicjs.com/0e5d42c0-dfad-11e9-8580-4df517ea2cd1-nextjs.jpg","imgix_url":"https://imgix.cosmicjs.com/0e5d42c0-dfad-11e9-8580-4df517ea2cd1-nextjs.jpg"},{"children":null,"type":"html-textarea","title":"Code Example","key":"code_example","id":"lFEqPiWrr2","value":""},{"children":null,"type":"text","title":"SEO Title","key":"seo_title","id":"1RcRCArMTy","value":"Best Headless CMS for Next.js"},{"children":[{"type":"repeating_item","children":[{"title":"Title","key":"title","value":"Getting Started with Cosmic CMS and Next.js (Part 1)","type":"text","required":false},{"title":"Link","key":"link","value":"https://www.youtube.com/embed/NZA1dF2IDqQ?showinfo=0&wmode=opaque","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Title","key":"title","value":"Building a Blog with Cosmic CMS and Next.js (Part 2)","type":"text","required":false},{"title":"Link","key":"link","value":"https://www.youtube.com/embed/sdvdwo3g3PE?showinfo=0&wmode=opaque","type":"text","required":false}]}],"type":"repeater","title":"Videos","key":"videos","id":"3T27ADXV5A","value":"Getting Started with Cosmic CMS and Next.js (Part 1)","repeater_fields":[{"title":"Title","key":"title","value":"","type":"text","required":false},{"title":"Link","key":"link","value":"","type":"text","required":false}]},{"children":null,"type":"text","title":"Apps Search Term","key":"apps_search_term","id":"QhTX7idNH4","value":""},{"children":null,"type":"text","title":"Articles Search Term","key":"articles_search_term","id":"iEwx0QKwuT","value":""},{"children":null,"type":"html-textarea","title":"Page Overview","key":"page_overview","id":"ZZRJMD2bX4","value":""},{"children":null,"type":"html-textarea","title":"SEO Content","key":"seo_content","id":"BNlO3trhX3","value":""}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"kb-articles","created_at":"2017-04-22T23:07:51.159Z","created_by":"5357ef811693be2118000001","created":"2018-04-24T19:50:25.149Z","status":"published","modified_at":"2020-09-30T14:00:01.904Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-09-30T14:00:01.904Z","unpublish_at":null,"metadata":{"image":{"url":"https://cdn.cosmicjs.com/aa1afc30-8eed-11ea-a8ae-93035d8042eb-nextjs-cms.png","imgix_url":"https://imgix.cosmicjs.com/aa1afc30-8eed-11ea-a8ae-93035d8042eb-nextjs-cms.png"},"thumbnail":{"url":"https://cdn.cosmicjs.com/0b0e65e0-dfad-11e9-8580-4df517ea2cd1-nextjs.jpg","imgix_url":"https://imgix.cosmicjs.com/0b0e65e0-dfad-11e9-8580-4df517ea2cd1-nextjs.jpg"},"blurb":"

Cosmic is the best CMS for Next.js websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

","headline":"Next.js","seo_description":"Cosmic is the best CMS for Next.js websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.","twitter_card_image":{"url":"https://cdn.cosmicjs.com/0e5d42c0-dfad-11e9-8580-4df517ea2cd1-nextjs.jpg","imgix_url":"https://imgix.cosmicjs.com/0e5d42c0-dfad-11e9-8580-4df517ea2cd1-nextjs.jpg"},"code_example":"","seo_title":"Best Headless CMS for Next.js","videos":[{"title":"Getting Started with Cosmic CMS and Next.js (Part 1)","link":"https://www.youtube.com/embed/NZA1dF2IDqQ?showinfo=0&wmode=opaque"},{"title":"Building a Blog with Cosmic CMS and Next.js (Part 2)","link":"https://www.youtube.com/embed/sdvdwo3g3PE?showinfo=0&wmode=opaque"}],"apps_search_term":"","articles_search_term":"","page_overview":"","seo_content":""}},{"_id":"56eb98c0f137e10f40000027","order":10,"slug":"terms-of-use","title":"Terms of Use / Privacy Policy","content":"

Last updated: 05/31/2018


1. Introduction and Acceptance

Welcome to Cosmic JS. Cosmic JS (“Cosmic JS”, “we”, “us” and “our”) offers you access to Cosmic JS, our free content building platform (the “Website”) that allows you to create content for your\r\nself-hosted website, application or a website hosted at a subdomain URL using the “cosmicapp.co” domain (each a “Site”). This Cosmic JS Terms of Use and Privacy Policy document (“Terms of Use” or “Privacy Policy”,\r\nas applicable) govern your use of the Website.

PLEASE READ THESE TERMS OF USE CAREFULLY BEFORE USING THE WEBSITE. BY ACCESSING AND/OR USING THE WEBSITE (OTHER THAN TO READ THESE TERMS OF USE FOR THE FIRST TIME) YOU ARE AGREEING TO COMPLY WITH THESE TERMS OF USE, WHICH MAY CHANGE FROM TIME TO TIME.\r\nIF YOU DO NOT AGREE TO BE BOUND BY THESE TERMS OF USE, DO NOT ACCESS OR USE THE WEBSITE.

If you are agreeing to these Terms of Use on behalf of someone else (your employer for example), then you are warranting to us that you have full legal authority to bind that third party.


2. How the Website Works

(A) When using the Website, you agree to follow our guidelines and instructions. Keep in mind that these Terms of Use apply to any use of the Website whether or not you publish your Site.

(B) In order to publish your Site, you will have to become a registered user. You need to be 18 years or older to register. If you are under the age of 18, then you are not permitted to publish a Site, register as a user or otherwise submit personal information\r\nunless we receive appropriate consent from your parent or guardian who is at least 18 years of age and this adult will be responsible for all your activities.

(C) If you become a registered user, you will provide true, accurate and complete registration information and, if such information changes, you will promptly update the relevant registration information. During registration, you will create a user name\r\nand password (an “Account”). Once registered, if at any point you create a user name, your profile will be made publicly available if (i) you submit any content for publication on any of our publicly accessible Website services (e.g., App,\r\nExtension, Articles, etc.) or (ii) you “star” any content published on any of our publicly accessible Website services. You are responsible for any use of the Website or a Site using your Account and for safeguarding and maintaining the confidentiality\r\nof your Account. You agree to notify us immediately at the address or phone number set forth on the Website of any breach of security or unauthorized use of your Account.

(D) Becoming a registered user will provide you with a Free plan, which is 100% free and provides unlimited access to use most of the Website Services.

(E) Upon becoming a registered user, you will have the option to, at any time, upgrade your plan, which provides additional benefits that are not available with our Free plan. The upgraded plans will be automatically billed on a monthly or annual basis\r\nand remain in effect until cancelled by you.

(F) Except for any sales tax that we may be required to collect on any purchase/ subscription by you, you are responsible for paying all fees and taxes associated with your use of the Website, if any.

(G) We do not generally offer refunds or credits on purchases unless required by law, but we reserve the right to do so at our sole and absolute discretion.


3. Intellectual Property

The Website and included content (and any derivative works or enhancements of the same) including, but not limited to, all text, illustrations, files, images, software, scripts, sounds, music, videos, information, content, materials, products, services,\r\nURLs, technology, documentation, and interactive features included with or available through the Website and all intellectual property rights to the same, including without limitation, all trademarks, service marks, trade names and trade dress that may\r\nappear on the Website (collectively, the “Website Content”) are owned by us, our licensors, or both. Except for the limited use rights granted to you in these Terms of Use, you will not acquire any right, title or interest in the Website or\r\nany Website Content. Any rights not expressly granted in these Terms of Use are expressly reserved.


4. Website Access and Use

(A) The Website is currently free to use under a Free plan. However, the upgraded plans require a purchase by you, and in the future, we may offer certain other portions of the Website for a one-time fee, on a subscription basis or under any other lawful\r\npricing structure. In all instances, our services are not being sold to you; rather, you are being granted a limited license to use our Website, Website Content, and services.

(B) You acknowledge that we reserve the right to discontinue the Website services, in whole or in part, at any time. When using the Website, you agree to comply with all applicable federal, state, and local laws including, without limitation, copyright\r\nlaw. Except as expressly permitted in these Terms of Use, you may not use, reproduce, distribute, create derivative works based upon, publicly display, publicly perform, publish, transmit, or otherwise exploit Website Content for any purpose whatsoever\r\nwithout obtaining prior written consent from us or, in the case of third-party content, its respective owner. You acknowledge that you do not acquire any ownership rights by using Website Content.

(C) Furthermore, except as expressly permitted in these Terms of Use, you may not: (i) remove, alter, cover, or distort any copyright, trademark, or other proprietary rights notice on the Website or Website Content; (ii) circumvent, disable or otherwise\r\ninterfere with security-related features of the Website; (iii) use an automatic device (such as a robot or spider) or manual process to copy or “scrape” the Website or Website Content for any purpose without our express written permission;\r\n(iv) collect or harvest any personally identifiable information from the Website including, without limitation, user names, passwords, email addresses; (v) attempt to or

interfere with the proper working of the Website or impair, overburden, or disable the same; (vi) decompile, reverse engineer, or disassemble any portion of the Website; (vii) use network- monitoring software to determine architecture of or extract usage\r\ndata from the Website; (viii) encourage conduct that violates any local, state or federal law, impersonate others, use a false email address, or misrepresent your affiliation with others; (ix) violate U.S. export laws, including, without limitation, violations\r\nof the Export Administration Act and the Export Administration Regulations administered by the Department of Commerce; (x) engage in any conduct that restricts or inhibits any other user from using or enjoying the Website; or (xi) solicit other users\r\nto join or become members of any commercial online service or other organization without our prior written approval.

(D) You agree to fully cooperate with us to investigate any suspected or actual activity that is in breach of these Terms of Use.


5. User Content

(A) We may now or in the future permit users to post, upload, transmit through, or otherwise make available through our Website (collectively, “submit”) messages, text, illustrations, data, files, images, graphics, photos, comments, sounds,\r\nmusic, videos, information, content, and/or other materials that members of our developer program or others specifically submit for publication on any of our publicly accessible Website services (e.g., Apps, Knowledge Base, Articles, etc.) (collectively\r\n“User Content”). Subject to the rights and license you grant herein, you retain all right, title and interest in your User Content. We do not guarantee any confidentiality with respect to User Content even if it is not published through our\r\nWebsite. It is solely your responsibility to monitor and protect any intellectual property rights that you may have in your User Content, and we do not accept any responsibility for the same.

(B) You shall not submit any User Content protected by copyright, trademark, patent, trade secret, moral right, or other intellectual property or proprietary right without the express permission of the owner of the respective right. You are solely liable\r\nfor any damage resulting from your failure to obtain such permission or from any other harm resulting from User Content that you submit.

(C) You represent, warrant, and covenant that you will not submit any User Content that: (i) violates or infringes in any way upon the rights of others, including, but not limited to, any copyright, trademark, patent, trade secret, moral right, or other\r\nintellectual property or proprietary right of any person or entity; (ii) impersonates another or is unlawful, threatening, abusive, libelous, defamatory, invasive of privacy or publicity rights, vulgar, obscene, profane, pornographic, or otherwise objectionable,\r\nor otherwise violates any applicable law; (iii) encourages conduct that would constitute a criminal offense, give rise to civil liability or otherwise violate any law; (iv) is an advertisement for goods or services or a solicitation of funds; (v) includes\r\npersonal information such as messages which identify phone numbers, social security numbers, account numbers, addresses, or employer references; (vi) contains a formula, instruction, or advice that could cause harm or injury; or (vii) is a chain letter\r\nof any kind. Moreover, any conduct by a user that in our sole discretion restricts or inhibits any other user from using or enjoying our Website will not be permitted.

(D) By submitting User Content to us, simultaneously with such posting you automatically grant, or represent or warrant that the owner has expressly granted, to us a worldwide, royalty-free, perpetual, irrevocable, non-exclusive, fully sublicensable,\r\nand transferable right and license to use, reproduce, distribute, create derivative works based upon (including, without limitation, translations), publicly display, publicly perform, transmit, and publish the User Content (in whole or in part) as we,\r\nin our sole discretion, deem appropriate including, without limitation, (1) in connection with our business; and (2) in connection with the businesses of our affiliates, licensees, assignees, successors, parents, subsidiaries, and their related companies.\r\nWe may exercise this grant in any format, media or technology now known or later developed for the full term of any copyright that may exist in such User Content. Furthermore, you also grant other users permission to access your User Content and to use,\r\nreproduce, distribute, create derivative works based upon, publicly display, publicly perform, transmit, and publish your User Content for personal, non-commercial use as permitted by the functionality of our Website and these Terms of Use. Notwithstanding\r\nthe foregoing, you waive any and all claims you (or any copyright holder) may now or later have in any jurisdiction to so- called “moral rights” or rights of “droit moral” with respect to the User Content.

(E) By submitting User Content, you also grant us the worldwide, perpetual, irrevocable, fully sublicensable, and transferable right, but not the obligation, to use any and all names, identities, titles, likenesses, distinctive appearances, physical likenesses,\r\nimages, portraits, pictures, photographs (whether still or moving), screen personas, voices, vocal styles, statements, gestures, mannerisms, personalities, performance characteristics, biographical data, signatures, and any other indicia or imitations\r\nof identity or likeness listed, provided, referenced, or otherwise contained in the User Content (all attributes, collectively, per person, a “Persona”), including, without limitation, your name and geographical location (e.g., “Jonny\r\nD. – Chattanooga, TN”), for purposes of advertising and trade, in any format, medium, or technology now known or later developed without further notice, approval, or compensation, unless prohibited by law. Our uses of your Persona will be\r\nconsistent with the terms of our Privacy Policy, where it is applicable.

(F) Notwithstanding the generality of the foregoing, we reserve the right to display advertisements in connection with your User Content and to use your User Content for advertising, marketing, promotional, and other commercial purposes. You acknowledge\r\nand agree that your User Content may be included on the websites and advertising networks of our distribution partners, marketing partners, accounts, and third-party service providers (including their downstream users).

(G) We have the right, but not the obligation, to monitor User Content. We have the right in our sole discretion and for any reason whatsoever, including without limitation a breach of Section 5(C) above, to suspend or delete a Site.


6. Website Content & Third-Party Links

We provide the Website and Website Content for entertainment and/or promotional purposes only. Under no circumstances will we be liable for any loss or damage caused by your reliance on any Website Content. The Website may contain links to other websites\r\nmaintained by third

parties. We do not operate or control, in any respect, or necessarily endorse the content found on these third-party websites. You assume sole responsibility for your use of third-party links. We are not responsible for any content posted on third-party\r\nwebsites or liable to you for any loss or damage of any sort incurred as a result of your dealings with any third-party or their website.


7. Privacy Policy

(A) This Privacy Policy explains our policies and practices regarding the information we collect from and about you. It is through this Privacy Policy that we intend to provide you with a level of comfort and confidence in how we collect, use, and safeguard\r\npersonal and other information we collect and obtain, or that you provide through the Website or the Site and how you can contact us if you have any questions or concerns. It is our sincere hope that by explaining our data handling practices we will develop\r\na trusting and long-lasting relationship with you.

For the purposes of the EU General Data Protection Regulation 2016/679 (the “GDPR”), Cosmic JS is the data controller. This means that we are responsible for deciding how we use the information that we hold. We are a Delaware\r\ncorporation registered in the United States with an office at [3208 Bonniebrook Dr. Plano, TX 75075 USA].

The GDPR applies to you if you reside in the European Economic Area (an “EEA Resident”)

(B) We do not intentionally collect personally identifiable information from children under the age of 13 and we ask that children under 13 not submit any personal information to us. If you are under the age of 18, you can browse the Website, but cannot\r\npublish a Site or register for an Account without the consent of a parent or guardian. It is the responsibility of parents to monitor their children’s use of our Website. 

(C) We respect your privacy. As a general matter, we do not automatically collect your personally identifiable information when you visit the Website. When you publish a Site you will be asked to provide some information about yourself. Whether or\r\nnot you provide this type of information is your choice; however, in many instances this information is required to realize a benefit we may offer or gain access to certain content on our Website.

(D) We will only use information that we collect about you or that you provide to us, including any personal information data for the purposes described in this Privacy Policy and when applicable law allows us to do so. We will generally use your information\r\nbased on the following legal grounds:  

Personal information provided by you to us may be used by us and contractors in connection with providing the Website services. The personally identifiable information you submit to us is generally used to carry out your requests, respond to your inquiries,\r\nbetter serve you, or in other ways naturally associated with the circumstances in which you provided the information. We may also use this information to later contact you for a variety of reasons, such as customer service, providing you promotional information\r\nfor our products, or to communicate with you about content or other information you have posted or shared with us via the Website. In certain instances, we may also share your personally identifiable information with our third-party vendors performing\r\nfunctions on our behalf  (e.g., vendors that process credit card orders). We do not store any credit card information. Our vendors agree to use this information, and we share information with them, only to carry out our requests. By voluntarily providing\r\ninformation to us when using the Website, you are consenting to the collection, use and disclosure of your personal information by us in the manner prescribed in this Section 7. You acknowledge this by using the Website. You may opt out of receiving future\r\ncommercial correspondence from us by contacting us in writing via email. Nothing in the foregoing paragraph is intended to affect any rights that an EEA Resident might have, or restrictions that apply, under the GDPR.

(E) We may automatically collect certain non-personally identifiable information from you when you access the Website. We use non-personally identifiable information in a variety of ways, including to help analyze site traffic, understand customer needs\r\nand trends, carry out targeted promotional activities, and to improve our services. We may use your non-personally identifiable information by itself or aggregate it with information we have obtained from others. We may share your non-personally identifiable\r\ninformation with third parties to achieve these objectives and others, but remember that aggregate information is anonymous information that does not personally identify you.

(F) Like many websites, we use “cookies” and “web beacons” (also called “clear gifs” or “pixel tags”) to obtain certain types of information when your web browser accesses our Website. Examples of information\r\nwe collect and analyze in this manner include (i) Internet Protocol (IP) address, (ii) computer connection information such as browser type and version, (iii) operating system, and (iv) your activities on our Website, including the products you view or\r\nsearch for as well as the URL you come from and go to next. It is important to note that cookies and web beacons that we use do not contain and are not tied to personally identifiable information about you. The anonymous data that the cookies or web beacons\r\ncollect is kept separate from the personal information in your Account. Other cookies are used to enhance your use of the Website, such as remembering that you are logged in. You are able to minimize or block cookies using the privacy settings in your\r\ninternet browser, but this may restrict your use of the Website. For general information on cookies, see allaboutcookies.org.

(G) We will only use the information we collect through the Website for the following purposes: (i) forwarding important information relating to the Website and other requested information; (ii) contacting you in response to your feedback or inquiry to\r\ndiscuss our services; (iii) monitoring Website performance; (iv) improving our Website and services to you; (v) internal administration; and (vi) other purposes that are in accordance with your instructions. Except as provided in this Privacy Policy,\r\nour Terms of Use, or as set forth when you submit the information, we will not give, sell, trade or otherwise disclose any personal information about you to a third party without your prior approval, except we reserve the right to disclose information\r\nabout you if we are required to do so by law, with respect to copyright and other intellectual property infringement claims, to fulfill a government request, or to protect or defend our legal rights or property, or Website, or other users.

(H) Your web browser may offer you a “Do Not Track” option, which allows you to signal to operators of websites and web applications and services (including behavioral advertising services) that you do not wish such operators to track\r\ncertain of your online activities over time and across different websites. We honor any web browser “Do Not Track” signals or other mechanisms that provide you with the ability to exercise choice regarding the collection of personally\r\nidentifiable information about your online activities over time and across third-party websites or online services.

(I) This Website may contain links to other sites. We are not responsible for the privacy practices of linked sites. We strongly encourage you to read the privacy policy of the linked websites as they may contain further terms and conditions that apply\r\nto you.

(J) European Privacy Rights for EEA Residents. 

You have the right to ask us not to process your personal data for marketing purposes. We will usually inform you (before collecting your personal data) if we intend to use your personal data for such purposes or if we intend to disclose your personal\r\ndata to any third party for such purposes. You can exercise your right to prevent such processing by checking certain boxes on the forms we use to collect your personal data. You can also exercise the right by contacting us directly. 

In certain circumstances, you have the right to: (a) request access to any personal data we hold about you and related data, (b) obtain without undue delay the rectification of any inaccurate personal data, (c) request that your personal data be deleted\r\nprovided that the personal data is not required by us for (i) compliance with a legal obligation under European or Member State law or other applicable law or (ii) the establishment, exercise or defense of a legal claim, (d) prevent or restrict processing\r\nof your personal data, except to the extent processing is required (i) to comply with a legal obligation under European or Member State law or applicable law or (ii) for the establishment, exercise or defense of legal claims; and (e) request transfer\r\nof your personal data directly to a third party where this is technically feasible.

If you are an EEA Resident in France, you also have the right to set guidelines for the retention and communication of your personal data after your death.

If you reside in a jurisdiction other than the European Economic Area, you may also have similar rights to the above. Please contact us at [support@cosmicjs.com] if you would like to exercise one of these rights,\r\nand we will comply with any request to the extent required under applicable law.

In addition, where you believe that we have not complied with its obligation under this Privacy Policy or European law, you have the right to make a complaint to an EU Data Protection Authority, such as the UK Information Commissioner’s Office. 

You can exercise any of these rights by contacting us at [support@cosmicjs.com] or write to us at: Cosmic JS, [3208 Bonniebrook Dr. Plano, TX 75075 USA].

(K) How Long We Store Your Personal Data 

We will only retain your personal data, in a form which permits us to identify you, for as long as necessary to fulfill the purposes we collected it for. We will retain and use your personal data as necessary to satisfy any legal, accounting or reporting\r\nrequirements, to resolve disputes or to enforce our agreements and rights. After that, we will either securely delete or anonymize your personal data so that it cannot be linked back to you.

(L) We may change this Privacy Policy in our sole discretion. Such changes will be effective when a notice of the change is made available on the Website. If you do not agree with such changes, you must discontinue use of the Website. Continued use of\r\nthe Website after the changes have been implemented will indicated acceptance by you of the changes.

(M) We value your information. While we take reasonable precautions to preserve the security of your information, please be aware that we cannot promise that your use of our Website will be confidential, and we cannot promise that any information you\r\nprovide to us is perfectly secure. While using our Website, you may also become aware of confidential information about us or another user. You promise not to disclose any confidential information made available to you through the Website to any other\r\nperson.

(N) Residents of the State of California, under certain provisions of the California Civil Code, have the right to request from companies conducting business in California a list of all third parties to which the company has disclosed certain personally\r\nidentifiable information as defined under California law during the preceding year for third party direct marketing purposes. You are limited to one request per calendar year. In your request, please attest to the fact that you are a California resident\r\nand provide a current California address for our response.

(O) The terms set forth in this Section 7 are the sole statement of our Privacy Policy with respect to this Website and the Site, and no summary, modification, restatement or other version thereof, or other privacy statement or policy, in any form, is\r\nvalid unless we post a new or revised policy to the Website.

(K) To ask questions or comment about this Privacy Policy and our privacy practices or need to reach us for any other reason, you may contact us by e-mail at [support@cosmicjs.com] or by mail at Cosmic JS Inc,\r\n[3208 Bonniebrook Dr. Plano, TX 75075 USA].


8. Indemnification

You agree to indemnify and hold harmless Cosmic JS and its officers, directors, employees, members, successors, agents, affiliates, subsidiaries, and their related companies from and against any and all claims, liabilities, losses, damages, obligations,\r\ncosts and expenses (including reasonable attorneys’ fees and costs) arising out of, related to, or that may arise in connection with: (i) your access to or use of the Website; (ii) User Content provided by you or through creation or publication\r\nof a Site and any other use of your Account; (iii) any actual or alleged violation or breach by you of these Terms of Use; (iv) any actual or alleged breach of any representation, warranty, or covenant that you have made to us; or (v) your acts or omissions.\r\nYou agree to cooperate fully with us in the defense of any claim that is the subject of your obligations hereunder.


9. Disclaimers

YOU EXPRESSLY AGREE THAT USE OF THE WEBSITE IS AT YOUR SOLE RISK. THE WEBSITE AND WEBSITE CONTENT ARE PROVIDED ON AN “AS IS” AND “AS AVAILABLE” BASIS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED. WITHOUT LIMITING THE\r\nFOREGOING AND TO THE FULLEST EXTENT PERMITTED BY LAW, COSMIC JS AND ITS OFFICERS, DIRECTORS, EMPLOYEES, PARENTS, PARTNERS, SUCCESSORS, AGENTS, DISTRIBUTION PARTNERS, AFFILIATES, SUBSIDIARIES, AND THEIR RELATED COMPANIES DISCLAIM ANY AND ALL WARRANTIES\r\nINCLUDING ANY: (1) WARRANTIES THAT THE WEBSITE WILL MEET YOUR REQUIREMENTS; (2) WARRANTIES CONCERNING THE AVAILABILITY, ACCURACY, SECURITY, USEFULNESS, TIMELINESS, OR INFORMATIONAL CONTENT OF THE WEBSITE OR WEBSITE CONTENT; (3) WARRANTIES OF TITLE, NON-\r\nINFRINGEMENT, MERCHANTABILITY, OR FITNESS FOR A PARTICULAR PURPOSE; (4) WARRANTIES FOR SERVICES OR GOODS RECEIVED THROUGH OR ADVERTISED ON OUR WEBSITE OR ACCESSED THROUGH THE WEBSITE; (5) WARRANTIES CONCERNING THE ACCURACY OR RELIABILITY OF THE RESULTS\r\nTHAT MAY BE OBTAINED FROM THE USE OF THE WEBSITE; (6) WARRANTIES THAT YOUR USE OF THE WEBSITE WILL BE SECURE OR UNINTERRUPTED; AND (7) WARRANTIES THAT ERRORS IN THE SOFTWARE WILL BE CORRECTED.


10. Limitation on Liability

(A) UNDER NO CIRCUMSTANCES SHALL COSMIC JS OR ITS OFFICERS, DIRECTORS, EMPLOYEES, PARENTS, PARTNERS, SUCCESSORS, AGENTS, DISTRIBUTION PARTNERS, AFFILIATES, SUBSIDIARIES, OR THEIR RELATED COMPANIES BE LIABLE FOR INDIRECT, INCIDENTAL, SPECIAL, CONSEQUENTIAL\r\nOR EXEMPLARY DAMAGES (EVEN IF COSMIC JS HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES), ARISING OUT OF, RELATING TO, OR IN ANY WAY CONNECTED WITH THE WEBSITE OR THESE TERMS OF USE. YOUR SOLE REMEDY FOR DISSATISFACTION WITH THE WEBSITE INCLUDING,\r\nWITHOUT

LIMITATION, THE WEBSITE CONTENT IS TO STOP USING THE WEBSITE. SUCH LIMITATION SHALL ALSO APPLY WITH RESPECT TO DAMAGES INCURRED BY REASON OF SERVICES OR PRODUCTS RECEIVED THROUGH OR ADVERTISED IN CONNECTION WITH ANY OF THE WEBSITE OR ANY LINKS ON THE\r\nWEBSITE, AS WELL AS BY REASON OF ANY INFORMATION OR ADVICE RECEIVED THROUGH OR ADVERTISED IN CONNECTION WITH ANY OF THE WEBSITE OR ANY LINKS ON THE WEBSITE.

(B) NOTWITHSTANDING ANYTHING TO THE CONTRARY CONTAINED HEREIN, IN NO EVENT SHALL THE CUMULATIVE LIABILITY OF COSMIC JS AND ITS OFFICERS, DIRECTORS, EMPLOYEES, PARENTS, PARTNERS, SUCCESSORS, AGENTS, DISTRIBUTION PARTNERS, AFFILIATES, SUBSIDIARIES, AND\r\nTHEIR RELATED COMPANIES EXCEED THE GREATER OF THE TOTAL PAYMENTS RECEIVED FROM YOU BY COSMIC JS DURING THE PRECEDING TWELVE (12) MONTH PERIOD OR $100. FURTHERMORE, YOU AGREE THAT ANY CAUSE OF ACTION ARISING OUT OF, RELATING TO, OR IN ANY WAY CONNECTED\r\nWITH ANY OF THE WEBSITE OR THESE TERMS OF USE MUST COMMENCE WITHIN ONE (1) YEAR AFTER THE CAUSE OF ACTION ACCRUES; OTHERWISE, SUCH CAUSE OF ACTION SHALL BE PERMANENTLY BARRED.

(C) In some jurisdictions limitations of liability are not permitted. In such jurisdictions, some of the foregoing limitations may not apply to you. These limitations shall apply to the fullest extent permitted by law.


11. Termination

(A) Publication of a Site is not an automatic right; it is a benefit for users who follow our reasonable rules. We hope that you will be with us for a long time, but we do reserve the right in our sole discretion (acting reasonably of course) and at any\r\ntime to terminate or suspend your Site and/or block your access to the Website for any reason including, without limitation if you have failed to comply with these Terms of Use. You agree that Cosmic JS shall not be liable to you or any third party for\r\nany termination or suspension of your Account or for blocking your access to the Website.

(B) Any suspension or termination shall not affect your obligations to us under these Terms of Use. The provisions of these Terms of Use which by their nature should survive the suspension or termination of your Membership or these Terms of Use shall\r\nsurvive including, but not limited to indemnities, releases, disclaimers, limitations on liability, choice of law, no class action, no trial by jury and all of the miscellaneous provisions in Section 16.


12. Copyright Policy

We respect the intellectual property rights of others and expect users to do the same. In appropriate circumstances and at our sole discretion, we may terminate and/or disable the Site and/or Account of users suspected to be infringing the copyrights\r\n(or other intellectual property rights) of others. Additionally, in appropriate circumstances and in our sole discretion, we may remove or disable access to material on the Website or any Site that may be infringing or the subject of infringing activity.


13. Choice of Law; Jurisdiction and Venue

These Terms of Use shall be construed in accordance with the laws of the State of Texas without regard to its conflict of laws rules. Any legal proceedings against Cosmic JS that may arise out of, relate to, or be in any way connected with our Website\r\nor these Terms of Use shall be brought exclusively in the state and federal courts of Dallas, TX and you waive any jurisdictional, venue, or inconvenient forum objections to such courts.


14. No Class Actions

TO THE EXTENT ALLOWED BY LAW, WE EACH WAIVE ANY RIGHT TO PURSUE DISPUTES ON A CLASSWIDE BASIS; THAT IS, TO EITHER JOIN A CLAIM WITH THE CLAIM OF ANY OTHER PERSON OR ENTITY, OR ASSERT A CLAIM IN A REPRESENTATIVE CAPACITY ON BEHALF OF ANYONE ELSE IN ANY\r\nLAWSUIT, ARBITRATION OR OTHER PROCEEDING.


15. No Trial By Jury

TO THE EXTENT ALLOWED BY LAW, WE EACH WAIVE ANY RIGHT TO TRIAL BY JURY IN ANY LAWSUIT, ARBITRATION OR OTHER PROCEEDING.


16. Amendment; Additional Terms

(A) We reserve the right in our sole discretion and at any time and for any reason, to modify or discontinue any aspect or feature of the Website or to modify these Terms of Use. In addition, we reserve the right to provide you with operating rules or\r\nadditional terms that may govern your use of the Website generally, unique parts of the Website, or both (“Additional Terms”). Any Additional Terms that we may provide to you will be incorporated by reference into these Terms of Use. To the\r\nextent any Additional Terms conflict with these Terms of Use, the Additional Terms will control.

(B) Modifications to these Terms of Use or Additional Terms will be effective immediately upon notice, either by posting on the Website or by notification by email or conventional mail. It is your responsibility to review the Terms of Use and the Website\r\nfrom time to time for any changes or Additional Terms. Your access and use of the Website or any Site following any modification of these Terms of Use or the provision of Additional Terms will signify your assent to and acceptance of the same.


17. Miscellaneous

(A) No waiver by either party of any breach or default hereunder shall be deemed to be a waiver of any preceding or subsequent breach or default. The section headings used herein are for convenience only and shall not be given any legal import.

(B) If any part of these Terms of Use is unlawful or unenforceable for any reason, we both agree that only that part of the Terms of Use shall be stricken and that the remaining terms in the Terms of Use shall not be affected.

(C) These Terms of Use (including any Additional Terms incorporated by reference) constitute the entire agreement of the parties with respect to the subject matter hereof, and supersede all previous written or oral agreements between us with respect to\r\nsuch subject matter. 

(D) You may not assign these Terms of Use or assign any rights or delegate any obligations hereunder, in whole or in part, without our prior written consent. Any such purported assignment or delegation by you without the appropriate prior written consent\r\nwill be null and void and of no force and effect.

","metafields":[],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"pages","created":"2016-03-18T05:57:20.646Z","status":"published","modified":"2016-03-19T17:14:14.369Z","modified_at":"2018-05-31T16:06:47.543Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-05-31T16:06:47.543Z","metadata":null},{"_id":"620d83c5665c10000987c93b","order":10,"slug":"deprecation-of-cosmic-functions","title":"Deprecation of Cosmic Functions","content":"

Cosmic Functions, which we announced back in 2018, is now scheduled for deprecation.

When will it be removed?
If you have used this feature, it is scheduled for removal in the current dashboard (and will not be included in the new dashboard).

You can continue to use the feature until the removal date. The date for removal from all new and existing Buckets is March 29, 2022*

* This will not affect any aspects of the core content management product or service.
** If you have already deployed functions to your AWS account through Cosmic, this will not affect the status of those functions. You will still be able to manage your functions through AWS.

Why is it being deprecated?
At the time we released Cosmic Functions, there were not a lot of options to deploy simple serverless functions easily in a dashboard interface. We actually used it quite a bit for some use cases internally, but they proved to not be very useful for our customers. And today there appears to be more (better) options in the marketplace for serverless function deployment including Serverless, Netlify, Vercel, and more.

We have decided to sunset the feature so we can focus more efforts on our core content management and delivery products and services.

Contact Us
If you have any questions or concerns about the removal of this feature please contact support.

Thank you,
Tony Spiro
Cosmic CEO

","metafields":[{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"U6eyd0UpKu","value":"2022-02-17"},{"children":null,"type":"object","title":"Author","key":"author","id":"ZJ2SRyzpCY","value":"5768b253163172890e00002c","object_type":"authors","object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"ZczM65v5nl","value":"","url":null,"imgix_url":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"changelogs","created_at":"2022-02-16T23:07:49.865Z","created_by":"5357ef811693be2118000001","modified_at":"2022-02-18T19:23:05.949Z","created":"2022-02-16T23:07:49.865Z","status":"published","thumbnail":"","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2022-02-18T19:23:05.949Z","metadata":{"published_date":"2022-02-17","author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"featured_image":{"url":null,"imgix_url":null}}},{"_id":"5bd206599dca8d10e941b69b","order":10,"slug":"derive-systems-runs-on-cosmic-js","title":"Derive Systems runs on Cosmic","content":"

Derive Systems  is a leading automotive technology company with over 2 million software installations powering upgraded experiences for drivers on the road today. Derive  connects vehicles and their engines to the digital world, enabling individuals and fleets to take control and optimize for performance, fuel efficiency, safety, and more. 



The team at Derive Systems was in search of a headless CMS that would give their developers flexibility out-of-the-box while enabling their content managers to manage content in a familiar and modern CMS Dashboard. They chose Cosmic due to its easy content modeling tools for their Blog, Press, About and Team Sections. Derive now runs a Next.js, React and Express framework that utilizes the Cosmic GraphQL API to deliver its content.




“Leveraging the Cosmic GraphQL API allows for easy updates to our news and blog, while keeping payloads small and fast. Integration with Cosmic could not be easier thanks to their great support. We look forward to developing more features on the platform.”


— Dustin Brink, Front End Developer at Derive Systems 

","metafields":[{"value":"Derive Systems","key":"company","title":"Company","type":"text","children":null},{"value":"Automotive","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Derive Systems  is a leading automotive technology company with over 2 million software installations powering upgraded experiences for drivers on the road today. Derive  connects vehicles and their engines to the digital world, enabling individuals and fleets to take control and optimize for performance, fuel efficiency, safety, and more. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"60aac7a0-ded7-11e8-86d0-2998be663226-derive.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/60aac7a0-ded7-11e8-86d0-2998be663226-derive.jpg","imgix_url":"https://imgix.cosmicjs.com/60aac7a0-ded7-11e8-86d0-2998be663226-derive.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2018-10-25T18:07:21.426Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-11-15T14:51:19.007Z","metadata":{"company":"Derive Systems","industry_type":"Automotive","teaser":"Derive Systems  is a leading automotive technology company with over 2 million software installations powering upgraded experiences for drivers on the road today. Derive  connects vehicles and their engines to the digital world, enabling individuals and fleets to take control and optimize for performance, fuel efficiency, safety, and more. \n","logo":{"url":"https://cdn.cosmicjs.com/60aac7a0-ded7-11e8-86d0-2998be663226-derive.jpg","imgix_url":"https://imgix.cosmicjs.com/60aac7a0-ded7-11e8-86d0-2998be663226-derive.jpg"}}},{"_id":"6271bf108abd490009db0963","order":10,"slug":"new-dashboard-updates-global-nav-projects-billing-and-more","title":"New Dashboard Updates: Global Nav, Projects, Billing, and more!","content":"

We are excited to announce big updates to the new Cosmic dashboard which are now available for testing. Sign up for the alpha preview to check out the new features and read about the updates below:

Improvements

1. Global navigation layout
The global navigation has been moved to the top bar along with the search feature. This provides for easier access to core features and opens up the information architecture.

2. Updated Bucket organization
Buckets organization has gone through an overhaul. We now include a secondary menu to make it possible to add lots of content types as well as media folders. Media folders now include emoji and edit capabilities.

3. Updated Projects
One of the biggest changes in this release is the expansion of the Project as a higher level component in our service. Projects now include:

4. User billing
You can now add a payment method (Stripe test mode) to your user account which can be used on any billable resource. Invoices are also available for testing.

5. Extensions
Extensions have been improved with simpler organization and display editing.


Breaking Changes

There is new logic for Project / Bucket roles and permissions. So any previously added test projects will need to be re-added. You can still import any Bucket from the old dashboard into the new dashboard by going to Bucket Settings > Import / Export.

Join the Alpha

We are proud of the progress so far and excited for you to test out these new features as we continue to build the best content management solution in the world!

If you haven't joined, sign up to get on the waitlist to preview the new dashboard including these new features.

Get Some Swag 😎 

After joining the waitlist, share your personal link (found in the confirmation email) on social media to be entered to receive free Cosmic swag including hoodies, tshirts, coffee mugs, and stickers.

Stay tuned for more exciting updates! Follow us on Twitter, and join our team on Slack to\r\nget the latest on the new dashboard progress.

Cosmic Team

","metafields":[{"children":null,"type":"object","title":"Author","key":"author","id":"wMl8Ea2Shj","value":"5ffa1d1e0046b0000799cb7b","required":true,"object_type":"authors","object":{"_id":"5ffa1d1e0046b0000799cb7b","slug":"cosmic","title":"Cosmic","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"ZogvxZg6OL","value":""},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D0qLJ4RPBe","value":"10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2021-01-09T21:16:14.533Z","created_by":"5357ef811693be2118000001","modified_at":"2021-01-09T21:18:26.147Z","created":"2021-01-09T21:16:14.533Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/e55ef990-52bf-11eb-986d-4d7ff5faa3ab-logo.svg","published_at":"2021-01-09T21:18:26.147Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null}},{"children":null,"type":"html-textarea","title":"Teaser","key":"teaser","id":"8ZJU4OPLfp","value":"

We're excited to announce big updates to the new dashboard.

"},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"evBzvkaTua","value":"a3a38e80-94d6-11ec-96f2-43bdd99faa64-new-features.png","url":"https://cdn.cosmicjs.com/a3a38e80-94d6-11ec-96f2-43bdd99faa64-new-features.png","imgix_url":"https://imgix.cosmicjs.com/a3a38e80-94d6-11ec-96f2-43bdd99faa64-new-features.png"},{"children":null,"type":"textarea","title":"SEO Meta Description","key":"seo_meta_description","id":"criII2q966","value":"We're excited to announce big updates to the new dashboard."},{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"arHKwAwdJV","value":"2022-05-05"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2022-05-03T23:47:28.108Z","created_by":"5357ef811693be2118000001","modified_at":"2022-05-05T22:24:47.761Z","created":"2022-05-03T23:47:28.108Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/a3a38e80-94d6-11ec-96f2-43bdd99faa64-new-features.png","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2022-05-05T22:24:47.761Z","metadata":{"author":{"_id":"5ffa1d1e0046b0000799cb7b","slug":"cosmic","title":"Cosmic","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"ZogvxZg6OL","value":""},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D0qLJ4RPBe","value":"10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2021-01-09T21:16:14.533Z","created_by":"5357ef811693be2118000001","modified_at":"2021-01-09T21:18:26.147Z","created":"2021-01-09T21:16:14.533Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/e55ef990-52bf-11eb-986d-4d7ff5faa3ab-logo.svg","published_at":"2021-01-09T21:18:26.147Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"metadata":{"username":"","profile_picture":{"url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}}},"teaser":"

We're excited to announce big updates to the new dashboard.

","featured_image":{"url":"https://cdn.cosmicjs.com/a3a38e80-94d6-11ec-96f2-43bdd99faa64-new-features.png","imgix_url":"https://imgix.cosmicjs.com/a3a38e80-94d6-11ec-96f2-43bdd99faa64-new-features.png"},"seo_meta_description":"We're excited to announce big updates to the new dashboard.","published_date":"2022-05-05"}},{"_id":"594a7d68aa75cb9c6000078f","order":10,"slug":"david-martin","title":"David Martin","content":"","metafields":[{"value":"d305d5a0-568a-11e7-9700-5ba5cd7a4f16-david.jpeg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/d305d5a0-568a-11e7-9700-5ba5cd7a4f16-david.jpeg","imgix_url":"https://imgix.cosmicjs.com/d305d5a0-568a-11e7-9700-5ba5cd7a4f16-david.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-06-21T14:06:32.593Z","created_by":"5357ef811693be2118000001","created":"2017-06-21T14:06:32.593Z","status":"published","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/d305d5a0-568a-11e7-9700-5ba5cd7a4f16-david.jpeg","imgix_url":"https://imgix.cosmicjs.com/d305d5a0-568a-11e7-9700-5ba5cd7a4f16-david.jpeg"}}},{"_id":"5ef3871d38f28e0008b99778","slug":"sanity-headless-cms","title":"Sanity Headless CMS","content":"

Sanity is a hosted API with an open source CMS dashboard that you have to maintain yourself. Cosmic is an alternative to Sanity that your developers and content creators will love.


Developers and Creators

Sanity, like Cosmic, offers both a REST and GraphQL API. Check out the Cosmic API docs and the Sanity API docs to see the difference in approach.

Cosmic provides everything your team of developers and content creators need: powerful and intuitive APIs for developers, and an easy-to-use dashboard for content creators. We've removed all complexity and CMS maintenance, so your team can focus on building great products faster, together.


CMS Dashboard

With Sanity, you will need to maintain and host the Dashboard yourself. With Cosmic, we provide a hosted web dashboard so can focus on what really matters: creating great content and user experiences.

","metafields":[{"children":null,"type":"switch","title":"Include in link list","key":"include_in_link_list","id":"sulKPvHyB3","value":true,"options":"yes,no"},{"children":null,"type":"text","title":"Vendor Name","key":"vendor_name","id":"MDo2FgS3gy","value":"Sanity Headless CMS"},{"children":null,"type":"file","title":"Logo","key":"logo","id":"ue1lRSWWw6","value":"8d32a070-b583-11ea-b972-872e7580d677-sanity-headless-cms.png","url":"https://cdn.cosmicjs.com/8d32a070-b583-11ea-b972-872e7580d677-sanity-headless-cms.png","imgix_url":"https://imgix.cosmicjs.com/8d32a070-b583-11ea-b972-872e7580d677-sanity-headless-cms.png"},{"children":null,"type":"textarea","title":"Tech","key":"tech","id":"liKR8W22bU","value":"React Dashboard. Backend tech not provided."},{"children":null,"type":"textarea","title":"Scalability","key":"scalability","id":"nY4NK6XhnN","value":"Dashboard hosting is limited by your servers, hosting provider, and budget."},{"children":null,"type":"textarea","title":"Security","key":"security","id":"kyZwe0l0YD","value":"You manage the dashboard security yourself."},{"children":null,"type":"textarea","title":"Maintenance","key":"maintenance","id":"52davW4RUy","value":"You deploy, host, and maintain everything yourself. Along with your application and content, you need to maintain updates and security for your CMS dashboard."},{"children":null,"type":"textarea","title":"Caching","key":"caching","id":"MXLE4BdVPh","value":"Caching included on the API."},{"children":null,"type":"textarea","title":"Media CDN","key":"media_cdn","id":"2zJME7bTVp","value":"CDN included."},{"children":null,"type":"textarea","title":"Image Processing","key":"image_processing","id":"laMSvIXx5Q","value":"Image sizes and optimizations capabilities."},{"children":null,"type":"textarea","title":"Extendability","key":"extendability","id":"R0uXiiRIMZ","value":"Themes and integrations."},{"children":null,"type":"textarea","title":"Front end","key":"front_end","id":"Z2yvj274rU","value":"Front end is decoupled from the backend CMS."},{"children":null,"type":"textarea","title":"Number of Projects","key":"number_of_projects","id":"jKoeI5K45Q","value":"One login, multiple projects."},{"children":null,"type":"html-textarea","title":"Costs","key":"costs","id":"KAQOgl96Lq","value":"

You will need to hire developer resources to maintain the CMS Dashboard. Average salary of a full-stack developer is $111,600 per year. You may need to hire 1-3 developers to maintain the CMS.

"},{"children":null,"type":"text","title":"Cost Value","key":"cost_value","id":"bK5uqUpzwf","value":"$223,200"},{"children":null,"type":"text","title":"Cost Text","key":"cost_text","id":"w7ABWSWr0O","value":"per year"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"cms-competitors","created":"2020-06-24T17:02:21.811Z","created_at":"2020-06-24T17:02:21.811Z","modified_at":"2020-06-28T20:51:43.033Z","status":"published","locale":null,"modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-06-28T20:51:43.033Z","unpublish_at":null,"order":10,"metadata":{"include_in_link_list":true,"vendor_name":"Sanity Headless CMS","logo":{"url":"https://cdn.cosmicjs.com/8d32a070-b583-11ea-b972-872e7580d677-sanity-headless-cms.png","imgix_url":"https://imgix.cosmicjs.com/8d32a070-b583-11ea-b972-872e7580d677-sanity-headless-cms.png"},"tech":"React Dashboard. Backend tech not provided.","scalability":"Dashboard hosting is limited by your servers, hosting provider, and budget.","security":"You manage the dashboard security yourself.","maintenance":"You deploy, host, and maintain everything yourself. Along with your application and content, you need to maintain updates and security for your CMS dashboard.","caching":"Caching included on the API.","media_cdn":"CDN included.","image_processing":"Image sizes and optimizations capabilities.","extendability":"Themes and integrations.","front_end":"Front end is decoupled from the backend CMS.","number_of_projects":"One login, multiple projects.","costs":"

You will need to hire developer resources to maintain the CMS Dashboard. Average salary of a full-stack developer is $111,600 per year. You may need to hire 1-3 developers to maintain the CMS.

","cost_value":"$223,200","cost_text":"per year"}},{"_id":"5ea6702751a87f0007876087","order":10,"slug":"express-cms","title":"Express CMS","content":"

Cosmic JS makes it easy to manage content for your Express applications. Install the Official Cosmic JS JavaScript Client to integrate content into your Express app in minutes.  Get a feel for Express by taking a spin through our Express Apps and check out the tutorials below.

Express Quickstart

Install a Cosmic-powered Express app in seconds 🔥

npm i -g cosmic-cli\r\ncosmic init node-starter\r\ncd node-starter\r\ncosmic start

Express CMS Articles

Developer Community: Node.js Articles
How to Build a Simple Blog Using Node.js
How to Build a Node.js User Management App
How to Build a Multi-Language Static Website Without AJAX
How to Build a Cross-Platform Blog Using React Native and Node.js
How to Build a Facebook Bot App Using Node.js 

Express CMS Resources

Node.js Website Boilerplate
Cosmic JS Docs
Official JavaScript Client
Cosmic JS GitHub

Examples

npm i cosmicjs

Then in your JavaScript file, get your content:

const Cosmic = require('cosmicjs')\r\nconst bucket = Cosmic().bucket({ slug: 'creative-agency' })\r\nconst objects = (await bucket.getObjects()).objects
","metafields":[{"children":null,"type":"file","title":"Image","key":"image","id":"LzAXuphjjL","value":"d9ea42e0-8849-11ea-8e16-e7cd20df21fe-expressjs.svg","url":"https://cdn.cosmicjs.com/d9ea42e0-8849-11ea-8e16-e7cd20df21fe-expressjs.svg","imgix_url":"https://imgix.cosmicjs.com/d9ea42e0-8849-11ea-8e16-e7cd20df21fe-expressjs.svg"},{"children":null,"type":"file","title":"Thumbnail","key":"thumbnail","id":"y85qTtMNnV","value":"421fd000-884a-11ea-8e16-e7cd20df21fe-expressjs-icon.svg","url":"https://cdn.cosmicjs.com/421fd000-884a-11ea-8e16-e7cd20df21fe-expressjs-icon.svg","imgix_url":"https://imgix.cosmicjs.com/421fd000-884a-11ea-8e16-e7cd20df21fe-expressjs-icon.svg"},{"children":null,"type":"html-textarea","title":"Blurb","key":"blurb","id":"yXPPXZUlzK","value":"

Cosmic is the best CMS for Express websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

"},{"children":null,"type":"text","title":"Headline","key":"headline","id":"GZ7alvEQK4","value":"Express"},{"children":null,"type":"text","title":"SEO Description","key":"seo_description","id":"hsrnZrVDFB","value":"Cosmic is the best CMS for Express websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators."},{"children":null,"type":"file","title":"Twitter Card Image","key":"twitter_card_image","id":"LeZLCAKp36","value":"e3e139c0-8849-11ea-8e16-e7cd20df21fe-Expressjs.png","url":"https://cdn.cosmicjs.com/e3e139c0-8849-11ea-8e16-e7cd20df21fe-Expressjs.png","imgix_url":"https://imgix.cosmicjs.com/e3e139c0-8849-11ea-8e16-e7cd20df21fe-Expressjs.png"},{"children":null,"type":"html-textarea","title":"Code Example","key":"code_example","id":"3tVU6kyh2E","value":""},{"children":null,"type":"text","title":"SEO Title","key":"seo_title","id":"5aeEYvSEcV","value":"Best Headless CMS for Express"},{"children":[],"type":"repeater","title":"Videos","key":"videos","id":"6s5FCsv1ET","value":"","repeater_fields":[{"title":"Title","key":"title","value":"","type":"text","required":false},{"title":"Link","key":"link","value":"","type":"text","required":false}]}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"kb-articles","created_at":"2017-04-22T23:07:51.159Z","created_by":"5357ef811693be2118000001","created":"2020-04-27T05:39:51.913Z","status":"published","modified_at":"2020-06-27T19:14:06.906Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-06-27T19:14:06.906Z","unpublish_at":null,"metadata":{"image":{"url":"https://cdn.cosmicjs.com/d9ea42e0-8849-11ea-8e16-e7cd20df21fe-expressjs.svg","imgix_url":"https://imgix.cosmicjs.com/d9ea42e0-8849-11ea-8e16-e7cd20df21fe-expressjs.svg"},"thumbnail":{"url":"https://cdn.cosmicjs.com/421fd000-884a-11ea-8e16-e7cd20df21fe-expressjs-icon.svg","imgix_url":"https://imgix.cosmicjs.com/421fd000-884a-11ea-8e16-e7cd20df21fe-expressjs-icon.svg"},"blurb":"

Cosmic is the best CMS for Express websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

","headline":"Express","seo_description":"Cosmic is the best CMS for Express websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.","twitter_card_image":{"url":"https://cdn.cosmicjs.com/e3e139c0-8849-11ea-8e16-e7cd20df21fe-Expressjs.png","imgix_url":"https://imgix.cosmicjs.com/e3e139c0-8849-11ea-8e16-e7cd20df21fe-Expressjs.png"},"code_example":"","seo_title":"Best Headless CMS for Express","videos":[]}},{"_id":"5d488f0937b36204a4e36929","order":10,"slug":"cms-software-for-blogs","title":"CMS Software for Blogs","content":"

Cosmic provides flexible CMS Software for developers and content creators. Companies managing blog content use Cosmic CMS Software because the Dashboard is simple and intuitive to manage content, workflows and team members. 

Teams using CMS Software to power blog content don't have to maintain their own server and content management system. By focusing on apps and not infrastructure, teams are enabled to build apps faster, together. 


What is Headless CMS Software?

Headless CMS Software works by providing non-technical editors with a Dashboard UI to model, create and publish content while providing developers with API tools and resources to integrate content with any website or app. By decoupling content from code, teams create a central content repository that can power all of their content-powered applications. 

","metafields":[{"children":null,"type":"text","title":"Solution Name","key":"solution_name","id":"SUhRrVkydt","value":"CMS Software for Blogs"},{"children":null,"type":"file","title":"Image","key":"image","id":"bqxL08lKfa","value":"a29e69e0-b7c2-11e9-8351-c9e19f12a182-ec1d5de0-9dc0-11e9-a5b4-e5df9f8049d3-Hackernoon.png","url":"https://cdn.cosmicjs.com/a29e69e0-b7c2-11e9-8351-c9e19f12a182-ec1d5de0-9dc0-11e9-a5b4-e5df9f8049d3-Hackernoon.png","imgix_url":"https://imgix.cosmicjs.com/a29e69e0-b7c2-11e9-8351-c9e19f12a182-ec1d5de0-9dc0-11e9-a5b4-e5df9f8049d3-Hackernoon.png"},{"children":null,"type":"objects","title":"Case Studies","key":"case_studies","id":"ES5Rnq4fQb","value":"596663e8880d69fb6c000194,5a2455620cb0e3291c00002e,59f102cbd4de657279002f97","object_type":"case-studies","objects":[{"_id":"596663e8880d69fb6c000194","slug":"joblift-elevates-their-stack","title":"Joblift Elevates Their Stack ","content":"

In any bustling economy, a key piece of capital is human capital. When the most precious portion of capital is required, Joblift seeks to connect positions with people. They choose Cosmic to deliver their content via the cloud. 



Joblift manages localized content to serve Job, Press and Blog feeds to its various markets, including the UK, Netherlands and Germany. Easy user roles and permissions equip their team with the tools they need to seamlessly run a global organization. 


"Cosmic has completely sped up our ability to upload our content easily and efficiently. With Cosmic we now have a smooth process for uploading press releases which reflects the quality content on our website.”

— Ashleigh Grady, Content Editor and Marketing Manager

","metafields":[{"value":"Joblift","key":"company","title":"Company","type":"text","children":null},{"value":"Career Services","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"In any bustling economy, a key piece of capital is human capital. When the most precious portion of capital is required, Joblift seeks to connect positions with people. They choose Cosmic to deliver their content via the cloud. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created":"2017-07-12T18:01:12.194Z","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","status":"published","publish_at":null,"published_at":"2018-12-19T21:44:38.361Z"},{"_id":"5a2455620cb0e3291c00002e","slug":"acculevel-deploys-a-blog","title":"Acculevel Deploys a Blog","content":"

Acculevel is Your Foundation Expert. Serving the Midwest United States for the last 20 years, Acculevel knows what it means to serve and do a job right. Customer retention, reviews and loyalty are the name of their game, so to optimize these efforts and keep customers engaged and informed, Acculevel is scaling up their digital presence through its upcoming website, a new mobile application and more. Led by a new Chief Technology Officer overseeing developers and content editors, here's how Acculevel is ensuring their own foundation is solid.

Mired in an installed WordPress system was leaving Acculevel without the flexibility needed to nimbly build and publish content campaigns to engage with customers. Acculevel's tech team is currently building out a new zippy website built on a Node.js stack, complete with API integrations for ACH Authentication (Plaid) and Payment Gateway (Stripe). Acculevel needed a blog feed that would allow their new API-first methodology to pull data via the cloud while allowing their content editors to easily build and manage content in a WYSIWYG editor. With Cosmic, they were able to build and deploy a fully functioning blog in under 30 minutes.



"Cosmic provided us with a seamless on-boarding experience for creating a Bucket to manage blog content for our growing organization. We needed a programming-language agnostic API to manage content both within our existing WordPress website as well as within our new Node.js web application. Cosmic fit the bill perfectly with its simple Object schema and powerful Metafields. With Cosmic, content is just data and you can pull it however you'd like, wherever you like, allowing us  to build new tools in the future such as survey tools, employee forums and more.”

— Dylan Marsh, Chief Technology Officer  

","metafields":[{"value":"Acculevel ","key":"company","title":"Company","type":"text","children":null},{"value":"Construction","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Acculevel needed a blog feed that would allow their new API-first methodology to pull data via the cloud while allowing their content editor to easily build and manage content in a WYSIWYG editor. With Cosmic, they were able to build and deploy a fully functioning blog in under 30 minutes.\n\n\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"7621bb20-dab4-11e7-82e3-e92aaea009f5-o.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/7621bb20-dab4-11e7-82e3-e92aaea009f5-o.jpg","imgix_url":"https://imgix.cosmicjs.com/7621bb20-dab4-11e7-82e3-e92aaea009f5-o.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2017-12-03T19:49:54.515Z","created_by":"5716b504e9c686d006000073","created":"2017-12-03T19:49:54.515Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5357ef811693be2118000001","publish_at":null},{"_id":"59f102cbd4de657279002f97","slug":"datalyze-solutions-adds-blog-and-job-feeds","title":"Datalyze Solutions Adds a Blog Feed","content":"

Data. Intelligence. Applications. Location Based Analytics. When everything is converging, teams needs collaboration tools to make their lives easier. That's why Datalyze Solutions chooses Cosmic to deliver its content from the cloud for its Blog feeds. 



"Cosmic has been in use at Datalyze Solutions for more than one and a half years. Cosmic has become a critically important tool for us to publish blog posts quickly and easily. This way, our customers and partners can stay informed about the latest news from our company and other industry-relevant information. Cosmic offers exactly the flexibility and features we really need as content editors!"

— Carolin Bauer, Content Editor and Marketing Manager

","metafields":[{"value":"Datalyze Solutions","key":"company","title":"Company","type":"text","children":null},{"value":"Internet","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Data. Intelligence. Applications. Location Based Analytics. When everything is converging, teams needs collaboration tools to make their lives easier.","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"b4173bb0-dc2d-11e7-9201-fb5838341592-DS_Logo_Blau.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/b4173bb0-dc2d-11e7-9201-fb5838341592-DS_Logo_Blau.png","imgix_url":"https://imgix.cosmicjs.com/b4173bb0-dc2d-11e7-9201-fb5838341592-DS_Logo_Blau.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2017-10-25T21:31:55.033Z","created_by":"5716b504e9c686d006000073","created":"2017-10-25T21:31:55.033Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null}]},{"children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"simple-react-blog","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"simple-vue-blog","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"gatsby-blog","type":"text","required":false}]}],"type":"repeater","title":"App Slugs","key":"app_slugs","id":"FQqCWi8ZFS","value":"simple-react-blog","repeater_fields":[{"title":"Slug","key":"slug","value":"","type":"text","required":false}]},{"children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"wordpress-importer","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"export-to-csv","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"unsplash-photos","type":"text","required":false}]}],"type":"repeater","title":"Extension SLugs","key":"extension_slugs","id":"V5pOeLP4MS","value":"wordpress-importer","repeater_fields":[{"title":"Slug","key":"slug","value":"","type":"text","required":false}]},{"children":null,"type":"textarea","title":"Testimonial","key":"testimonial","id":"j6Vh1FlapE","value":"\"When the opportunity to work with Cosmic came up, I jumped on the opportunity. Using an API-first content management platform like Cosmic was perfect (and super simple) for connecting best-in-class services like Algolia for search and SendGrid for email. In terms of providing the framework for teams to quickly build quality professional apps, Cosmic is definitely onto something.”"},{"children":null,"type":"text","title":"Testimonial Credit","key":"testimonial_credit","id":"k723E3Ijnc","value":"David Smooke, CEO at Hacker Noon"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"solutions","created_at":"2019-08-05T20:18:17.006Z","created_by":"5716b504e9c686d006000073","modified_at":"2020-05-06T05:34:46.695Z","created":"2019-08-05T20:18:17.006Z","status":"published","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-05-06T05:34:46.695Z","unpublish_at":null,"metadata":{"solution_name":"CMS Software for Blogs","image":{"url":"https://cdn.cosmicjs.com/a29e69e0-b7c2-11e9-8351-c9e19f12a182-ec1d5de0-9dc0-11e9-a5b4-e5df9f8049d3-Hackernoon.png","imgix_url":"https://imgix.cosmicjs.com/a29e69e0-b7c2-11e9-8351-c9e19f12a182-ec1d5de0-9dc0-11e9-a5b4-e5df9f8049d3-Hackernoon.png"},"case_studies":[{"_id":"596663e8880d69fb6c000194","slug":"joblift-elevates-their-stack","title":"Joblift Elevates Their Stack ","content":"

In any bustling economy, a key piece of capital is human capital. When the most precious portion of capital is required, Joblift seeks to connect positions with people. They choose Cosmic to deliver their content via the cloud. 



Joblift manages localized content to serve Job, Press and Blog feeds to its various markets, including the UK, Netherlands and Germany. Easy user roles and permissions equip their team with the tools they need to seamlessly run a global organization. 


"Cosmic has completely sped up our ability to upload our content easily and efficiently. With Cosmic we now have a smooth process for uploading press releases which reflects the quality content on our website.”

— Ashleigh Grady, Content Editor and Marketing Manager

","metafields":[{"value":"Joblift","key":"company","title":"Company","type":"text","children":null},{"value":"Career Services","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"In any bustling economy, a key piece of capital is human capital. When the most precious portion of capital is required, Joblift seeks to connect positions with people. They choose Cosmic to deliver their content via the cloud. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created":"2017-07-12T18:01:12.194Z","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","status":"published","publish_at":null,"published_at":"2018-12-19T21:44:38.361Z","metadata":{"company":"Joblift","industry_type":"Career Services","teaser":"In any bustling economy, a key piece of capital is human capital. When the most precious portion of capital is required, Joblift seeks to connect positions with people. They choose Cosmic to deliver their content via the cloud. \n","logo":{"url":"https://cdn.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg"}}},{"_id":"5a2455620cb0e3291c00002e","slug":"acculevel-deploys-a-blog","title":"Acculevel Deploys a Blog","content":"

Acculevel is Your Foundation Expert. Serving the Midwest United States for the last 20 years, Acculevel knows what it means to serve and do a job right. Customer retention, reviews and loyalty are the name of their game, so to optimize these efforts and keep customers engaged and informed, Acculevel is scaling up their digital presence through its upcoming website, a new mobile application and more. Led by a new Chief Technology Officer overseeing developers and content editors, here's how Acculevel is ensuring their own foundation is solid.

Mired in an installed WordPress system was leaving Acculevel without the flexibility needed to nimbly build and publish content campaigns to engage with customers. Acculevel's tech team is currently building out a new zippy website built on a Node.js stack, complete with API integrations for ACH Authentication (Plaid) and Payment Gateway (Stripe). Acculevel needed a blog feed that would allow their new API-first methodology to pull data via the cloud while allowing their content editors to easily build and manage content in a WYSIWYG editor. With Cosmic, they were able to build and deploy a fully functioning blog in under 30 minutes.



"Cosmic provided us with a seamless on-boarding experience for creating a Bucket to manage blog content for our growing organization. We needed a programming-language agnostic API to manage content both within our existing WordPress website as well as within our new Node.js web application. Cosmic fit the bill perfectly with its simple Object schema and powerful Metafields. With Cosmic, content is just data and you can pull it however you'd like, wherever you like, allowing us  to build new tools in the future such as survey tools, employee forums and more.”

— Dylan Marsh, Chief Technology Officer  

","metafields":[{"value":"Acculevel ","key":"company","title":"Company","type":"text","children":null},{"value":"Construction","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Acculevel needed a blog feed that would allow their new API-first methodology to pull data via the cloud while allowing their content editor to easily build and manage content in a WYSIWYG editor. With Cosmic, they were able to build and deploy a fully functioning blog in under 30 minutes.\n\n\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"7621bb20-dab4-11e7-82e3-e92aaea009f5-o.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/7621bb20-dab4-11e7-82e3-e92aaea009f5-o.jpg","imgix_url":"https://imgix.cosmicjs.com/7621bb20-dab4-11e7-82e3-e92aaea009f5-o.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2017-12-03T19:49:54.515Z","created_by":"5716b504e9c686d006000073","created":"2017-12-03T19:49:54.515Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5357ef811693be2118000001","publish_at":null,"metadata":{"company":"Acculevel ","industry_type":"Construction","teaser":"Acculevel needed a blog feed that would allow their new API-first methodology to pull data via the cloud while allowing their content editor to easily build and manage content in a WYSIWYG editor. With Cosmic, they were able to build and deploy a fully functioning blog in under 30 minutes.\n\n\n","logo":{"url":"https://cdn.cosmicjs.com/7621bb20-dab4-11e7-82e3-e92aaea009f5-o.jpg","imgix_url":"https://imgix.cosmicjs.com/7621bb20-dab4-11e7-82e3-e92aaea009f5-o.jpg"}}},{"_id":"59f102cbd4de657279002f97","slug":"datalyze-solutions-adds-blog-and-job-feeds","title":"Datalyze Solutions Adds a Blog Feed","content":"

Data. Intelligence. Applications. Location Based Analytics. When everything is converging, teams needs collaboration tools to make their lives easier. That's why Datalyze Solutions chooses Cosmic to deliver its content from the cloud for its Blog feeds. 



"Cosmic has been in use at Datalyze Solutions for more than one and a half years. Cosmic has become a critically important tool for us to publish blog posts quickly and easily. This way, our customers and partners can stay informed about the latest news from our company and other industry-relevant information. Cosmic offers exactly the flexibility and features we really need as content editors!"

— Carolin Bauer, Content Editor and Marketing Manager

","metafields":[{"value":"Datalyze Solutions","key":"company","title":"Company","type":"text","children":null},{"value":"Internet","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Data. Intelligence. Applications. Location Based Analytics. When everything is converging, teams needs collaboration tools to make their lives easier.","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"b4173bb0-dc2d-11e7-9201-fb5838341592-DS_Logo_Blau.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/b4173bb0-dc2d-11e7-9201-fb5838341592-DS_Logo_Blau.png","imgix_url":"https://imgix.cosmicjs.com/b4173bb0-dc2d-11e7-9201-fb5838341592-DS_Logo_Blau.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2017-10-25T21:31:55.033Z","created_by":"5716b504e9c686d006000073","created":"2017-10-25T21:31:55.033Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"metadata":{"company":"Datalyze Solutions","industry_type":"Internet","teaser":"Data. Intelligence. Applications. Location Based Analytics. When everything is converging, teams needs collaboration tools to make their lives easier.","logo":{"url":"https://cdn.cosmicjs.com/b4173bb0-dc2d-11e7-9201-fb5838341592-DS_Logo_Blau.png","imgix_url":"https://imgix.cosmicjs.com/b4173bb0-dc2d-11e7-9201-fb5838341592-DS_Logo_Blau.png"}}}],"app_slugs":[{"slug":"simple-react-blog"},{"slug":"simple-vue-blog"},{"slug":"gatsby-blog"}],"extension_slugs":[{"slug":"wordpress-importer"},{"slug":"export-to-csv"},{"slug":"unsplash-photos"}],"testimonial":"\"When the opportunity to work with Cosmic came up, I jumped on the opportunity. Using an API-first content management platform like Cosmic was perfect (and super simple) for connecting best-in-class services like Algolia for search and SendGrid for email. In terms of providing the framework for teams to quickly build quality professional apps, Cosmic is definitely onto something.”","testimonial_credit":"David Smooke, CEO at Hacker Noon"}},{"_id":"5bad1cabf394147a6754be79","slug":"stripe","title":"Stripe","content":"","metafields":[{"children":null,"type":"text","title":"Link","key":"link","id":"Euw71etcgW","value":"https://cosmicjs.com/articles/integrating-cosmic-powered-content-with-your-favorite-apps-using-zapier-jmm49t8k"},{"children":null,"type":"file","title":"Image","key":"image","id":"lWJDPFiTgH","value":"fc935bd0-8ed7-11ea-910b-435199f15a39-stripe.jpg","url":"https://cdn.cosmicjs.com/fc935bd0-8ed7-11ea-910b-435199f15a39-stripe.jpg","imgix_url":"https://imgix.cosmicjs.com/fc935bd0-8ed7-11ea-910b-435199f15a39-stripe.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"integrations","created":"2018-09-27T18:08:43.046Z","created_at":"2018-09-27T18:08:43.046Z","modified_at":"2020-05-05T13:54:51.912Z","status":"published","locale":null,"published_at":"2020-05-05T13:54:51.912Z","created_by":"5357ef811693be2118000001","order":10,"modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"metadata":{"link":"https://cosmicjs.com/articles/integrating-cosmic-powered-content-with-your-favorite-apps-using-zapier-jmm49t8k","image":{"url":"https://cdn.cosmicjs.com/fc935bd0-8ed7-11ea-910b-435199f15a39-stripe.jpg","imgix_url":"https://imgix.cosmicjs.com/fc935bd0-8ed7-11ea-910b-435199f15a39-stripe.jpg"}}},{"_id":"61547de7fe3a1f0008f72974","order":11,"slug":"webhook-props-now-available","title":"Webhook Props Now Available","content":"

You can now set props on webhooks to limit the data payload. This is useful for Objects with large data payloads as it allows you to limit the payload to just the data you need.

How to use the new feature
See the props section in the Cosmic docs to learn more about how to use props. Go to Your Bucket > Settings > Webhooks after logging in to use the new feature.

Let's look at a couple of example webhook payloads with and without props.

Without Props
You get the full data payload.

\">

That's a lot of data! Do you need it all? Maybe not. Enter props.

With Props
Get only the data you need. This example sets slug,title,metadata

Go to Bucket Settings > Webhooks to set props.


\">

Wow, that's nice! Notice how much more concise the data payload is compared to not using props. Keep in mind that this currently only applies to first-level props (namespaced metadata declarations are not supported yet).


We hope you enjoy this quick update to make your automated workflows with webhooks more efficient. If you have any questions, please join the conversation in the Cosmic Slack channel and reach out to us on Twitter.

","metafields":[{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"5iezexQg4I","value":"2021-10-05"},{"children":null,"type":"object","title":"Author","key":"author","id":"QoeItpuV4n","value":"5768b253163172890e00002c","object_type":"authors","object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"n90txKAFtg","value":"","url":null,"imgix_url":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"changelogs","created_at":"2021-09-29T14:53:27.243Z","created_by":"5357ef811693be2118000001","modified_at":"2021-10-05T15:52:39.177Z","created":"2021-09-29T14:53:27.243Z","status":"published","thumbnail":"","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2021-10-05T15:52:39.177Z","metadata":{"published_date":"2021-10-05","author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"featured_image":{"url":null,"imgix_url":null}}},{"_id":"5ade6e0e2b218820ec24bff1","order":11,"slug":"medical-realities-delivers-vr-surgical-content","title":"Medical Realities Delivers VR Surgical Content","content":"

The Medical Realties Platform is a technology powerhouse designed to deliver realism and immersion. Delivering high-quality surgical training using Virtual Reality, Medical Realities lets you become immersed while world-class surgeons teach their interactive modules, which includes 360-degree 4K video and a testing system within the application. 



The Medical Realities team needed a way for educators (non-technical editors) to manage content that could be served to VR headsets for consumption by trainees, so they chose Cosmic to manage and deliver their content from the cloud through an API. 



"Cosmic allowed us to easily spin up content models that would allow our non-technical editors to manage the most sophisticated medical VR content out there. Our developers were equipped with robust Docs and Example Apps to get them started and were able to use the bleeding-edge frameworks necessary to run Virtual Reality."

— Joe Marritt, Lead Web Developer 

","metafields":[{"value":"Medical Realities","key":"company","title":"Company","type":"text","children":null},{"value":"Healthcare and Virtual Reality ","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"The Medical Realties Platform is a technology powerhouse designed to deliver realism and immersion. Delivering high-quality surgical training using Virtual Reality, Medical Realities lets you become immersed while world-class surgeons teach their interactive modules, which includes 360-degree 4K video and a testing system within the application. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"0a95ad50-474f-11e8-b969-053c57b3610c-medical-realities-1.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/0a95ad50-474f-11e8-b969-053c57b3610c-medical-realities-1.png","imgix_url":"https://imgix.cosmicjs.com/0a95ad50-474f-11e8-b969-053c57b3610c-medical-realities-1.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-04-23T23:36:46.885Z","created_by":"5716b504e9c686d006000073","created":"2018-04-23T23:36:46.885Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-05-18T17:07:50.800Z","metadata":{"company":"Medical Realities","industry_type":"Healthcare and Virtual Reality ","teaser":"The Medical Realties Platform is a technology powerhouse designed to deliver realism and immersion. Delivering high-quality surgical training using Virtual Reality, Medical Realities lets you become immersed while world-class surgeons teach their interactive modules, which includes 360-degree 4K video and a testing system within the application. \n","logo":{"url":"https://cdn.cosmicjs.com/0a95ad50-474f-11e8-b969-053c57b3610c-medical-realities-1.png","imgix_url":"https://imgix.cosmicjs.com/0a95ad50-474f-11e8-b969-053c57b3610c-medical-realities-1.png"}}},{"_id":"5efb8a9903b92100071f2e89","slug":"netlify-cms","title":"Netlify CMS","content":"

Netlify CMS was created by the static website hosting company Netlify and describes itself as an open source content manager for your Git workflow


Monolithic vs Headless CMS

Netlify CMS, as a git-based CMS comes with a coupled front end application layer that requires additional development and maintenance. Cosmic is a Headless CMS meaning that the content API and presentation layer are decoupled which gives your team greater flexibility when it comes to where your content can go.

Cosmic provides everything your team of developers and content creators need: powerful and intuitive APIs for developers, and an easy-to-use dashboard for content creators. We've removed all complexity and CMS maintenance, so your team can focus on building great products faster, together.


Is Netlify CMS a Headless CMS?

In short, no. Netlify CMS is not a true headless CMS as it doesn't expose any API for scalable content delivery. So along with your application, you will still need to maintain the CMS itself, adding more development costs and taking away focus from what really matters: creating great content and user experiences in your main website or app.

","metafields":[{"children":null,"type":"file","title":"Logo","key":"logo","id":"iU6dxRtP2n","value":"bc9f8100-bb02-11ea-8170-e7fb6745eb70-netlify-cms.png","url":"https://cdn.cosmicjs.com/bc9f8100-bb02-11ea-8170-e7fb6745eb70-netlify-cms.png","imgix_url":"https://imgix.cosmicjs.com/bc9f8100-bb02-11ea-8170-e7fb6745eb70-netlify-cms.png"},{"children":null,"type":"textarea","title":"Tech","key":"tech","id":"ZpG4vKX8YO","value":"Git. Front end tech: HTML, CSS, JavaScript."},{"children":null,"type":"textarea","title":"Scalability","key":"scalability","id":"JUVx8kMprt","value":"Does not scale easily. Limited by your servers, hosting provider, and budget."},{"children":null,"type":"textarea","title":"Security","key":"security","id":"S5913uudb4","value":"You manage the security yourself. No default data encryption at rest or in transit."},{"children":null,"type":"textarea","title":"Maintenance","key":"maintenance","id":"8ONZsltoic","value":"You deploy, host, and maintain everything yourself. Along with your application and content, you need to maintain updates and security for your CMS system."},{"children":null,"type":"textarea","title":"Caching","key":"caching","id":"QfA7auue26","value":"No caching included out of the box."},{"children":null,"type":"textarea","title":"Media CDN","key":"media_cdn","id":"L6zrGGPLdM","value":"No CDN included out of the box."},{"children":null,"type":"textarea","title":"Image Processing","key":"image_processing","id":"uV5gouDMlf","value":"Manually manage your own image sizes and optimizations."},{"children":null,"type":"textarea","title":"Extendability","key":"extendability","id":"9VrnbRKZZ7","value":"Templates and plugins."},{"children":null,"type":"textarea","title":"Front end","key":"front_end","id":"P6XygPnJLd","value":"Front end is coupled with backend CMS. Not Headless."},{"children":null,"type":"textarea","title":"Number of Projects","key":"number_of_projects","id":"tj4QESi7Ms","value":"One login, one website."},{"children":null,"type":"html-textarea","title":"Costs","key":"costs","id":"d6BnXVyIBz","value":"

You will need to hire developer resources. Average salary of a full-stack developer is $111,600 per year. You may need to hire 1-3 developers to maintain the CMS.

"},{"children":null,"type":"text","title":"Vendor Name","key":"vendor_name","id":"DEaXiVtgCl","value":"Netlify CMS"},{"children":null,"type":"switch","title":"Include in link list","key":"include_in_link_list","id":"ePubM4gbrM","value":true,"options":"yes,no"},{"children":null,"type":"text","title":"Cost Value","key":"cost_value","id":"KH0Bv9qOvh","value":"$223,200"},{"children":null,"type":"text","title":"Cost Text","key":"cost_text","id":"1xyR4tLita","value":"per year"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"cms-competitors","created":"2020-06-30T18:55:21.307Z","created_at":"2020-06-30T18:55:21.307Z","modified_at":"2020-06-30T18:55:31.932Z","status":"published","locale":null,"modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-06-30T18:55:31.932Z","unpublish_at":null,"order":11,"metadata":{"logo":{"url":"https://cdn.cosmicjs.com/bc9f8100-bb02-11ea-8170-e7fb6745eb70-netlify-cms.png","imgix_url":"https://imgix.cosmicjs.com/bc9f8100-bb02-11ea-8170-e7fb6745eb70-netlify-cms.png"},"tech":"Git. Front end tech: HTML, CSS, JavaScript.","scalability":"Does not scale easily. Limited by your servers, hosting provider, and budget.","security":"You manage the security yourself. No default data encryption at rest or in transit.","maintenance":"You deploy, host, and maintain everything yourself. Along with your application and content, you need to maintain updates and security for your CMS system.","caching":"No caching included out of the box.","media_cdn":"No CDN included out of the box.","image_processing":"Manually manage your own image sizes and optimizations.","extendability":"Templates and plugins.","front_end":"Front end is coupled with backend CMS. Not Headless.","number_of_projects":"One login, one website.","costs":"

You will need to hire developer resources. Average salary of a full-stack developer is $111,600 per year. You may need to hire 1-3 developers to maintain the CMS.

","vendor_name":"Netlify CMS","include_in_link_list":true,"cost_value":"$223,200","cost_text":"per year"}},{"_id":"5d49d3a7cb90f81897c586df","order":11,"slug":"cms-software-for-press-websites","title":"CMS Software for Press Websites ","content":"

Cosmic provides flexible CMS Software for teams of developers and content creators, including press and marketing departments publishing press releases and company updates. Companies managing press content use Cosmic CMS Software because the Dashboard is simple and intuitive to manage and schedule content for publishing.

Teams using CMS Software to power press content don't have to maintain their own server and content management system. By focusing on apps and not infrastructure, teams are able to publish press content faster, together. 


What is Headless CMS Software?

Headless CMS Software works by providing non-technical editors with a Dashboard UI to model, create and publish content while providing developers with API tools and resources to integrate content with any website or app. By decoupling content from code, teams create a central content repository that can power all of their content-powered applications. 

","metafields":[{"children":null,"type":"text","title":"Solution Name","key":"solution_name","id":"a8KH2Er32F","value":"CMS Software for Press Websites "},{"children":null,"type":"file","title":"Image","key":"image","id":"anOlZAh564","value":"3c672fa0-b884-11e9-948b-3b318884b3f7-39b60450-9f54-11e9-ac09-4be8a5631b5e-Hostmaker.png","url":"https://cdn.cosmicjs.com/3c672fa0-b884-11e9-948b-3b318884b3f7-39b60450-9f54-11e9-ac09-4be8a5631b5e-Hostmaker.png","imgix_url":"https://imgix.cosmicjs.com/3c672fa0-b884-11e9-948b-3b318884b3f7-39b60450-9f54-11e9-ac09-4be8a5631b5e-Hostmaker.png"},{"children":null,"type":"objects","title":"Case Studies","key":"case_studies","id":"sr0teJF7uV","value":"596663e8880d69fb6c000194,5b743e111a739a78a5f0725b,5be9ca96cc3f3e2ce66ce511","object_type":"case-studies","objects":[{"_id":"596663e8880d69fb6c000194","slug":"joblift-elevates-their-stack","title":"Joblift Elevates Their Stack ","content":"

In any bustling economy, a key piece of capital is human capital. When the most precious portion of capital is required, Joblift seeks to connect positions with people. They choose Cosmic to deliver their content via the cloud. 



Joblift manages localized content to serve Job, Press and Blog feeds to its various markets, including the UK, Netherlands and Germany. Easy user roles and permissions equip their team with the tools they need to seamlessly run a global organization. 


"Cosmic has completely sped up our ability to upload our content easily and efficiently. With Cosmic we now have a smooth process for uploading press releases which reflects the quality content on our website.”

— Ashleigh Grady, Content Editor and Marketing Manager

","metafields":[{"value":"Joblift","key":"company","title":"Company","type":"text","children":null},{"value":"Career Services","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"In any bustling economy, a key piece of capital is human capital. When the most precious portion of capital is required, Joblift seeks to connect positions with people. They choose Cosmic to deliver their content via the cloud. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created":"2017-07-12T18:01:12.194Z","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","status":"published","publish_at":null,"published_at":"2018-12-19T21:44:38.361Z"},{"_id":"5b743e111a739a78a5f0725b","slug":"hostmaker-manages-localized-content","title":"Hostmaker Manages Localized Content ","content":"

Hostmaker is a property management company that operates across 9 cities in 6 countries. Hostmaker manages properties that are being rented to vacationers and lodgers from around the world. They take the hosts' home and provide cleaning and decor services prior to listing the location on up to 15 various travel booking platforms. Hostmaker's hosts love the service for the superior volume that they continue to deliver compared to their competitors, which are driven by proprietary pricing strategies, local market expertise and global industry experience. 



Hostmaker's tech team needed a solution for their product marketing managers to update Landing Pages, Case Studies, Press Releases and FAQs for the various markets they manage, including cities such as Rome, London and Barcelona. Localizing content for Hostmaker's audiences is a mission-critical piece of the marketing strategy that is driving such tremendous growth. Hostmaker chose Cosmic to give their cross-functional team the tools they need to perform their jobs. Now Hostmaker's developers can build reusable components and scalable content models while their marketers can manage content specific to a particular locale. 



\">



"We’ve been using Cosmic for around a year. At first there were some issues with components that prohibited us from performing all our desired tasks, but all those issues were quickly solved by the Cosmic Team. As of now, the tools are great, and have even improved during our use of the platform. It does all the things we need at the moment. As a tool Cosmic has been not only ideal for managing components on the site but adaptive enough for our non-tech users to create landing pages and modify existing content, saving us precious dev time.”


— Hostmaker Digital Team

","metafields":[{"value":"Hostmaker","key":"company","title":"Company","type":"text","children":null},{"value":"Hospitality ","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Hostmaker is a property management company that operates across 9 cities in 6 countries. Hostmaker manages properties that are being rented to vacationers and lodgers from around the world. They take the hosts' home and provide cleaning and decor services prior to listing the location on up to 15 various travel booking platforms. Hostmaker's hosts love the service for the superior volume that they continue to deliver compared to their competitors, which are driven by proprietary pricing strategies, local market expertise and global industry experience. \n\n\n\n\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"2f1889b0-a64d-11e8-a8cb-19319ae2c1b8-B13ds9DG_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/2f1889b0-a64d-11e8-a8cb-19319ae2c1b8-B13ds9DG_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/2f1889b0-a64d-11e8-a8cb-19319ae2c1b8-B13ds9DG_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-03-01T22:26:36.367Z","created_by":"5716b504e9c686d006000073","created":"2018-08-15T14:52:01.115Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-09-25T15:10:44.600Z"},{"_id":"5be9ca96cc3f3e2ce66ce511","slug":"road-redemption-launches-a-marketing-microsite","title":"Road Redemption Launches a Marketing Microsite","content":"

Tripwire Interactive, a leading entertainment software developer and publisher founded in 2005, recently launched its corporate website on Cosmic. The Tripwire Interactive team can now easily manage microsite content for each game with a dedicated studio manager as its content creator. This is important as Tripwire is always debuting new marketing campaigns to accompany game launches. 



Road Redemption is the first of many games to have innovative content creator access provided via a headless CMS API that delivers the best of both worlds for cross-functional teams. Read more about how Tripwire Interactive builds apps faster using Cosmic.


"Cosmic allowed us to easily integrate a secure and fast back-end API into our React app. Cosmic fit our needs with its simple web-based dashboard so that members of our marketing team can create, edit, and delete new content on the fly. Our team\r\nhas been enjoying the ease of use with the new system."

— Owen Liversidge, Lead Developer


","metafields":[{"value":"Road Redemption ","key":"company","title":"Company","type":"text","children":null},{"value":"Gaming","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Tripwire Interactive, a leading entertainment software developer and publisher founded in 2005, recently launched its corporate website on Cosmic. The Tripwire Interactive team can now easily manage microsite content for each game with a dedicated studio manager as its content creator. This is important as Tripwire is always debuting new marketing campaigns to accompany game launches. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"a4f8e050-e6ab-11e8-93f0-a94cde6f34a7-64d11670-dddf-11e8-95d7-dfced904ba0c-RR_Logo_Hires_TrasparenrBack-(1).png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/a4f8e050-e6ab-11e8-93f0-a94cde6f34a7-64d11670-dddf-11e8-95d7-dfced904ba0c-RR_Logo_Hires_TrasparenrBack-(1).png","imgix_url":"https://imgix.cosmicjs.com/a4f8e050-e6ab-11e8-93f0-a94cde6f34a7-64d11670-dddf-11e8-95d7-dfced904ba0c-RR_Logo_Hires_TrasparenrBack-(1).png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2018-11-12T18:46:46.371Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-11-13T21:30:43.964Z"}]},{"children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"react-cosmedium-blog","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"simple-vue-blog","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"nextjs-tour-diary","type":"text","required":false}]}],"type":"repeater","title":"App Slugs","key":"app_slugs","id":"SdBJkhbywF","value":"react-cosmedium-blog","repeater_fields":[{"title":"Slug","key":"slug","value":"","type":"text","required":false}]},{"children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"wordpress-importer","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"export-to-csv","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"unsplash-photos","type":"text","required":false}]}],"type":"repeater","title":"Extension SLugs","key":"extension_slugs","id":"YnrkrKADVH","value":"wordpress-importer","repeater_fields":[{"title":"Slug","key":"slug","value":"","type":"text","required":false}]},{"children":null,"type":"textarea","title":"Testimonial","key":"testimonial","id":"v12kVrJ5BZ","value":"\"As a tool Cosmic has been not only ideal for managing components on the site but adaptive enough for our non-tech users to create landing pages and modify existing content, saving us precious dev time.”"},{"children":null,"type":"text","title":"Testimonial Credit","key":"testimonial_credit","id":"3pJc5Zy5Zs","value":"Hostmaker Digital Team"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"solutions","created_at":"2019-08-05T20:18:17.006Z","created_by":"5716b504e9c686d006000073","modified_at":"2020-05-06T05:35:11.051Z","created":"2019-08-06T19:23:19.875Z","status":"published","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-05-06T05:35:11.051Z","unpublish_at":null,"metadata":{"solution_name":"CMS Software for Press Websites ","image":{"url":"https://cdn.cosmicjs.com/3c672fa0-b884-11e9-948b-3b318884b3f7-39b60450-9f54-11e9-ac09-4be8a5631b5e-Hostmaker.png","imgix_url":"https://imgix.cosmicjs.com/3c672fa0-b884-11e9-948b-3b318884b3f7-39b60450-9f54-11e9-ac09-4be8a5631b5e-Hostmaker.png"},"case_studies":[{"_id":"596663e8880d69fb6c000194","slug":"joblift-elevates-their-stack","title":"Joblift Elevates Their Stack ","content":"

In any bustling economy, a key piece of capital is human capital. When the most precious portion of capital is required, Joblift seeks to connect positions with people. They choose Cosmic to deliver their content via the cloud. 



Joblift manages localized content to serve Job, Press and Blog feeds to its various markets, including the UK, Netherlands and Germany. Easy user roles and permissions equip their team with the tools they need to seamlessly run a global organization. 


"Cosmic has completely sped up our ability to upload our content easily and efficiently. With Cosmic we now have a smooth process for uploading press releases which reflects the quality content on our website.”

— Ashleigh Grady, Content Editor and Marketing Manager

","metafields":[{"value":"Joblift","key":"company","title":"Company","type":"text","children":null},{"value":"Career Services","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"In any bustling economy, a key piece of capital is human capital. When the most precious portion of capital is required, Joblift seeks to connect positions with people. They choose Cosmic to deliver their content via the cloud. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created":"2017-07-12T18:01:12.194Z","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","status":"published","publish_at":null,"published_at":"2018-12-19T21:44:38.361Z","metadata":{"company":"Joblift","industry_type":"Career Services","teaser":"In any bustling economy, a key piece of capital is human capital. When the most precious portion of capital is required, Joblift seeks to connect positions with people. They choose Cosmic to deliver their content via the cloud. \n","logo":{"url":"https://cdn.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg"}}},{"_id":"5b743e111a739a78a5f0725b","slug":"hostmaker-manages-localized-content","title":"Hostmaker Manages Localized Content ","content":"

Hostmaker is a property management company that operates across 9 cities in 6 countries. Hostmaker manages properties that are being rented to vacationers and lodgers from around the world. They take the hosts' home and provide cleaning and decor services prior to listing the location on up to 15 various travel booking platforms. Hostmaker's hosts love the service for the superior volume that they continue to deliver compared to their competitors, which are driven by proprietary pricing strategies, local market expertise and global industry experience. 



Hostmaker's tech team needed a solution for their product marketing managers to update Landing Pages, Case Studies, Press Releases and FAQs for the various markets they manage, including cities such as Rome, London and Barcelona. Localizing content for Hostmaker's audiences is a mission-critical piece of the marketing strategy that is driving such tremendous growth. Hostmaker chose Cosmic to give their cross-functional team the tools they need to perform their jobs. Now Hostmaker's developers can build reusable components and scalable content models while their marketers can manage content specific to a particular locale. 



\">



"We’ve been using Cosmic for around a year. At first there were some issues with components that prohibited us from performing all our desired tasks, but all those issues were quickly solved by the Cosmic Team. As of now, the tools are great, and have even improved during our use of the platform. It does all the things we need at the moment. As a tool Cosmic has been not only ideal for managing components on the site but adaptive enough for our non-tech users to create landing pages and modify existing content, saving us precious dev time.”


— Hostmaker Digital Team

","metafields":[{"value":"Hostmaker","key":"company","title":"Company","type":"text","children":null},{"value":"Hospitality ","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Hostmaker is a property management company that operates across 9 cities in 6 countries. Hostmaker manages properties that are being rented to vacationers and lodgers from around the world. They take the hosts' home and provide cleaning and decor services prior to listing the location on up to 15 various travel booking platforms. Hostmaker's hosts love the service for the superior volume that they continue to deliver compared to their competitors, which are driven by proprietary pricing strategies, local market expertise and global industry experience. \n\n\n\n\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"2f1889b0-a64d-11e8-a8cb-19319ae2c1b8-B13ds9DG_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/2f1889b0-a64d-11e8-a8cb-19319ae2c1b8-B13ds9DG_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/2f1889b0-a64d-11e8-a8cb-19319ae2c1b8-B13ds9DG_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-03-01T22:26:36.367Z","created_by":"5716b504e9c686d006000073","created":"2018-08-15T14:52:01.115Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-09-25T15:10:44.600Z","metadata":{"company":"Hostmaker","industry_type":"Hospitality ","teaser":"Hostmaker is a property management company that operates across 9 cities in 6 countries. Hostmaker manages properties that are being rented to vacationers and lodgers from around the world. They take the hosts' home and provide cleaning and decor services prior to listing the location on up to 15 various travel booking platforms. Hostmaker's hosts love the service for the superior volume that they continue to deliver compared to their competitors, which are driven by proprietary pricing strategies, local market expertise and global industry experience. \n\n\n\n\n","logo":{"url":"https://cdn.cosmicjs.com/2f1889b0-a64d-11e8-a8cb-19319ae2c1b8-B13ds9DG_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/2f1889b0-a64d-11e8-a8cb-19319ae2c1b8-B13ds9DG_400x400.jpg"}}},{"_id":"5be9ca96cc3f3e2ce66ce511","slug":"road-redemption-launches-a-marketing-microsite","title":"Road Redemption Launches a Marketing Microsite","content":"

Tripwire Interactive, a leading entertainment software developer and publisher founded in 2005, recently launched its corporate website on Cosmic. The Tripwire Interactive team can now easily manage microsite content for each game with a dedicated studio manager as its content creator. This is important as Tripwire is always debuting new marketing campaigns to accompany game launches. 



Road Redemption is the first of many games to have innovative content creator access provided via a headless CMS API that delivers the best of both worlds for cross-functional teams. Read more about how Tripwire Interactive builds apps faster using Cosmic.


"Cosmic allowed us to easily integrate a secure and fast back-end API into our React app. Cosmic fit our needs with its simple web-based dashboard so that members of our marketing team can create, edit, and delete new content on the fly. Our team\r\nhas been enjoying the ease of use with the new system."

— Owen Liversidge, Lead Developer


","metafields":[{"value":"Road Redemption ","key":"company","title":"Company","type":"text","children":null},{"value":"Gaming","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Tripwire Interactive, a leading entertainment software developer and publisher founded in 2005, recently launched its corporate website on Cosmic. The Tripwire Interactive team can now easily manage microsite content for each game with a dedicated studio manager as its content creator. This is important as Tripwire is always debuting new marketing campaigns to accompany game launches. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"a4f8e050-e6ab-11e8-93f0-a94cde6f34a7-64d11670-dddf-11e8-95d7-dfced904ba0c-RR_Logo_Hires_TrasparenrBack-(1).png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/a4f8e050-e6ab-11e8-93f0-a94cde6f34a7-64d11670-dddf-11e8-95d7-dfced904ba0c-RR_Logo_Hires_TrasparenrBack-(1).png","imgix_url":"https://imgix.cosmicjs.com/a4f8e050-e6ab-11e8-93f0-a94cde6f34a7-64d11670-dddf-11e8-95d7-dfced904ba0c-RR_Logo_Hires_TrasparenrBack-(1).png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2018-11-12T18:46:46.371Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-11-13T21:30:43.964Z","metadata":{"company":"Road Redemption ","industry_type":"Gaming","teaser":"Tripwire Interactive, a leading entertainment software developer and publisher founded in 2005, recently launched its corporate website on Cosmic. The Tripwire Interactive team can now easily manage microsite content for each game with a dedicated studio manager as its content creator. This is important as Tripwire is always debuting new marketing campaigns to accompany game launches. \n","logo":{"url":"https://cdn.cosmicjs.com/a4f8e050-e6ab-11e8-93f0-a94cde6f34a7-64d11670-dddf-11e8-95d7-dfced904ba0c-RR_Logo_Hires_TrasparenrBack-(1).png","imgix_url":"https://imgix.cosmicjs.com/a4f8e050-e6ab-11e8-93f0-a94cde6f34a7-64d11670-dddf-11e8-95d7-dfced904ba0c-RR_Logo_Hires_TrasparenrBack-(1).png"}}}],"app_slugs":[{"slug":"react-cosmedium-blog"},{"slug":"simple-vue-blog"},{"slug":"nextjs-tour-diary"}],"extension_slugs":[{"slug":"wordpress-importer"},{"slug":"export-to-csv"},{"slug":"unsplash-photos"}],"testimonial":"\"As a tool Cosmic has been not only ideal for managing components on the site but adaptive enough for our non-tech users to create landing pages and modify existing content, saving us precious dev time.”","testimonial_credit":"Hostmaker Digital Team"}},{"_id":"591dcc617b17dbf10500212d","order":11,"slug":"ivan-larionov","title":"Ivan Larionov","content":"","metafields":[{"value":"713396e0-3be7-11e7-bfc3-91ffe5d3362c-ivan.jpeg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/713396e0-3be7-11e7-bfc3-91ffe5d3362c-ivan.jpeg","imgix_url":"https://imgix.cosmicjs.com/713396e0-3be7-11e7-bfc3-91ffe5d3362c-ivan.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-05-18T16:31:29.363Z","created_by":"5357ef811693be2118000001","created":"2017-05-18T16:31:29.363Z","status":"published","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/713396e0-3be7-11e7-bfc3-91ffe5d3362c-ivan.jpeg","imgix_url":"https://imgix.cosmicjs.com/713396e0-3be7-11e7-bfc3-91ffe5d3362c-ivan.jpeg"}}},{"_id":"62166063a802eb00093ecf51","order":11,"slug":"new-dashboard-updates-webhooks-smart-views-bulk-edit-and-more","title":"New Dashboard Updates: Webhooks, Smart Views, Bulk Edit, and more!","content":"

We are excited to announce big updates to the new Cosmic dashboard. Newly available features include:

1. Webhooks
2. Smart Views
3. Bulk Edit
4. Search & Replace

TL;DR
Sign up for the alpha preview to check out the new features.


Webhooks

We are thrilled to unveil the new webhooks feature. You will notice that we have done a complete redesign of the logic, which will make adding webhooks (one of our most popular add-on features) much easier. Check out the details in the video below and\r\nfollow these steps:

1. Create a new endpoint using a request intercepting tool like Beeceptor.
2. Go to Bucket Settings > Webhooks and add the URL in a new webook.
3. Set your options for webhook trigger resource and event.

4. Next, update a resource to trigger the event.
5. Go back to Beeceptor to see the response data.

Smart Views

One of the most handy features in the Cosmic dashboard is our smart views, which makes it easy to save custom content filtering for easy access later. We think you will like the new approach to this feature which got even better with our new powerful filtering capabilities.

Smart view developer tools
And since we are focused on creating the best developer experience possible, in any smart view, you can open up the developer tools drawer and get access to the smart view example query code to add to any website or application. Great for those of us\r\nthat like a simple copy + paste 😉 

To check out the new smart views, follow these steps and watch the demo video:

1. Go to the Objects table and set a filter on the top of the Objects table.
2. Click the create smart view button on the top of the Objects table.
3. Go to the dev tools drawer to get the dev tools query.

Bulk Edit

Bulk editing content in the dashboard just got much simpler as well. Simply select the Objects to edit, include the fields that will be bulk edited, and make your changes.

Search & Replace

Much like bulk editing, searching and replacing content across multiple content in the dashboard is a breeze.

Join the Alpha

We are excited for you to test out these new features in the dashboard as we continue to build the best content management solution in the world.

If you haven't joined, sign up to get on the waitlist to preview the new dashboard including these new features. It is our hope that we can enable your team with even greater flexibility and control over your Cosmic-powered content and hopefully get some feedback from you!

Get Some Swag 😎 

After joining the waitlist, share your personal link in the confirmation email on social media to be entered to receive free Cosmic swag including hoodies, tshirts, coffee mugs, and stickers.

Stay tuned for more exciting updates! Follow us on Twitter, and join our team on Slack to\r\nget the latest on the new dashboard progress.

The Cosmic Team

","metafields":[{"children":null,"type":"object","title":"Author","key":"author","id":"2BLeCcdajP","value":"5ffa1d1e0046b0000799cb7b","required":true,"object_type":"authors","object":{"_id":"5ffa1d1e0046b0000799cb7b","slug":"cosmic","title":"Cosmic","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"ZogvxZg6OL","value":""},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D0qLJ4RPBe","value":"10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2021-01-09T21:16:14.533Z","created_by":"5357ef811693be2118000001","modified_at":"2021-01-09T21:18:26.147Z","created":"2021-01-09T21:16:14.533Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/e55ef990-52bf-11eb-986d-4d7ff5faa3ab-logo.svg","published_at":"2021-01-09T21:18:26.147Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null}},{"children":null,"type":"html-textarea","title":"Teaser","key":"teaser","id":"1UZhv2b75T","value":"

We are excited to announce big updates to the new Cosmic dashboard including webhooks, smart views, bulk edit, and more!

"},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"nM1TSaJcjf","value":"a3a38e80-94d6-11ec-96f2-43bdd99faa64-new-features.png","url":"https://cdn.cosmicjs.com/a3a38e80-94d6-11ec-96f2-43bdd99faa64-new-features.png","imgix_url":"https://imgix.cosmicjs.com/a3a38e80-94d6-11ec-96f2-43bdd99faa64-new-features.png"},{"children":null,"type":"textarea","title":"SEO Meta Description","key":"seo_meta_description","id":"dNNP4z65ql","value":"We are excited to announce big updates to the new Cosmic dashboard including webhooks, smart views, bulk edit, and more!"},{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"PbUAgGYpZc","value":"2022-02-23"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2022-02-23T16:27:15.049Z","created_by":"5357ef811693be2118000001","modified_at":"2022-05-03T23:50:40.910Z","created":"2022-02-23T16:27:15.049Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/a3a38e80-94d6-11ec-96f2-43bdd99faa64-new-features.png","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2022-05-03T23:50:40.910Z","metadata":{"author":{"_id":"5ffa1d1e0046b0000799cb7b","slug":"cosmic","title":"Cosmic","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"ZogvxZg6OL","value":""},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D0qLJ4RPBe","value":"10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2021-01-09T21:16:14.533Z","created_by":"5357ef811693be2118000001","modified_at":"2021-01-09T21:18:26.147Z","created":"2021-01-09T21:16:14.533Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/e55ef990-52bf-11eb-986d-4d7ff5faa3ab-logo.svg","published_at":"2021-01-09T21:18:26.147Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"metadata":{"username":"","profile_picture":{"url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}}},"teaser":"

We are excited to announce big updates to the new Cosmic dashboard including webhooks, smart views, bulk edit, and more!

","featured_image":{"url":"https://cdn.cosmicjs.com/a3a38e80-94d6-11ec-96f2-43bdd99faa64-new-features.png","imgix_url":"https://imgix.cosmicjs.com/a3a38e80-94d6-11ec-96f2-43bdd99faa64-new-features.png"},"seo_meta_description":"We are excited to announce big updates to the new Cosmic dashboard including webhooks, smart views, bulk edit, and more!","published_date":"2022-02-23"}},{"_id":"631a437d35b0060009a68c50","slug":"static-website-cms","title":"Static Website CMS","content":"","metafields":[{"children":null,"type":"file","title":"Image","key":"image","id":"IfHu9lCEFz","value":"22719f00-2fae-11ed-8ca6-eb31ab715749-globe.png","url":"https://cdn.cosmicjs.com/22719f00-2fae-11ed-8ca6-eb31ab715749-globe.png","imgix_url":"https://imgix.cosmicjs.com/22719f00-2fae-11ed-8ca6-eb31ab715749-globe.png"},{"children":null,"type":"file","title":"Thumbnail","key":"thumbnail","id":"DN3r6Gtx3P","value":"22719f00-2fae-11ed-8ca6-eb31ab715749-globe.png","url":"https://cdn.cosmicjs.com/22719f00-2fae-11ed-8ca6-eb31ab715749-globe.png","imgix_url":"https://imgix.cosmicjs.com/22719f00-2fae-11ed-8ca6-eb31ab715749-globe.png"},{"children":null,"type":"html-textarea","title":"Blurb","key":"blurb","id":"ddLOwnOJFb","value":"

Cosmic is the best CMS for static websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

"},{"children":null,"type":"text","title":"Headline","key":"headline","id":"rFfNN487Tl","value":"Static Website"},{"children":null,"type":"text","title":"SEO Description","key":"seo_description","id":"7wFXRwSojl","value":"Cosmic is the best CMS for Static websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators."},{"children":null,"type":"file","title":"Twitter Card Image","key":"twitter_card_image","id":"ezvlOz64rN","value":"22719f00-2fae-11ed-8ca6-eb31ab715749-globe.png","url":"https://cdn.cosmicjs.com/22719f00-2fae-11ed-8ca6-eb31ab715749-globe.png","imgix_url":"https://imgix.cosmicjs.com/22719f00-2fae-11ed-8ca6-eb31ab715749-globe.png"},{"children":null,"type":"html-textarea","title":"Code Example","key":"code_example","id":"YQnGu5o9hW","value":""},{"children":null,"type":"text","title":"SEO Title","key":"seo_title","id":"Wb3kA7Qo5X","value":"Best Headless CMS for Static Websites"},{"children":[{"type":"repeating_item","children":[{"title":"Title","key":"title","value":"Getting Started with Cosmic CMS and Next.js (Part 1)","type":"text","required":false},{"title":"Link","key":"link","value":"https://www.youtube.com/embed/NZA1dF2IDqQ?showinfo=0&wmode=opaque","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Title","key":"title","value":"Building a Blog with Cosmic CMS and Next.js (Part 2)","type":"text","required":false},{"title":"Link","key":"link","value":"https://www.youtube.com/embed/sdvdwo3g3PE?showinfo=0&wmode=opaque","type":"text","required":false}]}],"type":"repeater","title":"Videos","key":"videos","id":"TkE26J1oZI","value":"Getting Started with Cosmic CMS and Next.js (Part 1)","repeater_fields":[{"title":"Title","key":"title","value":"","type":"text","required":false},{"title":"Link","key":"link","value":"","type":"text","required":false}]},{"children":null,"type":"text","title":"Apps Search Term","key":"apps_search_term","id":"SaI6MZNDeM","value":""},{"children":null,"type":"text","title":"Articles Search Term","key":"articles_search_term","id":"VogkNeUBrY","value":""},{"children":null,"type":"html-textarea","title":"Page Overview","key":"page_overview","id":"027E3FN9bJ","value":""},{"children":null,"type":"html-textarea","title":"SEO Content","key":"seo_content","id":"UdBBZP9AZp","value":""},{"children":null,"type":"text","title":"Page Overview Title","key":"page_overview_title","id":"gj036836gx4c73fpdjzb","value":""},{"children":[],"type":"repeater","title":"Apps","key":"apps","id":"dkpxmwigd1z8x4ants9f","value":"","repeater_fields":[{"title":"App Slug","key":"app_slug","value":"","type":"text","required":false}]},{"children":[],"type":"repeater","title":"Articles","key":"articles","id":"dwil4bqojngnkej4v85k","value":"","repeater_fields":[{"title":"Article Slug","key":"article_slug","value":"","type":"text","required":false}]}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"kb-articles","created":"2022-09-08T19:33:17.817Z","created_at":"2022-09-08T19:33:17.817Z","modified_at":"2022-09-08T19:42:05.823Z","created_by":"5357ef811693be2118000001","modified_by":"5357ef811693be2118000001","status":"published","publish_at":null,"order":11,"unpublish_at":null,"published_at":"2022-09-08T19:42:05.823Z","metadata":{"image":{"url":"https://cdn.cosmicjs.com/22719f00-2fae-11ed-8ca6-eb31ab715749-globe.png","imgix_url":"https://imgix.cosmicjs.com/22719f00-2fae-11ed-8ca6-eb31ab715749-globe.png"},"thumbnail":{"url":"https://cdn.cosmicjs.com/22719f00-2fae-11ed-8ca6-eb31ab715749-globe.png","imgix_url":"https://imgix.cosmicjs.com/22719f00-2fae-11ed-8ca6-eb31ab715749-globe.png"},"blurb":"

Cosmic is the best CMS for static websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

","headline":"Static Website","seo_description":"Cosmic is the best CMS for Static websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.","twitter_card_image":{"url":"https://cdn.cosmicjs.com/22719f00-2fae-11ed-8ca6-eb31ab715749-globe.png","imgix_url":"https://imgix.cosmicjs.com/22719f00-2fae-11ed-8ca6-eb31ab715749-globe.png"},"code_example":"","seo_title":"Best Headless CMS for Static Websites","videos":[{"title":"Getting Started with Cosmic CMS and Next.js (Part 1)","link":"https://www.youtube.com/embed/NZA1dF2IDqQ?showinfo=0&wmode=opaque"},{"title":"Building a Blog with Cosmic CMS and Next.js (Part 2)","link":"https://www.youtube.com/embed/sdvdwo3g3PE?showinfo=0&wmode=opaque"}],"apps_search_term":"","articles_search_term":"","page_overview":"","seo_content":"","page_overview_title":"","apps":[],"articles":[]}},{"_id":"5bad1c5bdd42057ecb900549","slug":"salesforce","title":"Salesforce","content":"","metafields":[{"value":"https://cosmicjs.com/articles/integrating-cosmic-powered-content-with-salesforce-jmi4yp16","key":"link","title":"Link","type":"text","children":false,"has_length_edit":true,"parent":false},{"value":"df4f8460-c276-11e8-8242-1f43e60f1f81-sf.jpg","key":"image","title":"Image","type":"file","children":false,"has_length_edit":false,"parent":false,"url":"https://cdn.cosmicjs.com/df4f8460-c276-11e8-8242-1f43e60f1f81-sf.jpg","imgix_url":"https://imgix.cosmicjs.com/df4f8460-c276-11e8-8242-1f43e60f1f81-sf.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"integrations","created":"2018-09-27T18:07:23.774Z","created_at":"2018-09-27T18:07:23.774Z","modified_at":"2018-09-27T18:07:23.774Z","status":"published","locale":null,"published_at":"2018-09-27T18:07:23.774Z","created_by":"5357ef811693be2118000001","order":11,"metadata":{"link":"https://cosmicjs.com/articles/integrating-cosmic-powered-content-with-salesforce-jmi4yp16","image":{"url":"https://cdn.cosmicjs.com/df4f8460-c276-11e8-8242-1f43e60f1f81-sf.jpg","imgix_url":"https://imgix.cosmicjs.com/df4f8460-c276-11e8-8242-1f43e60f1f81-sf.jpg"}}},{"_id":"538f92f6c51dbc5440000001","slug":"developers","title":"Developers","content":"

Develop with Cosmic JS

Building a plugin that integrates with Cosmic JS? Register for our Developer Program. You can offer plugins in any language for you and others to use.

","metafields":[],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"pages","created":"2014-06-04T21:43:18.372Z","modified":"2015-04-12T05:45:50.612Z","files":"","order":11,"metadata":null},{"_id":"5ad67bb214a4b53585263daa","slug":"jamstack-cms","title":"Jamstack CMS","content":"

The Jamstack is comprised of:

J
JavaScript-powered frontend for page interactions.
A
APIs to connect to various APIs to get 3rd party functionality.
M
Markup (HTML) which gets deployed to a global CDN.


Cosmic JS is the leading CMS for modern digital projects, including Jamstack apps and static websites. Install the Official Cosmic JS JavaScript Client to integrate content into your app in minutes.  Get a feel for Cosmic JS by taking a spin through our apps and check out the tutorials below


Jamstack + Cosmic JS Videos


Using Cosmic JS as a Headless CMS with Gatsby

\">

Build a Cosmic JS-powered blog using Gatsby

\">

Webinar: Localization with Cosmic JS and Gatsby

\">


Jamstack CMS Articles

Jamstack articles in the Cosmic JS Community
The Cosmic Stack
How to Build a Jamstack Website
API-Powered Static Website
HeadlessCMS.org Docs
How to Build an API-Powered Static Website

Jamstack CMS Resources

Gatsby source plugin
Gridsome source plugin
Cosmic JS Docs
Official JavaScript Client
Cosmic JS GitHub

Examples

npm i cosmicjs

Then in your JavaScript file, get your content:

const Cosmic = require('cosmicjs')\r\nconst bucket = Cosmic().bucket({ slug: 'creative-agency' })\r\nconst objects = (await bucket.getObjects()).objects
","metafields":[{"children":null,"type":"file","title":"Image","key":"image","id":"gCCZtxSpVs","value":"217f0fb0-8eed-11ea-a8ae-93035d8042eb-jamstack-cms.svg","url":"https://cdn.cosmicjs.com/217f0fb0-8eed-11ea-a8ae-93035d8042eb-jamstack-cms.svg","imgix_url":"https://imgix.cosmicjs.com/217f0fb0-8eed-11ea-a8ae-93035d8042eb-jamstack-cms.svg"},{"children":null,"type":"file","title":"Thumbnail","key":"thumbnail","id":"BJeFnerHdJ","value":"5bac7de0-dfb0-11e9-b9e0-f7876ca3179c-jamstack-ed.jpg","url":"https://cdn.cosmicjs.com/5bac7de0-dfb0-11e9-b9e0-f7876ca3179c-jamstack-ed.jpg","imgix_url":"https://imgix.cosmicjs.com/5bac7de0-dfb0-11e9-b9e0-f7876ca3179c-jamstack-ed.jpg"},{"children":null,"type":"html-textarea","title":"Blurb","key":"blurb","id":"lnFeQxpjkg","value":"

Cosmic is the best CMS for Jamstack websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

"},{"children":null,"type":"text","title":"Headline","key":"headline","id":"iUeGSg8EbG","value":"Jamstack"},{"children":null,"type":"text","title":"SEO Description","key":"seo_description","id":"FFWTcudS8L","value":"Cosmic is the best CMS for Jamstack websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators."},{"children":null,"type":"file","title":"Twitter Card Image","key":"twitter_card_image","id":"ywgTYMxrWE","value":"f7ac3d60-dfac-11e9-8e48-eb53c00d5867-jamstack.jpg","url":"https://cdn.cosmicjs.com/f7ac3d60-dfac-11e9-8e48-eb53c00d5867-jamstack.jpg","imgix_url":"https://imgix.cosmicjs.com/f7ac3d60-dfac-11e9-8e48-eb53c00d5867-jamstack.jpg"},{"children":null,"type":"html-textarea","title":"Code Example","key":"code_example","id":"kLC6c49Uej","value":""},{"children":null,"type":"text","title":"SEO Title","key":"seo_title","id":"P5iRVQU2Oc","value":"Best Headless CMS for Jamstack"},{"children":[{"type":"repeating_item","children":[{"title":"Title","key":"title","value":"Getting Started with Cosmic CMS and Next.js (Part 1)","type":"text","required":false},{"title":"Link","key":"link","value":"https://www.youtube.com/embed/NZA1dF2IDqQ?showinfo=0&wmode=opaque","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Title","key":"title","value":"Building a Blog with Cosmic CMS and Next.js (Part 2)","type":"text","required":false},{"title":"Link","key":"link","value":"https://www.youtube.com/embed/sdvdwo3g3PE?showinfo=0&wmode=opaque","type":"text","required":false}]}],"type":"repeater","title":"Videos","key":"videos","id":"vEWLrFI0dw","value":"Getting Started with Cosmic CMS and Next.js (Part 1)","repeater_fields":[{"title":"Title","key":"title","value":"","type":"text","required":false},{"title":"Link","key":"link","value":"","type":"text","required":false}]},{"children":null,"type":"text","title":"Apps Search Term","key":"apps_search_term","id":"v95tq5i2enaf3oreecdk","value":""},{"children":null,"type":"text","title":"Articles Search Term","key":"articles_search_term","id":"apps_search_term_kef9yhcej8gy","value":""},{"children":null,"type":"html-textarea","title":"Page Overview","key":"page_overview","id":"zYuPyDtTWY","value":""},{"children":null,"type":"html-textarea","title":"SEO Content","key":"seo_content","id":"6dT4bcaDeW","value":""}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"kb-articles","created":"2018-04-17T22:56:50.372Z","created_at":"2017-10-19T03:50:16.379Z","modified_at":"2020-09-30T14:00:55.928Z","created_by":"5357ef811693be2118000001","modified_by":"5357ef811693be2118000001","status":"published","publish_at":null,"order":11,"published_at":"2020-09-30T14:00:55.928Z","unpublish_at":null,"metadata":{"image":{"url":"https://cdn.cosmicjs.com/217f0fb0-8eed-11ea-a8ae-93035d8042eb-jamstack-cms.svg","imgix_url":"https://imgix.cosmicjs.com/217f0fb0-8eed-11ea-a8ae-93035d8042eb-jamstack-cms.svg"},"thumbnail":{"url":"https://cdn.cosmicjs.com/5bac7de0-dfb0-11e9-b9e0-f7876ca3179c-jamstack-ed.jpg","imgix_url":"https://imgix.cosmicjs.com/5bac7de0-dfb0-11e9-b9e0-f7876ca3179c-jamstack-ed.jpg"},"blurb":"

Cosmic is the best CMS for Jamstack websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

","headline":"Jamstack","seo_description":"Cosmic is the best CMS for Jamstack websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.","twitter_card_image":{"url":"https://cdn.cosmicjs.com/f7ac3d60-dfac-11e9-8e48-eb53c00d5867-jamstack.jpg","imgix_url":"https://imgix.cosmicjs.com/f7ac3d60-dfac-11e9-8e48-eb53c00d5867-jamstack.jpg"},"code_example":"","seo_title":"Best Headless CMS for Jamstack","videos":[{"title":"Getting Started with Cosmic CMS and Next.js (Part 1)","link":"https://www.youtube.com/embed/NZA1dF2IDqQ?showinfo=0&wmode=opaque"},{"title":"Building a Blog with Cosmic CMS and Next.js (Part 2)","link":"https://www.youtube.com/embed/sdvdwo3g3PE?showinfo=0&wmode=opaque"}],"apps_search_term":"","articles_search_term":"","page_overview":"","seo_content":""}},{"_id":"60eddd5e4a0ea00008b3a570","order":12,"slug":"usage-and-overage-policy-updates","title":"Usage and Overage Policy Updates","content":"

New usage graphs in the dashboard 📊


We are thrilled to tell you that Cosmic is growing faster than ever. As we serve an ever-increasing amount of content to billions of users globally we will continue to scale and provide you with the best content management experience in the world. To that end, we are implementing a new usage and overage policy, specifically the usage of our global CDN.


Our global CDN includes several points of presence located around the world to serve API and media resources blazing-fast within milliseconds. Along with our generous usage limits of non-cached API requests and media storage, we have added additional usage verticals of our global CDN which include:

  1. Cached API requests - Number of read requests after initial request per month
  2. Media requests - Number of media requests per month
  3. API bandwidth - Amount of API bandwidth served per month
  4. Media bandwidth - Amount of media bandwidth served per month


Pricing page updates
Go to the pricing page to see the new overage policy and applicable costs for each usage plan. We have provided very generous limits on all plans and include a new table to inform you about the new overage costs.


New usage graphs
To track your Bucket usage, go to Bucket Settings > Usage to see new usage graphs.


Overage costs
If you are one of the few customers that will have overage costs, you will be charged at the start of the month for the full overage usage of the previous month. The first overage invoices will go out at the start of August for July 2021 usage.

To see any upcoming month-to-date overage invoices, go to Bucket / Group Plan Settings > Billing (or Account Settings > Billing Details if you added a plan since our Billing update).

To avoid overage charges, you can always upgrade to the next usage plan level at any time. Reach out to sales@cosmicjs.com if you need a custom quote.

We are dedicated to providing you with the best content management experience in the world. And these updates are intended to help you track and scale your global content delivery as your business meets the demands of the growing digital economy.

If you have any questions about this policy update, you can reach out to me directly in the Cosmic Slack channel or by email.

Tony Spiro
Cosmic CEO

","metafields":[{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"nCJ2o0ASL5","value":"2021-07-14"},{"children":null,"type":"object","title":"Author","key":"author","id":"ZkwvueaWcA","value":"5768b253163172890e00002c","object_type":"authors","object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"bid4hNTfYn","value":"","url":null,"imgix_url":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"changelogs","created_at":"2021-07-13T18:37:18.578Z","created_by":"5357ef811693be2118000001","modified_at":"2021-07-14T15:57:50.699Z","created":"2021-07-13T18:37:18.578Z","status":"published","thumbnail":"","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2021-07-14T15:57:50.699Z","metadata":{"published_date":"2021-07-14","author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"featured_image":{"url":null,"imgix_url":null}}},{"_id":"5a72248572c6845e0d90b5d5","order":12,"slug":"unleashed-xr-augmented-mixed-and-virtual-realities","title":"Unleashed XR: Augmented, Mixed and Virtual Realities","content":"


The Unleashed XR team designs and develops augmented reality, mixed reality and virtual reality solutions for a range of clients across industries. XR (extended reality) is the term referring to the full spectrum from reality to complete virtual environments. Through a structured design thinking process, Unleashed XR designs and develops applications that meet the unique needs of their clients. Unleashed XR is driven by ensuring their services have a tangible positive impact on their clients, making activities, processes and experiences superior, more efficient, cheaper and safer.

Unleashed XR needed a new blog that allowed developers, editors and contributors to collaborate in the cloud, so they chose Cosmic. They plan on re-vamping the website of their sister business, Unleashed VR, using Cosmic's powerful tools in the near future.

"We just launched our new website which utilizes the power of Cosmic. Cosmic was a huge help in the setup of our blog, particularly the Media management, which Cosmic proved invaluable for in respect to optimizing videos and images. Additionally we were able to use Cosmic to stream our videos straight to a Unity Mobile application that we are working on as well. This was great in optimizing the speed of the app, and we're looking forward to integrating Cosmic in as many ways as possible."

— Tyler Smith, Lead Software Developer  

","metafields":[{"value":"Unleashed XR","key":"company","title":"Company","type":"text","children":null},{"value":"Virtual Reality Software","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"The Unleashed XR team designs and develops augmented reality, mixed reality and virtual reality solutions for a range of clients across industries. Unleashed XR needed a new blog that allowed developers, editors and contributors to collaborate in the cloud, so they chose Cosmic.","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"a9fd29f0-0702-11e8-a43c-e17c6c324439-Logo&Name_PurpleUnleashedXR.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/a9fd29f0-0702-11e8-a43c-e17c6c324439-Logo&Name_PurpleUnleashedXR.png","imgix_url":"https://imgix.cosmicjs.com/a9fd29f0-0702-11e8-a43c-e17c6c324439-Logo&Name_PurpleUnleashedXR.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-01-31T20:18:13.948Z","created_by":"5716b504e9c686d006000073","created":"2018-01-31T20:18:13.948Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5357ef811693be2118000001","publish_at":null,"metadata":{"company":"Unleashed XR","industry_type":"Virtual Reality Software","teaser":"The Unleashed XR team designs and develops augmented reality, mixed reality and virtual reality solutions for a range of clients across industries. Unleashed XR needed a new blog that allowed developers, editors and contributors to collaborate in the cloud, so they chose Cosmic.","logo":{"url":"https://cdn.cosmicjs.com/a9fd29f0-0702-11e8-a43c-e17c6c324439-Logo&Name_PurpleUnleashedXR.png","imgix_url":"https://imgix.cosmicjs.com/a9fd29f0-0702-11e8-a43c-e17c6c324439-Logo&Name_PurpleUnleashedXR.png"}}},{"_id":"5efb8ab7f7160f000863457c","slug":"sitefinity-headless-cms","title":"Sitefinity Headless CMS","content":"

Sitefinity, from the Progress company, describes itself as a highly extensible, high-performing and easy to use Digital Experience Platform. They offer an all-in-one customer experience marketing solution, also offering headless CMS capabilities. However, as it tries to keep up with new pure Headless CMS solutions.


Monolithic vs Headless CMS

Sitefinity, as a monolithic CMS, and other older installed CMS systems like it, comes with a coupled front end application layer that requires additional development and maintenance. Cosmic is a Headless CMS meaning that the content API and presentation layer are decoupled which gives your team greater flexibility when it comes to where your content can go.

Cosmic provides everything your team of developers and content creators need: powerful and intuitive APIs for developers, and an easy-to-use dashboard for content creators. We've removed all complexity and CMS maintenance, so your team can focus on building great products faster, together.


But can't Sitefinity go Headless?

Although you CAN use Sitefinity as a Headless CMS or, as they put it, a decoupled CMS, you still have a lot of work to do to bring it up to the level of an optimized CMS system that's truly headless. And along with your application, you will need to maintain the CMS itself, adding more development costs and taking away focus from what really matters: creating great content and user experiences in your main website or app.

","metafields":[{"children":null,"type":"file","title":"Logo","key":"logo","id":"dK5YcBzaz6","value":"93b0aee0-bb02-11ea-8170-e7fb6745eb70-sitefinity-headless-cms.jpg","url":"https://cdn.cosmicjs.com/93b0aee0-bb02-11ea-8170-e7fb6745eb70-sitefinity-headless-cms.jpg","imgix_url":"https://imgix.cosmicjs.com/93b0aee0-bb02-11ea-8170-e7fb6745eb70-sitefinity-headless-cms.jpg"},{"children":null,"type":"textarea","title":"Tech","key":"tech","id":"uf8JEqw5U0","value":".NET. Microsoft SQL Server."},{"children":null,"type":"textarea","title":"Scalability","key":"scalability","id":"fpoVElDk1D","value":"Does not scale easily. Limited by servers."},{"children":null,"type":"textarea","title":"Security","key":"security","id":"w1pV9DMBIT","value":"You maintain the security yourself."},{"children":null,"type":"textarea","title":"Maintenance","key":"maintenance","id":"QKypNAibKN","value":"They deploy, host, and maintain everything for you. Along with your application and content, you need to maintain updates and security for your CMS system."},{"children":null,"type":"textarea","title":"Caching","key":"caching","id":"6EtXr70AjH","value":"No caching included out of the box."},{"children":null,"type":"textarea","title":"Media CDN","key":"media_cdn","id":"g4iIK5jMib","value":"No CDN included out of the box."},{"children":null,"type":"textarea","title":"Image Processing","key":"image_processing","id":"tebPe4e2zr","value":"Manually manage your own image sizes and optimizations."},{"children":null,"type":"textarea","title":"Extendability","key":"extendability","id":"S1E14k0Qvq","value":"Possible. Limited. Complicated."},{"children":null,"type":"textarea","title":"Front end","key":"front_end","id":"wTxPnHZdK1","value":"Front end is coupled with backend CMS. Can be made to be Headless."},{"children":null,"type":"textarea","title":"Number of Projects","key":"number_of_projects","id":"ETLpHX7PCw","value":"One login, multiple websites."},{"children":null,"type":"html-textarea","title":"Costs","key":"costs","id":"ZuIw0sRUG1","value":"

You will need to hire developer resources as this system is WAY complicated and outdated. Average salary of a full-stack developer is $111,600 per year. You may need to hire 1-3 developers to maintain the CMS. Plus the cost of licensing Adobe Experience Manager (AEM) can be astronomical.

"},{"children":null,"type":"text","title":"Vendor Name","key":"vendor_name","id":"Wbn9npEBNv","value":"Sitefinity"},{"children":null,"type":"switch","title":"Include in link list","key":"include_in_link_list","id":"6SWKfLhRH4","value":true,"options":"yes,no"},{"children":null,"type":"text","title":"Cost Value","key":"cost_value","id":"kRKNb5vcR2","value":"$523,200+"},{"children":null,"type":"text","title":"Cost Text","key":"cost_text","id":"NkE8HBIdS9","value":"per year"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"cms-competitors","created":"2020-06-30T18:55:51.152Z","created_at":"2020-06-30T18:55:51.152Z","modified_at":"2020-06-30T18:55:56.338Z","status":"published","locale":null,"modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-06-30T18:55:56.338Z","unpublish_at":null,"order":12,"metadata":{"logo":{"url":"https://cdn.cosmicjs.com/93b0aee0-bb02-11ea-8170-e7fb6745eb70-sitefinity-headless-cms.jpg","imgix_url":"https://imgix.cosmicjs.com/93b0aee0-bb02-11ea-8170-e7fb6745eb70-sitefinity-headless-cms.jpg"},"tech":".NET. Microsoft SQL Server.","scalability":"Does not scale easily. Limited by servers.","security":"You maintain the security yourself.","maintenance":"They deploy, host, and maintain everything for you. Along with your application and content, you need to maintain updates and security for your CMS system.","caching":"No caching included out of the box.","media_cdn":"No CDN included out of the box.","image_processing":"Manually manage your own image sizes and optimizations.","extendability":"Possible. Limited. Complicated.","front_end":"Front end is coupled with backend CMS. Can be made to be Headless.","number_of_projects":"One login, multiple websites.","costs":"

You will need to hire developer resources as this system is WAY complicated and outdated. Average salary of a full-stack developer is $111,600 per year. You may need to hire 1-3 developers to maintain the CMS. Plus the cost of licensing Adobe Experience Manager (AEM) can be astronomical.

","vendor_name":"Sitefinity","include_in_link_list":true,"cost_value":"$523,200+","cost_text":"per year"}},{"_id":"5ee51827c7b54b0007a3f884","order":12,"slug":"enterprise-cms","title":"Enterprise CMS","content":"","metafields":[{"children":null,"type":"file","title":"Image","key":"image","id":"ExAbOVFlso","value":"2d5ad540-af30-11ea-a27a-2338c38b0016-enterprise-cms.svg","url":"https://cdn.cosmicjs.com/2d5ad540-af30-11ea-a27a-2338c38b0016-enterprise-cms.svg","imgix_url":"https://imgix.cosmicjs.com/2d5ad540-af30-11ea-a27a-2338c38b0016-enterprise-cms.svg"},{"children":null,"type":"file","title":"Thumbnail","key":"thumbnail","id":"aS2X6OF0sj","value":"2d5ad540-af30-11ea-a27a-2338c38b0016-enterprise-cms.svg","url":"https://cdn.cosmicjs.com/2d5ad540-af30-11ea-a27a-2338c38b0016-enterprise-cms.svg","imgix_url":"https://imgix.cosmicjs.com/2d5ad540-af30-11ea-a27a-2338c38b0016-enterprise-cms.svg"},{"children":null,"type":"html-textarea","title":"Blurb","key":"blurb","id":"44crRVcuzD","value":"

Cosmic is the best CMS for Enterprise websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

"},{"children":null,"type":"text","title":"Headline","key":"headline","id":"VXvFNU87y1","value":"Enterprise"},{"children":null,"type":"text","title":"SEO Description","key":"seo_description","id":"G6lNb35cNh","value":"Cosmic is the best CMS for Enterprise websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators."},{"children":null,"type":"file","title":"Twitter Card Image","key":"twitter_card_image","id":"JshZFkSTIp","value":"35ce6070-af30-11ea-a27a-2338c38b0016-enterprise-cms.jpg","url":"https://cdn.cosmicjs.com/35ce6070-af30-11ea-a27a-2338c38b0016-enterprise-cms.jpg","imgix_url":"https://imgix.cosmicjs.com/35ce6070-af30-11ea-a27a-2338c38b0016-enterprise-cms.jpg"},{"children":null,"type":"text","title":"SEO Title","key":"seo_title","id":"27LDhfOaEA","value":"Best Headless CMS for Enterprise"},{"children":null,"type":"html-textarea","title":"Code Example","key":"code_example","id":"zRbMS5n8oO","value":""},{"children":[{"type":"repeating_item","children":[{"title":"Title","key":"title","value":"Using Cosmic as a Headless CMS with Gatsby","type":"text","required":false},{"title":"Link","key":"link","value":"https://www.youtube.com/embed/Qls5frYlJeI?showinfo=0&wmode=opaque&widget_referrer=https%3A%2F%2Fwww.cosmicjs.com%2Fknowledge-base%2Freact-cms&enablejsapi=1&origin=https%3A%2F%2Fcdn.embedly.com&widgetid=1","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Title","key":"title","value":"Build a Cosmic-powered blog using Gatsby","type":"text","required":false},{"title":"Link","key":"link","value":"https://www.youtube.com/embed/mGcAWs1xRnY?showinfo=0&wmode=opaque&widget_referrer=https%3A%2F%2Fwww.cosmicjs.com%2Fknowledge-base%2Freact-cms&enablejsapi=1&origin=https%3A%2F%2Fcdn.embedly.com&widgetid=1","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Title","key":"title","value":"Webinar: Localization with Cosmic and Gatsby","type":"text","required":false},{"title":"Link","key":"link","value":"https://www.youtube.com/embed/16m3wRFPGAY?showinfo=0&wmode=opaque&widget_referrer=https%3A%2F%2Fwww.cosmicjs.com%2Fknowledge-base%2Freact-cms&enablejsapi=1&origin=https%3A%2F%2Fcdn.embedly.com&widgetid=1","type":"text","required":false}]}],"type":"repeater","title":"Videos","key":"videos","id":"Ew7afWPUhS","value":"Using Cosmic as a Headless CMS with Gatsby","repeater_fields":[{"title":"Title","key":"title","value":"","type":"text","required":false},{"title":"Link","key":"link","value":"","type":"text","required":false}]}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"kb-articles","created_at":"2020-06-13T18:17:11.526Z","created_by":"5357ef811693be2118000001","created":"2020-06-13T18:17:11.526Z","status":"published","modified_at":"2020-06-27T19:15:15.654Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2020-06-27T19:15:15.654Z","metadata":{"image":{"url":"https://cdn.cosmicjs.com/2d5ad540-af30-11ea-a27a-2338c38b0016-enterprise-cms.svg","imgix_url":"https://imgix.cosmicjs.com/2d5ad540-af30-11ea-a27a-2338c38b0016-enterprise-cms.svg"},"thumbnail":{"url":"https://cdn.cosmicjs.com/2d5ad540-af30-11ea-a27a-2338c38b0016-enterprise-cms.svg","imgix_url":"https://imgix.cosmicjs.com/2d5ad540-af30-11ea-a27a-2338c38b0016-enterprise-cms.svg"},"blurb":"

Cosmic is the best CMS for Enterprise websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

","headline":"Enterprise","seo_description":"Cosmic is the best CMS for Enterprise websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.","twitter_card_image":{"url":"https://cdn.cosmicjs.com/35ce6070-af30-11ea-a27a-2338c38b0016-enterprise-cms.jpg","imgix_url":"https://imgix.cosmicjs.com/35ce6070-af30-11ea-a27a-2338c38b0016-enterprise-cms.jpg"},"seo_title":"Best Headless CMS for Enterprise","code_example":"","videos":[{"title":"Using Cosmic as a Headless CMS with Gatsby","link":"https://www.youtube.com/embed/Qls5frYlJeI?showinfo=0&wmode=opaque&widget_referrer=https%3A%2F%2Fwww.cosmicjs.com%2Fknowledge-base%2Freact-cms&enablejsapi=1&origin=https%3A%2F%2Fcdn.embedly.com&widgetid=1"},{"title":"Build a Cosmic-powered blog using Gatsby","link":"https://www.youtube.com/embed/mGcAWs1xRnY?showinfo=0&wmode=opaque&widget_referrer=https%3A%2F%2Fwww.cosmicjs.com%2Fknowledge-base%2Freact-cms&enablejsapi=1&origin=https%3A%2F%2Fcdn.embedly.com&widgetid=1"},{"title":"Webinar: Localization with Cosmic and Gatsby","link":"https://www.youtube.com/embed/16m3wRFPGAY?showinfo=0&wmode=opaque&widget_referrer=https%3A%2F%2Fwww.cosmicjs.com%2Fknowledge-base%2Freact-cms&enablejsapi=1&origin=https%3A%2F%2Fcdn.embedly.com&widgetid=1"}]}},{"_id":"5d49dcfacb90f81897c5870c","order":12,"slug":"cms-software-for-marketing-campaigns","title":"CMS Software for Marketing Campaigns","content":"

Cosmic JS provides flexible CMS Software for teams managing marketing campaigns. Companies manage their marketing content with Cosmic JS CMS Software because the Dashboard is simple to use, adding marketing contributors is easy and Cosmic JS Webhooks allow you to create powerful workflows. 

Teams using CMS Software to power marketing content don't have to maintain their own server and content management system. By focusing on apps and not infrastructure, teams are able to publish press content faster, together. 


What is Headless CMS Software?

Headless CMS Software works by providing non-technical editors with a Dashboard UI to model, create and publish content while providing developers with API tools and resources to integrate content with any website or app. By decoupling content from code, teams create a central content repository that can power all of their content-powered applications. 

","metafields":[{"value":"CMS Software for Marketing Campaigns ","key":"solution_name","title":"Solution Name","type":"text","children":null},{"value":"67c97d50-b885-11e9-b1f9-b9470ded605a-63cd02c0-9f54-11e9-ac09-4be8a5631b5e-91e5cf60-cb0d-11e7-8977-434a79150a3c-Screen-Shot-2017-11-16-at-1.59.39-PM.png","key":"image","title":"Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/67c97d50-b885-11e9-b1f9-b9470ded605a-63cd02c0-9f54-11e9-ac09-4be8a5631b5e-91e5cf60-cb0d-11e7-8977-434a79150a3c-Screen-Shot-2017-11-16-at-1.59.39-PM.png","imgix_url":"https://imgix.cosmicjs.com/67c97d50-b885-11e9-b1f9-b9470ded605a-63cd02c0-9f54-11e9-ac09-4be8a5631b5e-91e5cf60-cb0d-11e7-8977-434a79150a3c-Screen-Shot-2017-11-16-at-1.59.39-PM.png"},{"object_type":"case-studies","value":"5b743e111a739a78a5f0725b,59f49a7cee2adb545c0005bc,5be9ca96cc3f3e2ce66ce511","key":"case_studies","title":"Case Studies","type":"objects","children":null,"objects":[{"_id":"5b743e111a739a78a5f0725b","slug":"hostmaker-manages-localized-content","title":"Hostmaker Manages Localized Content ","content":"

Hostmaker is a property management company that operates across 9 cities in 6 countries. Hostmaker manages properties that are being rented to vacationers and lodgers from around the world. They take the hosts' home and provide cleaning and decor services prior to listing the location on up to 15 various travel booking platforms. Hostmaker's hosts love the service for the superior volume that they continue to deliver compared to their competitors, which are driven by proprietary pricing strategies, local market expertise and global industry experience. 



Hostmaker's tech team needed a solution for their product marketing managers to update Landing Pages, Case Studies, Press Releases and FAQs for the various markets they manage, including cities such as Rome, London and Barcelona. Localizing content for Hostmaker's audiences is a mission-critical piece of the marketing strategy that is driving such tremendous growth. Hostmaker chose Cosmic to give their cross-functional team the tools they need to perform their jobs. Now Hostmaker's developers can build reusable components and scalable content models while their marketers can manage content specific to a particular locale. 



\">



"We’ve been using Cosmic for around a year. At first there were some issues with components that prohibited us from performing all our desired tasks, but all those issues were quickly solved by the Cosmic Team. As of now, the tools are great, and have even improved during our use of the platform. It does all the things we need at the moment. As a tool Cosmic has been not only ideal for managing components on the site but adaptive enough for our non-tech users to create landing pages and modify existing content, saving us precious dev time.”


— Hostmaker Digital Team

","metafields":[{"value":"Hostmaker","key":"company","title":"Company","type":"text","children":null},{"value":"Hospitality ","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Hostmaker is a property management company that operates across 9 cities in 6 countries. Hostmaker manages properties that are being rented to vacationers and lodgers from around the world. They take the hosts' home and provide cleaning and decor services prior to listing the location on up to 15 various travel booking platforms. Hostmaker's hosts love the service for the superior volume that they continue to deliver compared to their competitors, which are driven by proprietary pricing strategies, local market expertise and global industry experience. \n\n\n\n\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"2f1889b0-a64d-11e8-a8cb-19319ae2c1b8-B13ds9DG_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/2f1889b0-a64d-11e8-a8cb-19319ae2c1b8-B13ds9DG_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/2f1889b0-a64d-11e8-a8cb-19319ae2c1b8-B13ds9DG_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-03-01T22:26:36.367Z","created_by":"5716b504e9c686d006000073","created":"2018-08-15T14:52:01.115Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-09-25T15:10:44.600Z"},{"_id":"59f49a7cee2adb545c0005bc","slug":"life-is-good-shares-gratitude","title":"Life is Good Shares Gratitude","content":"

The Life is Good community shares one simple, unifying mission: to spread the power of optimism. In that spirit, the Life is Good team built a Gratitude Wall for some user-generated-thanksgiving. This widget will allow users to add "sticky notes" with their name and what they are grateful for to the gratitude board. 



The Gratitude Wall is adapted from the Cosmic Sticky Notes App, built on React, Redux and Node.js. The Wall is currently running on Heroku and is i-framed into WordPress on its landing page. The Life is Good team also built a simple moderation application so that their team can easily approve or delete User Generated Content as it flows in. They also built client-side moderation during content entry, which checks against a banned list of words and blocks submission.



"Cosmic provided us with a robust scaffolding to accept, store, and moderate User Generated Content and display it in a custom web app in real time. With Cosmic, we were able to develop an MVP in a matter of hours and focus our resources on UX and design versus content management. The Cosmic Support Team was extremely helpful throughout the process. We’re excited to leverage these tools again for future projects.”

— Chris Schwab, Front End Engineer  

","metafields":[{"value":"Life is Good","key":"company","title":"Company","type":"text","children":null},{"value":"Ecommerce | Apparel","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Spread the power of optimism. In that spirit, the Life is Good team built a Gratitude Wall for some user-generated-thanksgiving. This widget will allow users to add \"sticky notes\" with their name and what they are grateful for to the gratitude board. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg","imgix_url":"https://imgix.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2017-10-28T14:55:56.103Z","created_by":"5716b504e9c686d006000073","created":"2017-10-28T14:55:56.103Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2019-07-25T21:53:35.289Z"},{"_id":"5be9ca96cc3f3e2ce66ce511","slug":"road-redemption-launches-a-marketing-microsite","title":"Road Redemption Launches a Marketing Microsite","content":"

Tripwire Interactive, a leading entertainment software developer and publisher founded in 2005, recently launched its corporate website on Cosmic. The Tripwire Interactive team can now easily manage microsite content for each game with a dedicated studio manager as its content creator. This is important as Tripwire is always debuting new marketing campaigns to accompany game launches. 



Road Redemption is the first of many games to have innovative content creator access provided via a headless CMS API that delivers the best of both worlds for cross-functional teams. Read more about how Tripwire Interactive builds apps faster using Cosmic.


"Cosmic allowed us to easily integrate a secure and fast back-end API into our React app. Cosmic fit our needs with its simple web-based dashboard so that members of our marketing team can create, edit, and delete new content on the fly. Our team\r\nhas been enjoying the ease of use with the new system."

— Owen Liversidge, Lead Developer


","metafields":[{"value":"Road Redemption ","key":"company","title":"Company","type":"text","children":null},{"value":"Gaming","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Tripwire Interactive, a leading entertainment software developer and publisher founded in 2005, recently launched its corporate website on Cosmic. The Tripwire Interactive team can now easily manage microsite content for each game with a dedicated studio manager as its content creator. This is important as Tripwire is always debuting new marketing campaigns to accompany game launches. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"a4f8e050-e6ab-11e8-93f0-a94cde6f34a7-64d11670-dddf-11e8-95d7-dfced904ba0c-RR_Logo_Hires_TrasparenrBack-(1).png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/a4f8e050-e6ab-11e8-93f0-a94cde6f34a7-64d11670-dddf-11e8-95d7-dfced904ba0c-RR_Logo_Hires_TrasparenrBack-(1).png","imgix_url":"https://imgix.cosmicjs.com/a4f8e050-e6ab-11e8-93f0-a94cde6f34a7-64d11670-dddf-11e8-95d7-dfced904ba0c-RR_Logo_Hires_TrasparenrBack-(1).png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2018-11-12T18:46:46.371Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-11-13T21:30:43.964Z"}]},{"repeater_fields":[{"title":"Slug","key":"slug","value":"","type":"text","required":false}],"value":"react-cosmedium-blog","key":"app_slugs","title":"App Slugs","type":"repeater","children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"react-cosmedium-blog","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"simple-vue-blog","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"nextjs-tour-diary","type":"text","required":false}]}]},{"repeater_fields":[{"title":"Slug","key":"slug","value":"","type":"text","required":false}],"value":"twitter-search","key":"extension_slugs","title":"Extension SLugs","type":"repeater","children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"twitter-search","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"export-to-csv","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"unsplash-photos","type":"text","required":false}]}]},{"value":"\"Cosmic JS provided us with a robust scaffolding to accept, store, and moderate User Generated Content and display it in a custom web app in real time. With Cosmic, we were able to develop an MVP in a matter of hours and focus our resources on UX and design versus content management.”","key":"testimonial","title":"Testimonial","type":"textarea","children":null},{"value":"Chris Schwab, Front End Engineer at Life is Good","key":"testimonial_credit","title":"Testimonial Credit","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"solutions","created_at":"2019-08-05T20:18:17.006Z","created_by":"5716b504e9c686d006000073","modified_at":"2019-08-06T20:45:06.043Z","created":"2019-08-06T20:03:06.041Z","status":"published","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2019-08-06T20:45:06.043Z","metadata":{"solution_name":"CMS Software for Marketing Campaigns ","image":{"url":"https://cdn.cosmicjs.com/67c97d50-b885-11e9-b1f9-b9470ded605a-63cd02c0-9f54-11e9-ac09-4be8a5631b5e-91e5cf60-cb0d-11e7-8977-434a79150a3c-Screen-Shot-2017-11-16-at-1.59.39-PM.png","imgix_url":"https://imgix.cosmicjs.com/67c97d50-b885-11e9-b1f9-b9470ded605a-63cd02c0-9f54-11e9-ac09-4be8a5631b5e-91e5cf60-cb0d-11e7-8977-434a79150a3c-Screen-Shot-2017-11-16-at-1.59.39-PM.png"},"case_studies":[{"_id":"5b743e111a739a78a5f0725b","slug":"hostmaker-manages-localized-content","title":"Hostmaker Manages Localized Content ","content":"

Hostmaker is a property management company that operates across 9 cities in 6 countries. Hostmaker manages properties that are being rented to vacationers and lodgers from around the world. They take the hosts' home and provide cleaning and decor services prior to listing the location on up to 15 various travel booking platforms. Hostmaker's hosts love the service for the superior volume that they continue to deliver compared to their competitors, which are driven by proprietary pricing strategies, local market expertise and global industry experience. 



Hostmaker's tech team needed a solution for their product marketing managers to update Landing Pages, Case Studies, Press Releases and FAQs for the various markets they manage, including cities such as Rome, London and Barcelona. Localizing content for Hostmaker's audiences is a mission-critical piece of the marketing strategy that is driving such tremendous growth. Hostmaker chose Cosmic to give their cross-functional team the tools they need to perform their jobs. Now Hostmaker's developers can build reusable components and scalable content models while their marketers can manage content specific to a particular locale. 



\">



"We’ve been using Cosmic for around a year. At first there were some issues with components that prohibited us from performing all our desired tasks, but all those issues were quickly solved by the Cosmic Team. As of now, the tools are great, and have even improved during our use of the platform. It does all the things we need at the moment. As a tool Cosmic has been not only ideal for managing components on the site but adaptive enough for our non-tech users to create landing pages and modify existing content, saving us precious dev time.”


— Hostmaker Digital Team

","metafields":[{"value":"Hostmaker","key":"company","title":"Company","type":"text","children":null},{"value":"Hospitality ","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Hostmaker is a property management company that operates across 9 cities in 6 countries. Hostmaker manages properties that are being rented to vacationers and lodgers from around the world. They take the hosts' home and provide cleaning and decor services prior to listing the location on up to 15 various travel booking platforms. Hostmaker's hosts love the service for the superior volume that they continue to deliver compared to their competitors, which are driven by proprietary pricing strategies, local market expertise and global industry experience. \n\n\n\n\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"2f1889b0-a64d-11e8-a8cb-19319ae2c1b8-B13ds9DG_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/2f1889b0-a64d-11e8-a8cb-19319ae2c1b8-B13ds9DG_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/2f1889b0-a64d-11e8-a8cb-19319ae2c1b8-B13ds9DG_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-03-01T22:26:36.367Z","created_by":"5716b504e9c686d006000073","created":"2018-08-15T14:52:01.115Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-09-25T15:10:44.600Z","metadata":{"company":"Hostmaker","industry_type":"Hospitality ","teaser":"Hostmaker is a property management company that operates across 9 cities in 6 countries. Hostmaker manages properties that are being rented to vacationers and lodgers from around the world. They take the hosts' home and provide cleaning and decor services prior to listing the location on up to 15 various travel booking platforms. Hostmaker's hosts love the service for the superior volume that they continue to deliver compared to their competitors, which are driven by proprietary pricing strategies, local market expertise and global industry experience. \n\n\n\n\n","logo":{"url":"https://cdn.cosmicjs.com/2f1889b0-a64d-11e8-a8cb-19319ae2c1b8-B13ds9DG_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/2f1889b0-a64d-11e8-a8cb-19319ae2c1b8-B13ds9DG_400x400.jpg"}}},{"_id":"59f49a7cee2adb545c0005bc","slug":"life-is-good-shares-gratitude","title":"Life is Good Shares Gratitude","content":"

The Life is Good community shares one simple, unifying mission: to spread the power of optimism. In that spirit, the Life is Good team built a Gratitude Wall for some user-generated-thanksgiving. This widget will allow users to add "sticky notes" with their name and what they are grateful for to the gratitude board. 



The Gratitude Wall is adapted from the Cosmic Sticky Notes App, built on React, Redux and Node.js. The Wall is currently running on Heroku and is i-framed into WordPress on its landing page. The Life is Good team also built a simple moderation application so that their team can easily approve or delete User Generated Content as it flows in. They also built client-side moderation during content entry, which checks against a banned list of words and blocks submission.



"Cosmic provided us with a robust scaffolding to accept, store, and moderate User Generated Content and display it in a custom web app in real time. With Cosmic, we were able to develop an MVP in a matter of hours and focus our resources on UX and design versus content management. The Cosmic Support Team was extremely helpful throughout the process. We’re excited to leverage these tools again for future projects.”

— Chris Schwab, Front End Engineer  

","metafields":[{"value":"Life is Good","key":"company","title":"Company","type":"text","children":null},{"value":"Ecommerce | Apparel","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Spread the power of optimism. In that spirit, the Life is Good team built a Gratitude Wall for some user-generated-thanksgiving. This widget will allow users to add \"sticky notes\" with their name and what they are grateful for to the gratitude board. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg","imgix_url":"https://imgix.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2017-10-28T14:55:56.103Z","created_by":"5716b504e9c686d006000073","created":"2017-10-28T14:55:56.103Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2019-07-25T21:53:35.289Z","metadata":{"company":"Life is Good","industry_type":"Ecommerce | Apparel","teaser":"Spread the power of optimism. In that spirit, the Life is Good team built a Gratitude Wall for some user-generated-thanksgiving. This widget will allow users to add \"sticky notes\" with their name and what they are grateful for to the gratitude board. \n","logo":{"url":"https://cdn.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg","imgix_url":"https://imgix.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg"}}},{"_id":"5be9ca96cc3f3e2ce66ce511","slug":"road-redemption-launches-a-marketing-microsite","title":"Road Redemption Launches a Marketing Microsite","content":"

Tripwire Interactive, a leading entertainment software developer and publisher founded in 2005, recently launched its corporate website on Cosmic. The Tripwire Interactive team can now easily manage microsite content for each game with a dedicated studio manager as its content creator. This is important as Tripwire is always debuting new marketing campaigns to accompany game launches. 



Road Redemption is the first of many games to have innovative content creator access provided via a headless CMS API that delivers the best of both worlds for cross-functional teams. Read more about how Tripwire Interactive builds apps faster using Cosmic.


"Cosmic allowed us to easily integrate a secure and fast back-end API into our React app. Cosmic fit our needs with its simple web-based dashboard so that members of our marketing team can create, edit, and delete new content on the fly. Our team\r\nhas been enjoying the ease of use with the new system."

— Owen Liversidge, Lead Developer


","metafields":[{"value":"Road Redemption ","key":"company","title":"Company","type":"text","children":null},{"value":"Gaming","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Tripwire Interactive, a leading entertainment software developer and publisher founded in 2005, recently launched its corporate website on Cosmic. The Tripwire Interactive team can now easily manage microsite content for each game with a dedicated studio manager as its content creator. This is important as Tripwire is always debuting new marketing campaigns to accompany game launches. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"a4f8e050-e6ab-11e8-93f0-a94cde6f34a7-64d11670-dddf-11e8-95d7-dfced904ba0c-RR_Logo_Hires_TrasparenrBack-(1).png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/a4f8e050-e6ab-11e8-93f0-a94cde6f34a7-64d11670-dddf-11e8-95d7-dfced904ba0c-RR_Logo_Hires_TrasparenrBack-(1).png","imgix_url":"https://imgix.cosmicjs.com/a4f8e050-e6ab-11e8-93f0-a94cde6f34a7-64d11670-dddf-11e8-95d7-dfced904ba0c-RR_Logo_Hires_TrasparenrBack-(1).png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2018-11-12T18:46:46.371Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-11-13T21:30:43.964Z","metadata":{"company":"Road Redemption ","industry_type":"Gaming","teaser":"Tripwire Interactive, a leading entertainment software developer and publisher founded in 2005, recently launched its corporate website on Cosmic. The Tripwire Interactive team can now easily manage microsite content for each game with a dedicated studio manager as its content creator. This is important as Tripwire is always debuting new marketing campaigns to accompany game launches. \n","logo":{"url":"https://cdn.cosmicjs.com/a4f8e050-e6ab-11e8-93f0-a94cde6f34a7-64d11670-dddf-11e8-95d7-dfced904ba0c-RR_Logo_Hires_TrasparenrBack-(1).png","imgix_url":"https://imgix.cosmicjs.com/a4f8e050-e6ab-11e8-93f0-a94cde6f34a7-64d11670-dddf-11e8-95d7-dfced904ba0c-RR_Logo_Hires_TrasparenrBack-(1).png"}}}],"app_slugs":[{"slug":"react-cosmedium-blog"},{"slug":"simple-vue-blog"},{"slug":"nextjs-tour-diary"}],"extension_slugs":[{"slug":"twitter-search"},{"slug":"export-to-csv"},{"slug":"unsplash-photos"}],"testimonial":"\"Cosmic JS provided us with a robust scaffolding to accept, store, and moderate User Generated Content and display it in a custom web app in real time. With Cosmic, we were able to develop an MVP in a matter of hours and focus our resources on UX and design versus content management.”","testimonial_credit":"Chris Schwab, Front End Engineer at Life is Good"}},{"_id":"61f865b610829f000884e4a8","order":12,"slug":"new-dashboard-updates-search-and-filter","title":"New Dashboard Updates: Search and Filter","content":"

We have some exciting updates to share with you on the new Cosmic dashboard: global search and Object table filtering is now available!

TL;DR
Sign up for the alpha preview to check out the new features.

Global Search

You can now press CMD+K on any page (or click the link in the left hand sidebar for you mouse-click maximalists) and pull up a handy command pallet to search by Object, Object Type, or Media, as well as find quick links to helpful resources.


Objects Table Filtering

One of features that sets Cosmic apart from other content solutions is our programmatic querying. Along with being very powerful in the API, this querying approach also comes in handy when you want to do content filtering and organization in the dashboard\r\n(especially when saving smart views).

We're happy to say that you can now use queries to do Object filtering from the table view with even more capabilities!

How it works: click the filter button in the Objects table view and use the UI form builder to build your filtering logic. Filter by value matches, negative operators as well as use powerful numeric operators like greater than, less than, and more. And\r\nyou can even build your own code queries using the available "Raw" tab!

Check out the docs for more information on how to do Cosmic Object querying and follow these examples:

Filter by specific Object Relationship like author or category (showing Single Object Metafield below)


Filter by string search in Object content (showing contains below)


Filter by tags (showing checkbox Metafield below)


Filter by tags and numeric operators (showing less than or equal to below)


Developer Tools Query Examples

After setting your query in the table filter, you can grab the query from the Developer Tools drawer and plug it into your application (showing filtering Objects by Multiple Object Metafield below)


Join the Alpha

We are on a mission to build the best content management solution in the world. We are excited to offer you these new features during our alpha release of the new dashboard. If you haven't joined, sign up to get on the waitlist to preview the new dashboard including these new features. It is our hope that we can enable your team with even greater flexibility and control over your Cosmic-powered content and hopefully get some feedback from you!

Get Some Swag 😎 

After joining the waitlist, share your personal link in the confirmation email on social media to be entered to receive free Cosmic swag including hoodies, tshirts, coffee mugs, and stickers (makes great Valentine's gifts for friends and significant\r\nothers!).

Stay tuned for more exciting updates! Follow us on Twitter, and join our team on Slack to get the latest on the new dashboard progress.

The Cosmic Team

","metafields":[{"children":null,"type":"object","title":"Author","key":"author","id":"1MLCnFk9kG","value":"5ffa1d1e0046b0000799cb7b","required":true,"object_type":"authors","object":{"_id":"5ffa1d1e0046b0000799cb7b","slug":"cosmic","title":"Cosmic","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"ZogvxZg6OL","value":""},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D0qLJ4RPBe","value":"10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2021-01-09T21:16:14.533Z","created_by":"5357ef811693be2118000001","modified_at":"2021-01-09T21:18:26.147Z","created":"2021-01-09T21:16:14.533Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/e55ef990-52bf-11eb-986d-4d7ff5faa3ab-logo.svg","published_at":"2021-01-09T21:18:26.147Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null}},{"children":null,"type":"html-textarea","title":"Teaser","key":"teaser","id":"PlZpb7SWpy","value":"

We have some exciting updates to share with you on the new Cosmic dashboard: global search and Object table filtering is now available!

"},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"pqVWe32Ff9","value":"c2a90ba0-843e-11ec-8e12-4f611a7927fa-Alpha-Preview2x.png","url":"https://cdn.cosmicjs.com/c2a90ba0-843e-11ec-8e12-4f611a7927fa-Alpha-Preview2x.png","imgix_url":"https://imgix.cosmicjs.com/c2a90ba0-843e-11ec-8e12-4f611a7927fa-Alpha-Preview2x.png"},{"children":null,"type":"textarea","title":"SEO Meta Description","key":"seo_meta_description","id":"PfMAkhJis0","value":"We have some exciting updates to share with you on the new Cosmic dashboard: global search and Object table filtering is now available!"},{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"58HHAeXWa5","value":"2022-02-02"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2022-01-31T22:41:58.488Z","created_by":"5357ef811693be2118000001","modified_at":"2022-02-02T18:15:27.312Z","created":"2022-01-31T22:41:58.488Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/c2a90ba0-843e-11ec-8e12-4f611a7927fa-Alpha-Preview2x.png","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2022-02-02T18:15:27.312Z","metadata":{"author":{"_id":"5ffa1d1e0046b0000799cb7b","slug":"cosmic","title":"Cosmic","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"ZogvxZg6OL","value":""},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D0qLJ4RPBe","value":"10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2021-01-09T21:16:14.533Z","created_by":"5357ef811693be2118000001","modified_at":"2021-01-09T21:18:26.147Z","created":"2021-01-09T21:16:14.533Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/e55ef990-52bf-11eb-986d-4d7ff5faa3ab-logo.svg","published_at":"2021-01-09T21:18:26.147Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"metadata":{"username":"","profile_picture":{"url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}}},"teaser":"

We have some exciting updates to share with you on the new Cosmic dashboard: global search and Object table filtering is now available!

","featured_image":{"url":"https://cdn.cosmicjs.com/c2a90ba0-843e-11ec-8e12-4f611a7927fa-Alpha-Preview2x.png","imgix_url":"https://imgix.cosmicjs.com/c2a90ba0-843e-11ec-8e12-4f611a7927fa-Alpha-Preview2x.png"},"seo_meta_description":"We have some exciting updates to share with you on the new Cosmic dashboard: global search and Object table filtering is now available!","published_date":"2022-02-02"}},{"_id":"53e822f1d75852ba08000001","slug":"plugins-developers","title":"Plugins | Developers","content":"

Developing Plugins with Cosmic JS

Plugins are applications that offers users an extension of the Cosmic JS object management system.

1. Plugins must be uploaded as a zip file format.
2. The zip file, once upzipped must have the following tree with exact file names:

plugin
├── index.html
├── app.js

The contents of the files need to contain the following:

1. The index.html file:
- This file is the front-end display for your Cosmic JS Plugin

2. An app.js file.
- This will tell the Cosmic JS system what to do with your plugin once it is installed into a user's bucket.

After you have created your plugin and uploaded the zip file, your plugin will be ready to add to your bucket.  Click the \"Plugins\" link in the left-side nav when inside your bucket.  Your plugin will also be available to other users.  Aren't you generous!
","metafields":[],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"pages","created":"2014-08-11T01:57:05.797Z","order":12,"modified":"2015-03-25T22:18:31.538Z","files":"","metadata":null},{"_id":"5919aa2ee5e17073690057b6","order":12,"slug":"kofo-okesola","title":"Kofo Okesola","content":"","metafields":[{"value":"b3fecc70-3970-11e7-8b8c-299270efeba9-kofo.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/b3fecc70-3970-11e7-8b8c-299270efeba9-kofo.jpg","imgix_url":"https://imgix.cosmicjs.com/b3fecc70-3970-11e7-8b8c-299270efeba9-kofo.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-05-15T13:16:29.985Z","created_by":"5357ef811693be2118000001","created":"2017-05-15T13:16:29.985Z","status":"published","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/b3fecc70-3970-11e7-8b8c-299270efeba9-kofo.jpg","imgix_url":"https://imgix.cosmicjs.com/b3fecc70-3970-11e7-8b8c-299270efeba9-kofo.jpg"}}},{"_id":"5bad1c11f394147a6754be76","slug":"github","title":"GitHub","content":"","metafields":[{"children":null,"type":"text","title":"Link","key":"link","id":"owS27xTQGJ","value":"https://app.cosmicjs.com/auth/github"},{"children":null,"type":"file","title":"Image","key":"image","id":"FyNMGhJqOC","value":"a0885240-c279-11e8-988a-37ba9c6b7f9d-github.jpg","url":"https://cdn.cosmicjs.com/a0885240-c279-11e8-988a-37ba9c6b7f9d-github.jpg","imgix_url":"https://imgix.cosmicjs.com/a0885240-c279-11e8-988a-37ba9c6b7f9d-github.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"integrations","created":"2018-09-27T18:06:09.089Z","created_at":"2018-09-27T18:06:09.089Z","modified_at":"2020-02-25T19:28:52.433Z","status":"published","locale":null,"published_at":"2020-02-25T19:28:52.433Z","created_by":"5357ef811693be2118000001","order":12,"modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"metadata":{"link":"https://app.cosmicjs.com/auth/github","image":{"url":"https://cdn.cosmicjs.com/a0885240-c279-11e8-988a-37ba9c6b7f9d-github.jpg","imgix_url":"https://imgix.cosmicjs.com/a0885240-c279-11e8-988a-37ba9c6b7f9d-github.jpg"}}},{"_id":"61cc8ac9fbc3c000082cb078","order":13,"slug":"cosmic-year-in-review-2021","title":"Cosmic Year in Review","content":"

2021 was a big year for Cosmic and we are pumped for what 2022 will bring. Here's a list of some of the things that we achieved over the past 12 months:

2021 Highlights

Merge Requests
Earlier this year we released Merge Requests to much fanfare. Content development is a team sport and we believe Merge Requests is a game-changer. By enabling Git-like version control workflows, Merge Requests enables greater confidence and collaboration to help\r\nteams increase content productivity.



New Documentation
Every good development platform needs easy-to-follow and thorough documentation. We released our new docs site to provide a better experience when diving into the possibilities that Cosmic offers with our API tools and resources.



New REST API v2
At Cosmic, we pride ourselves on providing the best API for content management. And it got even better this year with the release of version 2 of our REST API. We doubled down on the features that make our API the most straightforward API out there. Flexible queries, declarative API response properties, and millisecond response times make our API second to none.

New Billing Organization
We released an update to billing details that enables you to consolidate your billing for your user account (versus on each resource) which enables easier onboarding and accounting for paying customers.

New CDN Usage Policies
We are serving an ever-increasing amount of mission-critical content to billions of users globally. With this growth comes a responsibility to be clear whenever policies change that affect account management. We announced new policies to our CDN usage and overages to further assure customers that our service is pay-as-you-go and your billing scales with your usage fairly and transparently. New metrics were made available in the dashboard to enable users to monitor and predict any overages on plan usage.



New Dashboard
Finally, our biggest undertaking this year was the new Cosmic dashboard. We sent teasers and previews a couple of times, ultimately releasing the new dashboard in a private alpha. It's now available for early access and we encourage you to sign up to be a part of the next evolution of Cosmic!

What's to come in 2022

Cosmic is on a mission to be the best content management system in the world. Along with building a world-class product, we have assembled a world-class team to achieve our ambitious mission. I am extremely grateful for our amazing team and customers that have made this a stellar year for Cosmic. Cheers to a productive 2021 and looking forward to an exciting 2022! 🥂

Tony Spiro
Cosmic CEO

","metafields":[{"children":null,"type":"object","title":"Author","key":"author","id":"O3liKG4xp2","value":"5768b253163172890e00002c","required":true,"object_type":"authors","object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"children":null,"type":"html-textarea","title":"Teaser","key":"teaser","id":"lAMAbTlWVq","value":"

2021 was a big year for Cosmic and we are pumped for what 2022 will bring. Here's a list of some of the things that we achieved over the past 12 months

"},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"L6vIaNlNIA","value":"16b4e350-68dc-11ec-a48b-8d3e15049091-Cosmic-Year-in-Review1x.png","url":"https://cdn.cosmicjs.com/16b4e350-68dc-11ec-a48b-8d3e15049091-Cosmic-Year-in-Review1x.png","imgix_url":"https://imgix.cosmicjs.com/16b4e350-68dc-11ec-a48b-8d3e15049091-Cosmic-Year-in-Review1x.png"},{"children":null,"type":"textarea","title":"SEO Meta Description","key":"seo_meta_description","id":"9c5qR1ry4o","value":"2021 was a big year for Cosmic and we are pumped for what 2022 will bring. Here's a list of some of the things that we achieved over the past 12 months"},{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"70Ht5NkEPQ","value":"2021-12-30"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2021-12-29T16:20:25.838Z","created_by":"5357ef811693be2118000001","modified_at":"2022-01-07T22:53:29.358Z","created":"2021-12-29T16:20:25.838Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/16b4e350-68dc-11ec-a48b-8d3e15049091-Cosmic-Year-in-Review1x.png","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2022-01-07T22:53:29.358Z","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

2021 was a big year for Cosmic and we are pumped for what 2022 will bring. Here's a list of some of the things that we achieved over the past 12 months

","featured_image":{"url":"https://cdn.cosmicjs.com/16b4e350-68dc-11ec-a48b-8d3e15049091-Cosmic-Year-in-Review1x.png","imgix_url":"https://imgix.cosmicjs.com/16b4e350-68dc-11ec-a48b-8d3e15049091-Cosmic-Year-in-Review1x.png"},"seo_meta_description":"2021 was a big year for Cosmic and we are pumped for what 2022 will bring. Here's a list of some of the things that we achieved over the past 12 months","published_date":"2021-12-30"}},{"_id":"60b10525f01ad2000890a85a","order":13,"slug":"account-billing-updates","title":"Account Billing Updates","content":"

We've made some dashboard updates that should make managing account information, billing, and payment methods on your Cosmic account much easier. To get started, go to Account Settings > Billing Details to set up your payment methods and manage your global billing for your Cosmic products and services.

New Payment Methods Manager
You can now add and manage payment methods directly on your user account from your account settings area. Before, billing for Buckets was handled on the Bucket settings page. Now, with payment methods managed by your user account, you can manage billing for multiple Buckets and add-ons without re-entering payment information. Plus, you can now use Google Pay!

Go to Account Settings > Billing Details to set up your payment methods.


Add Billing Details
Along with this new way of managing your billing and payment methods, you can now update the name, email, and additional information that will be available on your invoices. Payment history will also be available on your account Billing Details page. (For the old Bucket billing, you will still see payment history on the Bucket billing page)


Group Plans for Bulk Rate
Group plans (formally called Billing Packages) are available for grouping Bucket usage plans onto a single cost-savings bulk-rate plan. Choose between 5 and 10 Buckets, plus a 10% discount for yearly plans.

Transfer Billing
Transfering billing between members of your team is now easier than ever. To have another team member take over billing, simply have them click "Transfer Billing" and the billing will switch to their account. (Team members must have admin access on the Bucket\r\nto transfer billing). See screenshot below.

We hope you enjoy these updates to make it easier to manage your account and billing details. If you have any questions, you can reach out to us at support@cosmicjs.com

","metafields":[{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"Wj9htTQEdD","value":"2021-06-02"},{"children":null,"type":"object","title":"Author","key":"author","id":"rY9IqsvxRG","value":"5ffa1d1e0046b0000799cb7b","object_type":"authors","object":{"_id":"5ffa1d1e0046b0000799cb7b","slug":"cosmic","title":"Cosmic","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"ZogvxZg6OL","value":""},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D0qLJ4RPBe","value":"10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2021-01-09T21:16:14.533Z","created_by":"5357ef811693be2118000001","modified_at":"2021-01-09T21:18:26.147Z","created":"2021-01-09T21:16:14.533Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/e55ef990-52bf-11eb-986d-4d7ff5faa3ab-logo.svg","published_at":"2021-01-09T21:18:26.147Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null}},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"U3O4UVaMJY","value":"","url":null,"imgix_url":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"changelogs","created_at":"2021-05-28T14:58:45.824Z","created_by":"5357ef811693be2118000001","modified_at":"2021-06-02T13:16:39.394Z","created":"2021-05-28T14:58:45.824Z","status":"published","thumbnail":"","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2021-06-02T13:16:39.394Z","metadata":{"published_date":"2021-06-02","author":{"_id":"5ffa1d1e0046b0000799cb7b","slug":"cosmic","title":"Cosmic","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"ZogvxZg6OL","value":""},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D0qLJ4RPBe","value":"10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2021-01-09T21:16:14.533Z","created_by":"5357ef811693be2118000001","modified_at":"2021-01-09T21:18:26.147Z","created":"2021-01-09T21:16:14.533Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/e55ef990-52bf-11eb-986d-4d7ff5faa3ab-logo.svg","published_at":"2021-01-09T21:18:26.147Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"metadata":{"username":"","profile_picture":{"url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}}},"featured_image":{"url":null,"imgix_url":null}}},{"_id":"5bad1cd0dd42057ecb90054d","slug":"typeform","title":"Typeform","content":"","metafields":[{"value":"https://cosmicjs.com/articles/integrating-typeform-data-into-cosmic-js-jmjmkoyz","key":"link","title":"Link","type":"text","children":false,"has_length_edit":true,"parent":false},{"value":"a1903da0-c27f-11e8-956f-0b9a61326f1b-typeform.png","key":"image","title":"Image","type":"file","children":false,"has_length_edit":false,"parent":false,"url":"https://cdn.cosmicjs.com/a1903da0-c27f-11e8-956f-0b9a61326f1b-typeform.png","imgix_url":"https://imgix.cosmicjs.com/a1903da0-c27f-11e8-956f-0b9a61326f1b-typeform.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"integrations","created":"2018-09-27T18:09:20.042Z","created_at":"2018-09-27T18:09:20.042Z","modified_at":"2018-09-27T18:09:20.042Z","status":"published","locale":null,"published_at":"2018-09-27T18:09:20.042Z","created_by":"5357ef811693be2118000001","order":13,"metadata":{"link":"https://cosmicjs.com/articles/integrating-typeform-data-into-cosmic-js-jmjmkoyz","image":{"url":"https://cdn.cosmicjs.com/a1903da0-c27f-11e8-956f-0b9a61326f1b-typeform.png","imgix_url":"https://imgix.cosmicjs.com/a1903da0-c27f-11e8-956f-0b9a61326f1b-typeform.png"}}},{"_id":"5a73423ee520776813591ee2","order":13,"slug":"rocket-radio-builds-a-podcast-streaming-website","title":"Rocket Radio Builds a Podcast-Streaming Website","content":"

Rocket Radio is a San Francisco Bay Area Music Network that creates podcasts featuring music and interviews with established and rising stars in the music industry. With shows covering all music genres, they needed a new website that allowed for numerous content editors and developers representing a blended team. See how Rocket Radio  built their new podcast website using Node.js, React.js, Redux and Cosmic.



The Rocket Radio tech team built out a single page application with Node, React and Redux using Example Apps from the Cosmic Community. The team was able to leverage the Cosmic API to build out core components from Authentication to a news gallery to podcast listening features.



"From Docs to Example Apps and Service, it was all there. Cosmic provided a huge boost in cutting development time all while helping our team meet its goals. I would certainly recommend Cosmic to anyone seeking to build out a website using some of the latest technology while looking to stay ahead of the game."

— Gus A., Senior Software Engineer 


\">
","metafields":[{"value":"Rocket Radio","key":"company","title":"Company","type":"text","children":null},{"value":"Music and Entertainment","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Rocket Radio is a San Francisco Bay Area Music Network that creates podcasts featuring music and interviews with established and rising stars in the music industry. With shows covering all music genres, they needed a new website that allowed for numerous content editors and developers representing a blended team. See how Rocket Radio built their new podcast website using Node.js React.js, Redux and Cosmic.\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"acbb5cf0-076d-11e8-a43c-e17c6c324439-IMG_0380.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/acbb5cf0-076d-11e8-a43c-e17c6c324439-IMG_0380.jpg","imgix_url":"https://imgix.cosmicjs.com/acbb5cf0-076d-11e8-a43c-e17c6c324439-IMG_0380.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-02-01T16:37:18.070Z","created_by":"5716b504e9c686d006000073","created":"2018-02-01T16:37:18.070Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-08-30T20:32:56.765Z","metadata":{"company":"Rocket Radio","industry_type":"Music and Entertainment","teaser":"Rocket Radio is a San Francisco Bay Area Music Network that creates podcasts featuring music and interviews with established and rising stars in the music industry. With shows covering all music genres, they needed a new website that allowed for numerous content editors and developers representing a blended team. See how Rocket Radio built their new podcast website using Node.js React.js, Redux and Cosmic.\n","logo":{"url":"https://cdn.cosmicjs.com/acbb5cf0-076d-11e8-a43c-e17c6c324439-IMG_0380.jpg","imgix_url":"https://imgix.cosmicjs.com/acbb5cf0-076d-11e8-a43c-e17c6c324439-IMG_0380.jpg"}}},{"_id":"5eea6f01d8159f00070e615e","order":13,"slug":"gridsome-cms","title":"Gridsome CMS","content":"","metafields":[{"children":null,"type":"file","title":"Image","key":"image","id":"YRRV9IPguf","value":"4aebc400-b0d1-11ea-832f-713ccfd1a841-gridsome-cms.svg","url":"https://cdn.cosmicjs.com/4aebc400-b0d1-11ea-832f-713ccfd1a841-gridsome-cms.svg","imgix_url":"https://imgix.cosmicjs.com/4aebc400-b0d1-11ea-832f-713ccfd1a841-gridsome-cms.svg"},{"children":null,"type":"file","title":"Thumbnail","key":"thumbnail","id":"ZX3GHvgatv","value":"45d7b780-b0d1-11ea-832f-713ccfd1a841-gridsome-cms-icon.svg","url":"https://cdn.cosmicjs.com/45d7b780-b0d1-11ea-832f-713ccfd1a841-gridsome-cms-icon.svg","imgix_url":"https://imgix.cosmicjs.com/45d7b780-b0d1-11ea-832f-713ccfd1a841-gridsome-cms-icon.svg"},{"children":null,"type":"html-textarea","title":"Blurb","key":"blurb","id":"sBP8hDCb9U","value":"

Cosmic is the best CMS for Gridsome websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

"},{"children":null,"type":"text","title":"Headline","key":"headline","id":"VSY5aLiRIh","value":"Gridsome"},{"children":null,"type":"text","title":"SEO Description","key":"seo_description","id":"ZnsMYxZXag","value":"Cosmic is the best CMS for Gridsome websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators."},{"children":null,"type":"file","title":"Twitter Card Image","key":"twitter_card_image","id":"fWQzt4GkM8","value":"2766e690-b0d1-11ea-832f-713ccfd1a841-gridsome-cms.jpg","url":"https://cdn.cosmicjs.com/2766e690-b0d1-11ea-832f-713ccfd1a841-gridsome-cms.jpg","imgix_url":"https://imgix.cosmicjs.com/2766e690-b0d1-11ea-832f-713ccfd1a841-gridsome-cms.jpg"},{"children":null,"type":"text","title":"SEO Title","key":"seo_title","id":"0HUHHtEgLq","value":"Best Headless CMS for Gridsome"},{"children":null,"type":"html-textarea","title":"Code Example","key":"code_example","id":"2WRpy4gfJO","value":""},{"children":[],"type":"repeater","title":"Videos","key":"videos","id":"lVESbek3Cp","value":"Using Cosmic as a Headless CMS with Gatsby","repeater_fields":[{"title":"Title","key":"title","value":"","type":"text","required":false},{"title":"Link","key":"link","value":"","type":"text","required":false}]}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"kb-articles","created_at":"2020-06-17T19:29:05.242Z","created_by":"5357ef811693be2118000001","created":"2020-06-17T19:29:05.242Z","status":"published","modified_at":"2020-06-27T19:12:59.695Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2020-06-27T19:12:59.695Z","metadata":{"image":{"url":"https://cdn.cosmicjs.com/4aebc400-b0d1-11ea-832f-713ccfd1a841-gridsome-cms.svg","imgix_url":"https://imgix.cosmicjs.com/4aebc400-b0d1-11ea-832f-713ccfd1a841-gridsome-cms.svg"},"thumbnail":{"url":"https://cdn.cosmicjs.com/45d7b780-b0d1-11ea-832f-713ccfd1a841-gridsome-cms-icon.svg","imgix_url":"https://imgix.cosmicjs.com/45d7b780-b0d1-11ea-832f-713ccfd1a841-gridsome-cms-icon.svg"},"blurb":"

Cosmic is the best CMS for Gridsome websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

","headline":"Gridsome","seo_description":"Cosmic is the best CMS for Gridsome websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.","twitter_card_image":{"url":"https://cdn.cosmicjs.com/2766e690-b0d1-11ea-832f-713ccfd1a841-gridsome-cms.jpg","imgix_url":"https://imgix.cosmicjs.com/2766e690-b0d1-11ea-832f-713ccfd1a841-gridsome-cms.jpg"},"seo_title":"Best Headless CMS for Gridsome","code_example":"","videos":[]}},{"_id":"5efb8ad2b0efb900072e2a94","slug":"kentico-kontent","title":"Kentico Kontent","content":"

Kentico Kontent is a Headless CMS that positions itself as a cloud-based content management platform that streamlines content production and delivery while offering developers all the benefits of a headless CMS.


Developers and Creators

Kentico Kontent, like Cosmic, offers both a REST and GraphQL API. Check out the Cosmic API docs and the Kentico Kontent API docs\r\nto see the difference in approach.

Cosmic provides everything your team of developers and content creators need: powerful and intuitive APIs for developers, and an easy-to-use dashboard for content creators. We've removed all complexity and CMS maintenance, so your team can focus on building great products faster, together.


Limitations

With Kentico Kontent, you will see that they put some pretty hard limits on content item count, localization, user roles, and more.

","metafields":[{"children":null,"type":"switch","title":"Include in link list","key":"include_in_link_list","id":"ZJnyWi8UpB","value":true,"options":"yes,no"},{"children":null,"type":"text","title":"Vendor Name","key":"vendor_name","id":"3b5Xzknfue","value":"Kentico Kontent Headless CMS"},{"children":null,"type":"file","title":"Logo","key":"logo","id":"cv9SoyKguh","value":"4c02d6b0-bb00-11ea-8170-e7fb6745eb70-kentico-kontent-headless-cms.svg","url":"https://cdn.cosmicjs.com/4c02d6b0-bb00-11ea-8170-e7fb6745eb70-kentico-kontent-headless-cms.svg","imgix_url":"https://imgix.cosmicjs.com/4c02d6b0-bb00-11ea-8170-e7fb6745eb70-kentico-kontent-headless-cms.svg"},{"children":null,"type":"textarea","title":"Tech","key":"tech","id":"JEZJjtQnRu","value":"Technology not indicated."},{"children":null,"type":"textarea","title":"Scalability","key":"scalability","id":"UC5p7NCu1w","value":"Managed scalability."},{"children":null,"type":"textarea","title":"Security","key":"security","id":"8qTwZ6WcMZ","value":"They manage your dashboard."},{"children":null,"type":"textarea","title":"Maintenance","key":"maintenance","id":"BylJFskHnK","value":"They manage your CMS."},{"children":null,"type":"textarea","title":"Caching","key":"caching","id":"a0aXfEWN5Q","value":"Caching included on the API."},{"children":null,"type":"textarea","title":"Media CDN","key":"media_cdn","id":"IKnB3kQgTf","value":"CDN included."},{"children":null,"type":"textarea","title":"Image Processing","key":"image_processing","id":"k9AddztMLh","value":"Image sizes and optimization capabilities."},{"children":null,"type":"textarea","title":"Extendability","key":"extendability","id":"ja2YtSr65z","value":"UI extensions."},{"children":null,"type":"textarea","title":"Front end","key":"front_end","id":"oIOfiJQtVj","value":"Front end is decoupled from the backend CMS."},{"children":null,"type":"textarea","title":"Number of Projects","key":"number_of_projects","id":"BCHZsuLfLa","value":"One login, multiple projects."},{"children":null,"type":"html-textarea","title":"Costs","key":"costs","id":"YsTrG4ESgG","value":"

Watch out for a large price cliff to climb from an entry plan to anything larger. You'll be at an Enterprise level taking out a second mortgage on your house before you know it.

"},{"children":null,"type":"text","title":"Cost Value","key":"cost_value","id":"6Unj7liFx7","value":"HIGH"},{"children":null,"type":"text","title":"Cost Text","key":"cost_text","id":"bJdEfnxTYN","value":""}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"cms-competitors","created":"2020-06-30T18:56:18.023Z","created_at":"2020-06-30T18:56:18.023Z","modified_at":"2020-06-30T18:56:22.730Z","status":"published","locale":null,"modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-06-30T18:56:22.730Z","unpublish_at":null,"order":13,"metadata":{"include_in_link_list":true,"vendor_name":"Kentico Kontent Headless CMS","logo":{"url":"https://cdn.cosmicjs.com/4c02d6b0-bb00-11ea-8170-e7fb6745eb70-kentico-kontent-headless-cms.svg","imgix_url":"https://imgix.cosmicjs.com/4c02d6b0-bb00-11ea-8170-e7fb6745eb70-kentico-kontent-headless-cms.svg"},"tech":"Technology not indicated.","scalability":"Managed scalability.","security":"They manage your dashboard.","maintenance":"They manage your CMS.","caching":"Caching included on the API.","media_cdn":"CDN included.","image_processing":"Image sizes and optimization capabilities.","extendability":"UI extensions.","front_end":"Front end is decoupled from the backend CMS.","number_of_projects":"One login, multiple projects.","costs":"

Watch out for a large price cliff to climb from an entry plan to anything larger. You'll be at an Enterprise level taking out a second mortgage on your house before you know it.

","cost_value":"HIGH","cost_text":""}},{"_id":"53e821960635df3708000001","slug":"apps-developers","title":"Apps | Developers","content":"

Developing Apps with Cosmic JS

Developing apps with Cosmic JS is easy.  Follow the documentation for references to the API calls.  An example of a Cosmic JS App is Cosmic Scale Angular, a single page website built on the Angular front-end framework that plugs into a bucket on Cosmic JS to host it's content.

You can build anything using Cosmic JS as the content platform.  Feel free to build your app on Ruby on Rails, Node.js, PHP, Angular JS, iOS apps or Android apps.  It's up to you!  Add as many apps as you want, it is completely free to add your app to the Cosmic JS App Store.  A small fee of 25% is taken from each app sale.  You will be paid at the end of the month by check when you account balance is over $100.

Cosmic JS Apps have only a few guidelines:
1. Apps must be in zip file format.
2. Apps must use Cosmic JS to host it's content.
3. Apps may not contain any vulgar or graphic material.

Optional items that will make the App more likely to be approved:

1. The App contains a thorough Readme.txt file detailing how to use the App.
2. The App has a content bucket on Cosmic JS for demonstration that can be copied to another users account.
","metafields":[],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"pages","created":"2014-08-11T01:51:18.507Z","order":13,"modified":"2014-08-17T21:54:59.446Z","files":"","metadata":null},{"_id":"5914999aa57d9d4b390034d5","order":13,"slug":"dmytro-kutsaniuk","title":"Dmytro Kutsaniuk","content":"","metafields":[{"value":"e265ea60-366b-11e7-9161-61cd2f0acd2a-kutsaniuk.jpeg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e265ea60-366b-11e7-9161-61cd2f0acd2a-kutsaniuk.jpeg","imgix_url":"https://imgix.cosmicjs.com/e265ea60-366b-11e7-9161-61cd2f0acd2a-kutsaniuk.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-05-11T17:04:26.061Z","created_by":"5357ef811693be2118000001","created":"2017-05-11T17:04:26.061Z","status":"published","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e265ea60-366b-11e7-9161-61cd2f0acd2a-kutsaniuk.jpeg","imgix_url":"https://imgix.cosmicjs.com/e265ea60-366b-11e7-9161-61cd2f0acd2a-kutsaniuk.jpeg"}}},{"_id":"5d49dee7171a3305b38875d1","order":13,"slug":"cms-software-for-native-apps","title":"CMS Software for Native Apps","content":"

Cosmic JS provides flexible CMS Software for teams managing content for native apps. Teams choose to manage content using Cosmic JS CMS Software because the CMS Dashboard is simple and intuitive to manage content, and integration with your native app is fast and easy.

Teams using CMS Software to power content for their native apps don't have to maintain their own server and content management system. By focusing on apps and not infrastructure, teams are able to publish content to their native apps faster, together. 


What is Headless CMS Software?

Headless CMS Software works by providing non-technical editors with a Dashboard UI to model, create and publish content while providing developers with API tools and resources to integrate content with any website or app. By decoupling content from code, teams create a central content repository that can power all of their content-powered applications. 

","metafields":[{"value":"CMS Software for Native Apps ","key":"solution_name","title":"Solution Name","type":"text","children":null},{"value":"b5c58520-b886-11e9-b1f9-b9470ded605a-633ad600-9dc1-11e9-a5b4-e5df9f8049d3-Plato.png","key":"image","title":"Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/b5c58520-b886-11e9-b1f9-b9470ded605a-633ad600-9dc1-11e9-a5b4-e5df9f8049d3-Plato.png","imgix_url":"https://imgix.cosmicjs.com/b5c58520-b886-11e9-b1f9-b9470ded605a-633ad600-9dc1-11e9-a5b4-e5df9f8049d3-Plato.png"},{"object_type":"case-studies","value":"5bd889bf80b80325461575c5,5c3774946bcb7526c0bddbe7","key":"case_studies","title":"Case Studies","type":"objects","children":null,"objects":[{"_id":"5bd889bf80b80325461575c5","slug":"plato-delivers-mobile-news-feed-content-with-cosmic-js","title":"Plato Delivers Mobile News Feed Content with Cosmic","content":"

Plato's mission is to bring people together through meaningful & social games. Plato combines chat & games seamlessly, as the first messenger built from the ground up to support full multiplayer games. With a team comprised of Yahoo and gaming veterans plus backing from WhatsApp, Plato is available now on iOS & Android.



Plato had a home-built CMS that, between operational costs and the engineering salaries to maintain it, was costing far too much. The team decided to replace their internal system with Cosmic to allow their developers to build new content models when they need to while empowering editors to manage content without bottlenecking the development team. 

Plato's new tech stack is Golang based and hosted on AWS. Plato's mobile clients, written in Swift and Kotlin, access their news feed content, which is ATOM Syndication Format. The application uses the Cosmic REST API to pull articles and package them into an ATOM-compliant feed. 



"It is refreshing to use an API-first CMS, rather than trying to integrate with a complex, monolithic system and adapt it to our specific use case.”

— Jesse Macnish, Chief Technology Officer  

","metafields":[{"value":"Plato","key":"company","title":"Company","type":"text","children":null},{"value":"Gaming ","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Plato's mission is to bring people together through meaningful & social games. Plato combines chat & games seamlessly, as the first messenger built from the ground up to support full multiplayer games. With a team comprised of Yahoo and gaming veterans plus backing from WhatsApp, Plato is available now on iOS & Android.\n\n\n\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"e6fd2940-1390-11e9-a4d9-67aa1af4f618-pauHfhZ9_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e6fd2940-1390-11e9-a4d9-67aa1af4f618-pauHfhZ9_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e6fd2940-1390-11e9-a4d9-67aa1af4f618-pauHfhZ9_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2018-10-30T16:41:35.346Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2019-01-08T23:23:29.527Z"},{"_id":"5c3774946bcb7526c0bddbe7","slug":"dreamwalks-decoupled-approach-to-content-management","title":"DreamWalk's Decoupled Approach to Content Management","content":"

With a list of chart-topping apps to their name and a long history of mobile innovation, DreamWalk is the App Development agency trusted by some of the world’s biggest brands and most ambitious startups. With clients like Coca-Cola®, New Mexico Tourism and BP, DreamWalk is among the longest standing and most trusted app development firms in Australia. 



The team at DreamWalk was in search of a headless CMS that would speed up their development cycles. They needed to empower their developers with flexibility out-of-the-box while enabling their content managers to manage content in a web-based Dashboard. They chose Cosmic due to its easy content modeling tools that allowed them to set up client projects more quickly and easily than before, adding to their bottom line and expanding the tools available in their digital toolkit.



"At DreamWalk we always strive to give our clients the best possible customer experience. Cosmic enables us to work within tight budgets without compromising on that great experience."

— Karl Graf, Director and Mobile App Strategist
","metafields":[{"value":"DreamWalk","key":"company","title":"Company","type":"text","children":null},{"value":"App Development Agency","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"With a list of chart-topping apps to their name and a long history of mobile innovation, DreamWalk is the App Development agency trusted by some of the world’s biggest brands and most ambitious startups. With clients like Coca-Cola®, New Mexico Tourism and BP, DreamWalk is among the longest standing and most trusted app development firms in Australia. \n\n\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"f891dd10-14f6-11e9-ac3b-29773f4ac49e-A0Vz6NqU_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/f891dd10-14f6-11e9-ac3b-29773f4ac49e-A0Vz6NqU_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/f891dd10-14f6-11e9-ac3b-29773f4ac49e-A0Vz6NqU_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2019-01-10T16:36:36.690Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2019-01-11T16:56:26.753Z"}]},{"repeater_fields":[{"title":"Slug","key":"slug","value":"","type":"text","required":false}],"value":"react-native-twitter-clone","key":"app_slugs","title":"App Slugs","type":"repeater","children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"react-native-twitter-clone","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"cross-platform-blog","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"product-catelog-app","type":"text","required":false}]}]},{"repeater_fields":[{"title":"Slug","key":"slug","value":"","type":"text","required":false}],"value":"twitter-search","key":"extension_slugs","title":"Extension SLugs","type":"repeater","children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"twitter-search","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"export-to-csv","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"imgix-editor ","type":"text","required":false}]}]},{"value":"\"It is refreshing to use an API-first CMS, rather than trying to integrate with a complex, monolithic system and adapt it to our specific use case.”\n","key":"testimonial","title":"Testimonial","type":"textarea","children":null},{"value":"Jesse Macnish, Chief Technology Officer at Plato Chat","key":"testimonial_credit","title":"Testimonial Credit","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"solutions","created_at":"2019-08-05T20:18:17.006Z","created_by":"5716b504e9c686d006000073","modified_at":"2019-08-06T21:43:39.558Z","created":"2019-08-06T20:11:19.362Z","status":"published","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2019-08-06T21:43:39.558Z","metadata":{"solution_name":"CMS Software for Native Apps ","image":{"url":"https://cdn.cosmicjs.com/b5c58520-b886-11e9-b1f9-b9470ded605a-633ad600-9dc1-11e9-a5b4-e5df9f8049d3-Plato.png","imgix_url":"https://imgix.cosmicjs.com/b5c58520-b886-11e9-b1f9-b9470ded605a-633ad600-9dc1-11e9-a5b4-e5df9f8049d3-Plato.png"},"case_studies":[{"_id":"5bd889bf80b80325461575c5","slug":"plato-delivers-mobile-news-feed-content-with-cosmic-js","title":"Plato Delivers Mobile News Feed Content with Cosmic","content":"

Plato's mission is to bring people together through meaningful & social games. Plato combines chat & games seamlessly, as the first messenger built from the ground up to support full multiplayer games. With a team comprised of Yahoo and gaming veterans plus backing from WhatsApp, Plato is available now on iOS & Android.



Plato had a home-built CMS that, between operational costs and the engineering salaries to maintain it, was costing far too much. The team decided to replace their internal system with Cosmic to allow their developers to build new content models when they need to while empowering editors to manage content without bottlenecking the development team. 

Plato's new tech stack is Golang based and hosted on AWS. Plato's mobile clients, written in Swift and Kotlin, access their news feed content, which is ATOM Syndication Format. The application uses the Cosmic REST API to pull articles and package them into an ATOM-compliant feed. 



"It is refreshing to use an API-first CMS, rather than trying to integrate with a complex, monolithic system and adapt it to our specific use case.”

— Jesse Macnish, Chief Technology Officer  

","metafields":[{"value":"Plato","key":"company","title":"Company","type":"text","children":null},{"value":"Gaming ","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Plato's mission is to bring people together through meaningful & social games. Plato combines chat & games seamlessly, as the first messenger built from the ground up to support full multiplayer games. With a team comprised of Yahoo and gaming veterans plus backing from WhatsApp, Plato is available now on iOS & Android.\n\n\n\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"e6fd2940-1390-11e9-a4d9-67aa1af4f618-pauHfhZ9_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e6fd2940-1390-11e9-a4d9-67aa1af4f618-pauHfhZ9_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e6fd2940-1390-11e9-a4d9-67aa1af4f618-pauHfhZ9_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2018-10-30T16:41:35.346Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2019-01-08T23:23:29.527Z","metadata":{"company":"Plato","industry_type":"Gaming ","teaser":"Plato's mission is to bring people together through meaningful & social games. Plato combines chat & games seamlessly, as the first messenger built from the ground up to support full multiplayer games. With a team comprised of Yahoo and gaming veterans plus backing from WhatsApp, Plato is available now on iOS & Android.\n\n\n\n","logo":{"url":"https://cdn.cosmicjs.com/e6fd2940-1390-11e9-a4d9-67aa1af4f618-pauHfhZ9_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e6fd2940-1390-11e9-a4d9-67aa1af4f618-pauHfhZ9_400x400.jpg"}}},{"_id":"5c3774946bcb7526c0bddbe7","slug":"dreamwalks-decoupled-approach-to-content-management","title":"DreamWalk's Decoupled Approach to Content Management","content":"

With a list of chart-topping apps to their name and a long history of mobile innovation, DreamWalk is the App Development agency trusted by some of the world’s biggest brands and most ambitious startups. With clients like Coca-Cola®, New Mexico Tourism and BP, DreamWalk is among the longest standing and most trusted app development firms in Australia. 



The team at DreamWalk was in search of a headless CMS that would speed up their development cycles. They needed to empower their developers with flexibility out-of-the-box while enabling their content managers to manage content in a web-based Dashboard. They chose Cosmic due to its easy content modeling tools that allowed them to set up client projects more quickly and easily than before, adding to their bottom line and expanding the tools available in their digital toolkit.



"At DreamWalk we always strive to give our clients the best possible customer experience. Cosmic enables us to work within tight budgets without compromising on that great experience."

— Karl Graf, Director and Mobile App Strategist
","metafields":[{"value":"DreamWalk","key":"company","title":"Company","type":"text","children":null},{"value":"App Development Agency","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"With a list of chart-topping apps to their name and a long history of mobile innovation, DreamWalk is the App Development agency trusted by some of the world’s biggest brands and most ambitious startups. With clients like Coca-Cola®, New Mexico Tourism and BP, DreamWalk is among the longest standing and most trusted app development firms in Australia. \n\n\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"f891dd10-14f6-11e9-ac3b-29773f4ac49e-A0Vz6NqU_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/f891dd10-14f6-11e9-ac3b-29773f4ac49e-A0Vz6NqU_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/f891dd10-14f6-11e9-ac3b-29773f4ac49e-A0Vz6NqU_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2019-01-10T16:36:36.690Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2019-01-11T16:56:26.753Z","metadata":{"company":"DreamWalk","industry_type":"App Development Agency","teaser":"With a list of chart-topping apps to their name and a long history of mobile innovation, DreamWalk is the App Development agency trusted by some of the world’s biggest brands and most ambitious startups. With clients like Coca-Cola®, New Mexico Tourism and BP, DreamWalk is among the longest standing and most trusted app development firms in Australia. \n\n\n","logo":{"url":"https://cdn.cosmicjs.com/f891dd10-14f6-11e9-ac3b-29773f4ac49e-A0Vz6NqU_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/f891dd10-14f6-11e9-ac3b-29773f4ac49e-A0Vz6NqU_400x400.jpg"}}}],"app_slugs":[{"slug":"react-native-twitter-clone"},{"slug":"cross-platform-blog"},{"slug":"product-catelog-app"}],"extension_slugs":[{"slug":"twitter-search"},{"slug":"export-to-csv"},{"slug":"imgix-editor "}],"testimonial":"\"It is refreshing to use an API-first CMS, rather than trying to integrate with a complex, monolithic system and adapt it to our specific use case.”\n","testimonial_credit":"Jesse Macnish, Chief Technology Officer at Plato Chat"}},{"_id":"5d4af1d5c360bd38c502f12d","order":14,"slug":"cms-software-for-ecommerce-websites","title":"CMS Software for Ecommerce Websites","content":"

Cosmic JS provides flexible CMS Software for teams managing ecommerce content. Whether they're creating content models for products, promotions or FAQs, teams choose to manage content using Cosmic JS CMS Software because the CMS Dashboard is intuitive and developers can build their ecommerce app however they want. 

Teams using CMS Software to power content for their ecommerce websites don't have to maintain their own server and content management system. By focusing on apps and not infrastructure, teams are able to build modern apps faster, together. 


What is Headless CMS Software?

Headless CMS Software works by providing non-technical editors with a Dashboard UI to model, create and publish content while providing developers with API tools and resources to integrate content with any website or app. By decoupling content from code, teams create a central content repository that can power all of their content-powered applications. 

","metafields":[{"value":"CMS Software for Ecommerce Websites","key":"solution_name","title":"Solution Name","type":"text","children":null},{"value":"5b8db790-b92a-11e9-bf89-df8d6377231e-d03eb2f0-9f54-11e9-ac09-4be8a5631b5e-6845e0b0-4235-11e8-86fe-0b7f31f36651-Screen-Shot-2018-04-17-at-6.48.12-AM.png","key":"image","title":"Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/5b8db790-b92a-11e9-bf89-df8d6377231e-d03eb2f0-9f54-11e9-ac09-4be8a5631b5e-6845e0b0-4235-11e8-86fe-0b7f31f36651-Screen-Shot-2018-04-17-at-6.48.12-AM.png","imgix_url":"https://imgix.cosmicjs.com/5b8db790-b92a-11e9-bf89-df8d6377231e-d03eb2f0-9f54-11e9-ac09-4be8a5631b5e-6845e0b0-4235-11e8-86fe-0b7f31f36651-Screen-Shot-2018-04-17-at-6.48.12-AM.png"},{"object_type":"case-studies","value":"59663607a6a3f55962000e40,5aa7cd8c3078516dd48d6ad2,59f49a7cee2adb545c0005bc","key":"case_studies","title":"Case Studies","type":"objects","children":null,"objects":[{"_id":"59663607a6a3f55962000e40","slug":"big-fish-launches-marketing-and-tutorial-content-for-games","title":"Big Fish Launches Marketing and Tutorial Content for Games","content":"

When Big Fish launches a new game for iOS, Android, or Web, they use a marketing landing page to promote the launch. Big Fish wanted their game studios to have the ability to curate and update content on each of their landing pages. Other CMS systems weren’t as flexible enough for their needs. Cosmic provides Big Fish with more creative freedom to build landing pages while allowing game studios to make updates on their own.




"We use Cosmic buckets for each of our mobile game landing pages. While our API and storage usage is low, the number of buckets we need is high, which makes the new Clusters Feature a perfect solution for our company use cases. It allows us to\r\nhave a single consolidated invoice, with an overall API and data-limit, but up to 35 buckets for our use."

— Jessica Chappell, Web Developer 

Read more about Big Fish and their games.

","metafields":[{"value":"Big Fish","key":"company","title":"Company","type":"text","children":null},{"value":"Gaming","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"When Big Fish launches a new game for iOS, Android, or Web, they use a marketing landing page to promote the launch. Other CMS systems weren’t as flexible enough for their needs. Cosmic provides Big Fish with more creative freedom to build landing pages while allowing game studios to make updates on their own.\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png","imgix_url":"https://imgix.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created":"2017-07-12T14:45:27.402Z","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","status":"published","publish_at":null,"published_at":"2018-11-08T23:15:38.911Z"},{"_id":"5aa7cd8c3078516dd48d6ad2","slug":"bookabus-builds-a-localized-transportation-website","title":"Bookabus Builds a Localized Transportation Website","content":"

Bookabus is an innovative start-up in the travel and mobility industry, serving as one of the largest coach hire and bus rental booking services in Europe. Whether it’s a day trip with 20 people or a large-scale event with 500 people, Bookabus, together with its partners, ensures a carefree and high-quality travel experience for groups and events. 



Bookabus needed a new website to communicate their transport routes, terms and marketing materials.  A big requirement was the ability to localize their content into different languages for the different areas they're servicing, including the UK, Netherlands, Germany, Spain, and Belgium.  They chose to build their new transportation website with Cosmic because of the ease of use and powerful localization capabilities.



"Cosmic allowed us to easily integrate dynamic content into our website. The product is a great value for your money. This is especially true given that their customer service is top-notch."

— Harrie Pieters, Web Developer 

","metafields":[{"value":"Bookabus","key":"company","title":"Company","type":"text","children":null},{"value":"Transportation","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Bookabus is an innovative start-up in the travel and mobility industry, serving as one of the largest coach hire and bus rental booking services in Europe. Whether it’s a day trip with 20 people or a large-scale event with 500 people, Bookabus, together with its partners, ensures a carefree and high-quality travel experience for groups and events. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"61777d70-26bf-11e8-808d-f7104bba2cfa-7bb0413cfa3f2b5a11182ebb782aa208.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/61777d70-26bf-11e8-808d-f7104bba2cfa-7bb0413cfa3f2b5a11182ebb782aa208.png","imgix_url":"https://imgix.cosmicjs.com/61777d70-26bf-11e8-808d-f7104bba2cfa-7bb0413cfa3f2b5a11182ebb782aa208.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-03-13T13:09:32.089Z","created_by":"5716b504e9c686d006000073","created":"2018-03-13T13:09:32.089Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-04-19T21:23:26.384Z"},{"_id":"59f49a7cee2adb545c0005bc","slug":"life-is-good-shares-gratitude","title":"Life is Good Shares Gratitude","content":"

The Life is Good community shares one simple, unifying mission: to spread the power of optimism. In that spirit, the Life is Good team built a Gratitude Wall for some user-generated-thanksgiving. This widget will allow users to add "sticky notes" with their name and what they are grateful for to the gratitude board. 



The Gratitude Wall is adapted from the Cosmic Sticky Notes App, built on React, Redux and Node.js. The Wall is currently running on Heroku and is i-framed into WordPress on its landing page. The Life is Good team also built a simple moderation application so that their team can easily approve or delete User Generated Content as it flows in. They also built client-side moderation during content entry, which checks against a banned list of words and blocks submission.



"Cosmic provided us with a robust scaffolding to accept, store, and moderate User Generated Content and display it in a custom web app in real time. With Cosmic, we were able to develop an MVP in a matter of hours and focus our resources on UX and design versus content management. The Cosmic Support Team was extremely helpful throughout the process. We’re excited to leverage these tools again for future projects.”

— Chris Schwab, Front End Engineer  

","metafields":[{"value":"Life is Good","key":"company","title":"Company","type":"text","children":null},{"value":"Ecommerce | Apparel","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Spread the power of optimism. In that spirit, the Life is Good team built a Gratitude Wall for some user-generated-thanksgiving. This widget will allow users to add \"sticky notes\" with their name and what they are grateful for to the gratitude board. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg","imgix_url":"https://imgix.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2017-10-28T14:55:56.103Z","created_by":"5716b504e9c686d006000073","created":"2017-10-28T14:55:56.103Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2019-07-25T21:53:35.289Z"}]},{"repeater_fields":[{"title":"Slug","key":"slug","value":"","type":"text","required":false}],"value":"vue-ecommerce-app","key":"app_slugs","title":"App Slugs","type":"repeater","children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"vue-ecommerce-app","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"gatsby-ecommerce-website","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"ecommerce-personalization","type":"text","required":false}]}]},{"repeater_fields":[{"title":"Slug","key":"slug","value":"","type":"text","required":false}],"value":"amazon-product-search","key":"extension_slugs","title":"Extension SLugs","type":"repeater","children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"amazon-product-search","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"export-to-csv","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"product-manager","type":"text","required":false}]}]},{"value":"\"Cosmic JS allowed us to easily integrate dynamic content into our website. The product is a great value for your money. This is especially true given that their customer service is top-notch.\"","key":"testimonial","title":"Testimonial","type":"textarea","children":null},{"value":"Harrie Pieters, Web Developer at Bookabus","key":"testimonial_credit","title":"Testimonial Credit","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"solutions","created_at":"2019-08-05T20:18:17.006Z","created_by":"5716b504e9c686d006000073","modified_at":"2019-08-07T15:51:55.480Z","created":"2019-08-07T15:44:21.947Z","status":"published","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2019-08-07T15:51:55.480Z","metadata":{"solution_name":"CMS Software for Ecommerce Websites","image":{"url":"https://cdn.cosmicjs.com/5b8db790-b92a-11e9-bf89-df8d6377231e-d03eb2f0-9f54-11e9-ac09-4be8a5631b5e-6845e0b0-4235-11e8-86fe-0b7f31f36651-Screen-Shot-2018-04-17-at-6.48.12-AM.png","imgix_url":"https://imgix.cosmicjs.com/5b8db790-b92a-11e9-bf89-df8d6377231e-d03eb2f0-9f54-11e9-ac09-4be8a5631b5e-6845e0b0-4235-11e8-86fe-0b7f31f36651-Screen-Shot-2018-04-17-at-6.48.12-AM.png"},"case_studies":[{"_id":"59663607a6a3f55962000e40","slug":"big-fish-launches-marketing-and-tutorial-content-for-games","title":"Big Fish Launches Marketing and Tutorial Content for Games","content":"

When Big Fish launches a new game for iOS, Android, or Web, they use a marketing landing page to promote the launch. Big Fish wanted their game studios to have the ability to curate and update content on each of their landing pages. Other CMS systems weren’t as flexible enough for their needs. Cosmic provides Big Fish with more creative freedom to build landing pages while allowing game studios to make updates on their own.




"We use Cosmic buckets for each of our mobile game landing pages. While our API and storage usage is low, the number of buckets we need is high, which makes the new Clusters Feature a perfect solution for our company use cases. It allows us to\r\nhave a single consolidated invoice, with an overall API and data-limit, but up to 35 buckets for our use."

— Jessica Chappell, Web Developer 

Read more about Big Fish and their games.

","metafields":[{"value":"Big Fish","key":"company","title":"Company","type":"text","children":null},{"value":"Gaming","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"When Big Fish launches a new game for iOS, Android, or Web, they use a marketing landing page to promote the launch. Other CMS systems weren’t as flexible enough for their needs. Cosmic provides Big Fish with more creative freedom to build landing pages while allowing game studios to make updates on their own.\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png","imgix_url":"https://imgix.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created":"2017-07-12T14:45:27.402Z","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","status":"published","publish_at":null,"published_at":"2018-11-08T23:15:38.911Z","metadata":{"company":"Big Fish","industry_type":"Gaming","teaser":"When Big Fish launches a new game for iOS, Android, or Web, they use a marketing landing page to promote the launch. Other CMS systems weren’t as flexible enough for their needs. Cosmic provides Big Fish with more creative freedom to build landing pages while allowing game studios to make updates on their own.\n","logo":{"url":"https://cdn.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png","imgix_url":"https://imgix.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png"}}},{"_id":"5aa7cd8c3078516dd48d6ad2","slug":"bookabus-builds-a-localized-transportation-website","title":"Bookabus Builds a Localized Transportation Website","content":"

Bookabus is an innovative start-up in the travel and mobility industry, serving as one of the largest coach hire and bus rental booking services in Europe. Whether it’s a day trip with 20 people or a large-scale event with 500 people, Bookabus, together with its partners, ensures a carefree and high-quality travel experience for groups and events. 



Bookabus needed a new website to communicate their transport routes, terms and marketing materials.  A big requirement was the ability to localize their content into different languages for the different areas they're servicing, including the UK, Netherlands, Germany, Spain, and Belgium.  They chose to build their new transportation website with Cosmic because of the ease of use and powerful localization capabilities.



"Cosmic allowed us to easily integrate dynamic content into our website. The product is a great value for your money. This is especially true given that their customer service is top-notch."

— Harrie Pieters, Web Developer 

","metafields":[{"value":"Bookabus","key":"company","title":"Company","type":"text","children":null},{"value":"Transportation","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Bookabus is an innovative start-up in the travel and mobility industry, serving as one of the largest coach hire and bus rental booking services in Europe. Whether it’s a day trip with 20 people or a large-scale event with 500 people, Bookabus, together with its partners, ensures a carefree and high-quality travel experience for groups and events. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"61777d70-26bf-11e8-808d-f7104bba2cfa-7bb0413cfa3f2b5a11182ebb782aa208.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/61777d70-26bf-11e8-808d-f7104bba2cfa-7bb0413cfa3f2b5a11182ebb782aa208.png","imgix_url":"https://imgix.cosmicjs.com/61777d70-26bf-11e8-808d-f7104bba2cfa-7bb0413cfa3f2b5a11182ebb782aa208.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-03-13T13:09:32.089Z","created_by":"5716b504e9c686d006000073","created":"2018-03-13T13:09:32.089Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-04-19T21:23:26.384Z","metadata":{"company":"Bookabus","industry_type":"Transportation","teaser":"Bookabus is an innovative start-up in the travel and mobility industry, serving as one of the largest coach hire and bus rental booking services in Europe. Whether it’s a day trip with 20 people or a large-scale event with 500 people, Bookabus, together with its partners, ensures a carefree and high-quality travel experience for groups and events. \n","logo":{"url":"https://cdn.cosmicjs.com/61777d70-26bf-11e8-808d-f7104bba2cfa-7bb0413cfa3f2b5a11182ebb782aa208.png","imgix_url":"https://imgix.cosmicjs.com/61777d70-26bf-11e8-808d-f7104bba2cfa-7bb0413cfa3f2b5a11182ebb782aa208.png"}}},{"_id":"59f49a7cee2adb545c0005bc","slug":"life-is-good-shares-gratitude","title":"Life is Good Shares Gratitude","content":"

The Life is Good community shares one simple, unifying mission: to spread the power of optimism. In that spirit, the Life is Good team built a Gratitude Wall for some user-generated-thanksgiving. This widget will allow users to add "sticky notes" with their name and what they are grateful for to the gratitude board. 



The Gratitude Wall is adapted from the Cosmic Sticky Notes App, built on React, Redux and Node.js. The Wall is currently running on Heroku and is i-framed into WordPress on its landing page. The Life is Good team also built a simple moderation application so that their team can easily approve or delete User Generated Content as it flows in. They also built client-side moderation during content entry, which checks against a banned list of words and blocks submission.



"Cosmic provided us with a robust scaffolding to accept, store, and moderate User Generated Content and display it in a custom web app in real time. With Cosmic, we were able to develop an MVP in a matter of hours and focus our resources on UX and design versus content management. The Cosmic Support Team was extremely helpful throughout the process. We’re excited to leverage these tools again for future projects.”

— Chris Schwab, Front End Engineer  

","metafields":[{"value":"Life is Good","key":"company","title":"Company","type":"text","children":null},{"value":"Ecommerce | Apparel","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Spread the power of optimism. In that spirit, the Life is Good team built a Gratitude Wall for some user-generated-thanksgiving. This widget will allow users to add \"sticky notes\" with their name and what they are grateful for to the gratitude board. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg","imgix_url":"https://imgix.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2017-10-28T14:55:56.103Z","created_by":"5716b504e9c686d006000073","created":"2017-10-28T14:55:56.103Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2019-07-25T21:53:35.289Z","metadata":{"company":"Life is Good","industry_type":"Ecommerce | Apparel","teaser":"Spread the power of optimism. In that spirit, the Life is Good team built a Gratitude Wall for some user-generated-thanksgiving. This widget will allow users to add \"sticky notes\" with their name and what they are grateful for to the gratitude board. \n","logo":{"url":"https://cdn.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg","imgix_url":"https://imgix.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg"}}}],"app_slugs":[{"slug":"vue-ecommerce-app"},{"slug":"gatsby-ecommerce-website"},{"slug":"ecommerce-personalization"}],"extension_slugs":[{"slug":"amazon-product-search"},{"slug":"export-to-csv"},{"slug":"product-manager"}],"testimonial":"\"Cosmic JS allowed us to easily integrate dynamic content into our website. The product is a great value for your money. This is especially true given that their customer service is top-notch.\"","testimonial_credit":"Harrie Pieters, Web Developer at Bookabus"}},{"_id":"538a102b3ff8db6d77000001","slug":"features","title":"Features","content":"

Cosmic JS Features

Built for developers

It's the job of the developer to create an easy content management system and Cosmic JS makes the developer's job so much easier.  Structure the content with ease, label fields, and let the client sing your praises for how easy it is to update their site's content.

Develop in any language

Developers will love our openness and simple API and clients will love the easy-to-use backend to manage their content.

Using the Cosmic JS API, content can be accessed from anywhere and written in any language Angular, Node.js, Ruby on Rails, PHP.


Media library

Drag and drop your files into your bucket's objects and media library.  All file formats are accepted.

Metafields

Objects in your Cosmic JS buckets are able to handle nested metafields.  Great for storing arrays and loops of items.


Multiple Users

Add multiple users to your buckets to manage your content within your team.

Copy Buckets

Copy your existing bucket to a new bucket instantly for development, staging or production instances.

","metafields":[],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"pages","created":"2014-05-31T17:23:55.351Z","order":14,"modified":"2015-04-03T03:20:01.775Z","files":"","metadata":null},{"_id":"5b86a2c6016461100076e5c7","order":14,"slug":"consolidating-the-content-chaos-tac-switches-from-wordpress-to-cosmic-js","title":"Consolidating the Content Chaos: TAC Switches from WordPress to Cosmic","content":"

TAC - The Arnold Companies is among the largest fuel wholesalers and aviation service providers in the country. Steady growth, positive financial results and a diverse industry base consistently make TAC one of the top private companies in the US. TAC is made up of many separate brands under one corporate identity, including TAC Energy, TAC Air and Keystone Aviation. 



With TAC's old website built as stand-alone sites that linked to each other on a WordPress foundation, the user experience was over-complicated and required too many steps for visitors to find what they were looking for. Being WordPress-based, it did not allow for clear information architecture to promote the different business lines within the portfolio. 

Through a structured RFP process to identify a partner in re-thinking the customer experience and content management system, interactive agency Simple Media and Cosmic were selected. Other platform options included WordPress, Drupal, and Joomla. 

Focused on building with a mobile-first approach and consolidating the chaos of the existing number of brand sites to bring harmony to the four brands and ease-of-use in content management, TAC found an outstanding and simple solution in Cosmic. 



To learn more about the development, Brandon Reid, Lead Developer on the project breaks down the stack: 

Development Team: "TAC’s backend is powered by Node, Next.js, and Express. Next.js is used for server side rendering capabilities for SEO optimization as well as site routing. Next.js also makes it easy to integrate with Babel and Webpack since they are built right in. The team used Next.js routing API to rendering page templates for pages that have the same design layouts. TAC’s frontend is powered by React.js and the world's most popular react UI framework, Material UI. In order to use Material UI with SSR, the team had to wrap the site in a JSSProvider and use CSSBaseline. For development they used Eslint as a linter for a cleaner and more consistent codebase. 



Since TAC uses ES6 JavaScript, the team had to also implement a very small amount of polyfill to transpile ES6 to ES5 in order for the site to work with IE11. Some notable node modules used were: 



TAC's development team started building the site by using Cosmic’s React Starter, which helped them get jump-started right away. Building TAC started with implementing all globals for the site (Header, Footer, Favicon, etc), so the developers quickly created some JavaScript request functions to pull data from the Cosmic Buckets using Cosmic’s Node API. The team added those global components to the sites main _app layout, so every page would be wrapped and rendered with those globals. From there they analyzed what pages would have reusable components across multiple pages or the site, and created component views for those pages based off their analysis. 

TAC was then able to efficiently knock out page designs and implement object types in the Cosmic bucket on the fly. As TAC got closer to site launch, they noticed compatibility issues with IE11 and had to come up with a solution. At first, they were going to do a browser sniff in the codebase to display something that would work on IE. Instead, the team implemented Babel and some polyfills to solve their  compatibility issues."





"Our goal in this project was not to reinvent the brands, but to simplify the communication and process for website content management. Cosmic has allowed us to become current in our presentation and relevant in our content push. Plus, the site is easier to use for visitors and staff alike."

— Tad Perryman, VP of Marketing, TAC - The Arnold Companies

","metafields":[{"value":"The Arnold Companies","key":"company","title":"Company","type":"text","children":null},{"value":"Energy / Aviation","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"TAC - The Arnold Companies is among the largest fuel wholesalers and aviation service providers in the country. Steady growth, positive financial results and a diverse industry base consistently make TAC one of the top private companies in the US. TAC is made up of many separate brands under one corporate identity, including TAC Energy, TAC Air and Keystone Aviation. \n\n\n\n\n\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"9aaed6c0-b04d-11e8-8760-cbfd96ceee1a-30210740-966e-11e8-ab08-31f1ed4cd97d-tac-full-logo.svg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/9aaed6c0-b04d-11e8-8760-cbfd96ceee1a-30210740-966e-11e8-ab08-31f1ed4cd97d-tac-full-logo.svg","imgix_url":"https://imgix.cosmicjs.com/9aaed6c0-b04d-11e8-8760-cbfd96ceee1a-30210740-966e-11e8-ab08-31f1ed4cd97d-tac-full-logo.svg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-03-01T22:26:36.367Z","created_by":"5716b504e9c686d006000073","created":"2018-08-29T13:42:30.982Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-12-20T14:40:21.379Z","metadata":{"company":"The Arnold Companies","industry_type":"Energy / Aviation","teaser":"TAC - The Arnold Companies is among the largest fuel wholesalers and aviation service providers in the country. Steady growth, positive financial results and a diverse industry base consistently make TAC one of the top private companies in the US. TAC is made up of many separate brands under one corporate identity, including TAC Energy, TAC Air and Keystone Aviation. \n\n\n\n\n\n","logo":{"url":"https://cdn.cosmicjs.com/9aaed6c0-b04d-11e8-8760-cbfd96ceee1a-30210740-966e-11e8-ab08-31f1ed4cd97d-tac-full-logo.svg","imgix_url":"https://imgix.cosmicjs.com/9aaed6c0-b04d-11e8-8760-cbfd96ceee1a-30210740-966e-11e8-ab08-31f1ed4cd97d-tac-full-logo.svg"}}},{"_id":"590b73ff200ca2723f002d01","order":14,"slug":"freddie-ridell","title":"Freddie Ridell","content":"","metafields":[{"value":"2d96a700-30f8-11e7-8b84-cbc54315248d-freddie.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/2d96a700-30f8-11e7-8b84-cbc54315248d-freddie.jpg","imgix_url":"https://imgix.cosmicjs.com/2d96a700-30f8-11e7-8b84-cbc54315248d-freddie.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-05-04T18:33:35.138Z","created_by":"5357ef811693be2118000001","created":"2017-05-04T18:33:35.138Z","status":"published","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/2d96a700-30f8-11e7-8b84-cbc54315248d-freddie.jpg","imgix_url":"https://imgix.cosmicjs.com/2d96a700-30f8-11e7-8b84-cbc54315248d-freddie.jpg"}}},{"_id":"5f38301c03a87500083c2b88","order":14,"slug":"image-api-and-cdn","title":"Image API and CDN","content":"","metafields":[{"children":null,"type":"file","title":"Image","key":"image","id":"SAYlN9ZKxJ","value":"57632530-df29-11ea-be1a-2fbf26518583-image-api-cdn.svg","url":"https://cdn.cosmicjs.com/57632530-df29-11ea-be1a-2fbf26518583-image-api-cdn.svg","imgix_url":"https://imgix.cosmicjs.com/57632530-df29-11ea-be1a-2fbf26518583-image-api-cdn.svg"},{"children":null,"type":"file","title":"Thumbnail","key":"thumbnail","id":"DMwEbHAkSz","value":"7d9f8180-df29-11ea-be1a-2fbf26518583-image-api-cdn.png","url":"https://cdn.cosmicjs.com/7d9f8180-df29-11ea-be1a-2fbf26518583-image-api-cdn.png","imgix_url":"https://imgix.cosmicjs.com/7d9f8180-df29-11ea-be1a-2fbf26518583-image-api-cdn.png"},{"children":null,"type":"html-textarea","title":"Blurb","key":"blurb","id":"9lYBGinRrX","value":"

Cosmic provides the best image API and CDN for your websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

"},{"children":null,"type":"text","title":"Headline","key":"headline","id":"0S89B9aDxR","value":"Image API and CDN"},{"children":null,"type":"text","title":"SEO Description","key":"seo_description","id":"PHK2A1iqkJ","value":"Cosmic provides the best image API and CDN for your websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators."},{"children":null,"type":"file","title":"Twitter Card Image","key":"twitter_card_image","id":"nL0hsXTcu7","value":"7d9f8180-df29-11ea-be1a-2fbf26518583-image-api-cdn.png","url":"https://cdn.cosmicjs.com/7d9f8180-df29-11ea-be1a-2fbf26518583-image-api-cdn.png","imgix_url":"https://imgix.cosmicjs.com/7d9f8180-df29-11ea-be1a-2fbf26518583-image-api-cdn.png"},{"children":null,"type":"html-textarea","title":"Code Example","key":"code_example","id":"drtHtq2t0L","value":""},{"children":null,"type":"text","title":"SEO Title","key":"seo_title","id":"R5R6rq2Rd5","value":"Best Headless CMS Image API and CDN"},{"children":[],"type":"repeater","title":"Videos","key":"videos","id":"7AMwlbABO6","value":"","repeater_fields":[{"title":"Title","key":"title","value":"","type":"text","required":false},{"title":"Link","key":"link","value":"","type":"text","required":false}]},{"children":null,"type":"html-textarea","title":"Page Overview","key":"page_overview","id":"IGvJlHUd4j","value":"

Cosmic headless CMS makes it easy to manage and deliver images reliably via our API and global CDN. Use the Cosmic API and media management dashboard to manage media to be delivered to various websites, applications, and platforms using our global CDN. Cosmic headless CMS API is cross-compatible, future-proof, extensible, scalable, and robust. We provide coded Image API and CDN examples as starters to facilitate different purposes and use cases. Cosmic resources also provide more in-depth guidance on getting the most out of Cosmic headless CMS to facilitate specific Image API and CDN needs.

"},{"children":null,"type":"html-textarea","title":"SEO Content","key":"seo_content","id":"qXeb6lleXB","value":""},{"children":null,"type":"text","title":"Apps Search Term","key":"apps_search_term","id":"v95tq5i2enaf3oreecdk","value":"react"},{"children":null,"type":"text","title":"Articles Search Term","key":"articles_search_term","id":"apps_search_term_kef9yhcej8gy","value":"react"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"kb-articles","created_at":"2020-08-15T18:57:32.609Z","created_by":"5357ef811693be2118000001","created":"2020-08-15T18:57:32.609Z","status":"published","modified_at":"2020-08-15T19:23:54.771Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2020-08-15T19:23:54.771Z","metadata":{"image":{"url":"https://cdn.cosmicjs.com/57632530-df29-11ea-be1a-2fbf26518583-image-api-cdn.svg","imgix_url":"https://imgix.cosmicjs.com/57632530-df29-11ea-be1a-2fbf26518583-image-api-cdn.svg"},"thumbnail":{"url":"https://cdn.cosmicjs.com/7d9f8180-df29-11ea-be1a-2fbf26518583-image-api-cdn.png","imgix_url":"https://imgix.cosmicjs.com/7d9f8180-df29-11ea-be1a-2fbf26518583-image-api-cdn.png"},"blurb":"

Cosmic provides the best image API and CDN for your websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

","headline":"Image API and CDN","seo_description":"Cosmic provides the best image API and CDN for your websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.","twitter_card_image":{"url":"https://cdn.cosmicjs.com/7d9f8180-df29-11ea-be1a-2fbf26518583-image-api-cdn.png","imgix_url":"https://imgix.cosmicjs.com/7d9f8180-df29-11ea-be1a-2fbf26518583-image-api-cdn.png"},"code_example":"","seo_title":"Best Headless CMS Image API and CDN","videos":[],"page_overview":"

Cosmic headless CMS makes it easy to manage and deliver images reliably via our API and global CDN. Use the Cosmic API and media management dashboard to manage media to be delivered to various websites, applications, and platforms using our global CDN. Cosmic headless CMS API is cross-compatible, future-proof, extensible, scalable, and robust. We provide coded Image API and CDN examples as starters to facilitate different purposes and use cases. Cosmic resources also provide more in-depth guidance on getting the most out of Cosmic headless CMS to facilitate specific Image API and CDN needs.

","seo_content":"","apps_search_term":"react","articles_search_term":"react"}},{"_id":"60426fa16036bf0007d6f464","order":14,"slug":"graphql-npm-cli-dashboard-updates-and-more","title":"Docs updates + GraphQL + NPM + CLI updates","content":"

We have some exciting updates to share with you which includes:

  1. Documentation improvements: Client tabs, better nav, and more
  2. New versions of the GraphQL, NPM, and CLI clients
  3. New GraphQL API Postman collection
  4. Ability to ignore the cache (handy for real-time updates)
  5. Dashboard updates

Read more about the updates below, or jump over to the updated docs to get started. Go to the docs →


Updates

1. Documentation
Our new documentation website just got a lot better. We've added new tabs to show you the multiple methods for each resource including REST, Node.js, GraphQL, and the CLI.


2. New client versions
We have new GraphQL API (v3), NPM (v4), and CLI (v2) versions available that parallel the new features in the REST API v2 and follow the same request and response formats. See the docs changelog for the updates.


3. Postman collection for GraphQL API
Along with the REST API, we now have a Postman collection for the GraphQL API.

4. Ignore cache (real-time updates)
You can now ignore the cache for your API requests by setting use_cache=false as a query parameter in your GET requests. Why would you want to ignore our globally-fast CDN? This is helpful if you are doing real-time updates. For example, if you make an update to Object and immediately want to return the updated Object (as the cache takes ~200ms to purge).


5. Dashboard quality of life improvements
We've updated the Bucket settings page to include links to each section. We think this is a more helpful way to organize your Bucket settings.


We hope you enjoy these new updates. Head over to the new documentation site to check out all of these updates. And ping us in Slack if you have any questions.

","metafields":[{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"pytNiRUzfw","value":"2021-03-16"},{"children":null,"type":"object","title":"Author","key":"author","id":"OY63TNMwxv","value":"5ffa1d1e0046b0000799cb7b","object_type":"authors","object":{"_id":"5ffa1d1e0046b0000799cb7b","slug":"cosmic","title":"Cosmic","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"ZogvxZg6OL","value":""},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D0qLJ4RPBe","value":"10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2021-01-09T21:16:14.533Z","created_by":"5357ef811693be2118000001","modified_at":"2021-01-09T21:18:26.147Z","created":"2021-01-09T21:16:14.533Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/e55ef990-52bf-11eb-986d-4d7ff5faa3ab-logo.svg","published_at":"2021-01-09T21:18:26.147Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null}},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"1h1W4hvtNz","value":"","url":null,"imgix_url":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"changelogs","created_at":"2021-03-05T17:51:29.326Z","created_by":"5357ef811693be2118000001","modified_at":"2021-03-16T17:02:28.330Z","created":"2021-03-05T17:51:29.326Z","status":"published","thumbnail":"","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2021-03-16T17:02:28.330Z","metadata":{"published_date":"2021-03-16","author":{"_id":"5ffa1d1e0046b0000799cb7b","slug":"cosmic","title":"Cosmic","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"ZogvxZg6OL","value":""},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D0qLJ4RPBe","value":"10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2021-01-09T21:16:14.533Z","created_by":"5357ef811693be2118000001","modified_at":"2021-01-09T21:18:26.147Z","created":"2021-01-09T21:16:14.533Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/e55ef990-52bf-11eb-986d-4d7ff5faa3ab-logo.svg","published_at":"2021-01-09T21:18:26.147Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"metadata":{"username":"","profile_picture":{"url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}}},"featured_image":{"url":null,"imgix_url":null}}},{"_id":"5bad1cbd8cf9137794f3c4b1","slug":"google-sheets","title":"Google Sheets","content":"","metafields":[{"children":null,"type":"text","title":"Link","key":"link","id":"vdvxNNzdk5","value":"https://cosmicjs.com/articles/integrating-cosmic-powered-content-with-your-favorite-apps-using-zapier-jmm49t8k"},{"children":null,"type":"file","title":"Image","key":"image","id":"L3kVyHbARz","value":"5954ef00-8ed8-11ea-910b-435199f15a39-sheets.jpg","url":"https://cdn.cosmicjs.com/5954ef00-8ed8-11ea-910b-435199f15a39-sheets.jpg","imgix_url":"https://imgix.cosmicjs.com/5954ef00-8ed8-11ea-910b-435199f15a39-sheets.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"integrations","created":"2018-09-27T18:09:01.496Z","created_at":"2018-09-27T18:09:01.496Z","modified_at":"2020-05-05T13:57:27.923Z","status":"published","locale":null,"published_at":"2020-05-05T13:57:27.923Z","created_by":"5357ef811693be2118000001","order":14,"modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"metadata":{"link":"https://cosmicjs.com/articles/integrating-cosmic-powered-content-with-your-favorite-apps-using-zapier-jmm49t8k","image":{"url":"https://cdn.cosmicjs.com/5954ef00-8ed8-11ea-910b-435199f15a39-sheets.jpg","imgix_url":"https://imgix.cosmicjs.com/5954ef00-8ed8-11ea-910b-435199f15a39-sheets.jpg"}}},{"_id":"61abfcf080e39b0008e12be6","order":14,"slug":"new-dashboard-alpha-release","title":"New Dashboard Alpha Release","content":"

After months of painstaking design, development, and testing, we are excited to announce the release of the new Cosmic Dashboard! We have rebuilt the dashboard from the ground up and you can now be one of the first to test it in a private alpha release. See the preview below.

The new Cosmic Dashboard 😍

To get started, go to the Cosmic Dashboard Alpha Landing Page and add your email to join the waiting list. After joining, you can then share your special referral link with friends and colleagues to get bumped up the list!

Once we let you in, there are some important things to keep in mind...

The new dashboard is connected to a staging database
You will be able to create new accounts and test the dashboard functionality, but you should not use this for any production website or apps. Though the data may be removed at any time, we will be sure to let you know if / when this happens so it's\r\nnot a surprise.

Some features are not available yet
We will be keeping a list in a Notion document for you to learn about available features, limitations, and progress on the latest additions.

You can import your Buckets from the old dashboard into the new one
To make testing your current workflows straightforward, we have enabled the Import feature in the Bucket settings area. This way you can test your current Bucket use cases and provide us feedback on how it's working for you so we can make sure it's\r\ngoing to be a smooth transition!

We are excited to share with you the next evolution of Cosmic. The dashboard reflects the hard work and detail we put into making Cosmic the best content management solution in the world. We are grateful for your support, patience, and feedback as we continue to provide you with the best tools to collaborate around your content.

The next step is to sign up on the Cosmic Dashboard Alpha Landing Page. After that, we will let you know when you're ready to get in. If you have any questions, please reach out to us on Twitter and join our community on Slack.

Thank you,
The Cosmic Team

","metafields":[{"children":null,"type":"object","title":"Author","key":"author","id":"17RoFZdu0E","value":"5ffa1d1e0046b0000799cb7b","required":true,"object_type":"authors","object":{"_id":"5ffa1d1e0046b0000799cb7b","slug":"cosmic","title":"Cosmic","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"ZogvxZg6OL","value":""},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D0qLJ4RPBe","value":"10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2021-01-09T21:16:14.533Z","created_by":"5357ef811693be2118000001","modified_at":"2021-01-09T21:18:26.147Z","created":"2021-01-09T21:16:14.533Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/e55ef990-52bf-11eb-986d-4d7ff5faa3ab-logo.svg","published_at":"2021-01-09T21:18:26.147Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null}},{"children":null,"type":"html-textarea","title":"Teaser","key":"teaser","id":"x2ugNCc2JE","value":"

After months of painstaking design, development, and testing, we are excited to announce the release of the new Cosmic Dashboard! We have rebuilt the dashboard from the ground up and you can now be one of the first to test it in a private alpha release.

"},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"Jixxyqo18n","value":"630be980-555c-11ec-a190-2972d74ddd9f-cosmic-alpha.png","url":"https://cdn.cosmicjs.com/630be980-555c-11ec-a190-2972d74ddd9f-cosmic-alpha.png","imgix_url":"https://imgix.cosmicjs.com/630be980-555c-11ec-a190-2972d74ddd9f-cosmic-alpha.png"},{"children":null,"type":"textarea","title":"SEO Meta Description","key":"seo_meta_description","id":"V2Zng32oK6","value":"After months of painstaking design, development, and testing, we are excited to announce the release of the new Cosmic Dashboard!"},{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"eBjUuMbuol","value":"2021-12-07"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2021-12-04T23:42:40.076Z","created_by":"5357ef811693be2118000001","modified_at":"2021-12-07T17:14:12.925Z","created":"2021-12-04T23:42:40.076Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/630be980-555c-11ec-a190-2972d74ddd9f-cosmic-alpha.png","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2021-12-07T17:14:12.925Z","metadata":{"author":{"_id":"5ffa1d1e0046b0000799cb7b","slug":"cosmic","title":"Cosmic","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"ZogvxZg6OL","value":""},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D0qLJ4RPBe","value":"10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2021-01-09T21:16:14.533Z","created_by":"5357ef811693be2118000001","modified_at":"2021-01-09T21:18:26.147Z","created":"2021-01-09T21:16:14.533Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/e55ef990-52bf-11eb-986d-4d7ff5faa3ab-logo.svg","published_at":"2021-01-09T21:18:26.147Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"metadata":{"username":"","profile_picture":{"url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}}},"teaser":"

After months of painstaking design, development, and testing, we are excited to announce the release of the new Cosmic Dashboard! We have rebuilt the dashboard from the ground up and you can now be one of the first to test it in a private alpha release.

","featured_image":{"url":"https://cdn.cosmicjs.com/630be980-555c-11ec-a190-2972d74ddd9f-cosmic-alpha.png","imgix_url":"https://imgix.cosmicjs.com/630be980-555c-11ec-a190-2972d74ddd9f-cosmic-alpha.png"},"seo_meta_description":"After months of painstaking design, development, and testing, we are excited to announce the release of the new Cosmic Dashboard!","published_date":"2021-12-07"}},{"_id":"5dca00d2eb43f80008471677","slug":"cms-for-netlify-websites","title":"CMS for Netlify Websites","content":"

Cosmic JS integrates brilliantly with your Netlify-powered JAMstack website. We offer lots of options to integrate Cosmic JS content into your static website. Browse some of our example websites and see helpful resources below.

About JAMstack
JAMstack is comprised of a JavaScript-powered frontend for page interactions (J), APIs to connect to various APIs to get 3rd party functionality (A) and plain old Markup (HTML) which gets deployed to your instance (M).

Cosmic JS is the leading CMS for modern digital projects, including JAMstack apps and static websites. Install the Official Cosmic JS JavaScript Client to integrate content into your app in minutes.  Get a feel for Cosmic JS by taking a spin through our apps and check out the tutorials below


Static Website + Cosmic JS Videos


Using Cosmic JS as a Headless CMS with Gatsby

\">

Build a Cosmic JS-powered blog using Gatsby

\">

Webinar: Localization with Cosmic JS and Gatsby

\">


Netlify Articles

Netlify + Gatsby + Cosmic JS + Automatic builds with Webhooks
How to deploy a blog using Cosmic JS + Vuetify to Netlify
JAMstack articles in the Cosmic JS Community
How to Build a JAMstack Website
API-Powered Static Website
How to Build an API-Powered Static Website

Netlify Resources

Netlify Cosmic JS template
HeadlessCMS.org Docs
Cosmic JS Docs
Official JavaScript Client
Cosmic JS GitHub

Examples

npm i cosmicjs

Then in your JavaScript file, get your content:

\">
","metafields":[{"children":null,"type":"file","title":"Image","key":"image","id":"wPioRfJuSa","value":"8951fe30-04e7-11ea-944c-cfd32d7bf8a6-full-logo-light.jpg","url":"https://cdn.cosmicjs.com/8951fe30-04e7-11ea-944c-cfd32d7bf8a6-full-logo-light.jpg","imgix_url":"https://imgix.cosmicjs.com/8951fe30-04e7-11ea-944c-cfd32d7bf8a6-full-logo-light.jpg"},{"children":null,"type":"file","title":"Thumbnail","key":"thumbnail","id":"tlDTyAPGhC","value":"5f42c7f0-04e7-11ea-95fe-01afbd7f5f3b-logomark.jpg","url":"https://cdn.cosmicjs.com/5f42c7f0-04e7-11ea-95fe-01afbd7f5f3b-logomark.jpg","imgix_url":"https://imgix.cosmicjs.com/5f42c7f0-04e7-11ea-95fe-01afbd7f5f3b-logomark.jpg"},{"children":null,"type":"html-textarea","title":"Blurb","key":"blurb","id":"WsaWBeIh6X","value":"

Cosmic is the best CMS for Netlify websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

"},{"children":null,"type":"text","title":"Headline","key":"headline","id":"4FPJLdn7bO","value":"Netlify"},{"children":null,"type":"text","title":"SEO Description","key":"seo_description","id":"qwuiNbkgCC","value":"Cosmic is the best CMS for Netlify websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators."},{"children":null,"type":"file","title":"Twitter Card Image","key":"twitter_card_image","id":"1iMaUIVHg4","value":"8ec78ba0-04e7-11ea-944c-cfd32d7bf8a6-full-logo-light.jpg","url":"https://cdn.cosmicjs.com/8ec78ba0-04e7-11ea-944c-cfd32d7bf8a6-full-logo-light.jpg","imgix_url":"https://imgix.cosmicjs.com/8ec78ba0-04e7-11ea-944c-cfd32d7bf8a6-full-logo-light.jpg"},{"children":null,"type":"html-textarea","title":"Code Example","key":"code_example","id":"Uzi3BHM82h","value":""},{"children":null,"type":"text","title":"SEO Title","key":"seo_title","id":"NprpWo8O0V","value":"Best Headless CMS for Netlify Websites"},{"children":[],"type":"repeater","title":"Videos","key":"videos","id":"frgtgqfrpylludl8pnsi","value":"","repeater_fields":[{"title":"Title","key":"title","value":"","type":"text","required":false},{"title":"Link","key":"link","value":"","type":"text","required":false}]}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"kb-articles","created":"2019-11-12T00:46:10.148Z","created_at":"2017-10-19T03:50:16.379Z","modified_at":"2020-06-27T19:16:09.954Z","created_by":"5357ef811693be2118000001","modified_by":"5357ef811693be2118000001","status":"published","publish_at":null,"order":15,"published_at":"2020-06-27T19:16:09.954Z","unpublish_at":null,"metadata":{"image":{"url":"https://cdn.cosmicjs.com/8951fe30-04e7-11ea-944c-cfd32d7bf8a6-full-logo-light.jpg","imgix_url":"https://imgix.cosmicjs.com/8951fe30-04e7-11ea-944c-cfd32d7bf8a6-full-logo-light.jpg"},"thumbnail":{"url":"https://cdn.cosmicjs.com/5f42c7f0-04e7-11ea-95fe-01afbd7f5f3b-logomark.jpg","imgix_url":"https://imgix.cosmicjs.com/5f42c7f0-04e7-11ea-95fe-01afbd7f5f3b-logomark.jpg"},"blurb":"

Cosmic is the best CMS for Netlify websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

","headline":"Netlify","seo_description":"Cosmic is the best CMS for Netlify websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.","twitter_card_image":{"url":"https://cdn.cosmicjs.com/8ec78ba0-04e7-11ea-944c-cfd32d7bf8a6-full-logo-light.jpg","imgix_url":"https://imgix.cosmicjs.com/8ec78ba0-04e7-11ea-944c-cfd32d7bf8a6-full-logo-light.jpg"},"code_example":"","seo_title":"Best Headless CMS for Netlify Websites","videos":[]}},{"_id":"5d4a0e7a7b300f1becd985af","order":15,"slug":"cms-software-for-modern-stack-websites","title":"CMS Software for Modern Stack Websites","content":"

Cosmic JS provides flexible CMS Software for teams building modern stack websites. Whether you're building with GraphQL, Serverless technologies or the JAMstack, teams choose to manage content using Cosmic JS CMS Software because the CMS Dashboard is intuitive and developers can build their app however they want. 

Teams using CMS Software to power content for their modern stack websites don't have to maintain their own server and content management system. By focusing on apps and not infrastructure, teams are able to build modern apps faster, together. 


What is Headless CMS Software?

Headless CMS Software works by providing non-technical editors with a Dashboard UI to model, create and publish content while providing developers with API tools and resources to integrate content with any website or app. By decoupling content from code, teams create a central content repository that can power all of their content-powered applications. 

","metafields":[{"value":"CMS Software for Modern Stack Websites","key":"solution_name","title":"Solution Name","type":"text","children":null},{"value":"cb75f9b0-b8a2-11e9-9c18-07a340c60471-abe9e700-9dc2-11e9-a5b4-e5df9f8049d3-tripwire.png","key":"image","title":"Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/cb75f9b0-b8a2-11e9-9c18-07a340c60471-abe9e700-9dc2-11e9-a5b4-e5df9f8049d3-tripwire.png","imgix_url":"https://imgix.cosmicjs.com/cb75f9b0-b8a2-11e9-9c18-07a340c60471-abe9e700-9dc2-11e9-a5b4-e5df9f8049d3-tripwire.png"},{"object_type":"case-studies","value":"59663607a6a3f55962000e40,596663e8880d69fb6c000194,5aa7cd8c3078516dd48d6ad2","key":"case_studies","title":"Case Studies","type":"objects","children":null,"objects":[{"_id":"59663607a6a3f55962000e40","slug":"big-fish-launches-marketing-and-tutorial-content-for-games","title":"Big Fish Launches Marketing and Tutorial Content for Games","content":"

When Big Fish launches a new game for iOS, Android, or Web, they use a marketing landing page to promote the launch. Big Fish wanted their game studios to have the ability to curate and update content on each of their landing pages. Other CMS systems weren’t as flexible enough for their needs. Cosmic provides Big Fish with more creative freedom to build landing pages while allowing game studios to make updates on their own.




"We use Cosmic buckets for each of our mobile game landing pages. While our API and storage usage is low, the number of buckets we need is high, which makes the new Clusters Feature a perfect solution for our company use cases. It allows us to\r\nhave a single consolidated invoice, with an overall API and data-limit, but up to 35 buckets for our use."

— Jessica Chappell, Web Developer 

Read more about Big Fish and their games.

","metafields":[{"value":"Big Fish","key":"company","title":"Company","type":"text","children":null},{"value":"Gaming","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"When Big Fish launches a new game for iOS, Android, or Web, they use a marketing landing page to promote the launch. Other CMS systems weren’t as flexible enough for their needs. Cosmic provides Big Fish with more creative freedom to build landing pages while allowing game studios to make updates on their own.\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png","imgix_url":"https://imgix.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created":"2017-07-12T14:45:27.402Z","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","status":"published","publish_at":null,"published_at":"2018-11-08T23:15:38.911Z"},{"_id":"596663e8880d69fb6c000194","slug":"joblift-elevates-their-stack","title":"Joblift Elevates Their Stack ","content":"

In any bustling economy, a key piece of capital is human capital. When the most precious portion of capital is required, Joblift seeks to connect positions with people. They choose Cosmic to deliver their content via the cloud. 



Joblift manages localized content to serve Job, Press and Blog feeds to its various markets, including the UK, Netherlands and Germany. Easy user roles and permissions equip their team with the tools they need to seamlessly run a global organization. 


"Cosmic has completely sped up our ability to upload our content easily and efficiently. With Cosmic we now have a smooth process for uploading press releases which reflects the quality content on our website.”

— Ashleigh Grady, Content Editor and Marketing Manager

","metafields":[{"value":"Joblift","key":"company","title":"Company","type":"text","children":null},{"value":"Career Services","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"In any bustling economy, a key piece of capital is human capital. When the most precious portion of capital is required, Joblift seeks to connect positions with people. They choose Cosmic to deliver their content via the cloud. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created":"2017-07-12T18:01:12.194Z","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","status":"published","publish_at":null,"published_at":"2018-12-19T21:44:38.361Z"},{"_id":"5aa7cd8c3078516dd48d6ad2","slug":"bookabus-builds-a-localized-transportation-website","title":"Bookabus Builds a Localized Transportation Website","content":"

Bookabus is an innovative start-up in the travel and mobility industry, serving as one of the largest coach hire and bus rental booking services in Europe. Whether it’s a day trip with 20 people or a large-scale event with 500 people, Bookabus, together with its partners, ensures a carefree and high-quality travel experience for groups and events. 



Bookabus needed a new website to communicate their transport routes, terms and marketing materials.  A big requirement was the ability to localize their content into different languages for the different areas they're servicing, including the UK, Netherlands, Germany, Spain, and Belgium.  They chose to build their new transportation website with Cosmic because of the ease of use and powerful localization capabilities.



"Cosmic allowed us to easily integrate dynamic content into our website. The product is a great value for your money. This is especially true given that their customer service is top-notch."

— Harrie Pieters, Web Developer 

","metafields":[{"value":"Bookabus","key":"company","title":"Company","type":"text","children":null},{"value":"Transportation","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Bookabus is an innovative start-up in the travel and mobility industry, serving as one of the largest coach hire and bus rental booking services in Europe. Whether it’s a day trip with 20 people or a large-scale event with 500 people, Bookabus, together with its partners, ensures a carefree and high-quality travel experience for groups and events. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"61777d70-26bf-11e8-808d-f7104bba2cfa-7bb0413cfa3f2b5a11182ebb782aa208.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/61777d70-26bf-11e8-808d-f7104bba2cfa-7bb0413cfa3f2b5a11182ebb782aa208.png","imgix_url":"https://imgix.cosmicjs.com/61777d70-26bf-11e8-808d-f7104bba2cfa-7bb0413cfa3f2b5a11182ebb782aa208.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-03-13T13:09:32.089Z","created_by":"5716b504e9c686d006000073","created":"2018-03-13T13:09:32.089Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-04-19T21:23:26.384Z"}]},{"repeater_fields":[{"title":"Slug","key":"slug","value":"","type":"text","required":false}],"value":"react-graphql-blog","key":"app_slugs","title":"App Slugs","type":"repeater","children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"react-graphql-blog","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"jamstack-fitness-website","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"gatsby-blog","type":"text","required":false}]}]},{"repeater_fields":[{"title":"Slug","key":"slug","value":"","type":"text","required":false}],"value":"imgix-editor","key":"extension_slugs","title":"Extension SLugs","type":"repeater","children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"imgix-editor","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"export-to-csv","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"mux-videos","type":"text","required":false}]}]},{"value":"Cosmic JS allowed us to easily integrate a secure and fast back-end API into our React app. Cosmic fit our needs with its simple web-based dashboard so that members of our marketing team can create, edit, and delete new content on the fly. Our team has been enjoying the ease of use with the new system.\"\n","key":"testimonial","title":"Testimonial","type":"textarea","children":null},{"value":"Owen Liversidge, Lead Developer at Tripwire Interactive","key":"testimonial_credit","title":"Testimonial Credit","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"solutions","created_at":"2019-08-05T20:18:17.006Z","created_by":"5716b504e9c686d006000073","modified_at":"2019-08-06T23:47:00.449Z","created":"2019-08-06T23:34:18.378Z","status":"published","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2019-08-06T23:47:00.449Z","metadata":{"solution_name":"CMS Software for Modern Stack Websites","image":{"url":"https://cdn.cosmicjs.com/cb75f9b0-b8a2-11e9-9c18-07a340c60471-abe9e700-9dc2-11e9-a5b4-e5df9f8049d3-tripwire.png","imgix_url":"https://imgix.cosmicjs.com/cb75f9b0-b8a2-11e9-9c18-07a340c60471-abe9e700-9dc2-11e9-a5b4-e5df9f8049d3-tripwire.png"},"case_studies":[{"_id":"59663607a6a3f55962000e40","slug":"big-fish-launches-marketing-and-tutorial-content-for-games","title":"Big Fish Launches Marketing and Tutorial Content for Games","content":"

When Big Fish launches a new game for iOS, Android, or Web, they use a marketing landing page to promote the launch. Big Fish wanted their game studios to have the ability to curate and update content on each of their landing pages. Other CMS systems weren’t as flexible enough for their needs. Cosmic provides Big Fish with more creative freedom to build landing pages while allowing game studios to make updates on their own.




"We use Cosmic buckets for each of our mobile game landing pages. While our API and storage usage is low, the number of buckets we need is high, which makes the new Clusters Feature a perfect solution for our company use cases. It allows us to\r\nhave a single consolidated invoice, with an overall API and data-limit, but up to 35 buckets for our use."

— Jessica Chappell, Web Developer 

Read more about Big Fish and their games.

","metafields":[{"value":"Big Fish","key":"company","title":"Company","type":"text","children":null},{"value":"Gaming","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"When Big Fish launches a new game for iOS, Android, or Web, they use a marketing landing page to promote the launch. Other CMS systems weren’t as flexible enough for their needs. Cosmic provides Big Fish with more creative freedom to build landing pages while allowing game studios to make updates on their own.\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png","imgix_url":"https://imgix.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created":"2017-07-12T14:45:27.402Z","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","status":"published","publish_at":null,"published_at":"2018-11-08T23:15:38.911Z","metadata":{"company":"Big Fish","industry_type":"Gaming","teaser":"When Big Fish launches a new game for iOS, Android, or Web, they use a marketing landing page to promote the launch. Other CMS systems weren’t as flexible enough for their needs. Cosmic provides Big Fish with more creative freedom to build landing pages while allowing game studios to make updates on their own.\n","logo":{"url":"https://cdn.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png","imgix_url":"https://imgix.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png"}}},{"_id":"596663e8880d69fb6c000194","slug":"joblift-elevates-their-stack","title":"Joblift Elevates Their Stack ","content":"

In any bustling economy, a key piece of capital is human capital. When the most precious portion of capital is required, Joblift seeks to connect positions with people. They choose Cosmic to deliver their content via the cloud. 



Joblift manages localized content to serve Job, Press and Blog feeds to its various markets, including the UK, Netherlands and Germany. Easy user roles and permissions equip their team with the tools they need to seamlessly run a global organization. 


"Cosmic has completely sped up our ability to upload our content easily and efficiently. With Cosmic we now have a smooth process for uploading press releases which reflects the quality content on our website.”

— Ashleigh Grady, Content Editor and Marketing Manager

","metafields":[{"value":"Joblift","key":"company","title":"Company","type":"text","children":null},{"value":"Career Services","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"In any bustling economy, a key piece of capital is human capital. When the most precious portion of capital is required, Joblift seeks to connect positions with people. They choose Cosmic to deliver their content via the cloud. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created":"2017-07-12T18:01:12.194Z","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","status":"published","publish_at":null,"published_at":"2018-12-19T21:44:38.361Z","metadata":{"company":"Joblift","industry_type":"Career Services","teaser":"In any bustling economy, a key piece of capital is human capital. When the most precious portion of capital is required, Joblift seeks to connect positions with people. They choose Cosmic to deliver their content via the cloud. \n","logo":{"url":"https://cdn.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg"}}},{"_id":"5aa7cd8c3078516dd48d6ad2","slug":"bookabus-builds-a-localized-transportation-website","title":"Bookabus Builds a Localized Transportation Website","content":"

Bookabus is an innovative start-up in the travel and mobility industry, serving as one of the largest coach hire and bus rental booking services in Europe. Whether it’s a day trip with 20 people or a large-scale event with 500 people, Bookabus, together with its partners, ensures a carefree and high-quality travel experience for groups and events. 



Bookabus needed a new website to communicate their transport routes, terms and marketing materials.  A big requirement was the ability to localize their content into different languages for the different areas they're servicing, including the UK, Netherlands, Germany, Spain, and Belgium.  They chose to build their new transportation website with Cosmic because of the ease of use and powerful localization capabilities.



"Cosmic allowed us to easily integrate dynamic content into our website. The product is a great value for your money. This is especially true given that their customer service is top-notch."

— Harrie Pieters, Web Developer 

","metafields":[{"value":"Bookabus","key":"company","title":"Company","type":"text","children":null},{"value":"Transportation","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Bookabus is an innovative start-up in the travel and mobility industry, serving as one of the largest coach hire and bus rental booking services in Europe. Whether it’s a day trip with 20 people or a large-scale event with 500 people, Bookabus, together with its partners, ensures a carefree and high-quality travel experience for groups and events. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"61777d70-26bf-11e8-808d-f7104bba2cfa-7bb0413cfa3f2b5a11182ebb782aa208.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/61777d70-26bf-11e8-808d-f7104bba2cfa-7bb0413cfa3f2b5a11182ebb782aa208.png","imgix_url":"https://imgix.cosmicjs.com/61777d70-26bf-11e8-808d-f7104bba2cfa-7bb0413cfa3f2b5a11182ebb782aa208.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-03-13T13:09:32.089Z","created_by":"5716b504e9c686d006000073","created":"2018-03-13T13:09:32.089Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-04-19T21:23:26.384Z","metadata":{"company":"Bookabus","industry_type":"Transportation","teaser":"Bookabus is an innovative start-up in the travel and mobility industry, serving as one of the largest coach hire and bus rental booking services in Europe. Whether it’s a day trip with 20 people or a large-scale event with 500 people, Bookabus, together with its partners, ensures a carefree and high-quality travel experience for groups and events. \n","logo":{"url":"https://cdn.cosmicjs.com/61777d70-26bf-11e8-808d-f7104bba2cfa-7bb0413cfa3f2b5a11182ebb782aa208.png","imgix_url":"https://imgix.cosmicjs.com/61777d70-26bf-11e8-808d-f7104bba2cfa-7bb0413cfa3f2b5a11182ebb782aa208.png"}}}],"app_slugs":[{"slug":"react-graphql-blog"},{"slug":"jamstack-fitness-website"},{"slug":"gatsby-blog"}],"extension_slugs":[{"slug":"imgix-editor"},{"slug":"export-to-csv"},{"slug":"mux-videos"}],"testimonial":"Cosmic JS allowed us to easily integrate a secure and fast back-end API into our React app. Cosmic fit our needs with its simple web-based dashboard so that members of our marketing team can create, edit, and delete new content on the fly. Our team has been enjoying the ease of use with the new system.\"\n","testimonial_credit":"Owen Liversidge, Lead Developer at Tripwire Interactive"}},{"_id":"5bd88cc2dcf8c4248f3ccc4b","order":15,"slug":"tripwire-interactive-builds-a-react-corporate-website","title":"Tripwire Interactive Builds a React Corporate Website","content":"

Tripwire Interactive is an entertainment software developer and publisher founded in 2005 by the award-winning mod team and winners of the 2004 edition of the “$1,000,000 Make Something Unreal” competition.



Gamers want games that grab their attention and will keep them coming back for more. Tripwire Interactive has been producing those types of games since the first Red Orchestra mod that won the "Make Something Unreal" competition in 2004. Since then Tripwire has won numerous Multiplayer and FPS Game of the Year awards from top editorial sites and millions have played a Red Orchestra or Killing Floor game, with an average play time of over 40 hours, per player, per game! 



Historically using an Umbraco system, The Tripwire Interactive team needed an easy way for their marketers to maintain marketing website content for their games' parent brand. Each new game needed a dedicated landing page with marketing content. Blog,\r\nCareer and Press feeds needed to be managed by the marketing team without bottlenecking the developers. The Tripwire Interactive team chose Cosmic as their dynamic content management solution as they built their new corporate website on a modern React\r\nstack. 


"Cosmic allowed us to easily integrate a secure and fast back-end API into our React app. Cosmic fit our needs with its simple web-based dashboard so that members of our marketing team can create, edit, and delete new content on the fly. Our team\r\nhas been enjoying the ease of use with the new system."

— Owen Liversidge, Lead Developer


","metafields":[{"value":"Tripwire Interactive","key":"company","title":"Company","type":"text","children":null},{"value":"Gaming","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Gamers want games that grab their attention and will keep them coming back for more. Tripwire Interactive has been producing those types of games since the first Red Orchestra mod that won the \"Make Something Unreal\" competition in 2004. Since then Tripwire has won numerous Multiplayer and FPS Game of the Year awards from top editorial sites and millions have played a Red Orchestra or Killing Floor game, with an average play time of over 40 hours, per player, per game! \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"bcc07550-dc64-11e8-a330-792a8fc6e55e-u7wjhcn6_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/bcc07550-dc64-11e8-a330-792a8fc6e55e-u7wjhcn6_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/bcc07550-dc64-11e8-a330-792a8fc6e55e-u7wjhcn6_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2018-10-30T16:54:26.538Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-11-08T20:12:40.566Z","metadata":{"company":"Tripwire Interactive","industry_type":"Gaming","teaser":"Gamers want games that grab their attention and will keep them coming back for more. Tripwire Interactive has been producing those types of games since the first Red Orchestra mod that won the \"Make Something Unreal\" competition in 2004. Since then Tripwire has won numerous Multiplayer and FPS Game of the Year awards from top editorial sites and millions have played a Red Orchestra or Killing Floor game, with an average play time of over 40 hours, per player, per game! \n","logo":{"url":"https://cdn.cosmicjs.com/bcc07550-dc64-11e8-a330-792a8fc6e55e-u7wjhcn6_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/bcc07550-dc64-11e8-a330-792a8fc6e55e-u7wjhcn6_400x400.jpg"}}},{"_id":"60184d81600c7600081262c6","order":15,"slug":"announcing-cosmic-rest-api-v2-new-docs","title":"Announcing the Cosmic REST API v2, New Docs","content":"

We are excited to introduce Cosmic REST API v2 (alpha). The API has been rebuilt from the ground up to be lighter, faster, with lots of new features to make building Cosmic-powered apps even better.

Along with this release, we've built a brand new documentation site to help you learn more about all the new features. We recommend you start there to get all the latest and greatest in this release. Read below to get a breakdown of the new features, improvements, and changes.



New Features

Improvements

Changes


Next Steps

Read the docs to learn more about all the updates and improvements. We would appreciate your input as we get the REST API v2 ready for production. If you have any comments or questions, please drop them in the comments below or in our Slack channel.

- Cosmic Team

","metafields":[{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"HgqTbppqpc","value":"2021-02-09"},{"children":null,"type":"object","title":"Author","key":"author","id":"vswyprxXJ8","value":"5ffa1d1e0046b0000799cb7b","object_type":"authors","object":{"_id":"5ffa1d1e0046b0000799cb7b","slug":"cosmic","title":"Cosmic","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"ZogvxZg6OL","value":""},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D0qLJ4RPBe","value":"10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2021-01-09T21:16:14.533Z","created_by":"5357ef811693be2118000001","modified_at":"2021-01-09T21:18:26.147Z","created":"2021-01-09T21:16:14.533Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/e55ef990-52bf-11eb-986d-4d7ff5faa3ab-logo.svg","published_at":"2021-01-09T21:18:26.147Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null}},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"j2wEjr3739","value":"","url":null,"imgix_url":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"changelogs","created_at":"2021-02-01T18:50:41.411Z","created_by":"5357ef811693be2118000001","modified_at":"2021-02-09T16:26:57.295Z","created":"2021-02-01T18:50:41.411Z","status":"published","thumbnail":"","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2021-02-09T16:26:57.295Z","metadata":{"published_date":"2021-02-09","author":{"_id":"5ffa1d1e0046b0000799cb7b","slug":"cosmic","title":"Cosmic","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"ZogvxZg6OL","value":""},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D0qLJ4RPBe","value":"10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2021-01-09T21:16:14.533Z","created_by":"5357ef811693be2118000001","modified_at":"2021-01-09T21:18:26.147Z","created":"2021-01-09T21:16:14.533Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/e55ef990-52bf-11eb-986d-4d7ff5faa3ab-logo.svg","published_at":"2021-01-09T21:18:26.147Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"metadata":{"username":"","profile_picture":{"url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}}},"featured_image":{"url":null,"imgix_url":null}}},{"_id":"59092a411d2b961e2c000524","order":15,"slug":"ryan-skinner","title":"Ryan Skinner","content":"","metafields":[{"value":"0ca31460-2f9b-11e7-8a4c-11dbea3cc073-ryan.jpeg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/0ca31460-2f9b-11e7-8a4c-11dbea3cc073-ryan.jpeg","imgix_url":"https://imgix.cosmicjs.com/0ca31460-2f9b-11e7-8a4c-11dbea3cc073-ryan.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-05-03T00:54:25.186Z","created_by":"5357ef811693be2118000001","created":"2017-05-03T00:54:25.186Z","status":"published","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/0ca31460-2f9b-11e7-8a4c-11dbea3cc073-ryan.jpeg","imgix_url":"https://imgix.cosmicjs.com/0ca31460-2f9b-11e7-8a4c-11dbea3cc073-ryan.jpeg"}}},{"_id":"5bad228b68df580b01d04acf","order":15,"slug":"twitter","title":"Twitter","content":"","metafields":[{"children":null,"type":"text","title":"Link","key":"link","id":"BvQyxliNfj","value":"https://cosmicjs.com/extensions/twitter-search"},{"children":null,"type":"file","title":"Image","key":"image","id":"wicBGJwpNW","value":"9c644ac0-8ed8-11ea-910b-435199f15a39-twitter.jpg","url":"https://cdn.cosmicjs.com/9c644ac0-8ed8-11ea-910b-435199f15a39-twitter.jpg","imgix_url":"https://imgix.cosmicjs.com/9c644ac0-8ed8-11ea-910b-435199f15a39-twitter.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"integrations","created_at":"2018-09-27T18:33:47.101Z","created_by":"5716b504e9c686d006000073","created":"2018-09-27T18:33:47.101Z","status":"published","modified_at":"2020-05-05T13:59:19.603Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-05-05T13:59:19.603Z","unpublish_at":null,"metadata":{"link":"https://cosmicjs.com/extensions/twitter-search","image":{"url":"https://cdn.cosmicjs.com/9c644ac0-8ed8-11ea-910b-435199f15a39-twitter.jpg","imgix_url":"https://imgix.cosmicjs.com/9c644ac0-8ed8-11ea-910b-435199f15a39-twitter.jpg"}}},{"_id":"538a0d468ceb85ee75000002","slug":"blog","title":"Cosmic JS Blog","content":"

This is the blog with lots of good posts about Cosmic JS.  These thoughts are my own and not affiliated with those of partners, friends or family. - Tony

","metafields":[],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"pages","created":"2014-05-31T17:11:34.136Z","order":15,"modified":"2014-06-07T06:11:05.644Z","files":"","metadata":null},{"_id":"61688b0e75b2f40008cf5d6d","order":15,"slug":"new-dashboard-progress","title":"New Dashboard Progress","content":"

We are excited to share more dashboard progress with you. Since our last update we've been focused on building out the main Cosmic user flows for developers and content creators. Here's a sneak peak of some recently completed features:

1. Add Project
The onboarding process is simple and easy. Choose between starting with a template, or starting from scratch.


2. Add Object Type
Creating your content model is easier than ever. Setting up localization is a breeze and we've completely reimagined the Metafield model building process. You now have a drag and drop palette to create your Metafield models and sorting is easy too!


3. Adding Content
Adding content to your Objects is now easier than ever. To relate Objects to one another, you now have an easy access search and select Object drawer.


4. Developer Tools
The new developer tools drawer makes accessing your code to implement into your app a snap.


We can't wait to show you more! We are on track to release the new dashboard in a private alpha soon. In the meantime, join us on Twitter and in our Slack channel to be the first to hear more about the latest updates.

","metafields":[{"children":null,"type":"object","title":"Author","key":"author","id":"LYIdoE8AMJ","value":"5ffa1d1e0046b0000799cb7b","required":true,"object_type":"authors","object":{"_id":"5ffa1d1e0046b0000799cb7b","slug":"cosmic","title":"Cosmic","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"ZogvxZg6OL","value":""},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D0qLJ4RPBe","value":"10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2021-01-09T21:16:14.533Z","created_by":"5357ef811693be2118000001","modified_at":"2021-01-09T21:18:26.147Z","created":"2021-01-09T21:16:14.533Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/e55ef990-52bf-11eb-986d-4d7ff5faa3ab-logo.svg","published_at":"2021-01-09T21:18:26.147Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null}},{"children":null,"type":"html-textarea","title":"Teaser","key":"teaser","id":"O1DHyZHvV6","value":"

We are excited to share more dashboard progress with you. Since our last update we've been focused on building out the main Cosmic user flows for developers and content creators. Here's a sneak peak of some recently completed features.

"},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"ZIiChbMWJR","value":"2f399f50-2d28-11ec-a256-9f386f540f3a-dash.png","url":"https://cdn.cosmicjs.com/2f399f50-2d28-11ec-a256-9f386f540f3a-dash.png","imgix_url":"https://imgix.cosmicjs.com/2f399f50-2d28-11ec-a256-9f386f540f3a-dash.png"},{"children":null,"type":"textarea","title":"SEO Meta Description","key":"seo_meta_description","id":"wEwFrCedx9","value":"We're really excited to share more dashboard progress with you."},{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"DdSGxaeDcn","value":"2021-10-15"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2021-10-14T19:54:53.925Z","created_by":"5357ef811693be2118000001","modified_at":"2021-10-15T15:57:19.363Z","created":"2021-10-14T19:54:53.925Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/2f399f50-2d28-11ec-a256-9f386f540f3a-dash.png","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2021-10-15T15:57:19.363Z","metadata":{"author":{"_id":"5ffa1d1e0046b0000799cb7b","slug":"cosmic","title":"Cosmic","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"ZogvxZg6OL","value":""},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D0qLJ4RPBe","value":"10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2021-01-09T21:16:14.533Z","created_by":"5357ef811693be2118000001","modified_at":"2021-01-09T21:18:26.147Z","created":"2021-01-09T21:16:14.533Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/e55ef990-52bf-11eb-986d-4d7ff5faa3ab-logo.svg","published_at":"2021-01-09T21:18:26.147Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"metadata":{"username":"","profile_picture":{"url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}}},"teaser":"

We are excited to share more dashboard progress with you. Since our last update we've been focused on building out the main Cosmic user flows for developers and content creators. Here's a sneak peak of some recently completed features.

","featured_image":{"url":"https://cdn.cosmicjs.com/2f399f50-2d28-11ec-a256-9f386f540f3a-dash.png","imgix_url":"https://imgix.cosmicjs.com/2f399f50-2d28-11ec-a256-9f386f540f3a-dash.png"},"seo_meta_description":"We're really excited to share more dashboard progress with you.","published_date":"2021-10-15"}},{"_id":"60d4eb7191c3630008aba45a","order":16,"slug":"sneak-peek-brand-new-dashboard","title":"Sneak Peek: Brand New Dashboard","content":"

We may have seemed a little quiet lately. That's because, for the last few months, we've been hard at work building a completely new Cosmic dashboard!

Built from the ground up, our new dashboard promises to be faster, easier to use, and more beautiful than any CMS dashboard you have ever seen.

Though it's not quite ready yet, we are really excited to show you a sneak peek. Check out the screenshots below, and make sure to follow the links to be the first to get exclusive preview access before we release to the general public.


Blazing Fast Page Loads ⚡


Beautiful Media Management 😍


Dark Mode 🌑


And much, much more!!!

At Cosmic, we are committed to providing your team with the best content management solution, and we think our new dashboard will make your experience second to none.

Moar Previews Please!
We can't wait to show you more when it's ready! If you're not onboard yet, sign up for Cosmic and we'll be sure to notify you when the new dashboard is available for you to get your hands on. Also, follow us on Twitter and join our Slack channel for more updates.

","metafields":[{"children":null,"type":"object","title":"Author","key":"author","id":"npBQrRSOMI","value":"5ffa1d1e0046b0000799cb7b","required":true,"object_type":"authors","object":{"_id":"5ffa1d1e0046b0000799cb7b","slug":"cosmic","title":"Cosmic","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"ZogvxZg6OL","value":""},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D0qLJ4RPBe","value":"10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2021-01-09T21:16:14.533Z","created_by":"5357ef811693be2118000001","modified_at":"2021-01-09T21:18:26.147Z","created":"2021-01-09T21:16:14.533Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/e55ef990-52bf-11eb-986d-4d7ff5faa3ab-logo.svg","published_at":"2021-01-09T21:18:26.147Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null}},{"children":null,"type":"html-textarea","title":"Teaser","key":"teaser","id":"H7LJiuSJyz","value":"

For the last few months, we've been hard at work building an entirely new Cosmic dashboard. Built from the ground up, our new dashboard promises to be faster, easier to use, and more beautiful than any CMS dashboard you have ever seen.

"},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"E5jer2AwkK","value":"90b66f60-d5ee-11eb-8f97-d52cfe93864a-dash-table.png","url":"https://cdn.cosmicjs.com/90b66f60-d5ee-11eb-8f97-d52cfe93864a-dash-table.png","imgix_url":"https://imgix.cosmicjs.com/90b66f60-d5ee-11eb-8f97-d52cfe93864a-dash-table.png"},{"children":null,"type":"textarea","title":"SEO Meta Description","key":"seo_meta_description","id":"CeKRyWGPVb","value":"For the last few months, we've been hard at work building an entirely new Cosmic dashboard. Built from the ground up, our new dashboard promises to be faster, easier to use, and more beautiful than any CMS dashboard you have ever seen."},{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"db1KdiFODk","value":"2021-06-29"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2021-06-24T20:30:41.818Z","created_by":"5357ef811693be2118000001","modified_at":"2021-06-29T15:02:21.635Z","created":"2021-06-24T20:30:41.818Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/cd5de6a0-d8dc-11eb-a1a6-c3f080da6c53-dark-mode.png","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2021-06-29T15:02:21.635Z","metadata":{"author":{"_id":"5ffa1d1e0046b0000799cb7b","slug":"cosmic","title":"Cosmic","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"ZogvxZg6OL","value":""},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D0qLJ4RPBe","value":"10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2021-01-09T21:16:14.533Z","created_by":"5357ef811693be2118000001","modified_at":"2021-01-09T21:18:26.147Z","created":"2021-01-09T21:16:14.533Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/e55ef990-52bf-11eb-986d-4d7ff5faa3ab-logo.svg","published_at":"2021-01-09T21:18:26.147Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"metadata":{"username":"","profile_picture":{"url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}}},"teaser":"

For the last few months, we've been hard at work building an entirely new Cosmic dashboard. Built from the ground up, our new dashboard promises to be faster, easier to use, and more beautiful than any CMS dashboard you have ever seen.

","featured_image":{"url":"https://cdn.cosmicjs.com/90b66f60-d5ee-11eb-8f97-d52cfe93864a-dash-table.png","imgix_url":"https://imgix.cosmicjs.com/90b66f60-d5ee-11eb-8f97-d52cfe93864a-dash-table.png"},"seo_meta_description":"For the last few months, we've been hard at work building an entirely new Cosmic dashboard. Built from the ground up, our new dashboard promises to be faster, easier to use, and more beautiful than any CMS dashboard you have ever seen.","published_date":"2021-06-29"}},{"_id":"58fc08c65161d903690003cd","order":16,"slug":"javascript-cms","title":"JavaScript CMS","content":"

Cosmic JS is the leading CMS for modern digital teams. Install the Official Cosmic JS JavaScript Client to integrate content into your JavaScript app in minutes. Use Cosmic JS to quickly build content-powered blogs, dynamic pages, and more. Get a feel for JavaScript by taking a spin through our JavaScript Apps and check out the tutorials below.

JavaScript CMS Articles

Developer Community: JavaScript Articles
The Cosmic Stack
How to Build a Simple Blog Using Node.js
How to Build a JAMstack Website

JavaScript CMS Resources

Cosmic JS Docs
Official JavaScript Client
Cosmic JS GitHub

Examples

npm i cosmicjs

Then in your JavaScript file, get your content:

\">
","metafields":[{"children":null,"type":"file","title":"Image","key":"image","id":"KuAIbyENzf","value":"5226f730-27c7-11e7-9631-b17e7278f329-javascript.svg","url":"https://cdn.cosmicjs.com/5226f730-27c7-11e7-9631-b17e7278f329-javascript.svg","imgix_url":"https://imgix.cosmicjs.com/5226f730-27c7-11e7-9631-b17e7278f329-javascript.svg"},{"children":null,"type":"file","title":"Thumbnail","key":"thumbnail","id":"UKAE1c15Z4","value":"553aedf0-27c7-11e7-9631-b17e7278f329-javascript.svg","url":"https://cdn.cosmicjs.com/553aedf0-27c7-11e7-9631-b17e7278f329-javascript.svg","imgix_url":"https://imgix.cosmicjs.com/553aedf0-27c7-11e7-9631-b17e7278f329-javascript.svg"},{"children":null,"type":"html-textarea","title":"Blurb","key":"blurb","id":"qlylynnV4i","value":"

Cosmic is the best CMS for JavaScript websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

"},{"children":null,"type":"text","title":"Headline","key":"headline","id":"7ONJDU6VJ9","value":"JavaScript"},{"children":null,"type":"text","title":"SEO Description","key":"seo_description","id":"udsfeWYHry","value":"Cosmic is the best CMS for JavaScript websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators."},{"children":null,"type":"file","title":"Twitter Card Image","key":"twitter_card_image","id":"H1xP4yDo1E","value":"de1a4670-2ac4-11e7-8c0a-bd67c616bd40-javascript.jpg","url":"https://cdn.cosmicjs.com/de1a4670-2ac4-11e7-8c0a-bd67c616bd40-javascript.jpg","imgix_url":"https://imgix.cosmicjs.com/de1a4670-2ac4-11e7-8c0a-bd67c616bd40-javascript.jpg"},{"children":null,"type":"html-textarea","title":"Code Example","key":"code_example","id":"605UUReovh","value":""},{"children":null,"type":"text","title":"SEO Title","key":"seo_title","id":"5culuyhkW3","value":"Best Headless CMS for JavaScript"},{"children":[],"type":"repeater","title":"Videos","key":"videos","id":"frgtgqfrpylludl8pnsi","value":"","repeater_fields":[{"title":"Title","key":"title","value":"","type":"text","required":false},{"title":"Link","key":"link","value":"","type":"text","required":false}]}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"kb-articles","created_at":"2017-04-23T01:52:06.573Z","created_by":"5357ef811693be2118000001","created":"2017-04-23T01:52:06.573Z","status":"published","modified_at":"2020-06-27T19:16:34.555Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-06-27T19:16:34.555Z","unpublish_at":null,"metadata":{"image":{"url":"https://cdn.cosmicjs.com/5226f730-27c7-11e7-9631-b17e7278f329-javascript.svg","imgix_url":"https://imgix.cosmicjs.com/5226f730-27c7-11e7-9631-b17e7278f329-javascript.svg"},"thumbnail":{"url":"https://cdn.cosmicjs.com/553aedf0-27c7-11e7-9631-b17e7278f329-javascript.svg","imgix_url":"https://imgix.cosmicjs.com/553aedf0-27c7-11e7-9631-b17e7278f329-javascript.svg"},"blurb":"

Cosmic is the best CMS for JavaScript websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

","headline":"JavaScript","seo_description":"Cosmic is the best CMS for JavaScript websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.","twitter_card_image":{"url":"https://cdn.cosmicjs.com/de1a4670-2ac4-11e7-8c0a-bd67c616bd40-javascript.jpg","imgix_url":"https://imgix.cosmicjs.com/de1a4670-2ac4-11e7-8c0a-bd67c616bd40-javascript.jpg"},"code_example":"","seo_title":"Best Headless CMS for JavaScript","videos":[]}},{"_id":"5d4ad9e2dbf3682aff1d580a","order":16,"slug":"cms-software-for-emerging-tech","title":"CMS Software for Emerging Tech","content":"

Cosmic JS provides flexible CMS Software for teams managing content for emerging tech like Augmented Reality, Virtual Reality and more. Teams choose to manage content using Cosmic JS CMS Software because the CMS Dashboard is simple and intuitive to manage content, and integration with your apps is fast and easy.

Teams using CMS Software to power content for emerging tech like AR / VR don't have to maintain their own server and content management system. By focusing on apps and not infrastructure, teams are able to build apps faster, together. 


What is Headless CMS Software?

Headless CMS Software works by providing non-technical editors with a Dashboard UI to model, create and publish content while providing developers with API tools and resources to integrate content with any website or app. By decoupling content from code, teams create a central content repository that can power all of their content-powered applications. 

","metafields":[{"value":"CMS Software for Emerging Tech","key":"solution_name","title":"Solution Name","type":"text","children":null},{"value":"081cd180-b91c-11e9-b76b-a9843931f07b-52263510-9dc3-11e9-a5b4-e5df9f8049d3-f70db6b0-5abd-11e8-a6f7-cb94a52bca9d-109999224655216202658486799915322872806436o.jpg","key":"image","title":"Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/081cd180-b91c-11e9-b76b-a9843931f07b-52263510-9dc3-11e9-a5b4-e5df9f8049d3-f70db6b0-5abd-11e8-a6f7-cb94a52bca9d-109999224655216202658486799915322872806436o.jpg","imgix_url":"https://imgix.cosmicjs.com/081cd180-b91c-11e9-b76b-a9843931f07b-52263510-9dc3-11e9-a5b4-e5df9f8049d3-f70db6b0-5abd-11e8-a6f7-cb94a52bca9d-109999224655216202658486799915322872806436o.jpg"},{"object_type":"case-studies","value":"5c3774946bcb7526c0bddbe7,5bd889bf80b80325461575c5,5ade6e0e2b218820ec24bff1","key":"case_studies","title":"Case Studies","type":"objects","children":null,"objects":[{"_id":"5c3774946bcb7526c0bddbe7","slug":"dreamwalks-decoupled-approach-to-content-management","title":"DreamWalk's Decoupled Approach to Content Management","content":"

With a list of chart-topping apps to their name and a long history of mobile innovation, DreamWalk is the App Development agency trusted by some of the world’s biggest brands and most ambitious startups. With clients like Coca-Cola®, New Mexico Tourism and BP, DreamWalk is among the longest standing and most trusted app development firms in Australia. 



The team at DreamWalk was in search of a headless CMS that would speed up their development cycles. They needed to empower their developers with flexibility out-of-the-box while enabling their content managers to manage content in a web-based Dashboard. They chose Cosmic due to its easy content modeling tools that allowed them to set up client projects more quickly and easily than before, adding to their bottom line and expanding the tools available in their digital toolkit.



"At DreamWalk we always strive to give our clients the best possible customer experience. Cosmic enables us to work within tight budgets without compromising on that great experience."

— Karl Graf, Director and Mobile App Strategist
","metafields":[{"value":"DreamWalk","key":"company","title":"Company","type":"text","children":null},{"value":"App Development Agency","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"With a list of chart-topping apps to their name and a long history of mobile innovation, DreamWalk is the App Development agency trusted by some of the world’s biggest brands and most ambitious startups. With clients like Coca-Cola®, New Mexico Tourism and BP, DreamWalk is among the longest standing and most trusted app development firms in Australia. \n\n\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"f891dd10-14f6-11e9-ac3b-29773f4ac49e-A0Vz6NqU_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/f891dd10-14f6-11e9-ac3b-29773f4ac49e-A0Vz6NqU_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/f891dd10-14f6-11e9-ac3b-29773f4ac49e-A0Vz6NqU_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2019-01-10T16:36:36.690Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2019-01-11T16:56:26.753Z"},{"_id":"5bd889bf80b80325461575c5","slug":"plato-delivers-mobile-news-feed-content-with-cosmic-js","title":"Plato Delivers Mobile News Feed Content with Cosmic","content":"

Plato's mission is to bring people together through meaningful & social games. Plato combines chat & games seamlessly, as the first messenger built from the ground up to support full multiplayer games. With a team comprised of Yahoo and gaming veterans plus backing from WhatsApp, Plato is available now on iOS & Android.



Plato had a home-built CMS that, between operational costs and the engineering salaries to maintain it, was costing far too much. The team decided to replace their internal system with Cosmic to allow their developers to build new content models when they need to while empowering editors to manage content without bottlenecking the development team. 

Plato's new tech stack is Golang based and hosted on AWS. Plato's mobile clients, written in Swift and Kotlin, access their news feed content, which is ATOM Syndication Format. The application uses the Cosmic REST API to pull articles and package them into an ATOM-compliant feed. 



"It is refreshing to use an API-first CMS, rather than trying to integrate with a complex, monolithic system and adapt it to our specific use case.”

— Jesse Macnish, Chief Technology Officer  

","metafields":[{"value":"Plato","key":"company","title":"Company","type":"text","children":null},{"value":"Gaming ","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Plato's mission is to bring people together through meaningful & social games. Plato combines chat & games seamlessly, as the first messenger built from the ground up to support full multiplayer games. With a team comprised of Yahoo and gaming veterans plus backing from WhatsApp, Plato is available now on iOS & Android.\n\n\n\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"e6fd2940-1390-11e9-a4d9-67aa1af4f618-pauHfhZ9_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e6fd2940-1390-11e9-a4d9-67aa1af4f618-pauHfhZ9_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e6fd2940-1390-11e9-a4d9-67aa1af4f618-pauHfhZ9_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2018-10-30T16:41:35.346Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2019-01-08T23:23:29.527Z"},{"_id":"5ade6e0e2b218820ec24bff1","slug":"medical-realities-delivers-vr-surgical-content","title":"Medical Realities Delivers VR Surgical Content","content":"

The Medical Realties Platform is a technology powerhouse designed to deliver realism and immersion. Delivering high-quality surgical training using Virtual Reality, Medical Realities lets you become immersed while world-class surgeons teach their interactive modules, which includes 360-degree 4K video and a testing system within the application. 



The Medical Realities team needed a way for educators (non-technical editors) to manage content that could be served to VR headsets for consumption by trainees, so they chose Cosmic to manage and deliver their content from the cloud through an API. 



"Cosmic allowed us to easily spin up content models that would allow our non-technical editors to manage the most sophisticated medical VR content out there. Our developers were equipped with robust Docs and Example Apps to get them started and were able to use the bleeding-edge frameworks necessary to run Virtual Reality."

— Joe Marritt, Lead Web Developer 

","metafields":[{"value":"Medical Realities","key":"company","title":"Company","type":"text","children":null},{"value":"Healthcare and Virtual Reality ","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"The Medical Realties Platform is a technology powerhouse designed to deliver realism and immersion. Delivering high-quality surgical training using Virtual Reality, Medical Realities lets you become immersed while world-class surgeons teach their interactive modules, which includes 360-degree 4K video and a testing system within the application. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"0a95ad50-474f-11e8-b969-053c57b3610c-medical-realities-1.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/0a95ad50-474f-11e8-b969-053c57b3610c-medical-realities-1.png","imgix_url":"https://imgix.cosmicjs.com/0a95ad50-474f-11e8-b969-053c57b3610c-medical-realities-1.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-04-23T23:36:46.885Z","created_by":"5716b504e9c686d006000073","created":"2018-04-23T23:36:46.885Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-05-18T17:07:50.800Z"}]},{"repeater_fields":[{"title":"Slug","key":"slug","value":"","type":"text","required":false}],"value":"react-native-twitter-clone","key":"app_slugs","title":"App Slugs","type":"repeater","children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"react-native-twitter-clone","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"cross-platform-blog","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"vue-rpg-game","type":"text","required":false}]}]},{"repeater_fields":[{"title":"Slug","key":"slug","value":"","type":"text","required":false}],"value":"twitter-search","key":"extension_slugs","title":"Extension SLugs","type":"repeater","children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"twitter-search","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"export-to-csv","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"imgix-editor ","type":"text","required":false}]}]},{"value":"\"Cosmic JS allowed us to easily spin up content models that would allow our non-technical editors to manage the most sophisticated medical VR content out there. Our developers were equipped with robust Docs and Example Apps to get them started and were able to use the bleeding-edge frameworks necessary to run Virtual Reality.\"\n","key":"testimonial","title":"Testimonial","type":"textarea","children":null},{"value":"Joe Marritt, Lead Web Developer at Medical Realities","key":"testimonial_credit","title":"Testimonial Credit","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"solutions","created_at":"2019-08-05T20:18:17.006Z","created_by":"5716b504e9c686d006000073","modified_at":"2019-08-07T14:05:07.229Z","created":"2019-08-07T14:02:10.059Z","status":"published","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2019-08-07T14:05:07.229Z","metadata":{"solution_name":"CMS Software for Emerging Tech","image":{"url":"https://cdn.cosmicjs.com/081cd180-b91c-11e9-b76b-a9843931f07b-52263510-9dc3-11e9-a5b4-e5df9f8049d3-f70db6b0-5abd-11e8-a6f7-cb94a52bca9d-109999224655216202658486799915322872806436o.jpg","imgix_url":"https://imgix.cosmicjs.com/081cd180-b91c-11e9-b76b-a9843931f07b-52263510-9dc3-11e9-a5b4-e5df9f8049d3-f70db6b0-5abd-11e8-a6f7-cb94a52bca9d-109999224655216202658486799915322872806436o.jpg"},"case_studies":[{"_id":"5c3774946bcb7526c0bddbe7","slug":"dreamwalks-decoupled-approach-to-content-management","title":"DreamWalk's Decoupled Approach to Content Management","content":"

With a list of chart-topping apps to their name and a long history of mobile innovation, DreamWalk is the App Development agency trusted by some of the world’s biggest brands and most ambitious startups. With clients like Coca-Cola®, New Mexico Tourism and BP, DreamWalk is among the longest standing and most trusted app development firms in Australia. 



The team at DreamWalk was in search of a headless CMS that would speed up their development cycles. They needed to empower their developers with flexibility out-of-the-box while enabling their content managers to manage content in a web-based Dashboard. They chose Cosmic due to its easy content modeling tools that allowed them to set up client projects more quickly and easily than before, adding to their bottom line and expanding the tools available in their digital toolkit.



"At DreamWalk we always strive to give our clients the best possible customer experience. Cosmic enables us to work within tight budgets without compromising on that great experience."

— Karl Graf, Director and Mobile App Strategist
","metafields":[{"value":"DreamWalk","key":"company","title":"Company","type":"text","children":null},{"value":"App Development Agency","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"With a list of chart-topping apps to their name and a long history of mobile innovation, DreamWalk is the App Development agency trusted by some of the world’s biggest brands and most ambitious startups. With clients like Coca-Cola®, New Mexico Tourism and BP, DreamWalk is among the longest standing and most trusted app development firms in Australia. \n\n\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"f891dd10-14f6-11e9-ac3b-29773f4ac49e-A0Vz6NqU_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/f891dd10-14f6-11e9-ac3b-29773f4ac49e-A0Vz6NqU_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/f891dd10-14f6-11e9-ac3b-29773f4ac49e-A0Vz6NqU_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2019-01-10T16:36:36.690Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2019-01-11T16:56:26.753Z","metadata":{"company":"DreamWalk","industry_type":"App Development Agency","teaser":"With a list of chart-topping apps to their name and a long history of mobile innovation, DreamWalk is the App Development agency trusted by some of the world’s biggest brands and most ambitious startups. With clients like Coca-Cola®, New Mexico Tourism and BP, DreamWalk is among the longest standing and most trusted app development firms in Australia. \n\n\n","logo":{"url":"https://cdn.cosmicjs.com/f891dd10-14f6-11e9-ac3b-29773f4ac49e-A0Vz6NqU_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/f891dd10-14f6-11e9-ac3b-29773f4ac49e-A0Vz6NqU_400x400.jpg"}}},{"_id":"5bd889bf80b80325461575c5","slug":"plato-delivers-mobile-news-feed-content-with-cosmic-js","title":"Plato Delivers Mobile News Feed Content with Cosmic","content":"

Plato's mission is to bring people together through meaningful & social games. Plato combines chat & games seamlessly, as the first messenger built from the ground up to support full multiplayer games. With a team comprised of Yahoo and gaming veterans plus backing from WhatsApp, Plato is available now on iOS & Android.



Plato had a home-built CMS that, between operational costs and the engineering salaries to maintain it, was costing far too much. The team decided to replace their internal system with Cosmic to allow their developers to build new content models when they need to while empowering editors to manage content without bottlenecking the development team. 

Plato's new tech stack is Golang based and hosted on AWS. Plato's mobile clients, written in Swift and Kotlin, access their news feed content, which is ATOM Syndication Format. The application uses the Cosmic REST API to pull articles and package them into an ATOM-compliant feed. 



"It is refreshing to use an API-first CMS, rather than trying to integrate with a complex, monolithic system and adapt it to our specific use case.”

— Jesse Macnish, Chief Technology Officer  

","metafields":[{"value":"Plato","key":"company","title":"Company","type":"text","children":null},{"value":"Gaming ","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Plato's mission is to bring people together through meaningful & social games. Plato combines chat & games seamlessly, as the first messenger built from the ground up to support full multiplayer games. With a team comprised of Yahoo and gaming veterans plus backing from WhatsApp, Plato is available now on iOS & Android.\n\n\n\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"e6fd2940-1390-11e9-a4d9-67aa1af4f618-pauHfhZ9_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e6fd2940-1390-11e9-a4d9-67aa1af4f618-pauHfhZ9_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e6fd2940-1390-11e9-a4d9-67aa1af4f618-pauHfhZ9_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2018-10-30T16:41:35.346Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2019-01-08T23:23:29.527Z","metadata":{"company":"Plato","industry_type":"Gaming ","teaser":"Plato's mission is to bring people together through meaningful & social games. Plato combines chat & games seamlessly, as the first messenger built from the ground up to support full multiplayer games. With a team comprised of Yahoo and gaming veterans plus backing from WhatsApp, Plato is available now on iOS & Android.\n\n\n\n","logo":{"url":"https://cdn.cosmicjs.com/e6fd2940-1390-11e9-a4d9-67aa1af4f618-pauHfhZ9_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e6fd2940-1390-11e9-a4d9-67aa1af4f618-pauHfhZ9_400x400.jpg"}}},{"_id":"5ade6e0e2b218820ec24bff1","slug":"medical-realities-delivers-vr-surgical-content","title":"Medical Realities Delivers VR Surgical Content","content":"

The Medical Realties Platform is a technology powerhouse designed to deliver realism and immersion. Delivering high-quality surgical training using Virtual Reality, Medical Realities lets you become immersed while world-class surgeons teach their interactive modules, which includes 360-degree 4K video and a testing system within the application. 



The Medical Realities team needed a way for educators (non-technical editors) to manage content that could be served to VR headsets for consumption by trainees, so they chose Cosmic to manage and deliver their content from the cloud through an API. 



"Cosmic allowed us to easily spin up content models that would allow our non-technical editors to manage the most sophisticated medical VR content out there. Our developers were equipped with robust Docs and Example Apps to get them started and were able to use the bleeding-edge frameworks necessary to run Virtual Reality."

— Joe Marritt, Lead Web Developer 

","metafields":[{"value":"Medical Realities","key":"company","title":"Company","type":"text","children":null},{"value":"Healthcare and Virtual Reality ","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"The Medical Realties Platform is a technology powerhouse designed to deliver realism and immersion. Delivering high-quality surgical training using Virtual Reality, Medical Realities lets you become immersed while world-class surgeons teach their interactive modules, which includes 360-degree 4K video and a testing system within the application. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"0a95ad50-474f-11e8-b969-053c57b3610c-medical-realities-1.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/0a95ad50-474f-11e8-b969-053c57b3610c-medical-realities-1.png","imgix_url":"https://imgix.cosmicjs.com/0a95ad50-474f-11e8-b969-053c57b3610c-medical-realities-1.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-04-23T23:36:46.885Z","created_by":"5716b504e9c686d006000073","created":"2018-04-23T23:36:46.885Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-05-18T17:07:50.800Z","metadata":{"company":"Medical Realities","industry_type":"Healthcare and Virtual Reality ","teaser":"The Medical Realties Platform is a technology powerhouse designed to deliver realism and immersion. Delivering high-quality surgical training using Virtual Reality, Medical Realities lets you become immersed while world-class surgeons teach their interactive modules, which includes 360-degree 4K video and a testing system within the application. \n","logo":{"url":"https://cdn.cosmicjs.com/0a95ad50-474f-11e8-b969-053c57b3610c-medical-realities-1.png","imgix_url":"https://imgix.cosmicjs.com/0a95ad50-474f-11e8-b969-053c57b3610c-medical-realities-1.png"}}}],"app_slugs":[{"slug":"react-native-twitter-clone"},{"slug":"cross-platform-blog"},{"slug":"vue-rpg-game"}],"extension_slugs":[{"slug":"twitter-search"},{"slug":"export-to-csv"},{"slug":"imgix-editor "}],"testimonial":"\"Cosmic JS allowed us to easily spin up content models that would allow our non-technical editors to manage the most sophisticated medical VR content out there. Our developers were equipped with robust Docs and Example Apps to get them started and were able to use the bleeding-edge frameworks necessary to run Virtual Reality.\"\n","testimonial_credit":"Joe Marritt, Lead Web Developer at Medical Realities"}},{"_id":"5905fe6a710a2188470004a5","order":16,"slug":"noah-vaillancourt","title":"Noah Vaillancourt","content":"","metafields":[{"value":"2664e120-2db7-11e7-826f-f34de0199ac5-noah-vaillancourt.jpeg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/2664e120-2db7-11e7-826f-f34de0199ac5-noah-vaillancourt.jpeg","imgix_url":"https://imgix.cosmicjs.com/2664e120-2db7-11e7-826f-f34de0199ac5-noah-vaillancourt.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-04-30T15:10:34.252Z","created_by":"5357ef811693be2118000001","created":"2017-04-30T15:10:34.252Z","status":"published","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/2664e120-2db7-11e7-826f-f34de0199ac5-noah-vaillancourt.jpeg","imgix_url":"https://imgix.cosmicjs.com/2664e120-2db7-11e7-826f-f34de0199ac5-noah-vaillancourt.jpeg"}}},{"_id":"538de4900839ae2f24000001","slug":"appstore","title":"App Store","content":"","metafields":[],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"pages","created":"2014-06-03T15:06:56.436Z","modified":"2014-06-06T13:18:36.810Z","files":[{"_id":"538e1706c55b85e52a000003","key":"cosmic-node","name":"03865d15-6de1-30c4-544f-d264cb685967-1401820929805-cosmicscale-node.zip","original_name":"cosmicscale-node.zip","type":"application/zip","order":2},{"_id":"538e1703c55b85e52a000001","key":"cosmic-php","name":"71f3bc20-b60e-0301-3213-f7abbc9fc78b-1401820929809-cosmicscale-php.zip","original_name":"cosmicscale-php.zip","type":"application/zip","order":0},{"_id":"538e1704c55b85e52a000002","key":"cosmic-angular","name":"ac741882-d4e7-2d39-e595-43da43a33d9e-1401820929798-cosmicscale-angular.zip","original_name":"cosmicscale-angular.zip","type":"application/zip","order":1}],"order":16,"metadata":null},{"_id":"5bd889bf80b80325461575c5","order":16,"slug":"plato-delivers-mobile-news-feed-content-with-cosmic-js","title":"Plato Delivers Mobile News Feed Content with Cosmic","content":"

Plato's mission is to bring people together through meaningful & social games. Plato combines chat & games seamlessly, as the first messenger built from the ground up to support full multiplayer games. With a team comprised of Yahoo and gaming veterans plus backing from WhatsApp, Plato is available now on iOS & Android.



Plato had a home-built CMS that, between operational costs and the engineering salaries to maintain it, was costing far too much. The team decided to replace their internal system with Cosmic to allow their developers to build new content models when they need to while empowering editors to manage content without bottlenecking the development team. 

Plato's new tech stack is Golang based and hosted on AWS. Plato's mobile clients, written in Swift and Kotlin, access their news feed content, which is ATOM Syndication Format. The application uses the Cosmic REST API to pull articles and package them into an ATOM-compliant feed. 



"It is refreshing to use an API-first CMS, rather than trying to integrate with a complex, monolithic system and adapt it to our specific use case.”

— Jesse Macnish, Chief Technology Officer  

","metafields":[{"value":"Plato","key":"company","title":"Company","type":"text","children":null},{"value":"Gaming ","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Plato's mission is to bring people together through meaningful & social games. Plato combines chat & games seamlessly, as the first messenger built from the ground up to support full multiplayer games. With a team comprised of Yahoo and gaming veterans plus backing from WhatsApp, Plato is available now on iOS & Android.\n\n\n\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"e6fd2940-1390-11e9-a4d9-67aa1af4f618-pauHfhZ9_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e6fd2940-1390-11e9-a4d9-67aa1af4f618-pauHfhZ9_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e6fd2940-1390-11e9-a4d9-67aa1af4f618-pauHfhZ9_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2018-10-30T16:41:35.346Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2019-01-08T23:23:29.527Z","metadata":{"company":"Plato","industry_type":"Gaming ","teaser":"Plato's mission is to bring people together through meaningful & social games. Plato combines chat & games seamlessly, as the first messenger built from the ground up to support full multiplayer games. With a team comprised of Yahoo and gaming veterans plus backing from WhatsApp, Plato is available now on iOS & Android.\n\n\n\n","logo":{"url":"https://cdn.cosmicjs.com/e6fd2940-1390-11e9-a4d9-67aa1af4f618-pauHfhZ9_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e6fd2940-1390-11e9-a4d9-67aa1af4f618-pauHfhZ9_400x400.jpg"}}},{"_id":"600104e0795bb30007b03379","order":16,"slug":"projects-merge-requests-and-other-updates","title":"Projects, Merge Requests, and other Updates","content":"

We've made a few big changes to the dashboard and API recently:

Projects
Projects are a new way to connect Buckets for use with Merge Requests. To do merges between Buckets they must be in the same Project. If you have Buckets that were created prior to the Merge Request release, you can clone any Bucket to create a new Project.

Clone Bucket from Settings
You can now clone any Bucket from the settings area by going to Settings > Basic Settings in the left sidebar, scroll down, and click "Clone Bucket". The Bucket will be cloned into the same Project (if it's not connected to a Project, a new one will be created).

Merge Requests



Merge Requests was the big release that we announced on Tuesday this week. Merge Requests enables you to do Git-like workflows for content. Perform bulk edits between Buckets, preview, include your team for approval workflows, and more. 

With this feature becoming a first-class feature in the Cosmic workflow, we've removed a previously released feature to copy Objects to another Bucket from the Objects table.

Merge Request Preview Link
You now have the ability to add a Merge Request preview link to your Bucket by going to Settings > Basic Settings and scrolling down to Merge Request Preview Link (only available on Buckets in a Project). This will be the default link added to all merge requests that make this Bucket the target Bucket.

Webhooks
There is a new webhook event available for merge.completed. This will only be triggered by the target Bucket. To set this up, in your Bucket go to Settings > Webhooks. See the docs for more info.

Singleton Object Type
Object Types can now be a singleton. A singleton Object Type is any type of content that only has one Object. For example Home Page, Site Settings, etc. As opposed to Blog Posts, Pages, etc. which are multiple Object Types.

API Updates
You can now get Merge Request Objects from the API to perform diffs against Objects in your target Bucket. See the docs for more info.


We hope you find these updates useful in your content workflows. It's our mission to make your use of Cosmic enjoyable and enables your team to do your best work. If you have any questions or comments, reach out to us on Twitter, and join us in Slack.

","metafields":[{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"uPl6BLpd6n","value":"2021-01-15"},{"children":null,"type":"object","title":"Author","key":"author","id":"HgezElzaMv","value":"5768b253163172890e00002c","object_type":"authors","object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"L91eCpCDKE","value":"","url":null,"imgix_url":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"changelogs","created_at":"2021-01-15T02:58:40.145Z","created_by":"5357ef811693be2118000001","modified_at":"2021-01-15T15:51:42.578Z","created":"2021-01-15T02:58:40.145Z","status":"published","thumbnail":"","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2021-01-15T15:51:42.578Z","metadata":{"published_date":"2021-01-15","author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"featured_image":{"url":null,"imgix_url":null}}},{"_id":"603e6214010e900007937350","order":17,"slug":"gatsby-vs-nextjs-which-framework-to-use-with-a-headless-cms","title":"Gatsby vs. Next.js: Which Framework to Use with a Headless CMS?","content":"

Creating websites and developing web applications is arguably easier than ever thanks to the broad number of open-source frameworks at your disposal. Whether you’re developing a simple static website or an e-commerce platform designed to scale, you have plenty of framework options, including Gatsby and Next.js.

Using web frameworks, you can develop viable websites much more efficiently than if you started from scratch. Moreover, by combining frameworks with a headless Content Management System (CMS),\r\nyou get the best of both worlds. That is to say, a system that enables you to create and manage content at scale with a small performance footprint, alongside all the tools you need to create user-friendly website for users to interact with.

As powerful a combination as that is, you can’t go ahead and use any framework alongside any headless CMS. Fortunately, both Gatsby and Next.js happen to be fantastic options to use alongside a headless CMS (such as Cosmic).

In this article, we’re going to compare Gatsby vs. Next.js to help you choose the right framework for your next web project. We’ll talk about how they handle data and render static websites. Then we’ll go over headless CMS integration\r\nfor both frameworks. That way, you’ll have all the information you need to make an informed decision.

An Introduction to Gatsby and Next.js

Both Gatsby and Next.js are among the most popular frameworks for websites and online applications. Some of the most popular websites in the world use Next.js, including Twitch, Hulu, and Nike. Gatsby doesn’t\r\nfall far behind, though, with plenty of household names attached to the framework, including IBM and PayPal.

It would be easy to say that both frameworks are so popular because they’re based on React. Since its launch in 2011, React has become one of the web’s most loved frameworks. That’s not an exaggeration either, it actually beat out Vue.js in an internal Stack Overflow survey in 2019 that asked developers what their favorite framework was.

Despite the fact that both Next.js and Gatsby share roots, they’re very different frameworks with unique applications. In a nutshell, Gatsby combines React and GraphQL to provide you with a user-friendly tools that you can use for static website generation.

Next.js, on the other hand, generates HTML dynamically whenever your server gets a new request. That has an impact on website performance, but it’s also necessary for dynamic websites. If your website has users, includes comments, or you sell products\r\nonline, static pages simply won’t cut it.

Gatsby vs Next.js: Which Framework Is Best for Static Content Generation?

Now more than ever, we understand that site performance is critical when it comes to providing the best possible user experience. As much time and effort as you spend into optimizing your setup, dynamic websites, by design, can’t match the sheer\r\nspeed of static pages.

If you’re working a website where you know you won’t need to update pages often or use dynamic elements, a framework such as Gatsby is your best bet. Using Gatsby, you only load critical HTML, JavaScript, and CSS, which makes\r\nit a steamroller when it comes to performance.

The primary difference between Gatsby and Next.js is that the former generates HTML content on the client-side. That means if you use Gatsby to build your web application, your server doesn’t need to render anything when it gets a request –\r\nit all happens during build or runtime time. 

Next.js isn’t necessarily a worse choice from a performance standpoint. However, the way the framework works (pardon the pun) means that whenever someone attempts to visit your website, your server generates the page that they’ll see dynamically.

It’s important to note that during recent updates, Next.js has made a lot of strides when it comes to static content generation. Next.js 9.3 introduced support for static side generation, which means the framework now also support build-time rendering. 

That makes Next.js a great option both for dynamic and static websites. However, Gatsby still has an edge when it comes to the latter since it’s baked into its DNA.

Gatsby vs Next.js: How Each Framework Tackles Data Handling

Gatsby has a structural advantage over Next.js as far as data security goes. However, that’s because the framework doesn’t fetch data from your server or a database. By their nature, static content generators are more secure, but that means\r\nyour options are limited if you need dynamic data handling. 

For example, if you want to enable user registration, commenting, dynamic elements, and more, then you need to expand Gatsby’s functionality. Fortunately, that’s possible. The framework offers a lot of plugins that enable you to connect with\r\nCMSs such as WordPress and it also works with headless options (which we’ll discuss in a minute).

One data-handling aspect where Gatsby does shine is when it comes to images. The framework comes with massive library of plugins that you can use to extend its functionality. For example, Gatsby-imagesenables\r\nyou to resize the images your visitors see at build time, which translates to faster loading times without it impacting server usage. Plus, it also includes lazy-loading functionality.

To put it another way, serving a static website doesn’t mean that your pages will look boring. As we mentioned before, plenty of household-name companies use Gatsby, and if you check out their websites, you’ll see they’re far from being drab.

Next.js, on the other hand, is capable of data handling. However, just like with Gatsby, you need to set up a backend solution that can actually manage the data and content Next.js uses to generate pages dynamically.

Why Use Gatsby or Next.js With a Headless CMS

The concept of a headless CMS is simple. You take what is arguably the best part of a CMS, which is content management and generation, and use that as the backend for your web projects. That frees you up to use any approach that you want when it comes\r\nto the frontend, which includes using React frameworks such as Gatsby and Next.js.

So far, we’ve gone over a lot of the upsides and downsides of using Next.js and Gatsby. Using the right headless CMS, you can make up for a lot of either framework’s downsides. Let’s break down how:

The whole point of using a headless CMS in combination with a React framework is to provide you with a flexible setup that adapts to whichever type of project you intend to develop. With the right headless CMS, you can launch any type of website, from\r\na simple blog to an online store, and use your preferred React framework to power its frontend. 

There are plenty of options when it comes to headless CMS integrations for both Gatsby and Next.js. However, Cosmic provides built-in support and functionality for both frameworks.

If you want to use Next.js, you can create a Next.js app and install the Cosmic NPM module in a matter of minutes. Launching a project that combines Cosmic with Gatsby is equally as simple, since there’s a Cosmic source plugin for the framework.

With Cosmic, you get a cloud headless solution that works with most popular frameworks. The headless CMS provides both a GraphQL and a REST API, which makes it an incredibly versatile solution.

When to Use Gatsby vs Next.js (And Vice Versa)

Although both Gatsby and Next.js are fantastic framework options to use alongside a headless CMS, they’re not interchangeable solutions. Let’s go over which framework you should use depending on the type of project that you’re working on:

  1. Gatsby. This framework’s strength lies in its unmatched static site generating performance. Although using a headless CMS can make up for a lot of features that it doesn’t offer out of the box, Gatsby is perhaps not the\r\nbest option for client-side applications or websites that require massive amounts of dynamic content.
  2. Next.js. If you’re working on a project that’s about as far as you can get from static, Next.js definitely has an advantage over Gatsby. When you combine its features with a headless CMS, you get a stack that’s\r\nabout as flexible as it gets.

Overall, which framework to use comes down to the type of project you’re working on. If you use Cosmic, though, you can easily switch between frameworks for each new project and still get to use the same backend.

If you’re ready to check out what a headless CMS platform can enable you to do, try out Cosmic. We offer a free Personal plan that use can use to check out the platform.

","metafields":[{"children":null,"type":"object","title":"Author","key":"author","id":"NDf7ygGJWw","value":"5f5fac071936450007d8a01c","required":true,"object_type":"authors","object":{"_id":"5f5fac071936450007d8a01c","slug":"kyle-meagher","title":"Kyle Meagher","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"hsMOJCxIAj","value":"kylemeags"},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D2rdKO4lEL","value":"e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","url":"https://cdn.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","imgix_url":"https://imgix.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2020-09-14T17:44:39.110Z","created_by":"5357ef811693be2118000001","modified_at":"2020-09-14T17:45:09.251Z","created":"2020-09-14T17:44:39.110Z","status":"published","published_at":"2020-09-14T17:44:39.110Z","modified_by":"5357ef811693be2118000001","thumbnail":"https://imgix.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg"}},{"children":null,"type":"html-textarea","title":"Teaser","key":"teaser","id":"GFh5e6tyyO","value":"

Both Gatsby and Next.js are among the most popular frameworks for websites and online applications. In this article, we’re going to compare Gatsby vs. Next.js to help you choose the right framework for your next web project. We’ll talk about how they handle data and render static websites.

"},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"kChVGp4bhW","value":"0bc852a0-827e-11eb-8b5d-951d83ec2ae4-gatsby-vs-next.png","url":"https://cdn.cosmicjs.com/0bc852a0-827e-11eb-8b5d-951d83ec2ae4-gatsby-vs-next.png","imgix_url":"https://imgix.cosmicjs.com/0bc852a0-827e-11eb-8b5d-951d83ec2ae4-gatsby-vs-next.png"},{"children":null,"type":"textarea","title":"SEO Meta Description","key":"seo_meta_description","id":"qw6qXnGwwk","value":"Gatsby and Next.js are among the most popular frameworks for websites and online applications. In this article, we’re going to compare Gatsby vs. Next.js to help you choose the right framework for your next web project."},{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"oJLTCRhQnn","value":"2021-03-12"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2021-03-02T16:04:36.283Z","created_by":"5357ef811693be2118000001","modified_at":"2021-03-12T20:49:34.383Z","created":"2021-03-02T16:04:36.283Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/0bc852a0-827e-11eb-8b5d-951d83ec2ae4-gatsby-vs-next.png","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2021-03-12T20:49:34.383Z","metadata":{"author":{"_id":"5f5fac071936450007d8a01c","slug":"kyle-meagher","title":"Kyle Meagher","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"hsMOJCxIAj","value":"kylemeags"},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D2rdKO4lEL","value":"e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","url":"https://cdn.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","imgix_url":"https://imgix.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2020-09-14T17:44:39.110Z","created_by":"5357ef811693be2118000001","modified_at":"2020-09-14T17:45:09.251Z","created":"2020-09-14T17:44:39.110Z","status":"published","published_at":"2020-09-14T17:44:39.110Z","modified_by":"5357ef811693be2118000001","thumbnail":"https://imgix.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","metadata":{"username":"kylemeags","profile_picture":{"url":"https://cdn.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","imgix_url":"https://imgix.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg"}}},"teaser":"

Both Gatsby and Next.js are among the most popular frameworks for websites and online applications. In this article, we’re going to compare Gatsby vs. Next.js to help you choose the right framework for your next web project. We’ll talk about how they handle data and render static websites.

","featured_image":{"url":"https://cdn.cosmicjs.com/0bc852a0-827e-11eb-8b5d-951d83ec2ae4-gatsby-vs-next.png","imgix_url":"https://imgix.cosmicjs.com/0bc852a0-827e-11eb-8b5d-951d83ec2ae4-gatsby-vs-next.png"},"seo_meta_description":"Gatsby and Next.js are among the most popular frameworks for websites and online applications. In this article, we’re going to compare Gatsby vs. Next.js to help you choose the right framework for your next web project.","published_date":"2021-03-12"}},{"_id":"5c3774946bcb7526c0bddbe7","order":17,"slug":"dreamwalks-decoupled-approach-to-content-management","title":"DreamWalk's Decoupled Approach to Content Management","content":"

With a list of chart-topping apps to their name and a long history of mobile innovation, DreamWalk is the App Development agency trusted by some of the world’s biggest brands and most ambitious startups. With clients like Coca-Cola®, New Mexico Tourism and BP, DreamWalk is among the longest standing and most trusted app development firms in Australia. 



The team at DreamWalk was in search of a headless CMS that would speed up their development cycles. They needed to empower their developers with flexibility out-of-the-box while enabling their content managers to manage content in a web-based Dashboard. They chose Cosmic due to its easy content modeling tools that allowed them to set up client projects more quickly and easily than before, adding to their bottom line and expanding the tools available in their digital toolkit.



"At DreamWalk we always strive to give our clients the best possible customer experience. Cosmic enables us to work within tight budgets without compromising on that great experience."

— Karl Graf, Director and Mobile App Strategist
","metafields":[{"value":"DreamWalk","key":"company","title":"Company","type":"text","children":null},{"value":"App Development Agency","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"With a list of chart-topping apps to their name and a long history of mobile innovation, DreamWalk is the App Development agency trusted by some of the world’s biggest brands and most ambitious startups. With clients like Coca-Cola®, New Mexico Tourism and BP, DreamWalk is among the longest standing and most trusted app development firms in Australia. \n\n\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"f891dd10-14f6-11e9-ac3b-29773f4ac49e-A0Vz6NqU_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/f891dd10-14f6-11e9-ac3b-29773f4ac49e-A0Vz6NqU_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/f891dd10-14f6-11e9-ac3b-29773f4ac49e-A0Vz6NqU_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2019-01-10T16:36:36.690Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2019-01-11T16:56:26.753Z","metadata":{"company":"DreamWalk","industry_type":"App Development Agency","teaser":"With a list of chart-topping apps to their name and a long history of mobile innovation, DreamWalk is the App Development agency trusted by some of the world’s biggest brands and most ambitious startups. With clients like Coca-Cola®, New Mexico Tourism and BP, DreamWalk is among the longest standing and most trusted app development firms in Australia. \n\n\n","logo":{"url":"https://cdn.cosmicjs.com/f891dd10-14f6-11e9-ac3b-29773f4ac49e-A0Vz6NqU_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/f891dd10-14f6-11e9-ac3b-29773f4ac49e-A0Vz6NqU_400x400.jpg"}}},{"_id":"5fa9be3663b5b6000700adf3","order":17,"slug":"dashboard-experience-updates","title":"Dashboard Experience Updates","content":"

We've got some dashboard updates that should make things in your content management world a little better.

The updates include:

  1. Updated experience for selecting and reordering Object Metafields
  2. Object Type edit form updates
  3. Collapsable Metafields


Object Metafields Update
Object Metafields are a powerful tool in your Cosmic toolkit. They are used to connect Objects to create flexible content relationships. Selecting and reordering Object Metafields is now much easier thanks to a design update which includes vertical-only\r\nsorting and visible Object thumbnails. See the video below:


Object Type Form Updates
Adding and editing your Object Type content model and settings is now easier thanks in part to compressing Metafields and a new fixed save button for convenient saving.

We hope you like the new updates feature to help you use the content management dashboard with greater ease.  Please let us know if you have any questions / comments in our Slack channel, and follow us on Twitter for the latest updates to the Cosmic Headless CMS.

","metafields":[{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"OdyH7N3KKj","value":"2020-11-10"},{"children":null,"type":"object","title":"Author","key":"author","id":"xeRzWHtiJY","value":"5768b253163172890e00002c","object_type":"authors","object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"QszC4Y1Nnb","value":"","url":null,"imgix_url":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"changelogs","created_at":"2020-11-09T22:09:58.127Z","created_by":"5357ef811693be2118000001","modified_at":"2020-12-22T20:17:56.607Z","created":"2020-11-09T22:09:58.127Z","status":"published","thumbnail":"","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2020-12-22T20:17:56.607Z","metadata":{"published_date":"2020-11-10","author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"featured_image":{"url":null,"imgix_url":null}}},{"_id":"5768b27f163172890e00002e","order":17,"slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},{"_id":"5d4c21273f5dd45886228dbf","slug":"content-management-system-for-company-websites","title":"Content Management System for Company Websites","content":"

Cosmic JS provides a flexible and scalable content management system for developers and content creators managing content for company websites. Companies manage their content using the Cosmic JS Content Management System because it’s intuitive to manage content, approval workflows and team members. With features like Revision History, Content Preview and Scheduled Publishing, your team can build apps and manage content faster, together. 


What is Headless CMS Software?

Headless CMS Software works by providing non-technical editors with a Dashboard UI to model, create and publish content while providing developers with API tools and resources to integrate content with any website or app. By decoupling content from code, teams create a central content repository that can power all of their content-powered applications. 

","metafields":[{"value":"Content Management System for Company Websites","key":"solution_name","title":"Solution Name","type":"text","children":null},{"value":"1f543a50-b9df-11e9-a1f9-995c7306bb69-abe9e700-9dc2-11e9-a5b4-e5df9f8049d3-tripwire.png","key":"image","title":"Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/1f543a50-b9df-11e9-a1f9-995c7306bb69-abe9e700-9dc2-11e9-a5b4-e5df9f8049d3-tripwire.png","imgix_url":"https://imgix.cosmicjs.com/1f543a50-b9df-11e9-a1f9-995c7306bb69-abe9e700-9dc2-11e9-a5b4-e5df9f8049d3-tripwire.png"},{"object_type":"case-studies","value":"5c8a83a0792f9825b48d8133,5bd88cc2dcf8c4248f3ccc4b,5b86a2c6016461100076e5c7","key":"case_studies","title":"Case Studies","type":"objects","children":null,"objects":[{"_id":"5c8a83a0792f9825b48d8133","slug":"movespring-delivers-health-resources-using-cosmic-js","title":"MoveSpring Delivers Health Resources using Cosmic","content":"

MoveSpring is a fun, easy-to-use activity and steps challenge platform. Step your way to success with quick onboarding, real-time scoring, and flexible plan options. MoveSpring is used by organizations like Best Buy, Deloitte and the American Cancer Society to make health a priority, and fun, for their employees. 



MoveSpring manages multiple content resource sections for its users, broken out by Product, Wellness, Tips and Tricks as well as Technology. The team needed a way to easily add blog and help sections that a non-technical content creator could manage. They were able to quickly model and create their content, integrate the content with their website and add their content creators to start publishing and managing dynamic content. 




"We previously used WordPress for our blog content, but found that we really wanted to utilize the same toolset (React / GraphQL) and have the same look and feel as the rest of our site, which can be challenging for a developer not familiar with WordPress. 

Additionally, we have other dynamic content we would like our Customer Success Managers and Sales team to drive without relying on our development team to build and deploy. After discovering Cosmic, our developer was able to get our new blog up and running within days. Cosmic worked exactly how we hoped it would.”

— John Contreras, CEO  

","metafields":[{"children":null,"type":"text","title":"Company","key":"company","id":"g8E7TAzNzb","value":"MoveSpring"},{"children":null,"type":"text","title":"Industry Type","key":"industry_type","id":"IazxVO2F44","value":"Health and Wellness"},{"children":null,"type":"textarea","title":"Teaser","key":"teaser","id":"MdNSCJJ6KM","value":"From the creators of Stridekick, MoveSpring is a fun, easy-to-use activity challenge platform. Step your way to success with quick onboarding, real-time scoring, and flexible plan options. MoveSpring is used by organizations like Best Buy, Deloitte and the American Cancer Society to make health a priority, and fun, for their employees. \n\n\n\n"},{"children":null,"type":"file","title":"Logo","key":"logo","id":"z7uTNVr5hZ","value":"ee70e3e0-4f29-11e9-a314-fdf908b370ef-1z3YLQ0400x400.jpg","url":"https://cdn.cosmicjs.com/ee70e3e0-4f29-11e9-a314-fdf908b370ef-1z3YLQ0400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/ee70e3e0-4f29-11e9-a314-fdf908b370ef-1z3YLQ0400x400.jpg"},{"children":null,"type":"text","title":"Redirect Path","key":"redirect_path","id":"th15yqrwkhn0ja4ft3co","value":"/customers/movespring"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2019-03-14T16:38:56.354Z","status":"published","modified_at":"2020-11-05T20:43:27.287Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-11-05T20:43:27.287Z","unpublish_at":null},{"_id":"5bd88cc2dcf8c4248f3ccc4b","slug":"tripwire-interactive-builds-a-react-corporate-website","title":"Tripwire Interactive Builds a React Corporate Website","content":"

Tripwire Interactive is an entertainment software developer and publisher founded in 2005 by the award-winning mod team and winners of the 2004 edition of the “$1,000,000 Make Something Unreal” competition.



Gamers want games that grab their attention and will keep them coming back for more. Tripwire Interactive has been producing those types of games since the first Red Orchestra mod that won the "Make Something Unreal" competition in 2004. Since then Tripwire has won numerous Multiplayer and FPS Game of the Year awards from top editorial sites and millions have played a Red Orchestra or Killing Floor game, with an average play time of over 40 hours, per player, per game! 



Historically using an Umbraco system, The Tripwire Interactive team needed an easy way for their marketers to maintain marketing website content for their games' parent brand. Each new game needed a dedicated landing page with marketing content. Blog,\r\nCareer and Press feeds needed to be managed by the marketing team without bottlenecking the developers. The Tripwire Interactive team chose Cosmic as their dynamic content management solution as they built their new corporate website on a modern React\r\nstack. 


"Cosmic allowed us to easily integrate a secure and fast back-end API into our React app. Cosmic fit our needs with its simple web-based dashboard so that members of our marketing team can create, edit, and delete new content on the fly. Our team\r\nhas been enjoying the ease of use with the new system."

— Owen Liversidge, Lead Developer


","metafields":[{"value":"Tripwire Interactive","key":"company","title":"Company","type":"text","children":null},{"value":"Gaming","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Gamers want games that grab their attention and will keep them coming back for more. Tripwire Interactive has been producing those types of games since the first Red Orchestra mod that won the \"Make Something Unreal\" competition in 2004. Since then Tripwire has won numerous Multiplayer and FPS Game of the Year awards from top editorial sites and millions have played a Red Orchestra or Killing Floor game, with an average play time of over 40 hours, per player, per game! \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"bcc07550-dc64-11e8-a330-792a8fc6e55e-u7wjhcn6_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/bcc07550-dc64-11e8-a330-792a8fc6e55e-u7wjhcn6_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/bcc07550-dc64-11e8-a330-792a8fc6e55e-u7wjhcn6_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2018-10-30T16:54:26.538Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-11-08T20:12:40.566Z"},{"_id":"5b86a2c6016461100076e5c7","slug":"consolidating-the-content-chaos-tac-switches-from-wordpress-to-cosmic-js","title":"Consolidating the Content Chaos: TAC Switches from WordPress to Cosmic","content":"

TAC - The Arnold Companies is among the largest fuel wholesalers and aviation service providers in the country. Steady growth, positive financial results and a diverse industry base consistently make TAC one of the top private companies in the US. TAC is made up of many separate brands under one corporate identity, including TAC Energy, TAC Air and Keystone Aviation. 



With TAC's old website built as stand-alone sites that linked to each other on a WordPress foundation, the user experience was over-complicated and required too many steps for visitors to find what they were looking for. Being WordPress-based, it did not allow for clear information architecture to promote the different business lines within the portfolio. 

Through a structured RFP process to identify a partner in re-thinking the customer experience and content management system, interactive agency Simple Media and Cosmic were selected. Other platform options included WordPress, Drupal, and Joomla. 

Focused on building with a mobile-first approach and consolidating the chaos of the existing number of brand sites to bring harmony to the four brands and ease-of-use in content management, TAC found an outstanding and simple solution in Cosmic. 



To learn more about the development, Brandon Reid, Lead Developer on the project breaks down the stack: 

Development Team: "TAC’s backend is powered by Node, Next.js, and Express. Next.js is used for server side rendering capabilities for SEO optimization as well as site routing. Next.js also makes it easy to integrate with Babel and Webpack since they are built right in. The team used Next.js routing API to rendering page templates for pages that have the same design layouts. TAC’s frontend is powered by React.js and the world's most popular react UI framework, Material UI. In order to use Material UI with SSR, the team had to wrap the site in a JSSProvider and use CSSBaseline. For development they used Eslint as a linter for a cleaner and more consistent codebase. 



Since TAC uses ES6 JavaScript, the team had to also implement a very small amount of polyfill to transpile ES6 to ES5 in order for the site to work with IE11. Some notable node modules used were: 



TAC's development team started building the site by using Cosmic’s React Starter, which helped them get jump-started right away. Building TAC started with implementing all globals for the site (Header, Footer, Favicon, etc), so the developers quickly created some JavaScript request functions to pull data from the Cosmic Buckets using Cosmic’s Node API. The team added those global components to the sites main _app layout, so every page would be wrapped and rendered with those globals. From there they analyzed what pages would have reusable components across multiple pages or the site, and created component views for those pages based off their analysis. 

TAC was then able to efficiently knock out page designs and implement object types in the Cosmic bucket on the fly. As TAC got closer to site launch, they noticed compatibility issues with IE11 and had to come up with a solution. At first, they were going to do a browser sniff in the codebase to display something that would work on IE. Instead, the team implemented Babel and some polyfills to solve their  compatibility issues."





"Our goal in this project was not to reinvent the brands, but to simplify the communication and process for website content management. Cosmic has allowed us to become current in our presentation and relevant in our content push. Plus, the site is easier to use for visitors and staff alike."

— Tad Perryman, VP of Marketing, TAC - The Arnold Companies

","metafields":[{"value":"The Arnold Companies","key":"company","title":"Company","type":"text","children":null},{"value":"Energy / Aviation","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"TAC - The Arnold Companies is among the largest fuel wholesalers and aviation service providers in the country. Steady growth, positive financial results and a diverse industry base consistently make TAC one of the top private companies in the US. TAC is made up of many separate brands under one corporate identity, including TAC Energy, TAC Air and Keystone Aviation. \n\n\n\n\n\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"9aaed6c0-b04d-11e8-8760-cbfd96ceee1a-30210740-966e-11e8-ab08-31f1ed4cd97d-tac-full-logo.svg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/9aaed6c0-b04d-11e8-8760-cbfd96ceee1a-30210740-966e-11e8-ab08-31f1ed4cd97d-tac-full-logo.svg","imgix_url":"https://imgix.cosmicjs.com/9aaed6c0-b04d-11e8-8760-cbfd96ceee1a-30210740-966e-11e8-ab08-31f1ed4cd97d-tac-full-logo.svg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-03-01T22:26:36.367Z","created_by":"5716b504e9c686d006000073","created":"2018-08-29T13:42:30.982Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-12-20T14:40:21.379Z"}]},{"repeater_fields":"\"\"\"\"\"\"\"\"\"\"[{\"title\":\"Slug\",\"key\":\"slug\",\"value\":\"\",\"type\":\"text\",\"required\":false}]\"\"\"\"\"\"\"\"\"\"","value":"single-page-sales-funnel","key":"app_slugs","title":"App Slugs","type":"repeater","children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"single-page-sales-funnel","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"appointment-scheduler","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"angular-company-website","type":"text","required":false}]}]},{"repeater_fields":"\"\"\"\"\"\"\"\"\"\"[{\"title\":\"Slug\",\"key\":\"slug\",\"value\":\"\",\"type\":\"text\",\"required\":false}]\"\"\"\"\"\"\"\"\"\"","value":"contact-form","key":"extension_slugs","title":"Extension Slugs","type":"repeater","children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"contact-form","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"unsplash-photos","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"wordpress-importer","type":"text","required":false}]}]},{"key":"testimonial","title":"Testimonial","type":"html-textarea","children":null,"value":"

“Leveraging the Cosmic JS GraphQL API allows for easy updates to our news and blog, while keeping payloads small and fast. Integration with Cosmic JS could not be easier thanks to their great support. We look forward to developing more features on the platform.”

"},{"value":"Dustin Brink, Front End Developer at Derive Systems","key":"testimonial_credit","title":"Testimonial Credit","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"solutions","created":"2019-08-08T13:18:31.681Z","created_at":"2019-07-08T14:58:50.360Z","modified_at":"2019-08-08T13:22:31.225Z","status":"published","locale":null,"published_at":"2019-08-08T13:22:31.225Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"order":17,"metadata":{"solution_name":"Content Management System for Company Websites","image":{"url":"https://cdn.cosmicjs.com/1f543a50-b9df-11e9-a1f9-995c7306bb69-abe9e700-9dc2-11e9-a5b4-e5df9f8049d3-tripwire.png","imgix_url":"https://imgix.cosmicjs.com/1f543a50-b9df-11e9-a1f9-995c7306bb69-abe9e700-9dc2-11e9-a5b4-e5df9f8049d3-tripwire.png"},"case_studies":[{"_id":"5c8a83a0792f9825b48d8133","slug":"movespring-delivers-health-resources-using-cosmic-js","title":"MoveSpring Delivers Health Resources using Cosmic","content":"

MoveSpring is a fun, easy-to-use activity and steps challenge platform. Step your way to success with quick onboarding, real-time scoring, and flexible plan options. MoveSpring is used by organizations like Best Buy, Deloitte and the American Cancer Society to make health a priority, and fun, for their employees. 



MoveSpring manages multiple content resource sections for its users, broken out by Product, Wellness, Tips and Tricks as well as Technology. The team needed a way to easily add blog and help sections that a non-technical content creator could manage. They were able to quickly model and create their content, integrate the content with their website and add their content creators to start publishing and managing dynamic content. 




"We previously used WordPress for our blog content, but found that we really wanted to utilize the same toolset (React / GraphQL) and have the same look and feel as the rest of our site, which can be challenging for a developer not familiar with WordPress. 

Additionally, we have other dynamic content we would like our Customer Success Managers and Sales team to drive without relying on our development team to build and deploy. After discovering Cosmic, our developer was able to get our new blog up and running within days. Cosmic worked exactly how we hoped it would.”

— John Contreras, CEO  

","metafields":[{"children":null,"type":"text","title":"Company","key":"company","id":"g8E7TAzNzb","value":"MoveSpring"},{"children":null,"type":"text","title":"Industry Type","key":"industry_type","id":"IazxVO2F44","value":"Health and Wellness"},{"children":null,"type":"textarea","title":"Teaser","key":"teaser","id":"MdNSCJJ6KM","value":"From the creators of Stridekick, MoveSpring is a fun, easy-to-use activity challenge platform. Step your way to success with quick onboarding, real-time scoring, and flexible plan options. MoveSpring is used by organizations like Best Buy, Deloitte and the American Cancer Society to make health a priority, and fun, for their employees. \n\n\n\n"},{"children":null,"type":"file","title":"Logo","key":"logo","id":"z7uTNVr5hZ","value":"ee70e3e0-4f29-11e9-a314-fdf908b370ef-1z3YLQ0400x400.jpg","url":"https://cdn.cosmicjs.com/ee70e3e0-4f29-11e9-a314-fdf908b370ef-1z3YLQ0400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/ee70e3e0-4f29-11e9-a314-fdf908b370ef-1z3YLQ0400x400.jpg"},{"children":null,"type":"text","title":"Redirect Path","key":"redirect_path","id":"th15yqrwkhn0ja4ft3co","value":"/customers/movespring"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2019-03-14T16:38:56.354Z","status":"published","modified_at":"2020-11-05T20:43:27.287Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-11-05T20:43:27.287Z","unpublish_at":null,"metadata":{"company":"MoveSpring","industry_type":"Health and Wellness","teaser":"From the creators of Stridekick, MoveSpring is a fun, easy-to-use activity challenge platform. Step your way to success with quick onboarding, real-time scoring, and flexible plan options. MoveSpring is used by organizations like Best Buy, Deloitte and the American Cancer Society to make health a priority, and fun, for their employees. \n\n\n\n","logo":{"url":"https://cdn.cosmicjs.com/ee70e3e0-4f29-11e9-a314-fdf908b370ef-1z3YLQ0400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/ee70e3e0-4f29-11e9-a314-fdf908b370ef-1z3YLQ0400x400.jpg"},"redirect_path":"/customers/movespring"}},{"_id":"5bd88cc2dcf8c4248f3ccc4b","slug":"tripwire-interactive-builds-a-react-corporate-website","title":"Tripwire Interactive Builds a React Corporate Website","content":"

Tripwire Interactive is an entertainment software developer and publisher founded in 2005 by the award-winning mod team and winners of the 2004 edition of the “$1,000,000 Make Something Unreal” competition.



Gamers want games that grab their attention and will keep them coming back for more. Tripwire Interactive has been producing those types of games since the first Red Orchestra mod that won the "Make Something Unreal" competition in 2004. Since then Tripwire has won numerous Multiplayer and FPS Game of the Year awards from top editorial sites and millions have played a Red Orchestra or Killing Floor game, with an average play time of over 40 hours, per player, per game! 



Historically using an Umbraco system, The Tripwire Interactive team needed an easy way for their marketers to maintain marketing website content for their games' parent brand. Each new game needed a dedicated landing page with marketing content. Blog,\r\nCareer and Press feeds needed to be managed by the marketing team without bottlenecking the developers. The Tripwire Interactive team chose Cosmic as their dynamic content management solution as they built their new corporate website on a modern React\r\nstack. 


"Cosmic allowed us to easily integrate a secure and fast back-end API into our React app. Cosmic fit our needs with its simple web-based dashboard so that members of our marketing team can create, edit, and delete new content on the fly. Our team\r\nhas been enjoying the ease of use with the new system."

— Owen Liversidge, Lead Developer


","metafields":[{"value":"Tripwire Interactive","key":"company","title":"Company","type":"text","children":null},{"value":"Gaming","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Gamers want games that grab their attention and will keep them coming back for more. Tripwire Interactive has been producing those types of games since the first Red Orchestra mod that won the \"Make Something Unreal\" competition in 2004. Since then Tripwire has won numerous Multiplayer and FPS Game of the Year awards from top editorial sites and millions have played a Red Orchestra or Killing Floor game, with an average play time of over 40 hours, per player, per game! \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"bcc07550-dc64-11e8-a330-792a8fc6e55e-u7wjhcn6_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/bcc07550-dc64-11e8-a330-792a8fc6e55e-u7wjhcn6_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/bcc07550-dc64-11e8-a330-792a8fc6e55e-u7wjhcn6_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2018-10-30T16:54:26.538Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-11-08T20:12:40.566Z","metadata":{"company":"Tripwire Interactive","industry_type":"Gaming","teaser":"Gamers want games that grab their attention and will keep them coming back for more. Tripwire Interactive has been producing those types of games since the first Red Orchestra mod that won the \"Make Something Unreal\" competition in 2004. Since then Tripwire has won numerous Multiplayer and FPS Game of the Year awards from top editorial sites and millions have played a Red Orchestra or Killing Floor game, with an average play time of over 40 hours, per player, per game! \n","logo":{"url":"https://cdn.cosmicjs.com/bcc07550-dc64-11e8-a330-792a8fc6e55e-u7wjhcn6_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/bcc07550-dc64-11e8-a330-792a8fc6e55e-u7wjhcn6_400x400.jpg"}}},{"_id":"5b86a2c6016461100076e5c7","slug":"consolidating-the-content-chaos-tac-switches-from-wordpress-to-cosmic-js","title":"Consolidating the Content Chaos: TAC Switches from WordPress to Cosmic","content":"

TAC - The Arnold Companies is among the largest fuel wholesalers and aviation service providers in the country. Steady growth, positive financial results and a diverse industry base consistently make TAC one of the top private companies in the US. TAC is made up of many separate brands under one corporate identity, including TAC Energy, TAC Air and Keystone Aviation. 



With TAC's old website built as stand-alone sites that linked to each other on a WordPress foundation, the user experience was over-complicated and required too many steps for visitors to find what they were looking for. Being WordPress-based, it did not allow for clear information architecture to promote the different business lines within the portfolio. 

Through a structured RFP process to identify a partner in re-thinking the customer experience and content management system, interactive agency Simple Media and Cosmic were selected. Other platform options included WordPress, Drupal, and Joomla. 

Focused on building with a mobile-first approach and consolidating the chaos of the existing number of brand sites to bring harmony to the four brands and ease-of-use in content management, TAC found an outstanding and simple solution in Cosmic. 



To learn more about the development, Brandon Reid, Lead Developer on the project breaks down the stack: 

Development Team: "TAC’s backend is powered by Node, Next.js, and Express. Next.js is used for server side rendering capabilities for SEO optimization as well as site routing. Next.js also makes it easy to integrate with Babel and Webpack since they are built right in. The team used Next.js routing API to rendering page templates for pages that have the same design layouts. TAC’s frontend is powered by React.js and the world's most popular react UI framework, Material UI. In order to use Material UI with SSR, the team had to wrap the site in a JSSProvider and use CSSBaseline. For development they used Eslint as a linter for a cleaner and more consistent codebase. 



Since TAC uses ES6 JavaScript, the team had to also implement a very small amount of polyfill to transpile ES6 to ES5 in order for the site to work with IE11. Some notable node modules used were: 



TAC's development team started building the site by using Cosmic’s React Starter, which helped them get jump-started right away. Building TAC started with implementing all globals for the site (Header, Footer, Favicon, etc), so the developers quickly created some JavaScript request functions to pull data from the Cosmic Buckets using Cosmic’s Node API. The team added those global components to the sites main _app layout, so every page would be wrapped and rendered with those globals. From there they analyzed what pages would have reusable components across multiple pages or the site, and created component views for those pages based off their analysis. 

TAC was then able to efficiently knock out page designs and implement object types in the Cosmic bucket on the fly. As TAC got closer to site launch, they noticed compatibility issues with IE11 and had to come up with a solution. At first, they were going to do a browser sniff in the codebase to display something that would work on IE. Instead, the team implemented Babel and some polyfills to solve their  compatibility issues."





"Our goal in this project was not to reinvent the brands, but to simplify the communication and process for website content management. Cosmic has allowed us to become current in our presentation and relevant in our content push. Plus, the site is easier to use for visitors and staff alike."

— Tad Perryman, VP of Marketing, TAC - The Arnold Companies

","metafields":[{"value":"The Arnold Companies","key":"company","title":"Company","type":"text","children":null},{"value":"Energy / Aviation","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"TAC - The Arnold Companies is among the largest fuel wholesalers and aviation service providers in the country. Steady growth, positive financial results and a diverse industry base consistently make TAC one of the top private companies in the US. TAC is made up of many separate brands under one corporate identity, including TAC Energy, TAC Air and Keystone Aviation. \n\n\n\n\n\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"9aaed6c0-b04d-11e8-8760-cbfd96ceee1a-30210740-966e-11e8-ab08-31f1ed4cd97d-tac-full-logo.svg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/9aaed6c0-b04d-11e8-8760-cbfd96ceee1a-30210740-966e-11e8-ab08-31f1ed4cd97d-tac-full-logo.svg","imgix_url":"https://imgix.cosmicjs.com/9aaed6c0-b04d-11e8-8760-cbfd96ceee1a-30210740-966e-11e8-ab08-31f1ed4cd97d-tac-full-logo.svg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-03-01T22:26:36.367Z","created_by":"5716b504e9c686d006000073","created":"2018-08-29T13:42:30.982Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-12-20T14:40:21.379Z","metadata":{"company":"The Arnold Companies","industry_type":"Energy / Aviation","teaser":"TAC - The Arnold Companies is among the largest fuel wholesalers and aviation service providers in the country. Steady growth, positive financial results and a diverse industry base consistently make TAC one of the top private companies in the US. TAC is made up of many separate brands under one corporate identity, including TAC Energy, TAC Air and Keystone Aviation. \n\n\n\n\n\n","logo":{"url":"https://cdn.cosmicjs.com/9aaed6c0-b04d-11e8-8760-cbfd96ceee1a-30210740-966e-11e8-ab08-31f1ed4cd97d-tac-full-logo.svg","imgix_url":"https://imgix.cosmicjs.com/9aaed6c0-b04d-11e8-8760-cbfd96ceee1a-30210740-966e-11e8-ab08-31f1ed4cd97d-tac-full-logo.svg"}}}],"app_slugs":[{"slug":"single-page-sales-funnel"},{"slug":"appointment-scheduler"},{"slug":"angular-company-website"}],"extension_slugs":[{"slug":"contact-form"},{"slug":"unsplash-photos"},{"slug":"wordpress-importer"}],"testimonial":"

“Leveraging the Cosmic JS GraphQL API allows for easy updates to our news and blog, while keeping payloads small and fast. Integration with Cosmic JS could not be easier thanks to their great support. We look forward to developing more features on the platform.”

","testimonial_credit":"Dustin Brink, Front End Developer at Derive Systems"}},{"_id":"5ade1c152b218820ec24befc","order":17,"slug":"nuxtjs-cms","title":"Nuxt.js CMS ","content":"

Cosmic JS makes it easy to manage content for your Nuxt.js applications. Install the Official Cosmic JS JavaScript Client to integrate content into your Nuxt.js app in minutes.  Get a feel for Nuxt.js by taking a spin through our Nuxt.js Apps and check out the apps and resources below.

Nuxt.js CMS Articles

Developer Community: Nuxt.js Articles
Nuxt.js Website Boilerplate

Nuxt.js CMS Apps

Nuxt.js Website
Vue.js Website
Vue.js Portfolio Site
Nuxt.js Apps

Nuxt.js CMS Resources

Cosmic JS Docs
Official JavaScript Client
Cosmic JS GitHub

Examples

npm i cosmicjs

Then in your JavaScript file, get your content:

\">
","metafields":[{"children":null,"type":"file","title":"Image","key":"image","id":"AGlVVduTEl","value":"90dd0ea0-9304-11ea-838a-0523b52a08cb-nuxt-cms.svg","url":"https://cdn.cosmicjs.com/90dd0ea0-9304-11ea-838a-0523b52a08cb-nuxt-cms.svg","imgix_url":"https://imgix.cosmicjs.com/90dd0ea0-9304-11ea-838a-0523b52a08cb-nuxt-cms.svg"},{"children":null,"type":"file","title":"Thumbnail","key":"thumbnail","id":"6IhUIEED65","value":"2d15d4f0-9300-11ea-838a-0523b52a08cb-nuxt-square.svg","url":"https://cdn.cosmicjs.com/2d15d4f0-9300-11ea-838a-0523b52a08cb-nuxt-square.svg","imgix_url":"https://imgix.cosmicjs.com/2d15d4f0-9300-11ea-838a-0523b52a08cb-nuxt-square.svg"},{"children":null,"type":"html-textarea","title":"Blurb","key":"blurb","id":"89zEZXAMLg","value":"

Cosmic is the best CMS for Nuxt.js websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

"},{"children":null,"type":"text","title":"Headline","key":"headline","id":"hMaIRPHoOL","value":"Nuxt.js"},{"children":null,"type":"text","title":"SEO Description","key":"seo_description","id":"MUd7ws2B5g","value":"Cosmic is the best CMS for Nuxt.js websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators."},{"children":null,"type":"file","title":"Twitter Card Image","key":"twitter_card_image","id":"B3Fy1T01GK","value":"ac8d09c0-4883-11e8-9a46-f376a117cc0e-UAIojlzx_400x400.jpg","url":"https://cdn.cosmicjs.com/ac8d09c0-4883-11e8-9a46-f376a117cc0e-UAIojlzx_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/ac8d09c0-4883-11e8-9a46-f376a117cc0e-UAIojlzx_400x400.jpg"},{"children":null,"type":"html-textarea","title":"Code Example","key":"code_example","id":"zBgC5SpACT","value":""},{"children":null,"type":"text","title":"SEO Title","key":"seo_title","id":"FSAroUazfX","value":"Best Headless CMS for Nuxt.js"},{"children":[],"type":"repeater","title":"Videos","key":"videos","id":"z4AQvlVRiS","value":"","repeater_fields":[{"title":"Title","key":"title","value":"","type":"text","required":false},{"title":"Link","key":"link","value":"","type":"text","required":false}]}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"kb-articles","created_at":"2017-04-22T23:07:51.159Z","created_by":"5357ef811693be2118000001","created":"2018-04-23T17:47:01.490Z","status":"published","modified_at":"2020-06-27T19:17:02.787Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-06-27T19:17:02.787Z","unpublish_at":null,"metadata":{"image":{"url":"https://cdn.cosmicjs.com/90dd0ea0-9304-11ea-838a-0523b52a08cb-nuxt-cms.svg","imgix_url":"https://imgix.cosmicjs.com/90dd0ea0-9304-11ea-838a-0523b52a08cb-nuxt-cms.svg"},"thumbnail":{"url":"https://cdn.cosmicjs.com/2d15d4f0-9300-11ea-838a-0523b52a08cb-nuxt-square.svg","imgix_url":"https://imgix.cosmicjs.com/2d15d4f0-9300-11ea-838a-0523b52a08cb-nuxt-square.svg"},"blurb":"

Cosmic is the best CMS for Nuxt.js websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

","headline":"Nuxt.js","seo_description":"Cosmic is the best CMS for Nuxt.js websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.","twitter_card_image":{"url":"https://cdn.cosmicjs.com/ac8d09c0-4883-11e8-9a46-f376a117cc0e-UAIojlzx_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/ac8d09c0-4883-11e8-9a46-f376a117cc0e-UAIojlzx_400x400.jpg"},"code_example":"","seo_title":"Best Headless CMS for Nuxt.js","videos":[]}},{"_id":"5d4b18186fe02a4021b4e13f","slug":"content-management-system-for-blogs","title":"Content Management System for Blogs","content":"

Cosmic JS provides a flexible and scalable content management system for developers and content creators managing blogs. Companies manage their blog content using the Cosmic JS Content Management System because it’s intuitive to manage content, approval workflows and team members. With features like Revision History, Content Preview and Scheduled Publishing, your team can build apps and manage content faster, together. 


What is Headless CMS Software?

Headless CMS Software works by providing non-technical editors with a Dashboard UI to model, create and publish content while providing developers with API tools and resources to integrate content with any website or app. By decoupling content from code, teams create a central content repository that can power all of their content-powered applications. 

","metafields":[{"value":"Content Management System for Blogs","key":"solution_name","title":"Solution Name","type":"text","children":null},{"value":"ec1d5de0-9dc0-11e9-a5b4-e5df9f8049d3-Hackernoon.png","key":"image","title":"Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/ec1d5de0-9dc0-11e9-a5b4-e5df9f8049d3-Hackernoon.png","imgix_url":"https://imgix.cosmicjs.com/ec1d5de0-9dc0-11e9-a5b4-e5df9f8049d3-Hackernoon.png"},{"object_type":"case-studies","value":"5c8a83a0792f9825b48d8133,5a2455620cb0e3291c00002e,59f102cbd4de657279002f97","key":"case_studies","title":"Case Studies","type":"objects","children":null,"objects":[{"_id":"5c8a83a0792f9825b48d8133","slug":"movespring-delivers-health-resources-using-cosmic-js","title":"MoveSpring Delivers Health Resources using Cosmic","content":"

MoveSpring is a fun, easy-to-use activity and steps challenge platform. Step your way to success with quick onboarding, real-time scoring, and flexible plan options. MoveSpring is used by organizations like Best Buy, Deloitte and the American Cancer Society to make health a priority, and fun, for their employees. 



MoveSpring manages multiple content resource sections for its users, broken out by Product, Wellness, Tips and Tricks as well as Technology. The team needed a way to easily add blog and help sections that a non-technical content creator could manage. They were able to quickly model and create their content, integrate the content with their website and add their content creators to start publishing and managing dynamic content. 




"We previously used WordPress for our blog content, but found that we really wanted to utilize the same toolset (React / GraphQL) and have the same look and feel as the rest of our site, which can be challenging for a developer not familiar with WordPress. 

Additionally, we have other dynamic content we would like our Customer Success Managers and Sales team to drive without relying on our development team to build and deploy. After discovering Cosmic, our developer was able to get our new blog up and running within days. Cosmic worked exactly how we hoped it would.”

— John Contreras, CEO  

","metafields":[{"children":null,"type":"text","title":"Company","key":"company","id":"g8E7TAzNzb","value":"MoveSpring"},{"children":null,"type":"text","title":"Industry Type","key":"industry_type","id":"IazxVO2F44","value":"Health and Wellness"},{"children":null,"type":"textarea","title":"Teaser","key":"teaser","id":"MdNSCJJ6KM","value":"From the creators of Stridekick, MoveSpring is a fun, easy-to-use activity challenge platform. Step your way to success with quick onboarding, real-time scoring, and flexible plan options. MoveSpring is used by organizations like Best Buy, Deloitte and the American Cancer Society to make health a priority, and fun, for their employees. \n\n\n\n"},{"children":null,"type":"file","title":"Logo","key":"logo","id":"z7uTNVr5hZ","value":"ee70e3e0-4f29-11e9-a314-fdf908b370ef-1z3YLQ0400x400.jpg","url":"https://cdn.cosmicjs.com/ee70e3e0-4f29-11e9-a314-fdf908b370ef-1z3YLQ0400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/ee70e3e0-4f29-11e9-a314-fdf908b370ef-1z3YLQ0400x400.jpg"},{"children":null,"type":"text","title":"Redirect Path","key":"redirect_path","id":"th15yqrwkhn0ja4ft3co","value":"/customers/movespring"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2019-03-14T16:38:56.354Z","status":"published","modified_at":"2020-11-05T20:43:27.287Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-11-05T20:43:27.287Z","unpublish_at":null},{"_id":"5a2455620cb0e3291c00002e","slug":"acculevel-deploys-a-blog","title":"Acculevel Deploys a Blog","content":"

Acculevel is Your Foundation Expert. Serving the Midwest United States for the last 20 years, Acculevel knows what it means to serve and do a job right. Customer retention, reviews and loyalty are the name of their game, so to optimize these efforts and keep customers engaged and informed, Acculevel is scaling up their digital presence through its upcoming website, a new mobile application and more. Led by a new Chief Technology Officer overseeing developers and content editors, here's how Acculevel is ensuring their own foundation is solid.

Mired in an installed WordPress system was leaving Acculevel without the flexibility needed to nimbly build and publish content campaigns to engage with customers. Acculevel's tech team is currently building out a new zippy website built on a Node.js stack, complete with API integrations for ACH Authentication (Plaid) and Payment Gateway (Stripe). Acculevel needed a blog feed that would allow their new API-first methodology to pull data via the cloud while allowing their content editors to easily build and manage content in a WYSIWYG editor. With Cosmic, they were able to build and deploy a fully functioning blog in under 30 minutes.



"Cosmic provided us with a seamless on-boarding experience for creating a Bucket to manage blog content for our growing organization. We needed a programming-language agnostic API to manage content both within our existing WordPress website as well as within our new Node.js web application. Cosmic fit the bill perfectly with its simple Object schema and powerful Metafields. With Cosmic, content is just data and you can pull it however you'd like, wherever you like, allowing us  to build new tools in the future such as survey tools, employee forums and more.”

— Dylan Marsh, Chief Technology Officer  

","metafields":[{"value":"Acculevel ","key":"company","title":"Company","type":"text","children":null},{"value":"Construction","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Acculevel needed a blog feed that would allow their new API-first methodology to pull data via the cloud while allowing their content editor to easily build and manage content in a WYSIWYG editor. With Cosmic, they were able to build and deploy a fully functioning blog in under 30 minutes.\n\n\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"7621bb20-dab4-11e7-82e3-e92aaea009f5-o.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/7621bb20-dab4-11e7-82e3-e92aaea009f5-o.jpg","imgix_url":"https://imgix.cosmicjs.com/7621bb20-dab4-11e7-82e3-e92aaea009f5-o.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2017-12-03T19:49:54.515Z","created_by":"5716b504e9c686d006000073","created":"2017-12-03T19:49:54.515Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5357ef811693be2118000001","publish_at":null},{"_id":"59f102cbd4de657279002f97","slug":"datalyze-solutions-adds-blog-and-job-feeds","title":"Datalyze Solutions Adds a Blog Feed","content":"

Data. Intelligence. Applications. Location Based Analytics. When everything is converging, teams needs collaboration tools to make their lives easier. That's why Datalyze Solutions chooses Cosmic to deliver its content from the cloud for its Blog feeds. 



"Cosmic has been in use at Datalyze Solutions for more than one and a half years. Cosmic has become a critically important tool for us to publish blog posts quickly and easily. This way, our customers and partners can stay informed about the latest news from our company and other industry-relevant information. Cosmic offers exactly the flexibility and features we really need as content editors!"

— Carolin Bauer, Content Editor and Marketing Manager

","metafields":[{"value":"Datalyze Solutions","key":"company","title":"Company","type":"text","children":null},{"value":"Internet","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Data. Intelligence. Applications. Location Based Analytics. When everything is converging, teams needs collaboration tools to make their lives easier.","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"b4173bb0-dc2d-11e7-9201-fb5838341592-DS_Logo_Blau.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/b4173bb0-dc2d-11e7-9201-fb5838341592-DS_Logo_Blau.png","imgix_url":"https://imgix.cosmicjs.com/b4173bb0-dc2d-11e7-9201-fb5838341592-DS_Logo_Blau.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2017-10-25T21:31:55.033Z","created_by":"5716b504e9c686d006000073","created":"2017-10-25T21:31:55.033Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null}]},{"repeater_fields":"\"\"\"\"\"\"[{\"title\":\"Slug\",\"key\":\"slug\",\"value\":\"\",\"type\":\"text\",\"required\":false}]\"\"\"\"\"\"","value":"simple-blog","key":"app_slugs","title":"App Slugs","type":"repeater","children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"simple-blog","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"react-static-blog","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"simple-vue-blog","type":"text","required":false}]}]},{"repeater_fields":"\"\"\"\"\"\"[{\"title\":\"Slug\",\"key\":\"slug\",\"value\":\"\",\"type\":\"text\",\"required\":false}]\"\"\"\"\"\"","value":"contact-form","key":"extension_slugs","title":"Extension Slugs","type":"repeater","children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"contact-form","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"unsplash-photos","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"wordpress-importer","type":"text","required":false}]}]},{"key":"testimonial","title":"Testimonial","type":"html-textarea","children":null,"value":"

"When the opportunity to work with Cosmic JS came up, I jumped on the opportunity. Using an API-first content management platform like Cosmic JS was perfect (and super simple) for connecting best-in-class services like Algolia for search and SendGrid for email.  In terms of providing the framework for teams to quickly build quality professional apps, Cosmic JS is definitely onto something.”

"},{"value":"David Smooke, CEO at Hacker Noon","key":"testimonial_credit","title":"Testimonial Credit","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"solutions","created":"2019-08-07T18:27:36.982Z","created_at":"2019-07-08T14:58:50.360Z","modified_at":"2019-08-08T13:18:10.376Z","status":"published","locale":null,"published_at":"2019-08-08T13:18:10.376Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"order":18,"metadata":{"solution_name":"Content Management System for Blogs","image":{"url":"https://cdn.cosmicjs.com/ec1d5de0-9dc0-11e9-a5b4-e5df9f8049d3-Hackernoon.png","imgix_url":"https://imgix.cosmicjs.com/ec1d5de0-9dc0-11e9-a5b4-e5df9f8049d3-Hackernoon.png"},"case_studies":[{"_id":"5c8a83a0792f9825b48d8133","slug":"movespring-delivers-health-resources-using-cosmic-js","title":"MoveSpring Delivers Health Resources using Cosmic","content":"

MoveSpring is a fun, easy-to-use activity and steps challenge platform. Step your way to success with quick onboarding, real-time scoring, and flexible plan options. MoveSpring is used by organizations like Best Buy, Deloitte and the American Cancer Society to make health a priority, and fun, for their employees. 



MoveSpring manages multiple content resource sections for its users, broken out by Product, Wellness, Tips and Tricks as well as Technology. The team needed a way to easily add blog and help sections that a non-technical content creator could manage. They were able to quickly model and create their content, integrate the content with their website and add their content creators to start publishing and managing dynamic content. 




"We previously used WordPress for our blog content, but found that we really wanted to utilize the same toolset (React / GraphQL) and have the same look and feel as the rest of our site, which can be challenging for a developer not familiar with WordPress. 

Additionally, we have other dynamic content we would like our Customer Success Managers and Sales team to drive without relying on our development team to build and deploy. After discovering Cosmic, our developer was able to get our new blog up and running within days. Cosmic worked exactly how we hoped it would.”

— John Contreras, CEO  

","metafields":[{"children":null,"type":"text","title":"Company","key":"company","id":"g8E7TAzNzb","value":"MoveSpring"},{"children":null,"type":"text","title":"Industry Type","key":"industry_type","id":"IazxVO2F44","value":"Health and Wellness"},{"children":null,"type":"textarea","title":"Teaser","key":"teaser","id":"MdNSCJJ6KM","value":"From the creators of Stridekick, MoveSpring is a fun, easy-to-use activity challenge platform. Step your way to success with quick onboarding, real-time scoring, and flexible plan options. MoveSpring is used by organizations like Best Buy, Deloitte and the American Cancer Society to make health a priority, and fun, for their employees. \n\n\n\n"},{"children":null,"type":"file","title":"Logo","key":"logo","id":"z7uTNVr5hZ","value":"ee70e3e0-4f29-11e9-a314-fdf908b370ef-1z3YLQ0400x400.jpg","url":"https://cdn.cosmicjs.com/ee70e3e0-4f29-11e9-a314-fdf908b370ef-1z3YLQ0400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/ee70e3e0-4f29-11e9-a314-fdf908b370ef-1z3YLQ0400x400.jpg"},{"children":null,"type":"text","title":"Redirect Path","key":"redirect_path","id":"th15yqrwkhn0ja4ft3co","value":"/customers/movespring"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2019-03-14T16:38:56.354Z","status":"published","modified_at":"2020-11-05T20:43:27.287Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-11-05T20:43:27.287Z","unpublish_at":null,"metadata":{"company":"MoveSpring","industry_type":"Health and Wellness","teaser":"From the creators of Stridekick, MoveSpring is a fun, easy-to-use activity challenge platform. Step your way to success with quick onboarding, real-time scoring, and flexible plan options. MoveSpring is used by organizations like Best Buy, Deloitte and the American Cancer Society to make health a priority, and fun, for their employees. \n\n\n\n","logo":{"url":"https://cdn.cosmicjs.com/ee70e3e0-4f29-11e9-a314-fdf908b370ef-1z3YLQ0400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/ee70e3e0-4f29-11e9-a314-fdf908b370ef-1z3YLQ0400x400.jpg"},"redirect_path":"/customers/movespring"}},{"_id":"5a2455620cb0e3291c00002e","slug":"acculevel-deploys-a-blog","title":"Acculevel Deploys a Blog","content":"

Acculevel is Your Foundation Expert. Serving the Midwest United States for the last 20 years, Acculevel knows what it means to serve and do a job right. Customer retention, reviews and loyalty are the name of their game, so to optimize these efforts and keep customers engaged and informed, Acculevel is scaling up their digital presence through its upcoming website, a new mobile application and more. Led by a new Chief Technology Officer overseeing developers and content editors, here's how Acculevel is ensuring their own foundation is solid.

Mired in an installed WordPress system was leaving Acculevel without the flexibility needed to nimbly build and publish content campaigns to engage with customers. Acculevel's tech team is currently building out a new zippy website built on a Node.js stack, complete with API integrations for ACH Authentication (Plaid) and Payment Gateway (Stripe). Acculevel needed a blog feed that would allow their new API-first methodology to pull data via the cloud while allowing their content editors to easily build and manage content in a WYSIWYG editor. With Cosmic, they were able to build and deploy a fully functioning blog in under 30 minutes.



"Cosmic provided us with a seamless on-boarding experience for creating a Bucket to manage blog content for our growing organization. We needed a programming-language agnostic API to manage content both within our existing WordPress website as well as within our new Node.js web application. Cosmic fit the bill perfectly with its simple Object schema and powerful Metafields. With Cosmic, content is just data and you can pull it however you'd like, wherever you like, allowing us  to build new tools in the future such as survey tools, employee forums and more.”

— Dylan Marsh, Chief Technology Officer  

","metafields":[{"value":"Acculevel ","key":"company","title":"Company","type":"text","children":null},{"value":"Construction","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Acculevel needed a blog feed that would allow their new API-first methodology to pull data via the cloud while allowing their content editor to easily build and manage content in a WYSIWYG editor. With Cosmic, they were able to build and deploy a fully functioning blog in under 30 minutes.\n\n\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"7621bb20-dab4-11e7-82e3-e92aaea009f5-o.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/7621bb20-dab4-11e7-82e3-e92aaea009f5-o.jpg","imgix_url":"https://imgix.cosmicjs.com/7621bb20-dab4-11e7-82e3-e92aaea009f5-o.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2017-12-03T19:49:54.515Z","created_by":"5716b504e9c686d006000073","created":"2017-12-03T19:49:54.515Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5357ef811693be2118000001","publish_at":null,"metadata":{"company":"Acculevel ","industry_type":"Construction","teaser":"Acculevel needed a blog feed that would allow their new API-first methodology to pull data via the cloud while allowing their content editor to easily build and manage content in a WYSIWYG editor. With Cosmic, they were able to build and deploy a fully functioning blog in under 30 minutes.\n\n\n","logo":{"url":"https://cdn.cosmicjs.com/7621bb20-dab4-11e7-82e3-e92aaea009f5-o.jpg","imgix_url":"https://imgix.cosmicjs.com/7621bb20-dab4-11e7-82e3-e92aaea009f5-o.jpg"}}},{"_id":"59f102cbd4de657279002f97","slug":"datalyze-solutions-adds-blog-and-job-feeds","title":"Datalyze Solutions Adds a Blog Feed","content":"

Data. Intelligence. Applications. Location Based Analytics. When everything is converging, teams needs collaboration tools to make their lives easier. That's why Datalyze Solutions chooses Cosmic to deliver its content from the cloud for its Blog feeds. 



"Cosmic has been in use at Datalyze Solutions for more than one and a half years. Cosmic has become a critically important tool for us to publish blog posts quickly and easily. This way, our customers and partners can stay informed about the latest news from our company and other industry-relevant information. Cosmic offers exactly the flexibility and features we really need as content editors!"

— Carolin Bauer, Content Editor and Marketing Manager

","metafields":[{"value":"Datalyze Solutions","key":"company","title":"Company","type":"text","children":null},{"value":"Internet","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Data. Intelligence. Applications. Location Based Analytics. When everything is converging, teams needs collaboration tools to make their lives easier.","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"b4173bb0-dc2d-11e7-9201-fb5838341592-DS_Logo_Blau.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/b4173bb0-dc2d-11e7-9201-fb5838341592-DS_Logo_Blau.png","imgix_url":"https://imgix.cosmicjs.com/b4173bb0-dc2d-11e7-9201-fb5838341592-DS_Logo_Blau.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2017-10-25T21:31:55.033Z","created_by":"5716b504e9c686d006000073","created":"2017-10-25T21:31:55.033Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"metadata":{"company":"Datalyze Solutions","industry_type":"Internet","teaser":"Data. Intelligence. Applications. Location Based Analytics. When everything is converging, teams needs collaboration tools to make their lives easier.","logo":{"url":"https://cdn.cosmicjs.com/b4173bb0-dc2d-11e7-9201-fb5838341592-DS_Logo_Blau.png","imgix_url":"https://imgix.cosmicjs.com/b4173bb0-dc2d-11e7-9201-fb5838341592-DS_Logo_Blau.png"}}}],"app_slugs":[{"slug":"simple-blog"},{"slug":"react-static-blog"},{"slug":"simple-vue-blog"}],"extension_slugs":[{"slug":"contact-form"},{"slug":"unsplash-photos"},{"slug":"wordpress-importer"}],"testimonial":"

"When the opportunity to work with Cosmic JS came up, I jumped on the opportunity. Using an API-first content management platform like Cosmic JS was perfect (and super simple) for connecting best-in-class services like Algolia for search and SendGrid for email.  In terms of providing the framework for teams to quickly build quality professional apps, Cosmic JS is definitely onto something.”

","testimonial_credit":"David Smooke, CEO at Hacker Noon"}},{"_id":"5b4505e4ca5d6f04085fe63c","order":18,"slug":"serverless-cms","title":"Serverless CMS","content":"

Cosmic JS makes it easy to manage content for your Serverless applications. Get a feel for going Serverless by checking out the tutorials below.

Serverless Quickstart

Install a Cosmic-powered Serverless Starter app in seconds🔥

npm i -g cosmic-cli\r\ncosmic init serverless-starter\r\ncd serverless-starter\r\ncosmic start

Serverless CMS Articles

Developer Community: Serverless Articles
Build and Deploy a Serverless Node.js App powered by Cosmic JS

Serverless CMS Resources

Serverless Starter App
Cosmic JS Docs
Official JavaScript Client
Cosmic JS GitHub

Using the Cosmic JS NPM Module

npm i cosmicjs

Then in your JavaScript file, get your content:

\">


","metafields":[{"children":null,"type":"file","title":"Image","key":"image","id":"HzvvXPsTUp","value":"b3d3d7f0-8642-11ea-8e16-e7cd20df21fe-serverless.svg","url":"https://cdn.cosmicjs.com/b3d3d7f0-8642-11ea-8e16-e7cd20df21fe-serverless.svg","imgix_url":"https://imgix.cosmicjs.com/b3d3d7f0-8642-11ea-8e16-e7cd20df21fe-serverless.svg"},{"children":null,"type":"file","title":"Thumbnail","key":"thumbnail","id":"UxUqr8Ve2n","value":"344fcf60-dfae-11e9-945b-21c993b3c1af-serverless.jpg","url":"https://cdn.cosmicjs.com/344fcf60-dfae-11e9-945b-21c993b3c1af-serverless.jpg","imgix_url":"https://imgix.cosmicjs.com/344fcf60-dfae-11e9-945b-21c993b3c1af-serverless.jpg"},{"children":null,"type":"html-textarea","title":"Blurb","key":"blurb","id":"kTOZogPzn8","value":"

Cosmic is the best CMS for Serverless websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

"},{"children":null,"type":"text","title":"Headline","key":"headline","id":"AxxGAWcy7Z","value":"Serverless"},{"children":null,"type":"text","title":"SEO Description","key":"seo_description","id":"4LcEvezt5O","value":"Cosmic is the best CMS for Serverless websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators."},{"children":null,"type":"file","title":"Twitter Card Image","key":"twitter_card_image","id":"uJE5tn3U1K","value":"37d9e080-dfae-11e9-945b-21c993b3c1af-serverless.jpg","url":"https://cdn.cosmicjs.com/37d9e080-dfae-11e9-945b-21c993b3c1af-serverless.jpg","imgix_url":"https://imgix.cosmicjs.com/37d9e080-dfae-11e9-945b-21c993b3c1af-serverless.jpg"},{"children":null,"type":"html-textarea","title":"Code Example","key":"code_example","id":"qwan8cCdtH","value":""},{"children":null,"type":"text","title":"SEO Title","key":"seo_title","id":"2qt4KI2q2d","value":"Best Headless CMS for Serverless"},{"children":[],"type":"repeater","title":"Videos","key":"videos","id":"cWp7EPtNpK","value":"","repeater_fields":[{"title":"Title","key":"title","value":"","type":"text","required":false},{"title":"Link","key":"link","value":"","type":"text","required":false}]}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"kb-articles","created_at":"2017-04-22T23:09:01.747Z","created_by":"5357ef811693be2118000001","created":"2018-07-10T19:15:48.336Z","status":"published","modified_at":"2020-06-27T19:17:22.141Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-06-27T19:17:22.141Z","unpublish_at":null,"metadata":{"image":{"url":"https://cdn.cosmicjs.com/b3d3d7f0-8642-11ea-8e16-e7cd20df21fe-serverless.svg","imgix_url":"https://imgix.cosmicjs.com/b3d3d7f0-8642-11ea-8e16-e7cd20df21fe-serverless.svg"},"thumbnail":{"url":"https://cdn.cosmicjs.com/344fcf60-dfae-11e9-945b-21c993b3c1af-serverless.jpg","imgix_url":"https://imgix.cosmicjs.com/344fcf60-dfae-11e9-945b-21c993b3c1af-serverless.jpg"},"blurb":"

Cosmic is the best CMS for Serverless websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

","headline":"Serverless","seo_description":"Cosmic is the best CMS for Serverless websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.","twitter_card_image":{"url":"https://cdn.cosmicjs.com/37d9e080-dfae-11e9-945b-21c993b3c1af-serverless.jpg","imgix_url":"https://imgix.cosmicjs.com/37d9e080-dfae-11e9-945b-21c993b3c1af-serverless.jpg"},"code_example":"","seo_title":"Best Headless CMS for Serverless","videos":[]}},{"_id":"5c8a83a0792f9825b48d8133","order":18,"slug":"movespring-delivers-health-resources-using-cosmic-js","title":"MoveSpring Delivers Health Resources using Cosmic","content":"

MoveSpring is a fun, easy-to-use activity and steps challenge platform. Step your way to success with quick onboarding, real-time scoring, and flexible plan options. MoveSpring is used by organizations like Best Buy, Deloitte and the American Cancer Society to make health a priority, and fun, for their employees. 



MoveSpring manages multiple content resource sections for its users, broken out by Product, Wellness, Tips and Tricks as well as Technology. The team needed a way to easily add blog and help sections that a non-technical content creator could manage. They were able to quickly model and create their content, integrate the content with their website and add their content creators to start publishing and managing dynamic content. 




"We previously used WordPress for our blog content, but found that we really wanted to utilize the same toolset (React / GraphQL) and have the same look and feel as the rest of our site, which can be challenging for a developer not familiar with WordPress. 

Additionally, we have other dynamic content we would like our Customer Success Managers and Sales team to drive without relying on our development team to build and deploy. After discovering Cosmic, our developer was able to get our new blog up and running within days. Cosmic worked exactly how we hoped it would.”

— John Contreras, CEO  

","metafields":[{"children":null,"type":"text","title":"Company","key":"company","id":"g8E7TAzNzb","value":"MoveSpring"},{"children":null,"type":"text","title":"Industry Type","key":"industry_type","id":"IazxVO2F44","value":"Health and Wellness"},{"children":null,"type":"textarea","title":"Teaser","key":"teaser","id":"MdNSCJJ6KM","value":"From the creators of Stridekick, MoveSpring is a fun, easy-to-use activity challenge platform. Step your way to success with quick onboarding, real-time scoring, and flexible plan options. MoveSpring is used by organizations like Best Buy, Deloitte and the American Cancer Society to make health a priority, and fun, for their employees. \n\n\n\n"},{"children":null,"type":"file","title":"Logo","key":"logo","id":"z7uTNVr5hZ","value":"ee70e3e0-4f29-11e9-a314-fdf908b370ef-1z3YLQ0400x400.jpg","url":"https://cdn.cosmicjs.com/ee70e3e0-4f29-11e9-a314-fdf908b370ef-1z3YLQ0400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/ee70e3e0-4f29-11e9-a314-fdf908b370ef-1z3YLQ0400x400.jpg"},{"children":null,"type":"text","title":"Redirect Path","key":"redirect_path","id":"th15yqrwkhn0ja4ft3co","value":"/customers/movespring"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2019-03-14T16:38:56.354Z","status":"published","modified_at":"2020-11-05T20:43:27.287Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-11-05T20:43:27.287Z","unpublish_at":null,"metadata":{"company":"MoveSpring","industry_type":"Health and Wellness","teaser":"From the creators of Stridekick, MoveSpring is a fun, easy-to-use activity challenge platform. Step your way to success with quick onboarding, real-time scoring, and flexible plan options. MoveSpring is used by organizations like Best Buy, Deloitte and the American Cancer Society to make health a priority, and fun, for their employees. \n\n\n\n","logo":{"url":"https://cdn.cosmicjs.com/ee70e3e0-4f29-11e9-a314-fdf908b370ef-1z3YLQ0400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/ee70e3e0-4f29-11e9-a314-fdf908b370ef-1z3YLQ0400x400.jpg"},"redirect_path":"/customers/movespring"}},{"_id":"5f6cac6a20cc1b00076a28b2","order":18,"slug":"introducing-merge-for-environment-workflows","title":"Introducing Merge for Environment Workflows","content":"

UPDATE

This feature has been upgraded into a fully-functioning feature. See Merge Requests.


We're excited to release a new feature to help you deploy content updates faster with greater peace of mind. Introducing Merge (currently in Beta), which enables your team to do quick content migrations between Buckets.

How does it work?
With the new Merge feature, you can now copy Objects between Buckets in a few clicks. In addition to our available Bucket data Import / Export, this feature allows for more granular content migrations. A great use case is when performing environment workflows.


What are Environment Workflows?
When developing any digital project, it is good practice to maintain multiple environments to allow for a streamlined quality control process (For example Development, Staging, and Production). The Merge feature fits into this workflow nicely by allowing your team to develop content in one Bucket, then after testing and approvals, Objects can be merged into another Bucket in just a few clicks.


How to use the Merge feature

  1. After logging into your Cosmic account, go to your Bucket dashboard and select any Object Type (make sure you have at least two Buckets on your account).
  2. Select the Objects you would like to merge from the Objects table
  3. From the Bulk Actions dropdown select "Merge to Another Bucket"
  4. Select the target Bucket
  5. Confirm the action by clicking the "Merge to Bucket" button

New Objects will be added, and existing Objects (with the same slug and locale) will be updated. This will also send updates to the Object Type model, Media, and connected Objects if applicable.


We hope you like the new Merge feature to help your team build content powered apps faster with more peace of mind. Merge is currently in beta and we would appreciate your feedback after testing it out in your workflows. Please let us know if you have any questions / comments in our Slack channel, and follow us on Twitter for the latest updates to the Cosmic Headless CMS.

","metafields":[{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"QAjNpZwylG","value":"2020-10-13"},{"children":null,"type":"object","title":"Author","key":"author","id":"9M5auRwewU","value":"5768b253163172890e00002c","object_type":"authors","object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"7EqldQxl0K","value":"","url":null,"imgix_url":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"changelogs","created_at":"2020-09-24T14:25:46.875Z","created_by":"5357ef811693be2118000001","modified_at":"2021-01-14T21:16:47.533Z","created":"2020-09-24T14:25:46.875Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/026f5cb0-096d-11eb-a21e-0f30bc9d833c-merge-objects-bucket.jpg","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2021-01-14T21:16:47.533Z","metadata":{"published_date":"2020-10-13","author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"featured_image":{"url":null,"imgix_url":null}}},{"_id":"603e6298dbb37a00075b083c","order":18,"slug":"vue-vs-react-which-is-the-best-option-in-2021","title":"Vue vs React: Which Is The Best Option in 2021?","content":"

JavaScript is, by far, the most popular programming language in the world. However, that popularity becomes self-evident when you look at how many libraries and frameworks are built on top of JavaScript.

Vue and React are among the most popular web frameworks(React\r\nis 2nd only to jQuery, Vue has risen steadily to the #7 spot). Neither of them appears to be slowing down anytime soon – both gained usage share over the last 3 years.

The distinction that we make between libraries and frameworks is essential to understanding the differences between Vue and React. Although they're both built on top of JavaScript, they have different use cases.

In this article, we'll talk about what Vue and React bring to the table to help you decide which framework/library you should use.

What Is React?

React (also known as React.js or ReactJS) is a JavaScript library developed by Facebook. It was released in 2013 and, since then, it's grown into one of the most popular libraries in the world. If you go by GitHub numbers alone, over 5.8 million developers have projects that use React.

With React, you can build user interfaces using declarative views and encapsulated components. React also took the existing concept of the virtual DOM and made it much more popular in development. Using React virtual DOMs, every time that you render a JSX element (the syntax that React uses) the library detects what objects it needs to update and updates only those resources in the real DOM.

Technicalities aside, it's also important to mention that Vue and React are very different when it comes to core philosophies. React is still maintained and funded by Facebook, but it operates under the MIT license, making it an open-source project.

What Is Vue?

Vue is, in many ways, similar to React. It's an open-source framework designed to help developers build intricate User Interfaces (UI). However, it's the somewhat newer project, launching in 2014. Vue is the thought-child of Evan You,\r\na developer who's still working on the project, albeit with a larger team now thanks to crowdfunding and corporate sponsors.

Despite the evident difference between resources for both projects, Vue has gained steadily in market share and popularity throughout the past few years. 

As far as technicalities go, Vue uses the same virtual DOM approach as React. It's also a component-based framework that focuses on the view library. That means it somewhat depends on other libraries for routing and management.

4 Key Differences Between Vue and React

So far, you know what makes Vue and React so similar (and popular). Let's talk about the main differences between them.

1. Templating

Perhaps the most evident difference between React and Vue lies in the way that each project handles templates. 

React uses a JavaScript syntax extension called JSX for everything. It's possible to use React without JSX, allowing you to skip compiles by using plan Javascript, but for all intents and purposes, many of the benefits of React are built\r\ninto JSX.

Using JSX means that both HTML and CSS are wrapped up in JavaScript. In practice, using JSX, you can use the same code to generate both UI components and dictate their behavior. 

JSX can be as versatile as a full language, including flow controls and temporary variables. Plus, it supports all the Integrated Development Environment (IDE) features you'd expect, such as autocomplete, linting, and type checking.

Vue, on the other hand, uses distinct blocks for HTML, CSS, and JavaScript. This makes picking up the framework more simple, even if you're relatively new to JavaScript. Vue is a common first framework for developers.

Vue's 'modular' approach also makes it easy to migrate projects to the framework, since you can add functionality gradually to existing documents.

What's more, Vue also supports JSX, making it far more versatile than it looks at first glance. Even so, the framework is primarily designed to work with HTML-based templates,\r\nand Vue's own docs recommend against JSX for most cases. 

In our experience, many developers feel that JSX is the more comprehensive and powerful option. However, Vue is definitely easier to work with, especially if not everyone on your team is familiar with the framework.

2. Ecosystem

It would be fair to say that Vue is more of a standalone solution than React. Using Vue, you get access to a smaller number of companion libraries simply, because we're dealing with a framework that's not as popular as React. However, you also\r\nneed external libraries less often, because most of the functionality you need already exists within the framework.

Some of the most important Vue libraries, such as vue-router, are supported by the frameworks' own core team.

React, on the other hand, offers you a staggering number of libraries. In most cases, you'll need to use them since React relies on third-party solutions for state management and routing.

Some of those critical libraries, such as react-redux and react-router are maintained by the community, unlike React core, but are still highly reliable.

3. Scalability

Both Vue and React are lightweight solutions, and they're pretty much on par when it comes to performance out of the box. However, as your web applications start to grow, some cracks begin to emerge.

Vue's HTML template approach may be simpler to adopt, but it can also be a handicap for large projects. Simply put, dealing with HTML templates over and over is not as efficient as using JSX.

React's institutional support and popularity also gives it an edge when it comes to scalability. It's hard to compete with the vast number of libraries available to customize your projects. Combine that with JSX and you have a library that's\r\nperfect for enterprise-grade projects.

4. Cross-Platform Development

If you're interested in cross-platform development, React wins the battle hands down thanks to React Native alone. With React Native, you can re-use vast portions of your code between mobile and desktop operating systems, all using React components.

Vue also offers several options for mobile development, but the selection isn't as clear cut as with React Native. Some of the most popular Vue options include Quasar, Vux, and Mint-UI.

In our experience, mobile development with React is generally easier, although Vue isn't lagging that far behind in terms of functionality. React Native's sheer popularity makes it the best choice due to its native functionality, documentation,\r\nand third-party solutions.

How Vue and React Work with Headless CMS Solutions

Of course, many solutions built with either React or Vue combine with a headless Content Management System (CMS) solution for content management and increased application accessibility.

Although Vue does offer a more all-in-one solution than React, both can benefit from all the features a headless CMS brings to the table. Using a headless CMS, you can rely on React or Vue for your web application's front end (the head) and let the\r\nCMS handle everything else, including:

Which headless CMS solution you decide to use comes down to feature sets and needs. Cosmic is proudly the most flexible headless CMS available in 2021's market. With Cosmic you get access to both a REST and a GraphQL API to sync data to buckets. And our NPM module is a great fit for any React or Vue application.

Cosmic makes it easy to learn and launch React and Vue projects in a matter of minutes. You can deploy a React app with only a handful of commands, and the same goes for Vue. See the docs for helpful guides to get started with React or Vue.js.

When to Use Vue vs React and Vice Versa

Due to Vue and React's different core philosophies, there are fairly clear best-use scenarios for each solution. To sum them up:

Ultimately, which solution you opt for should depend on your team and each project that you tackle. In any case, both React and Vue are fantastic options to work with.

Are you ready to start using React and Vue alongside a headless CMS solution? Start Managing an Application with Cosmic for free right now.

","metafields":[{"children":null,"type":"object","title":"Author","key":"author","id":"2yrxF3Uy6C","value":"5f5fac071936450007d8a01c","required":true,"object_type":"authors","object":{"_id":"5f5fac071936450007d8a01c","slug":"kyle-meagher","title":"Kyle Meagher","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"hsMOJCxIAj","value":"kylemeags"},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D2rdKO4lEL","value":"e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","url":"https://cdn.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","imgix_url":"https://imgix.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2020-09-14T17:44:39.110Z","created_by":"5357ef811693be2118000001","modified_at":"2020-09-14T17:45:09.251Z","created":"2020-09-14T17:44:39.110Z","status":"published","published_at":"2020-09-14T17:44:39.110Z","modified_by":"5357ef811693be2118000001","thumbnail":"https://imgix.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg"}},{"children":null,"type":"html-textarea","title":"Teaser","key":"teaser","id":"W9b1sjK6x7","value":"

In this article, we'll talk about what Vue and React bring to the table to help you decide which framework/library you should use.

"},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"4lBNjztYHM","value":"3c684a50-827e-11eb-8b5d-951d83ec2ae4-vue-vs-react.png","url":"https://cdn.cosmicjs.com/3c684a50-827e-11eb-8b5d-951d83ec2ae4-vue-vs-react.png","imgix_url":"https://imgix.cosmicjs.com/3c684a50-827e-11eb-8b5d-951d83ec2ae4-vue-vs-react.png"},{"children":null,"type":"textarea","title":"SEO Meta Description","key":"seo_meta_description","id":"dcwuf3Cbdy","value":"Vue and React are among the most popular web frameworks(React is 2nd only to jQuery, Vue has risen steadily to the #7 spot). Neither of them appears to be slowing down anytime soon – both gained usage share over the last 3 years."},{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"xn9jvybsTN","value":"2021-03-08"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2021-03-02T16:06:47.867Z","created_by":"5357ef811693be2118000001","modified_at":"2021-03-12T20:47:21.333Z","created":"2021-03-02T16:06:47.867Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/3c684a50-827e-11eb-8b5d-951d83ec2ae4-vue-vs-react.png","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2021-03-12T20:47:21.333Z","metadata":{"author":{"_id":"5f5fac071936450007d8a01c","slug":"kyle-meagher","title":"Kyle Meagher","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"hsMOJCxIAj","value":"kylemeags"},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D2rdKO4lEL","value":"e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","url":"https://cdn.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","imgix_url":"https://imgix.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2020-09-14T17:44:39.110Z","created_by":"5357ef811693be2118000001","modified_at":"2020-09-14T17:45:09.251Z","created":"2020-09-14T17:44:39.110Z","status":"published","published_at":"2020-09-14T17:44:39.110Z","modified_by":"5357ef811693be2118000001","thumbnail":"https://imgix.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","metadata":{"username":"kylemeags","profile_picture":{"url":"https://cdn.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","imgix_url":"https://imgix.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg"}}},"teaser":"

In this article, we'll talk about what Vue and React bring to the table to help you decide which framework/library you should use.

","featured_image":{"url":"https://cdn.cosmicjs.com/3c684a50-827e-11eb-8b5d-951d83ec2ae4-vue-vs-react.png","imgix_url":"https://imgix.cosmicjs.com/3c684a50-827e-11eb-8b5d-951d83ec2ae4-vue-vs-react.png"},"seo_meta_description":"Vue and React are among the most popular web frameworks(React is 2nd only to jQuery, Vue has risen steadily to the #7 spot). Neither of them appears to be slowing down anytime soon – both gained usage share over the last 3 years.","published_date":"2021-03-08"}},{"_id":"5dca1363e45af80008675546","order":19,"slug":"cms-for-open-source","title":"CMS for Open Source","content":"

Cosmic JS offers a powerful CMS for any website or web-based application.  Along with lots of open source resources to get up and building faster.

Install the Official Cosmic JS JavaScript Client to integrate content into your app in minutes.  Or simply use the REST or GraphQL API.  Get a feel for Cosmic JS by taking a spin through our apps and check out the tutorials below.

Open Source

Cosmic JS Apps
Cosmic JS Extensions

CMS Articles

What is a Headless CMS?
Cosmic JS Docs
Official JavaScript Client
Cosmic JS GitHub

Cosmic JS Videos


Using Cosmic JS as a Headless CMS with Gatsby

\">

Build a Cosmic JS-powered blog using Gatsby

\">

Webinar: Localization with Cosmic JS and Gatsby

\">

Altered code branch icon provided with permission by Font Awesome.

","metafields":[{"children":null,"type":"file","title":"Image","key":"image","id":"h14yp6RMZQ","value":"07018d50-0556-11ea-95fe-01afbd7f5f3b-code-branch-solid.jpg","url":"https://cdn.cosmicjs.com/07018d50-0556-11ea-95fe-01afbd7f5f3b-code-branch-solid.jpg","imgix_url":"https://imgix.cosmicjs.com/07018d50-0556-11ea-95fe-01afbd7f5f3b-code-branch-solid.jpg"},{"children":null,"type":"file","title":"Thumbnail","key":"thumbnail","id":"zq1eX3ApHW","value":"07018d50-0556-11ea-95fe-01afbd7f5f3b-code-branch-solid.jpg","url":"https://cdn.cosmicjs.com/07018d50-0556-11ea-95fe-01afbd7f5f3b-code-branch-solid.jpg","imgix_url":"https://imgix.cosmicjs.com/07018d50-0556-11ea-95fe-01afbd7f5f3b-code-branch-solid.jpg"},{"children":null,"type":"html-textarea","title":"Blurb","key":"blurb","id":"oqsYCYJejc","value":"

Cosmic is the best CMS for open source websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

"},{"children":null,"type":"text","title":"Headline","key":"headline","id":"NnOaC4Gsd2","value":"CMS for Open Source"},{"children":null,"type":"text","title":"SEO Description","key":"seo_description","id":"S08b08v4er","value":"Cosmic is the best CMS for open source websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators."},{"children":null,"type":"file","title":"Twitter Card Image","key":"twitter_card_image","id":"9csWgcjVjC","value":"07018d50-0556-11ea-95fe-01afbd7f5f3b-code-branch-solid.jpg","url":"https://cdn.cosmicjs.com/07018d50-0556-11ea-95fe-01afbd7f5f3b-code-branch-solid.jpg","imgix_url":"https://imgix.cosmicjs.com/07018d50-0556-11ea-95fe-01afbd7f5f3b-code-branch-solid.jpg"},{"children":null,"type":"text","title":"SEO Title","key":"seo_title","id":"hbZxXe55rH","value":"Best Headless CMS for Open Source"},{"children":null,"type":"html-textarea","title":"Code Example","key":"code_example","id":"CtHruodSTs","value":""},{"children":[],"type":"repeater","title":"Videos","key":"videos","id":"frgtgqfrpylludl8pnsi","value":"","repeater_fields":[{"title":"Title","key":"title","value":"","type":"text","required":false},{"title":"Link","key":"link","value":"","type":"text","required":false}]}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"kb-articles","created_at":"2017-04-22T23:09:01.747Z","created_by":"5357ef811693be2118000001","created":"2019-11-12T02:05:23.710Z","status":"published","modified_at":"2020-06-27T19:17:47.535Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-06-27T19:17:47.535Z","unpublish_at":null,"metadata":{"image":{"url":"https://cdn.cosmicjs.com/07018d50-0556-11ea-95fe-01afbd7f5f3b-code-branch-solid.jpg","imgix_url":"https://imgix.cosmicjs.com/07018d50-0556-11ea-95fe-01afbd7f5f3b-code-branch-solid.jpg"},"thumbnail":{"url":"https://cdn.cosmicjs.com/07018d50-0556-11ea-95fe-01afbd7f5f3b-code-branch-solid.jpg","imgix_url":"https://imgix.cosmicjs.com/07018d50-0556-11ea-95fe-01afbd7f5f3b-code-branch-solid.jpg"},"blurb":"

Cosmic is the best CMS for open source websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

","headline":"CMS for Open Source","seo_description":"Cosmic is the best CMS for open source websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.","twitter_card_image":{"url":"https://cdn.cosmicjs.com/07018d50-0556-11ea-95fe-01afbd7f5f3b-code-branch-solid.jpg","imgix_url":"https://imgix.cosmicjs.com/07018d50-0556-11ea-95fe-01afbd7f5f3b-code-branch-solid.jpg"},"seo_title":"Best Headless CMS for Open Source","code_example":"","videos":[]}},{"_id":"5d4c2260bb97e152424ac9f6","slug":"content-management-system-for-press-websites","title":"Content Management System for Press Websites","content":"

Global organizations use the Cosmic JS Content Management System to publish content like blogs, news updates, press releases, quarterly financials, case studies and more. With Cosmic JS, press teams can publish multi-language content localized to over 400 regions, all from the same Dashboard. Approval Workflows, Revision History and Content Preview assist press directors as they manage content for upcoming campaigns in collaboration with their content creators. The Cosmic JS headless Content Management System approach promotes the most collaboration and flexibility for your team.

What is Headless CMS Software?

Headless CMS Software works by providing non-technical editors with a Dashboard UI to model, create and publish content while providing developers with API tools and resources to integrate content with any website or app. By decoupling content from code, teams create a central content repository that can power all of their content-powered applications. 

","metafields":[{"value":"Content Management System for Press Websites","key":"solution_name","title":"Solution Name","type":"text","children":null},{"value":"39b60450-9f54-11e9-ac09-4be8a5631b5e-Hostmaker.png","key":"image","title":"Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/39b60450-9f54-11e9-ac09-4be8a5631b5e-Hostmaker.png","imgix_url":"https://imgix.cosmicjs.com/39b60450-9f54-11e9-ac09-4be8a5631b5e-Hostmaker.png"},{"object_type":"case-studies","value":"596663e8880d69fb6c000194,5b743e111a739a78a5f0725b,5be9ca96cc3f3e2ce66ce511","key":"case_studies","title":"Case Studies","type":"objects","children":null,"objects":[{"_id":"596663e8880d69fb6c000194","slug":"joblift-elevates-their-stack","title":"Joblift Elevates Their Stack ","content":"

In any bustling economy, a key piece of capital is human capital. When the most precious portion of capital is required, Joblift seeks to connect positions with people. They choose Cosmic to deliver their content via the cloud. 



Joblift manages localized content to serve Job, Press and Blog feeds to its various markets, including the UK, Netherlands and Germany. Easy user roles and permissions equip their team with the tools they need to seamlessly run a global organization. 


"Cosmic has completely sped up our ability to upload our content easily and efficiently. With Cosmic we now have a smooth process for uploading press releases which reflects the quality content on our website.”

— Ashleigh Grady, Content Editor and Marketing Manager

","metafields":[{"value":"Joblift","key":"company","title":"Company","type":"text","children":null},{"value":"Career Services","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"In any bustling economy, a key piece of capital is human capital. When the most precious portion of capital is required, Joblift seeks to connect positions with people. They choose Cosmic to deliver their content via the cloud. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created":"2017-07-12T18:01:12.194Z","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","status":"published","publish_at":null,"published_at":"2018-12-19T21:44:38.361Z"},{"_id":"5b743e111a739a78a5f0725b","slug":"hostmaker-manages-localized-content","title":"Hostmaker Manages Localized Content ","content":"

Hostmaker is a property management company that operates across 9 cities in 6 countries. Hostmaker manages properties that are being rented to vacationers and lodgers from around the world. They take the hosts' home and provide cleaning and decor services prior to listing the location on up to 15 various travel booking platforms. Hostmaker's hosts love the service for the superior volume that they continue to deliver compared to their competitors, which are driven by proprietary pricing strategies, local market expertise and global industry experience. 



Hostmaker's tech team needed a solution for their product marketing managers to update Landing Pages, Case Studies, Press Releases and FAQs for the various markets they manage, including cities such as Rome, London and Barcelona. Localizing content for Hostmaker's audiences is a mission-critical piece of the marketing strategy that is driving such tremendous growth. Hostmaker chose Cosmic to give their cross-functional team the tools they need to perform their jobs. Now Hostmaker's developers can build reusable components and scalable content models while their marketers can manage content specific to a particular locale. 



\">



"We’ve been using Cosmic for around a year. At first there were some issues with components that prohibited us from performing all our desired tasks, but all those issues were quickly solved by the Cosmic Team. As of now, the tools are great, and have even improved during our use of the platform. It does all the things we need at the moment. As a tool Cosmic has been not only ideal for managing components on the site but adaptive enough for our non-tech users to create landing pages and modify existing content, saving us precious dev time.”


— Hostmaker Digital Team

","metafields":[{"value":"Hostmaker","key":"company","title":"Company","type":"text","children":null},{"value":"Hospitality ","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Hostmaker is a property management company that operates across 9 cities in 6 countries. Hostmaker manages properties that are being rented to vacationers and lodgers from around the world. They take the hosts' home and provide cleaning and decor services prior to listing the location on up to 15 various travel booking platforms. Hostmaker's hosts love the service for the superior volume that they continue to deliver compared to their competitors, which are driven by proprietary pricing strategies, local market expertise and global industry experience. \n\n\n\n\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"2f1889b0-a64d-11e8-a8cb-19319ae2c1b8-B13ds9DG_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/2f1889b0-a64d-11e8-a8cb-19319ae2c1b8-B13ds9DG_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/2f1889b0-a64d-11e8-a8cb-19319ae2c1b8-B13ds9DG_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-03-01T22:26:36.367Z","created_by":"5716b504e9c686d006000073","created":"2018-08-15T14:52:01.115Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-09-25T15:10:44.600Z"},{"_id":"5be9ca96cc3f3e2ce66ce511","slug":"road-redemption-launches-a-marketing-microsite","title":"Road Redemption Launches a Marketing Microsite","content":"

Tripwire Interactive, a leading entertainment software developer and publisher founded in 2005, recently launched its corporate website on Cosmic. The Tripwire Interactive team can now easily manage microsite content for each game with a dedicated studio manager as its content creator. This is important as Tripwire is always debuting new marketing campaigns to accompany game launches. 



Road Redemption is the first of many games to have innovative content creator access provided via a headless CMS API that delivers the best of both worlds for cross-functional teams. Read more about how Tripwire Interactive builds apps faster using Cosmic.


"Cosmic allowed us to easily integrate a secure and fast back-end API into our React app. Cosmic fit our needs with its simple web-based dashboard so that members of our marketing team can create, edit, and delete new content on the fly. Our team\r\nhas been enjoying the ease of use with the new system."

— Owen Liversidge, Lead Developer


","metafields":[{"value":"Road Redemption ","key":"company","title":"Company","type":"text","children":null},{"value":"Gaming","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Tripwire Interactive, a leading entertainment software developer and publisher founded in 2005, recently launched its corporate website on Cosmic. The Tripwire Interactive team can now easily manage microsite content for each game with a dedicated studio manager as its content creator. This is important as Tripwire is always debuting new marketing campaigns to accompany game launches. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"a4f8e050-e6ab-11e8-93f0-a94cde6f34a7-64d11670-dddf-11e8-95d7-dfced904ba0c-RR_Logo_Hires_TrasparenrBack-(1).png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/a4f8e050-e6ab-11e8-93f0-a94cde6f34a7-64d11670-dddf-11e8-95d7-dfced904ba0c-RR_Logo_Hires_TrasparenrBack-(1).png","imgix_url":"https://imgix.cosmicjs.com/a4f8e050-e6ab-11e8-93f0-a94cde6f34a7-64d11670-dddf-11e8-95d7-dfced904ba0c-RR_Logo_Hires_TrasparenrBack-(1).png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2018-11-12T18:46:46.371Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-11-13T21:30:43.964Z"}]},{"repeater_fields":"\"\"\"\"[{\"title\":\"Slug\",\"key\":\"slug\",\"value\":\"\",\"type\":\"text\",\"required\":false}]\"\"\"\"","value":"react-cosmedium-blog","key":"app_slugs","title":"App Slugs","type":"repeater","children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"react-cosmedium-blog","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"simple-react-blog","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"simple-vue-blog","type":"text","required":false}]}]},{"repeater_fields":"\"\"\"\"[{\"title\":\"Slug\",\"key\":\"slug\",\"value\":\"\",\"type\":\"text\",\"required\":false}]\"\"\"\"","value":"contact-form","key":"extension_slugs","title":"Extension Slugs","type":"repeater","children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"contact-form","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"wordpress-importer","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"unsplash-photos","type":"text","required":false}]}]},{"key":"testimonial","title":"Testimonial","type":"html-textarea","children":null,"value":"

"As a tool Cosmic has been not only ideal for managing components on the site but adaptive enough for our non-tech users to create landing pages and modify existing content, saving us precious dev time.”

"},{"value":"Hostmaker Digital Team","key":"testimonial_credit","title":"Testimonial Credit","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"solutions","created":"2019-08-08T13:23:44.641Z","created_at":"2019-07-08T15:01:03.706Z","modified_at":"2019-08-08T13:24:56.374Z","status":"published","locale":null,"published_at":"2019-08-08T13:24:56.374Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"order":19,"metadata":{"solution_name":"Content Management System for Press Websites","image":{"url":"https://cdn.cosmicjs.com/39b60450-9f54-11e9-ac09-4be8a5631b5e-Hostmaker.png","imgix_url":"https://imgix.cosmicjs.com/39b60450-9f54-11e9-ac09-4be8a5631b5e-Hostmaker.png"},"case_studies":[{"_id":"596663e8880d69fb6c000194","slug":"joblift-elevates-their-stack","title":"Joblift Elevates Their Stack ","content":"

In any bustling economy, a key piece of capital is human capital. When the most precious portion of capital is required, Joblift seeks to connect positions with people. They choose Cosmic to deliver their content via the cloud. 



Joblift manages localized content to serve Job, Press and Blog feeds to its various markets, including the UK, Netherlands and Germany. Easy user roles and permissions equip their team with the tools they need to seamlessly run a global organization. 


"Cosmic has completely sped up our ability to upload our content easily and efficiently. With Cosmic we now have a smooth process for uploading press releases which reflects the quality content on our website.”

— Ashleigh Grady, Content Editor and Marketing Manager

","metafields":[{"value":"Joblift","key":"company","title":"Company","type":"text","children":null},{"value":"Career Services","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"In any bustling economy, a key piece of capital is human capital. When the most precious portion of capital is required, Joblift seeks to connect positions with people. They choose Cosmic to deliver their content via the cloud. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created":"2017-07-12T18:01:12.194Z","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","status":"published","publish_at":null,"published_at":"2018-12-19T21:44:38.361Z","metadata":{"company":"Joblift","industry_type":"Career Services","teaser":"In any bustling economy, a key piece of capital is human capital. When the most precious portion of capital is required, Joblift seeks to connect positions with people. They choose Cosmic to deliver their content via the cloud. \n","logo":{"url":"https://cdn.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg"}}},{"_id":"5b743e111a739a78a5f0725b","slug":"hostmaker-manages-localized-content","title":"Hostmaker Manages Localized Content ","content":"

Hostmaker is a property management company that operates across 9 cities in 6 countries. Hostmaker manages properties that are being rented to vacationers and lodgers from around the world. They take the hosts' home and provide cleaning and decor services prior to listing the location on up to 15 various travel booking platforms. Hostmaker's hosts love the service for the superior volume that they continue to deliver compared to their competitors, which are driven by proprietary pricing strategies, local market expertise and global industry experience. 



Hostmaker's tech team needed a solution for their product marketing managers to update Landing Pages, Case Studies, Press Releases and FAQs for the various markets they manage, including cities such as Rome, London and Barcelona. Localizing content for Hostmaker's audiences is a mission-critical piece of the marketing strategy that is driving such tremendous growth. Hostmaker chose Cosmic to give their cross-functional team the tools they need to perform their jobs. Now Hostmaker's developers can build reusable components and scalable content models while their marketers can manage content specific to a particular locale. 



\">



"We’ve been using Cosmic for around a year. At first there were some issues with components that prohibited us from performing all our desired tasks, but all those issues were quickly solved by the Cosmic Team. As of now, the tools are great, and have even improved during our use of the platform. It does all the things we need at the moment. As a tool Cosmic has been not only ideal for managing components on the site but adaptive enough for our non-tech users to create landing pages and modify existing content, saving us precious dev time.”


— Hostmaker Digital Team

","metafields":[{"value":"Hostmaker","key":"company","title":"Company","type":"text","children":null},{"value":"Hospitality ","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Hostmaker is a property management company that operates across 9 cities in 6 countries. Hostmaker manages properties that are being rented to vacationers and lodgers from around the world. They take the hosts' home and provide cleaning and decor services prior to listing the location on up to 15 various travel booking platforms. Hostmaker's hosts love the service for the superior volume that they continue to deliver compared to their competitors, which are driven by proprietary pricing strategies, local market expertise and global industry experience. \n\n\n\n\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"2f1889b0-a64d-11e8-a8cb-19319ae2c1b8-B13ds9DG_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/2f1889b0-a64d-11e8-a8cb-19319ae2c1b8-B13ds9DG_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/2f1889b0-a64d-11e8-a8cb-19319ae2c1b8-B13ds9DG_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-03-01T22:26:36.367Z","created_by":"5716b504e9c686d006000073","created":"2018-08-15T14:52:01.115Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-09-25T15:10:44.600Z","metadata":{"company":"Hostmaker","industry_type":"Hospitality ","teaser":"Hostmaker is a property management company that operates across 9 cities in 6 countries. Hostmaker manages properties that are being rented to vacationers and lodgers from around the world. They take the hosts' home and provide cleaning and decor services prior to listing the location on up to 15 various travel booking platforms. Hostmaker's hosts love the service for the superior volume that they continue to deliver compared to their competitors, which are driven by proprietary pricing strategies, local market expertise and global industry experience. \n\n\n\n\n","logo":{"url":"https://cdn.cosmicjs.com/2f1889b0-a64d-11e8-a8cb-19319ae2c1b8-B13ds9DG_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/2f1889b0-a64d-11e8-a8cb-19319ae2c1b8-B13ds9DG_400x400.jpg"}}},{"_id":"5be9ca96cc3f3e2ce66ce511","slug":"road-redemption-launches-a-marketing-microsite","title":"Road Redemption Launches a Marketing Microsite","content":"

Tripwire Interactive, a leading entertainment software developer and publisher founded in 2005, recently launched its corporate website on Cosmic. The Tripwire Interactive team can now easily manage microsite content for each game with a dedicated studio manager as its content creator. This is important as Tripwire is always debuting new marketing campaigns to accompany game launches. 



Road Redemption is the first of many games to have innovative content creator access provided via a headless CMS API that delivers the best of both worlds for cross-functional teams. Read more about how Tripwire Interactive builds apps faster using Cosmic.


"Cosmic allowed us to easily integrate a secure and fast back-end API into our React app. Cosmic fit our needs with its simple web-based dashboard so that members of our marketing team can create, edit, and delete new content on the fly. Our team\r\nhas been enjoying the ease of use with the new system."

— Owen Liversidge, Lead Developer


","metafields":[{"value":"Road Redemption ","key":"company","title":"Company","type":"text","children":null},{"value":"Gaming","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Tripwire Interactive, a leading entertainment software developer and publisher founded in 2005, recently launched its corporate website on Cosmic. The Tripwire Interactive team can now easily manage microsite content for each game with a dedicated studio manager as its content creator. This is important as Tripwire is always debuting new marketing campaigns to accompany game launches. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"a4f8e050-e6ab-11e8-93f0-a94cde6f34a7-64d11670-dddf-11e8-95d7-dfced904ba0c-RR_Logo_Hires_TrasparenrBack-(1).png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/a4f8e050-e6ab-11e8-93f0-a94cde6f34a7-64d11670-dddf-11e8-95d7-dfced904ba0c-RR_Logo_Hires_TrasparenrBack-(1).png","imgix_url":"https://imgix.cosmicjs.com/a4f8e050-e6ab-11e8-93f0-a94cde6f34a7-64d11670-dddf-11e8-95d7-dfced904ba0c-RR_Logo_Hires_TrasparenrBack-(1).png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2018-11-12T18:46:46.371Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-11-13T21:30:43.964Z","metadata":{"company":"Road Redemption ","industry_type":"Gaming","teaser":"Tripwire Interactive, a leading entertainment software developer and publisher founded in 2005, recently launched its corporate website on Cosmic. The Tripwire Interactive team can now easily manage microsite content for each game with a dedicated studio manager as its content creator. This is important as Tripwire is always debuting new marketing campaigns to accompany game launches. \n","logo":{"url":"https://cdn.cosmicjs.com/a4f8e050-e6ab-11e8-93f0-a94cde6f34a7-64d11670-dddf-11e8-95d7-dfced904ba0c-RR_Logo_Hires_TrasparenrBack-(1).png","imgix_url":"https://imgix.cosmicjs.com/a4f8e050-e6ab-11e8-93f0-a94cde6f34a7-64d11670-dddf-11e8-95d7-dfced904ba0c-RR_Logo_Hires_TrasparenrBack-(1).png"}}}],"app_slugs":[{"slug":"react-cosmedium-blog"},{"slug":"simple-react-blog"},{"slug":"simple-vue-blog"}],"extension_slugs":[{"slug":"contact-form"},{"slug":"wordpress-importer"},{"slug":"unsplash-photos"}],"testimonial":"

"As a tool Cosmic has been not only ideal for managing components on the site but adaptive enough for our non-tech users to create landing pages and modify existing content, saving us precious dev time.”

","testimonial_credit":"Hostmaker Digital Team"}},{"_id":"5f57d74a56754600078d884f","order":19,"slug":"dashboard-updates-new-thumbnails-search-and-filter-and-more","title":"Dashboard Updates: New Thumbnails, Search and Filter, and more","content":"

We're happy to announce some updates that will make your workflows in the Cosmic admin dashboard easier and more enjoyable. This release includes the following updates:

  1. Object thumbnails
  2. New Object Metafield selection logic
  3. Search / filter fixes
  4. Bucket thumbnail now in settings


1. Object Thumbnails
You can now add thumbnails to Objects. This gives you the ability to add visual differentiation in your Objects table. You can also select your Object thumbnail from any Image Metafield.


2. New Object Metafield Selection Logic
Before, single Object Metafields gave you the option to select Objects via a select dropdown. This made it impossible to select from an Object Type list of more than 1,000 (our API limit). Now, you can use the Select Object modal to search as well as use pagination to find your Objects. Plus you can also "Quick Add" an Object Type, which should help you create Object relationships much faster.


3. Search / Filter Fixes
You will now notice that the Search / Filter modal has been simplified and improved. Search for content quickly and easily.


4. Bucket Thumbnail
You can now edit your Bucket thumbnail from the Bucket Settings page.


We hope you enjoy these dashboard updates. Please let us know if you have any questions / comments in our Slack channel, and follow us on Twitter for the latest updates to the Cosmic Headless CMS.

","metafields":[{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"7Wu4ElXGLv","value":"2020-09-10"},{"children":null,"type":"object","title":"Author","key":"author","id":"3wA0xyKjVF","value":"5768b253163172890e00002c","object_type":"authors","object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"jR2v3tL2AL","value":"cb8b71c0-f378-11ea-a3de-692d5982216c-thumbnails.png","url":"https://cdn.cosmicjs.com/cb8b71c0-f378-11ea-a3de-692d5982216c-thumbnails.png","imgix_url":"https://imgix.cosmicjs.com/cb8b71c0-f378-11ea-a3de-692d5982216c-thumbnails.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"changelogs","created_at":"2020-09-08T19:11:06.145Z","created_by":"5357ef811693be2118000001","modified_at":"2020-09-15T15:41:45.761Z","created":"2020-09-08T19:11:06.145Z","status":"published","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2020-09-15T15:41:45.761Z","thumbnail":"https://imgix.cosmicjs.com/cb8b71c0-f378-11ea-a3de-692d5982216c-thumbnails.png","metadata":{"published_date":"2020-09-10","author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"featured_image":{"url":"https://cdn.cosmicjs.com/cb8b71c0-f378-11ea-a3de-692d5982216c-thumbnails.png","imgix_url":"https://imgix.cosmicjs.com/cb8b71c0-f378-11ea-a3de-692d5982216c-thumbnails.png"}}},{"_id":"60061c13bb070b0007de5b4f","order":19,"slug":"graphql-vs-rest-a-quick-guide","title":"GraphQL vs. REST: A Quick Guide","content":"

Developers have long faced challenges with API standardization.

REST was a big improvement over SOAP, providing greater flexibility in standardized data formats like JSON, and increased performance.

Now GraphQL has emerged to provide developers a new way to interact with data services; it's proved to be a very popular alternative to REST.

In this guide, we will show you the benefits and drawbacks of using REST and GraphQL to help you decide which is best suited for your development projects.


The Struggle for Standardization: GraphQL vs. REST

In the simplest sense, GraphQL and REST are two different ways to call functions over a network. Here’s a quick overview of each. 

What is REST?

REST stands for Representational State Transfer. It’s an API design paradigm meant to standardize web services via a series of constraints and was created in 2000. In particular, REST\r\nis stateless and was built so that any compliant web service can interact with textual resource representations. In other words, using REST when building a web service makes it easier for clients and servers to understand each other even when one does\r\nnot have knowledge of the other.

It also means that both the client side and server side can take an independent, modular approach to their evolution. As long as they follow the right format to send requests and responses, they’ll understand each other regardless of future code\r\nupdates.

What is GraphQL?

GraphQL is a relatively new API query language that was developed and open-sourced by Facebook in 2012. It’s designed to handle the complex, nested data dependencies found in modern applications. Specifically, it enables declarative data fetching to allow clients to specify exactly what data is needed from an API.

GraphQL was designed with efficiency and flexibility in mind with particular attention to how web services have evolved since 2000. Since it isn’t tied to any specific database or storage engine, developers don’t need special knowledge of\r\nthe backend to use it. Instead, it can be applied anywhere an API is used, and it’s backed by the code or already existing data.

GraphQL vs. REST: What’s the Difference?

REST and GraphQL are fundamentally similar in that they both include the idea of resources with specific IDs. REST fetches data with GET and GraphQL uses POST, but they can both return JSON data in that request. They can also both handle many different types of resources and will ensure that a web API functions correctly for a given client.

Although REST has been the standard for a while, GraphQL has several advantages. It also has three distinct features that developers must consider before working with it. These are:

So, When Should I Use REST? When Do I Use GraphQL?

GraphQL and REST both have advantages that make them ideal in different situations. GraphQL incorporates a lot of REST elements but takes a more advanced approach. It’s also a favorite among many developers working with APIs.

Yet, projects still crop up where REST is better suited to handle things. In general, use REST when:

REST can accomplish the job beautifully in both of these cases. In contrast, go with GraphQL when a project must:

What GraphQL and REST Mean for Jamstack

Another key instance to consider the advantages of GraphQL vs. REST occurs when building a site using Jamstack. It’s an emerging architecture that decouples the frontend\r\nand backend, emphasizing client-side JavaScript, reusable APIs, and prebuilt Markup. The result is the functionality of a dynamic site with the advantages (load time, security, etc.) of a “static” one.

Both GraphQL and REST APIs can be used with Jamstack, especially when a headless CMS is involved. And while there’s no one right answer as to which is better here, consider the following:

Key Takeaways When Considering GraphQL vs. REST

Comparing GraphQL vs. REST? We’ve briefly covered some instances of when one might be more effective in a project than the other.

Ultimately, they’re two different ways to accomplish mostly the same things. REST is the older of the two. It enjoys more widespread support and infrastructure. In contrast, GraphQL solves some of the long-standing shortcomings of REST, especially\r\nby increasing the amount of control developers have over what data they call. These differences have implications when using architecture like Jamstack.

Luckily, Cosmic offers both a REST and a GraphQL API. If you are not ready to make the switch to GraphQL, or just prefer REST, the Cosmic REST API gives you GraphQL-like declarative data fetching using props. See the documentation for more info.

","metafields":[{"children":null,"type":"object","title":"Author","key":"author","id":"4AWVVxfzwq","value":"5f5fac071936450007d8a01c","required":true,"object_type":"authors","object":{"_id":"5f5fac071936450007d8a01c","slug":"kyle-meagher","title":"Kyle Meagher","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"hsMOJCxIAj","value":"kylemeags"},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D2rdKO4lEL","value":"e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","url":"https://cdn.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","imgix_url":"https://imgix.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2020-09-14T17:44:39.110Z","created_by":"5357ef811693be2118000001","modified_at":"2020-09-14T17:45:09.251Z","created":"2020-09-14T17:44:39.110Z","status":"published","published_at":"2020-09-14T17:44:39.110Z","modified_by":"5357ef811693be2118000001","thumbnail":"https://imgix.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg"}},{"children":null,"type":"html-textarea","title":"Teaser","key":"teaser","id":"6fj3pa3BAR","value":"

GraphQL vs. ReST - which works better for your application? This article compares similarities and key differences, and provides considerations for when to choose one or the other.

"},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"iSU0dVwslU","value":"7d9a6f90-7080-11eb-87a2-9be5e90cdf74-GraphQLvsRest.png","url":"https://cdn.cosmicjs.com/7d9a6f90-7080-11eb-87a2-9be5e90cdf74-GraphQLvsRest.png","imgix_url":"https://imgix.cosmicjs.com/7d9a6f90-7080-11eb-87a2-9be5e90cdf74-GraphQLvsRest.png"},{"children":null,"type":"textarea","title":"SEO Meta Description","key":"seo_meta_description","id":"ewyQFb0gdj","value":"GraphQL vs. ReST - which works better for your application? This article compares similarities and key differences, and provides considerations for when to choose one or the other."},{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"p4WP1hcCfa","value":"2021-02-16"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2021-01-18T23:38:59.881Z","created_by":"5f8088982aa32f00093977bb","modified_at":"2021-02-17T17:08:21.280Z","created":"2021-01-18T23:38:59.881Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/94c327e0-707e-11eb-87a2-9be5e90cdf74-GraphQLvsRest.png","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2021-02-17T17:08:21.280Z","metadata":{"author":{"_id":"5f5fac071936450007d8a01c","slug":"kyle-meagher","title":"Kyle Meagher","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"hsMOJCxIAj","value":"kylemeags"},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D2rdKO4lEL","value":"e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","url":"https://cdn.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","imgix_url":"https://imgix.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2020-09-14T17:44:39.110Z","created_by":"5357ef811693be2118000001","modified_at":"2020-09-14T17:45:09.251Z","created":"2020-09-14T17:44:39.110Z","status":"published","published_at":"2020-09-14T17:44:39.110Z","modified_by":"5357ef811693be2118000001","thumbnail":"https://imgix.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","metadata":{"username":"kylemeags","profile_picture":{"url":"https://cdn.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","imgix_url":"https://imgix.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg"}}},"teaser":"

GraphQL vs. ReST - which works better for your application? This article compares similarities and key differences, and provides considerations for when to choose one or the other.

","featured_image":{"url":"https://cdn.cosmicjs.com/7d9a6f90-7080-11eb-87a2-9be5e90cdf74-GraphQLvsRest.png","imgix_url":"https://imgix.cosmicjs.com/7d9a6f90-7080-11eb-87a2-9be5e90cdf74-GraphQLvsRest.png"},"seo_meta_description":"GraphQL vs. ReST - which works better for your application? This article compares similarities and key differences, and provides considerations for when to choose one or the other.","published_date":"2021-02-16"}},{"_id":"5965371558da88ca55000589","slug":"switching-from-modx-to-cosmic-js","title":"Switching from MODx to Cosmic","content":"

Water is the most vital element for life and content is the most vital element for a website. Placer County Water Agency trusts Cosmic to deliver content and manage files safely and securely in the cloud to provide updates to its thousands of citizen consumers in the Placer County area. 


Before and After

"Prior to using Cosmic as as CMS, we were using a system called MODx.  Our internal approach was a bit different. The system was restrictive and often more confusing for web authors (myself), and was a bit bloated and mis-understood for content\r\neditors (everyone else at our organization).  Our new Angular + Cosmic stack works great because instead of having one un-appreciated monolithic system, we have two separate and welcomed systems that are better understood and more frequently utilized\r\nby both types of end-users."

"Cosmic allows members throughout our organization to develop our Applications in a way that we just haven’t seen before."

— Abe Hendricks, Government Agency Information Systems Analyst

","metafields":[{"value":"PCWA","key":"company","title":"Company","type":"text","children":null},{"value":"Water is the most vital element for life and content is the most vital element for a website. Placer County Water Agency trusts Cosmic to deliver content and manage files safely and securely in the cloud to provide updates to its thousands of citizen consumers in the Placer County area. ","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"b00334e0-c3d5-11e7-8554-abcc312ecfae-pcwa.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/b00334e0-c3d5-11e7-8554-abcc312ecfae-pcwa.png","imgix_url":"https://imgix.cosmicjs.com/b00334e0-c3d5-11e7-8554-abcc312ecfae-pcwa.png"},{"value":"Government Agency","key":"industry_type","title":"Industry Type","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created":"2017-07-11T20:37:41.099Z","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","status":"published","order":19,"publish_at":null,"metadata":{"company":"PCWA","teaser":"Water is the most vital element for life and content is the most vital element for a website. Placer County Water Agency trusts Cosmic to deliver content and manage files safely and securely in the cloud to provide updates to its thousands of citizen consumers in the Placer County area. ","logo":{"url":"https://cdn.cosmicjs.com/b00334e0-c3d5-11e7-8554-abcc312ecfae-pcwa.png","imgix_url":"https://imgix.cosmicjs.com/b00334e0-c3d5-11e7-8554-abcc312ecfae-pcwa.png"},"industry_type":"Government Agency"}},{"_id":"60060c7ff61e39000770e351","order":20,"slug":"jamstack-explained-in-5-minutes","title":"Jamstack Explained In 5 Minutes","content":"

The modern web is far too complex; full of bloated websites, slow loading speeds, and vulnerabilities that can whet any hacker's appetite. 

It can be a challenge for developers to meet users' ever-changing needs and build a website that checks all the boxes, yet is still fun to work with. At least, it was a challenge until Jamstack came into the picture.

In this article, we'll explain:



What Is Jamstack?

Jamstack is the latest breakthrough in web and app development, and much more than a trend. It's a modern architecture that offers both security and performance while delivering an improved developer experience. 

While much of the web is built on using traditional CMS platforms, Jamstack has the capacity to supersede how developers choose to build websites, and it comes with a host of benefits. From serving pre-generated pages and assets, to infinitely scaling\r\nCDNs, to a simplified developer experience, Jamstack sites are much better equipped than traditional sites to utilize recent breakthroughs in development infrastructure. 

But what is it, what makes up a Jamstack? 

Jamstack is a technical development stack used by developers with 3 core components. A tech stack is simply a set of technologies that an organization uses when building a software application. Tech Stacks are the programming languages, frameworks, libraries, and other tools used by developers. The Jamstack is a modern stack using JavaScript, APIs, and Markup. This web architecture is used for building faster websites and makes them more secure and easier to scale.  

Legacy web apps must run on web servers, which slows things down and makes them susceptible to attacks. On the other hand, Jamstack websites separate the front-end user interface from the backend databases that power them, enabling pages to be pre-rendered\r\nat run time and pushed to a CDN. 

What Does Jamstack Stand For?

Coined by Netlify co-founder Mathias Biilmann, Jamstack stands for JavaScript, APIs and Markup and is frequently used in building static websites. These three core components combine to provide unique traits to the stack.

JavaScript

The web's programming language, JavaScript, is responsible for much of the popularity surrounding Jamstack and provides the dynamic elements found in Jamstack applications. Jamstack relies heavily on prebuilt static pages and assets for the front-end.\r\nThese pre-rendered files are served from a CDN directly to the browser. 

JavaScript is then used in conjunction with APIs to communicate with the backend services and enhance these static files, transforming them into experiences. 

APIs

APIs provide integration capabilities for Jamstack sites, enabling them to connect with third-party services to improve functionality.

Markup

Markup provides the formatting code for the static sites pre-rendered at build time before a Jamstack site is deployed to a CDN.

Benefits of Jamstack

Developing modern websites using Jamstack architecture provides some benefits when compared to legacy web applications. 

Heightened Security

Legacy web development applications usually include a tightly coupled database. Databases are server-side technologies, which provides a large area for hackers to attack using various methods, including SQL injection. In Jamstack, there is no database.\r\nYou can still use one, but it's connected via API. With server-side processes handled by APIs, there is less area to attack, resulting in heightened security. 

Increased Speed

Files in a Jamstack are prebuilt and served over a CDN, thus, Jamstack sites are blazing fast. This increase in speed leads to happier users, lower page load times, and higher user engagement. This speed is not limited to front-facing content - flexible\r\nbackends make applications faster to market and circumvent legacy platforms' limitations. 

Optimized Scalability

The ability to serve files over a CDN means less server support is required to manage a Jamstack site. Deployment requires that the files be sent to a CDN, enabling them to be served anywhere, facilitating the scalability that legacy applications can\r\nsometimes struggle with. 

Jamstack vs LAMPstack vs MEANstack

The Jamstack approach differs from other software development stacks such as LAMPstack or MEANstack in that they are made up of different components. LAMPstack includes Linux, Apache, MySQL and PHP, and is used for Linux hosted websites. On the other\r\nhand, MEAN is an acronym for MongoDB, ExpressJS, AngularJS and Nodejs and is used for building dynamic sites and web applications.

Both of these stacks include connections to databases, and while LAMP and MEAN have specific applications where they will be most appropriate, Jamstack is quickly overtaking them.

Getting Started With Jamstack

For Jamstack to be effective, there are five components required: A JavaScript framework, a static site generator, a headless CMS, a content delivery network, and services to connect via APIs. 

Choose The Right JavaScript Framework for You

JavaScript forms the backbone of Jamstack development and provides a wealth of frameworks for developers to choose from. JavaScript is used for everything from single-page applications and progressive web applications. Most developers building for the\r\nweb will already be familiar, but popular starting points are Angular, Vue, and React. 

Generate Static Sites with an SSG

The next step in getting up and running with Jamstack is picking the right static site generator to launch your static sites. SSGs create static sites from a set of HTML files and deploy them to a server or CDN. In keeping with the popularity of JavaScript\r\nframeworks, the likes of Gatsby and Next have sprung up to offer static site generation and more. Still, there are also a host of other tools available that can be used for the same purpose. 

Add A Headless CMS 

Next, if you want to get the most out of your Jamstack website, you need to add a headless CMS to the equation. A headless CMS does away with traditional CMS platforms' legacy architecture and provides freedom for developers to choose their front-end interface. 

A headless CMS includes a backend repository for storing content and connects to different front-ends by using APIs. However, a headless CMS can consist of content authoring tools and a clean interface that can be used by less technical teams. 

Jamstack is a developer-focused architecture. However, the end-user will still rely on content input from marketers and other non-technical personnel. For enterprises that want to use Jamstack websites for multiple purposes, the ability to connect to\r\na headless CMS with APIs and then let that CMS manage the content experience is pivotal. 

Deploy Your Digital Experience to a CDN

Next is the CDN where a Jamstack site is deployed. Building a beautiful experience with your static site generator and headless CMS wouldn't be half as good if there was nowhere to host it. For Jamstack sites, there are a host of options including\r\nNetlify, Vercel and Cloudflare.

Connect to Services with APIs

Finally, you can get the most out of your Jamstack site by connecting to different services with APIs to achieve more functionality. If you need to integrate an eCommerce solution to your Jamstack site or enable videos or comments and interactivity on\r\nyour website, then simply connect to the appropriate service using APIs.

Cosmic: A Jamstack-ready Headless CMS

Choosing a headless CMS to pair with your Jamstack site can be difficult, especially as any headless CMS can theoretically function to build Jamstack sites. However, you want to maximize the quality of your Jamstack sites, while providing a comprehensive\r\ninterface for your developers and an intuitive one for your content creators. In that case, you need a Jamstack-ready headless CMS. 

Cosmic's headless CMS architecture provides the tools you need to manage content for a Jamstack-powered site or web application and even includes starters and templates to get you off the ground. These templates and examples can fit multiple use cases, no matter your needs. 

For example, you can use Cosmic and database and server to store your products as you construct a Gatsby powered eCommerce website or connect with Cosmic using GraphQL to launch a React static site. 

Learn more about getting started with Jamstack by checking out our Jamstack applications. 

","metafields":[{"children":null,"type":"object","title":"Author","key":"author","id":"n7DBLVcWSj","value":"5f5fac071936450007d8a01c","required":true,"object_type":"authors","object":{"_id":"5f5fac071936450007d8a01c","slug":"kyle-meagher","title":"Kyle Meagher","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"hsMOJCxIAj","value":"kylemeags"},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D2rdKO4lEL","value":"e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","url":"https://cdn.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","imgix_url":"https://imgix.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2020-09-14T17:44:39.110Z","created_by":"5357ef811693be2118000001","modified_at":"2020-09-14T17:45:09.251Z","created":"2020-09-14T17:44:39.110Z","status":"published","published_at":"2020-09-14T17:44:39.110Z","modified_by":"5357ef811693be2118000001","thumbnail":"https://imgix.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg"}},{"children":null,"type":"html-textarea","title":"Teaser","key":"teaser","id":"LHjuYjbDKd","value":"

Jamstack is the newest stack innovation, and it's kicking old school app development to the curb. What's the Jamstack? How can you start using it?

"},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"CyxHBCMHHU","value":"eb3f4150-6a19-11eb-afd3-010bb5d66a3e-jamstack.jpg","url":"https://cdn.cosmicjs.com/eb3f4150-6a19-11eb-afd3-010bb5d66a3e-jamstack.jpg","imgix_url":"https://imgix.cosmicjs.com/eb3f4150-6a19-11eb-afd3-010bb5d66a3e-jamstack.jpg"},{"children":null,"type":"textarea","title":"SEO Meta Description","key":"seo_meta_description","id":"yLiEdcOPn3","value":"Jamstack is the newest stack innovation, and it's kicking old school app development to the curb. What's the Jamstack? How can you start using it?"},{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"a3Vq3iFIoU","value":"2021-02-09"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2021-01-18T22:32:31.456Z","created_by":"5f8088982aa32f00093977bb","modified_at":"2021-02-09T20:15:32.150Z","created":"2021-01-18T22:32:31.456Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/eb3f4150-6a19-11eb-afd3-010bb5d66a3e-jamstack.jpg","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2021-02-09T20:15:32.150Z","metadata":{"author":{"_id":"5f5fac071936450007d8a01c","slug":"kyle-meagher","title":"Kyle Meagher","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"hsMOJCxIAj","value":"kylemeags"},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D2rdKO4lEL","value":"e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","url":"https://cdn.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","imgix_url":"https://imgix.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2020-09-14T17:44:39.110Z","created_by":"5357ef811693be2118000001","modified_at":"2020-09-14T17:45:09.251Z","created":"2020-09-14T17:44:39.110Z","status":"published","published_at":"2020-09-14T17:44:39.110Z","modified_by":"5357ef811693be2118000001","thumbnail":"https://imgix.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","metadata":{"username":"kylemeags","profile_picture":{"url":"https://cdn.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","imgix_url":"https://imgix.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg"}}},"teaser":"

Jamstack is the newest stack innovation, and it's kicking old school app development to the curb. What's the Jamstack? How can you start using it?

","featured_image":{"url":"https://cdn.cosmicjs.com/eb3f4150-6a19-11eb-afd3-010bb5d66a3e-jamstack.jpg","imgix_url":"https://imgix.cosmicjs.com/eb3f4150-6a19-11eb-afd3-010bb5d66a3e-jamstack.jpg"},"seo_meta_description":"Jamstack is the newest stack innovation, and it's kicking old school app development to the curb. What's the Jamstack? How can you start using it?","published_date":"2021-02-09"}},{"_id":"5f2c4ceff91f3f00087eed57","order":20,"slug":"introducing-new-bulk-actions","title":"Introducing New Bulk Actions","content":"

We are excited to announce a big release that enables you to effortlessly perform new bulk actions from your Cosmic admin dashboard, giving your team even greater content ops superpowers.

Bulk Edits and Search and Replace are two separate features that provide your team with huge time-savings when you need to make changes affecting multiple Objects. Let's look at what each feature does and how to use them...


What are Bulk Edits?\"Bulk

Bulk Edits allow you to edit fields across multiple Objects in your Bucket. For example, editing a Metafield to the same value across multiple Blog Posts used to require you to manually edit the value in every Object. Now, with Bulk Edits, you can do this in a single action saving you minutes of manual work (or hours, or more!).



How to use Bulk Edits

To use the Bulk Edits feature:

  1. Log into your Cosmic account.
  2. Select your Bucket.
  3. Go to your Objects table view by selecting any Object Type in the left-hand side nav.
  4. Use the left-side checkbox next to each Object to select which Objects to perform the action on.
  5. Click the "Bulk Edit Objects" option from the "Bulk Actions" dropdown at the top of the table.
  6. Select the fields you want to affect, add your new values, and click "Confirm".

You can currently perform bulk edits on Object content and select Metafield values.

See the video for steps:


What is Search and Replace?
\"Search

The Search and Replace bulk action enables you to search and replace text across Objects. For example, if you needed to replace an old link with a new link across multiple Objects and fields, you can now use the Search and Replace bulk action to do this\r\nin a single action within seconds. Before you would have had to manually edit each Object which could have taken minutes (or hours, or more!).


How to use Search and Replace

To use the Search and Replace feature:

  1. Log into your Cosmic account.
  2. Select your Bucket.
  3. Go to your Objects table view by selecting any Object Type in the left-hand side nav.
  4. Use the left-side checkbox next to each Object to select which Objects to perform the action on.
  5. Click the "Search and Replace" option from the "Bulk Actions" dropdown at the top of the table.
  6. Add the term to search for (case sensitive) and the term that will replace it.
  7. Select the fields to perform the action on. Click "Confirm".

You can currently perform search and replace on Object title, content, and select Metafield values.

See the video for steps:


Bulk Edits and Search and Replace are two new tools in your Cosmic toolbox to help you achieve the same goal: saving time!

We hope you enjoy using the new bulk actions. Please let us know if you have any questions / comments in our Slack channel, and follow us on Twitter for the latest updates to the Cosmic Headless CMS.

","metafields":[{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"gG88bzxZVG","value":"2020-08-11"},{"children":null,"type":"object","title":"Author","key":"author","id":"Iuq7EKixru","value":"5768b253163172890e00002c","object_type":"authors","object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"SygoenEgM3","value":"529f34a0-db30-11ea-84a8-4b73110d28e6-bulk-actions.jpg","url":"https://cdn.cosmicjs.com/529f34a0-db30-11ea-84a8-4b73110d28e6-bulk-actions.jpg","imgix_url":"https://imgix.cosmicjs.com/529f34a0-db30-11ea-84a8-4b73110d28e6-bulk-actions.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"changelogs","created_at":"2020-08-06T18:33:19.693Z","created_by":"5357ef811693be2118000001","modified_at":"2020-09-10T17:41:22.618Z","created":"2020-08-06T18:33:19.693Z","status":"published","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2020-08-11T14:20:39.000Z","thumbnail":"https://imgix.cosmicjs.com/529f34a0-db30-11ea-84a8-4b73110d28e6-bulk-actions.jpg","metadata":{"published_date":"2020-08-11","author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"featured_image":{"url":"https://cdn.cosmicjs.com/529f34a0-db30-11ea-84a8-4b73110d28e6-bulk-actions.jpg","imgix_url":"https://imgix.cosmicjs.com/529f34a0-db30-11ea-84a8-4b73110d28e6-bulk-actions.jpg"}}},{"_id":"6006162c0fd8070007ea0267","order":20,"slug":"static-site-generators-explained-in-5-minutes","title":"Static Site Generators Explained in 5 minutes","content":"

If you aren’t using or experimenting with static sites, it’s time to jump (back) onboard.

Static content is the future.

Given the shift away from static sites to their more dynamic counterparts, this might have seemed far-fetched not long ago. However, new methods for building websites - like Jamstack - have grown in popularity, and static sites are in the middle of a\r\nrenaissance. 

Quick Links:


\"jamstack.org

How does Static Site Generation work?


Previously, static sites only had a limited number of use cases; those included mostly microsites and landing pages. While developers still rely on them for these purposes, there are also a host of new applications thanks to advancements in web architecture.

A key component for bringing static sites to life is what is known as a static site generator. 

In this article, we’ll delve into static site generators, explain how they work, their benefits, and illustrate how to combine them with a headless CMS for best results. 

What is a Static Site Generator (SSG)?

As its name suggests, a static site generator (SSG) is quite literally used to build static sites. 

A static site generator creates a fully static site from a set of HTML files and deploys it to an HTTP server. 

An SSG doesn’t require a database or server-side rendering for execution like a traditional CMS does. Instead, content in the form of text-based files is compiled into HTML pages with the help of templates. Then the site is rendered and uploaded\r\nto a CDN, typically a global one, so content can be delivered to visitors anywhere in the world, fast.

SSGs can eliminate some of the issues which can occur when using a traditional CMS to deliver these smaller websites. Traditional CMS platforms have been around for some time, and while they are still prevalent today, the main benefit comes from working\r\nwith dynamic content. 

What is a Static Site?

In the past, most web development was done using static sites. A static site consists of HTML, CSS and frontend JavaScript. Pages on a static site can run dynamically, but they’re not generated on the server. Instead, files are pre-rendered\r\nand pre-built, then hosted on the server. They don’t change with every user request.

Each page on a static site is a separate file. In the past, if a static website needed to be updated, each page needed to be updated separately. For instance, if you wanted to update the footer on a website you built, each page would have to be updated\r\nindividually.

During the early days of the internet, this was how most of the websites were created, until dynamic sites burst onto the scene.

When a user visits a dynamic site, the site is rendered dynamically on the server, enabling the server to build pages on the fly. This made it easier to publish changes to websites, as well as update content. Using our footer example, with dynamic sites\r\nyou can update the footer once and those changes are then applied to the footer on all pages.

The modern web supports dynamic sites because of the plethora of front-end frameworks available. Dynamic sites are handy for their personalization and omnichannel features, but, can become complex to manage, hard to scale, and the costs of maintaining\r\nthis type of website will add up. 

Why Are Static Site Generators So Popular?

Static site generators are growing in popularity, as static sites see a comeback. Advancements in web technology over the past decade allow developers to decouple the server (or a serverless back-end) from the front-end. Today developers of web apps can\r\nhave the speed of the lightweight static website on the front-end, and the flexibility of dynamic websites on the back-end, by using static site generators.

Modern enterprises favor using SSGs for performance and security, whereas solo developers enjoy design freedom and development simplicity. Furthermore, there are a wealth of SSG options available to serve every use case. We'll examine a few in a minute. 

Let's take a closer look at the benefits of using an SSG for your next project. 

Benefits of Static Site Generators

Security

Traditional CMS platforms are quite susceptible to hacks such as SQL injections and more attacking the holes in a server-side database. SSGs don’t have this database, and display the page a user requests, removing the possibility of a hack. 

Scalability

Because SSGs are designed such that each page is ready to go upon request from the CDN, the drawback of server-response times is gone. Additionally, less computing power is required to respond to additional requests, making it far easier for the site\r\nto handle additional traffic. The result is near-infinite scalability.

Speed

Speed is one of the primary benefits of an SSG - again, thanks to the CDN. The precompiled files can be served directly to browsers, and with lower overall latency when served via a global CDN.

  1. Precompiled files = elimination of server-response time.
  2. Closer to the request (via global CDN) = faster response time.

 These two factors work together to dramatically cut user load times.

Ease of Use and Flexibility

Without the templates and page builders of a traditional CMS, which were nearly required traditional dynamic websites, through SSG's and a decoupled CMS, developers have much more freedom to design and create. 

How Do Static Site Generators Work?

The general procedure of static site generation is actually a simple process. At build time, before the content reaches a CDN, a static site generator or framework reads content from files; usually, this content comes in a format such as markup.

Content then gets rendered to HTML based on templates and served to the CDN.

Finally, the results are saved in a directory and laid out to match the source files and keep them available when requests to view the content are made. 

This simplicity is the basis for the benefits of using an SSG, the features are very limited. Enterprises especially need the flexibility to deploy either static sites or dynamic sites depending on the use cases. For some of those use cases, an SSG can\r\nbe combined with a headless CMS for best results. 

The Drawbacks of SSGs

The way that SSGs turn data into easily deployable static sites can be appealing for many companies. However, the feature limits of an SSG mean that marketers are limited and don’t have the capabilities to deliver omnichannel content.

Static site generators are great for developers, but marketers and content creation team members can struggle with the more technical aspects. They often don’t provide the out-of-the-box workflows that enable valuable collaboration and input from\r\na team. However, there is a way around these challenges.

Integrating SSGs with a Headless CMS

Static site generators can be connected to a headless CMS with the help of APIs. Instead of the tightly coupled approach that traditional CMS platforms rely on, a headless CMS removes the frontend presentation layer and instead connects to multiple frontends\r\nusing APIs. One of those multiple frontends can be a static site generator. This allows you to generate a fast and flexible frontend for your content needs. 

The result is vast possibilities for SSGs: through headless cms, they can easily be used for various use cases including blogging, microsites or landing pages, documentation, and even more advanced use cases such as marketing sites and eCommerce stores.

Getting the most out of your SSG will depend on what you need to use it for, so it's crucial you pick the right static site generator for that use case. 

Examples of Static Site Generators

Next.js\"Everyone's


Next.js is a lightweight React framework that can be used to generate static sites as well as do server-side rendering. Because it's created by the Vercel team, Next.js provides\r\na great developer experience no matter what type of site you want to build. 

Features: Great for building both static and dynamic sites. Versatility in how you can fetch data. The team at Vercel has put a lot of thought into the Next.js framework, creating features like Incremental Static Generation to reduce pre-rendering time.

Drawbacks: Requires server-side knowledge from developers and can be more challenging that other SSGs.

Best For: Enterprises that need to generate static sites for multiple use cases.

Jekyll

\"Quickstart

Jekyll is a Ruby-built static site generator that lets you focus on content. Jekyll is a known entity among SSGs but hasn’t added as many features as others on the list. 

Features: Simple and blog-aware (permalinks, pages, posts and layouts all available for use). Also includes free hosting on GitHub pages. 

Drawbacks: There is a slow build. It will take a long time to generate larger sites, and there are limited built-in features. 

Best For: Smaller websites and personal portfolios.

Gatsby

\"Gatsby

Gatsby is an open source React-based framework for creating blazing fast websites and apps. It features plenty of plugins and can integrate using APIs. 

Features: Static progressive web app (PWA) generator. Ideal not just for static websites but apps that load quickly and are also available offline. Also includes a rich library of plugins. 

Drawbacks: Not ideal for sites with large volumes of content.

Best Use Cases: Perfect for small and medium-sized businesses. 

Cosmic Combines With Static Site Generators for Blazing Fast Results

As static sites surge to the leading-edge of modern web development, static site generators make the build of these sites a walk in the park for developers. Enterprises and complex applications will need the right architecture to handle their content\r\nto fully utilize static site generation.

Cosmic provides a flexible headless CMS architecture that is perfect for plugging into any static site generator. With Cosmic, it's easy to manage content by yourself or with teams.

Use APIs to combine with all of the latest-and-greatest static site generators to generate static sites and other content applications. 

For more information, check out our collection of Gatsby resources or Next.js Resources.

Or, start building right now with our quick-start guides:

","metafields":[{"children":null,"type":"object","title":"Author","key":"author","id":"c1jxjLpgAR","value":"5f5fac071936450007d8a01c","required":true,"object_type":"authors","object":{"_id":"5f5fac071936450007d8a01c","slug":"kyle-meagher","title":"Kyle Meagher","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"hsMOJCxIAj","value":"kylemeags"},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D2rdKO4lEL","value":"e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","url":"https://cdn.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","imgix_url":"https://imgix.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2020-09-14T17:44:39.110Z","created_by":"5357ef811693be2118000001","modified_at":"2020-09-14T17:45:09.251Z","created":"2020-09-14T17:44:39.110Z","status":"published","published_at":"2020-09-14T17:44:39.110Z","modified_by":"5357ef811693be2118000001","thumbnail":"https://imgix.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg"}},{"children":null,"type":"html-textarea","title":"Teaser","key":"teaser","id":"X3ohZst881","value":"

Static sites are in the middle of a comeback - in this article, we cover everything you need to know about static site generators.

"},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"1IekoNIL9l","value":"4d47fd80-5bf9-11eb-afa6-e9412ba0a77c-ssg.png","url":"https://cdn.cosmicjs.com/4d47fd80-5bf9-11eb-afa6-e9412ba0a77c-ssg.png","imgix_url":"https://imgix.cosmicjs.com/4d47fd80-5bf9-11eb-afa6-e9412ba0a77c-ssg.png"},{"children":null,"type":"textarea","title":"SEO Meta Description","key":"seo_meta_description","id":"bc46TDg0lw","value":"Static sites are in the middle of a comeback - in this article, we cover everything you need to know about static site generators."},{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"Q8QRjgqjX2","value":"2021-01-21"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2021-01-18T23:13:48.076Z","created_by":"5f8088982aa32f00093977bb","modified_at":"2021-01-25T21:22:18.632Z","created":"2021-01-18T23:13:48.076Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/4d47fd80-5bf9-11eb-afa6-e9412ba0a77c-ssg.png","modified_by":"5f8088982aa32f00093977bb","publish_at":null,"unpublish_at":null,"published_at":"2021-01-25T21:22:18.632Z","metadata":{"author":{"_id":"5f5fac071936450007d8a01c","slug":"kyle-meagher","title":"Kyle Meagher","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"hsMOJCxIAj","value":"kylemeags"},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D2rdKO4lEL","value":"e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","url":"https://cdn.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","imgix_url":"https://imgix.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2020-09-14T17:44:39.110Z","created_by":"5357ef811693be2118000001","modified_at":"2020-09-14T17:45:09.251Z","created":"2020-09-14T17:44:39.110Z","status":"published","published_at":"2020-09-14T17:44:39.110Z","modified_by":"5357ef811693be2118000001","thumbnail":"https://imgix.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","metadata":{"username":"kylemeags","profile_picture":{"url":"https://cdn.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","imgix_url":"https://imgix.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg"}}},"teaser":"

Static sites are in the middle of a comeback - in this article, we cover everything you need to know about static site generators.

","featured_image":{"url":"https://cdn.cosmicjs.com/4d47fd80-5bf9-11eb-afa6-e9412ba0a77c-ssg.png","imgix_url":"https://imgix.cosmicjs.com/4d47fd80-5bf9-11eb-afa6-e9412ba0a77c-ssg.png"},"seo_meta_description":"Static sites are in the middle of a comeback - in this article, we cover everything you need to know about static site generators.","published_date":"2021-01-21"}},{"_id":"5b743e111a739a78a5f0725b","order":20,"slug":"hostmaker-manages-localized-content","title":"Hostmaker Manages Localized Content ","content":"

Hostmaker is a property management company that operates across 9 cities in 6 countries. Hostmaker manages properties that are being rented to vacationers and lodgers from around the world. They take the hosts' home and provide cleaning and decor services prior to listing the location on up to 15 various travel booking platforms. Hostmaker's hosts love the service for the superior volume that they continue to deliver compared to their competitors, which are driven by proprietary pricing strategies, local market expertise and global industry experience. 



Hostmaker's tech team needed a solution for their product marketing managers to update Landing Pages, Case Studies, Press Releases and FAQs for the various markets they manage, including cities such as Rome, London and Barcelona. Localizing content for Hostmaker's audiences is a mission-critical piece of the marketing strategy that is driving such tremendous growth. Hostmaker chose Cosmic to give their cross-functional team the tools they need to perform their jobs. Now Hostmaker's developers can build reusable components and scalable content models while their marketers can manage content specific to a particular locale. 



\">



"We’ve been using Cosmic for around a year. At first there were some issues with components that prohibited us from performing all our desired tasks, but all those issues were quickly solved by the Cosmic Team. As of now, the tools are great, and have even improved during our use of the platform. It does all the things we need at the moment. As a tool Cosmic has been not only ideal for managing components on the site but adaptive enough for our non-tech users to create landing pages and modify existing content, saving us precious dev time.”


— Hostmaker Digital Team

","metafields":[{"value":"Hostmaker","key":"company","title":"Company","type":"text","children":null},{"value":"Hospitality ","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Hostmaker is a property management company that operates across 9 cities in 6 countries. Hostmaker manages properties that are being rented to vacationers and lodgers from around the world. They take the hosts' home and provide cleaning and decor services prior to listing the location on up to 15 various travel booking platforms. Hostmaker's hosts love the service for the superior volume that they continue to deliver compared to their competitors, which are driven by proprietary pricing strategies, local market expertise and global industry experience. \n\n\n\n\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"2f1889b0-a64d-11e8-a8cb-19319ae2c1b8-B13ds9DG_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/2f1889b0-a64d-11e8-a8cb-19319ae2c1b8-B13ds9DG_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/2f1889b0-a64d-11e8-a8cb-19319ae2c1b8-B13ds9DG_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-03-01T22:26:36.367Z","created_by":"5716b504e9c686d006000073","created":"2018-08-15T14:52:01.115Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-09-25T15:10:44.600Z","metadata":{"company":"Hostmaker","industry_type":"Hospitality ","teaser":"Hostmaker is a property management company that operates across 9 cities in 6 countries. Hostmaker manages properties that are being rented to vacationers and lodgers from around the world. They take the hosts' home and provide cleaning and decor services prior to listing the location on up to 15 various travel booking platforms. Hostmaker's hosts love the service for the superior volume that they continue to deliver compared to their competitors, which are driven by proprietary pricing strategies, local market expertise and global industry experience. \n\n\n\n\n","logo":{"url":"https://cdn.cosmicjs.com/2f1889b0-a64d-11e8-a8cb-19319ae2c1b8-B13ds9DG_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/2f1889b0-a64d-11e8-a8cb-19319ae2c1b8-B13ds9DG_400x400.jpg"}}},{"_id":"5d4c23dd2f744c56f69a1ee5","slug":"content-management-system-for-marketing-campaigns","title":"Content Management System for Marketing Campaigns","content":"

Teams launching marketing campaigns, product launch countdowns and user-generated-content campaigns use the Cosmic JS Content Management System to model, create and deliver content quickly. Developers are given API tools and resources to integrate content with any website or app, while marketers can manage everything from marketing copy to user-generated-data. Creation takes minutes and marketers can easily manage campaign results as well as edit marketing copy and images without bottlenecking their development team.

What is Headless CMS Software?

Headless CMS Software works by providing non-technical editors with a Dashboard UI to model, create and publish content while providing developers with API tools and resources to integrate content with any website or app. By decoupling content from code, teams create a central content repository that can power all of their content-powered applications. 

","metafields":[{"value":"Content Management System for Marketing Campaigns","key":"solution_name","title":"Solution Name","type":"text","children":null},{"value":"63cd02c0-9f54-11e9-ac09-4be8a5631b5e-91e5cf60-cb0d-11e7-8977-434a79150a3c-Screen-Shot-2017-11-16-at-1.59.39-PM.png","key":"image","title":"Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/63cd02c0-9f54-11e9-ac09-4be8a5631b5e-91e5cf60-cb0d-11e7-8977-434a79150a3c-Screen-Shot-2017-11-16-at-1.59.39-PM.png","imgix_url":"https://imgix.cosmicjs.com/63cd02c0-9f54-11e9-ac09-4be8a5631b5e-91e5cf60-cb0d-11e7-8977-434a79150a3c-Screen-Shot-2017-11-16-at-1.59.39-PM.png"},{"object_type":"case-studies","value":"59f49a7cee2adb545c0005bc,59663607a6a3f55962000e40,59666b26c863d9eb6c0001f5","key":"case_studies","title":"Case Studies","type":"objects","children":null,"objects":[{"_id":"59f49a7cee2adb545c0005bc","slug":"life-is-good-shares-gratitude","title":"Life is Good Shares Gratitude","content":"

The Life is Good community shares one simple, unifying mission: to spread the power of optimism. In that spirit, the Life is Good team built a Gratitude Wall for some user-generated-thanksgiving. This widget will allow users to add "sticky notes" with their name and what they are grateful for to the gratitude board. 



The Gratitude Wall is adapted from the Cosmic Sticky Notes App, built on React, Redux and Node.js. The Wall is currently running on Heroku and is i-framed into WordPress on its landing page. The Life is Good team also built a simple moderation application so that their team can easily approve or delete User Generated Content as it flows in. They also built client-side moderation during content entry, which checks against a banned list of words and blocks submission.



"Cosmic provided us with a robust scaffolding to accept, store, and moderate User Generated Content and display it in a custom web app in real time. With Cosmic, we were able to develop an MVP in a matter of hours and focus our resources on UX and design versus content management. The Cosmic Support Team was extremely helpful throughout the process. We’re excited to leverage these tools again for future projects.”

— Chris Schwab, Front End Engineer  

","metafields":[{"value":"Life is Good","key":"company","title":"Company","type":"text","children":null},{"value":"Ecommerce | Apparel","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Spread the power of optimism. In that spirit, the Life is Good team built a Gratitude Wall for some user-generated-thanksgiving. This widget will allow users to add \"sticky notes\" with their name and what they are grateful for to the gratitude board. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg","imgix_url":"https://imgix.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2017-10-28T14:55:56.103Z","created_by":"5716b504e9c686d006000073","created":"2017-10-28T14:55:56.103Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2019-07-25T21:53:35.289Z"},{"_id":"59663607a6a3f55962000e40","slug":"big-fish-launches-marketing-and-tutorial-content-for-games","title":"Big Fish Launches Marketing and Tutorial Content for Games","content":"

When Big Fish launches a new game for iOS, Android, or Web, they use a marketing landing page to promote the launch. Big Fish wanted their game studios to have the ability to curate and update content on each of their landing pages. Other CMS systems weren’t as flexible enough for their needs. Cosmic provides Big Fish with more creative freedom to build landing pages while allowing game studios to make updates on their own.




"We use Cosmic buckets for each of our mobile game landing pages. While our API and storage usage is low, the number of buckets we need is high, which makes the new Clusters Feature a perfect solution for our company use cases. It allows us to\r\nhave a single consolidated invoice, with an overall API and data-limit, but up to 35 buckets for our use."

— Jessica Chappell, Web Developer 

Read more about Big Fish and their games.

","metafields":[{"value":"Big Fish","key":"company","title":"Company","type":"text","children":null},{"value":"Gaming","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"When Big Fish launches a new game for iOS, Android, or Web, they use a marketing landing page to promote the launch. Other CMS systems weren’t as flexible enough for their needs. Cosmic provides Big Fish with more creative freedom to build landing pages while allowing game studios to make updates on their own.\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png","imgix_url":"https://imgix.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created":"2017-07-12T14:45:27.402Z","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","status":"published","publish_at":null,"published_at":"2018-11-08T23:15:38.911Z"},{"_id":"59666b26c863d9eb6c0001f5","slug":"brand-new-congress-elects-a-new-cms","title":"Brand New Congress Elects a New CMS","content":"

Every democracy requires representation. Brand New Congress intends to elect a new set of representatives, and is doing so with the help of Cosmic to deliver their content via the cloud.



“Brand New Congress moved from a traditional CMS to Cosmic as part of a re-implementation of our website. It’s been great! First, Cosmic’s API-first approach creates a separation between content and implementation, which gave us the flexibility to implement our website in a way that made the most sense for our use case: mostly server side rendered with small React widgets, without worrying about compatibility with existing CMSes. Second, Cosmic’s user roles – developer and editor – where the developer defines a schema and the editor edits objects within those parameters – give me (the developer) the confidence that my content editors cannot accidentally\r\nbreak the site or edit the content in some incompatible way.”

— Ben Paul Ryan Parker, Director of Technology, Brand New Congress

","metafields":[{"value":"Brand New Congress","key":"company","title":"Company","type":"text","children":null},{"value":"Non-Profit","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Every democracy requires representation. Brand New Congress intends to elect a new set of representatives, and is doing so with the help of Cosmic to deliver their content via the cloud. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"60ba6a80-674a-11e7-a522-2b0861658cb0-Brand_New_Congress_logo.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/60ba6a80-674a-11e7-a522-2b0861658cb0-Brand_New_Congress_logo.png","imgix_url":"https://imgix.cosmicjs.com/60ba6a80-674a-11e7-a522-2b0861658cb0-Brand_New_Congress_logo.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created":"2017-07-12T18:32:06.453Z","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","status":"published","publish_at":null}]},{"repeater_fields":"\"\"\"\"\"[{\"title\":\"Slug\",\"key\":\"slug\",\"value\":\"\",\"type\":\"text\",\"required\":false}]\"\"\"\"\"","value":"react-blog","key":"app_slugs","title":"App Slugs","type":"repeater","children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"react-blog","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"landing-page","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"single-page-sales-funnel","type":"text","required":false}]}]},{"repeater_fields":"\"\"\"\"\"[{\"title\":\"Slug\",\"key\":\"slug\",\"value\":\"\",\"type\":\"text\",\"required\":false}]\"\"\"\"\"","value":"seo-manager","key":"extension_slugs","title":"Extension Slugs","type":"repeater","children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"seo-manager","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"twitter-search","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"google-analytics","type":"text","required":false}]}]},{"key":"testimonial","title":"Testimonial","type":"html-textarea","children":null,"value":"

"Cosmic JS provided us with a robust scaffolding to accept, store, and moderate User Generated Content and display it in a custom web app in real time. With Cosmic, we were able to develop an MVP in a matter of hours and focus our resources on UX and design versus content management.”

"},{"value":"Chris Schwab, Front End Engineer at Life is Good","key":"testimonial_credit","title":"Testimonial Credit","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"solutions","created":"2019-08-08T13:30:05.028Z","created_at":"2019-07-08T15:02:12.719Z","modified_at":"2019-08-08T13:30:56.068Z","status":"published","locale":null,"published_at":"2019-08-08T13:30:56.068Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"order":20,"metadata":{"solution_name":"Content Management System for Marketing Campaigns","image":{"url":"https://cdn.cosmicjs.com/63cd02c0-9f54-11e9-ac09-4be8a5631b5e-91e5cf60-cb0d-11e7-8977-434a79150a3c-Screen-Shot-2017-11-16-at-1.59.39-PM.png","imgix_url":"https://imgix.cosmicjs.com/63cd02c0-9f54-11e9-ac09-4be8a5631b5e-91e5cf60-cb0d-11e7-8977-434a79150a3c-Screen-Shot-2017-11-16-at-1.59.39-PM.png"},"case_studies":[{"_id":"59f49a7cee2adb545c0005bc","slug":"life-is-good-shares-gratitude","title":"Life is Good Shares Gratitude","content":"

The Life is Good community shares one simple, unifying mission: to spread the power of optimism. In that spirit, the Life is Good team built a Gratitude Wall for some user-generated-thanksgiving. This widget will allow users to add "sticky notes" with their name and what they are grateful for to the gratitude board. 



The Gratitude Wall is adapted from the Cosmic Sticky Notes App, built on React, Redux and Node.js. The Wall is currently running on Heroku and is i-framed into WordPress on its landing page. The Life is Good team also built a simple moderation application so that their team can easily approve or delete User Generated Content as it flows in. They also built client-side moderation during content entry, which checks against a banned list of words and blocks submission.



"Cosmic provided us with a robust scaffolding to accept, store, and moderate User Generated Content and display it in a custom web app in real time. With Cosmic, we were able to develop an MVP in a matter of hours and focus our resources on UX and design versus content management. The Cosmic Support Team was extremely helpful throughout the process. We’re excited to leverage these tools again for future projects.”

— Chris Schwab, Front End Engineer  

","metafields":[{"value":"Life is Good","key":"company","title":"Company","type":"text","children":null},{"value":"Ecommerce | Apparel","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Spread the power of optimism. In that spirit, the Life is Good team built a Gratitude Wall for some user-generated-thanksgiving. This widget will allow users to add \"sticky notes\" with their name and what they are grateful for to the gratitude board. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg","imgix_url":"https://imgix.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2017-10-28T14:55:56.103Z","created_by":"5716b504e9c686d006000073","created":"2017-10-28T14:55:56.103Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2019-07-25T21:53:35.289Z","metadata":{"company":"Life is Good","industry_type":"Ecommerce | Apparel","teaser":"Spread the power of optimism. In that spirit, the Life is Good team built a Gratitude Wall for some user-generated-thanksgiving. This widget will allow users to add \"sticky notes\" with their name and what they are grateful for to the gratitude board. \n","logo":{"url":"https://cdn.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg","imgix_url":"https://imgix.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg"}}},{"_id":"59663607a6a3f55962000e40","slug":"big-fish-launches-marketing-and-tutorial-content-for-games","title":"Big Fish Launches Marketing and Tutorial Content for Games","content":"

When Big Fish launches a new game for iOS, Android, or Web, they use a marketing landing page to promote the launch. Big Fish wanted their game studios to have the ability to curate and update content on each of their landing pages. Other CMS systems weren’t as flexible enough for their needs. Cosmic provides Big Fish with more creative freedom to build landing pages while allowing game studios to make updates on their own.




"We use Cosmic buckets for each of our mobile game landing pages. While our API and storage usage is low, the number of buckets we need is high, which makes the new Clusters Feature a perfect solution for our company use cases. It allows us to\r\nhave a single consolidated invoice, with an overall API and data-limit, but up to 35 buckets for our use."

— Jessica Chappell, Web Developer 

Read more about Big Fish and their games.

","metafields":[{"value":"Big Fish","key":"company","title":"Company","type":"text","children":null},{"value":"Gaming","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"When Big Fish launches a new game for iOS, Android, or Web, they use a marketing landing page to promote the launch. Other CMS systems weren’t as flexible enough for their needs. Cosmic provides Big Fish with more creative freedom to build landing pages while allowing game studios to make updates on their own.\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png","imgix_url":"https://imgix.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created":"2017-07-12T14:45:27.402Z","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","status":"published","publish_at":null,"published_at":"2018-11-08T23:15:38.911Z","metadata":{"company":"Big Fish","industry_type":"Gaming","teaser":"When Big Fish launches a new game for iOS, Android, or Web, they use a marketing landing page to promote the launch. Other CMS systems weren’t as flexible enough for their needs. Cosmic provides Big Fish with more creative freedom to build landing pages while allowing game studios to make updates on their own.\n","logo":{"url":"https://cdn.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png","imgix_url":"https://imgix.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png"}}},{"_id":"59666b26c863d9eb6c0001f5","slug":"brand-new-congress-elects-a-new-cms","title":"Brand New Congress Elects a New CMS","content":"

Every democracy requires representation. Brand New Congress intends to elect a new set of representatives, and is doing so with the help of Cosmic to deliver their content via the cloud.



“Brand New Congress moved from a traditional CMS to Cosmic as part of a re-implementation of our website. It’s been great! First, Cosmic’s API-first approach creates a separation between content and implementation, which gave us the flexibility to implement our website in a way that made the most sense for our use case: mostly server side rendered with small React widgets, without worrying about compatibility with existing CMSes. Second, Cosmic’s user roles – developer and editor – where the developer defines a schema and the editor edits objects within those parameters – give me (the developer) the confidence that my content editors cannot accidentally\r\nbreak the site or edit the content in some incompatible way.”

— Ben Paul Ryan Parker, Director of Technology, Brand New Congress

","metafields":[{"value":"Brand New Congress","key":"company","title":"Company","type":"text","children":null},{"value":"Non-Profit","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Every democracy requires representation. Brand New Congress intends to elect a new set of representatives, and is doing so with the help of Cosmic to deliver their content via the cloud. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"60ba6a80-674a-11e7-a522-2b0861658cb0-Brand_New_Congress_logo.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/60ba6a80-674a-11e7-a522-2b0861658cb0-Brand_New_Congress_logo.png","imgix_url":"https://imgix.cosmicjs.com/60ba6a80-674a-11e7-a522-2b0861658cb0-Brand_New_Congress_logo.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created":"2017-07-12T18:32:06.453Z","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","status":"published","publish_at":null,"metadata":{"company":"Brand New Congress","industry_type":"Non-Profit","teaser":"Every democracy requires representation. Brand New Congress intends to elect a new set of representatives, and is doing so with the help of Cosmic to deliver their content via the cloud. \n","logo":{"url":"https://cdn.cosmicjs.com/60ba6a80-674a-11e7-a522-2b0861658cb0-Brand_New_Congress_logo.png","imgix_url":"https://imgix.cosmicjs.com/60ba6a80-674a-11e7-a522-2b0861658cb0-Brand_New_Congress_logo.png"}}}],"app_slugs":[{"slug":"react-blog"},{"slug":"landing-page"},{"slug":"single-page-sales-funnel"}],"extension_slugs":[{"slug":"seo-manager"},{"slug":"twitter-search"},{"slug":"google-analytics"}],"testimonial":"

"Cosmic JS provided us with a robust scaffolding to accept, store, and moderate User Generated Content and display it in a custom web app in real time. With Cosmic, we were able to develop an MVP in a matter of hours and focus our resources on UX and design versus content management.”

","testimonial_credit":"Chris Schwab, Front End Engineer at Life is Good"}},{"_id":"595e797db7cb932a7100013e","order":20,"slug":"react-native-cms","title":"React Native CMS","content":"

Cosmic JS makes it easy to manage content for your React Native applications.  Install the Official Cosmic JS JavaScript Client to add dynamic content to your React Native app.  Get a feel for React Native by taking a spin through our React Native apps and check out the tutorials below.

React Native CMS Articles

How to Make a Simple Twitter Clone with React Native
How to Build a Cross-Platform Blog Using React Native and Node.js

React Native CMS Resources

Cosmic JS Docs
Official JavaScript Client
Cosmic JS GitHub

Examples

npm i cosmicjs

Then in your JavaScript file, get your content:

\">
","metafields":[{"children":null,"type":"file","title":"Image","key":"image","id":"W4iZz7SsUs","value":"a1e22810-27b0-11e7-b6ae-8108cf4caa96-react.svg","url":"https://cdn.cosmicjs.com/a1e22810-27b0-11e7-b6ae-8108cf4caa96-react.svg","imgix_url":"https://imgix.cosmicjs.com/a1e22810-27b0-11e7-b6ae-8108cf4caa96-react.svg"},{"children":null,"type":"file","title":"Thumbnail","key":"thumbnail","id":"XvdanAeb1J","value":"a1e22810-27b0-11e7-b6ae-8108cf4caa96-react.svg","url":"https://cdn.cosmicjs.com/a1e22810-27b0-11e7-b6ae-8108cf4caa96-react.svg","imgix_url":"https://imgix.cosmicjs.com/a1e22810-27b0-11e7-b6ae-8108cf4caa96-react.svg"},{"children":null,"type":"html-textarea","title":"Blurb","key":"blurb","id":"f1YXxMs42k","value":"

Cosmic is the best CMS for React Native apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

"},{"children":null,"type":"text","title":"Headline","key":"headline","id":"v8UcgKu2z3","value":"React Native"},{"children":null,"type":"text","title":"SEO Description","key":"seo_description","id":"pDVvfXlP55","value":"Cosmic is the best CMS for React Native apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators."},{"children":null,"type":"file","title":"Twitter Card Image","key":"twitter_card_image","id":"ovYGEVlCvr","value":"afbb8c30-2ac4-11e7-8c0a-bd67c616bd40-react.jpg","url":"https://cdn.cosmicjs.com/afbb8c30-2ac4-11e7-8c0a-bd67c616bd40-react.jpg","imgix_url":"https://imgix.cosmicjs.com/afbb8c30-2ac4-11e7-8c0a-bd67c616bd40-react.jpg"},{"children":null,"type":"html-textarea","title":"Code Example","key":"code_example","id":"x8KrTcuvPC","value":""},{"children":null,"type":"text","title":"SEO Title","key":"seo_title","id":"Mc4ZihwN9q","value":"Best Headless CMS for React Native"},{"children":[],"type":"repeater","title":"Videos","key":"videos","id":"frgtgqfrpylludl8pnsi","value":"","repeater_fields":[{"title":"Title","key":"title","value":"","type":"text","required":false},{"title":"Link","key":"link","value":"","type":"text","required":false}]}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"kb-articles","created_at":"2017-04-22T23:07:51.159Z","created_by":"5357ef811693be2118000001","created":"2017-07-06T17:55:09.654Z","status":"published","modified_at":"2020-06-27T19:20:41.691Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-06-27T19:20:41.691Z","unpublish_at":null,"metadata":{"image":{"url":"https://cdn.cosmicjs.com/a1e22810-27b0-11e7-b6ae-8108cf4caa96-react.svg","imgix_url":"https://imgix.cosmicjs.com/a1e22810-27b0-11e7-b6ae-8108cf4caa96-react.svg"},"thumbnail":{"url":"https://cdn.cosmicjs.com/a1e22810-27b0-11e7-b6ae-8108cf4caa96-react.svg","imgix_url":"https://imgix.cosmicjs.com/a1e22810-27b0-11e7-b6ae-8108cf4caa96-react.svg"},"blurb":"

Cosmic is the best CMS for React Native apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

","headline":"React Native","seo_description":"Cosmic is the best CMS for React Native apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.","twitter_card_image":{"url":"https://cdn.cosmicjs.com/afbb8c30-2ac4-11e7-8c0a-bd67c616bd40-react.jpg","imgix_url":"https://imgix.cosmicjs.com/afbb8c30-2ac4-11e7-8c0a-bd67c616bd40-react.jpg"},"code_example":"","seo_title":"Best Headless CMS for React Native","videos":[]}},{"_id":"5f38391903a87500083c2b92","order":21,"slug":"api-based-cms","title":"API-based CMS","content":"","metafields":[{"children":null,"type":"file","title":"Image","key":"image","id":"sWwtr5X3ye","value":"db6ee8f0-df2e-11ea-b1c6-4d9e65be7589-api-based-cms.svg","url":"https://cdn.cosmicjs.com/db6ee8f0-df2e-11ea-b1c6-4d9e65be7589-api-based-cms.svg","imgix_url":"https://imgix.cosmicjs.com/db6ee8f0-df2e-11ea-b1c6-4d9e65be7589-api-based-cms.svg"},{"children":null,"type":"file","title":"Thumbnail","key":"thumbnail","id":"e1s8vsQCXU","value":"db6ee8f0-df2e-11ea-b1c6-4d9e65be7589-api-based-cms.svg","url":"https://cdn.cosmicjs.com/db6ee8f0-df2e-11ea-b1c6-4d9e65be7589-api-based-cms.svg","imgix_url":"https://imgix.cosmicjs.com/db6ee8f0-df2e-11ea-b1c6-4d9e65be7589-api-based-cms.svg"},{"children":null,"type":"html-textarea","title":"Blurb","key":"blurb","id":"qPx5VTlQ9x","value":"

Cosmic is the best API-based CMS for websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

"},{"children":null,"type":"text","title":"Headline","key":"headline","id":"wU1fSfyhtv","value":"API-based"},{"children":null,"type":"text","title":"SEO Description","key":"seo_description","id":"yiXfHjgL0Q","value":"Cosmic is the best API-based CMS for websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators."},{"children":null,"type":"file","title":"Twitter Card Image","key":"twitter_card_image","id":"V6xxrAyfpO","value":"eda42a30-df2e-11ea-b1c6-4d9e65be7589-api-based-cms.png","url":"https://cdn.cosmicjs.com/eda42a30-df2e-11ea-b1c6-4d9e65be7589-api-based-cms.png","imgix_url":"https://imgix.cosmicjs.com/eda42a30-df2e-11ea-b1c6-4d9e65be7589-api-based-cms.png"},{"children":null,"type":"html-textarea","title":"Code Example","key":"code_example","id":"TCfQMAvoAT","value":""},{"children":null,"type":"text","title":"SEO Title","key":"seo_title","id":"UM6KogYpTI","value":"Best API-based CMS"},{"children":[],"type":"repeater","title":"Videos","key":"videos","id":"gW1qw1uv22","value":"","repeater_fields":[{"title":"Title","key":"title","value":"","type":"text","required":false},{"title":"Link","key":"link","value":"","type":"text","required":false}]},{"children":null,"type":"text","title":"Apps Search Term","key":"apps_search_term","id":"bS2HDCnRoj","value":"react"},{"children":null,"type":"text","title":"Articles Search Term","key":"articles_search_term","id":"Gvh851S353","value":"react"},{"children":null,"type":"html-textarea","title":"Page Overview","key":"page_overview","id":"TDtnRZUslf","value":""},{"children":null,"type":"html-textarea","title":"SEO Content","key":"seo_content","id":"5VexcyxUD5","value":""}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"kb-articles","created_at":"2020-08-15T19:35:53.398Z","created_by":"5357ef811693be2118000001","created":"2020-08-15T19:35:53.398Z","status":"published","modified_at":"2020-08-15T19:40:16.879Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2020-08-15T19:40:16.879Z","metadata":{"image":{"url":"https://cdn.cosmicjs.com/db6ee8f0-df2e-11ea-b1c6-4d9e65be7589-api-based-cms.svg","imgix_url":"https://imgix.cosmicjs.com/db6ee8f0-df2e-11ea-b1c6-4d9e65be7589-api-based-cms.svg"},"thumbnail":{"url":"https://cdn.cosmicjs.com/db6ee8f0-df2e-11ea-b1c6-4d9e65be7589-api-based-cms.svg","imgix_url":"https://imgix.cosmicjs.com/db6ee8f0-df2e-11ea-b1c6-4d9e65be7589-api-based-cms.svg"},"blurb":"

Cosmic is the best API-based CMS for websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

","headline":"API-based","seo_description":"Cosmic is the best API-based CMS for websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.","twitter_card_image":{"url":"https://cdn.cosmicjs.com/eda42a30-df2e-11ea-b1c6-4d9e65be7589-api-based-cms.png","imgix_url":"https://imgix.cosmicjs.com/eda42a30-df2e-11ea-b1c6-4d9e65be7589-api-based-cms.png"},"code_example":"","seo_title":"Best API-based CMS","videos":[],"apps_search_term":"react","articles_search_term":"react","page_overview":"","seo_content":""}},{"_id":"5fff3b962398620007d40121","order":21,"slug":"headless-cms-the-foundation-for-modern-digital-experiences","title":"Headless CMS: The Foundation for Modern Digital Experiences","content":"

In the modern world, companies must adapt to new realities constantly, and quickly. Changes are happening as a result of unique customer preferences, which in turn are driven by an increase in new communication channels including IoT devices, wearables, and incessant new mobile applications. 

\"a

The rapid addition of new channels has a tremendous impact on the modern digital experience - the interactions customers and brands have with each other across the digital landscape. The quest for an optimal digital experience has increased our focus on the customer. Customers of today, and in the future, won't be satisfied with being entertained or educated with content; increasingly they want personalization and convenience. 

For businesses that wish to compete, especially at the enterprise level, the table stakes for a digital presence are more complex than just "having a website." In fact, modern digital experiences often demand multiple websites, applications, and endpoints for customers. Customers expect nothing less than super-fast and hyper-personalized experiences, while internally, both marketers and developers have a need for speed, autonomy, and freedom to innovate. From a business perspective, all of the above needs to happen in a way that lowers costs and saves time.

It's enough to make business owners throw in the towel, retrogress, and pour their marketing budget into direct mailers.

Fortunately, there are better solutions available to meet the complex digital needs of today, and as we move into the future, we believe a headless approach will ultimately become the standard for managing content across all these channels effectively.

Managing Digital Experiences: Out With The Old...

A content management system (CMS) has long been a pivotal component for a successful digital strategy. It’s impossible for brands to effectively create, edit, manage, store, and deliver digital content without one. But, it’s not the only piece of technology required to effectively manage digital experiences.

Analytics, marketing automation, and digital asset management are just a few of the additional tools brands depend on. These additional tools have a major impact - not only on the type of CMS you require, but also on the software systems you implement and even the core business logic of your applications.

So, how have companies managed this historically?

The Old Suite Approach

For enterprise companies, in particular, a suite approach has often been the ideal approach - one vendor to handle all of your needs, from content management to email marketing and most other things within the marketing department. 

To build digital experiences, companies would then incorporate a legacy CMS solution to manage a corporate website and blog. For some small companies, this approach can still work; after all, WordPress still powers over 30% of the internet. However, one issue that brands eventually run into is that legacy CMS solutions are rigid - they restrict and define the digital experience you can create.

One example would be WordPress being largely incapable of managing mobile application data. Its responsive web design is okay. But if you want to manage content for more complex applications? Wordpress can't hack it - or requires your dev team to build proprietary logic just to make your solution "fit" WordPress infrastructure.

While these platforms provide easy to use templates that make posting content to one or two endpoints easy, they fall short of providing consumers with the extensible, omnichannel experiences that they crave. On the backend, your integrations with other business tools become increasingly difficult to maintain  There are too many restrictions on companies; something needs to change about the way CMS is implemented. 

The Modern Best-of-Breed Approach

That centralized solution is usually a headless CMS. Headless technology gives teams more flexibility to choose the best tool for their jobs, in addition to better options for distributing content across multiple channels.

As one example, it’s quite common for marketing teams to rip and replace their martech software. In fact, according to ChiefMarTech, 83% of marketers replace a martech app each year. CRM tools, marketing automation, analytics, and business intelligence software are regularly pulled out, plugged in, and replaced as businesses scale or improve solutions.

A flexible and unbiased headless CMS makes connecting (and re-connecting) these tools seamless, producing a harmonious frontend experience for users and increasing development velocity on the backend.

The Role of The Headless CMS

How does headless accomplish this?

Since traditional content management systems lack the functionality and flexibility to do it all, headless platforms don’t attempt to be an all-in-one solution.

Headless CMS act as the central repository within a best of breed stack, focusing primarily on managing a brand’s content lifecycle. Increased focus on flexible API functionality allows companies to connect to multiple frontend channels and integrate the backend with whichever business tools they need, to build the experience they envision.

Headless Architecture: Removing Backend Restraints

Whereas in a legacy platform, the frontend and backend systems are tightly coupled together, a headless CMS has a decoupled approach that separates the backend repository from the frontend delivery layer. 

So, teams still have a repository that allows them to create, store, manage and edit content and then can connect to any frontend channel they need to with the help of APIs. This removes the handcuffs from developers especially. Developers have more freedom to optimize the frontend experience for customers, using any language they want, and with more precise optimizations for unique frontends.

Whether brands need to deliver to something traditional like a website or a mobile device, emerging channels like a VR device or smartwatch, or a channel that doesn't exist yet, a headless CMS ensures your core data is readily deployable.

Read More: Headless CMS: Everything Explained 


Free-flowing Content for Free-flowing Experiences

The second distinguishing feature of headless CMS from other content management systems is the collaboration tools that enable IT, teams and marketers, to work together fluidly.

For instance, thanks to the frontend agnosticism of a headless CMS, developers are free to use different frontend frameworks for different channels and experiences, optimizing each channel for speed and usability in the process. No matter where the content is heading, marketers can use the same user-friendly dashboards, workflow management tools, content authoring environments, and content preview feature.

Here's a real-world example of how this works: Medical Realities, a platform that delivers real and immersive experiences through VR, needed a way to deliver content to devices to teach surgeons using interactive models. With the help of Cosmic, a headless CMS, their developers quickly created content models that would allow their non-technical users to manage complex medical VR content and deliver it to the headsets. 

Read More: Medical Realities Case Study

Cosmic: A Faster Way to Manage Modern Content Experiences

The modern digital experience is no longer limited to the corporate website or even the mobile device. It includes new and emerging channels such as VR headsets, smartwatches, video games, and more. Brands need a way to create and manage these experiences their customers crave quickly, and a central system that can coexist and integrate seamlessly with other tools in the Martech stack.

Cosmic is a headless CMS platform that enables teams to build these modern experiences by providing the new tools that developers need to create their own front ends or extend their capabilities with APIs. It also gives marketers an easy-to-use content editing experience that makes generating content for these experiences possible. 

","metafields":[{"children":null,"type":"object","title":"Author","key":"author","id":"9niXHuVfLP","value":"5f5fac071936450007d8a01c","required":true,"object_type":"authors","object":{"_id":"5f5fac071936450007d8a01c","slug":"kyle-meagher","title":"Kyle Meagher","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"hsMOJCxIAj","value":"kylemeags"},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D2rdKO4lEL","value":"e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","url":"https://cdn.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","imgix_url":"https://imgix.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2020-09-14T17:44:39.110Z","created_by":"5357ef811693be2118000001","modified_at":"2020-09-14T17:45:09.251Z","created":"2020-09-14T17:44:39.110Z","status":"published","published_at":"2020-09-14T17:44:39.110Z","modified_by":"5357ef811693be2118000001","thumbnail":"https://imgix.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg"}},{"children":null,"type":"html-textarea","title":"Teaser","key":"teaser","id":"iT5rDOnlGF","value":"

We believe headless is positioned to dominate the CMS market in the next decade. How so? Take a peek into our insights.

"},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"nWhT7BnJBD","value":"9caa7b10-db01-11ea-84a8-4b73110d28e6-headless-CMS.png","url":"https://cdn.cosmicjs.com/9caa7b10-db01-11ea-84a8-4b73110d28e6-headless-CMS.png","imgix_url":"https://imgix.cosmicjs.com/9caa7b10-db01-11ea-84a8-4b73110d28e6-headless-CMS.png"},{"children":null,"type":"textarea","title":"SEO Meta Description","key":"seo_meta_description","id":"RYG21eiiCB","value":"Headless CMS will dominate the market in the next decade - but how? Explore the limitations of current solutions to understand."},{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"lgoq0FZ6vt","value":""}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2021-01-13T18:27:34.360Z","created_by":"5f8088982aa32f00093977bb","modified_at":"2021-01-15T17:56:37.389Z","created":"2021-01-13T18:27:34.360Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/9caa7b10-db01-11ea-84a8-4b73110d28e6-headless-CMS.png","modified_by":"5f8088982aa32f00093977bb","publish_at":null,"published_at":"2021-01-15T17:56:37.389Z","unpublish_at":null,"metadata":{"author":{"_id":"5f5fac071936450007d8a01c","slug":"kyle-meagher","title":"Kyle Meagher","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"hsMOJCxIAj","value":"kylemeags"},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D2rdKO4lEL","value":"e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","url":"https://cdn.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","imgix_url":"https://imgix.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2020-09-14T17:44:39.110Z","created_by":"5357ef811693be2118000001","modified_at":"2020-09-14T17:45:09.251Z","created":"2020-09-14T17:44:39.110Z","status":"published","published_at":"2020-09-14T17:44:39.110Z","modified_by":"5357ef811693be2118000001","thumbnail":"https://imgix.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","metadata":{"username":"kylemeags","profile_picture":{"url":"https://cdn.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","imgix_url":"https://imgix.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg"}}},"teaser":"

We believe headless is positioned to dominate the CMS market in the next decade. How so? Take a peek into our insights.

","featured_image":{"url":"https://cdn.cosmicjs.com/9caa7b10-db01-11ea-84a8-4b73110d28e6-headless-CMS.png","imgix_url":"https://imgix.cosmicjs.com/9caa7b10-db01-11ea-84a8-4b73110d28e6-headless-CMS.png"},"seo_meta_description":"Headless CMS will dominate the market in the next decade - but how? Explore the limitations of current solutions to understand.","published_date":""}},{"_id":"5f10d3bd2060a90007ad26cc","order":21,"slug":"webhook-triggers-via-api-npm-modules-update-and-more","title":"Webhook triggers via API, NPM modules updates, and more","content":"

We have a few exciting updates to help you power content for your modern websites and apps using Cosmic.


1. Trigger webhooks via API
You can now trigger webhooks using the API by passing trigger_webhook=true in the request body. Find your webhooks in Bucket Settings > Webhooks. Be sure to check out the Webhooks documentation and API documentation to see with which API requests this is possible (Add, Edit, and Delete Objects and Media).


2. Edit Object via API using id
We have added the functionality to edit Objects via the API using id.  Which gives you the ability to edit the Object slug (which was previously not possible). Be sure to check this out in our Edit Object API documentation.


3. Cosmic NPM module updates
Check out the latest release of Cosmic NPM module. The new version includes the following updates: 

This update will improve the overall developer experience as well as you'll able to deliver content to users much faster 🚀. 


4. Cosmic Gatsby source plugin updates
We've updated the packages/dependencies in the Gatsby source plugin for Cosmic and fixed localMedia bugs related to Object & Objects metafields. Check out the latest version here.


We hope you enjoy these updates. If you have any questions, join our Slack community and reach out to us on Twitter.

","metafields":[{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"xdIwbvgB9K","value":"2020-07-17"},{"children":null,"type":"object","title":"Author","key":"author","id":"cTEXcGcOFC","value":"599b30c44f629e3a5900010f","object_type":"authors","object":{"_id":"599b30c44f629e3a5900010f","slug":"jazib-sawar","title":"Jazib Sawar","content":"","metafields":[{"value":"d3261f20-1a9d-11ea-a8c4-6b69c807b1d7-12.jpg","id":"MoCJXLYqwC","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/d3261f20-1a9d-11ea-a8c4-6b69c807b1d7-12.jpg","imgix_url":"https://imgix.cosmicjs.com/d3261f20-1a9d-11ea-a8c4-6b69c807b1d7-12.jpg"},{"value":"jazibsawar","id":"","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-08-21T19:13:08.011Z","created_by":"5357ef811693be2118000001","created":"2017-08-21T19:13:08.011Z","status":"published","modified_at":"2020-09-15T15:41:11.076Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-12-09T16:06:31.900Z","thumbnail":"https://imgix.cosmicjs.com/d3261f20-1a9d-11ea-a8c4-6b69c807b1d7-12.jpg"}},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"wQVDeI5XLl","value":"334f2110-c7c5-11ea-99bd-bbc5ef3737c2-2RLRbRkWtpc.jpg","url":"https://cdn.cosmicjs.com/334f2110-c7c5-11ea-99bd-bbc5ef3737c2-2RLRbRkWtpc.jpg","imgix_url":"https://imgix.cosmicjs.com/334f2110-c7c5-11ea-99bd-bbc5ef3737c2-2RLRbRkWtpc.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"changelogs","created_at":"2020-07-16T22:25:01.244Z","created_by":"597f4130c4102a386100055c","modified_at":"2020-08-10T14:02:39.393Z","created":"2020-07-16T22:25:01.244Z","status":"published","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2020-07-17T17:00:08.887Z","metadata":{"published_date":"2020-07-17","author":{"_id":"599b30c44f629e3a5900010f","slug":"jazib-sawar","title":"Jazib Sawar","content":"","metafields":[{"value":"d3261f20-1a9d-11ea-a8c4-6b69c807b1d7-12.jpg","id":"MoCJXLYqwC","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/d3261f20-1a9d-11ea-a8c4-6b69c807b1d7-12.jpg","imgix_url":"https://imgix.cosmicjs.com/d3261f20-1a9d-11ea-a8c4-6b69c807b1d7-12.jpg"},{"value":"jazibsawar","id":"","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-08-21T19:13:08.011Z","created_by":"5357ef811693be2118000001","created":"2017-08-21T19:13:08.011Z","status":"published","modified_at":"2020-09-15T15:41:11.076Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-12-09T16:06:31.900Z","thumbnail":"https://imgix.cosmicjs.com/d3261f20-1a9d-11ea-a8c4-6b69c807b1d7-12.jpg","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/d3261f20-1a9d-11ea-a8c4-6b69c807b1d7-12.jpg","imgix_url":"https://imgix.cosmicjs.com/d3261f20-1a9d-11ea-a8c4-6b69c807b1d7-12.jpg"},"username":"jazibsawar"}},"featured_image":{"url":"https://cdn.cosmicjs.com/334f2110-c7c5-11ea-99bd-bbc5ef3737c2-2RLRbRkWtpc.jpg","imgix_url":"https://imgix.cosmicjs.com/334f2110-c7c5-11ea-99bd-bbc5ef3737c2-2RLRbRkWtpc.jpg"}}},{"_id":"5a2455620cb0e3291c00002e","order":21,"slug":"acculevel-deploys-a-blog","title":"Acculevel Deploys a Blog","content":"

Acculevel is Your Foundation Expert. Serving the Midwest United States for the last 20 years, Acculevel knows what it means to serve and do a job right. Customer retention, reviews and loyalty are the name of their game, so to optimize these efforts and keep customers engaged and informed, Acculevel is scaling up their digital presence through its upcoming website, a new mobile application and more. Led by a new Chief Technology Officer overseeing developers and content editors, here's how Acculevel is ensuring their own foundation is solid.

Mired in an installed WordPress system was leaving Acculevel without the flexibility needed to nimbly build and publish content campaigns to engage with customers. Acculevel's tech team is currently building out a new zippy website built on a Node.js stack, complete with API integrations for ACH Authentication (Plaid) and Payment Gateway (Stripe). Acculevel needed a blog feed that would allow their new API-first methodology to pull data via the cloud while allowing their content editors to easily build and manage content in a WYSIWYG editor. With Cosmic, they were able to build and deploy a fully functioning blog in under 30 minutes.



"Cosmic provided us with a seamless on-boarding experience for creating a Bucket to manage blog content for our growing organization. We needed a programming-language agnostic API to manage content both within our existing WordPress website as well as within our new Node.js web application. Cosmic fit the bill perfectly with its simple Object schema and powerful Metafields. With Cosmic, content is just data and you can pull it however you'd like, wherever you like, allowing us  to build new tools in the future such as survey tools, employee forums and more.”

— Dylan Marsh, Chief Technology Officer  

","metafields":[{"value":"Acculevel ","key":"company","title":"Company","type":"text","children":null},{"value":"Construction","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Acculevel needed a blog feed that would allow their new API-first methodology to pull data via the cloud while allowing their content editor to easily build and manage content in a WYSIWYG editor. With Cosmic, they were able to build and deploy a fully functioning blog in under 30 minutes.\n\n\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"7621bb20-dab4-11e7-82e3-e92aaea009f5-o.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/7621bb20-dab4-11e7-82e3-e92aaea009f5-o.jpg","imgix_url":"https://imgix.cosmicjs.com/7621bb20-dab4-11e7-82e3-e92aaea009f5-o.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2017-12-03T19:49:54.515Z","created_by":"5716b504e9c686d006000073","created":"2017-12-03T19:49:54.515Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5357ef811693be2118000001","publish_at":null,"metadata":{"company":"Acculevel ","industry_type":"Construction","teaser":"Acculevel needed a blog feed that would allow their new API-first methodology to pull data via the cloud while allowing their content editor to easily build and manage content in a WYSIWYG editor. With Cosmic, they were able to build and deploy a fully functioning blog in under 30 minutes.\n\n\n","logo":{"url":"https://cdn.cosmicjs.com/7621bb20-dab4-11e7-82e3-e92aaea009f5-o.jpg","imgix_url":"https://imgix.cosmicjs.com/7621bb20-dab4-11e7-82e3-e92aaea009f5-o.jpg"}}},{"_id":"5d4c245d2f744c56f69a1ee6","slug":"content-management-system-for-native-apps","title":"Content Management System for Native Apps","content":"

Cosmic JS provides a flexible content management system for teams building native apps. When you create content in the Cosmic JS Headless Content Management System, you're able to deliver it to all your websites and native apps. Create once and deliver everywhere. Content creators are given a web-based Dashboard to create content that iOS and Android apps can consume just like their website. This ensures messaging-consistency and the ability to reach all of your users, regardless of their device.

What is Headless CMS Software?

Headless CMS Software works by providing non-technical editors with a Dashboard UI to model, create and publish content while providing developers with API tools and resources to integrate content with any website or app. By decoupling content from code, teams create a central content repository that can power all of their content-powered applications. 

","metafields":[{"value":"Content Management System for Native Apps","key":"solution_name","title":"Solution Name","type":"text","children":null},{"value":"633ad600-9dc1-11e9-a5b4-e5df9f8049d3-Plato.png","key":"image","title":"Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/633ad600-9dc1-11e9-a5b4-e5df9f8049d3-Plato.png","imgix_url":"https://imgix.cosmicjs.com/633ad600-9dc1-11e9-a5b4-e5df9f8049d3-Plato.png"},{"object_type":"case-studies","value":"5ade6e0e2b218820ec24bff1,5bd889bf80b80325461575c5,5bea030f3ca4d02ee5b4abbd","key":"case_studies","title":"Case Studies","type":"objects","children":null,"objects":[{"_id":"5ade6e0e2b218820ec24bff1","slug":"medical-realities-delivers-vr-surgical-content","title":"Medical Realities Delivers VR Surgical Content","content":"

The Medical Realties Platform is a technology powerhouse designed to deliver realism and immersion. Delivering high-quality surgical training using Virtual Reality, Medical Realities lets you become immersed while world-class surgeons teach their interactive modules, which includes 360-degree 4K video and a testing system within the application. 



The Medical Realities team needed a way for educators (non-technical editors) to manage content that could be served to VR headsets for consumption by trainees, so they chose Cosmic to manage and deliver their content from the cloud through an API. 



"Cosmic allowed us to easily spin up content models that would allow our non-technical editors to manage the most sophisticated medical VR content out there. Our developers were equipped with robust Docs and Example Apps to get them started and were able to use the bleeding-edge frameworks necessary to run Virtual Reality."

— Joe Marritt, Lead Web Developer 

","metafields":[{"value":"Medical Realities","key":"company","title":"Company","type":"text","children":null},{"value":"Healthcare and Virtual Reality ","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"The Medical Realties Platform is a technology powerhouse designed to deliver realism and immersion. Delivering high-quality surgical training using Virtual Reality, Medical Realities lets you become immersed while world-class surgeons teach their interactive modules, which includes 360-degree 4K video and a testing system within the application. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"0a95ad50-474f-11e8-b969-053c57b3610c-medical-realities-1.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/0a95ad50-474f-11e8-b969-053c57b3610c-medical-realities-1.png","imgix_url":"https://imgix.cosmicjs.com/0a95ad50-474f-11e8-b969-053c57b3610c-medical-realities-1.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-04-23T23:36:46.885Z","created_by":"5716b504e9c686d006000073","created":"2018-04-23T23:36:46.885Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-05-18T17:07:50.800Z"},{"_id":"5bd889bf80b80325461575c5","slug":"plato-delivers-mobile-news-feed-content-with-cosmic-js","title":"Plato Delivers Mobile News Feed Content with Cosmic","content":"

Plato's mission is to bring people together through meaningful & social games. Plato combines chat & games seamlessly, as the first messenger built from the ground up to support full multiplayer games. With a team comprised of Yahoo and gaming veterans plus backing from WhatsApp, Plato is available now on iOS & Android.



Plato had a home-built CMS that, between operational costs and the engineering salaries to maintain it, was costing far too much. The team decided to replace their internal system with Cosmic to allow their developers to build new content models when they need to while empowering editors to manage content without bottlenecking the development team. 

Plato's new tech stack is Golang based and hosted on AWS. Plato's mobile clients, written in Swift and Kotlin, access their news feed content, which is ATOM Syndication Format. The application uses the Cosmic REST API to pull articles and package them into an ATOM-compliant feed. 



"It is refreshing to use an API-first CMS, rather than trying to integrate with a complex, monolithic system and adapt it to our specific use case.”

— Jesse Macnish, Chief Technology Officer  

","metafields":[{"value":"Plato","key":"company","title":"Company","type":"text","children":null},{"value":"Gaming ","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Plato's mission is to bring people together through meaningful & social games. Plato combines chat & games seamlessly, as the first messenger built from the ground up to support full multiplayer games. With a team comprised of Yahoo and gaming veterans plus backing from WhatsApp, Plato is available now on iOS & Android.\n\n\n\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"e6fd2940-1390-11e9-a4d9-67aa1af4f618-pauHfhZ9_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e6fd2940-1390-11e9-a4d9-67aa1af4f618-pauHfhZ9_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e6fd2940-1390-11e9-a4d9-67aa1af4f618-pauHfhZ9_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2018-10-30T16:41:35.346Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2019-01-08T23:23:29.527Z"},{"_id":"5bea030f3ca4d02ee5b4abbd","slug":"killing-floor-2-launches-twisted-christmas-seasons-beatings","title":"Killing Floor 2 Launches Twisted Christmas: Season's Beatings","content":"

Tripwire Interactive recently launched its corporate website on Cosmic and can now easily manage microsite content for each game via a dedicated studio manager as its content creator. Killing Floor 2 is one of the studio's most popular games and incorporates seasonal promotions associated with its product release schedule. 



Twisted Christmas, a seasonal campaign designed to promote Killing Floor 2, has an "Advent Calendar" that debuts a new piece of content everyday leading up to Killing Floor 2's release. The team at Tripwire Interactive was able to build their application and create their marketing landing page easily using Cosmic. Using the Scheduled Publishing feature, they created all of the content for the countdown and set each Object to publish at its respective date. Now they're free to work on other projects knowing their content is publishing on schedule. Read more about how Tripwire Interactive builds apps faster using Cosmic.


"Cosmic allowed us to easily integrate a secure and fast back-end API into our React app. Cosmic fit our needs with its simple web-based dashboard so that members of our marketing team can create, edit, and delete new content on the fly. Our team\r\nhas been enjoying the ease of use with the new system."

— Owen Liversidge, Lead Developer


","metafields":[{"value":"Killing Floor 2","key":"company","title":"Company","type":"text","children":null},{"value":"Gaming","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Twisted Christmas, a seasonal campaign designed to promote Killing Floor 2, has an \"Advent Calendar\" that debuts a new piece of content everyday leading up to Killing Floor 2's release. The team at Tripwire Interactive was able to build their application and create their marketing landing page easily using Cosmic. Using the Scheduled Publishing feature, they created all of the content for the countdown and set each Object to publish at its respective date. Now they're free to work on other projects knowing their content is publishing on schedule. Read more about how Tripwire Interactive builds apps faster using Cosmic.\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"89f06f40-e6cd-11e8-93f0-a94cde6f34a7-KF2_Logo.5b251745.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/89f06f40-e6cd-11e8-93f0-a94cde6f34a7-KF2_Logo.5b251745.png","imgix_url":"https://imgix.cosmicjs.com/89f06f40-e6cd-11e8-93f0-a94cde6f34a7-KF2_Logo.5b251745.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2018-11-12T22:47:43.586Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-11-13T14:43:47.754Z"}]},{"repeater_fields":"\"\"\"\"[{\"title\":\"Slug\",\"key\":\"slug\",\"value\":\"\",\"type\":\"text\",\"required\":false}]\"\"\"\"","value":"cross-platform-blog","key":"app_slugs","title":"App Slugs","type":"repeater","children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"cross-platform-blog","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"react-native-twitter-clone","type":"text","required":false}]}]},{"repeater_fields":"\"\"\"\"[{\"title\":\"Slug\",\"key\":\"slug\",\"value\":\"\",\"type\":\"text\",\"required\":false}]\"\"\"\"","value":"imgix-editor","key":"extension_slugs","title":"Extension Slugs","type":"repeater","children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"imgix-editor","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"export-to-csv","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"mux-videos","type":"text","required":false}]}]},{"key":"testimonial","title":"Testimonial","type":"html-textarea","children":null,"value":"

"It is refreshing to use an API-first CMS, rather than trying to integrate with a complex, monolithic system and adapt it to our specific use case.”

"},{"value":"Jesse Macnish, Chief Technology Officer at Plato Chat","key":"testimonial_credit","title":"Testimonial Credit","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"solutions","created":"2019-08-08T13:32:13.551Z","created_at":"2019-07-08T15:03:43.051Z","modified_at":"2019-08-08T13:33:05.559Z","status":"published","locale":null,"published_at":"2019-08-08T13:33:05.559Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"order":21,"metadata":{"solution_name":"Content Management System for Native Apps","image":{"url":"https://cdn.cosmicjs.com/633ad600-9dc1-11e9-a5b4-e5df9f8049d3-Plato.png","imgix_url":"https://imgix.cosmicjs.com/633ad600-9dc1-11e9-a5b4-e5df9f8049d3-Plato.png"},"case_studies":[{"_id":"5ade6e0e2b218820ec24bff1","slug":"medical-realities-delivers-vr-surgical-content","title":"Medical Realities Delivers VR Surgical Content","content":"

The Medical Realties Platform is a technology powerhouse designed to deliver realism and immersion. Delivering high-quality surgical training using Virtual Reality, Medical Realities lets you become immersed while world-class surgeons teach their interactive modules, which includes 360-degree 4K video and a testing system within the application. 



The Medical Realities team needed a way for educators (non-technical editors) to manage content that could be served to VR headsets for consumption by trainees, so they chose Cosmic to manage and deliver their content from the cloud through an API. 



"Cosmic allowed us to easily spin up content models that would allow our non-technical editors to manage the most sophisticated medical VR content out there. Our developers were equipped with robust Docs and Example Apps to get them started and were able to use the bleeding-edge frameworks necessary to run Virtual Reality."

— Joe Marritt, Lead Web Developer 

","metafields":[{"value":"Medical Realities","key":"company","title":"Company","type":"text","children":null},{"value":"Healthcare and Virtual Reality ","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"The Medical Realties Platform is a technology powerhouse designed to deliver realism and immersion. Delivering high-quality surgical training using Virtual Reality, Medical Realities lets you become immersed while world-class surgeons teach their interactive modules, which includes 360-degree 4K video and a testing system within the application. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"0a95ad50-474f-11e8-b969-053c57b3610c-medical-realities-1.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/0a95ad50-474f-11e8-b969-053c57b3610c-medical-realities-1.png","imgix_url":"https://imgix.cosmicjs.com/0a95ad50-474f-11e8-b969-053c57b3610c-medical-realities-1.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-04-23T23:36:46.885Z","created_by":"5716b504e9c686d006000073","created":"2018-04-23T23:36:46.885Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-05-18T17:07:50.800Z","metadata":{"company":"Medical Realities","industry_type":"Healthcare and Virtual Reality ","teaser":"The Medical Realties Platform is a technology powerhouse designed to deliver realism and immersion. Delivering high-quality surgical training using Virtual Reality, Medical Realities lets you become immersed while world-class surgeons teach their interactive modules, which includes 360-degree 4K video and a testing system within the application. \n","logo":{"url":"https://cdn.cosmicjs.com/0a95ad50-474f-11e8-b969-053c57b3610c-medical-realities-1.png","imgix_url":"https://imgix.cosmicjs.com/0a95ad50-474f-11e8-b969-053c57b3610c-medical-realities-1.png"}}},{"_id":"5bd889bf80b80325461575c5","slug":"plato-delivers-mobile-news-feed-content-with-cosmic-js","title":"Plato Delivers Mobile News Feed Content with Cosmic","content":"

Plato's mission is to bring people together through meaningful & social games. Plato combines chat & games seamlessly, as the first messenger built from the ground up to support full multiplayer games. With a team comprised of Yahoo and gaming veterans plus backing from WhatsApp, Plato is available now on iOS & Android.



Plato had a home-built CMS that, between operational costs and the engineering salaries to maintain it, was costing far too much. The team decided to replace their internal system with Cosmic to allow their developers to build new content models when they need to while empowering editors to manage content without bottlenecking the development team. 

Plato's new tech stack is Golang based and hosted on AWS. Plato's mobile clients, written in Swift and Kotlin, access their news feed content, which is ATOM Syndication Format. The application uses the Cosmic REST API to pull articles and package them into an ATOM-compliant feed. 



"It is refreshing to use an API-first CMS, rather than trying to integrate with a complex, monolithic system and adapt it to our specific use case.”

— Jesse Macnish, Chief Technology Officer  

","metafields":[{"value":"Plato","key":"company","title":"Company","type":"text","children":null},{"value":"Gaming ","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Plato's mission is to bring people together through meaningful & social games. Plato combines chat & games seamlessly, as the first messenger built from the ground up to support full multiplayer games. With a team comprised of Yahoo and gaming veterans plus backing from WhatsApp, Plato is available now on iOS & Android.\n\n\n\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"e6fd2940-1390-11e9-a4d9-67aa1af4f618-pauHfhZ9_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e6fd2940-1390-11e9-a4d9-67aa1af4f618-pauHfhZ9_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e6fd2940-1390-11e9-a4d9-67aa1af4f618-pauHfhZ9_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2018-10-30T16:41:35.346Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2019-01-08T23:23:29.527Z","metadata":{"company":"Plato","industry_type":"Gaming ","teaser":"Plato's mission is to bring people together through meaningful & social games. Plato combines chat & games seamlessly, as the first messenger built from the ground up to support full multiplayer games. With a team comprised of Yahoo and gaming veterans plus backing from WhatsApp, Plato is available now on iOS & Android.\n\n\n\n","logo":{"url":"https://cdn.cosmicjs.com/e6fd2940-1390-11e9-a4d9-67aa1af4f618-pauHfhZ9_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e6fd2940-1390-11e9-a4d9-67aa1af4f618-pauHfhZ9_400x400.jpg"}}},{"_id":"5bea030f3ca4d02ee5b4abbd","slug":"killing-floor-2-launches-twisted-christmas-seasons-beatings","title":"Killing Floor 2 Launches Twisted Christmas: Season's Beatings","content":"

Tripwire Interactive recently launched its corporate website on Cosmic and can now easily manage microsite content for each game via a dedicated studio manager as its content creator. Killing Floor 2 is one of the studio's most popular games and incorporates seasonal promotions associated with its product release schedule. 



Twisted Christmas, a seasonal campaign designed to promote Killing Floor 2, has an "Advent Calendar" that debuts a new piece of content everyday leading up to Killing Floor 2's release. The team at Tripwire Interactive was able to build their application and create their marketing landing page easily using Cosmic. Using the Scheduled Publishing feature, they created all of the content for the countdown and set each Object to publish at its respective date. Now they're free to work on other projects knowing their content is publishing on schedule. Read more about how Tripwire Interactive builds apps faster using Cosmic.


"Cosmic allowed us to easily integrate a secure and fast back-end API into our React app. Cosmic fit our needs with its simple web-based dashboard so that members of our marketing team can create, edit, and delete new content on the fly. Our team\r\nhas been enjoying the ease of use with the new system."

— Owen Liversidge, Lead Developer


","metafields":[{"value":"Killing Floor 2","key":"company","title":"Company","type":"text","children":null},{"value":"Gaming","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Twisted Christmas, a seasonal campaign designed to promote Killing Floor 2, has an \"Advent Calendar\" that debuts a new piece of content everyday leading up to Killing Floor 2's release. The team at Tripwire Interactive was able to build their application and create their marketing landing page easily using Cosmic. Using the Scheduled Publishing feature, they created all of the content for the countdown and set each Object to publish at its respective date. Now they're free to work on other projects knowing their content is publishing on schedule. Read more about how Tripwire Interactive builds apps faster using Cosmic.\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"89f06f40-e6cd-11e8-93f0-a94cde6f34a7-KF2_Logo.5b251745.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/89f06f40-e6cd-11e8-93f0-a94cde6f34a7-KF2_Logo.5b251745.png","imgix_url":"https://imgix.cosmicjs.com/89f06f40-e6cd-11e8-93f0-a94cde6f34a7-KF2_Logo.5b251745.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2018-11-12T22:47:43.586Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-11-13T14:43:47.754Z","metadata":{"company":"Killing Floor 2","industry_type":"Gaming","teaser":"Twisted Christmas, a seasonal campaign designed to promote Killing Floor 2, has an \"Advent Calendar\" that debuts a new piece of content everyday leading up to Killing Floor 2's release. The team at Tripwire Interactive was able to build their application and create their marketing landing page easily using Cosmic. Using the Scheduled Publishing feature, they created all of the content for the countdown and set each Object to publish at its respective date. Now they're free to work on other projects knowing their content is publishing on schedule. Read more about how Tripwire Interactive builds apps faster using Cosmic.\n","logo":{"url":"https://cdn.cosmicjs.com/89f06f40-e6cd-11e8-93f0-a94cde6f34a7-KF2_Logo.5b251745.png","imgix_url":"https://imgix.cosmicjs.com/89f06f40-e6cd-11e8-93f0-a94cde6f34a7-KF2_Logo.5b251745.png"}}}],"app_slugs":[{"slug":"cross-platform-blog"},{"slug":"react-native-twitter-clone"}],"extension_slugs":[{"slug":"imgix-editor"},{"slug":"export-to-csv"},{"slug":"mux-videos"}],"testimonial":"

"It is refreshing to use an API-first CMS, rather than trying to integrate with a complex, monolithic system and adapt it to our specific use case.”

","testimonial_credit":"Jesse Macnish, Chief Technology Officer at Plato Chat"}},{"_id":"5e7293190fbea60007a5c8f1","order":22,"slug":"two-factor-authentication-emoji-nav-icons-and-database-upgrade","title":"Two-Factor Authentication, Emoji Nav Icons, and Database Upgrade","content":"

We've got an exciting release for you which includes two-factor authentication, new emoji nav icons, and a big database upgrade.

🔒Two-Factor Authentication
Two-factor authentication is now available on all accounts for free. Go to Account Settings > Two-Factor Authentication to connect your account to your mobile phone for an added layer of security. This feature does not apply to users using a third-party login such as Google, GitHub, or SSO.



🚀Emoji Nav Icons
You can now add Emojis to the Object Type sidebar nav. Go to Object Type > Settings to replace the default folder icon with any one of your favorite emojis. This is a great way to organize content visually, and also fun.



⚡MongoDB Database Upgrade
You may not have noticed, but we've recently undergone a pretty massive database upgrade and migration. What you MAY have noticed is that the dashboard and API requests (non-cached endpoints) are now up to 50% faster and more resilient to sudden bursts of traffic. This is because our database is now powered by the best-in-class, auto-scaling infrastructure at MongoDB Atlas.


We hope you enjoy these new features, security, and infrastructure upgrades. We're constantly improving our service to make your experience better. If you have any questions or comments, please feel free to reach out to us on Twitter and join our community on Slack.

","metafields":[{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"wiJldkeqES","value":"2020-03-20"},{"children":null,"type":"object","title":"Author","key":"author","id":"iTUta8EFRi","value":"5768b253163172890e00002c","object_type":"authors","object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"pjIx2ZCwMA","value":"c82676c0-5cc8-11ea-8649-b9c3b12e7d52-UhH0uL9YahM.jpg","url":"https://cdn.cosmicjs.com/c82676c0-5cc8-11ea-8649-b9c3b12e7d52-UhH0uL9YahM.jpg","imgix_url":"https://imgix.cosmicjs.com/c82676c0-5cc8-11ea-8649-b9c3b12e7d52-UhH0uL9YahM.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"changelogs","created_at":"2020-03-18T21:31:05.415Z","created_by":"5357ef811693be2118000001","modified_at":"2020-08-10T13:59:43.225Z","created":"2020-03-18T21:31:05.415Z","status":"published","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2020-03-20T14:01:49.744Z","metadata":{"published_date":"2020-03-20","author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"featured_image":{"url":"https://cdn.cosmicjs.com/c82676c0-5cc8-11ea-8649-b9c3b12e7d52-UhH0uL9YahM.jpg","imgix_url":"https://imgix.cosmicjs.com/c82676c0-5cc8-11ea-8649-b9c3b12e7d52-UhH0uL9YahM.jpg"}}},{"_id":"59666b26c863d9eb6c0001f5","slug":"brand-new-congress-elects-a-new-cms","title":"Brand New Congress Elects a New CMS","content":"

Every democracy requires representation. Brand New Congress intends to elect a new set of representatives, and is doing so with the help of Cosmic to deliver their content via the cloud.



“Brand New Congress moved from a traditional CMS to Cosmic as part of a re-implementation of our website. It’s been great! First, Cosmic’s API-first approach creates a separation between content and implementation, which gave us the flexibility to implement our website in a way that made the most sense for our use case: mostly server side rendered with small React widgets, without worrying about compatibility with existing CMSes. Second, Cosmic’s user roles – developer and editor – where the developer defines a schema and the editor edits objects within those parameters – give me (the developer) the confidence that my content editors cannot accidentally\r\nbreak the site or edit the content in some incompatible way.”

— Ben Paul Ryan Parker, Director of Technology, Brand New Congress

","metafields":[{"value":"Brand New Congress","key":"company","title":"Company","type":"text","children":null},{"value":"Non-Profit","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Every democracy requires representation. Brand New Congress intends to elect a new set of representatives, and is doing so with the help of Cosmic to deliver their content via the cloud. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"60ba6a80-674a-11e7-a522-2b0861658cb0-Brand_New_Congress_logo.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/60ba6a80-674a-11e7-a522-2b0861658cb0-Brand_New_Congress_logo.png","imgix_url":"https://imgix.cosmicjs.com/60ba6a80-674a-11e7-a522-2b0861658cb0-Brand_New_Congress_logo.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created":"2017-07-12T18:32:06.453Z","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","status":"published","order":22,"publish_at":null,"metadata":{"company":"Brand New Congress","industry_type":"Non-Profit","teaser":"Every democracy requires representation. Brand New Congress intends to elect a new set of representatives, and is doing so with the help of Cosmic to deliver their content via the cloud. \n","logo":{"url":"https://cdn.cosmicjs.com/60ba6a80-674a-11e7-a522-2b0861658cb0-Brand_New_Congress_logo.png","imgix_url":"https://imgix.cosmicjs.com/60ba6a80-674a-11e7-a522-2b0861658cb0-Brand_New_Congress_logo.png"}}},{"_id":"5bea030f3ca4d02ee5b4abbd","order":22,"slug":"killing-floor-2-launches-twisted-christmas-seasons-beatings","title":"Killing Floor 2 Launches Twisted Christmas: Season's Beatings","content":"

Tripwire Interactive recently launched its corporate website on Cosmic and can now easily manage microsite content for each game via a dedicated studio manager as its content creator. Killing Floor 2 is one of the studio's most popular games and incorporates seasonal promotions associated with its product release schedule. 



Twisted Christmas, a seasonal campaign designed to promote Killing Floor 2, has an "Advent Calendar" that debuts a new piece of content everyday leading up to Killing Floor 2's release. The team at Tripwire Interactive was able to build their application and create their marketing landing page easily using Cosmic. Using the Scheduled Publishing feature, they created all of the content for the countdown and set each Object to publish at its respective date. Now they're free to work on other projects knowing their content is publishing on schedule. Read more about how Tripwire Interactive builds apps faster using Cosmic.


"Cosmic allowed us to easily integrate a secure and fast back-end API into our React app. Cosmic fit our needs with its simple web-based dashboard so that members of our marketing team can create, edit, and delete new content on the fly. Our team\r\nhas been enjoying the ease of use with the new system."

— Owen Liversidge, Lead Developer


","metafields":[{"value":"Killing Floor 2","key":"company","title":"Company","type":"text","children":null},{"value":"Gaming","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Twisted Christmas, a seasonal campaign designed to promote Killing Floor 2, has an \"Advent Calendar\" that debuts a new piece of content everyday leading up to Killing Floor 2's release. The team at Tripwire Interactive was able to build their application and create their marketing landing page easily using Cosmic. Using the Scheduled Publishing feature, they created all of the content for the countdown and set each Object to publish at its respective date. Now they're free to work on other projects knowing their content is publishing on schedule. Read more about how Tripwire Interactive builds apps faster using Cosmic.\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"89f06f40-e6cd-11e8-93f0-a94cde6f34a7-KF2_Logo.5b251745.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/89f06f40-e6cd-11e8-93f0-a94cde6f34a7-KF2_Logo.5b251745.png","imgix_url":"https://imgix.cosmicjs.com/89f06f40-e6cd-11e8-93f0-a94cde6f34a7-KF2_Logo.5b251745.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2018-11-12T22:47:43.586Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-11-13T14:43:47.754Z","metadata":{"company":"Killing Floor 2","industry_type":"Gaming","teaser":"Twisted Christmas, a seasonal campaign designed to promote Killing Floor 2, has an \"Advent Calendar\" that debuts a new piece of content everyday leading up to Killing Floor 2's release. The team at Tripwire Interactive was able to build their application and create their marketing landing page easily using Cosmic. Using the Scheduled Publishing feature, they created all of the content for the countdown and set each Object to publish at its respective date. Now they're free to work on other projects knowing their content is publishing on schedule. Read more about how Tripwire Interactive builds apps faster using Cosmic.\n","logo":{"url":"https://cdn.cosmicjs.com/89f06f40-e6cd-11e8-93f0-a94cde6f34a7-KF2_Logo.5b251745.png","imgix_url":"https://imgix.cosmicjs.com/89f06f40-e6cd-11e8-93f0-a94cde6f34a7-KF2_Logo.5b251745.png"}}},{"_id":"5d4c24d22f744c56f69a1ee8","slug":"content-management-system-for-modern-stack-websites","title":"Content Management System for Modern Stack Websites ","content":"

The Cosmic JS Content Management System provides flexibility for teams managing content for modern stack websites, quickly and out-of-the-box. Your team is free to use their favorite modern tools to power content for websites, mobile apps, static websites and more. Create structured content models to reuse across all your websites and applications. API tools and resources are available to help you start building with the latest static site generators, workflows and integrations.


What is Headless CMS Software?

Headless CMS Software works by providing non-technical editors with a Dashboard UI to model, create and publish content while providing developers with API tools and resources to integrate content with any website or app. By decoupling content from code, teams create a central content repository that can power all of their content-powered applications. 

","metafields":[{"value":"Content Management System for Modern Stack Websites ","key":"solution_name","title":"Solution Name","type":"text","children":null},{"value":"abe9e700-9dc2-11e9-a5b4-e5df9f8049d3-tripwire.png","key":"image","title":"Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/abe9e700-9dc2-11e9-a5b4-e5df9f8049d3-tripwire.png","imgix_url":"https://imgix.cosmicjs.com/abe9e700-9dc2-11e9-a5b4-e5df9f8049d3-tripwire.png"},{"object_type":"case-studies","value":"5b4753096d4f364510bf1290,5bd206599dca8d10e941b69b,5a73423ee520776813591ee2","key":"case_studies","title":"Case Studies","type":"objects","children":null,"objects":[{"_id":"5b4753096d4f364510bf1290","slug":"hypometer-technologies-fantasy-insider-and-stats-insider","title":"Hypometer Technologies: Fantasy Insider and Stats Insider","content":"

Hypometer Technologies is revolutionizing the Australian sporting experience by making predictive analytics accessible to the masses. Their next generation sports media platforms are the form guide for every big game, and the go-to sites for trusted predictive analytics.

Historically the team managed content via WordPress, but as they scaled their content WordPress started to bottleneck them. They pivoted to working with the WordPress API, which resulted in slow load times as WordPress would call all assets and return unnecessary data in the API call. 

Recently the tech team was searching for a solution to manage dynamic content for their blogs, Fantasy Insider and Stats Insider. They wanted to remain decoupled from their application's codebase when managing content, so they started researching headless CMS systems. They chose Cosmic due to the simplicity of API integration and the content editing tools that would empower their marketers and writers. 

In addition, Cosmic allowed the Hypometer team to write scripts to migrate existing WordPress post content over to Cosmic for editing and publishing. 


Fantasy Insider

Built On: Python | Angular | Cosmic

Fantasy Insider is the market leader for daily fantasy sports information in Australia, with over half of the active market visiting the site for content or predictive tools each week.



Stats Insider

Built On: Python | Angular | Cosmic

Launched in early 2018, Stats Insider is Australia's first advanced sports analytics and predictive data platform for sports fans, punters and fantasy sports players.

Stats Insider will be providing information and predictions for US sports from August. Stay up to date with them on Twitter.  


"The headless CMS we chose had to tick a lot of boxes. At the end of the day, though, it needed to be easy for our external writers to use. We recorded a quick screencast video internally showing how to set up a piece of content, sent that out to our team, and I haven’t had a question from any of our writers since. We’ve just started to use Cosmic for other things like an activity status bar on Stats Insider which frees up more time for our developers and makes our workflow more flexible.”

— Katie Prowd, Co-Founder of Fantasy Insider

","metafields":[{"value":"Hypometer Technologies","key":"company","title":"Company","type":"text","children":null},{"value":"Fantasy Sports","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Hypometer Technologies is revolutionizing the Australian sporting experience by making predictive analytics accessible to the masses. Their next generation sports media platforms are the form guide for every big game, and the go-to sites for trusted predictive analytics.\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"1818c5e0-8b63-11e8-8b12-1d164d145eab-15122993_1073313959433910_7212266943208762093_o.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/1818c5e0-8b63-11e8-8b12-1d164d145eab-15122993_1073313959433910_7212266943208762093_o.png","imgix_url":"https://imgix.cosmicjs.com/1818c5e0-8b63-11e8-8b12-1d164d145eab-15122993_1073313959433910_7212266943208762093_o.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-12T13:09:29.236Z","created_by":"5716b504e9c686d006000073","created":"2018-07-12T13:09:29.236Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-07-20T13:31:54.633Z"},{"_id":"5bd206599dca8d10e941b69b","slug":"derive-systems-runs-on-cosmic-js","title":"Derive Systems runs on Cosmic","content":"

Derive Systems  is a leading automotive technology company with over 2 million software installations powering upgraded experiences for drivers on the road today. Derive  connects vehicles and their engines to the digital world, enabling individuals and fleets to take control and optimize for performance, fuel efficiency, safety, and more. 



The team at Derive Systems was in search of a headless CMS that would give their developers flexibility out-of-the-box while enabling their content managers to manage content in a familiar and modern CMS Dashboard. They chose Cosmic due to its easy content modeling tools for their Blog, Press, About and Team Sections. Derive now runs a Next.js, React and Express framework that utilizes the Cosmic GraphQL API to deliver its content.




“Leveraging the Cosmic GraphQL API allows for easy updates to our news and blog, while keeping payloads small and fast. Integration with Cosmic could not be easier thanks to their great support. We look forward to developing more features on the platform.”


— Dustin Brink, Front End Developer at Derive Systems 

","metafields":[{"value":"Derive Systems","key":"company","title":"Company","type":"text","children":null},{"value":"Automotive","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Derive Systems  is a leading automotive technology company with over 2 million software installations powering upgraded experiences for drivers on the road today. Derive  connects vehicles and their engines to the digital world, enabling individuals and fleets to take control and optimize for performance, fuel efficiency, safety, and more. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"60aac7a0-ded7-11e8-86d0-2998be663226-derive.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/60aac7a0-ded7-11e8-86d0-2998be663226-derive.jpg","imgix_url":"https://imgix.cosmicjs.com/60aac7a0-ded7-11e8-86d0-2998be663226-derive.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2018-10-25T18:07:21.426Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-11-15T14:51:19.007Z"},{"_id":"5a73423ee520776813591ee2","slug":"rocket-radio-builds-a-podcast-streaming-website","title":"Rocket Radio Builds a Podcast-Streaming Website","content":"

Rocket Radio is a San Francisco Bay Area Music Network that creates podcasts featuring music and interviews with established and rising stars in the music industry. With shows covering all music genres, they needed a new website that allowed for numerous content editors and developers representing a blended team. See how Rocket Radio  built their new podcast website using Node.js, React.js, Redux and Cosmic.



The Rocket Radio tech team built out a single page application with Node, React and Redux using Example Apps from the Cosmic Community. The team was able to leverage the Cosmic API to build out core components from Authentication to a news gallery to podcast listening features.



"From Docs to Example Apps and Service, it was all there. Cosmic provided a huge boost in cutting development time all while helping our team meet its goals. I would certainly recommend Cosmic to anyone seeking to build out a website using some of the latest technology while looking to stay ahead of the game."

— Gus A., Senior Software Engineer 


\">
","metafields":[{"value":"Rocket Radio","key":"company","title":"Company","type":"text","children":null},{"value":"Music and Entertainment","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Rocket Radio is a San Francisco Bay Area Music Network that creates podcasts featuring music and interviews with established and rising stars in the music industry. With shows covering all music genres, they needed a new website that allowed for numerous content editors and developers representing a blended team. See how Rocket Radio built their new podcast website using Node.js React.js, Redux and Cosmic.\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"acbb5cf0-076d-11e8-a43c-e17c6c324439-IMG_0380.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/acbb5cf0-076d-11e8-a43c-e17c6c324439-IMG_0380.jpg","imgix_url":"https://imgix.cosmicjs.com/acbb5cf0-076d-11e8-a43c-e17c6c324439-IMG_0380.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-02-01T16:37:18.070Z","created_by":"5716b504e9c686d006000073","created":"2018-02-01T16:37:18.070Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-08-30T20:32:56.765Z"}]},{"repeater_fields":"\"\"\"\"\"[{\"title\":\"Slug\",\"key\":\"slug\",\"value\":\"\",\"type\":\"text\",\"required\":false}]\"\"\"\"\"","value":"gatsby-blog","key":"app_slugs","title":"App Slugs","type":"repeater","children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"gatsby-blog","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"jamstack-fitness-website","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"cross-platform-blog","type":"text","required":false}]}]},{"repeater_fields":"\"\"\"\"\"[{\"title\":\"Slug\",\"key\":\"slug\",\"value\":\"\",\"type\":\"text\",\"required\":false}]\"\"\"\"\"","value":"wordpress-importer","key":"extension_slugs","title":"Extension Slugs","type":"repeater","children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"wordpress-importer","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"algolia-search","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"imgix-editor","type":"text","required":false}]}]},{"key":"testimonial","title":"Testimonial","type":"html-textarea","children":null,"value":"

"Cosmic JS allowed us to easily integrate a secure and fast back-end API into our React app. Cosmic fit our needs with its simple web-based dashboard so that members of our marketing team can create, edit, and delete new content on the fly. Our team has been enjoying the ease of use with the new system."

"},{"value":"Owen Liversidge, Lead Developer at Tripwire Interactive","key":"testimonial_credit","title":"Testimonial Credit","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"solutions","created":"2019-08-08T13:34:10.745Z","created_at":"2019-07-08T15:04:56.206Z","modified_at":"2019-08-08T13:36:13.491Z","status":"published","locale":null,"published_at":"2019-08-08T13:36:13.492Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"order":22,"metadata":{"solution_name":"Content Management System for Modern Stack Websites ","image":{"url":"https://cdn.cosmicjs.com/abe9e700-9dc2-11e9-a5b4-e5df9f8049d3-tripwire.png","imgix_url":"https://imgix.cosmicjs.com/abe9e700-9dc2-11e9-a5b4-e5df9f8049d3-tripwire.png"},"case_studies":[{"_id":"5b4753096d4f364510bf1290","slug":"hypometer-technologies-fantasy-insider-and-stats-insider","title":"Hypometer Technologies: Fantasy Insider and Stats Insider","content":"

Hypometer Technologies is revolutionizing the Australian sporting experience by making predictive analytics accessible to the masses. Their next generation sports media platforms are the form guide for every big game, and the go-to sites for trusted predictive analytics.

Historically the team managed content via WordPress, but as they scaled their content WordPress started to bottleneck them. They pivoted to working with the WordPress API, which resulted in slow load times as WordPress would call all assets and return unnecessary data in the API call. 

Recently the tech team was searching for a solution to manage dynamic content for their blogs, Fantasy Insider and Stats Insider. They wanted to remain decoupled from their application's codebase when managing content, so they started researching headless CMS systems. They chose Cosmic due to the simplicity of API integration and the content editing tools that would empower their marketers and writers. 

In addition, Cosmic allowed the Hypometer team to write scripts to migrate existing WordPress post content over to Cosmic for editing and publishing. 


Fantasy Insider

Built On: Python | Angular | Cosmic

Fantasy Insider is the market leader for daily fantasy sports information in Australia, with over half of the active market visiting the site for content or predictive tools each week.



Stats Insider

Built On: Python | Angular | Cosmic

Launched in early 2018, Stats Insider is Australia's first advanced sports analytics and predictive data platform for sports fans, punters and fantasy sports players.

Stats Insider will be providing information and predictions for US sports from August. Stay up to date with them on Twitter.  


"The headless CMS we chose had to tick a lot of boxes. At the end of the day, though, it needed to be easy for our external writers to use. We recorded a quick screencast video internally showing how to set up a piece of content, sent that out to our team, and I haven’t had a question from any of our writers since. We’ve just started to use Cosmic for other things like an activity status bar on Stats Insider which frees up more time for our developers and makes our workflow more flexible.”

— Katie Prowd, Co-Founder of Fantasy Insider

","metafields":[{"value":"Hypometer Technologies","key":"company","title":"Company","type":"text","children":null},{"value":"Fantasy Sports","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Hypometer Technologies is revolutionizing the Australian sporting experience by making predictive analytics accessible to the masses. Their next generation sports media platforms are the form guide for every big game, and the go-to sites for trusted predictive analytics.\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"1818c5e0-8b63-11e8-8b12-1d164d145eab-15122993_1073313959433910_7212266943208762093_o.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/1818c5e0-8b63-11e8-8b12-1d164d145eab-15122993_1073313959433910_7212266943208762093_o.png","imgix_url":"https://imgix.cosmicjs.com/1818c5e0-8b63-11e8-8b12-1d164d145eab-15122993_1073313959433910_7212266943208762093_o.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-12T13:09:29.236Z","created_by":"5716b504e9c686d006000073","created":"2018-07-12T13:09:29.236Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-07-20T13:31:54.633Z","metadata":{"company":"Hypometer Technologies","industry_type":"Fantasy Sports","teaser":"Hypometer Technologies is revolutionizing the Australian sporting experience by making predictive analytics accessible to the masses. Their next generation sports media platforms are the form guide for every big game, and the go-to sites for trusted predictive analytics.\n","logo":{"url":"https://cdn.cosmicjs.com/1818c5e0-8b63-11e8-8b12-1d164d145eab-15122993_1073313959433910_7212266943208762093_o.png","imgix_url":"https://imgix.cosmicjs.com/1818c5e0-8b63-11e8-8b12-1d164d145eab-15122993_1073313959433910_7212266943208762093_o.png"}}},{"_id":"5bd206599dca8d10e941b69b","slug":"derive-systems-runs-on-cosmic-js","title":"Derive Systems runs on Cosmic","content":"

Derive Systems  is a leading automotive technology company with over 2 million software installations powering upgraded experiences for drivers on the road today. Derive  connects vehicles and their engines to the digital world, enabling individuals and fleets to take control and optimize for performance, fuel efficiency, safety, and more. 



The team at Derive Systems was in search of a headless CMS that would give their developers flexibility out-of-the-box while enabling their content managers to manage content in a familiar and modern CMS Dashboard. They chose Cosmic due to its easy content modeling tools for their Blog, Press, About and Team Sections. Derive now runs a Next.js, React and Express framework that utilizes the Cosmic GraphQL API to deliver its content.




“Leveraging the Cosmic GraphQL API allows for easy updates to our news and blog, while keeping payloads small and fast. Integration with Cosmic could not be easier thanks to their great support. We look forward to developing more features on the platform.”


— Dustin Brink, Front End Developer at Derive Systems 

","metafields":[{"value":"Derive Systems","key":"company","title":"Company","type":"text","children":null},{"value":"Automotive","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Derive Systems  is a leading automotive technology company with over 2 million software installations powering upgraded experiences for drivers on the road today. Derive  connects vehicles and their engines to the digital world, enabling individuals and fleets to take control and optimize for performance, fuel efficiency, safety, and more. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"60aac7a0-ded7-11e8-86d0-2998be663226-derive.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/60aac7a0-ded7-11e8-86d0-2998be663226-derive.jpg","imgix_url":"https://imgix.cosmicjs.com/60aac7a0-ded7-11e8-86d0-2998be663226-derive.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2018-10-25T18:07:21.426Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-11-15T14:51:19.007Z","metadata":{"company":"Derive Systems","industry_type":"Automotive","teaser":"Derive Systems  is a leading automotive technology company with over 2 million software installations powering upgraded experiences for drivers on the road today. Derive  connects vehicles and their engines to the digital world, enabling individuals and fleets to take control and optimize for performance, fuel efficiency, safety, and more. \n","logo":{"url":"https://cdn.cosmicjs.com/60aac7a0-ded7-11e8-86d0-2998be663226-derive.jpg","imgix_url":"https://imgix.cosmicjs.com/60aac7a0-ded7-11e8-86d0-2998be663226-derive.jpg"}}},{"_id":"5a73423ee520776813591ee2","slug":"rocket-radio-builds-a-podcast-streaming-website","title":"Rocket Radio Builds a Podcast-Streaming Website","content":"

Rocket Radio is a San Francisco Bay Area Music Network that creates podcasts featuring music and interviews with established and rising stars in the music industry. With shows covering all music genres, they needed a new website that allowed for numerous content editors and developers representing a blended team. See how Rocket Radio  built their new podcast website using Node.js, React.js, Redux and Cosmic.



The Rocket Radio tech team built out a single page application with Node, React and Redux using Example Apps from the Cosmic Community. The team was able to leverage the Cosmic API to build out core components from Authentication to a news gallery to podcast listening features.



"From Docs to Example Apps and Service, it was all there. Cosmic provided a huge boost in cutting development time all while helping our team meet its goals. I would certainly recommend Cosmic to anyone seeking to build out a website using some of the latest technology while looking to stay ahead of the game."

— Gus A., Senior Software Engineer 


\">
","metafields":[{"value":"Rocket Radio","key":"company","title":"Company","type":"text","children":null},{"value":"Music and Entertainment","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Rocket Radio is a San Francisco Bay Area Music Network that creates podcasts featuring music and interviews with established and rising stars in the music industry. With shows covering all music genres, they needed a new website that allowed for numerous content editors and developers representing a blended team. See how Rocket Radio built their new podcast website using Node.js React.js, Redux and Cosmic.\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"acbb5cf0-076d-11e8-a43c-e17c6c324439-IMG_0380.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/acbb5cf0-076d-11e8-a43c-e17c6c324439-IMG_0380.jpg","imgix_url":"https://imgix.cosmicjs.com/acbb5cf0-076d-11e8-a43c-e17c6c324439-IMG_0380.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-02-01T16:37:18.070Z","created_by":"5716b504e9c686d006000073","created":"2018-02-01T16:37:18.070Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-08-30T20:32:56.765Z","metadata":{"company":"Rocket Radio","industry_type":"Music and Entertainment","teaser":"Rocket Radio is a San Francisco Bay Area Music Network that creates podcasts featuring music and interviews with established and rising stars in the music industry. With shows covering all music genres, they needed a new website that allowed for numerous content editors and developers representing a blended team. See how Rocket Radio built their new podcast website using Node.js React.js, Redux and Cosmic.\n","logo":{"url":"https://cdn.cosmicjs.com/acbb5cf0-076d-11e8-a43c-e17c6c324439-IMG_0380.jpg","imgix_url":"https://imgix.cosmicjs.com/acbb5cf0-076d-11e8-a43c-e17c6c324439-IMG_0380.jpg"}}}],"app_slugs":[{"slug":"gatsby-blog"},{"slug":"jamstack-fitness-website"},{"slug":"cross-platform-blog"}],"extension_slugs":[{"slug":"wordpress-importer"},{"slug":"algolia-search"},{"slug":"imgix-editor"}],"testimonial":"

"Cosmic JS allowed us to easily integrate a secure and fast back-end API into our React app. Cosmic fit our needs with its simple web-based dashboard so that members of our marketing team can create, edit, and delete new content on the fly. Our team has been enjoying the ease of use with the new system."

","testimonial_credit":"Owen Liversidge, Lead Developer at Tripwire Interactive"}},{"_id":"5ff34da19c8c990007c6f1c1","order":22,"slug":"introducing-merge-requests","title":"Introducing Merge Requests","content":"

Traditionally, CMS systems have long relied on a draft / published model for content updates within a single database. And for many use cases this is fine. But what we’ve noticed with our users, is that they want to create multiple environments to stage updates for review, preview the changes, then push the changes to production.

The problem with this is that there wasn't an easy way to merge content changes between environments in review stages (such as Development, Staging, Production). This is especially true when you want to make bulk edits to lots of content.

It's for this reason, we're excited to announce a huge leap forward for content management...


Introducing Merge Requests

What are Merge Requests?
Merge Requests is a new feature that enables Git-like workflows between your Cosmic Bucket environments. With Merge Requests, you are now able to merge content between Bucket environments with bulk edits, preview, and approval workflows. Here's how it works...

Edit Content - A content editor creates or edits content in a source Bucket.


Create Merge Request - The content editor then creates a merge request from the source Bucket into a target Bucket. Diffs are displayed in a list for review.


Request Approvals - Team admins may be invited to review and approve the updates.


Approve and Merge Changes  - The team admin can then use preview links to preview changes on the user-facing application or website. Once all approvals are submitted, the admin merges the request into the target Bucket.


Revert Changes - If there is a need to revert, a backup will automatically be made prior to the merge, and you will be able to restore to this backup instantly, and at anytime in the future. (Automatic backups will need to be enabled\r\non the Production Bucket)



When is it available?
Today.

How much does it cost?
It's free on every Cosmic account.


Next Steps

There's a few ways to get started and learn more:

  1. Install the Starter - Install the Next Merge starter which includes merge request preview capabilities.
  2. Preview API -\r\nView the docs to get more information on how to implement the merge request preview content for your applications. Currently available via the REST API and NPM module.
  3. Dashboard -\r\nLog into your Cosmic dashboard and click the merge request icon on any Bucket.


Conclusion

Merge Requests enables your team to move beyond the rigid draft / publish content process into a more fluid, collaborative, and comprehensive workflow.

We hope you enjoy using Merge Requests to optimize your content management workflows. This feature is still a work in progress (currently in beta), and we would greatly appreciate any feedback or bug reports. If you have any questions, please feel free to reach out on Slack, let us know what you think on Twitter, and join the conversation around this feature on Product Hunt.

Cheers,
Cosmic Team

","metafields":[{"children":null,"type":"object","title":"Author","key":"author","id":"fQFhwO6GLe","value":"5ffa1d1e0046b0000799cb7b","required":true,"object_type":"authors","object":{"_id":"5ffa1d1e0046b0000799cb7b","slug":"cosmic","title":"Cosmic","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"ZogvxZg6OL","value":""},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D0qLJ4RPBe","value":"10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2021-01-09T21:16:14.533Z","created_by":"5357ef811693be2118000001","modified_at":"2021-01-09T21:18:26.147Z","created":"2021-01-09T21:16:14.533Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/e55ef990-52bf-11eb-986d-4d7ff5faa3ab-logo.svg","published_at":"2021-01-09T21:18:26.147Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null}},{"children":null,"type":"html-textarea","title":"Teaser","key":"teaser","id":"OATLowHTHQ","value":"

Introducing Merge Requests, a huge leap forward for content management that brings the power of Git to your content workflows.

"},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"U6LqoaKFcx","value":"5a67d0e0-54e1-11eb-8ef3-2b509a9da61d-merge-request.jpg","url":"https://cdn.cosmicjs.com/5a67d0e0-54e1-11eb-8ef3-2b509a9da61d-merge-request.jpg","imgix_url":"https://imgix.cosmicjs.com/5a67d0e0-54e1-11eb-8ef3-2b509a9da61d-merge-request.jpg"},{"children":null,"type":"textarea","title":"SEO Meta Description","key":"seo_meta_description","id":"NSgSdkrZOd","value":"Merge Requests enables your team to move beyond the rigid draft/publish content process into a more fluid, collaborative, and comprehensive workflow."},{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"kK7uJrvUSs","value":"2021-01-12"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2021-01-04T17:17:20.944Z","created_by":"5357ef811693be2118000001","modified_at":"2022-10-06T13:44:43.282Z","created":"2021-01-04T17:17:20.944Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/5a67d0e0-54e1-11eb-8ef3-2b509a9da61d-merge-request.jpg","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2022-10-06T13:44:43.282Z","metadata":{"author":{"_id":"5ffa1d1e0046b0000799cb7b","slug":"cosmic","title":"Cosmic","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"ZogvxZg6OL","value":""},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D0qLJ4RPBe","value":"10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2021-01-09T21:16:14.533Z","created_by":"5357ef811693be2118000001","modified_at":"2021-01-09T21:18:26.147Z","created":"2021-01-09T21:16:14.533Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/e55ef990-52bf-11eb-986d-4d7ff5faa3ab-logo.svg","published_at":"2021-01-09T21:18:26.147Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"metadata":{"username":"","profile_picture":{"url":"https://cdn.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg","imgix_url":"https://imgix.cosmicjs.com/10b814f0-52c0-11eb-986d-4d7ff5faa3ab-logo.jpg"}}},"teaser":"

Introducing Merge Requests, a huge leap forward for content management that brings the power of Git to your content workflows.

","featured_image":{"url":"https://cdn.cosmicjs.com/5a67d0e0-54e1-11eb-8ef3-2b509a9da61d-merge-request.jpg","imgix_url":"https://imgix.cosmicjs.com/5a67d0e0-54e1-11eb-8ef3-2b509a9da61d-merge-request.jpg"},"seo_meta_description":"Merge Requests enables your team to move beyond the rigid draft/publish content process into a more fluid, collaborative, and comprehensive workflow.","published_date":"2021-01-12"}},{"_id":"595f9e469fe97aca73000d7f","order":22,"slug":"ionic-cms","title":"Ionic CMS","content":"

Cosmic JS makes it easy to manage content for your Ionic applications. Install the Official Cosmic JS JavaScript Client to add dynamic content to your app. Get a feel for Ionic by taking a spin through our Ionic apps and check out the tutorials below.

Ionic CMS Articles

How to Build a Mobile Product Catalog App using Angular JS, Ionic and Cosmic JS

Ionic CMS Resources

Cosmic JS Docs
Official JavaScript Client
Cosmic JS GitHub

Examples

npm i cosmicjs

Then in your JavaScript file, get your content:

\">
","metafields":[{"children":null,"type":"file","title":"Image","key":"image","id":"0ECZ8BgrgT","value":"e9a56ce0-6322-11e7-8774-41dfff8ae5dc-bYMCvtHD.jpg","url":"https://cdn.cosmicjs.com/e9a56ce0-6322-11e7-8774-41dfff8ae5dc-bYMCvtHD.jpg","imgix_url":"https://imgix.cosmicjs.com/e9a56ce0-6322-11e7-8774-41dfff8ae5dc-bYMCvtHD.jpg"},{"children":null,"type":"file","title":"Thumbnail","key":"thumbnail","id":"HSMNZPVrPg","value":"e6b99790-6322-11e7-8774-41dfff8ae5dc-bYMCvtHD.jpg","url":"https://cdn.cosmicjs.com/e6b99790-6322-11e7-8774-41dfff8ae5dc-bYMCvtHD.jpg","imgix_url":"https://imgix.cosmicjs.com/e6b99790-6322-11e7-8774-41dfff8ae5dc-bYMCvtHD.jpg"},{"children":null,"type":"html-textarea","title":"Blurb","key":"blurb","id":"z8ZMNiuRVz","value":"

Cosmic is the best CMS for Ionic websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

"},{"children":null,"type":"text","title":"Headline","key":"headline","id":"yqS45awsIh","value":"Ionic"},{"children":null,"type":"text","title":"SEO Description","key":"seo_description","id":"0nc7tHopal","value":"Cosmic is the best CMS for Ionic websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators."},{"children":null,"type":"file","title":"Twitter Card Image","key":"twitter_card_image","id":"jTkrzwOJFL","value":"e391cab0-6322-11e7-8774-41dfff8ae5dc-bYMCvtHD.jpg","url":"https://cdn.cosmicjs.com/e391cab0-6322-11e7-8774-41dfff8ae5dc-bYMCvtHD.jpg","imgix_url":"https://imgix.cosmicjs.com/e391cab0-6322-11e7-8774-41dfff8ae5dc-bYMCvtHD.jpg"},{"children":null,"type":"html-textarea","title":"Code Example","key":"code_example","id":"ia4krTu3iF","value":""},{"children":null,"type":"text","title":"SEO Title","key":"seo_title","id":"5hbEGEzr9A","value":"Best Headless CMS for Ionic"},{"children":[],"type":"repeater","title":"Videos","key":"videos","id":"frgtgqfrpylludl8pnsi","value":"","repeater_fields":[{"title":"Title","key":"title","value":"","type":"text","required":false},{"title":"Link","key":"link","value":"","type":"text","required":false}]}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"kb-articles","created_at":"2017-04-22T23:07:51.159Z","created_by":"5357ef811693be2118000001","created":"2017-07-07T14:44:22.632Z","status":"published","modified_at":"2020-06-27T19:18:52.084Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-06-27T19:18:52.084Z","unpublish_at":null,"metadata":{"image":{"url":"https://cdn.cosmicjs.com/e9a56ce0-6322-11e7-8774-41dfff8ae5dc-bYMCvtHD.jpg","imgix_url":"https://imgix.cosmicjs.com/e9a56ce0-6322-11e7-8774-41dfff8ae5dc-bYMCvtHD.jpg"},"thumbnail":{"url":"https://cdn.cosmicjs.com/e6b99790-6322-11e7-8774-41dfff8ae5dc-bYMCvtHD.jpg","imgix_url":"https://imgix.cosmicjs.com/e6b99790-6322-11e7-8774-41dfff8ae5dc-bYMCvtHD.jpg"},"blurb":"

Cosmic is the best CMS for Ionic websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

","headline":"Ionic","seo_description":"Cosmic is the best CMS for Ionic websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.","twitter_card_image":{"url":"https://cdn.cosmicjs.com/e391cab0-6322-11e7-8774-41dfff8ae5dc-bYMCvtHD.jpg","imgix_url":"https://imgix.cosmicjs.com/e391cab0-6322-11e7-8774-41dfff8ae5dc-bYMCvtHD.jpg"},"code_example":"","seo_title":"Best Headless CMS for Ionic","videos":[]}},{"_id":"5edf9614ce98fe0007c45abb","order":22,"slug":"introducing-advanced-queries","title":"Introducing Advanced Queries","content":"

We are excited to announce the release of Advanced Queries (Beta) now available for all accounts. This is huge for teams that would like to use Cosmic beyond basic content management, enabling laser-focused logic to deliver content.

How it works
Advanced queries give you powerful NoSQL database-like functionality for data fetching. Using the Cosmic REST API endpoint and available clients (including the Cosmic GraphQL API) you can customize your NoSQL-style query (in JSON format) to customize selectors and query logic. See below examples and the docs for more info.





Examples

To keep things concise, use the following bucket variable for the following examples.

const bucket = Cosmic.bucket({\r\n  slug: 'bucket-slug',\r\n  read_key: "your-read-key-found-in-bucket-settings"\r\n});


Match Objects with exact title

bucket.getObjects({\r\n  type: 'posts',\r\n  props: 'slug,title,content',\r\n  query: {\r\n    "title": "Post 1"\r\n  }\r\n});


Match Objects greater than or equal to metadata value

bucket.getObjects({\r\n  type: 'posts',\r\n  props: 'slug,title,content',\r\n  query: {\r\n    "metadata.price": {\r\n      "$gte": 9.99\r\n    }\r\n  }\r\n});


Match Objects with nested JSON metadata value (JSON Metafield)

bucket.getObjects({\r\n  type: 'posts',\r\n  props: 'slug,title,content',\r\n  query: {\r\n    "metadata.json_data": {\r\n      "is_awesome": true,\r\n      "other_data": {\r\n        "nested": "yep"\r\n      }\r\n    }\r\n  }\r\n});


Match Objects with any metadata values

bucket.getObjects({\r\n  type: 'posts',\r\n  props: 'slug,title,content',\r\n  query: {\r\n    "$or": [\r\n      {\r\n         "metadata.grade": "A"\r\n      },\r\n      {\r\n        "metadata.grade": "B"\r\n      }\r\n    ]\r\n  }\r\n});


Match Objects with string in content using a regular expression. Case insensitive with $options.

bucket.getObjects({\r\n  type: 'posts',\r\n  props: 'slug,title,content',\r\n  query: {\r\n    "content": {\r\n      "$regex": "jamstack",\r\n      "$options": "i"\r\n    }\r\n  }\r\n});


Match Objects with any Multiple Object Metafield values

bucket.getObjects({\r\n  type: 'posts',\r\n  props: 'slug,title,content',\r\n  query: {\r\n    "metadata.categories": {\r\n      "$in": ["category_id-1","category_id-2"]\r\n    }\r\n  }\r\n});


Match Objects that don't have any Multiple Object Metafield values

bucket.getObjects({\r\n  type: 'posts',\r\n  props: 'slug,title,content',\r\n  query: {\r\n    "metadata.categories": {\r\n      "$nin": ["category_id-1","category_id-2"]\r\n    }\r\n  }\r\n});

See the docs for the full list of query selectors and logic operators.


Advanced Queries in the GraphQL API
You may need to set the variable outside of the main query area. Add something like this to the Query Variables area:

{\r\n  "query": {\r\n    "title": {\r\n      "$regex": "another",\r\n      "$options": "i"\r\n    }\r\n  }\r\n}


View full screen  \r\n


We hope you enjoy using Advanced Queries to give you more power and flexibility to get your Cosmic content. This is a Beta release and we would like your feedback as we improve this feature, so please let us know what you think! Reach out to us on Twitter and join the conversation in Slack.

","metafields":[{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"31rW3UWlhX","value":"2020-06-10"},{"children":null,"type":"object","title":"Author","key":"author","id":"80zPHTilRS","value":"5768b253163172890e00002c","object_type":"authors","object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"vtvRTkYjSW","value":"e7553760-aa62-11ea-b7ee-f54844952438-advanced-queries-2.jpg","url":"https://cdn.cosmicjs.com/e7553760-aa62-11ea-b7ee-f54844952438-advanced-queries-2.jpg","imgix_url":"https://imgix.cosmicjs.com/e7553760-aa62-11ea-b7ee-f54844952438-advanced-queries-2.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"changelogs","created_at":"2020-06-09T14:00:52.980Z","created_by":"5357ef811693be2118000001","modified_at":"2022-08-01T15:02:08.673Z","created":"2020-06-09T14:00:52.980Z","status":"published","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2022-08-01T15:02:08.673Z","metadata":{"published_date":"2020-06-10","author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"featured_image":{"url":"https://cdn.cosmicjs.com/e7553760-aa62-11ea-b7ee-f54844952438-advanced-queries-2.jpg","imgix_url":"https://imgix.cosmicjs.com/e7553760-aa62-11ea-b7ee-f54844952438-advanced-queries-2.jpg"}}},{"_id":"5ade0e3508e4a82d641d2b14","order":23,"slug":"vendor-surf-builds-a-search-engine-for-mortgage-vendors","title":"Vendor Surf Builds a Search Engine for Mortgage Vendors","content":"

Vendor Surf exists out of the problem of not having a technology-driven online vendor marketplace for mortgage industry vendors to get discovered.  All that had existed previously were static and unintelligent directories, the equivalent of Yellow Pages.  Vendor Surf is an incredibly robust search engine using more than 3,000 unique search filters for sourcing.

Vendor Surf's mission is to revolutionize the sourcing of vendor partners, and they are currently doing so through their content-rich digital marketplace where vendors can list themselves and clients can search for vendors based on common industry parameters. 

Vendor Surf needed a content management platform that enables its marketers and editors to manage dynamic content while giving their developers the keys to build their Angular application using the best tools for the job, unrestricted by programming language or framework. Vendor Surf and its agency chose Cosmic.





“It was absolutely imperative to embed a flexible and dependable content management system into our solution. We are adding and updating content all day, every day, and have to be able to respond to our client and marketplace needs in an instant.  We are power-users of Cosmic, highly dependent upon it for a substantial portion of our content.”

— Scott Roller, Vendor Surf Co-Founder  



\">
","metafields":[{"value":"Vendor Surf","key":"company","title":"Company","type":"text","children":null},{"value":"Vendor Search Engine","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Vendor Surf exists out of the problem of not having a technology-driven online vendor marketplace for mortgage industry vendors to get discovered. All that had existed previously were static and unintelligent directories, the equivalent of Yellow Pages. Vendor Surf is an incredibly robust search engine using more than 3,000 unique search filters for sourcing.\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"799ba950-4715-11e8-ac62-c16ace591024-STnky8wl_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/799ba950-4715-11e8-ac62-c16ace591024-STnky8wl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/799ba950-4715-11e8-ac62-c16ace591024-STnky8wl_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-04-23T16:47:49.405Z","created_by":"5716b504e9c686d006000073","created":"2018-04-23T16:47:49.405Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-07-11T13:00:52.571Z","metadata":{"company":"Vendor Surf","industry_type":"Vendor Search Engine","teaser":"Vendor Surf exists out of the problem of not having a technology-driven online vendor marketplace for mortgage industry vendors to get discovered. All that had existed previously were static and unintelligent directories, the equivalent of Yellow Pages. Vendor Surf is an incredibly robust search engine using more than 3,000 unique search filters for sourcing.\n","logo":{"url":"https://cdn.cosmicjs.com/799ba950-4715-11e8-ac62-c16ace591024-STnky8wl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/799ba950-4715-11e8-ac62-c16ace591024-STnky8wl_400x400.jpg"}}},{"_id":"5ece7202f614730008d3bbba","order":23,"slug":"nextjs-static-blog-increased-media-upload-size-limit-and-more","title":"Next.js Static Blog, Increased Media Upload Size Limit, and more","content":"

We have a few exciting updates to help you power content for your modern websites and apps using Cosmic.


1. Next.js Static Blog
Check out the newest app in our Apps Marketplace to help you learn how to use Cosmic with the Next.js framework. The new Next.js Static Blog includes draft content preview functionality, automatic image optimization, and has a killer lighthouse score 😍 


2. Increased Media Upload in the API
We've now increased the size limit on file uploads to the REST API limit to 900MB. Check out the details in the documentation. So enjoy uploading all those home movies via our API 😀 


3. Workspaces navigation update
You will now notice that you have easier access to your workspaces. Located in the top right nav dropdown after logging in, you can see your listed workspaces and get to those projects faster (no Slack issues here). This makes switching between workspaces much easier. Contact sales to get your white label company-branded workspace set up.

4. Localization Improvements
We've improved the process of creating localized content. On the Edit Object page for localized content, you will now see a button that says "Add New Version" if a new localized version is available. You will also see a list of created localized versions for easy access.


We hope you enjoy these updates. If you have any questions, join our Slack community and reach out to us on Twitter.

","metafields":[{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"3afsuEjBD5","value":"2020-05-28"},{"children":null,"type":"object","title":"Author","key":"author","id":"JNDLcoclpM","value":"5768b253163172890e00002c","object_type":"authors","object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"TZNq89MKbR","value":"dfea02a0-a029-11ea-a164-7313a52d2f9d-nextjs-cms.png","url":"https://cdn.cosmicjs.com/dfea02a0-a029-11ea-a164-7313a52d2f9d-nextjs-cms.png","imgix_url":"https://imgix.cosmicjs.com/dfea02a0-a029-11ea-a164-7313a52d2f9d-nextjs-cms.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"changelogs","created_at":"2020-05-27T13:58:26.175Z","created_by":"5357ef811693be2118000001","modified_at":"2020-08-10T13:59:43.225Z","created":"2020-05-27T13:58:26.175Z","status":"published","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2020-05-28T15:34:41.136Z","metadata":{"published_date":"2020-05-28","author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"featured_image":{"url":"https://cdn.cosmicjs.com/dfea02a0-a029-11ea-a164-7313a52d2f9d-nextjs-cms.png","imgix_url":"https://imgix.cosmicjs.com/dfea02a0-a029-11ea-a164-7313a52d2f9d-nextjs-cms.png"}}},{"_id":"5d4c2560f052fe58796fd232","slug":"content-management-system-for-ecommerce-websites","title":"Content Management System for Ecommerce Websites","content":"

The Cosmic JS Content Management System provides flexible content modeling that allows e-commerce teams to manage product inventories, seasonal sales campaigns and product-centric landing pages all from the Cosmic JS Dashboard. Developers, marketers, data analysts and product managers can all collaborate in Cosmic JS using unique user roles and permissions. Teams can revise published products, schedule new product launches and integrate with any cart or payment gateway.

What is Headless CMS Software?

Headless CMS Software works by providing non-technical editors with a Dashboard UI to model, create and publish content while providing developers with API tools and resources to integrate content with any website or app. By decoupling content from code, teams create a central content repository that can power all of their content-powered applications. 

","metafields":[{"value":"Content Management System for Ecommerce Websites","key":"solution_name","title":"Solution Name","type":"text","children":null},{"value":"d03eb2f0-9f54-11e9-ac09-4be8a5631b5e-6845e0b0-4235-11e8-86fe-0b7f31f36651-Screen-Shot-2018-04-17-at-6.48.12-AM.png","key":"image","title":"Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/d03eb2f0-9f54-11e9-ac09-4be8a5631b5e-6845e0b0-4235-11e8-86fe-0b7f31f36651-Screen-Shot-2018-04-17-at-6.48.12-AM.png","imgix_url":"https://imgix.cosmicjs.com/d03eb2f0-9f54-11e9-ac09-4be8a5631b5e-6845e0b0-4235-11e8-86fe-0b7f31f36651-Screen-Shot-2018-04-17-at-6.48.12-AM.png"},{"object_type":"case-studies","value":"59f49a7cee2adb545c0005bc,59663607a6a3f55962000e40,5aa7cd8c3078516dd48d6ad2","key":"case_studies","title":"Case Studies","type":"objects","children":null,"objects":[{"_id":"59f49a7cee2adb545c0005bc","slug":"life-is-good-shares-gratitude","title":"Life is Good Shares Gratitude","content":"

The Life is Good community shares one simple, unifying mission: to spread the power of optimism. In that spirit, the Life is Good team built a Gratitude Wall for some user-generated-thanksgiving. This widget will allow users to add "sticky notes" with their name and what they are grateful for to the gratitude board. 



The Gratitude Wall is adapted from the Cosmic Sticky Notes App, built on React, Redux and Node.js. The Wall is currently running on Heroku and is i-framed into WordPress on its landing page. The Life is Good team also built a simple moderation application so that their team can easily approve or delete User Generated Content as it flows in. They also built client-side moderation during content entry, which checks against a banned list of words and blocks submission.



"Cosmic provided us with a robust scaffolding to accept, store, and moderate User Generated Content and display it in a custom web app in real time. With Cosmic, we were able to develop an MVP in a matter of hours and focus our resources on UX and design versus content management. The Cosmic Support Team was extremely helpful throughout the process. We’re excited to leverage these tools again for future projects.”

— Chris Schwab, Front End Engineer  

","metafields":[{"value":"Life is Good","key":"company","title":"Company","type":"text","children":null},{"value":"Ecommerce | Apparel","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Spread the power of optimism. In that spirit, the Life is Good team built a Gratitude Wall for some user-generated-thanksgiving. This widget will allow users to add \"sticky notes\" with their name and what they are grateful for to the gratitude board. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg","imgix_url":"https://imgix.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2017-10-28T14:55:56.103Z","created_by":"5716b504e9c686d006000073","created":"2017-10-28T14:55:56.103Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2019-07-25T21:53:35.289Z"},{"_id":"59663607a6a3f55962000e40","slug":"big-fish-launches-marketing-and-tutorial-content-for-games","title":"Big Fish Launches Marketing and Tutorial Content for Games","content":"

When Big Fish launches a new game for iOS, Android, or Web, they use a marketing landing page to promote the launch. Big Fish wanted their game studios to have the ability to curate and update content on each of their landing pages. Other CMS systems weren’t as flexible enough for their needs. Cosmic provides Big Fish with more creative freedom to build landing pages while allowing game studios to make updates on their own.




"We use Cosmic buckets for each of our mobile game landing pages. While our API and storage usage is low, the number of buckets we need is high, which makes the new Clusters Feature a perfect solution for our company use cases. It allows us to\r\nhave a single consolidated invoice, with an overall API and data-limit, but up to 35 buckets for our use."

— Jessica Chappell, Web Developer 

Read more about Big Fish and their games.

","metafields":[{"value":"Big Fish","key":"company","title":"Company","type":"text","children":null},{"value":"Gaming","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"When Big Fish launches a new game for iOS, Android, or Web, they use a marketing landing page to promote the launch. Other CMS systems weren’t as flexible enough for their needs. Cosmic provides Big Fish with more creative freedom to build landing pages while allowing game studios to make updates on their own.\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png","imgix_url":"https://imgix.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created":"2017-07-12T14:45:27.402Z","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","status":"published","publish_at":null,"published_at":"2018-11-08T23:15:38.911Z"},{"_id":"5aa7cd8c3078516dd48d6ad2","slug":"bookabus-builds-a-localized-transportation-website","title":"Bookabus Builds a Localized Transportation Website","content":"

Bookabus is an innovative start-up in the travel and mobility industry, serving as one of the largest coach hire and bus rental booking services in Europe. Whether it’s a day trip with 20 people or a large-scale event with 500 people, Bookabus, together with its partners, ensures a carefree and high-quality travel experience for groups and events. 



Bookabus needed a new website to communicate their transport routes, terms and marketing materials.  A big requirement was the ability to localize their content into different languages for the different areas they're servicing, including the UK, Netherlands, Germany, Spain, and Belgium.  They chose to build their new transportation website with Cosmic because of the ease of use and powerful localization capabilities.



"Cosmic allowed us to easily integrate dynamic content into our website. The product is a great value for your money. This is especially true given that their customer service is top-notch."

— Harrie Pieters, Web Developer 

","metafields":[{"value":"Bookabus","key":"company","title":"Company","type":"text","children":null},{"value":"Transportation","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Bookabus is an innovative start-up in the travel and mobility industry, serving as one of the largest coach hire and bus rental booking services in Europe. Whether it’s a day trip with 20 people or a large-scale event with 500 people, Bookabus, together with its partners, ensures a carefree and high-quality travel experience for groups and events. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"61777d70-26bf-11e8-808d-f7104bba2cfa-7bb0413cfa3f2b5a11182ebb782aa208.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/61777d70-26bf-11e8-808d-f7104bba2cfa-7bb0413cfa3f2b5a11182ebb782aa208.png","imgix_url":"https://imgix.cosmicjs.com/61777d70-26bf-11e8-808d-f7104bba2cfa-7bb0413cfa3f2b5a11182ebb782aa208.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-03-13T13:09:32.089Z","created_by":"5716b504e9c686d006000073","created":"2018-03-13T13:09:32.089Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-04-19T21:23:26.384Z"}]},{"repeater_fields":"\"\"\"\"[{\"title\":\"Slug\",\"key\":\"slug\",\"value\":\"\",\"type\":\"text\",\"required\":false}]\"\"\"\"","value":"ecommerce-app","key":"app_slugs","title":"App Slugs","type":"repeater","children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"ecommerce-app","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"gatsby-ecommerce-website","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"ecommerce-personalization","type":"text","required":false}]}]},{"repeater_fields":"\"\"\"\"[{\"title\":\"Slug\",\"key\":\"slug\",\"value\":\"\",\"type\":\"text\",\"required\":false}]\"\"\"\"","value":"wordpress-importer","key":"extension_slugs","title":"Extension Slugs","type":"repeater","children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"wordpress-importer","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"product-manager","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"amazon-product-search","type":"text","required":false}]}]},{"key":"testimonial","title":"Testimonial","type":"html-textarea","children":null,"value":"

"Cosmic JS allowed us to easily integrate dynamic content into our website. The product is a great value for your money. This is especially true given that their customer service is top-notch."

"},{"value":"Harrie Pieters, Web Developer at Bookabus","key":"testimonial_credit","title":"Testimonial Credit","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"solutions","created":"2019-08-08T13:36:32.191Z","created_at":"2019-07-08T15:07:19.015Z","modified_at":"2019-08-08T13:37:14.175Z","status":"published","locale":null,"published_at":"2019-08-08T13:37:14.175Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"order":23,"metadata":{"solution_name":"Content Management System for Ecommerce Websites","image":{"url":"https://cdn.cosmicjs.com/d03eb2f0-9f54-11e9-ac09-4be8a5631b5e-6845e0b0-4235-11e8-86fe-0b7f31f36651-Screen-Shot-2018-04-17-at-6.48.12-AM.png","imgix_url":"https://imgix.cosmicjs.com/d03eb2f0-9f54-11e9-ac09-4be8a5631b5e-6845e0b0-4235-11e8-86fe-0b7f31f36651-Screen-Shot-2018-04-17-at-6.48.12-AM.png"},"case_studies":[{"_id":"59f49a7cee2adb545c0005bc","slug":"life-is-good-shares-gratitude","title":"Life is Good Shares Gratitude","content":"

The Life is Good community shares one simple, unifying mission: to spread the power of optimism. In that spirit, the Life is Good team built a Gratitude Wall for some user-generated-thanksgiving. This widget will allow users to add "sticky notes" with their name and what they are grateful for to the gratitude board. 



The Gratitude Wall is adapted from the Cosmic Sticky Notes App, built on React, Redux and Node.js. The Wall is currently running on Heroku and is i-framed into WordPress on its landing page. The Life is Good team also built a simple moderation application so that their team can easily approve or delete User Generated Content as it flows in. They also built client-side moderation during content entry, which checks against a banned list of words and blocks submission.



"Cosmic provided us with a robust scaffolding to accept, store, and moderate User Generated Content and display it in a custom web app in real time. With Cosmic, we were able to develop an MVP in a matter of hours and focus our resources on UX and design versus content management. The Cosmic Support Team was extremely helpful throughout the process. We’re excited to leverage these tools again for future projects.”

— Chris Schwab, Front End Engineer  

","metafields":[{"value":"Life is Good","key":"company","title":"Company","type":"text","children":null},{"value":"Ecommerce | Apparel","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Spread the power of optimism. In that spirit, the Life is Good team built a Gratitude Wall for some user-generated-thanksgiving. This widget will allow users to add \"sticky notes\" with their name and what they are grateful for to the gratitude board. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg","imgix_url":"https://imgix.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2017-10-28T14:55:56.103Z","created_by":"5716b504e9c686d006000073","created":"2017-10-28T14:55:56.103Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2019-07-25T21:53:35.289Z","metadata":{"company":"Life is Good","industry_type":"Ecommerce | Apparel","teaser":"Spread the power of optimism. In that spirit, the Life is Good team built a Gratitude Wall for some user-generated-thanksgiving. This widget will allow users to add \"sticky notes\" with their name and what they are grateful for to the gratitude board. \n","logo":{"url":"https://cdn.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg","imgix_url":"https://imgix.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg"}}},{"_id":"59663607a6a3f55962000e40","slug":"big-fish-launches-marketing-and-tutorial-content-for-games","title":"Big Fish Launches Marketing and Tutorial Content for Games","content":"

When Big Fish launches a new game for iOS, Android, or Web, they use a marketing landing page to promote the launch. Big Fish wanted their game studios to have the ability to curate and update content on each of their landing pages. Other CMS systems weren’t as flexible enough for their needs. Cosmic provides Big Fish with more creative freedom to build landing pages while allowing game studios to make updates on their own.




"We use Cosmic buckets for each of our mobile game landing pages. While our API and storage usage is low, the number of buckets we need is high, which makes the new Clusters Feature a perfect solution for our company use cases. It allows us to\r\nhave a single consolidated invoice, with an overall API and data-limit, but up to 35 buckets for our use."

— Jessica Chappell, Web Developer 

Read more about Big Fish and their games.

","metafields":[{"value":"Big Fish","key":"company","title":"Company","type":"text","children":null},{"value":"Gaming","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"When Big Fish launches a new game for iOS, Android, or Web, they use a marketing landing page to promote the launch. Other CMS systems weren’t as flexible enough for their needs. Cosmic provides Big Fish with more creative freedom to build landing pages while allowing game studios to make updates on their own.\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png","imgix_url":"https://imgix.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created":"2017-07-12T14:45:27.402Z","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","status":"published","publish_at":null,"published_at":"2018-11-08T23:15:38.911Z","metadata":{"company":"Big Fish","industry_type":"Gaming","teaser":"When Big Fish launches a new game for iOS, Android, or Web, they use a marketing landing page to promote the launch. Other CMS systems weren’t as flexible enough for their needs. Cosmic provides Big Fish with more creative freedom to build landing pages while allowing game studios to make updates on their own.\n","logo":{"url":"https://cdn.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png","imgix_url":"https://imgix.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png"}}},{"_id":"5aa7cd8c3078516dd48d6ad2","slug":"bookabus-builds-a-localized-transportation-website","title":"Bookabus Builds a Localized Transportation Website","content":"

Bookabus is an innovative start-up in the travel and mobility industry, serving as one of the largest coach hire and bus rental booking services in Europe. Whether it’s a day trip with 20 people or a large-scale event with 500 people, Bookabus, together with its partners, ensures a carefree and high-quality travel experience for groups and events. 



Bookabus needed a new website to communicate their transport routes, terms and marketing materials.  A big requirement was the ability to localize their content into different languages for the different areas they're servicing, including the UK, Netherlands, Germany, Spain, and Belgium.  They chose to build their new transportation website with Cosmic because of the ease of use and powerful localization capabilities.



"Cosmic allowed us to easily integrate dynamic content into our website. The product is a great value for your money. This is especially true given that their customer service is top-notch."

— Harrie Pieters, Web Developer 

","metafields":[{"value":"Bookabus","key":"company","title":"Company","type":"text","children":null},{"value":"Transportation","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Bookabus is an innovative start-up in the travel and mobility industry, serving as one of the largest coach hire and bus rental booking services in Europe. Whether it’s a day trip with 20 people or a large-scale event with 500 people, Bookabus, together with its partners, ensures a carefree and high-quality travel experience for groups and events. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"61777d70-26bf-11e8-808d-f7104bba2cfa-7bb0413cfa3f2b5a11182ebb782aa208.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/61777d70-26bf-11e8-808d-f7104bba2cfa-7bb0413cfa3f2b5a11182ebb782aa208.png","imgix_url":"https://imgix.cosmicjs.com/61777d70-26bf-11e8-808d-f7104bba2cfa-7bb0413cfa3f2b5a11182ebb782aa208.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-03-13T13:09:32.089Z","created_by":"5716b504e9c686d006000073","created":"2018-03-13T13:09:32.089Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-04-19T21:23:26.384Z","metadata":{"company":"Bookabus","industry_type":"Transportation","teaser":"Bookabus is an innovative start-up in the travel and mobility industry, serving as one of the largest coach hire and bus rental booking services in Europe. Whether it’s a day trip with 20 people or a large-scale event with 500 people, Bookabus, together with its partners, ensures a carefree and high-quality travel experience for groups and events. \n","logo":{"url":"https://cdn.cosmicjs.com/61777d70-26bf-11e8-808d-f7104bba2cfa-7bb0413cfa3f2b5a11182ebb782aa208.png","imgix_url":"https://imgix.cosmicjs.com/61777d70-26bf-11e8-808d-f7104bba2cfa-7bb0413cfa3f2b5a11182ebb782aa208.png"}}}],"app_slugs":[{"slug":"ecommerce-app"},{"slug":"gatsby-ecommerce-website"},{"slug":"ecommerce-personalization"}],"extension_slugs":[{"slug":"wordpress-importer"},{"slug":"product-manager"},{"slug":"amazon-product-search"}],"testimonial":"

"Cosmic JS allowed us to easily integrate dynamic content into our website. The product is a great value for your money. This is especially true given that their customer service is top-notch."

","testimonial_credit":"Harrie Pieters, Web Developer at Bookabus"}},{"_id":"5e5449c239bf16000708589f","order":23,"slug":"ux-updates-sort-metafields-and-more","title":"UX Updates, Sort Metafields, and more","content":"

We're happy to let you know about some great user experience improvements. For this release, we focused on improving the Edit Object process, content editor experience, and also squeezed in a request for an improvement to scheduled publishing.


1. Edit Object Improvements
You will now notice that we simplified the edit Object module on the right side of the Dashboard. Along with a less-busy UI, the UX is also greatly improved. Clicking any of the save buttons will now save without a page refresh. This is a much better\r\nexperience, especially for Objects that have a lot of Metafields which require lots of page scrolling.


2. Sort Metafields
It's our goal to make it easier for developers and content creators to collaborate to build great products together. But, as happens sometimes in product development, we overestimated a content creator feature need. Such is the case for Metafield sorting. 

So the ability to sort Metafields has been removed from the editor role (but still available for developers and admin). BUT, if you do need to allow editors to sort Metafields, this can be added to the user's role in Your Bucket > Settings > Team. Use the "View as editor" switch on each page in the\r\ndashboard to see what this experience is like for your content creators.


3. New Revision added when Object is automatically published / unpublished
With scheduled publishing / unpublishing, you can automate when your Objects are available or removed from the API. Now when your Object has been automatically published or unpublished, a new revision will be created to indicate the date of the automatic event. This is good for record-keeping.


4. Give us feedback!
We've also added a quick input area to give us feedback. We would love to hear from you, so drop us a line! :)

We hope you enjoy these new features and updates. Any questions or comments? Reach out to us on Twitter and join the conversation on our Slack channel.

","metafields":[{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"A1CcytYQ51","value":"2020-02-25"},{"children":null,"type":"object","title":"Author","key":"author","id":"oZ4BKll2z7","value":"5768b253163172890e00002c","object_type":"authors","object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"etwYntj7GT","value":"e8cdf700-c36b-11e9-a488-7925a97cd338--udZnjsCzsE.jpg","url":"https://cdn.cosmicjs.com/e8cdf700-c36b-11e9-a488-7925a97cd338--udZnjsCzsE.jpg","imgix_url":"https://imgix.cosmicjs.com/e8cdf700-c36b-11e9-a488-7925a97cd338--udZnjsCzsE.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"changelogs","created_at":"2020-02-24T22:10:10.803Z","created_by":"5357ef811693be2118000001","modified_at":"2020-08-10T13:59:43.225Z","created":"2020-02-24T22:10:10.803Z","status":"published","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2020-02-25T16:22:01.472Z","metadata":{"published_date":"2020-02-25","author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"featured_image":{"url":"https://cdn.cosmicjs.com/e8cdf700-c36b-11e9-a488-7925a97cd338--udZnjsCzsE.jpg","imgix_url":"https://imgix.cosmicjs.com/e8cdf700-c36b-11e9-a488-7925a97cd338--udZnjsCzsE.jpg"}}},{"_id":"5fb5af5c9877b80008051536","order":23,"slug":"how-to-choose-a-modern-cms-future-proof-your-content-2021","title":"How to Choose the Best CMS: Guide + PDF [2021]","content":"

When traditional CMS platforms like WordPress first revolutionized web development in the early 2000's, companies - and their web presences - looked a bit different.

Businesses were almost exclusively located in offices, most enterprise-level software and servers were located on-premise, and relied on monolithic architectures.

The times, they have a-changed.

Today many of those solutions are not just a bit outdated, they're fundamentally broken.

A new way of creating digital experiences is required for consumers to interact with your brand, and at the heart of this new approach is a fundamentally new kind of content management system.

What's in this article?
We'll discuss what CMS is, a little history, and how CMS lives in the heart of the modern MarTech (Marketing Technology) ecosystem.

Then we'll look at how and why content management systems are evolving due to the greater demands placed on them today, and in the coming years.

Finally, we've created a list of considerations you should hold in mind when evaluating content management systems based on a modern stack's demands. We've tried to cover all the bases - technology to marketing to administration.

There's an editable workbook included for you to use to compare CMS systems based on these considerations, and take notes.

Quick Links
i. Why Is a New Approach to Customer Interaction Needed?
ii. Why Do Organizations Need Modern Content Management Systems?
iii. Exactly What is a Modern CMS
iv. Everything to Consider When Choosing a Modern CMS
v. Editable Workbook for CMS Comparisons [PDF Downloadable]

\"The

Today's diverse content channels hardly resemble the more singular content channels of past decades. As our Content Channels evolve, so must our Content Management Systems.


The Evolution of CMS

Two decades ago, customers interacted with brands in-person, on landlines, or on their desktop sites, providing the same experience to everyone who interacted with a particular brand.

The iPhone was just a spark of an idea - a full 7 years away from its first iteration.

Why is a New Approach to Content Management Evolving?

Nowadays, however, things are a bit different.  New channels have emerged that include not just desktop and mobile but also smart watches, smart speakers, digital kiosks and a host of other channels.

Developers have also made changes to how they build applications and many focus on using new-and-improved JavaScript frameworks and microservices architecture. Content is changing, and becoming much more customized to devices for user-experiences.

Yet organizations still require a content management system (CMS) to aid with content storage, editing and delivery to the web. The user-experience shift from the perspective of customers, developers, and content creators has meant that organizations\r\nneed to reassess what they look for in a CMS.

To help you understand the new landscape from a high-level, we’ve provided a detailed list of the factors that need to be considered when choosing a modern CMS at the end of this article. You can also read on to learn more about the CMS landscape, and why new CMS solutions are necessary in the first place.

\"choose


Why Do Organizations Need Modern Content Management Systems?

The primary purpose of a CMS is to provide organizations with a way to store, edit, deliver and otherwise manage their content resources.

Traditional CMSs have been the solution to this problem for most businesses until relatively recently, and they've worked quite well.

They're still quite effective for creating and managing blogs, but when it comes to modern businesses, whether mid-size or larger enterprises, a lot more might be required.

In 2021, some of the more advanced and cutting-edge CMS solutions will help businesses:

Manage Content Across Multiple Channels

The legacy CMS platform was created for one singular channel, a brand website. Today, brands must contend with multiple channels including mobile and smart devices. Content for these additional channels needs to be managed with the same ease that single channels were managed with in the past.

The new wave of CMS can help companies to create, manage, and deploy this content in specific and meaningful ways.

Instead of using the old-school approach of a legacy CMS - copy-and-pasting your desktop website with responsive formatting - a Modern CMS enables your team to create content that takes full advantage of whatever channel you're deploying to,\r\nwith minimally duplicated efforts during content creation.

\"Future

Future Content Management channels are going to look increasingly diverse


Building a Modern Tech Stack

Marketing and application development involve more than just creativity today. Art, science, and analytics combine as brands create multiple types of content that appeals to different personas. The modern CMS is the core component within today’s\r\nMarTech stack.

Content is what drives the customer experience, so it winds up at or near the center of most stacks. Consequently, the CMS needs to be able to integrate with the other key members of the stack including: analytics, CRM, DAM, email marketing automation, front-end frameworks, and more.

Fostering Inter-and-Intra-Department Collaboration

Finally, a CMS isn’t just used by one department. Marketing, IT and others are crucial to creating the experiences which customers want.

As a result, the CMS acts as a means for these sometimes siloed departments to come together for one common purpose.

This is really well captured by a quote from one of our Customer Case Studies, MoveSpring:

... [our development goals were] challenging for a developer not familiar with WordPress. We have other dynamic content we'd like our [content and Sales team] to drive without relying on our development team... with Cosmic\r\nour developer was able to get our new blog up and running within days.

These benefits are central to what makes the new CMS philosophy so revolutionary.

Development teams skillsets can become more universal - focusing on key languages instead of specific toolsets - and content teams can manage more dynamic content with less need for development help.

Faster, better applications and content are the result.


Exactly What is a Modern CMS?

Most businesses are well aware of the benefits that a CMS can provide for them. But they will also wonder why sticking with a traditional or legacy CMS is no longer sufficient.

\"Headless

Headless CMS is one way you can prepare your CMS for the future

A modern CMS allows brands to do a lot more than just store content and distribute it to a specific channel.

The new approach to CMS - based on a headless or decoupled back-end system - is a tangible response to the modern web and everything it has to offer. Here are some of the things that a modern CMS does:

Responds to Changes in Customer Demands

Customers today don’t interact with brands on one channel. Instead, they rely on multiple channels to gather information and interact with brands in several ways throughout the buyer’s journey.

Customers also seek out personalization, and brands need to deliver, since 80% of customers are more likely to make a purchase when a brand gives them a personalized experience.

A consistent, personalized experience across multiple channels provides what is known as omnichannel marketing.

This focus on omnichannel marketing and personalized experiences is all meant to improve the customer experience. And according to Gartner,\r\n“marketing leaders must develop effective customer experience strategies to optimize customer interactions and drive business outcomes.”

Meets the Requirements of the Modern Web

Modern web applications are fast and responsive. This comes as a result of the shift towards progressive web applications and single page applications.

Meanwhile, brands have shifted from complex monolithic applications to microservices architectures, which are easier to build, maintain and scale. These changes have made many legacy applications slow, and sometimes unable to keep up\r\nwith the increasingly demanding needs of customers.

In the coming decade, CMS will help teams circumvent these challenges. Advancements in decoupled architecture and headless content management, for example, allow teams to deploy content to independent front-end interfaces, creating faster and customized\r\nexperiences.

Your application will never be restricted by a single interface, and you can continue to re-use existing codebase.

Embraces the Growth of SaaS and Remote Work

As cloud computing has grown, so too has the shift towards software as a service subscription.

No longer saddled by on-premise solutions, many companies have done away with expensive servers and maintenance costs and instead turned to the cloud.

Many Modern CMS solutions are highly optimized for cloud-based computing solutions, reliant upon CDN and remote storage, but some solutions offer on-premise implementations as well.

This shift has also meant that it is now easier for organizations to embrace remote work since their employees can more easily access everything needed to do their jobs.

Addresses the Growing Trends of APIs

Rather than build custom solutions to serve non-core business functions, many organizations are turning to API-service adoption to offload their non-core business logic.

This has seen companies such as Stripe, Twilio and Algolia come to the forefront and connect to businesses through APIs to provide them with services for payments, communications and more.

A modern CMS can help facilitate this trend by providing integrations with these API-driven functions.

\"downloadable


Modern CMS Considerations

Given the host of CMS options available, the exact features your company needs can vary. However, we’ve provided some important considerations which can help you zero in on the factors that are most relevant to your situation.

Choosing a Content Management System

  1. Is it Headless?
  2. Does it support multichannel or omnichannel?
  3. Does it simplify your content operations?
  4. Does it support global content delivery?
  5. Can your CMS scale with you?
  6. Do you have in house development and content teams?
  7. Are updates and maintenance handled out-the-box?
  8. Is the CMS extendable?
  9. Do you need eCommerce integration?
  10. Does it offer support for a migration from your existing CMS?
  11. Is your CMS self-hosted?
  12. Does it support GraphQL?
  13. Does it increase or decrease your team’s Time to Completion?
  14. Does it increase or decrease the development teams’ velocity?
  15. Does it complicate or simplify your development team's process?
  16. Can your developers work in parallel?
  17. What is the quality of the API documentation?
  18. Are you using Jamstack?
  19. Does it offer personalization features (Customer segmentation, content personalization, user roles & permissions etc.)
  20. Does your organization need dynamic content?
  21. Does your organization need localization?
  22. Does your content team have the tools they need to create modern digital experiences?
  23. How is the content editor experience?

Questions Every Organization Should Ask When Choosing a New Content Management System

1. Is it Headless?

A headless or decoupled architecture is the basis of any modern CMS. While a traditional CMS tightly couples the backend storage and frontend delivery together, a headless CMS instead separates them.

With the backend content storage separated from the frontend presentation layer, developers are free to connect any frontend channel they wish with the help of APIs. This future-proofs your content and makes it accessible on multiple devices, and provides\r\na host of other technological advantages, like extensive API-accessibility for your builds.

This API-first mentality is the foundation of the fast-growing Jamstack model for application development. Jamstack is a school of thought that re-defines the way developers think about the internet for a more modern approach, and at its core, is a headless\r\nCMS. In the future, more and more applications will be built with the JAMStack methodology.

2. Does it support multichannel or omnichannel?

One of the key aspects of the modern customer experience is that it is available across multiple channels. Desktops, mobile phones, tablets and a host of other smart devices offer a channel for brands to interact with their customers.

A modern CMS should facilitate content delivery to these multiple channels and also offer brands the ability to personalize that content to create not just a multichannel experience but an omnichannel one.

3. Does it simplify your content operations?

Content creation and delivery takes a process. The combination of people, processes and technology necessary to produce and deliver content is known as content operations.

Your CMS is an important piece of this and should simplify your content operations, not make it more difficult for you to juggle content production across multiple channels.

4. Does it support global content delivery?

When content requests are made from relatively the same geographic location where that content is hosted, then delivery happens quickly. With the help of a CDN, content can be displayed to users no matter where they are accessing your website.

A modern CMS that supports global content delivery can ensure that your content is always available, even during periods of peak traffic. This availability also makes it easier for you to gather data on your users and reduces the need for additional infrastructure.

5. Can your CMS scale with you?

Scalability is essential for any growing business. When choosing a CMS it should include the functionality that can not only meet your needs now but also have the capacity to continue meeting the needs of your business in the future.

As you add new products and services, require new features and extensions and more hosting space, your CMS should be able to meet your demand.

6. Do you have in house development and content teams?

One of the issues with traditional CMS platforms is that they can sometimes lead to bottlenecks when it comes to content delivery and workflows. Sometimes this can be solved when both your content and development teams are in house.

However, in today’s modern work environment, these teams are sometimes independent or remote. A modern CMS can facilitate appropriate workflows which improve collaboration and allow your teams to create content quickly and at scale.

7. Are updates and maintenance handled out-the-box?

Just like any other piece of software, a CMS requires maintenance to fix bugs, handle security issues and ensure everything runs smoothly.

A modern CMS should be able to provide all of these things for you, especially if you’re using a SaaS platform.

8. Is the CMS extendable?

The core function of your CMS is to manage your content. This includes creating, editing, previewing and publishing to multiple channels.

However, all of the functionality your business requires isn’t always available out-the-box. A modern CMS can provide the extensibility and additional apps you need to produce that added functionality.

9. Do you need eCommerce integration?

If you want to sell products on your website then you will need to be able to add eCommerce functionality or integrate with an external eCommerce platform.

Whether you need to manage product inventories, seasonal sales campaigns or product-centric landing pages, your modern CMS should have the ability to do this so that you can provide your customers with a cohesive experience and not have to send them to\r\nanother website to complete their checkout.

10. Does it offer support for a migration from your existing CMS?

If you’re currently using a traditional CMS or simply don’t have the features you require in your current CMS then it could be time for a change.

However, migrating from your existing CMS can be a pain. One benefit of a modern CMS is that it can help you with the migration process from your legacy CMS without too much manual work from you.

11. Is your CMS self-hosted?

Do you need to run your CMS on your own server? Or is there an option for you to use the CMS provider to host the platform for you to ease maintenance and hosting costs.

Most Relevant for CTOs and Development Teams

12. Does it support GraphQL?

A headless CMS will use APIs, usually REST, to send content in the form of data to other applications or frontend interfaces.

However, a modern CMS should also offer support for GraphQL since it provides added flexibility by giving you a more declarative way to source data, preventing you from over fetching or under fetching data, saving both time and resources.

Why GraphQL? If you're not already looped in, we've done a thorough breakdown the rise of GraphQL and how it's going to become a big player in the world of Headless and Jamstack in the future.

13. Does it increase or decrease your team’s Time to Completion?

Time to Completion (TTC) is the amount of time it takes for a task to be completed. When creating digital experiences with CMSs that lack specific features, marketers and developers can become frustrated with how long it takes to edit content.

A modern CMS should decrease TTC and make it easier for both teams to complete tasks.

14. Does it increase or decrease the development teams’ velocity?

In the digital landscape, developers need to be able to move fast and spend their time on tasks which drive business outcomes. When they become handicapped by technology and additional requests from other departments it can negatively impact their ability\r\nto move with speed.

A modern CMS can facilitate existing workflows and make it easier for developers to complete requests and connect to new channels.

15. Is your development team small?

The modern web experience requires not just content creators and marketers but also developers to make it work. However, legacy platforms can sometimes hamper smaller development teams and make it difficult for them to manage things for multiple channels.

For instance, when working with traditional CMS platforms, developers often have to analyze complex code to understand what’s happening, worry about security and maintenance and still find the time to create experiences that customers will enjoy.

With a modern CMS, frontend developers can spend their time focused on improving the UI/UX as they deploy content to multiple channels, while backend developers or the CMS providers ensure maintenance, security and everything else in between is handled.

16. Can your developers work in parallel (asynchronously?)

One issue with some CMS platforms is that frontend developers and backend developers can’t work on different things at the same time.

A modern CMS can facilitate developers working in parallel which saves them time and prevents workflow interruptions.

17. What is the quality of the API documentation?

Strong API documentation can improve the developer experience tenfold and make it easier for developers to integrate quickly.

The better the API documentation the easier it will be for your developers to integrate your modern CMS with existing workflows and applications and get the most out of it.

Which of the following does your organization commonly use? (Node.js, Vue.js, Angular, MongoDB, Next.js, Express, Gatsby etc.) Is your CMS frontend agnostic?

There are several JavaScript frameworks, databases and development stacks that make up the modern web.

Each organization will have its own preference so you need to decide if the CMS you’re using has what your organization requires. At the very least, a modern CMS will be frontend agnostic and be flexible enough for your team to get the most out\r\nof it.

18. Are you using Jamstack?

Jamstack has grown to become a popular stack among developers because it provides them the ability to create blazing fast websites.

With JavaScript, APIs and Markdown, developers realize increased speed, scalability and security when building modern web applications. A CMS that supports jamstack can make the lives of your developers much easier.

Most Relevant for CMOs and Content Marketing Teams

19. Does it offer personalization features (Customer segmentation, content personalization, user roles & permissions etc.)

Delivering content to multiple channels isn’t necessarily enough for a modern CMS. Today’s customers have become accustomed to content being tailored to their specific needs.

Consequently, a modern CMS should allow your brand to tailor content for different customer personas and create unique experiences for them. Content should be personalized based on behavior that personas exhibit when they visit a site repeatedly or from\r\na specific location. Also, for the content editors, roles and permissions can ensure that they only have to focus on the aspects of the CMS that are critical for them to do their jobs.

20. Does your organization need dynamic content?

In the past much of the content created on the web was static and simple. Now however, dynamic content reigns supreme and brands have had to adapt.

This dynamic content doesn’t just remain the same throughout the customer journey but changes and adapts based on user preferences and customer behavior. When coupled with the need customers have for personalization, then it’s important for\r\nbrands to have a modern CMS with the headless capabilities that facilitate creation and maintenance of dynamic content.

21. Does your organization need localization?

Is your brand serving a global, multilingual, or international audience? It takes multiple versions of content, many times translated into different languages to adequately serve a global audience.

A modern CMS should provide the flexibility for you to not only serve content to your audience in the language they desire, but also make it easier on the content teams creating the content.

22. Does your content team have the tools they need to create modern digital experiences?

Managing content for multiple platforms means that content teams will require an extensive list of tooling. This includes the ability to add rich text and multimedia, previews and content scheduling.

Also, the tools to create landing pages and marketing funnels plus edit copy for multiple channels and create search engine optimized content.

23. How is the content editor experience?

If your content editors have a tough time editing content for the channels where you want to deploy your content then your users will have an even worse time viewing the content. A great content editor experience can lead to a great customer experience.


Download the Editable Workbook to Help You Choose the Best CMS Solution

Cutting straight to the chase - here's the link to the editable workbook.\r\nIt includes a brief snippet of information on each of these considerations to refresh you on the topics we covered.

How'd we do? We'd love your feedback on this article and the PDF. If you like it, or if you have any thoughts as to how we can make this downloadable more helpful for you and your team, drop us a comment.


Choosing the Right CMS for Your Business

Having a modern CMS brings you one step closer to adequately delivering the quality experiences that consumers of today crave. With the right tools and technology in place, your development team, content creators and business leaders can feel much more\r\nconfident about navigating today’s modern web and the changing customer landscape.

Cosmic is a headless CMS platform that exceeds the expectations of a modern CMS. Leave your outdated technology stack behind and empower your content and development teams with everything they need for deploying dynamic content applications.


","metafields":[{"children":null,"type":"object","title":"Author","key":"author","id":"Q24wM12AIn","value":"5f5fac071936450007d8a01c","required":true,"object_type":"authors","object":{"_id":"5f5fac071936450007d8a01c","slug":"kyle-meagher","title":"Kyle Meagher","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"hsMOJCxIAj","value":"kylemeags"},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D2rdKO4lEL","value":"e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","url":"https://cdn.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","imgix_url":"https://imgix.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2020-09-14T17:44:39.110Z","created_by":"5357ef811693be2118000001","modified_at":"2020-09-14T17:45:09.251Z","created":"2020-09-14T17:44:39.110Z","status":"published","published_at":"2020-09-14T17:44:39.110Z","modified_by":"5357ef811693be2118000001","thumbnail":"https://imgix.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg"}},{"children":null,"type":"html-textarea","title":"Teaser","key":"teaser","id":"TNz39ALLOJ","value":"

What should you be thinking about when hunting for a future-proof CMS? We've listed every consideration your organization will need when it comes to choosing a Modern CMS.

"},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"KTgKG7OQA9","value":"deeb5c60-341b-11eb-9c4b-5ff458b1095b-modern-cms.png","url":"https://cdn.cosmicjs.com/deeb5c60-341b-11eb-9c4b-5ff458b1095b-modern-cms.png","imgix_url":"https://imgix.cosmicjs.com/deeb5c60-341b-11eb-9c4b-5ff458b1095b-modern-cms.png"},{"children":null,"type":"textarea","title":"SEO Meta Description","key":"seo_meta_description","id":"LsUBbw34gU","value":"Hunting for a future-proof CMS that fits your business needs? We've listed every consideration your organization will need to choose a CMS that's right for your needs."},{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"HAK5LxX43j","value":"2020-12-01"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2020-11-18T23:33:48.431Z","created_by":"5f8088982aa32f00093977bb","modified_at":"2021-01-09T18:40:36.180Z","created":"2020-11-18T23:33:48.431Z","status":"published","thumbnail":"https://imgix.cosmicjs.com/deeb5c60-341b-11eb-9c4b-5ff458b1095b-modern-cms.png","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2021-01-09T18:40:36.180Z","metadata":{"author":{"_id":"5f5fac071936450007d8a01c","slug":"kyle-meagher","title":"Kyle Meagher","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"hsMOJCxIAj","value":"kylemeags"},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D2rdKO4lEL","value":"e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","url":"https://cdn.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","imgix_url":"https://imgix.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2020-09-14T17:44:39.110Z","created_by":"5357ef811693be2118000001","modified_at":"2020-09-14T17:45:09.251Z","created":"2020-09-14T17:44:39.110Z","status":"published","published_at":"2020-09-14T17:44:39.110Z","modified_by":"5357ef811693be2118000001","thumbnail":"https://imgix.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","metadata":{"username":"kylemeags","profile_picture":{"url":"https://cdn.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","imgix_url":"https://imgix.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg"}}},"teaser":"

What should you be thinking about when hunting for a future-proof CMS? We've listed every consideration your organization will need when it comes to choosing a Modern CMS.

","featured_image":{"url":"https://cdn.cosmicjs.com/deeb5c60-341b-11eb-9c4b-5ff458b1095b-modern-cms.png","imgix_url":"https://imgix.cosmicjs.com/deeb5c60-341b-11eb-9c4b-5ff458b1095b-modern-cms.png"},"seo_meta_description":"Hunting for a future-proof CMS that fits your business needs? We've listed every consideration your organization will need to choose a CMS that's right for your needs.","published_date":"2020-12-01"}},{"_id":"5980bfe4c27214be7f0001ac","order":23,"slug":"cloud-cms","title":"Cloud CMS","content":"

Cosmic JS makes it easy to manage content for your applications through its Cloud CMS. Install the Official Cosmic JS JavaScript Client to integrate content into your app in minutes.  Get a feel for Cosmic JS by taking a spin through our apps and check out the tutorials below.

Cloud CMS  Articles

The Cosmic Stack
Three Reasons Why Agencies Should be Using a CMS API
Managing Users Who Manage Content
Cosmic Content Editor

Cloud CMS Resources

Cosmic JS Docs
Official JavaScript Client
Cosmic JS GitHub

Examples

npm i cosmicjs

Then in your JavaScript file, get your content:

\">
","metafields":[{"children":null,"type":"file","title":"Image","key":"image","id":"ydqUbGyK35","value":"1f17e990-6286-11e7-a707-9bd50fd3b6b0-cloud.svg","url":"https://cdn.cosmicjs.com/1f17e990-6286-11e7-a707-9bd50fd3b6b0-cloud.svg","imgix_url":"https://imgix.cosmicjs.com/1f17e990-6286-11e7-a707-9bd50fd3b6b0-cloud.svg"},{"children":null,"type":"file","title":"Thumbnail","key":"thumbnail","id":"thV2lcozJb","value":"1f17e990-6286-11e7-a707-9bd50fd3b6b0-cloud.svg","url":"https://cdn.cosmicjs.com/1f17e990-6286-11e7-a707-9bd50fd3b6b0-cloud.svg","imgix_url":"https://imgix.cosmicjs.com/1f17e990-6286-11e7-a707-9bd50fd3b6b0-cloud.svg"},{"children":null,"type":"html-textarea","title":"Blurb","key":"blurb","id":"2fwVa8XqAS","value":"

Cosmic is the best Cloud CMS for websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

"},{"children":null,"type":"text","title":"Headline","key":"headline","id":"jU7282gSGi","value":"Cloud"},{"children":null,"type":"text","title":"SEO Description","key":"seo_description","id":"awtdBQN2n4","value":"Cosmic is the best Cloud CMS for websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators."},{"children":null,"type":"file","title":"Twitter Card Image","key":"twitter_card_image","id":"S87LUlZwhB","value":"2d5bcc60-6286-11e7-8d46-7b261262b385-Screen Shot 2017-07-06 at 3.03.09 PM.png","url":"https://cdn.cosmicjs.com/2d5bcc60-6286-11e7-8d46-7b261262b385-Screen Shot 2017-07-06 at 3.03.09 PM.png","imgix_url":"https://imgix.cosmicjs.com/2d5bcc60-6286-11e7-8d46-7b261262b385-Screen Shot 2017-07-06 at 3.03.09 PM.png"},{"children":null,"type":"html-textarea","title":"Code Example","key":"code_example","id":"IzTdTbcrDn","value":""},{"children":null,"type":"text","title":"SEO Title","key":"seo_title","id":"0kMoZPP4qb","value":"Best Headless Cloud CMS "},{"children":[],"type":"repeater","title":"Videos","key":"videos","id":"ipas8FOPz4","value":"","repeater_fields":[{"title":"Title","key":"title","value":"","type":"text","required":false},{"title":"Link","key":"link","value":"","type":"text","required":false}]},{"children":null,"type":"text","title":"Apps Search Term","key":"apps_search_term","id":"v95tq5i2enaf3oreecdk","value":""},{"children":null,"type":"text","title":"Articles Search Term","key":"articles_search_term","id":"apps_search_term_kef9yhcej8gy","value":""},{"children":null,"type":"html-textarea","title":"Page Overview","key":"page_overview","id":"zYuPyDtTWY","value":""},{"children":null,"type":"html-textarea","title":"SEO Content","key":"seo_content","id":"6dT4bcaDeW","value":""}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"kb-articles","created_at":"2017-04-22T23:07:51.159Z","created_by":"5357ef811693be2118000001","created":"2017-08-01T17:52:36.803Z","status":"published","modified_at":"2020-08-15T19:40:53.901Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-08-15T19:40:53.901Z","unpublish_at":null,"metadata":{"image":{"url":"https://cdn.cosmicjs.com/1f17e990-6286-11e7-a707-9bd50fd3b6b0-cloud.svg","imgix_url":"https://imgix.cosmicjs.com/1f17e990-6286-11e7-a707-9bd50fd3b6b0-cloud.svg"},"thumbnail":{"url":"https://cdn.cosmicjs.com/1f17e990-6286-11e7-a707-9bd50fd3b6b0-cloud.svg","imgix_url":"https://imgix.cosmicjs.com/1f17e990-6286-11e7-a707-9bd50fd3b6b0-cloud.svg"},"blurb":"

Cosmic is the best Cloud CMS for websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

","headline":"Cloud","seo_description":"Cosmic is the best Cloud CMS for websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.","twitter_card_image":{"url":"https://cdn.cosmicjs.com/2d5bcc60-6286-11e7-8d46-7b261262b385-Screen Shot 2017-07-06 at 3.03.09 PM.png","imgix_url":"https://imgix.cosmicjs.com/2d5bcc60-6286-11e7-8d46-7b261262b385-Screen Shot 2017-07-06 at 3.03.09 PM.png"},"code_example":"","seo_title":"Best Headless Cloud CMS ","videos":[],"apps_search_term":"","articles_search_term":"","page_overview":"","seo_content":""}},{"_id":"59da6014a6d9036802002182","order":24,"slug":"cms-api","title":"CMS API","content":"

Cosmic JS offers developers a powerful API and content editors an intuitive editing experience to power content for your applications. Install the Official Cosmic JS JavaScript Client to integrate content into your app in minutes.  Get a feel for Cosmic JS by taking a spin through our apps and check out the tutorials below.

CMS API Articles

Why Go API-first?
The Cosmic Stack
Three Reasons Why Agencies Should be Using a CMS API
Managing Users Who Manage Content
Cosmic Content Editor

CMS API Resources

Cosmic JS Docs
Official JavaScript Client
Cosmic JS GitHub

Examples

npm i cosmicjs

Then in your JavaScript file, get your content:

\">
","metafields":[{"children":null,"type":"file","title":"Image","key":"image","id":"4Epfe1uz2d","value":"1f17e990-6286-11e7-a707-9bd50fd3b6b0-cloud.svg","url":"https://cdn.cosmicjs.com/1f17e990-6286-11e7-a707-9bd50fd3b6b0-cloud.svg","imgix_url":"https://imgix.cosmicjs.com/1f17e990-6286-11e7-a707-9bd50fd3b6b0-cloud.svg"},{"children":null,"type":"file","title":"Thumbnail","key":"thumbnail","id":"oH5FFyIb4W","value":"1f17e990-6286-11e7-a707-9bd50fd3b6b0-cloud.svg","url":"https://cdn.cosmicjs.com/1f17e990-6286-11e7-a707-9bd50fd3b6b0-cloud.svg","imgix_url":"https://imgix.cosmicjs.com/1f17e990-6286-11e7-a707-9bd50fd3b6b0-cloud.svg"},{"children":null,"type":"html-textarea","title":"Blurb","key":"blurb","id":"VQgls3hf2w","value":"

Cosmic is the best CMS API for websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

"},{"children":null,"type":"text","title":"Headline","key":"headline","id":"n78Fivgj6k","value":"CMS API"},{"children":null,"type":"text","title":"SEO Description","key":"seo_description","id":"LWkA8t0XHr","value":"Cosmic is the best CMS API for websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators."},{"children":null,"type":"file","title":"Twitter Card Image","key":"twitter_card_image","id":"8pTxOJ5QS0","value":"2d5bcc60-6286-11e7-8d46-7b261262b385-Screen Shot 2017-07-06 at 3.03.09 PM.png","url":"https://cdn.cosmicjs.com/2d5bcc60-6286-11e7-8d46-7b261262b385-Screen Shot 2017-07-06 at 3.03.09 PM.png","imgix_url":"https://imgix.cosmicjs.com/2d5bcc60-6286-11e7-8d46-7b261262b385-Screen Shot 2017-07-06 at 3.03.09 PM.png"},{"children":null,"type":"html-textarea","title":"Code Example","key":"code_example","id":"idISJ3XGyf","value":""},{"children":null,"type":"text","title":"SEO Title","key":"seo_title","id":"lURnkKUwZY","value":"Best Headless CMS API"},{"children":[],"type":"repeater","title":"Videos","key":"videos","id":"frgtgqfrpylludl8pnsi","value":"","repeater_fields":[{"title":"Title","key":"title","value":"","type":"text","required":false},{"title":"Link","key":"link","value":"","type":"text","required":false}]}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"kb-articles","created_at":"2017-04-22T23:07:51.159Z","created_by":"5357ef811693be2118000001","created":"2017-10-08T17:27:48.385Z","status":"published","modified_at":"2020-06-27T19:21:59.867Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-06-27T19:21:59.867Z","unpublish_at":null,"metadata":{"image":{"url":"https://cdn.cosmicjs.com/1f17e990-6286-11e7-a707-9bd50fd3b6b0-cloud.svg","imgix_url":"https://imgix.cosmicjs.com/1f17e990-6286-11e7-a707-9bd50fd3b6b0-cloud.svg"},"thumbnail":{"url":"https://cdn.cosmicjs.com/1f17e990-6286-11e7-a707-9bd50fd3b6b0-cloud.svg","imgix_url":"https://imgix.cosmicjs.com/1f17e990-6286-11e7-a707-9bd50fd3b6b0-cloud.svg"},"blurb":"

Cosmic is the best CMS API for websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

","headline":"CMS API","seo_description":"Cosmic is the best CMS API for websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.","twitter_card_image":{"url":"https://cdn.cosmicjs.com/2d5bcc60-6286-11e7-8d46-7b261262b385-Screen Shot 2017-07-06 at 3.03.09 PM.png","imgix_url":"https://imgix.cosmicjs.com/2d5bcc60-6286-11e7-8d46-7b261262b385-Screen Shot 2017-07-06 at 3.03.09 PM.png"},"code_example":"","seo_title":"Best Headless CMS API","videos":[]}},{"_id":"5f5fabc81936450007d8a01b","order":24,"slug":"best-headless-cms-list","title":"The Complete List of Headless CMS [47 Top-Tier Products]","content":"

\"We've


When it comes to contemporary customer experiences, content is the differentiator. Each brand is vying to spin up content-rich landing pages, products, websites, and applications faster than the competition. And ideally, for a fraction of the time and cost.

Each team member, from developers to content editors to the C-suite, wants to create and deliver compelling content across channels, without the need to micromanage their content infrastructure at every turn. 

As users demand more speed and connectedness from their digital experiences, savvy businesses have realized that a faster approach to content publishing starts with an innovative content management system; one that gives them enhanced control over content\r\ncreation and distribution. 

If you’re looking for your next content management system, or are simply curious about the options on the market, familiarizing yourself with headless architecture,\r\nand the products offering it, is vital. 

If you already know about the headless approach to content and just want to see the list, go on and skip ahead. Otherwise, we’ve provided a few details about a headless CMSand headless architecture in general, including how to choose between pure headless and decoupled headless CMS.

What is a Headless CMS?

If you’re in the content experience space you probably know about headless CMS already. The headless market has done nothing but grow over recent years and new options are being developed at neck-breaking speeds.  

A headless CMS is a backend-only content management system that unlike a traditional CMS, removes the presentation layer, or the frontend, from the backend data storage, allowing developers to use any frontend tool they want to present the content they\r\nhave created.

In the headless environment, content is stored on the cloud or in on-premise databases and provided as a service through APIs, which are, besides the separation between content and presentation, what make a headless CMS the best option to future-proof\r\nyour business. While some channels aren’t yet highly used across the board, headless architecture and APIs enable you to deliver content beyond websites and apps and onto IoT, AR, VR and other emerging technology devices. 

This means that headless CMS are better equipped to create, distribute, and optimize omnichannel content experiences that deliver value directly to customers and clients. At the same time, the headless architecture makes CMS extensible and capable of\r\naugmenting what they do with a simple API. 

So how do we evaluate what makes a headless CMS truly top class? Let's take a look at the elements of the headless architecture, so that you can better understand what goes into our ranking system.

The Elements of Headless Architecture

According to headlesscms.org, “Headless CMS' are [the] opposite of legacy systems like WordPress, Drupal, Joomla, etc. [Legacy systems] traditionally have to be hosted and built together with the site every time it’s\r\nserved. A headless CMS doesn’t care where it’s serving its content to. It’s no longer attached to the frontend, and the content can be viewed on any platform.”

The headless architecture separates the management of a website into two different systems: one for content creation and storage, and another system that’s responsible for consuming and presenting data through the use of an interface, no matter\r\nwhat it is. 

In a headless CMS, the frontend is removed from the equation, leaving only the backend, which acts as an API-based content repository, delivering content to any frontend framework, from single page applications to digital signage to good old fashioned\r\nwebsites.  

From a technical perspective, headless architecture is composed of the following elements: 


Choosing A ‘Pure’ Headless Or Decoupled CMS

By now, you might be convinced that headless architecture is the answer to the users’ increasing need for omnichannel experiences. A headless CMS simplifies content delivery and gives developers unparalleled flexibility when it comes to developing\r\nnew digital experiences. The thing is, for marketers, a ‘pure’ headless CMS can be problematic, especially for teams without a developer on hand to create the head.

Decoupled or hybrid CMS were born as an answer to this issue. They make it easy for marketers to create content and usually include templates and drag-and-drop interfaces to simplify things.

A ‘pure’ headless CMS is built to be an API-first CMS, whereas a decoupled CMS is more like a traditional CMS with an optional head and APIs attached; yet, as some vendors use the terms carelessly, it can be hard for users to understand the\r\ndifference. 

A hybrid or decoupled CMS is a CMS whose ‘head’ or templating system is separated from the content creation and storage part. Unlike traditional CMS that often force users to use the templating engine that comes with the CMS, a decoupled CMS\r\ncan connect and integrate to custom heads depending on the channel. 

If you want more information about the differences between pure headless and decoupled CMS, check out our ‘Headless CMS: Everything You Need to Know’ article. 

Now, without further ado, here’s our list of the top 47 headless CMS you need to keep an eye on going into 2021.

The Big List of 47 Headless CMS

  1. ApostropheCMS

  2. Cosmic

  3. Bold

  4. Craft CMS

  5. Ghost

  6. Zesty

  7. Strapi

  8. Prismic

  9. Cockpit CMS

  10. Netlify CMS

  11. XOOPS CMS

  12. Dialogue Wise

  13. Sanity

  14. Directus

  15. Storyblok

  16. Scrivito

  17. Amplience

  18. Cloud CMS

  19. Contenta CMS

  20. Cotonti

  21. Flotiq

  22. Gentics Mesh

  23. PushTable

  24. Squidex

  25. Superdesk

  26. TakeShape

  27. Xamoom

  28. Contentful

  29. DatoCMS

  30. Kentico Kontent

  31. Butter CMS

  32. Contentstack

  33. Agility CMS

  34. Mura

  35. dotCMS

  36. Ingeniux CMS

  37. Crafter CMS

  38. Evoq Content

  39. Core dna

  40. Magnolia

  41. Hygraph

  42. Naviga Writer

  43. ACE - ATEX Content Engine

  44. Crownpeak DXM

  45. eZ Platform Enterprise Edition

  46. FirstSpirit

  47. Solodev


  1. ApostropheCMS

    \"ApostropheCMS

    Founded in 2008 and based in Philadelphia, ApostropheCMS is a free open source CMS with multi-tenant support. Apostrophe is 100% JavaScript based and uses MongoDB for intuitive document storage. It’s built on Express framework and makes creating\r\ntemplates using Nunjucks and LESS stylesheet easy. REST APIs make connecting to headless capabilities easy and also includes in-context editing and drag-and-drop content for non-technical users. 

    Availability: Free to download

  2. Cosmic

    \"CosmicJS

    Cosmic is a headless, API-first CMS built for developers by developers. It is fully extendable, making it perfectly equipped for building custom dashboards with best-in-class API services including REST and GraphQLAPIs.\r\nModern content teams can seamlessly collaborate and rely on an easy-to-use content editing experience that allows for faster shipping times. In addition Cosmic includes out-of-the-box features like rich text, media manager, global CDN, flexible user roles\r\nand permissions, optional add-ons include webhooks, localization, revision history, single sign on, scheduled publishing, and more.

    Availability: Personal (Free), Starter, Pro, Enterprise

  3. Bold

    \"Bold

    Quintype Technologies Pvt. Ltd, founded in 2014 is headquartered in Bangalore India. Bold, is an enterprise headless CMS developed by Quintype Technologies with omnichannel distribution and personalization. This is further boosted by machine learning\r\nalgorithms that help deliver improved digital experiences. Bold is customizable for newsroom workflows and content categorization. It offers REST APIs for front-end control and a secure enterprise cloud with DDOS protection, SSL and auto-scaling infrastructure.

    Availability: Free Trial, Premium (based on traffic), Custom Enterprise

  4. Craft CMS

    \"Number

    Originating in Oregon in 2013, Craft CMS is an open source headless CMS that empowers creative marketers with a user-friendly interface and a customizable backend. It features decoupled capabilities supported by GraphQL API as well as integrations for\r\ncommerce, Salesforce and HubSpot. Included is support for 25 languages, a plug-in store and more.

    Availability: Free, Pro, Enterprise

  5. Ghost

    \"The

    Singapore-based Ghost was founded in 2013 and simplifies the process for creators that want to publish content online and grow an audience. It is an open source headless Node.js CMS that is Jamstack customizable. REST APIs can connect to custom themes\r\nor Jamstack frontends. Integrations are available with open source developer SDKs for hundreds of apps directly or via Zapier.

    Availability: Basic, Standard, Business

  6. Zesty

    \"Zesty

    Zesty.io is a cloud-based, headless CMS designed for marketing teams. Zesty enables marketers to build content-rich websites and deliver content across apps and IoT devices. Founded in 2010 in San Diego, California, Zesty speeds content creation with\r\ncontent indexing, SEO management, customized templates, and video content. Zesty also enables users to plan a workflow as well as take full control over the authoring process. 

    Availability: Small Business, Business, Mid-Size Enterprise, and Enterprise

  7. Strapi

    \"Strapi

    Strapi is an open-source headless CMS based on Node.js, which makes it useful for developers to lay the foundation for a solid user experience. Strapi enables developers to build simple database configurations with Mongo, Postgres, and MySQL as well as\r\nmodify the backend code to build a functioning web application in no time. 

    Availability: Standard, Gold, Silver

  8. Prismic

    \"Prismic

    Prismic is a developer-first headless CMS that was founded in 2013. It lets developers create custom fields that content teams can use. Users can build with any JavaScript framework whether Gatsby, React or Vue and use flexible queries with RESTful API\r\nand GraphQL. Preview and scheduling for publishing content with ecommerce and other features also available.

    Availability: Free, Medium, Platinum, Enterprise

  9. Cockpit CMS

    \"Coming

    The brain-child of Artur Heinze, Germany-based Cockpit was developed in 2013. It is an open source API-driven headless CMS with a flexible content structure and support for multiple devices and cross channel distribution. An API-first and JSON content\r\napproach manages structured content that can be reused across channels. 

    Availability: Free to download

  10. Netlify CMS

    \"Netlify

    From the creators of Jamstack, San Francisco Netlify CMS is built on client-side JavaScript, reusable APIs and prebuilt Markup which provides better performance and security than platforms like WordPress. It offers open source content management that\r\nfits into the Git workflow. Netlify combines with any SSG for flexible and fast projects. 

    Availability: Free to download
     

  11. XOOPS CMS

    XOOPS CMS is an extensible, object-oriented dynamic content management written in PHP. XOOPS enables users to build community websites, company portals and intranet sites, weblogs, and many different digital experiences. XOOPS CMS enables developers to\r\ninstall and uninstall modules quickly to develop faster and with less interference and uses relational databases such as MySQL to store data and run the CMS. 

    Availability: Free to download
     

  12. Dialogue Wise

    \"Dialogue

    Australian DialogueWise is an API-based headless CMS that provides location, device and sentiment-based content delivery methods. It includes web hooks that notify about any changes in content as well as provides a test-sandbox for previewing content and custom scripting to personalize experiences.

    Availability: Free, Small, Medium, Enterprise
     

  13. Sanity

    \"Sanity

    Founded in 2016, Sanity is a fast and flexible API-first headless platform for building cutting edge experiences with structured content. Create custom front ends with GraphQL or GROQ, Sanity’s open source querying language to push content anywhere.\r\nSanity also offers real-time collaboration, document revision and instant previews.

    Availability: Free, Advanced, Enterprise
     

  14. Directus

    \"SQL

    Directus, is a NYC-based data-first headless CMS. It is open source and manages content as a pure SQL database without the need for a property data model or content storage. Directus uses APIs or SDKs to connect to kiosks, wearables, IoT devices and more\r\nand includes customizable workflows.

    Availability: Self-hosted, Basic, Standard, Pro, Enterprise
     

  15. Storyblok


    \"Storyblok's

    Storyblok is a headless CMS with a powerful visual editor that makes it simpler for marketers to build digital experiences. Storyblok provides users with the flexibility and freedom to be used for a myriad of use cases, which enables marketers to configure\r\nit the way they want and create digital content that suits the audience’s needs. Also, with Storyblok developers can define content types and receive structured content in JSON that the editor can use to preview it completely decoupled from the\r\nbackend.

    Availability: Free, Basic, Advanced, and Premium
     

  16. Scrivito


    \"Scrivito


    An enterprise-class SaaS platform founded in Berlin,Germany in 2015, Scrivito is a multi-tenant decoupled CMS that delivers assets using APIs. Powered by AWS it also leverages React.js and Jamstack, a WYSIWYG editor, customizable permissions and a versatile\r\ncontent browser.

    Availability: Team, Company, Enterprise, Enterprise Plus
     

  17. Amplience

    \"Amplience

    Founded in 2008, London-based Amplience is a best-of-breed CMS for the retail industry. Amplience combines content, experiences and commerce. It provides capabilities to plan, schedule, product and deliver dynamic content, optimize content for product\r\npages and deliver to all channels and devices.

    Availability: Request pricing
     

  18. Cloud CMS

    \"Cloud

    Boston-based Cloud CMS was founded in 2010 and provides a  decoupled JSON and binary content platform. Git-like version control is available with feature-rich RESTful API and GraphQL. Cloud CMS uses Amazon DocumentDB as an alternative to MongoDB.\r\nAvailable as a SaaS model or with on-prem hosting using Docker Containers. 

    Available: Starter, Business, Plus, Enterprise
     

  19. Contenta CMS

    \"Contenta

    ContentaCMS provides a decoupled Drupal distribution. It is a standard API-ready platform that makes using decoupled Drupal easier. Free and open source it includes tools and configuration  to move away from server-side rendered sites and distribute to a variety of frontends.

    Available: Free to download
     

  20. Cotonti

    \"If

    An open-source PHP-based content management framework. Cotonti is fast and lightweight while remaining modular and extensible, allowing for additional plugins and integrations. It is powered by its own template engine and has an easily learned interface\r\nfor inexperienced programmers as well.

    Availability: Free to download
     

  21. Flotiq

    \"Deploy

    Flotiq is an API-first CMS that connects content to Gatsby and deploys to Herekoku instantly. Secure and scalable with feature packed User APIs and SDKs and works with Jamstack.

    Availability: Free to download
     

  22. Gentics Mesh

    \"You'll

    Austrian company Gentics’ products include an open source CMS that requires no setup or dependencies. Offers custom content components and dynamic layouts, GraphQL and RESTful APIs as well as Elasticsearch support.

    Availability: Free to download
     

  23. PushTable

    \"PushTable

    PushTable is an API-driven headless CMS built on top of GCP and Firebase. It leverages Google’s fast global CDN and provides fully flexible data structure and serverless workflow  support for content management.

    Availability: Free to download
     

  24. Squidex

    \"Squidex

    Squidex is an open-source headless CMS and content management platform that provides developers with a rich API ecosystem with OData filter and Swagger definitions where developers can build their UI on top of it using ASP.NET Core and CQRS. Squidex works\r\nfor both Linux and Windows.

    Availability: Starter, Basic, Professional, Business
     

  25. Superdesk

    \"Superdesk


    Superdesk is, first and foremost, a digital newsroom system. The platform combines the API-driven functionalities of a headless CMS with the workflow features news creators and editors need to create and distribute news quickly. However, despite being\r\nready for news creators, Superdesk’s open-source functionalities and integrability makes it possible for organizations to add the most-relevant functionality to their business. 

    Availability: Self-starter, Pro, Enterprise
     

  26. TakeShape

    \"Developer's 

    TakeShape is a Jamstack-ready, headless CMS that uses GraphQL to fetch content across systems from a single endpoint. TakeShape offers users a visual interface and a powerful templating engine that can be used to deploy websites quickly. TakeShape also\r\nenables powerful content modelling and localization support. 

    Availability: Developer, Professional, Enterprise
     

  27. Xamoom


    \"Xamoom


    Xamoom is a mobile-first CMS that leverages Google’s AppEngine to create mobile campaigns, webs, and apps easily. Using xamoon, marketers can create context-based mobile experiences in several different languages as well as embed multimedia and\r\nenable location-based experiences for the website’s visitors. 

    Availability: Basic, Pro, Premium
     

  28. Contentful

    \"The

    Berlin based API-first content platform Contentful was founded in 2013.  It acts as a single hub for unifying content and integrates with tools that perform translations, segmentation and more.  Business leaders, marketers, developers and product\r\nmanagers are armed with the tools they need for building digital experiences.

    Stateless RESTful APIs offer total control over content and assets. It features microservices architecture, is language and framework agnostic with open source components and includes an editor toolbox that provides custom integrations and content modelling.

    Availability: Free, Medium and Custom Enterprise Solutions
     

  29. DatoCMS

    \"DatoCMS

    Founded in Firenze Italy in 2017, DatoCMS is a headless CMS that offers a single centralized content hub, a flexible content model with faster integrations backed by a global delivery network that spans 200 cities and 90+ countries. Content is channel\r\nagnostic, making it reusable across channels and provides fast loading times to hit the 100% standard for Google’s PageSpeed Insights. 

    Availability: Developer, Professional, Scale
     

  30. Kentico Kontent

    \"Kentico


    A headless CMS that provides clean and structured content delivery via API. New England-based Kentico offers a cloud-first CMS known as Kontent that can also be deployed as part of the CI/CD pipeline. It features workflows that connect processes and deliver\r\ncontent to any platform. Also offering SaaS performance with an easy to use authoring experience and editorial calendar for staying organized.

    Availability: Free Trial, Monthly Business, Premium and Enterprise Plans
     

  31. Butter CMS

    \"Butter

    Founded in 2014, ButterCMS is an API-first CMS that provides content management for multichannel and multisite options. Its global content-API is made for any tech stack and includes a blogging engine with built-in SEO. Global CDNs improve performance\r\nand scalability, plus flexible content modelling using components.

    Availability: Individual Blog Plans, Startups, Small Businesses and Enterprise
     

  32. Contentstack

    \"Contentstack

    Founded in 2018 and based in the Bay Area, Constenstack is a modern CMS for personalized omnichannel digital experiences.  It harmonizes business and technology for better collaboration and quicker delivery from idea to digital content in a matter\r\nof days. It is frontend framework agnostic with a rich visual editor and offers integrations via APIs.

    Availability: Free Trial, Business and Enterprise
     

  33. Agility CMS

    \"Agility


    Toronto-based Agility CMS has been around since 2002 and touts itself as the fastest headless CMS. It offers built-in page management and content delivery to any frontend using RESTful APIs, Graph QL and Jamstack.

    Users can easily manage content using content modeling and version control to build multiple content relationships. Non-technical users can make changes without developer help and integrations with the entire MarTech stack are possible.

    Availability: Free, Standard, Pro
     

  34. Mura

    \"If

    Founded in California in 2008, Mura is a complete digital experience platform that provides content management, personalization and CaaS. It is a nimble content creation hub that avoids the one-size-fits-all approach. Users can choose to go headless or decoupled with support for Vue.js, Angular, Next.js and more. It is also container-ready and supports the DevOps workflow.

    Availability: Request Demo
     

  35. dotCMS

    \"Dot

    dotCMS is a hybrid content management system. Founded in Miami, Florida in 2008, it offers the freedom of headless with the functionality of traditional CMS. Users can rely on multi-cloud deployment on public or private cloud, a scalable Java infrastructure\r\nwith support for low code and no code that includes custom templates, workflows and drag-and-drop capabilities. 

    Availability: Request Quote
     

  36. Ingeniux CMS

    \"Ingeniux

    Founded in Seattle in 1999, Ingeniux is an agile CMS that provides an alternative to the Web Experience Suite. It Supports a modern web experience with secure portals, mobile apps and connections to multiple customer touchpoints and modern SPAs. Ingeniux\r\nworks for technical content and can edit DITA and XML. Cloud hosting is available on Azure or AWS and there are allowances for 3rd party content editing within workflows.

    Availability: Request a Quote
     

  37. Crafter CMS

    \"Crafter

    Virginia-based Crafter Software was founded in 2013 and its products include a Git-based headless CMS for building apps, websites and omnichannel experiences. It features user-friendly content creation and publication tools as well as severless and stateless\r\ndynamic content delivery support for operations. Users are capable of building not only enterprise websites and digital signage with GraphQL APIs but also video experiences using OTT video for live training and VOD. 

    Availability: Free, Cloud Scaling Packages
     

  38. Evoq Content

    \"Evoq

    Evoq Content is an open source .NET CMS for delivering modern web experiences. The CMS product of DNN software, it offers extensibility built on the back of open APIs and a marketplace of plugin apps. It provides flexible pre-built layouts and templates\r\nwith inline image editing. Digital assets can be handled with a central DAM with Box, Amazon S3 and Dropbox connectors. Also offered are page caching and Evoq on Demand cloud deployment for scalability and version tracking for secure access.

    Availability: Request a demo
     

  39. Core dna

    \"Core

    Core dna was founded in Melbourne, Australia in 2000. As a DXP it combines content, commerce, intranet and more. PaaS is available for managing infrastructure with enterprise-grade cloud computing. Included are 80+ production-ready apps for out-of-the-box\r\nuse without plugins. A suite of tools for marketing and technical teams to deliver API-driven experiences including a Rich-text and HTML editor as well as 500 integrations to 3rd party systems that can be combined using webhooks or APIs.

    Availability: Dependent on site volume
     

  40. Magnolia

    \"Magnolia

    Magnolia, founded in 2003 is a modern digital experience platform that provides hyper-personalization and flexible, frontend agnostic architecture. Based in Basel, Switzerland, Magnolia is cloud-ready with scalable deployment infrastructure. The Java\r\nCMS offers several no-code integrations with Multisource. REST APIs and visual SPA editing make connecting to multiple devices simple.

    Availability: Contact for pricing
     

  41. Hygraph

    Germany-based Hygraph (formerly GraphCMS) was founded in 2017 and offers a GraphQL native headless CMS. It provides API-first digital experiences without templates or other restrictions for developers. It also uses webhooks and versioning for content\r\ncontrol. Included are power editors for content schema staging workflows.

    Availability: Free, Team and Enterprise
     

  42. Naviga Writer

    \"Naviga

    NavigaWriter is a CaaS platform for newsrooms and media houses. NavigaGlobal was founded in Minneapolis in 2013 and built a CMS for journalists with an easy-to-use interface and content management system. Naviga Compass’ machine learning algorithm\r\nmakes content tagging with metadata simple and improves productivity. Adapted for cross channel publication across IoT devices and SPAs. It also features a WYSIWYG interface and headless extensibility for integration with other systems.

    Availability: Request pricing
     

  43. ACE - ATEX Content Engine

    \"ACE

    UK-based Atex’s CMS product is a multi-channel API-first CMS that provides flexibility for developers and editors. Headless and fully scalable, ATEX’s features a GraphQL Content API and developer friendly SDKs for Java and React. Core delivery\r\nservices are deployed in Docker Containers by Amazon E3S. Integrations and plugins facilitate on-demand and live video as well as content recommendations and semantic tagging. 

    Availability: Request pricing
     

  44. Crownpeak DXM

    \"Reduce

    Crownpeak was founded in Los Angeles in 2001 and offers a cloud-native DXP with multi-site management and delivery of personalized digital experiences. A/B testing, TagControl for monitoring and controlling 3rd party technologies on site are included.\r\nIt also features a Universal Consent Platform for delivering experiences that comply with GDPR, CCPA and other privacy laws.

    Availability: Request demo
     

  45. eZ Platform Enterprise Edition

    \"eZ

    eZ Platform is Ibexa’s modular DXP for B2B companies. A content engine that creates content at scale with decoupled headless CMS, an application engine for designing and developing features in an agile environment using Symfony PHP full-stack and\r\na Website Factory that manages content localization and includes a native Page Builder.

    Availability: Silver, Gold, Platinum, VIP
     

  46. FirstSpirit

    \"FirstSpirit

    Manufactured by German company e-Spirit, FirstSpirit is a hybrid CMS and DXP that manages content-driven digital experiences across multiple channels. AI-powered personalization, CaaS with agile content management and integrations built around a light\r\nIT infrastructure and flexible UX are some of its prominent features.

    Availability: Request demo
     

  47. Solodev

    \"SolodevSolodev\r\nis a customer experience platform and CMS that enables individuals and companies to work together and leverage the power of the cloud. Solodev enables teams, from individual contributors to C-suite executives to collaborate and build context-driven digital\r\nexperiences. Solodev works on AWS, which gives the platform an extra layer of security, scalability and redundancy. 

    Availability: Free, Team, and Enterprise


Should You Be Going Headless or Decoupled?

The world of the CMS has changed over the last few years. Traditional CMS were great for working with simple websites, getting blogs up and running and pushing content to one or two channels. 

Pure headless and decoupled CMS allow you to store content in the backend and then distribute it to any current and emerging channels. Pure headless CMS reduces the strain on development teams that previously needed to build and maintain their own infrastructure. 

Now, headless architecture has made it possible for content and development teams to focus more time on their application instead of non-core CMS infrastructure, enabling greater content and application development velocity. 


What's Next?

We hope you enjoyed this extensive list of Headless CMS options on the market. If you still aren't sure where to get started, check out Cosmic. Our powerful, intuitive Headless CMS is built with a developers-first mindset, combined with a simple UI to make it easy for teams to build and create content faster.

The digital landscape is always changing and we are constantly improving our product to satisfy the needs of modern content and development teams. We have an engaged community and Slack channel,\r\nand we're available to help you find out if going headless is right for you and answer any questions you may have.

","metafields":[{"children":null,"type":"object","title":"Author","key":"author","id":"HsPngaQP4P","value":"5f5fac071936450007d8a01c","required":true,"object_type":"authors","object":{"_id":"5f5fac071936450007d8a01c","slug":"kyle-meagher","title":"Kyle Meagher","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"hsMOJCxIAj","value":"kylemeags"},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D2rdKO4lEL","value":"e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","url":"https://cdn.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","imgix_url":"https://imgix.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2020-09-14T17:44:39.110Z","created_by":"5357ef811693be2118000001","modified_at":"2020-09-14T17:45:09.251Z","created":"2020-09-14T17:44:39.110Z","status":"published","published_at":"2020-09-14T17:44:39.110Z","modified_by":"5357ef811693be2118000001","thumbnail":"https://imgix.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg"}},{"children":null,"type":"html-textarea","title":"Teaser","key":"teaser","id":"pxFeN764BH","value":"

Looking to shortlist some headless content management systems? Our comprehensive list will help you narrow down the growing headless CMS landscape.

"},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"nDy9TZH0sk","value":"a30a1400-f845-11ea-8023-b50824df693d-top-headless-cms.jpg","url":"https://cdn.cosmicjs.com/a30a1400-f845-11ea-8023-b50824df693d-top-headless-cms.jpg","imgix_url":"https://imgix.cosmicjs.com/a30a1400-f845-11ea-8023-b50824df693d-top-headless-cms.jpg"},{"children":null,"type":"textarea","title":"SEO Meta Description","key":"seo_meta_description","id":"YGkhUThSpM","value":"The headless CMS landscape is still growing. Here’s a comprehensive list of all the major players."},{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"MNN8qApz3g","value":"2020-09-17"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2020-09-14T17:43:36.867Z","created_by":"5f1352f9d677c00008cf38b0","modified_at":"2022-09-21T14:15:30.138Z","created":"2020-09-14T17:43:36.867Z","status":"published","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"thumbnail":"https://imgix.cosmicjs.com/a30a1400-f845-11ea-8023-b50824df693d-top-headless-cms.jpg","published_at":"2022-09-21T14:15:30.138Z","metadata":{"author":{"_id":"5f5fac071936450007d8a01c","slug":"kyle-meagher","title":"Kyle Meagher","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"hsMOJCxIAj","value":"kylemeags"},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D2rdKO4lEL","value":"e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","url":"https://cdn.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","imgix_url":"https://imgix.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2020-09-14T17:44:39.110Z","created_by":"5357ef811693be2118000001","modified_at":"2020-09-14T17:45:09.251Z","created":"2020-09-14T17:44:39.110Z","status":"published","published_at":"2020-09-14T17:44:39.110Z","modified_by":"5357ef811693be2118000001","thumbnail":"https://imgix.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","metadata":{"username":"kylemeags","profile_picture":{"url":"https://cdn.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg","imgix_url":"https://imgix.cosmicjs.com/e6a97150-f6b1-11ea-a7f7-5146f4eea1d5-kyle.jpeg"}}},"teaser":"

Looking to shortlist some headless content management systems? Our comprehensive list will help you narrow down the growing headless CMS landscape.

","featured_image":{"url":"https://cdn.cosmicjs.com/a30a1400-f845-11ea-8023-b50824df693d-top-headless-cms.jpg","imgix_url":"https://imgix.cosmicjs.com/a30a1400-f845-11ea-8023-b50824df693d-top-headless-cms.jpg"},"seo_meta_description":"The headless CMS landscape is still growing. Here’s a comprehensive list of all the major players.","published_date":"2020-09-17"}},{"_id":"5d4c25bccda366570398f684","slug":"content-management-system-for-emerging-tech","title":"Content Management System for Emerging Tech","content":"

Teams using the Cosmic JS Content Management System are able to model and create content for delivery to all of their websites and apps, including emerging tech like VR and AR, wearables, and more. Manage video, rich text and notifications from the comfort of your Cosmic JS Bucket Dashboard for a variety of devices. Content is available for reuse once published in the Cosmic JS Headless Content Management System, saving teams time and money.

What is Headless CMS Software?

Headless CMS Software works by providing non-technical editors with a Dashboard UI to model, create and publish content while providing developers with API tools and resources to integrate content with any website or app. By decoupling content from code, teams create a central content repository that can power all of their content-powered applications. 

","metafields":[{"value":"Content Management System for Emerging Tech","key":"solution_name","title":"Solution Name","type":"text","children":null},{"value":"52263510-9dc3-11e9-a5b4-e5df9f8049d3-f70db6b0-5abd-11e8-a6f7-cb94a52bca9d-109999224655216202658486799915322872806436o.jpg","key":"image","title":"Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/52263510-9dc3-11e9-a5b4-e5df9f8049d3-f70db6b0-5abd-11e8-a6f7-cb94a52bca9d-109999224655216202658486799915322872806436o.jpg","imgix_url":"https://imgix.cosmicjs.com/52263510-9dc3-11e9-a5b4-e5df9f8049d3-f70db6b0-5abd-11e8-a6f7-cb94a52bca9d-109999224655216202658486799915322872806436o.jpg"},{"object_type":"case-studies","value":"59663607a6a3f55962000e40,5ade6e0e2b218820ec24bff1,5a72248572c6845e0d90b5d5","key":"case_studies","title":"Case Studies","type":"objects","children":null,"objects":[{"_id":"59663607a6a3f55962000e40","slug":"big-fish-launches-marketing-and-tutorial-content-for-games","title":"Big Fish Launches Marketing and Tutorial Content for Games","content":"

When Big Fish launches a new game for iOS, Android, or Web, they use a marketing landing page to promote the launch. Big Fish wanted their game studios to have the ability to curate and update content on each of their landing pages. Other CMS systems weren’t as flexible enough for their needs. Cosmic provides Big Fish with more creative freedom to build landing pages while allowing game studios to make updates on their own.




"We use Cosmic buckets for each of our mobile game landing pages. While our API and storage usage is low, the number of buckets we need is high, which makes the new Clusters Feature a perfect solution for our company use cases. It allows us to\r\nhave a single consolidated invoice, with an overall API and data-limit, but up to 35 buckets for our use."

— Jessica Chappell, Web Developer 

Read more about Big Fish and their games.

","metafields":[{"value":"Big Fish","key":"company","title":"Company","type":"text","children":null},{"value":"Gaming","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"When Big Fish launches a new game for iOS, Android, or Web, they use a marketing landing page to promote the launch. Other CMS systems weren’t as flexible enough for their needs. Cosmic provides Big Fish with more creative freedom to build landing pages while allowing game studios to make updates on their own.\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png","imgix_url":"https://imgix.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created":"2017-07-12T14:45:27.402Z","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","status":"published","publish_at":null,"published_at":"2018-11-08T23:15:38.911Z"},{"_id":"5ade6e0e2b218820ec24bff1","slug":"medical-realities-delivers-vr-surgical-content","title":"Medical Realities Delivers VR Surgical Content","content":"

The Medical Realties Platform is a technology powerhouse designed to deliver realism and immersion. Delivering high-quality surgical training using Virtual Reality, Medical Realities lets you become immersed while world-class surgeons teach their interactive modules, which includes 360-degree 4K video and a testing system within the application. 



The Medical Realities team needed a way for educators (non-technical editors) to manage content that could be served to VR headsets for consumption by trainees, so they chose Cosmic to manage and deliver their content from the cloud through an API. 



"Cosmic allowed us to easily spin up content models that would allow our non-technical editors to manage the most sophisticated medical VR content out there. Our developers were equipped with robust Docs and Example Apps to get them started and were able to use the bleeding-edge frameworks necessary to run Virtual Reality."

— Joe Marritt, Lead Web Developer 

","metafields":[{"value":"Medical Realities","key":"company","title":"Company","type":"text","children":null},{"value":"Healthcare and Virtual Reality ","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"The Medical Realties Platform is a technology powerhouse designed to deliver realism and immersion. Delivering high-quality surgical training using Virtual Reality, Medical Realities lets you become immersed while world-class surgeons teach their interactive modules, which includes 360-degree 4K video and a testing system within the application. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"0a95ad50-474f-11e8-b969-053c57b3610c-medical-realities-1.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/0a95ad50-474f-11e8-b969-053c57b3610c-medical-realities-1.png","imgix_url":"https://imgix.cosmicjs.com/0a95ad50-474f-11e8-b969-053c57b3610c-medical-realities-1.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-04-23T23:36:46.885Z","created_by":"5716b504e9c686d006000073","created":"2018-04-23T23:36:46.885Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-05-18T17:07:50.800Z"},{"_id":"5a72248572c6845e0d90b5d5","slug":"unleashed-xr-augmented-mixed-and-virtual-realities","title":"Unleashed XR: Augmented, Mixed and Virtual Realities","content":"


The Unleashed XR team designs and develops augmented reality, mixed reality and virtual reality solutions for a range of clients across industries. XR (extended reality) is the term referring to the full spectrum from reality to complete virtual environments. Through a structured design thinking process, Unleashed XR designs and develops applications that meet the unique needs of their clients. Unleashed XR is driven by ensuring their services have a tangible positive impact on their clients, making activities, processes and experiences superior, more efficient, cheaper and safer.

Unleashed XR needed a new blog that allowed developers, editors and contributors to collaborate in the cloud, so they chose Cosmic. They plan on re-vamping the website of their sister business, Unleashed VR, using Cosmic's powerful tools in the near future.

"We just launched our new website which utilizes the power of Cosmic. Cosmic was a huge help in the setup of our blog, particularly the Media management, which Cosmic proved invaluable for in respect to optimizing videos and images. Additionally we were able to use Cosmic to stream our videos straight to a Unity Mobile application that we are working on as well. This was great in optimizing the speed of the app, and we're looking forward to integrating Cosmic in as many ways as possible."

— Tyler Smith, Lead Software Developer  

","metafields":[{"value":"Unleashed XR","key":"company","title":"Company","type":"text","children":null},{"value":"Virtual Reality Software","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"The Unleashed XR team designs and develops augmented reality, mixed reality and virtual reality solutions for a range of clients across industries. Unleashed XR needed a new blog that allowed developers, editors and contributors to collaborate in the cloud, so they chose Cosmic.","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"a9fd29f0-0702-11e8-a43c-e17c6c324439-Logo&Name_PurpleUnleashedXR.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/a9fd29f0-0702-11e8-a43c-e17c6c324439-Logo&Name_PurpleUnleashedXR.png","imgix_url":"https://imgix.cosmicjs.com/a9fd29f0-0702-11e8-a43c-e17c6c324439-Logo&Name_PurpleUnleashedXR.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-01-31T20:18:13.948Z","created_by":"5716b504e9c686d006000073","created":"2018-01-31T20:18:13.948Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5357ef811693be2118000001","publish_at":null}]},{"repeater_fields":"\"\"\"\"\"[{\"title\":\"Slug\",\"key\":\"slug\",\"value\":\"\",\"type\":\"text\",\"required\":false}]\"\"\"\"\"","value":"vue-rpg-game","key":"app_slugs","title":"App Slugs","type":"repeater","children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"vue-rpg-game","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"cosmic-messenger","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"vue-garage-sale","type":"text","required":false}]}]},{"repeater_fields":"\"\"\"\"\"[{\"title\":\"Slug\",\"key\":\"slug\",\"value\":\"\",\"type\":\"text\",\"required\":false}]\"\"\"\"\"","value":"wordpress-importer","key":"extension_slugs","title":"Extension Slugs","type":"repeater","children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"wordpress-importer","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"mux-videos","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"imgix-editor","type":"text","required":false}]}]},{"key":"testimonial","title":"Testimonial","type":"html-textarea","children":null,"value":"

"Cosmic JS allowed us to easily spin up content models that would allow our non-technical editors to manage the most sophisticated medical VR content out there. Our developers were equipped with robust Docs and Example Apps to get them started and were able to use the bleeding-edge frameworks necessary to run Virtual Reality."

"},{"value":"Joe Marritt, Lead Web Developer at Medical Realities","key":"testimonial_credit","title":"Testimonial Credit","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"solutions","created":"2019-08-08T13:38:04.590Z","created_at":"2019-07-08T15:08:44.006Z","modified_at":"2019-08-08T13:38:49.129Z","status":"published","locale":null,"published_at":"2019-08-08T13:38:49.129Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"order":24,"metadata":{"solution_name":"Content Management System for Emerging Tech","image":{"url":"https://cdn.cosmicjs.com/52263510-9dc3-11e9-a5b4-e5df9f8049d3-f70db6b0-5abd-11e8-a6f7-cb94a52bca9d-109999224655216202658486799915322872806436o.jpg","imgix_url":"https://imgix.cosmicjs.com/52263510-9dc3-11e9-a5b4-e5df9f8049d3-f70db6b0-5abd-11e8-a6f7-cb94a52bca9d-109999224655216202658486799915322872806436o.jpg"},"case_studies":[{"_id":"59663607a6a3f55962000e40","slug":"big-fish-launches-marketing-and-tutorial-content-for-games","title":"Big Fish Launches Marketing and Tutorial Content for Games","content":"

When Big Fish launches a new game for iOS, Android, or Web, they use a marketing landing page to promote the launch. Big Fish wanted their game studios to have the ability to curate and update content on each of their landing pages. Other CMS systems weren’t as flexible enough for their needs. Cosmic provides Big Fish with more creative freedom to build landing pages while allowing game studios to make updates on their own.




"We use Cosmic buckets for each of our mobile game landing pages. While our API and storage usage is low, the number of buckets we need is high, which makes the new Clusters Feature a perfect solution for our company use cases. It allows us to\r\nhave a single consolidated invoice, with an overall API and data-limit, but up to 35 buckets for our use."

— Jessica Chappell, Web Developer 

Read more about Big Fish and their games.

","metafields":[{"value":"Big Fish","key":"company","title":"Company","type":"text","children":null},{"value":"Gaming","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"When Big Fish launches a new game for iOS, Android, or Web, they use a marketing landing page to promote the launch. Other CMS systems weren’t as flexible enough for their needs. Cosmic provides Big Fish with more creative freedom to build landing pages while allowing game studios to make updates on their own.\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png","imgix_url":"https://imgix.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created":"2017-07-12T14:45:27.402Z","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","status":"published","publish_at":null,"published_at":"2018-11-08T23:15:38.911Z","metadata":{"company":"Big Fish","industry_type":"Gaming","teaser":"When Big Fish launches a new game for iOS, Android, or Web, they use a marketing landing page to promote the launch. Other CMS systems weren’t as flexible enough for their needs. Cosmic provides Big Fish with more creative freedom to build landing pages while allowing game studios to make updates on their own.\n","logo":{"url":"https://cdn.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png","imgix_url":"https://imgix.cosmicjs.com/33939470-e3ac-11e8-9e28-911bc9bb89f7-big-fish-games-logo-png-4.png"}}},{"_id":"5ade6e0e2b218820ec24bff1","slug":"medical-realities-delivers-vr-surgical-content","title":"Medical Realities Delivers VR Surgical Content","content":"

The Medical Realties Platform is a technology powerhouse designed to deliver realism and immersion. Delivering high-quality surgical training using Virtual Reality, Medical Realities lets you become immersed while world-class surgeons teach their interactive modules, which includes 360-degree 4K video and a testing system within the application. 



The Medical Realities team needed a way for educators (non-technical editors) to manage content that could be served to VR headsets for consumption by trainees, so they chose Cosmic to manage and deliver their content from the cloud through an API. 



"Cosmic allowed us to easily spin up content models that would allow our non-technical editors to manage the most sophisticated medical VR content out there. Our developers were equipped with robust Docs and Example Apps to get them started and were able to use the bleeding-edge frameworks necessary to run Virtual Reality."

— Joe Marritt, Lead Web Developer 

","metafields":[{"value":"Medical Realities","key":"company","title":"Company","type":"text","children":null},{"value":"Healthcare and Virtual Reality ","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"The Medical Realties Platform is a technology powerhouse designed to deliver realism and immersion. Delivering high-quality surgical training using Virtual Reality, Medical Realities lets you become immersed while world-class surgeons teach their interactive modules, which includes 360-degree 4K video and a testing system within the application. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"0a95ad50-474f-11e8-b969-053c57b3610c-medical-realities-1.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/0a95ad50-474f-11e8-b969-053c57b3610c-medical-realities-1.png","imgix_url":"https://imgix.cosmicjs.com/0a95ad50-474f-11e8-b969-053c57b3610c-medical-realities-1.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-04-23T23:36:46.885Z","created_by":"5716b504e9c686d006000073","created":"2018-04-23T23:36:46.885Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-05-18T17:07:50.800Z","metadata":{"company":"Medical Realities","industry_type":"Healthcare and Virtual Reality ","teaser":"The Medical Realties Platform is a technology powerhouse designed to deliver realism and immersion. Delivering high-quality surgical training using Virtual Reality, Medical Realities lets you become immersed while world-class surgeons teach their interactive modules, which includes 360-degree 4K video and a testing system within the application. \n","logo":{"url":"https://cdn.cosmicjs.com/0a95ad50-474f-11e8-b969-053c57b3610c-medical-realities-1.png","imgix_url":"https://imgix.cosmicjs.com/0a95ad50-474f-11e8-b969-053c57b3610c-medical-realities-1.png"}}},{"_id":"5a72248572c6845e0d90b5d5","slug":"unleashed-xr-augmented-mixed-and-virtual-realities","title":"Unleashed XR: Augmented, Mixed and Virtual Realities","content":"


The Unleashed XR team designs and develops augmented reality, mixed reality and virtual reality solutions for a range of clients across industries. XR (extended reality) is the term referring to the full spectrum from reality to complete virtual environments. Through a structured design thinking process, Unleashed XR designs and develops applications that meet the unique needs of their clients. Unleashed XR is driven by ensuring their services have a tangible positive impact on their clients, making activities, processes and experiences superior, more efficient, cheaper and safer.

Unleashed XR needed a new blog that allowed developers, editors and contributors to collaborate in the cloud, so they chose Cosmic. They plan on re-vamping the website of their sister business, Unleashed VR, using Cosmic's powerful tools in the near future.

"We just launched our new website which utilizes the power of Cosmic. Cosmic was a huge help in the setup of our blog, particularly the Media management, which Cosmic proved invaluable for in respect to optimizing videos and images. Additionally we were able to use Cosmic to stream our videos straight to a Unity Mobile application that we are working on as well. This was great in optimizing the speed of the app, and we're looking forward to integrating Cosmic in as many ways as possible."

— Tyler Smith, Lead Software Developer  

","metafields":[{"value":"Unleashed XR","key":"company","title":"Company","type":"text","children":null},{"value":"Virtual Reality Software","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"The Unleashed XR team designs and develops augmented reality, mixed reality and virtual reality solutions for a range of clients across industries. Unleashed XR needed a new blog that allowed developers, editors and contributors to collaborate in the cloud, so they chose Cosmic.","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"a9fd29f0-0702-11e8-a43c-e17c6c324439-Logo&Name_PurpleUnleashedXR.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/a9fd29f0-0702-11e8-a43c-e17c6c324439-Logo&Name_PurpleUnleashedXR.png","imgix_url":"https://imgix.cosmicjs.com/a9fd29f0-0702-11e8-a43c-e17c6c324439-Logo&Name_PurpleUnleashedXR.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-01-31T20:18:13.948Z","created_by":"5716b504e9c686d006000073","created":"2018-01-31T20:18:13.948Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5357ef811693be2118000001","publish_at":null,"metadata":{"company":"Unleashed XR","industry_type":"Virtual Reality Software","teaser":"The Unleashed XR team designs and develops augmented reality, mixed reality and virtual reality solutions for a range of clients across industries. Unleashed XR needed a new blog that allowed developers, editors and contributors to collaborate in the cloud, so they chose Cosmic.","logo":{"url":"https://cdn.cosmicjs.com/a9fd29f0-0702-11e8-a43c-e17c6c324439-Logo&Name_PurpleUnleashedXR.png","imgix_url":"https://imgix.cosmicjs.com/a9fd29f0-0702-11e8-a43c-e17c6c324439-Logo&Name_PurpleUnleashedXR.png"}}}],"app_slugs":[{"slug":"vue-rpg-game"},{"slug":"cosmic-messenger"},{"slug":"vue-garage-sale"}],"extension_slugs":[{"slug":"wordpress-importer"},{"slug":"mux-videos"},{"slug":"imgix-editor"}],"testimonial":"

"Cosmic JS allowed us to easily spin up content models that would allow our non-technical editors to manage the most sophisticated medical VR content out there. Our developers were equipped with robust Docs and Example Apps to get them started and were able to use the bleeding-edge frameworks necessary to run Virtual Reality."

","testimonial_credit":"Joe Marritt, Lead Web Developer at Medical Realities"}},{"_id":"5f35c3e2fcc662000804c562","order":24,"slug":"what-is-graphql","title":"What is GraphQL: A Comprehensive Guide","content":"

\"GraphQL

Cosmic provides a GraphQL Headless CMS API to power content for your websites and apps.

The lack of standardization for APIs has been a challenge that software developers have faced for a long time. 

A study by SmartBear found that 35% of API providers feel their documentation is poor or needs improvement. The problem is that inconsistent APIs increase the learning curve for developers and can slow development velocity. But perhaps poor API documentation is not entirely the fault of those doing the writing. 

GraphQL aims to solve the difficulties of API standardization and documentation with its straightforward querying language, technology-agnostic backend support, and self-documenting schema system. That’s why many development teams are opting for GraphQL over other API technologies that have a lack of widely-used industry standards.



While REST and GraphQL are both API paradigms that enable the sharing of data over the internet, there are some key differences developers should be aware of. Let’s take a deep-dive into GraphQL and whether it’s right for your project.


Getting to Grips with GraphQL? Here’s What You’ll Find in This Article:

  1. What is GraphQL?
  2. GraphQL vs REST
  3. Exploring Some GraphQL Benefits
  4. 3 GraphQL Examples: What is Graphql Used For?
  5. Is GraphQL Right For Your Project?


What is GraphQL?

GraphQL is an API querying language that is both language and database agnostic. That means developers can make standardized data queries to a GraphQL service without any knowledge of the backend implementation. Developers describe the data they need, and the API handles the task of fetching the appropriate data behind the scenes.

But let’s take a step back and examine the origins of GraphQL. 

In 2012, GraphQL began as an internal Facebook project led by co-creators Lee Byron, Nick Schrock, and Dan Schafer. Their aim was to\r\nbuild a better Facebook News Feed API:

“The three of us got to work trying to figure out how to build a better News Feed API and we just got super far down the rabbit hole,” Byron told Nordic APIs. “I think just a month or two of iterative improvements on what started as a prototype enfolding all of our ideas ended up being the first version of GraphQL.”

In 2015, Facebook publicly released GraphQL, and in 2018, the GraphQL project was moved from Facebook to the GraphQL Foundation, hosted by the Linux Foundation, a non-profit company.

Beyond the standardized querying language, GraphQL is a server-side runtime and type system. On the backend, a GraphQL service needs to be set up to validate and execute queries. This requires a schema that defines the object types and fields available and resolvers which handle the implementation details for retrieving the data on the backend.


GraphQL vs REST

GraphQL—similar to REST APIs—leverages HTTP to send and receive data. The key difference is that different REST requests are created based on HTTP methods and endpoints, while GraphQL queries are shaped within the JSON body of the request.

\"Cosmic

Cosmic GraphQL API. Click to zoom.

GraphQL Request
For example, take the body of this GraphQL request:

{\r\n  person {\r\n    firstName\r\n    lastName\r\n  }\r\n}

With GraphQL, developers can define which data they want to get returned (first name and last name) by specifying each field within the object (person). The resulting response would look like this:

{\r\n  "data": {\r\n    "person": {\r\n      "firstName": "John",\r\n      "lastName": "Smith"\r\n    }\r\n  }\r\n}

This results in another benefit that GraphQL has over REST is the ability to retrieve multiple resources through a single query, whereas REST requires a new query to be made for each resource.

The GraphQL response generally has the same structure as the request. Queries are interactive, so any changes to fields in the request body will dynamically change the response as well.

REST Request
This differs from REST APIs, which are based on resources. For example, here’s a similar request to a REST endpoint:

GET https://sample.com/person/1

In the case of REST, developers need to specify the location of the resource on the backend using the correct endpoint (/person) and path parameters (/1). The request body is blank because REST endpoints typically return all the data fields a resource contains.

The resulting JSON body could look something like this:

{\r\n  "firstName": "John",\r\n  "middleName": "Andrew",\r\n  "lastName": "Smith",\r\n  "email": "jas1992@gmail.com",\r\n  "relationshipStatus": "single"\r\n}

As you can see, REST APIs are much less flexible, and frontend developers have little control over the response they get back. The REST server returns what backend developers have decided the endpoint should give as a response.


Exploring Some GraphQL Benefits

If you’re still asking, “why use graphql over REST?”, read on.
\r\n
There are a number of areas where GraphQL has the upper hand over most REST services.

Standardization: For one, GraphQL is simple to use. There’s no industry standard for REST APIs, so developers are forced to sift through documentation to understand any new API they need to use. With GraphQL, however, developers only need to learn the standardized querying language once, and they can work with any application or software that supports the technology.

Declarative: In addition, the ability to control the response from an API request enables developers to avoid over fetching or under fetching data. These situations waste bandwidth by providing more information than necessary or requiring multiple API calls to get all the data needed. GraphQL enables developers to pull all the required fields across multiple objects within a single request.

Self-documenting: Finally, GraphQL is introspective. That means the API is self-documenting and predictable for developers to use. Since the GraphQL server requires a pre-defined schema, developers can easily explore the data available using manual queries or a tool like \r\nGraphiQL. With REST endpoints, it’s up to the backend developers to document any changes they make or leverage a tool like\r\nSwagger to generate the API documentation automatically.


3 GraphQL Examples: What is GraphQL Used For?

With the benefits of GraphQL clear, let’s look at some examples of several types of GraphQL queries. 

Pulling Data

When developers need to pull data from the backend, it’s typically called a GET request in REST terms. With GraphQL, these are queries that look like this:

query GetTitles {\r\n  allBooks {\r\n    books {\r\n      # retrieves title of all books\r\n      title\r\n    } \r\n  }\r\n}

GraphQL queries can be anonymous or named (GetTitles), and comments can be included using the # character. These features, and many others, helps to clarify what the query’s expected response should be. 

In this case, the response would be similar to this:

{\r\n  "data": {\r\n    "allBooks":  [\r\n      {\r\n        "title": "The Martian"\r\n      },\r\n      {\r\n        "title": "The Great Gatsby"\r\n      }\r\n    ]\r\n  }\r\n}

Editing Data

If developers need to add, modify, or delete data, they’ll send a POST, PUT/PATCH, or DELETE request to a REST endpoint. With GraphQL, however, modifying data requires a mutation request. Here’s an example of creating a mutation:

mutation createBook(title: "The Old Man and the Sea", author: "Ernest Hemingway") { }

This simple mutation will create a new book object on the backend with the specified title and author. If the mutation was successful, we’d get a response that includes a unique identifier for the new data object created on the backend.

{ "data": { "createBook": "sqdYsdf" } }

As with queries, developers can shape the responses they get from mutations. For example, it’s possible to request certain fields to be included in the response along with the unique identifier, such as the title, author, or date created.

Subscriptions

Along with simple queries and mutations, GraphQL supports subscriptions\r\n, which enable a frontend app to retrieve real-time data updates from the server. 

For example, if a frontend app needed to keep a running list of books as they’re added to its database, developers could set up a subscription event using the following request:

subscription {\r\n  new_books {\r\n    id\r\n    title\r\n    author\r\n    date_added\r\n  }\r\n}

Once the subscription is set up, the server will automatically push new data to the frontend. The responses will include all the fields in the initial subscription request. 

It’s important to note that subscriptions are sent to a websocket endpoint because HTTP connections typically close once a response is returned. Instead, the websocket connection, and in turn, subscription remains open until the frontend requests to unsubscribe or an error occurs. 

Without subscriptions, it’s incredibly difficult to build real-time functionality. It often requires an approach called polling, which involves sending periodic requests to an API. But this approach is inefficient and could risk hitting request limits. Subscriptions, therefore, are a powerful way to ensure frontend applications receive data updates in real-time without requiring polling.


Is GraphQL Right For Your Project?

While GraphQL adoption is growing, many development teams still opt for REST APIs when integrating new frontends with their CMS because it’s an API paradigm they’ve been familiar with for a while. GraphQL, however, is ideal for simplifying development, reducing bandwidth usage, and reducing the time-to-market for content-driven apps. In the end, either technology can fuel static site generators, mobile apps, websites, and more.

The good news is that with Cosmic you don’t need to choose between REST and GraphQL\r\n. The headless CMS supports both technologies, so brands can launch content-rich apps faster, without worrying about backend compatibility. And if you're not quite ready to make the change to GraphQL, Cosmic’s REST API also supports a GraphQL-like feature that allows you to declare what properties are returned with the response using \r\n"props".

Consider Cosmic to fuel your digital experiences, and check out our GraphQL-driven demos.

","metafields":[{"children":null,"type":"object","title":"Author","key":"author","id":"l1r1T5jAlH","value":"5f31a4a9edba7300080e5a34","required":true,"object_type":"authors","object":{"_id":"5f31a4a9edba7300080e5a34","slug":"kaya-ismail","title":"Kaya Ismail","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"hsMOJCxIAj","value":""},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D2rdKO4lEL","value":"8579d4e0-db42-11ea-84a8-4b73110d28e6-kaya-ismail.png","url":"https://cdn.cosmicjs.com/8579d4e0-db42-11ea-84a8-4b73110d28e6-kaya-ismail.png","imgix_url":"https://imgix.cosmicjs.com/8579d4e0-db42-11ea-84a8-4b73110d28e6-kaya-ismail.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2020-08-10T19:48:57.679Z","created_by":"5357ef811693be2118000001","modified_at":"2020-09-14T17:45:13.790Z","created":"2020-08-10T19:48:57.679Z","status":"published","published_at":"2020-08-10T19:48:57.679Z","modified_by":"5357ef811693be2118000001","thumbnail":"https://imgix.cosmicjs.com/8579d4e0-db42-11ea-84a8-4b73110d28e6-kaya-ismail.png"}},{"children":null,"type":"html-textarea","title":"Teaser","key":"teaser","id":"vLSqFkO4j5","value":"

Is it time to give REST a rest? GraphQL is a language and database agnostic querying language that might just leave RESt in its dust.

"},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"4Cew1eYbrE","value":"98f04ff0-e1a9-11ea-88aa-0bae7ba3a376-graphql-cms.jpg","url":"https://cdn.cosmicjs.com/98f04ff0-e1a9-11ea-88aa-0bae7ba3a376-graphql-cms.jpg","imgix_url":"https://imgix.cosmicjs.com/98f04ff0-e1a9-11ea-88aa-0bae7ba3a376-graphql-cms.jpg"},{"children":null,"type":"textarea","title":"SEO Meta Description","key":"seo_meta_description","id":"O5O2301ioq","value":"GraphQL is an API querying language that is both language and database agnostic. In this article, we dive into GraphQL benefits, history, and use cases."},{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"kdcP4Ycnxi","value":"2020-08-20"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2020-08-13T22:51:13.952Z","created_by":"5f319d8587024b0008b89343","modified_at":"2020-09-16T18:51:51.965Z","created":"2020-08-13T22:51:13.952Z","status":"published","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2020-08-20T13:52:21.694Z","thumbnail":"https://imgix.cosmicjs.com/98f04ff0-e1a9-11ea-88aa-0bae7ba3a376-graphql-cms.jpg","metadata":{"author":{"_id":"5f31a4a9edba7300080e5a34","slug":"kaya-ismail","title":"Kaya Ismail","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"hsMOJCxIAj","value":""},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"D2rdKO4lEL","value":"8579d4e0-db42-11ea-84a8-4b73110d28e6-kaya-ismail.png","url":"https://cdn.cosmicjs.com/8579d4e0-db42-11ea-84a8-4b73110d28e6-kaya-ismail.png","imgix_url":"https://imgix.cosmicjs.com/8579d4e0-db42-11ea-84a8-4b73110d28e6-kaya-ismail.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2020-08-10T19:48:57.679Z","created_by":"5357ef811693be2118000001","modified_at":"2020-09-14T17:45:13.790Z","created":"2020-08-10T19:48:57.679Z","status":"published","published_at":"2020-08-10T19:48:57.679Z","modified_by":"5357ef811693be2118000001","thumbnail":"https://imgix.cosmicjs.com/8579d4e0-db42-11ea-84a8-4b73110d28e6-kaya-ismail.png","metadata":{"username":"","profile_picture":{"url":"https://cdn.cosmicjs.com/8579d4e0-db42-11ea-84a8-4b73110d28e6-kaya-ismail.png","imgix_url":"https://imgix.cosmicjs.com/8579d4e0-db42-11ea-84a8-4b73110d28e6-kaya-ismail.png"}}},"teaser":"

Is it time to give REST a rest? GraphQL is a language and database agnostic querying language that might just leave RESt in its dust.

","featured_image":{"url":"https://cdn.cosmicjs.com/98f04ff0-e1a9-11ea-88aa-0bae7ba3a376-graphql-cms.jpg","imgix_url":"https://imgix.cosmicjs.com/98f04ff0-e1a9-11ea-88aa-0bae7ba3a376-graphql-cms.jpg"},"seo_meta_description":"GraphQL is an API querying language that is both language and database agnostic. In this article, we dive into GraphQL benefits, history, and use cases.","published_date":"2020-08-20"}},{"_id":"5be9ca96cc3f3e2ce66ce511","order":24,"slug":"road-redemption-launches-a-marketing-microsite","title":"Road Redemption Launches a Marketing Microsite","content":"

Tripwire Interactive, a leading entertainment software developer and publisher founded in 2005, recently launched its corporate website on Cosmic. The Tripwire Interactive team can now easily manage microsite content for each game with a dedicated studio manager as its content creator. This is important as Tripwire is always debuting new marketing campaigns to accompany game launches. 



Road Redemption is the first of many games to have innovative content creator access provided via a headless CMS API that delivers the best of both worlds for cross-functional teams. Read more about how Tripwire Interactive builds apps faster using Cosmic.


"Cosmic allowed us to easily integrate a secure and fast back-end API into our React app. Cosmic fit our needs with its simple web-based dashboard so that members of our marketing team can create, edit, and delete new content on the fly. Our team\r\nhas been enjoying the ease of use with the new system."

— Owen Liversidge, Lead Developer


","metafields":[{"value":"Road Redemption ","key":"company","title":"Company","type":"text","children":null},{"value":"Gaming","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Tripwire Interactive, a leading entertainment software developer and publisher founded in 2005, recently launched its corporate website on Cosmic. The Tripwire Interactive team can now easily manage microsite content for each game with a dedicated studio manager as its content creator. This is important as Tripwire is always debuting new marketing campaigns to accompany game launches. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"a4f8e050-e6ab-11e8-93f0-a94cde6f34a7-64d11670-dddf-11e8-95d7-dfced904ba0c-RR_Logo_Hires_TrasparenrBack-(1).png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/a4f8e050-e6ab-11e8-93f0-a94cde6f34a7-64d11670-dddf-11e8-95d7-dfced904ba0c-RR_Logo_Hires_TrasparenrBack-(1).png","imgix_url":"https://imgix.cosmicjs.com/a4f8e050-e6ab-11e8-93f0-a94cde6f34a7-64d11670-dddf-11e8-95d7-dfced904ba0c-RR_Logo_Hires_TrasparenrBack-(1).png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2018-11-12T18:46:46.371Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-11-13T21:30:43.964Z","metadata":{"company":"Road Redemption ","industry_type":"Gaming","teaser":"Tripwire Interactive, a leading entertainment software developer and publisher founded in 2005, recently launched its corporate website on Cosmic. The Tripwire Interactive team can now easily manage microsite content for each game with a dedicated studio manager as its content creator. This is important as Tripwire is always debuting new marketing campaigns to accompany game launches. \n","logo":{"url":"https://cdn.cosmicjs.com/a4f8e050-e6ab-11e8-93f0-a94cde6f34a7-64d11670-dddf-11e8-95d7-dfced904ba0c-RR_Logo_Hires_TrasparenrBack-(1).png","imgix_url":"https://imgix.cosmicjs.com/a4f8e050-e6ab-11e8-93f0-a94cde6f34a7-64d11670-dddf-11e8-95d7-dfced904ba0c-RR_Logo_Hires_TrasparenrBack-(1).png"}}},{"_id":"59e820f8e1f7ed7b62000a8f","slug":"web-cms","title":"Web CMS","content":"

Cosmic JS offers a powerful CMS for any website or web-based application.  Install the Official Cosmic JS JavaScript Client to integrate content into your app in minutes. Get a feel for Cosmic JS by taking a spin through our apps and check out the tutorials below.

Web CMS Articles

Why Go API-first?
The Cosmic Stack
Three Reasons Why Agencies Should be Using a CMS API
Managing Users Who Manage Content
Cosmic Content Editor

Web CMS Resources

Cosmic JS Docs
Official JavaScript Client
Cosmic JS GitHub

Examples

npm i cosmicjs

Then in your JavaScript file, get your content:

\">
","metafields":[{"children":null,"type":"file","title":"Image","key":"image","id":"H64haGws3S","value":"e9b89b20-b481-11e7-a8f7-d1677c94aba6-web.svg","url":"https://cdn.cosmicjs.com/e9b89b20-b481-11e7-a8f7-d1677c94aba6-web.svg","imgix_url":"https://imgix.cosmicjs.com/e9b89b20-b481-11e7-a8f7-d1677c94aba6-web.svg"},{"children":null,"type":"file","title":"Thumbnail","key":"thumbnail","id":"8lsnRyn9gS","value":"e9b89b20-b481-11e7-a8f7-d1677c94aba6-web.svg","url":"https://cdn.cosmicjs.com/e9b89b20-b481-11e7-a8f7-d1677c94aba6-web.svg","imgix_url":"https://imgix.cosmicjs.com/e9b89b20-b481-11e7-a8f7-d1677c94aba6-web.svg"},{"children":null,"type":"html-textarea","title":"Blurb","key":"blurb","id":"BlWBc77KsQ","value":"

Cosmic is the best CMS for websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

"},{"children":null,"type":"text","title":"Headline","key":"headline","id":"g5LS3Qpgsy","value":"Web"},{"children":null,"type":"text","title":"SEO Description","key":"seo_description","id":"AOZMiDuQpo","value":"Cosmic is the best CMS for websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators."},{"children":null,"type":"file","title":"Twitter Card Image","key":"twitter_card_image","id":"lE48ffshgo","value":"d0a2f1d0-b481-11e7-a8f7-d1677c94aba6-web.jpg","url":"https://cdn.cosmicjs.com/d0a2f1d0-b481-11e7-a8f7-d1677c94aba6-web.jpg","imgix_url":"https://imgix.cosmicjs.com/d0a2f1d0-b481-11e7-a8f7-d1677c94aba6-web.jpg"},{"children":null,"type":"html-textarea","title":"Code Example","key":"code_example","id":"eQbS4oAjwQ","value":""},{"children":null,"type":"text","title":"SEO Title","key":"seo_title","id":"4iLivrW8jI","value":"Best Headless CMS for Web"},{"children":[],"type":"repeater","title":"Videos","key":"videos","id":"2ypLu3jpfL","value":"","repeater_fields":[{"title":"Title","key":"title","value":"","type":"text","required":false},{"title":"Link","key":"link","value":"","type":"text","required":false}]},{"children":null,"type":"text","title":"Apps Search Term","key":"apps_search_term","id":"0j2XD9Gog1","value":""},{"children":null,"type":"text","title":"Articles Search Term","key":"articles_search_term","id":"8RgqbG1UTr","value":""},{"children":null,"type":"text","title":"Page Overview Title","key":"page_overview_title","id":"gj036836gx4c73fpdjzb","value":""},{"children":null,"type":"html-textarea","title":"Page Overview","key":"page_overview","id":"iSVFzvAn9h","value":""},{"children":null,"type":"html-textarea","title":"SEO Content","key":"seo_content","id":"lcsUSsZiB9","value":""},{"children":[],"type":"repeater","title":"Apps","key":"apps","id":"dkpxmwigd1z8x4ants9f","value":"","repeater_fields":[{"title":"App Slug","key":"app_slug","value":"","type":"text","required":false}]},{"children":[],"type":"repeater","title":"Articles","key":"articles","id":"dwil4bqojngnkej4v85k","value":"","repeater_fields":[{"title":"Article Slug","key":"article_slug","value":"","type":"text","required":false}]}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"kb-articles","created":"2017-10-19T03:50:16.379Z","created_at":"2017-10-19T03:50:16.379Z","modified_at":"2021-03-22T17:33:34.823Z","created_by":"5357ef811693be2118000001","modified_by":"5357ef811693be2118000001","status":"published","publish_at":null,"order":25,"published_at":"2021-03-22T17:33:34.823Z","unpublish_at":null,"metadata":{"image":{"url":"https://cdn.cosmicjs.com/e9b89b20-b481-11e7-a8f7-d1677c94aba6-web.svg","imgix_url":"https://imgix.cosmicjs.com/e9b89b20-b481-11e7-a8f7-d1677c94aba6-web.svg"},"thumbnail":{"url":"https://cdn.cosmicjs.com/e9b89b20-b481-11e7-a8f7-d1677c94aba6-web.svg","imgix_url":"https://imgix.cosmicjs.com/e9b89b20-b481-11e7-a8f7-d1677c94aba6-web.svg"},"blurb":"

Cosmic is the best CMS for websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

","headline":"Web","seo_description":"Cosmic is the best CMS for websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.","twitter_card_image":{"url":"https://cdn.cosmicjs.com/d0a2f1d0-b481-11e7-a8f7-d1677c94aba6-web.jpg","imgix_url":"https://imgix.cosmicjs.com/d0a2f1d0-b481-11e7-a8f7-d1677c94aba6-web.jpg"},"code_example":"","seo_title":"Best Headless CMS for Web","videos":[],"apps_search_term":"","articles_search_term":"","page_overview_title":"","page_overview":"","seo_content":"","apps":[],"articles":[]}},{"_id":"5d49e2e57b300f1becd98168","slug":"headless-cms-react","title":"Headless CMS + React","content":"

Manage content for your React apps using the Cosmic JS Headless CMS. Teams use the Cosmic JS Headless CMS to model and create content for their React Websites and apps because of its intuitive Headless CMS Dashboard and easy API integration tools. Get started by installing the Cosmic JS NPM Module.

What is a Headless CMS?

Headless CMS Software works by providing non-technical editors with a Dashboard UI to model, create and publish content while providing developers with API tools and resources to integrate content with any website or app. By decoupling content from code, teams create a central content repository that can power all of their content-powered applications. 

","metafields":[{"value":"Headless CMS + React","key":"solution_name","title":"Solution Name","type":"text","children":null},{"value":"53b8dd50-b9ee-11e9-b724-edc563ff7e5b-68747470733a2f2f636f736d69632d73332e696d6769782e6e65742f37303038616332302d326364612d313165392d383839392d3633386332373531636363352d72656163742d636f736d69632e6a70673f773d31353030.jpg","key":"image","title":"Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/53b8dd50-b9ee-11e9-b724-edc563ff7e5b-68747470733a2f2f636f736d69632d73332e696d6769782e6e65742f37303038616332302d326364612d313165392d383839392d3633386332373531636363352d72656163742d636f736d69632e6a70673f773d31353030.jpg","imgix_url":"https://imgix.cosmicjs.com/53b8dd50-b9ee-11e9-b724-edc563ff7e5b-68747470733a2f2f636f736d69632d73332e696d6769782e6e65742f37303038616332302d326364612d313165392d383839392d3633386332373531636363352d72656163742d636f736d69632e6a70673f773d31353030.jpg"},{"object_type":"case-studies","value":"59f49a7cee2adb545c0005bc,5bd206599dca8d10e941b69b,5bd88cc2dcf8c4248f3ccc4b","key":"case_studies","title":"Case Studies","type":"objects","children":null,"objects":[{"_id":"59f49a7cee2adb545c0005bc","slug":"life-is-good-shares-gratitude","title":"Life is Good Shares Gratitude","content":"

The Life is Good community shares one simple, unifying mission: to spread the power of optimism. In that spirit, the Life is Good team built a Gratitude Wall for some user-generated-thanksgiving. This widget will allow users to add "sticky notes" with their name and what they are grateful for to the gratitude board. 



The Gratitude Wall is adapted from the Cosmic Sticky Notes App, built on React, Redux and Node.js. The Wall is currently running on Heroku and is i-framed into WordPress on its landing page. The Life is Good team also built a simple moderation application so that their team can easily approve or delete User Generated Content as it flows in. They also built client-side moderation during content entry, which checks against a banned list of words and blocks submission.



"Cosmic provided us with a robust scaffolding to accept, store, and moderate User Generated Content and display it in a custom web app in real time. With Cosmic, we were able to develop an MVP in a matter of hours and focus our resources on UX and design versus content management. The Cosmic Support Team was extremely helpful throughout the process. We’re excited to leverage these tools again for future projects.”

— Chris Schwab, Front End Engineer  

","metafields":[{"value":"Life is Good","key":"company","title":"Company","type":"text","children":null},{"value":"Ecommerce | Apparel","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Spread the power of optimism. In that spirit, the Life is Good team built a Gratitude Wall for some user-generated-thanksgiving. This widget will allow users to add \"sticky notes\" with their name and what they are grateful for to the gratitude board. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg","imgix_url":"https://imgix.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2017-10-28T14:55:56.103Z","created_by":"5716b504e9c686d006000073","created":"2017-10-28T14:55:56.103Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2019-07-25T21:53:35.289Z"},{"_id":"5bd206599dca8d10e941b69b","slug":"derive-systems-runs-on-cosmic-js","title":"Derive Systems runs on Cosmic","content":"

Derive Systems  is a leading automotive technology company with over 2 million software installations powering upgraded experiences for drivers on the road today. Derive  connects vehicles and their engines to the digital world, enabling individuals and fleets to take control and optimize for performance, fuel efficiency, safety, and more. 



The team at Derive Systems was in search of a headless CMS that would give their developers flexibility out-of-the-box while enabling their content managers to manage content in a familiar and modern CMS Dashboard. They chose Cosmic due to its easy content modeling tools for their Blog, Press, About and Team Sections. Derive now runs a Next.js, React and Express framework that utilizes the Cosmic GraphQL API to deliver its content.




“Leveraging the Cosmic GraphQL API allows for easy updates to our news and blog, while keeping payloads small and fast. Integration with Cosmic could not be easier thanks to their great support. We look forward to developing more features on the platform.”


— Dustin Brink, Front End Developer at Derive Systems 

","metafields":[{"value":"Derive Systems","key":"company","title":"Company","type":"text","children":null},{"value":"Automotive","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Derive Systems  is a leading automotive technology company with over 2 million software installations powering upgraded experiences for drivers on the road today. Derive  connects vehicles and their engines to the digital world, enabling individuals and fleets to take control and optimize for performance, fuel efficiency, safety, and more. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"60aac7a0-ded7-11e8-86d0-2998be663226-derive.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/60aac7a0-ded7-11e8-86d0-2998be663226-derive.jpg","imgix_url":"https://imgix.cosmicjs.com/60aac7a0-ded7-11e8-86d0-2998be663226-derive.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2018-10-25T18:07:21.426Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-11-15T14:51:19.007Z"},{"_id":"5bd88cc2dcf8c4248f3ccc4b","slug":"tripwire-interactive-builds-a-react-corporate-website","title":"Tripwire Interactive Builds a React Corporate Website","content":"

Tripwire Interactive is an entertainment software developer and publisher founded in 2005 by the award-winning mod team and winners of the 2004 edition of the “$1,000,000 Make Something Unreal” competition.



Gamers want games that grab their attention and will keep them coming back for more. Tripwire Interactive has been producing those types of games since the first Red Orchestra mod that won the "Make Something Unreal" competition in 2004. Since then Tripwire has won numerous Multiplayer and FPS Game of the Year awards from top editorial sites and millions have played a Red Orchestra or Killing Floor game, with an average play time of over 40 hours, per player, per game! 



Historically using an Umbraco system, The Tripwire Interactive team needed an easy way for their marketers to maintain marketing website content for their games' parent brand. Each new game needed a dedicated landing page with marketing content. Blog,\r\nCareer and Press feeds needed to be managed by the marketing team without bottlenecking the developers. The Tripwire Interactive team chose Cosmic as their dynamic content management solution as they built their new corporate website on a modern React\r\nstack. 


"Cosmic allowed us to easily integrate a secure and fast back-end API into our React app. Cosmic fit our needs with its simple web-based dashboard so that members of our marketing team can create, edit, and delete new content on the fly. Our team\r\nhas been enjoying the ease of use with the new system."

— Owen Liversidge, Lead Developer


","metafields":[{"value":"Tripwire Interactive","key":"company","title":"Company","type":"text","children":null},{"value":"Gaming","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Gamers want games that grab their attention and will keep them coming back for more. Tripwire Interactive has been producing those types of games since the first Red Orchestra mod that won the \"Make Something Unreal\" competition in 2004. Since then Tripwire has won numerous Multiplayer and FPS Game of the Year awards from top editorial sites and millions have played a Red Orchestra or Killing Floor game, with an average play time of over 40 hours, per player, per game! \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"bcc07550-dc64-11e8-a330-792a8fc6e55e-u7wjhcn6_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/bcc07550-dc64-11e8-a330-792a8fc6e55e-u7wjhcn6_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/bcc07550-dc64-11e8-a330-792a8fc6e55e-u7wjhcn6_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2018-10-30T16:54:26.538Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-11-08T20:12:40.566Z"}]},{"repeater_fields":"\"\"\"\"\"\"\"\"\"[{\"title\":\"Slug\",\"key\":\"slug\",\"value\":\"\",\"type\":\"text\",\"required\":false}]\"\"\"\"\"\"\"\"\"","value":"simple-react-blog","key":"app_slugs","title":"App Slugs","type":"repeater","children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"simple-react-blog","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"appointment-scheduler","type":"text","required":false}]}]},{"repeater_fields":"\"\"\"\"\"\"\"\"\"[{\"title\":\"Slug\",\"key\":\"slug\",\"value\":\"\",\"type\":\"text\",\"required\":false}]\"\"\"\"\"\"\"\"\"","value":"imgix-editor","key":"extension_slugs","title":"Extension Slugs","type":"repeater","children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"imgix-editor","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"export-to-csv","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"mux-videos","type":"text","required":false}]}]},{"key":"testimonial","title":"Testimonial","type":"html-textarea","children":null,"value":"

"Cosmic JS allowed us to easily integrate a secure and fast back-end API into our React app. Cosmic fit our needs with its simple web-based dashboard so that members of our marketing team can create, edit, and delete new content on the fly. Our team has been enjoying the ease of use with the new system."

"},{"value":"Owen Liversidge, Lead Developer at Tripwire Interactive","key":"testimonial_credit","title":"Testimonial Credit","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"solutions","created":"2019-08-06T20:28:21.350Z","created_at":"2019-07-08T15:03:43.051Z","modified_at":"2019-08-08T15:09:11.487Z","status":"published","locale":null,"published_at":"2019-08-08T15:09:11.487Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"order":25,"metadata":{"solution_name":"Headless CMS + React","image":{"url":"https://cdn.cosmicjs.com/53b8dd50-b9ee-11e9-b724-edc563ff7e5b-68747470733a2f2f636f736d69632d73332e696d6769782e6e65742f37303038616332302d326364612d313165392d383839392d3633386332373531636363352d72656163742d636f736d69632e6a70673f773d31353030.jpg","imgix_url":"https://imgix.cosmicjs.com/53b8dd50-b9ee-11e9-b724-edc563ff7e5b-68747470733a2f2f636f736d69632d73332e696d6769782e6e65742f37303038616332302d326364612d313165392d383839392d3633386332373531636363352d72656163742d636f736d69632e6a70673f773d31353030.jpg"},"case_studies":[{"_id":"59f49a7cee2adb545c0005bc","slug":"life-is-good-shares-gratitude","title":"Life is Good Shares Gratitude","content":"

The Life is Good community shares one simple, unifying mission: to spread the power of optimism. In that spirit, the Life is Good team built a Gratitude Wall for some user-generated-thanksgiving. This widget will allow users to add "sticky notes" with their name and what they are grateful for to the gratitude board. 



The Gratitude Wall is adapted from the Cosmic Sticky Notes App, built on React, Redux and Node.js. The Wall is currently running on Heroku and is i-framed into WordPress on its landing page. The Life is Good team also built a simple moderation application so that their team can easily approve or delete User Generated Content as it flows in. They also built client-side moderation during content entry, which checks against a banned list of words and blocks submission.



"Cosmic provided us with a robust scaffolding to accept, store, and moderate User Generated Content and display it in a custom web app in real time. With Cosmic, we were able to develop an MVP in a matter of hours and focus our resources on UX and design versus content management. The Cosmic Support Team was extremely helpful throughout the process. We’re excited to leverage these tools again for future projects.”

— Chris Schwab, Front End Engineer  

","metafields":[{"value":"Life is Good","key":"company","title":"Company","type":"text","children":null},{"value":"Ecommerce | Apparel","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Spread the power of optimism. In that spirit, the Life is Good team built a Gratitude Wall for some user-generated-thanksgiving. This widget will allow users to add \"sticky notes\" with their name and what they are grateful for to the gratitude board. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg","imgix_url":"https://imgix.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2017-10-28T14:55:56.103Z","created_by":"5716b504e9c686d006000073","created":"2017-10-28T14:55:56.103Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2019-07-25T21:53:35.289Z","metadata":{"company":"Life is Good","industry_type":"Ecommerce | Apparel","teaser":"Spread the power of optimism. In that spirit, the Life is Good team built a Gratitude Wall for some user-generated-thanksgiving. This widget will allow users to add \"sticky notes\" with their name and what they are grateful for to the gratitude board. \n","logo":{"url":"https://cdn.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg","imgix_url":"https://imgix.cosmicjs.com/f4a49350-cbcd-11e7-a6a6-dd74447b4615-life-is-good.jpg"}}},{"_id":"5bd206599dca8d10e941b69b","slug":"derive-systems-runs-on-cosmic-js","title":"Derive Systems runs on Cosmic","content":"

Derive Systems  is a leading automotive technology company with over 2 million software installations powering upgraded experiences for drivers on the road today. Derive  connects vehicles and their engines to the digital world, enabling individuals and fleets to take control and optimize for performance, fuel efficiency, safety, and more. 



The team at Derive Systems was in search of a headless CMS that would give their developers flexibility out-of-the-box while enabling their content managers to manage content in a familiar and modern CMS Dashboard. They chose Cosmic due to its easy content modeling tools for their Blog, Press, About and Team Sections. Derive now runs a Next.js, React and Express framework that utilizes the Cosmic GraphQL API to deliver its content.




“Leveraging the Cosmic GraphQL API allows for easy updates to our news and blog, while keeping payloads small and fast. Integration with Cosmic could not be easier thanks to their great support. We look forward to developing more features on the platform.”


— Dustin Brink, Front End Developer at Derive Systems 

","metafields":[{"value":"Derive Systems","key":"company","title":"Company","type":"text","children":null},{"value":"Automotive","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Derive Systems  is a leading automotive technology company with over 2 million software installations powering upgraded experiences for drivers on the road today. Derive  connects vehicles and their engines to the digital world, enabling individuals and fleets to take control and optimize for performance, fuel efficiency, safety, and more. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"60aac7a0-ded7-11e8-86d0-2998be663226-derive.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/60aac7a0-ded7-11e8-86d0-2998be663226-derive.jpg","imgix_url":"https://imgix.cosmicjs.com/60aac7a0-ded7-11e8-86d0-2998be663226-derive.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2018-10-25T18:07:21.426Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-11-15T14:51:19.007Z","metadata":{"company":"Derive Systems","industry_type":"Automotive","teaser":"Derive Systems  is a leading automotive technology company with over 2 million software installations powering upgraded experiences for drivers on the road today. Derive  connects vehicles and their engines to the digital world, enabling individuals and fleets to take control and optimize for performance, fuel efficiency, safety, and more. \n","logo":{"url":"https://cdn.cosmicjs.com/60aac7a0-ded7-11e8-86d0-2998be663226-derive.jpg","imgix_url":"https://imgix.cosmicjs.com/60aac7a0-ded7-11e8-86d0-2998be663226-derive.jpg"}}},{"_id":"5bd88cc2dcf8c4248f3ccc4b","slug":"tripwire-interactive-builds-a-react-corporate-website","title":"Tripwire Interactive Builds a React Corporate Website","content":"

Tripwire Interactive is an entertainment software developer and publisher founded in 2005 by the award-winning mod team and winners of the 2004 edition of the “$1,000,000 Make Something Unreal” competition.



Gamers want games that grab their attention and will keep them coming back for more. Tripwire Interactive has been producing those types of games since the first Red Orchestra mod that won the "Make Something Unreal" competition in 2004. Since then Tripwire has won numerous Multiplayer and FPS Game of the Year awards from top editorial sites and millions have played a Red Orchestra or Killing Floor game, with an average play time of over 40 hours, per player, per game! 



Historically using an Umbraco system, The Tripwire Interactive team needed an easy way for their marketers to maintain marketing website content for their games' parent brand. Each new game needed a dedicated landing page with marketing content. Blog,\r\nCareer and Press feeds needed to be managed by the marketing team without bottlenecking the developers. The Tripwire Interactive team chose Cosmic as their dynamic content management solution as they built their new corporate website on a modern React\r\nstack. 


"Cosmic allowed us to easily integrate a secure and fast back-end API into our React app. Cosmic fit our needs with its simple web-based dashboard so that members of our marketing team can create, edit, and delete new content on the fly. Our team\r\nhas been enjoying the ease of use with the new system."

— Owen Liversidge, Lead Developer


","metafields":[{"value":"Tripwire Interactive","key":"company","title":"Company","type":"text","children":null},{"value":"Gaming","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Gamers want games that grab their attention and will keep them coming back for more. Tripwire Interactive has been producing those types of games since the first Red Orchestra mod that won the \"Make Something Unreal\" competition in 2004. Since then Tripwire has won numerous Multiplayer and FPS Game of the Year awards from top editorial sites and millions have played a Red Orchestra or Killing Floor game, with an average play time of over 40 hours, per player, per game! \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"bcc07550-dc64-11e8-a330-792a8fc6e55e-u7wjhcn6_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/bcc07550-dc64-11e8-a330-792a8fc6e55e-u7wjhcn6_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/bcc07550-dc64-11e8-a330-792a8fc6e55e-u7wjhcn6_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2018-10-30T16:54:26.538Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-11-08T20:12:40.566Z","metadata":{"company":"Tripwire Interactive","industry_type":"Gaming","teaser":"Gamers want games that grab their attention and will keep them coming back for more. Tripwire Interactive has been producing those types of games since the first Red Orchestra mod that won the \"Make Something Unreal\" competition in 2004. Since then Tripwire has won numerous Multiplayer and FPS Game of the Year awards from top editorial sites and millions have played a Red Orchestra or Killing Floor game, with an average play time of over 40 hours, per player, per game! \n","logo":{"url":"https://cdn.cosmicjs.com/bcc07550-dc64-11e8-a330-792a8fc6e55e-u7wjhcn6_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/bcc07550-dc64-11e8-a330-792a8fc6e55e-u7wjhcn6_400x400.jpg"}}}],"app_slugs":[{"slug":"simple-react-blog"},{"slug":"appointment-scheduler"}],"extension_slugs":[{"slug":"imgix-editor"},{"slug":"export-to-csv"},{"slug":"mux-videos"}],"testimonial":"

"Cosmic JS allowed us to easily integrate a secure and fast back-end API into our React app. Cosmic fit our needs with its simple web-based dashboard so that members of our marketing team can create, edit, and delete new content on the fly. Our team has been enjoying the ease of use with the new system."

","testimonial_credit":"Owen Liversidge, Lead Developer at Tripwire Interactive"}},{"_id":"5f185ed583b9890008323634","order":25,"slug":"headless-commerce","title":"Headless Commerce: Delivering powerful content-driven commerce experiences","content":"

\"headless

Headless commerce — or headless eCommerce — is an API-first commerce architecture where the front end and the back end work as two separate systems connected only with APIs. 

In other words: 

There's no single "platform" the architecture runs on that powers both the front end and the back end. 

Instead, a host of different solution providers power each. 

The vendors that serve the front end focus on delivering the best-in-class experiences to consumers no matter what screen, channel, or device they're engaging with: a website, a mobile app, or an IoT device like an interactive kiosk. 

Likewise, on the back end, another set of vendors work to deliver services like billing, inventory management, customer support, cataloging, fulfillment and others. 

And ALL the data orchestration between the vendors happens via APIs. 

Let's now see in detail what headless commerce is all about. In this guide:

  1. Demystifying the headless commerce architecture
  2. The benefits of a headless commerce architecture
  3. Building a headless commerce architecture using all-in-one eCommerce platforms like Shopify
  4. Building a headless commerce architecture with traditional CMSes like WordPress
  5. Building a headless commerce architecture using a headless commerce solution (and a headless CMS)
  6. Choosing the right headless commerce architecture for your business

To really understand headless commerce, contrast how a headless commerce architecture works with the workings of a legacy commerce solution — SAP Commerce, for instance. 

Below, you can see SAP Commerce's basic architecture. As you can tell, it's "very SAP." Sure, if you use it, you'll be able to use APIs for a host of things and extend functionalities using SAP modules and extensions and so on… but your system will still stay "very SAP" and you'll still stay boxed in the platform's architecture:

\"Monolithic

Image source


With headless commerce, you can break free of these monolithic architectures and the constraints that come with it.


Demystifying the headless commerce architecture

If a headless commerce architecture is "100 percent headless" — yes, there's a degree of how headless a headless commerce architecture can be — it will work solely via APIs.

But as Brandon Shaik, a research associate with Forrester, explains, commerce solution providers can be at different levels of "headlessness." 

Shaik explains that a lot of commerce tech stack vendors loosely call their solutions headless, but instead of an architecture that runs fully on APIs, they only offer varying degrees of DECOUPLING of the front and back ends.

\"Types

Image source


A lot of vendors don't actually even need 100% API-driven architectures to go headless and can reap all the benefits of headless commerce with some degree of decoupling. 

But why would a merchant want to decouple their front and back ends in the first place?


The benefits of a headless commerce architecture

There are many benefits of going with a headless commerce architecture where the front and back ends are decoupled. Here are a few key ones.

First, you get a development tech stack that supports speed and performance. Most headless commerce architectures let you build storefronts using speed-optimized technologies rather than the standard themes eCommerce solutions come with. This results in experiences that load in a flash. You can also choose different solution providers for your back end ops.

You also get to deliver faster, native-like shopping experiences everywhere. One of the biggest reasons driving merchants to go headless is the need for extending native-like experiences everywhere, i.e., on every touchpoint right from your Facebook shop page to a phablet. 

And even unparalleled experimentation and agility. Many A/B tests and conversion rate experiments are simple cosmetic changes to what users see. By decoupling the front and back ends, creating the build for such experiments gets a lot faster. Also, you don't risk breaking the back end as you never "touch" it in decoupled architectures. Launching new features, too, is easy because of this reason, and also because you can build upon any technology that meets your needs.

Above all these, a headless architecture also lets you power your content experiences with a content management system of your choice and not the one that comes bundled with your eCommerce solution provider. Producing better content faster… shipping\r\nit sooner… and showing it seamlessly across different channels with a simple API-based system are what you get with this!

So what are your options for building a headless commerce architecture that gets you these benefits? 

Well… if you're looking to replatform your business and move toward a headless commerce architecture, you essentially have three options:

  1. Using an all-in-one platform like Shopify.

  2. Using a traditional CMS like WordPress.

  3. Using a headless commerce solution (and a headless CMS solution).

Let’s explore the details of each.


Building a headless commerce architecture using all-in-one eCommerce platforms like Shopify

Seeing the need for headless commerce architectures that help vendors deliver immersive and complex multi-channel and multi-touchpoint experiences, many mainstream eCommerce solution providers like Shopify and BigCommerce launched their own headless solutions.

Cart solution providers, too, started supporting headless setups.

These solutions let you decouple the front and back ends and choose the technologies you want to use at each end and facilitate the working via APIs. 

Many merchants go with this option for their building headless commerce architectures as they don't have to start from scratch putting it together. Instead, they get to build upon a robust framework and get full freedom with the technologies they\r\nwant to use for their different functions.

Here's a zoomed-in view of how a merchant — Koala — realized a headless commerce architecture with Shopify: (Notice that you've two visibly decoupled front and back ends.)

\"A

Image source


Koala shares that it uses as many as EIGHT different solution providers for its back end ops: 

Without a headless commerce architecture, Koala would have had to stick to EVERYTHING Shopify. 

Now, you can imagine how the shopping experiences powered by the best-in-class solutions for eight key functions might be better than the ones offered by a legacy solution (no matter how good the legacy solution might be as a whole!).

Also, note that while Shopify comes with its own CMS, this merchant chose to go with a third-party CMS. 

In fact, many merchants who take this route for their headless commerce architectures go with third-party headless CMSes instead of the default ones.

And that's because headless CMSes shine at driving content-driven eCommerce experiences. (More on this below.) 

Here's another interesting headless commerce architecture that uses BigCommerce but a traditional CMS (WordPress) with it:

\"A

Image source


Building a headless commerce architecture with traditional CMSes like WordPress

Seeing the need for headless commerce, even classic CMSes like WordPress, Drupal, Magento and others introduced means for headless execution.

WordPress and Drupal did it by launching REST APIs. 

Magento, on the other hand, extended support for headless architectures with APIs facilitating integrations, a progressive web app building studio, and support for delivering optimized experiences along multichannel, multi-touchpoint and complex buying\r\njourneys via integration with Adobe Experiences (also, its parent company).

Below, you can see how a traditional CMS (Drupal) is positioned in a headless execution setup. You have Drupal sitting at the center of the headless tech stack managing and serving content to support the front end for different devices and channels:

\"Drupal

Image source


In a traditional setup, though, the back end and the front end would be tightly coupled:

\"Drupal

Image source


As you can see, more than headlessness, this is simply decoupling of a traditional CMS's front end from its back end. 

Decoupling a traditional CMS and trying to make it work in a headless environment can be challenging. The diagram shown below explains how you can achieve different degrees of decoupling for your Drupal traditional CMS if you wanted to go headless with it:

\"Decoupling

Image source


As you can tell, this would involve a lot of re-engineering. And even then, the stack's future development wouldn't be purely API-based.

Because traditional CMSes aren't headless-first by design, many businesses that go headless don't go with decoupling CMSes like above. 

Instead, the natural choices for headless commerce architectures are headless CMSes.

A headless CMS is designed for API- or microservices-driven headless commerce architectures and offers the headless commerce stack:

Cosmic, our headless CMS, for instance, sits seamlessly at the heart of a headless commerce tech stack and facilitates the content ops — right from production to delivery.

If you wanted, you could use Shopify for the commerce part of your business but Cosmic — with its powerful content management features — for delivering the content experiences. 

In such a system, you could also build your own personalization engine (with say, Angular) and bake it right into your content management via the CMS's support for APIs.

Or, you could use Vue JS for building a clean UI and override what Shopify comes with. 

Because Cosmic is an API-first headless CMS, you could use it with 100 percent custom front and back ends as well. 

But it's not just the API-powered design that works for a headless CMS when compared to a decoupled one for a headless commerce architecture. Its content possibilities, do, too. 

In fact, many merchants who switched to our headless CMS solution to power the content experiences in their headless commerce architectures came for our content production and rendering capabilities… and not only because they wanted to use our\r\nAPI to develop a front end with a certain tech stack. 


Building a headless commerce architecture using a headless commerce solution (and a headless CMS)

Most of the traditional eCommerce platforms like Shopify and BigCommerce and CMSes like WordPress launched their headless offerings as the need emerged. 

Natively, none of these platforms were built for supporting headless commerce architectures.

But 100% headless first commerce solutions like commercetools are.

These headless-first commerce tech solutions are designed from scratch to support microservices-based architectures that can support seamless and futureproof headless commerce setups at scale. 

Below, you've one such headless commerce solution where the front end is separated from the back end. You can see the headless commerce solution supporting practically endless "heads" (web shops, social commerce, car commerce, apps, etc.)\r\non the front end and powering all the core commerce operations like managing product, order, and customer data, maintaining catalogs, etc. on the back end:


\"A

Image source


One thing to note here is that headless commerce solutions are geared more toward the commerce side of the commerce tech stack… and not so much into content experiences. 

That's why they offer integrations (API-based, of course!) with a host of headless CMSes with the headless CMSes taking charge of the content experiences.

As you can conclude from the approaches to a headless commerce architecture discussed above, you basically get to choose between 1) adopting progressive decoupling or 2) going fully headless. 

Both have their place.


Choosing the right headless commerce architecture for your business

Many merchants don't go with fully headless architectures.

They don't even need to.

Instead, they go with a progressive decoupling approach: one that uses a platform like Shopify (or some of the eCommerce engines traditional CMSes come with) for the commerce part and a headless CMS like Cosmic for the content part.

They end up building a bespoke headless eCommerce website powered by an eCommerce platform and a headless CMS.

The best part is that it still keeps them ahead of the curve.

Shopify and similar platforms offer state-of-the-art commerce functionalities. 

And a headless CMS like Cosmic offers robust content production and rendering capabilities. Think unparalleled possibilities for creating beautiful product landing pages, general product pages, help centers, sales campaign collaterals, and much, much more. 

The commerce + content functionality you get in such a system is as flexible and powerful as you'd like it to be.

Also, while a headless commerce architecture — in whatever capacity — is a natural upgrade for most businesses, it doesn't come without its challenges. It isn't for everyone either. 

The question to move to one (whether it's a purely headless commerce architecture or simply a decoupled one) really comes down to how good you want to get at offering your users personalized, fast, and consistent commerce (shopping) and content experiences\r\nacross their long and winding omnichannel buying journeys… and improve your lifetime value.

P.S If you're considering building a decoupled or headless commerce architecture, check out Cosmic to power your content ops.

Photo by Paul Felberbauer on Unsplash

","metafields":[{"children":null,"type":"object","title":"Author","key":"author","id":"WEbiN3twqg","value":"5f185e5ba4ce590007de290b","object_type":"authors","object":{"_id":"5f185e5ba4ce590007de290b","slug":"disha","title":"Disha Sharma","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"IbUug3RuT1","value":"disha"},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"QhOaNP5Nw8","value":"f2c65180-d8cd-11ea-8d02-d3e2c968eb26-disha.png","url":"https://cdn.cosmicjs.com/f2c65180-d8cd-11ea-8d02-d3e2c968eb26-disha.png","imgix_url":"https://imgix.cosmicjs.com/f2c65180-d8cd-11ea-8d02-d3e2c968eb26-disha.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2020-07-22T15:42:19.367Z","created_by":"5357ef811693be2118000001","modified_at":"2020-09-14T17:45:18.405Z","created":"2020-07-22T15:42:19.367Z","status":"published","published_at":"2020-08-07T16:49:29.355Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"thumbnail":"https://imgix.cosmicjs.com/f2c65180-d8cd-11ea-8d02-d3e2c968eb26-disha.png"}},{"children":null,"type":"html-textarea","title":"Teaser","key":"teaser","id":"uFq1bEynjq","value":"

What is headless commerce? What does a headless commerce architecture look like? And how do you build one? And do you need to in the first place? Get all your headless commerce questions answered right here.

"},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"qTuF1XF0Qs","value":"a943ec80-ccfb-11ea-b44f-f5c7da208e23-headless-commerce.jpg","url":"https://cdn.cosmicjs.com/a943ec80-ccfb-11ea-b44f-f5c7da208e23-headless-commerce.jpg","imgix_url":"https://imgix.cosmicjs.com/a943ec80-ccfb-11ea-b44f-f5c7da208e23-headless-commerce.jpg"},{"children":null,"type":"textarea","title":"SEO Meta Description","key":"seo_meta_description","id":"s7KkVoK5sq","value":"Wondering what the headless commerce architecture is all about? Or looking to transition to one? Find out what it is and three ways you can make the move."},{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"JPE9hUyKjK","value":"2020-07-28"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2020-07-22T15:44:21.855Z","created_by":"5f0c7f8c268459000855ccff","modified_at":"2020-09-16T18:52:19.373Z","created":"2020-07-22T15:44:21.855Z","status":"published","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2020-08-10T16:59:31.208Z","thumbnail":"https://imgix.cosmicjs.com/a943ec80-ccfb-11ea-b44f-f5c7da208e23-headless-commerce.jpg","metadata":{"author":{"_id":"5f185e5ba4ce590007de290b","slug":"disha","title":"Disha Sharma","content":"","metafields":[{"children":null,"type":"text","title":"Username","key":"username","id":"IbUug3RuT1","value":"disha"},{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"QhOaNP5Nw8","value":"f2c65180-d8cd-11ea-8d02-d3e2c968eb26-disha.png","url":"https://cdn.cosmicjs.com/f2c65180-d8cd-11ea-8d02-d3e2c968eb26-disha.png","imgix_url":"https://imgix.cosmicjs.com/f2c65180-d8cd-11ea-8d02-d3e2c968eb26-disha.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2020-07-22T15:42:19.367Z","created_by":"5357ef811693be2118000001","modified_at":"2020-09-14T17:45:18.405Z","created":"2020-07-22T15:42:19.367Z","status":"published","published_at":"2020-08-07T16:49:29.355Z","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"thumbnail":"https://imgix.cosmicjs.com/f2c65180-d8cd-11ea-8d02-d3e2c968eb26-disha.png","metadata":{"username":"disha","profile_picture":{"url":"https://cdn.cosmicjs.com/f2c65180-d8cd-11ea-8d02-d3e2c968eb26-disha.png","imgix_url":"https://imgix.cosmicjs.com/f2c65180-d8cd-11ea-8d02-d3e2c968eb26-disha.png"}}},"teaser":"

What is headless commerce? What does a headless commerce architecture look like? And how do you build one? And do you need to in the first place? Get all your headless commerce questions answered right here.

","featured_image":{"url":"https://cdn.cosmicjs.com/a943ec80-ccfb-11ea-b44f-f5c7da208e23-headless-commerce.jpg","imgix_url":"https://imgix.cosmicjs.com/a943ec80-ccfb-11ea-b44f-f5c7da208e23-headless-commerce.jpg"},"seo_meta_description":"Wondering what the headless commerce architecture is all about? Or looking to transition to one? Find out what it is and three ways you can make the move.","published_date":"2020-07-28"}},{"_id":"5e45b1bfed7e1d0007159866","order":25,"slug":"gatsby-image-support-and-unpublish-later","title":"Gatsby Image support and Unpublish later","content":"

We're happy to announce the support of Gatsby Image in the Cosmic source plugin. The update enables you to utilize Gatsby’s native image processing capabilities to optimize image loading for your sites. In addition to that, we've also released a feature that allows content\r\ncreators to unpublish content automatically at a later date and time.


1. Gatsby Image Plugin Support

What you need to know
There are no breaking changes, the Gatsby source plugin now has a next tag which you can use to test the new integration.
TL;DR
Get the new code
Download an example

The updates
Before this release, you didn't have the ability to use the awesome Gatsby Image plugin along with the Cosmic source plugin. But with this release, you now have the option to download selected media from Cosmic to save and cache locally. It will then use Gatsby’s native image processing capabilities with advanced image loading techniques to easily optimize image loading for your sites. 

You can install the plugin using  npm i gatsby-source-cosmicjs@next. 

Documentation is available here. You can also check our Gatsby Blog example here to look at the usage.

You can now do queries like this:

Note: It is in beta so your feedback is very important!


2. Unpublish Later

What you need to know
We had to simplify the layout of the publishing scheduler. If you were already using the publish later feature, you can see the video below to get an idea of what has changed.

The updates
We now provide the ability to unpublish your Objects at a specific day and time in the future. See the video below for details on how to set both scheduled "Publish" and "Unpublish" times. Minute increments have been changed from 15 minute to 5 minute increments to give you even more control of when your content is published and unpublished. To check this out, login and go to any Object in your Bucket. Then click the calendar icon connected to the "Publish" button.

We hope you enjoy these new features and updates. Any questions or comments? Reach out to us on Twitter and join the conversation on our Slack channel.

","metafields":[{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"h7nzqyxqw9","value":"2020-02-17"},{"children":null,"type":"object","title":"Author","key":"author","id":"GqyfS0EMHl","value":"599b30c44f629e3a5900010f","object_type":"authors","object":{"_id":"599b30c44f629e3a5900010f","slug":"jazib-sawar","title":"Jazib Sawar","content":"","metafields":[{"value":"d3261f20-1a9d-11ea-a8c4-6b69c807b1d7-12.jpg","id":"MoCJXLYqwC","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/d3261f20-1a9d-11ea-a8c4-6b69c807b1d7-12.jpg","imgix_url":"https://imgix.cosmicjs.com/d3261f20-1a9d-11ea-a8c4-6b69c807b1d7-12.jpg"},{"value":"jazibsawar","id":"","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-08-21T19:13:08.011Z","created_by":"5357ef811693be2118000001","created":"2017-08-21T19:13:08.011Z","status":"published","modified_at":"2020-09-15T15:41:11.076Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-12-09T16:06:31.900Z","thumbnail":"https://imgix.cosmicjs.com/d3261f20-1a9d-11ea-a8c4-6b69c807b1d7-12.jpg"}},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"qPNYl3LT4H","value":"1e1ff970-da33-11e9-80dd-0d9750a7211b-gatsby-cosmic.jpg","url":"https://cdn.cosmicjs.com/1e1ff970-da33-11e9-80dd-0d9750a7211b-gatsby-cosmic.jpg","imgix_url":"https://imgix.cosmicjs.com/1e1ff970-da33-11e9-80dd-0d9750a7211b-gatsby-cosmic.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"changelogs","created_at":"2019-10-28T20:03:47.995Z","created_by":"5357ef811693be2118000001","modified_at":"2020-08-10T13:59:43.225Z","created":"2020-02-13T20:29:51.395Z","status":"published","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-02-18T15:30:06.195Z","unpublish_at":null,"metadata":{"published_date":"2020-02-17","author":{"_id":"599b30c44f629e3a5900010f","slug":"jazib-sawar","title":"Jazib Sawar","content":"","metafields":[{"value":"d3261f20-1a9d-11ea-a8c4-6b69c807b1d7-12.jpg","id":"MoCJXLYqwC","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/d3261f20-1a9d-11ea-a8c4-6b69c807b1d7-12.jpg","imgix_url":"https://imgix.cosmicjs.com/d3261f20-1a9d-11ea-a8c4-6b69c807b1d7-12.jpg"},{"value":"jazibsawar","id":"","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-08-21T19:13:08.011Z","created_by":"5357ef811693be2118000001","created":"2017-08-21T19:13:08.011Z","status":"published","modified_at":"2020-09-15T15:41:11.076Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-12-09T16:06:31.900Z","thumbnail":"https://imgix.cosmicjs.com/d3261f20-1a9d-11ea-a8c4-6b69c807b1d7-12.jpg","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/d3261f20-1a9d-11ea-a8c4-6b69c807b1d7-12.jpg","imgix_url":"https://imgix.cosmicjs.com/d3261f20-1a9d-11ea-a8c4-6b69c807b1d7-12.jpg"},"username":"jazibsawar"}},"featured_image":{"url":"https://cdn.cosmicjs.com/1e1ff970-da33-11e9-80dd-0d9750a7211b-gatsby-cosmic.jpg","imgix_url":"https://imgix.cosmicjs.com/1e1ff970-da33-11e9-80dd-0d9750a7211b-gatsby-cosmic.jpg"}}},{"_id":"5b7459d0c1bc1201371ca1a3","order":25,"slug":"iron-dog-studio-launches-gaming-updates","title":"Iron Dog Studio Launches Gaming Updates ","content":"

Iron Dog Studio is the newest slots brand from the 1X2 Network. Focused on high production quality and unique features, Iron Dog Studio is passionate about creating new concepts that will entertain players, and believe that in doing so they will continue to share the fun with operators and players alike.


Iron Dog Studio

Built on: Angular | Cosmic


The Iron Dog Studio team needed a way to easily manage dynamic content for new integrations, press releases and game releases coupled with product information. Adopting Cosmic as their CMS API, the Iron Dog Studio team built scalable content models that satisfied their uses cases for press releases and other time-sensitive updates, all while maintaining a decoupled architecture that empowers each team member to work more efficiently together. 




"The ability to easily add new press releases and information to our website means we can always keep our clients and properties up to date without any hassle or bottlenecks. We can add and manage our own images, content and files and integrate them with Cosmic simply and efficiently.”

- Mary Penrose – Marketing and Operations Associate

","metafields":[{"value":"Iron Dog Studio","key":"company","title":"Company","type":"text","children":null},{"value":"Online Gaming","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Iron Dog Studio is the newest slots brand from the 1X2 Network. Focused on high production quality and unique features, Iron Dog Studio is passionate about creating new concepts that will entertain players, and believe that in doing so they will continue to share the fun with operators and players alike.\n\n\n\n\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"b9862c30-a0ab-11e8-acd1-c1a0a8802a67-HCAsPmbm_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/b9862c30-a0ab-11e8-acd1-c1a0a8802a67-HCAsPmbm_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/b9862c30-a0ab-11e8-acd1-c1a0a8802a67-HCAsPmbm_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-03-01T22:26:36.367Z","created_by":"5716b504e9c686d006000073","created":"2018-08-15T16:50:24.126Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-08-20T12:44:23.682Z","metadata":{"company":"Iron Dog Studio","industry_type":"Online Gaming","teaser":"Iron Dog Studio is the newest slots brand from the 1X2 Network. Focused on high production quality and unique features, Iron Dog Studio is passionate about creating new concepts that will entertain players, and believe that in doing so they will continue to share the fun with operators and players alike.\n\n\n\n\n","logo":{"url":"https://cdn.cosmicjs.com/b9862c30-a0ab-11e8-acd1-c1a0a8802a67-HCAsPmbm_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/b9862c30-a0ab-11e8-acd1-c1a0a8802a67-HCAsPmbm_400x400.jpg"}}},{"_id":"5e31c94f58d005000821006b","order":26,"slug":"graphql-api-v2-released","title":"GraphQL API v2 Released 🎉","content":"

We're happy to announce the newest version of our GraphQL API. The new Cosmic GraphQL API v2 includes some great updates and improvements which you can read\r\nabout below.


What you need to know
1. You can stay on v1, but updates and fixes will no longer be made to v1.
2. v2 includes mostly additions, but one breaking change to the getObjects  and getMedia  queries to enable pagination.


Playground
Demo for yourself in the playground. You can use the "Schema" and "Docs" right-side tabs to explore the Model and Queries.

View full page playground


Included in v2

1. Pagination support
You can now access the total and limit  properties from the API response. This gives you the ability to do pagination with the GraphQL API, which was previously not possible.

View full page playground


2. New Queries and Mutations
You can use the GraphQL API to get revisions from an Object as well as add new revisions without affecting the current published state of your Object.

getObjectRevisions
addObjectRevision


View full page playground


3. Deprecated Queries Removed
The following deprecated queries from v1 have been removed:
object
objects
objectsByType


4. Response Format Changes
To allow for the total and limit response, one breaking change had to be made. The response format for getObjects now follows the following format with all Objects moved into a second level objects.

View full page playground


And here's the old way for reference:

View full page playground


5. Search and Filter Options
One of the most loved new features in the REST API is filtering and searching by metadata. This is now available in the GraphQL API. For\r\nexample, to get Objects that by a certain author. You can do this:

View full page playground


Read more about these updates in the GraphQL documentation. We hope you enjoy these new features with the latest version of the GraphQL API. Any questions or comments? Reach out to us on Twitter and join the conversation on our Slack channel.

","metafields":[{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"BQPosxvX5s","value":"2020-02-04"},{"children":null,"type":"object","title":"Author","key":"author","id":"zdR2ui3bG7","value":"5768b253163172890e00002c","object_type":"authors","object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"64iVZ3v7FJ","value":"9ef206c0-46e8-11ea-b446-ab47a2e88c3b-cosmic-graphql.jpg","url":"https://cdn.cosmicjs.com/9ef206c0-46e8-11ea-b446-ab47a2e88c3b-cosmic-graphql.jpg","imgix_url":"https://imgix.cosmicjs.com/9ef206c0-46e8-11ea-b446-ab47a2e88c3b-cosmic-graphql.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"changelogs","created_at":"2020-01-29T18:05:03.683Z","created_by":"5357ef811693be2118000001","modified_at":"2020-08-10T13:59:43.225Z","created":"2020-01-29T18:05:03.683Z","status":"published","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-02-04T14:45:54.053Z","metadata":{"published_date":"2020-02-04","author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"featured_image":{"url":"https://cdn.cosmicjs.com/9ef206c0-46e8-11ea-b446-ab47a2e88c3b-cosmic-graphql.jpg","imgix_url":"https://imgix.cosmicjs.com/9ef206c0-46e8-11ea-b446-ab47a2e88c3b-cosmic-graphql.jpg"}}},{"_id":"59f21a4d34dbbd042a000337","order":26,"slug":"architectnow-builds-a-vendor-search-engine","title":"ArchitectNow Builds a Vendor Search Engine","content":"

ArchitectNow is a custom software development firm based out of St. Louis, MO.  They specialize in helping customers design, build, and launch rich web and mobile applications across a variety of industries.  



Recently ArchitectNow partnered with VendorSurf to implement a powerful mortgage industry vendor search engine.  As with many of ArchitectNow’s custom applications, the project team quickly identified the need for the customer to manage specific types of content for use in the application.  Rather than custom build a pseudo-content management system (as they have done many times in the past) they quickly leveraged Cosmic to provide VendorSurf with the ability to self-manage their own dynamic content.   



The ArchitectNow development team was able to quickly integrate the Cosmic functionality into their own rich Angular application thanks to the easy-to-use Cosmic JavaScript library.  They also tightly integrated the VendorSurf server-side API and back-office infrastructure (written in .NET and hosted within Microsoft’s Azure environment) with Cosmic via the Cosmic REST API’s.  By being able to integrate both directly from the browser (via JavaScript) as well as from the server (via REST) the ArchitectNow team was able to provide VendorSurf with a streamline workflow for managing custom content.


"ArchitectNow is already planning on how to leverage Cosmic to help future customers streamline the management of their custom content while still leveraging the benefits of a fully custom-built software application."

— Kevin Grossnicklaus, Principal 

","metafields":[{"value":"ArchitectNow","key":"company","title":"Company","type":"text","children":null},{"value":"Software Development","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"ArchitectNow is a custom software development firm based out of St. Louis, MO. They specialize in helping customers design, build, and launch rich web and mobile applications across a variety of industries. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"1d868fb0-007d-11e8-8590-4764eecfa402-image005.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/1d868fb0-007d-11e8-8590-4764eecfa402-image005.png","imgix_url":"https://imgix.cosmicjs.com/1d868fb0-007d-11e8-8590-4764eecfa402-image005.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2017-10-26T17:24:29.774Z","created_by":"5716b504e9c686d006000073","created":"2017-10-26T17:24:29.774Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"metadata":{"company":"ArchitectNow","industry_type":"Software Development","teaser":"ArchitectNow is a custom software development firm based out of St. Louis, MO. They specialize in helping customers design, build, and launch rich web and mobile applications across a variety of industries. \n","logo":{"url":"https://cdn.cosmicjs.com/1d868fb0-007d-11e8-8590-4764eecfa402-image005.png","imgix_url":"https://imgix.cosmicjs.com/1d868fb0-007d-11e8-8590-4764eecfa402-image005.png"}}},{"_id":"5d4c4e10bb97e152424aca52","order":26,"slug":"headless-cms-graphql","title":"Headless CMS + GraphQL","content":"

Manage content for your GraphQL apps using the Cosmic JS Headless CMS and GraphQL API. Teams use the Cosmic JS Headless CMS to model and create content for their GraphQL websites and apps because of its intuitive Headless CMS Dashboard and easy API integration tools. Get started by installing the Cosmic JS NPM Module.

What is a Headless CMS?

Headless CMS Software works by providing non-technical editors with a Dashboard UI to model, create and publish content while providing developers with API tools and resources to integrate content with any website or app. By decoupling content from code, teams create a central content repository that can power all of their content-powered applications. 

","metafields":[{"value":"Headless CMS + GraphQL","key":"solution_name","title":"Solution Name","type":"text","children":null},{"id":"file-pxfl79hoauanmhzl8llk","value":"ceb0da10-b9fa-11e9-898a-35d13190571c-Artboard-2.png","key":"image","title":"Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/ceb0da10-b9fa-11e9-898a-35d13190571c-Artboard-2.png","imgix_url":"https://imgix.cosmicjs.com/ceb0da10-b9fa-11e9-898a-35d13190571c-Artboard-2.png"},{"object_type":"case-studies","value":"596663e8880d69fb6c000194,5a2455620cb0e3291c00002e,59f102cbd4de657279002f97","key":"case_studies","title":"Case Studies","type":"objects","children":null,"objects":[{"_id":"596663e8880d69fb6c000194","slug":"joblift-elevates-their-stack","title":"Joblift Elevates Their Stack ","content":"

In any bustling economy, a key piece of capital is human capital. When the most precious portion of capital is required, Joblift seeks to connect positions with people. They choose Cosmic to deliver their content via the cloud. 



Joblift manages localized content to serve Job, Press and Blog feeds to its various markets, including the UK, Netherlands and Germany. Easy user roles and permissions equip their team with the tools they need to seamlessly run a global organization. 


"Cosmic has completely sped up our ability to upload our content easily and efficiently. With Cosmic we now have a smooth process for uploading press releases which reflects the quality content on our website.”

— Ashleigh Grady, Content Editor and Marketing Manager

","metafields":[{"value":"Joblift","key":"company","title":"Company","type":"text","children":null},{"value":"Career Services","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"In any bustling economy, a key piece of capital is human capital. When the most precious portion of capital is required, Joblift seeks to connect positions with people. They choose Cosmic to deliver their content via the cloud. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created":"2017-07-12T18:01:12.194Z","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","status":"published","publish_at":null,"published_at":"2018-12-19T21:44:38.361Z"},{"_id":"5a2455620cb0e3291c00002e","slug":"acculevel-deploys-a-blog","title":"Acculevel Deploys a Blog","content":"

Acculevel is Your Foundation Expert. Serving the Midwest United States for the last 20 years, Acculevel knows what it means to serve and do a job right. Customer retention, reviews and loyalty are the name of their game, so to optimize these efforts and keep customers engaged and informed, Acculevel is scaling up their digital presence through its upcoming website, a new mobile application and more. Led by a new Chief Technology Officer overseeing developers and content editors, here's how Acculevel is ensuring their own foundation is solid.

Mired in an installed WordPress system was leaving Acculevel without the flexibility needed to nimbly build and publish content campaigns to engage with customers. Acculevel's tech team is currently building out a new zippy website built on a Node.js stack, complete with API integrations for ACH Authentication (Plaid) and Payment Gateway (Stripe). Acculevel needed a blog feed that would allow their new API-first methodology to pull data via the cloud while allowing their content editors to easily build and manage content in a WYSIWYG editor. With Cosmic, they were able to build and deploy a fully functioning blog in under 30 minutes.



"Cosmic provided us with a seamless on-boarding experience for creating a Bucket to manage blog content for our growing organization. We needed a programming-language agnostic API to manage content both within our existing WordPress website as well as within our new Node.js web application. Cosmic fit the bill perfectly with its simple Object schema and powerful Metafields. With Cosmic, content is just data and you can pull it however you'd like, wherever you like, allowing us  to build new tools in the future such as survey tools, employee forums and more.”

— Dylan Marsh, Chief Technology Officer  

","metafields":[{"value":"Acculevel ","key":"company","title":"Company","type":"text","children":null},{"value":"Construction","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Acculevel needed a blog feed that would allow their new API-first methodology to pull data via the cloud while allowing their content editor to easily build and manage content in a WYSIWYG editor. With Cosmic, they were able to build and deploy a fully functioning blog in under 30 minutes.\n\n\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"7621bb20-dab4-11e7-82e3-e92aaea009f5-o.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/7621bb20-dab4-11e7-82e3-e92aaea009f5-o.jpg","imgix_url":"https://imgix.cosmicjs.com/7621bb20-dab4-11e7-82e3-e92aaea009f5-o.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2017-12-03T19:49:54.515Z","created_by":"5716b504e9c686d006000073","created":"2017-12-03T19:49:54.515Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5357ef811693be2118000001","publish_at":null},{"_id":"59f102cbd4de657279002f97","slug":"datalyze-solutions-adds-blog-and-job-feeds","title":"Datalyze Solutions Adds a Blog Feed","content":"

Data. Intelligence. Applications. Location Based Analytics. When everything is converging, teams needs collaboration tools to make their lives easier. That's why Datalyze Solutions chooses Cosmic to deliver its content from the cloud for its Blog feeds. 



"Cosmic has been in use at Datalyze Solutions for more than one and a half years. Cosmic has become a critically important tool for us to publish blog posts quickly and easily. This way, our customers and partners can stay informed about the latest news from our company and other industry-relevant information. Cosmic offers exactly the flexibility and features we really need as content editors!"

— Carolin Bauer, Content Editor and Marketing Manager

","metafields":[{"value":"Datalyze Solutions","key":"company","title":"Company","type":"text","children":null},{"value":"Internet","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Data. Intelligence. Applications. Location Based Analytics. When everything is converging, teams needs collaboration tools to make their lives easier.","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"b4173bb0-dc2d-11e7-9201-fb5838341592-DS_Logo_Blau.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/b4173bb0-dc2d-11e7-9201-fb5838341592-DS_Logo_Blau.png","imgix_url":"https://imgix.cosmicjs.com/b4173bb0-dc2d-11e7-9201-fb5838341592-DS_Logo_Blau.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2017-10-25T21:31:55.033Z","created_by":"5716b504e9c686d006000073","created":"2017-10-25T21:31:55.033Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null}]},{"repeater_fields":[{"title":"Slug","key":"slug","value":"","type":"text","required":false}],"value":"portfolio-website","key":"app_slugs","title":"App Slugs","type":"repeater","children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"portfolio-website","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"apollo-blog","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"react-graphql-blog","type":"text","required":false}]}]},{"repeater_fields":[{"title":"Slug","key":"slug","value":"","type":"text","required":false}],"value":"wordpress-importer","key":"extension_slugs","title":"Extension SLugs","type":"repeater","children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"wordpress-importer","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"export-to-csv","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"unsplash-photos","type":"text","required":false}]}]},{"value":"\"Leveraging the Cosmic JS GraphQL API allows for easy updates to our news and blog, while keeping payloads small and fast. Integration with Cosmic JS could not be easier thanks to their great support. We look forward to developing more features on the platform.”\n","key":"testimonial","title":"Testimonial","type":"textarea","children":null},{"value":"Dustin Brink, Front End Developer at Derive Systems ","key":"testimonial_credit","title":"Testimonial Credit","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"solutions","created_at":"2019-08-05T20:18:17.006Z","created_by":"5716b504e9c686d006000073","modified_at":"2019-08-08T16:37:29.723Z","created":"2019-08-08T16:30:08.539Z","status":"published","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2019-08-08T16:37:29.723Z","metadata":{"solution_name":"Headless CMS + GraphQL","image":{"url":"https://cdn.cosmicjs.com/ceb0da10-b9fa-11e9-898a-35d13190571c-Artboard-2.png","imgix_url":"https://imgix.cosmicjs.com/ceb0da10-b9fa-11e9-898a-35d13190571c-Artboard-2.png"},"case_studies":[{"_id":"596663e8880d69fb6c000194","slug":"joblift-elevates-their-stack","title":"Joblift Elevates Their Stack ","content":"

In any bustling economy, a key piece of capital is human capital. When the most precious portion of capital is required, Joblift seeks to connect positions with people. They choose Cosmic to deliver their content via the cloud. 



Joblift manages localized content to serve Job, Press and Blog feeds to its various markets, including the UK, Netherlands and Germany. Easy user roles and permissions equip their team with the tools they need to seamlessly run a global organization. 


"Cosmic has completely sped up our ability to upload our content easily and efficiently. With Cosmic we now have a smooth process for uploading press releases which reflects the quality content on our website.”

— Ashleigh Grady, Content Editor and Marketing Manager

","metafields":[{"value":"Joblift","key":"company","title":"Company","type":"text","children":null},{"value":"Career Services","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"In any bustling economy, a key piece of capital is human capital. When the most precious portion of capital is required, Joblift seeks to connect positions with people. They choose Cosmic to deliver their content via the cloud. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created":"2017-07-12T18:01:12.194Z","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","status":"published","publish_at":null,"published_at":"2018-12-19T21:44:38.361Z","metadata":{"company":"Joblift","industry_type":"Career Services","teaser":"In any bustling economy, a key piece of capital is human capital. When the most precious portion of capital is required, Joblift seeks to connect positions with people. They choose Cosmic to deliver their content via the cloud. \n","logo":{"url":"https://cdn.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg"}}},{"_id":"5a2455620cb0e3291c00002e","slug":"acculevel-deploys-a-blog","title":"Acculevel Deploys a Blog","content":"

Acculevel is Your Foundation Expert. Serving the Midwest United States for the last 20 years, Acculevel knows what it means to serve and do a job right. Customer retention, reviews and loyalty are the name of their game, so to optimize these efforts and keep customers engaged and informed, Acculevel is scaling up their digital presence through its upcoming website, a new mobile application and more. Led by a new Chief Technology Officer overseeing developers and content editors, here's how Acculevel is ensuring their own foundation is solid.

Mired in an installed WordPress system was leaving Acculevel without the flexibility needed to nimbly build and publish content campaigns to engage with customers. Acculevel's tech team is currently building out a new zippy website built on a Node.js stack, complete with API integrations for ACH Authentication (Plaid) and Payment Gateway (Stripe). Acculevel needed a blog feed that would allow their new API-first methodology to pull data via the cloud while allowing their content editors to easily build and manage content in a WYSIWYG editor. With Cosmic, they were able to build and deploy a fully functioning blog in under 30 minutes.



"Cosmic provided us with a seamless on-boarding experience for creating a Bucket to manage blog content for our growing organization. We needed a programming-language agnostic API to manage content both within our existing WordPress website as well as within our new Node.js web application. Cosmic fit the bill perfectly with its simple Object schema and powerful Metafields. With Cosmic, content is just data and you can pull it however you'd like, wherever you like, allowing us  to build new tools in the future such as survey tools, employee forums and more.”

— Dylan Marsh, Chief Technology Officer  

","metafields":[{"value":"Acculevel ","key":"company","title":"Company","type":"text","children":null},{"value":"Construction","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Acculevel needed a blog feed that would allow their new API-first methodology to pull data via the cloud while allowing their content editor to easily build and manage content in a WYSIWYG editor. With Cosmic, they were able to build and deploy a fully functioning blog in under 30 minutes.\n\n\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"7621bb20-dab4-11e7-82e3-e92aaea009f5-o.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/7621bb20-dab4-11e7-82e3-e92aaea009f5-o.jpg","imgix_url":"https://imgix.cosmicjs.com/7621bb20-dab4-11e7-82e3-e92aaea009f5-o.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2017-12-03T19:49:54.515Z","created_by":"5716b504e9c686d006000073","created":"2017-12-03T19:49:54.515Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5357ef811693be2118000001","publish_at":null,"metadata":{"company":"Acculevel ","industry_type":"Construction","teaser":"Acculevel needed a blog feed that would allow their new API-first methodology to pull data via the cloud while allowing their content editor to easily build and manage content in a WYSIWYG editor. With Cosmic, they were able to build and deploy a fully functioning blog in under 30 minutes.\n\n\n","logo":{"url":"https://cdn.cosmicjs.com/7621bb20-dab4-11e7-82e3-e92aaea009f5-o.jpg","imgix_url":"https://imgix.cosmicjs.com/7621bb20-dab4-11e7-82e3-e92aaea009f5-o.jpg"}}},{"_id":"59f102cbd4de657279002f97","slug":"datalyze-solutions-adds-blog-and-job-feeds","title":"Datalyze Solutions Adds a Blog Feed","content":"

Data. Intelligence. Applications. Location Based Analytics. When everything is converging, teams needs collaboration tools to make their lives easier. That's why Datalyze Solutions chooses Cosmic to deliver its content from the cloud for its Blog feeds. 



"Cosmic has been in use at Datalyze Solutions for more than one and a half years. Cosmic has become a critically important tool for us to publish blog posts quickly and easily. This way, our customers and partners can stay informed about the latest news from our company and other industry-relevant information. Cosmic offers exactly the flexibility and features we really need as content editors!"

— Carolin Bauer, Content Editor and Marketing Manager

","metafields":[{"value":"Datalyze Solutions","key":"company","title":"Company","type":"text","children":null},{"value":"Internet","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Data. Intelligence. Applications. Location Based Analytics. When everything is converging, teams needs collaboration tools to make their lives easier.","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"b4173bb0-dc2d-11e7-9201-fb5838341592-DS_Logo_Blau.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/b4173bb0-dc2d-11e7-9201-fb5838341592-DS_Logo_Blau.png","imgix_url":"https://imgix.cosmicjs.com/b4173bb0-dc2d-11e7-9201-fb5838341592-DS_Logo_Blau.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2017-10-25T21:31:55.033Z","created_by":"5716b504e9c686d006000073","created":"2017-10-25T21:31:55.033Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"metadata":{"company":"Datalyze Solutions","industry_type":"Internet","teaser":"Data. Intelligence. Applications. Location Based Analytics. When everything is converging, teams needs collaboration tools to make their lives easier.","logo":{"url":"https://cdn.cosmicjs.com/b4173bb0-dc2d-11e7-9201-fb5838341592-DS_Logo_Blau.png","imgix_url":"https://imgix.cosmicjs.com/b4173bb0-dc2d-11e7-9201-fb5838341592-DS_Logo_Blau.png"}}}],"app_slugs":[{"slug":"portfolio-website"},{"slug":"apollo-blog"},{"slug":"react-graphql-blog"}],"extension_slugs":[{"slug":"wordpress-importer"},{"slug":"export-to-csv"},{"slug":"unsplash-photos"}],"testimonial":"\"Leveraging the Cosmic JS GraphQL API allows for easy updates to our news and blog, while keeping payloads small and fast. Integration with Cosmic JS could not be easier thanks to their great support. We look forward to developing more features on the platform.”\n","testimonial_credit":"Dustin Brink, Front End Developer at Derive Systems "}},{"_id":"5eb04772db0ee6000887f10e","order":26,"slug":"brand-and-design-updates","title":"Brand and Design Updates","content":"

We're excited to announce some big updates to our branding and website design.

Brand Update
We have now changed our name to Cosmic. By dropping the JS from our name, we intend to not only be the best CMS for JavaScript developers, but also for developers using any programming language.





When we first started building Cosmic, we wanted adding a CMS to your JavaScript app to be as easy as npm i cosmicjs. The name was chosen to achieve this goal for JavaScript developers, and we did it. But we never intended it to be exclusively for JavaScript developers as our REST and GraphQL API can deliver content to any website or application regardless of programming language.

With our new name, and the promise to serve more developers, we are committed to providing more clients and resources for developers using other programming languages such as Java, Go, Ruby, and more. Be on the lookout for more client resources soon.

As for the logo itself, it has undergone a glow-up with a new bolder typeface to make the logo pop with the new website colors.

Our home on the web will still be located at cosmicjs.com.

Website Design Updates
You will notice that many of the pages on the website have been rebuilt from the ground up, with a renewed focus on story-telling.

When development teams look for a new CMS, it's important that the solution not only provides powerful developer tools, but also gives their content team an intuitive content creation experience. On the homepage, we chose to lead with a screenshot of the dashboard and the code behind it to tell the story for these two important team members.

The curved global nav, new heading font, and retro flair playfully added to parts of the site, were specifically chosen to evoke a space age design. Like classic cars of the 60s with their curvy design, a headless CMS is a new frontier for most teams, and we hope the new design instills a similar feeling of limitless adventure and optimism.

We hope you enjoy the new look and feel, and renewed commitment to be the best CMS for your content and development teams. If you have any questions or comments, please reach out to us on Twitter and join the community on Slack.

Thanks,
The Cosmic Team

","metafields":[{"children":null,"type":"object","title":"Author","key":"author","id":"HPp2EPIc5W","value":"5768b253163172890e00002c","object_type":"authors","object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"children":null,"type":"html-textarea","title":"Teaser","key":"teaser","id":"qV5iMHJDQR","value":"

We're excited to announce some big updates to our branding and website design. We have now changed our name to Cosmic. By dropping the JS from our name, we intend to not only be the best CMS for JavaScript developers, but also for developers using any programming language.

"},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"jzCibxaOxY","value":"980ac400-8e7d-11ea-bd26-81830172bbcb-browsers.png","url":"https://cdn.cosmicjs.com/980ac400-8e7d-11ea-bd26-81830172bbcb-browsers.png","imgix_url":"https://imgix.cosmicjs.com/980ac400-8e7d-11ea-bd26-81830172bbcb-browsers.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2020-05-05T16:48:50.453Z","created_by":"5357ef811693be2118000001","modified_at":"2020-08-10T14:04:22.001Z","created":"2020-05-05T16:48:50.453Z","status":"published","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2020-07-22T13:02:50.533Z","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

We're excited to announce some big updates to our branding and website design. We have now changed our name to Cosmic. By dropping the JS from our name, we intend to not only be the best CMS for JavaScript developers, but also for developers using any programming language.

","featured_image":{"url":"https://cdn.cosmicjs.com/980ac400-8e7d-11ea-bd26-81830172bbcb-browsers.png","imgix_url":"https://imgix.cosmicjs.com/980ac400-8e7d-11ea-bd26-81830172bbcb-browsers.png"}}},{"_id":"5d4c4c3df052fe58796fd275","order":26,"slug":"headless-cms-gatsby","title":"Headless CMS + Gatsby","content":"

Manage content for your Gatsby apps using the Cosmic JS Headless CMS. Teams use the Cosmic JS Headless CMS to model and create content for their Gatsby websites and apps because of its intuitive Headless CMS Dashboard and easy API integration tools. Get started by installing the Cosmic JS NPM Module and reviewing the Gatsby Source Plugin.

What is a Headless CMS?

Headless CMS Software works by providing non-technical editors with a Dashboard UI to model, create and publish content while providing developers with API tools and resources to integrate content with any website or app. By decoupling content from code, teams create a central content repository that can power all of their content-powered applications. 

","metafields":[{"value":"Headless CMS + Gatsby","key":"solution_name","title":"Solution Name","type":"text","children":null},{"value":"c17be120-b9f8-11e9-898a-35d13190571c-76568eb0-ddea-11e8-9812-e3be732e632a-gatsby-cosmic.jpg","key":"image","title":"Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/c17be120-b9f8-11e9-898a-35d13190571c-76568eb0-ddea-11e8-9812-e3be732e632a-gatsby-cosmic.jpg","imgix_url":"https://imgix.cosmicjs.com/c17be120-b9f8-11e9-898a-35d13190571c-76568eb0-ddea-11e8-9812-e3be732e632a-gatsby-cosmic.jpg"},{"object_type":"case-studies","value":"596663e8880d69fb6c000194,5a2455620cb0e3291c00002e,59f102cbd4de657279002f97","key":"case_studies","title":"Case Studies","type":"objects","children":null,"objects":[{"_id":"596663e8880d69fb6c000194","slug":"joblift-elevates-their-stack","title":"Joblift Elevates Their Stack ","content":"

In any bustling economy, a key piece of capital is human capital. When the most precious portion of capital is required, Joblift seeks to connect positions with people. They choose Cosmic to deliver their content via the cloud. 



Joblift manages localized content to serve Job, Press and Blog feeds to its various markets, including the UK, Netherlands and Germany. Easy user roles and permissions equip their team with the tools they need to seamlessly run a global organization. 


"Cosmic has completely sped up our ability to upload our content easily and efficiently. With Cosmic we now have a smooth process for uploading press releases which reflects the quality content on our website.”

— Ashleigh Grady, Content Editor and Marketing Manager

","metafields":[{"value":"Joblift","key":"company","title":"Company","type":"text","children":null},{"value":"Career Services","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"In any bustling economy, a key piece of capital is human capital. When the most precious portion of capital is required, Joblift seeks to connect positions with people. They choose Cosmic to deliver their content via the cloud. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created":"2017-07-12T18:01:12.194Z","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","status":"published","publish_at":null,"published_at":"2018-12-19T21:44:38.361Z"},{"_id":"5a2455620cb0e3291c00002e","slug":"acculevel-deploys-a-blog","title":"Acculevel Deploys a Blog","content":"

Acculevel is Your Foundation Expert. Serving the Midwest United States for the last 20 years, Acculevel knows what it means to serve and do a job right. Customer retention, reviews and loyalty are the name of their game, so to optimize these efforts and keep customers engaged and informed, Acculevel is scaling up their digital presence through its upcoming website, a new mobile application and more. Led by a new Chief Technology Officer overseeing developers and content editors, here's how Acculevel is ensuring their own foundation is solid.

Mired in an installed WordPress system was leaving Acculevel without the flexibility needed to nimbly build and publish content campaigns to engage with customers. Acculevel's tech team is currently building out a new zippy website built on a Node.js stack, complete with API integrations for ACH Authentication (Plaid) and Payment Gateway (Stripe). Acculevel needed a blog feed that would allow their new API-first methodology to pull data via the cloud while allowing their content editors to easily build and manage content in a WYSIWYG editor. With Cosmic, they were able to build and deploy a fully functioning blog in under 30 minutes.



"Cosmic provided us with a seamless on-boarding experience for creating a Bucket to manage blog content for our growing organization. We needed a programming-language agnostic API to manage content both within our existing WordPress website as well as within our new Node.js web application. Cosmic fit the bill perfectly with its simple Object schema and powerful Metafields. With Cosmic, content is just data and you can pull it however you'd like, wherever you like, allowing us  to build new tools in the future such as survey tools, employee forums and more.”

— Dylan Marsh, Chief Technology Officer  

","metafields":[{"value":"Acculevel ","key":"company","title":"Company","type":"text","children":null},{"value":"Construction","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Acculevel needed a blog feed that would allow their new API-first methodology to pull data via the cloud while allowing their content editor to easily build and manage content in a WYSIWYG editor. With Cosmic, they were able to build and deploy a fully functioning blog in under 30 minutes.\n\n\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"7621bb20-dab4-11e7-82e3-e92aaea009f5-o.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/7621bb20-dab4-11e7-82e3-e92aaea009f5-o.jpg","imgix_url":"https://imgix.cosmicjs.com/7621bb20-dab4-11e7-82e3-e92aaea009f5-o.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2017-12-03T19:49:54.515Z","created_by":"5716b504e9c686d006000073","created":"2017-12-03T19:49:54.515Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5357ef811693be2118000001","publish_at":null},{"_id":"59f102cbd4de657279002f97","slug":"datalyze-solutions-adds-blog-and-job-feeds","title":"Datalyze Solutions Adds a Blog Feed","content":"

Data. Intelligence. Applications. Location Based Analytics. When everything is converging, teams needs collaboration tools to make their lives easier. That's why Datalyze Solutions chooses Cosmic to deliver its content from the cloud for its Blog feeds. 



"Cosmic has been in use at Datalyze Solutions for more than one and a half years. Cosmic has become a critically important tool for us to publish blog posts quickly and easily. This way, our customers and partners can stay informed about the latest news from our company and other industry-relevant information. Cosmic offers exactly the flexibility and features we really need as content editors!"

— Carolin Bauer, Content Editor and Marketing Manager

","metafields":[{"value":"Datalyze Solutions","key":"company","title":"Company","type":"text","children":null},{"value":"Internet","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Data. Intelligence. Applications. Location Based Analytics. When everything is converging, teams needs collaboration tools to make their lives easier.","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"b4173bb0-dc2d-11e7-9201-fb5838341592-DS_Logo_Blau.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/b4173bb0-dc2d-11e7-9201-fb5838341592-DS_Logo_Blau.png","imgix_url":"https://imgix.cosmicjs.com/b4173bb0-dc2d-11e7-9201-fb5838341592-DS_Logo_Blau.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2017-10-25T21:31:55.033Z","created_by":"5716b504e9c686d006000073","created":"2017-10-25T21:31:55.033Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null}]},{"repeater_fields":[{"title":"Slug","key":"slug","value":"","type":"text","required":false}],"value":"gatsby-blog","key":"app_slugs","title":"App Slugs","type":"repeater","children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"gatsby-blog","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"gatsby-agency-portfolio","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"gatsby-localization-app-starter","type":"text","required":false}]}]},{"repeater_fields":[{"title":"Slug","key":"slug","value":"","type":"text","required":false}],"value":"wordpress-importer","key":"extension_slugs","title":"Extension SLugs","type":"repeater","children":[{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"wordpress-importer","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"export-to-csv","type":"text","required":false}]},{"type":"repeating_item","children":[{"title":"Slug","key":"slug","value":"unsplash-photos","type":"text","required":false}]}]},{"value":"\"Using the Cosmic JS Headless CMS to manage dynamic content for our statically-generated Gatsby app is a true workflow game-changer.”","key":"testimonial","title":"Testimonial","type":"textarea","children":null},{"value":"Lead Developer, dailymotion ","key":"testimonial_credit","title":"Testimonial Credit","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"solutions","created_at":"2019-08-05T20:18:17.006Z","created_by":"5716b504e9c686d006000073","modified_at":"2019-08-08T16:26:49.570Z","created":"2019-08-08T16:22:21.025Z","status":"published","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2019-08-08T16:26:49.571Z","metadata":{"solution_name":"Headless CMS + Gatsby","image":{"url":"https://cdn.cosmicjs.com/c17be120-b9f8-11e9-898a-35d13190571c-76568eb0-ddea-11e8-9812-e3be732e632a-gatsby-cosmic.jpg","imgix_url":"https://imgix.cosmicjs.com/c17be120-b9f8-11e9-898a-35d13190571c-76568eb0-ddea-11e8-9812-e3be732e632a-gatsby-cosmic.jpg"},"case_studies":[{"_id":"596663e8880d69fb6c000194","slug":"joblift-elevates-their-stack","title":"Joblift Elevates Their Stack ","content":"

In any bustling economy, a key piece of capital is human capital. When the most precious portion of capital is required, Joblift seeks to connect positions with people. They choose Cosmic to deliver their content via the cloud. 



Joblift manages localized content to serve Job, Press and Blog feeds to its various markets, including the UK, Netherlands and Germany. Easy user roles and permissions equip their team with the tools they need to seamlessly run a global organization. 


"Cosmic has completely sped up our ability to upload our content easily and efficiently. With Cosmic we now have a smooth process for uploading press releases which reflects the quality content on our website.”

— Ashleigh Grady, Content Editor and Marketing Manager

","metafields":[{"value":"Joblift","key":"company","title":"Company","type":"text","children":null},{"value":"Career Services","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"In any bustling economy, a key piece of capital is human capital. When the most precious portion of capital is required, Joblift seeks to connect positions with people. They choose Cosmic to deliver their content via the cloud. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created":"2017-07-12T18:01:12.194Z","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","status":"published","publish_at":null,"published_at":"2018-12-19T21:44:38.361Z","metadata":{"company":"Joblift","industry_type":"Career Services","teaser":"In any bustling economy, a key piece of capital is human capital. When the most precious portion of capital is required, Joblift seeks to connect positions with people. They choose Cosmic to deliver their content via the cloud. \n","logo":{"url":"https://cdn.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/0f90a360-03d7-11e9-a9c3-c1326db90b81-RKJ3oFFY_400x400.jpg"}}},{"_id":"5a2455620cb0e3291c00002e","slug":"acculevel-deploys-a-blog","title":"Acculevel Deploys a Blog","content":"

Acculevel is Your Foundation Expert. Serving the Midwest United States for the last 20 years, Acculevel knows what it means to serve and do a job right. Customer retention, reviews and loyalty are the name of their game, so to optimize these efforts and keep customers engaged and informed, Acculevel is scaling up their digital presence through its upcoming website, a new mobile application and more. Led by a new Chief Technology Officer overseeing developers and content editors, here's how Acculevel is ensuring their own foundation is solid.

Mired in an installed WordPress system was leaving Acculevel without the flexibility needed to nimbly build and publish content campaigns to engage with customers. Acculevel's tech team is currently building out a new zippy website built on a Node.js stack, complete with API integrations for ACH Authentication (Plaid) and Payment Gateway (Stripe). Acculevel needed a blog feed that would allow their new API-first methodology to pull data via the cloud while allowing their content editors to easily build and manage content in a WYSIWYG editor. With Cosmic, they were able to build and deploy a fully functioning blog in under 30 minutes.



"Cosmic provided us with a seamless on-boarding experience for creating a Bucket to manage blog content for our growing organization. We needed a programming-language agnostic API to manage content both within our existing WordPress website as well as within our new Node.js web application. Cosmic fit the bill perfectly with its simple Object schema and powerful Metafields. With Cosmic, content is just data and you can pull it however you'd like, wherever you like, allowing us  to build new tools in the future such as survey tools, employee forums and more.”

— Dylan Marsh, Chief Technology Officer  

","metafields":[{"value":"Acculevel ","key":"company","title":"Company","type":"text","children":null},{"value":"Construction","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Acculevel needed a blog feed that would allow their new API-first methodology to pull data via the cloud while allowing their content editor to easily build and manage content in a WYSIWYG editor. With Cosmic, they were able to build and deploy a fully functioning blog in under 30 minutes.\n\n\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"7621bb20-dab4-11e7-82e3-e92aaea009f5-o.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/7621bb20-dab4-11e7-82e3-e92aaea009f5-o.jpg","imgix_url":"https://imgix.cosmicjs.com/7621bb20-dab4-11e7-82e3-e92aaea009f5-o.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2017-12-03T19:49:54.515Z","created_by":"5716b504e9c686d006000073","created":"2017-12-03T19:49:54.515Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5357ef811693be2118000001","publish_at":null,"metadata":{"company":"Acculevel ","industry_type":"Construction","teaser":"Acculevel needed a blog feed that would allow their new API-first methodology to pull data via the cloud while allowing their content editor to easily build and manage content in a WYSIWYG editor. With Cosmic, they were able to build and deploy a fully functioning blog in under 30 minutes.\n\n\n","logo":{"url":"https://cdn.cosmicjs.com/7621bb20-dab4-11e7-82e3-e92aaea009f5-o.jpg","imgix_url":"https://imgix.cosmicjs.com/7621bb20-dab4-11e7-82e3-e92aaea009f5-o.jpg"}}},{"_id":"59f102cbd4de657279002f97","slug":"datalyze-solutions-adds-blog-and-job-feeds","title":"Datalyze Solutions Adds a Blog Feed","content":"

Data. Intelligence. Applications. Location Based Analytics. When everything is converging, teams needs collaboration tools to make their lives easier. That's why Datalyze Solutions chooses Cosmic to deliver its content from the cloud for its Blog feeds. 



"Cosmic has been in use at Datalyze Solutions for more than one and a half years. Cosmic has become a critically important tool for us to publish blog posts quickly and easily. This way, our customers and partners can stay informed about the latest news from our company and other industry-relevant information. Cosmic offers exactly the flexibility and features we really need as content editors!"

— Carolin Bauer, Content Editor and Marketing Manager

","metafields":[{"value":"Datalyze Solutions","key":"company","title":"Company","type":"text","children":null},{"value":"Internet","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Data. Intelligence. Applications. Location Based Analytics. When everything is converging, teams needs collaboration tools to make their lives easier.","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"b4173bb0-dc2d-11e7-9201-fb5838341592-DS_Logo_Blau.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/b4173bb0-dc2d-11e7-9201-fb5838341592-DS_Logo_Blau.png","imgix_url":"https://imgix.cosmicjs.com/b4173bb0-dc2d-11e7-9201-fb5838341592-DS_Logo_Blau.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2017-10-25T21:31:55.033Z","created_by":"5716b504e9c686d006000073","created":"2017-10-25T21:31:55.033Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"metadata":{"company":"Datalyze Solutions","industry_type":"Internet","teaser":"Data. Intelligence. Applications. Location Based Analytics. When everything is converging, teams needs collaboration tools to make their lives easier.","logo":{"url":"https://cdn.cosmicjs.com/b4173bb0-dc2d-11e7-9201-fb5838341592-DS_Logo_Blau.png","imgix_url":"https://imgix.cosmicjs.com/b4173bb0-dc2d-11e7-9201-fb5838341592-DS_Logo_Blau.png"}}}],"app_slugs":[{"slug":"gatsby-blog"},{"slug":"gatsby-agency-portfolio"},{"slug":"gatsby-localization-app-starter"}],"extension_slugs":[{"slug":"wordpress-importer"},{"slug":"export-to-csv"},{"slug":"unsplash-photos"}],"testimonial":"\"Using the Cosmic JS Headless CMS to manage dynamic content for our statically-generated Gatsby app is a true workflow game-changer.”","testimonial_credit":"Lead Developer, dailymotion "}},{"_id":"5b02c898de6d6d387eb68991","order":26,"slug":"vr-cms","title":"VR CMS","content":"

Virtual reality applications require dynamic content.  Cosmic JS makes it easy to manage content for your VR applications.

VR CMS Resources

React VR Art Gallery Example
Video: React VR Art Gallery App
VR Case Study: Medical Realities 
VR Case Study: Unleashed XR
Cosmic JS Docs
Official JavaScript Client
Cosmic JS GitHub

Using the Cosmic JS NPM Module

npm i cosmicjs

Then in your JavaScript file, get your content:

\">


","metafields":[{"children":null,"type":"file","title":"Image","key":"image","id":"QkW6gba9Pk","value":"2bf53630-5cfa-11e8-9276-0b00f900a0a0-vr.png","url":"https://cdn.cosmicjs.com/2bf53630-5cfa-11e8-9276-0b00f900a0a0-vr.png","imgix_url":"https://imgix.cosmicjs.com/2bf53630-5cfa-11e8-9276-0b00f900a0a0-vr.png"},{"children":null,"type":"file","title":"Thumbnail","key":"thumbnail","id":"prdUIgdcqW","value":"2bf53630-5cfa-11e8-9276-0b00f900a0a0-vr.png","url":"https://cdn.cosmicjs.com/2bf53630-5cfa-11e8-9276-0b00f900a0a0-vr.png","imgix_url":"https://imgix.cosmicjs.com/2bf53630-5cfa-11e8-9276-0b00f900a0a0-vr.png"},{"children":null,"type":"html-textarea","title":"Blurb","key":"blurb","id":"pRsavOph2x","value":"

Cosmic is the best CMS for VR apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

"},{"children":null,"type":"text","title":"Headline","key":"headline","id":"Zjwr5XiizW","value":"VR CMS"},{"children":null,"type":"text","title":"SEO Description","key":"seo_description","id":"lMYPgnny2o","value":"Cosmic is the best CMS for VR apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators."},{"children":null,"type":"file","title":"Twitter Card Image","key":"twitter_card_image","id":"Y9TI3tIKqt","value":"2bf53630-5cfa-11e8-9276-0b00f900a0a0-vr.png","url":"https://cdn.cosmicjs.com/2bf53630-5cfa-11e8-9276-0b00f900a0a0-vr.png","imgix_url":"https://imgix.cosmicjs.com/2bf53630-5cfa-11e8-9276-0b00f900a0a0-vr.png"},{"children":null,"type":"html-textarea","title":"Code Example","key":"code_example","id":"nzdO5hg379","value":""},{"children":null,"type":"text","title":"SEO Title","key":"seo_title","id":"2D0uhQCczt","value":"Best Headless CMS for VR"},{"children":[],"type":"repeater","title":"Videos","key":"videos","id":"frgtgqfrpylludl8pnsi","value":"","repeater_fields":[{"title":"Title","key":"title","value":"","type":"text","required":false},{"title":"Link","key":"link","value":"","type":"text","required":false}]}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"kb-articles","created_at":"2018-05-21T13:24:40.741Z","created_by":"5357ef811693be2118000001","created":"2018-05-21T13:24:40.741Z","status":"published","modified_at":"2020-06-27T19:23:03.758Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-06-27T19:23:03.758Z","unpublish_at":null,"metadata":{"image":{"url":"https://cdn.cosmicjs.com/2bf53630-5cfa-11e8-9276-0b00f900a0a0-vr.png","imgix_url":"https://imgix.cosmicjs.com/2bf53630-5cfa-11e8-9276-0b00f900a0a0-vr.png"},"thumbnail":{"url":"https://cdn.cosmicjs.com/2bf53630-5cfa-11e8-9276-0b00f900a0a0-vr.png","imgix_url":"https://imgix.cosmicjs.com/2bf53630-5cfa-11e8-9276-0b00f900a0a0-vr.png"},"blurb":"

Cosmic is the best CMS for VR apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

","headline":"VR CMS","seo_description":"Cosmic is the best CMS for VR apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.","twitter_card_image":{"url":"https://cdn.cosmicjs.com/2bf53630-5cfa-11e8-9276-0b00f900a0a0-vr.png","imgix_url":"https://imgix.cosmicjs.com/2bf53630-5cfa-11e8-9276-0b00f900a0a0-vr.png"},"code_example":"","seo_title":"Best Headless CMS for VR","videos":[]}},{"_id":"5e5d6f772cd9090007caca02","order":27,"slug":"additional-users-add-on-now-available","title":"Additional Users Add-On Now Available","content":"

At Cosmic, it's our mission to help teams of developers and content creators build great content-powered apps together. We're happy to announce the new Additional Users Add-On product to offer a more flexible pricing option for growing teams.

What is it?
The Additional Users Add-On is a new product that allows you to add team members "a la cart" to your Bucket without having to make larger jumps between plans.

How to use the Additional Users Add-On
1. Login to your Cosmic account and go to Your Bucket > Settings > Billing and scroll down to the the Bucket Add-Ons area.
2. Select the number of additional users you need and click "Add Product".
3. Then go to Your Bucket > Settings > Team area and invite your new team members.

Video below:

Scenario:
You have a Starter Bucket which includes 5 team members, 25,000 API requests per month (non-cached), and 3GB media storage space.

And let's say you just hired a new content creator to your team that needs access to Cosmic, but you are at the 5 team member limit within your plan.

Now instead of upgrading to the next available plan (Pro) which includes 10 users, 150,000 API requests per month and 15GB media storage, you can simply use the Additional Users Add-on to add the custom number of team members you need now while avoiding the other features you may not need (API requests, media storage).

For an additional $29/user per month (10% off for paying yearly) you can customize the number of team members included in your Bucket, giving you a more gradual growth path.


We hope you like the flexibility this new product offers as you grow your team collaboration on Cosmic. You can visit the pricing page for more information on our available Add-Ons and if you have any questions, please feel free to reach out to us on Twitter, Slack, or directly on our contact page.

","metafields":[{"children":null,"type":"object","title":"Author","key":"author","id":"a6Zq9qJRuQ","value":"5768b253163172890e00002c","object_type":"authors","object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"children":null,"type":"html-textarea","title":"Teaser","key":"teaser","id":"YwZ0yThzHK","value":"

At Cosmic, it's our mission to help teams of developers and content creators build great content-powered apps together. We're happy to announce the new Additional Users Add-On to offer a flexible pricing option for growing teams.

"},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"RNug5uxIa6","value":"e23218d0-5cc8-11ea-8649-b9c3b12e7d52-SYTO3xs06fU.jpg","url":"https://cdn.cosmicjs.com/e23218d0-5cc8-11ea-8649-b9c3b12e7d52-SYTO3xs06fU.jpg","imgix_url":"https://imgix.cosmicjs.com/e23218d0-5cc8-11ea-8649-b9c3b12e7d52-SYTO3xs06fU.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2020-03-02T20:41:27.961Z","created_by":"5357ef811693be2118000001","modified_at":"2020-03-03T16:24:17.609Z","created":"2020-03-02T20:41:27.961Z","status":"published","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2020-03-03T16:24:17.609Z","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

At Cosmic, it's our mission to help teams of developers and content creators build great content-powered apps together. We're happy to announce the new Additional Users Add-On to offer a flexible pricing option for growing teams.

","featured_image":{"url":"https://cdn.cosmicjs.com/e23218d0-5cc8-11ea-8649-b9c3b12e7d52-SYTO3xs06fU.jpg","imgix_url":"https://imgix.cosmicjs.com/e23218d0-5cc8-11ea-8649-b9c3b12e7d52-SYTO3xs06fU.jpg"}}},{"_id":"5dee711dbd07ee00085b7cb3","order":27,"slug":"auto-save-object-revisions-endpoint-and-metafield-bug-fixes","title":"Auto Save, Object Revisions Endpoint, and Metafield Bug Fixes","content":"

We've got some exciting updates that should make editing and integrating your Cosmic-powered content faster, easier, and more enjoyable. This release includes two updates: 1) a new Auto Save feature, and 2) fixes and enhancements to the Metafield\r\nediting experience.


1. Auto Save
We have added a new Auto Save feature, which will automatically save your Object content to draft while you are editing. No need to manually save until you are ready to publish. (This is currently only available if you have revision history enabled)


Customers of Gatsby Preview will love this feature as you will see updates to your Gatsby Cloud link instantaneously!

Auto Save with Gatsby Cloud in action:

click to zoom

2. Object Revisions Endpoint
You now have revisions available via the API. You can find this endpoint on every Object in the Dashboard when you click the "Revisions" button. View the docs for more info.

click to zoom

3. Metafields (Bug fixes and enhancements)
The Cosmic team is dedicated to offering a first-class content editing experience.  With our Metafields content modeling approach, we offer one of the most powerful content management systems available. And we've made this much-loved feature\r\neven better.

We're happy to report that we fixed some Metafield bugs reported by the Cosmic community as well as added a few enhancements.

Fixes include:

Enhancements include:


Any questions or comments? Reach out to us on Twitter and join the conversation on our Slack channel.

","metafields":[{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"jk2TEMqDCU","value":"2020-01-02"},{"children":null,"type":"object","title":"Author","key":"author","id":"5d2kFBsl13","value":"599b30c44f629e3a5900010f","object_type":"authors","object":{"_id":"599b30c44f629e3a5900010f","slug":"jazib-sawar","title":"Jazib Sawar","content":"","metafields":[{"value":"d3261f20-1a9d-11ea-a8c4-6b69c807b1d7-12.jpg","id":"MoCJXLYqwC","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/d3261f20-1a9d-11ea-a8c4-6b69c807b1d7-12.jpg","imgix_url":"https://imgix.cosmicjs.com/d3261f20-1a9d-11ea-a8c4-6b69c807b1d7-12.jpg"},{"value":"jazibsawar","id":"","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-08-21T19:13:08.011Z","created_by":"5357ef811693be2118000001","created":"2017-08-21T19:13:08.011Z","status":"published","modified_at":"2020-09-15T15:41:11.076Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-12-09T16:06:31.900Z","thumbnail":"https://imgix.cosmicjs.com/d3261f20-1a9d-11ea-a8c4-6b69c807b1d7-12.jpg"}},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"g2kpc27LlO","value":"","url":null,"imgix_url":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"changelogs","created_at":"2019-10-28T20:03:47.995Z","created_by":"5357ef811693be2118000001","modified_at":"2020-08-10T14:02:39.393Z","created":"2019-12-09T16:06:53.462Z","status":"published","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-01-02T17:55:22.066Z","metadata":{"published_date":"2020-01-02","author":{"_id":"599b30c44f629e3a5900010f","slug":"jazib-sawar","title":"Jazib Sawar","content":"","metafields":[{"value":"d3261f20-1a9d-11ea-a8c4-6b69c807b1d7-12.jpg","id":"MoCJXLYqwC","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/d3261f20-1a9d-11ea-a8c4-6b69c807b1d7-12.jpg","imgix_url":"https://imgix.cosmicjs.com/d3261f20-1a9d-11ea-a8c4-6b69c807b1d7-12.jpg"},{"value":"jazibsawar","id":"","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-08-21T19:13:08.011Z","created_by":"5357ef811693be2118000001","created":"2017-08-21T19:13:08.011Z","status":"published","modified_at":"2020-09-15T15:41:11.076Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-12-09T16:06:31.900Z","thumbnail":"https://imgix.cosmicjs.com/d3261f20-1a9d-11ea-a8c4-6b69c807b1d7-12.jpg","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/d3261f20-1a9d-11ea-a8c4-6b69c807b1d7-12.jpg","imgix_url":"https://imgix.cosmicjs.com/d3261f20-1a9d-11ea-a8c4-6b69c807b1d7-12.jpg"},"username":"jazibsawar"}},"featured_image":{"url":null,"imgix_url":null}}},{"_id":"5dc9df899f83340007a019ab","order":27,"slug":"free-headless-cms","title":"Free Headless CMS","content":"

The Cosmic JS Headless CMS makes it easy for your team to add dynamic content to any website or app in minutes. We provide a dashboard to create content and API tools and resources to integrate content into any website or app. We offer a Free Developer plan to host your website content.

Avoid the pain of building and maintaining your own CMS infrastructure. Use the Cosmic JS Headless CMS infrastructure and focus on what really matters: building great products and user experiences.


Cosmic JS Videos


Using Cosmic JS as a Headless CMS with Gatsby

\">

Build a Cosmic JS-powered blog using Gatsby

\">

Webinar: Localization with Cosmic JS and Gatsby

\">


Headless CMS Articles

How to Build a Simple Blog Using Node.js
How to Build a Node.js User Management App
How to Build a Cross-Platform Blog Using React Native and Node.js

Headless CMS Resources

Cosmic JS Docs
Headless CMS Features
Headless CMS Solutions
Official JavaScript Client
Cosmic JS GitHub

Examples

npm i cosmicjs

Then in your JavaScript file, get your content:

\">
","metafields":[{"children":null,"type":"file","title":"Image","key":"image","id":"LZfrzSUo5x","value":"309fbe40-04d2-11ea-944c-cfd32d7bf8a6-logo-big.jpg","url":"https://cdn.cosmicjs.com/309fbe40-04d2-11ea-944c-cfd32d7bf8a6-logo-big.jpg","imgix_url":"https://imgix.cosmicjs.com/309fbe40-04d2-11ea-944c-cfd32d7bf8a6-logo-big.jpg"},{"children":null,"type":"file","title":"Thumbnail","key":"thumbnail","id":"HhhaIdizlr","value":"309fbe40-04d2-11ea-944c-cfd32d7bf8a6-logo-big.jpg","url":"https://cdn.cosmicjs.com/309fbe40-04d2-11ea-944c-cfd32d7bf8a6-logo-big.jpg","imgix_url":"https://imgix.cosmicjs.com/309fbe40-04d2-11ea-944c-cfd32d7bf8a6-logo-big.jpg"},{"children":null,"type":"html-textarea","title":"Blurb","key":"blurb","id":"C43E6FAqEj","value":"

Cosmic is the best free Headless CMS for your websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

"},{"children":null,"type":"text","title":"Headline","key":"headline","id":"UYcYQQFTQ2","value":"Headless CMS"},{"children":null,"type":"text","title":"SEO Description","key":"seo_description","id":"6eqanUjWTe","value":"Cosmic is the best free Headless CMS for your websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators."},{"children":null,"type":"file","title":"Twitter Card Image","key":"twitter_card_image","id":"ZFsTAYz11u","value":"309fbe40-04d2-11ea-944c-cfd32d7bf8a6-logo-big.jpg","url":"https://cdn.cosmicjs.com/309fbe40-04d2-11ea-944c-cfd32d7bf8a6-logo-big.jpg","imgix_url":"https://imgix.cosmicjs.com/309fbe40-04d2-11ea-944c-cfd32d7bf8a6-logo-big.jpg"},{"children":null,"type":"html-textarea","title":"Code Example","key":"code_example","id":"l8dYUwtGsQ","value":""},{"children":null,"type":"text","title":"SEO Title","key":"seo_title","id":"dwQPeYaOEW","value":"Best Free Headless CMS"},{"children":[],"type":"repeater","title":"Videos","key":"videos","id":"frgtgqfrpylludl8pnsi","value":"","repeater_fields":[{"title":"Title","key":"title","value":"","type":"text","required":false},{"title":"Link","key":"link","value":"","type":"text","required":false}]}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"kb-articles","created_at":"2017-04-22T23:07:51.159Z","created_by":"5357ef811693be2118000001","created":"2019-11-11T22:24:09.673Z","status":"published","modified_at":"2020-06-27T19:18:20.853Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-06-27T19:18:20.853Z","unpublish_at":null,"metadata":{"image":{"url":"https://cdn.cosmicjs.com/309fbe40-04d2-11ea-944c-cfd32d7bf8a6-logo-big.jpg","imgix_url":"https://imgix.cosmicjs.com/309fbe40-04d2-11ea-944c-cfd32d7bf8a6-logo-big.jpg"},"thumbnail":{"url":"https://cdn.cosmicjs.com/309fbe40-04d2-11ea-944c-cfd32d7bf8a6-logo-big.jpg","imgix_url":"https://imgix.cosmicjs.com/309fbe40-04d2-11ea-944c-cfd32d7bf8a6-logo-big.jpg"},"blurb":"

Cosmic is the best free Headless CMS for your websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

","headline":"Headless CMS","seo_description":"Cosmic is the best free Headless CMS for your websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.","twitter_card_image":{"url":"https://cdn.cosmicjs.com/309fbe40-04d2-11ea-944c-cfd32d7bf8a6-logo-big.jpg","imgix_url":"https://imgix.cosmicjs.com/309fbe40-04d2-11ea-944c-cfd32d7bf8a6-logo-big.jpg"},"code_example":"","seo_title":"Best Free Headless CMS","videos":[]}},{"_id":"5e8627a91072ad0007f5624d","order":27,"slug":"new-add-ons-available","title":"New Add-Ons Available","content":"


We released our Additional Users Add-on last month and it has quickly become one of our most popular products. We think this is because teams like the ability to customize specific portions of their usage plan. We are happy to offer two more add-ons to help you get the most out of Cosmic while allowing more billing flexibility.


Add-ons Bundle
The new Add-ons Bundle combines all of our most popular Add-ons together in one value-added package. It includes Webhooks, Localization, Revision History, and Automatic Backups for 40% off of the price you would pay for all of the Add-ons individually.

To add this Add-on to your Bucket, login and go to Your Bucket > Settings > Billing. Then scroll down to find the Add-ons section.


Additional Files Add-On
Storing and delivering media in Cosmic is so easy and we want to make it even easier for you to make the most out of our Global CDN, image processing, and API tools to manage media. We are happy to offer the Additional Files Add-on to allow you to scale up your media usage.

To add this Add-on to your Bucket, login and go to Your Bucket > Settings > Billing. Then scroll down to find the Add-ons section.


We hope you like these additional products to help your team build great content-powered apps faster. If you have any questions, please reach out to us on Twitter and join our Slack channel.

","metafields":[{"children":null,"type":"object","title":"Author","key":"author","id":"9PMPa9zDGu","value":"5768b253163172890e00002c","object_type":"authors","object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"children":null,"type":"html-textarea","title":"Teaser","key":"teaser","id":"wY1H519s1T","value":"

We released our additional users Add-on a few weeks ago and it has become one of the most popular products. We think customers really like the flexibility it gives their team to upgrade just a portion of their usage plan instead of jumping up to the next plan. With that flexibility in mind, we are happy to offer two more add-ons to help you get the most out of Cosmic while allowing more billing flexibility.

"},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"6J3Ty9GVtA","value":"71a34f00-7521-11ea-bc96-7d100c64490e-add-on-options.jpg","url":"https://cdn.cosmicjs.com/71a34f00-7521-11ea-bc96-7d100c64490e-add-on-options.jpg","imgix_url":"https://imgix.cosmicjs.com/71a34f00-7521-11ea-bc96-7d100c64490e-add-on-options.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2020-04-03T17:58:01.493Z","created_by":"5357ef811693be2118000001","modified_at":"2020-04-03T14:22:32.313Z","created":"2020-04-03T17:58:01.494Z","status":"published","modified_by":"5357ef811693be2118000001","publish_at":null,"unpublish_at":null,"published_at":"2020-04-03T14:22:32.313Z","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

We released our additional users Add-on a few weeks ago and it has become one of the most popular products. We think customers really like the flexibility it gives their team to upgrade just a portion of their usage plan instead of jumping up to the next plan. With that flexibility in mind, we are happy to offer two more add-ons to help you get the most out of Cosmic while allowing more billing flexibility.

","featured_image":{"url":"https://cdn.cosmicjs.com/71a34f00-7521-11ea-bc96-7d100c64490e-add-on-options.jpg","imgix_url":"https://imgix.cosmicjs.com/71a34f00-7521-11ea-bc96-7d100c64490e-add-on-options.jpg"}}},{"_id":"5965373467a5c2304c000f37","slug":"simple-media-ditched-their-cms-for-the-cloud","title":"Simple Media Ditched Their CMS for the Cloud","content":"

When Simple Media has a new client project that needs their content delivered via the cloud quickly and easily, they choose Cosmic.  We are proud to serve them in their cause for the reimagining of the modern interactive agency. Check out examples from The Arnold Companies below. 



Simple Media was mired in legacy installed content management systems like WordPress. They needed a way to build apps faster while still giving clients the keys to manage their own content. They went API-first with Cosmic and are elated with their results. 


"We've now increased overall agency bandwidth by 40% in most cases. Our old projects built in WordPress couldn't be done in Agile methodology. You can't build a module and then attach the front end in WordPress. Cosmic has doubled\r\nour productivity by allowing our developers to work in tandem.  We now have the flexibility of executing back end development first and then complete front end development once the creative is ready. Because UI and UX are already done, Object Development\r\ncan almost beat the front end Sketch files  and Prototyping via Invision App in the project cycle now."

— Nick Bonanno, Principal

","metafields":[{"value":"Simple Media","key":"company","title":"Company","type":"text","children":null},{"value":"Interactive Agency","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"When Simple Media has a new client project that needs their content delivered via the cloud quickly and easily, they choose Cosmic. We are proud to serve them in their cause for the reimagining of the modern interactive agency.","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"6460bbe0-e2d6-11e8-bddc-fb70105a463b-spUh8MJc_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/6460bbe0-e2d6-11e8-bddc-fb70105a463b-spUh8MJc_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/6460bbe0-e2d6-11e8-bddc-fb70105a463b-spUh8MJc_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created":"2017-07-11T20:38:12.836Z","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","status":"published","order":28,"publish_at":null,"published_at":"2018-11-07T21:45:08.985Z","metadata":{"company":"Simple Media","industry_type":"Interactive Agency","teaser":"When Simple Media has a new client project that needs their content delivered via the cloud quickly and easily, they choose Cosmic. We are proud to serve them in their cause for the reimagining of the modern interactive agency.","logo":{"url":"https://cdn.cosmicjs.com/6460bbe0-e2d6-11e8-bddc-fb70105a463b-spUh8MJc_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/6460bbe0-e2d6-11e8-bddc-fb70105a463b-spUh8MJc_400x400.jpg"}}},{"_id":"5db749a3a3117f0007882e4d","order":28,"slug":"infrastructure-upgrade-new-metafields-and-more","title":"Infrastructure Upgrade, New Metafields, and more","content":"

This changelog announcement is a big one for us and includes:

  1. Upgraded infrastructure
  2. New Metafields and
  3. Optimizations to our open source clients.


1. Infrastructure Upgrade

We're happy to tell you that all Cosmic components are now powered 100% by serverless technologies. By running completely even-driven using AWS Lambda functions, the REST API, GraphQL API, Dashboard application,\r\nand the website are now infinitely scalable through high traffic loads.

This is huge, because it means you can depend on us to deliver your content through the highest traffic loads with dynamic server capacity on demand. This is also big for the Cosmic team, because we are now able to\r\nmake product improvements at a higher velocity with a more streamlined deployment process.

We have also added a caching service to our website to serve our website resources at the edge. Your team can now get to any resource on cosmicjs.com faster and easier with at least 10x faster page loading from any spot on the globe.



2. New Metafields

We have added Boolean Switch and Number Metafields to our list of available Metafield types. We recommend that if you are using Text Metafields for either of these value types, that you switch to these new Metafields.

New Switch Metafield in action:



3. Open Source Optimizations

We've added additional optimizations to our popular Cosmic NPM module and Gatsby source plugin. By adding the Accept-Encoding: gzip header to encode responses, API load times and payload sizes have been cut in half. Install the latest versions of these libraries to get this improvement (3.2.35 and 1.0.4 respectively).


We're on a mission to build the best CMS on the planet, and your feedback helps! If you have any questions or feature requests, reach out to us on Twitter, and join our Slack channel. Happy building!

","metafields":[{"value":"2019-10-29","key":"published_date","title":"Published Date","type":"date","children":null},{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"9df91f50-fa5e-11e9-a283-8f31669300b6-cosmic-lambda.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/9df91f50-fa5e-11e9-a283-8f31669300b6-cosmic-lambda.jpg","imgix_url":"https://imgix.cosmicjs.com/9df91f50-fa5e-11e9-a283-8f31669300b6-cosmic-lambda.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"changelogs","created_at":"2019-10-28T20:03:47.995Z","created_by":"5357ef811693be2118000001","modified_at":"2020-08-10T13:59:43.225Z","created":"2019-10-28T20:03:47.995Z","status":"published","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-10-29T15:16:58.760Z","metadata":{"published_date":"2019-10-29","author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"featured_image":{"url":"https://cdn.cosmicjs.com/9df91f50-fa5e-11e9-a283-8f31669300b6-cosmic-lambda.jpg","imgix_url":"https://imgix.cosmicjs.com/9df91f50-fa5e-11e9-a283-8f31669300b6-cosmic-lambda.jpg"}}},{"_id":"5e13d0ec700fc30008a68b35","order":28,"slug":"developer-spotlight-lydia-hallie","title":"Developer Spotlight: Lydia Hallie","content":"

In this episode of the Cosmic Developer Spotlight Series, we chatted with Lydia Hallie, software developer and active contributor on Dev.to. She has been getting a lot of attention for her easy-to-follow (and beautifully visual!) educational resources for JavaScript. Follow Lydia on Twitter, GitHub, LinkedIn, and enjoy the conversation.


When did you first begin building software?
I got introduced to the concept of “programming” when I was quite young, around 9 years old. I had no idea this was programming though, I just thought it was something fun you could do as a kid (I mainly built basic games in python!). 

When I was around 13 I started blogging on Tumblr and developed my own layouts on there, that’s when I got introduced to HTML/CSS/JavaScript etc. I loved it, but I had no idea this could potentially be a future career option! (….I also used the inspector tools very often to try and change my grades on my school’s website haha. Little did I know that it did not in fact change the grades in the database, but I felt so cool when I found this feature in the browser. True hackerman moment.).

After graduating high school I got into it more seriously. I started playing around with Ruby on Rails, learned python for real, C#, and of course the love of my life JavaScript.


What is your preferred development stack?
I currently build most of my projects using TypeScript, React, Node, Serverless, GraphQL, and recently started with Golang which has been great so far! 


What past projects are you most proud of and why?
Haha I always feel so bad when I’m not actively creating open source projects so I’m proud of things I created just to make my own life easier. Although I’m not “proud” of it, I always use a simple CLI tool I built to track\r\nmy daily mood, how my motivation was that way, what I learned that day, and what I wish I’d done better. For some reason I’m always too lazy to write it down in a physical diary, but doing it through the terminal is so much easier.  Tracking\r\nmy personal progress this way has positively affected my life so much and it let me make connections between certain events and my mood/motivation that I couldn’t make myself through analyzing the data. 


What are some technologies you are excited about or want to learn more about?
I really want to start building more with ReasonML. But I usually don’t really learn technologies just because it’s “new” and “trendy”, I learn them when they’re useful in a project I’m working on. I want\r\nto understand tools better that I’m currently taking for granted, like the internals of a browser, computer architecture, networking, cyber security, etc. 


You are very active in the developer community with your educational content. Can you share some thoughts about why you think this is important?
“A teacher can make you or break you”, I’ve had so many horrible teachers in my life that totally ruined my interest for a certain subject, even though the subject turned out to be super interesting and fascinating. It’s the worst\r\nwhen you have a teacher that isn’t actually passionate about the subject and just leaves you confused. I noticed that people liked the way I explain things, and I love showing others how cool and fun programming can actually be. You can be so extremely\r\ncreative in this field, anything is possible. That said, I could never just do this as my main thing, I’m still programming way more than creating educational content. But I have no hobbies besides coding so it’s the best way to spend my “free\r\ntime” haha!


Where are your favorite places (online or offline) to go to learn more about emerging trends in technology and software development?
I learn about the latest things through either my network, conferences, or my Twitter feed. Sometimes\r\nI go to course websites like Pluralsight, but courses usually don’t really work for me, I can’t focus for long enough haha. I just get started with the new tool, build something with it, and if I run into issues I just reach out to the maintainer\r\n:) 


The Cosmic Spotlight Series is dedicated to showcasing developers that are building apps using modern tools and contribute to the developer ecosystem. To contribute to Cosmic go to the contributor page. To stay connected with us follow us on Twitter and join the conversation on Slack.

","metafields":[{"children":null,"type":"object","title":"Author","key":"author","id":"jNqp7Kkyc6","value":"5768b253163172890e00002c","object_type":"authors","object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"children":null,"type":"html-textarea","title":"Teaser","key":"teaser","id":"HWlDDLKfE2","value":"

In this episode of the Cosmic Developer Spotlight Series, we chatted with Lydia Hallie, remote software developer and active contributor on Dev.to. She has been getting a lot of attention for her easy-to-follow (and beautifully visual!) educational resources for JavaScript. Follow Lydia on Twitter, GitHub, LinkedIn, and enjoy the conversation.

"},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"301btw7vPC","value":"2b19acb0-5a5e-11ea-9572-1731ae9ada3f-lydia-hallie.jpg","url":"https://cdn.cosmicjs.com/2b19acb0-5a5e-11ea-9572-1731ae9ada3f-lydia-hallie.jpg","imgix_url":"https://imgix.cosmicjs.com/2b19acb0-5a5e-11ea-9572-1731ae9ada3f-lydia-hallie.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2020-01-07T00:29:31.978Z","created_by":"5357ef811693be2118000001","modified_at":"2020-10-02T02:07:53.246Z","created":"2020-01-07T00:29:31.978Z","status":"published","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-02-28T19:13:33.603Z","unpublish_at":null,"metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

In this episode of the Cosmic Developer Spotlight Series, we chatted with Lydia Hallie, remote software developer and active contributor on Dev.to. She has been getting a lot of attention for her easy-to-follow (and beautifully visual!) educational resources for JavaScript. Follow Lydia on Twitter, GitHub, LinkedIn, and enjoy the conversation.

","featured_image":{"url":"https://cdn.cosmicjs.com/2b19acb0-5a5e-11ea-9572-1731ae9ada3f-lydia-hallie.jpg","imgix_url":"https://imgix.cosmicjs.com/2b19acb0-5a5e-11ea-9572-1731ae9ada3f-lydia-hallie.jpg"}}},{"_id":"5dd2a17ef01ded0008e10f85","order":28,"slug":"mobile-cms","title":"Mobile Apps CMS","content":"

Cosmic JS makes it easy to manage content for your mobile applications.  Install the Official Cosmic JS JavaScript Client to add dynamic content to your React Native app.  Get a feel for mobile app development by taking a spin through Mobile apps and check out the tutorials below.

You can connect to the REST API or GraphQL API to get your content.

Mobile CMS Articles

How to Make a Simple Twitter Clone with React Native
How to Build a Cross-Platform Blog Using React Native and Node.js

Mobile CMS Resources

Cosmic JS Docs
Official JavaScript Client
Cosmic JS GitHub

Examples

npm i cosmicjs

Then in your JavaScript file, get your content:

\">
","metafields":[{"children":null,"type":"file","title":"Image","key":"image","id":"nsK5n7tAzt","value":"f4af2090-0a0a-11ea-95fe-01afbd7f5f3b-best-mobile-cms.svg","url":"https://cdn.cosmicjs.com/f4af2090-0a0a-11ea-95fe-01afbd7f5f3b-best-mobile-cms.svg","imgix_url":"https://imgix.cosmicjs.com/f4af2090-0a0a-11ea-95fe-01afbd7f5f3b-best-mobile-cms.svg"},{"children":null,"type":"file","title":"Thumbnail","key":"thumbnail","id":"5Si89uYlzk","value":"f4af2090-0a0a-11ea-95fe-01afbd7f5f3b-best-mobile-cms.svg","url":"https://cdn.cosmicjs.com/f4af2090-0a0a-11ea-95fe-01afbd7f5f3b-best-mobile-cms.svg","imgix_url":"https://imgix.cosmicjs.com/f4af2090-0a0a-11ea-95fe-01afbd7f5f3b-best-mobile-cms.svg"},{"children":null,"type":"html-textarea","title":"Blurb","key":"blurb","id":"HL2jvoCB5J","value":"

Cosmic is the best CMS for your mobile websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

"},{"children":null,"type":"text","title":"Headline","key":"headline","id":"7w9cyeFol3","value":"Mobile Apps"},{"children":null,"type":"text","title":"SEO Description","key":"seo_description","id":"ABLbLBIhx3","value":"Cosmic is the best CMS for your mobile websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators."},{"children":null,"type":"file","title":"Twitter Card Image","key":"twitter_card_image","id":"bKgxBCGPGM","value":"309fbe40-04d2-11ea-944c-cfd32d7bf8a6-logo-big.jpg","url":"https://cdn.cosmicjs.com/309fbe40-04d2-11ea-944c-cfd32d7bf8a6-logo-big.jpg","imgix_url":"https://imgix.cosmicjs.com/309fbe40-04d2-11ea-944c-cfd32d7bf8a6-logo-big.jpg"},{"children":null,"type":"html-textarea","title":"Code Example","key":"code_example","id":"0nkZe2ltKR","value":""},{"children":null,"type":"text","title":"SEO Title","key":"seo_title","id":"NjtyUYAvSU","value":"Best Headless CMS for Mobile Apps"},{"children":[],"type":"repeater","title":"Videos","key":"videos","id":"OTTAsKOJHs","value":"","repeater_fields":[{"title":"Title","key":"title","value":"","type":"text","required":false},{"title":"Link","key":"link","value":"","type":"text","required":false}]},{"children":null,"type":"html-textarea","title":"Page Overview","key":"page_overview","id":"qgkci7dgbobexabk1bku","value":""},{"children":null,"type":"html-textarea","title":"SEO Content","key":"seo_content","id":"aacezqvouguzizybwdwd","value":"

Cosmic is the best CMS for Mobile websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"kb-articles","created_at":"2017-04-22T23:07:51.159Z","created_by":"5357ef811693be2118000001","created":"2019-11-18T13:49:50.244Z","status":"published","modified_at":"2020-08-14T21:52:46.574Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-08-14T21:52:46.574Z","unpublish_at":null,"metadata":{"image":{"url":"https://cdn.cosmicjs.com/f4af2090-0a0a-11ea-95fe-01afbd7f5f3b-best-mobile-cms.svg","imgix_url":"https://imgix.cosmicjs.com/f4af2090-0a0a-11ea-95fe-01afbd7f5f3b-best-mobile-cms.svg"},"thumbnail":{"url":"https://cdn.cosmicjs.com/f4af2090-0a0a-11ea-95fe-01afbd7f5f3b-best-mobile-cms.svg","imgix_url":"https://imgix.cosmicjs.com/f4af2090-0a0a-11ea-95fe-01afbd7f5f3b-best-mobile-cms.svg"},"blurb":"

Cosmic is the best CMS for your mobile websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

","headline":"Mobile Apps","seo_description":"Cosmic is the best CMS for your mobile websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.","twitter_card_image":{"url":"https://cdn.cosmicjs.com/309fbe40-04d2-11ea-944c-cfd32d7bf8a6-logo-big.jpg","imgix_url":"https://imgix.cosmicjs.com/309fbe40-04d2-11ea-944c-cfd32d7bf8a6-logo-big.jpg"},"code_example":"","seo_title":"Best Headless CMS for Mobile Apps","videos":[],"page_overview":"","seo_content":"

Cosmic is the best CMS for Mobile websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

"}},{"_id":"59e823999caa0d8664000574","slug":"modern-cms","title":"Modern CMS","content":"

Cosmic JS offers a powerful CMS for any website or web-based application.  Install the Official Cosmic JS JavaScript Client to integrate content into your app in minutes.  Or simply use the REST API.  Get a feel for Cosmic JS by taking a spin through our apps and check out the tutorials below.

Modern CMS Articles

Why Go API-first?
The Cosmic Stack
Three Reasons Why Agencies Should be Using a CMS API
Managing Users Who Manage Content
Cosmic Content Editor

Modern CMS Resources

Cosmic JS Docs
Official JavaScript Client
Cosmic JS GitHub

Examples

npm i cosmicjs

Then in your JavaScript file, get your content:

\">
","metafields":[{"children":null,"type":"file","title":"Image","key":"image","id":"6k16awbYFW","value":"e9b89b20-b481-11e7-a8f7-d1677c94aba6-web.svg","url":"https://cdn.cosmicjs.com/e9b89b20-b481-11e7-a8f7-d1677c94aba6-web.svg","imgix_url":"https://imgix.cosmicjs.com/e9b89b20-b481-11e7-a8f7-d1677c94aba6-web.svg"},{"children":null,"type":"file","title":"Thumbnail","key":"thumbnail","id":"VOKKL1NM4c","value":"e9b89b20-b481-11e7-a8f7-d1677c94aba6-web.svg","url":"https://cdn.cosmicjs.com/e9b89b20-b481-11e7-a8f7-d1677c94aba6-web.svg","imgix_url":"https://imgix.cosmicjs.com/e9b89b20-b481-11e7-a8f7-d1677c94aba6-web.svg"},{"children":null,"type":"html-textarea","title":"Blurb","key":"blurb","id":"WAE31SYDSE","value":"

Cosmic is the best modern CMS for websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

"},{"children":null,"type":"text","title":"Headline","key":"headline","id":"xUjJfhwjk4","value":"CMS"},{"children":null,"type":"text","title":"SEO Description","key":"seo_description","id":"ohtaCsPFlg","value":"Cosmic is the best modern CMS for websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators."},{"children":null,"type":"file","title":"Twitter Card Image","key":"twitter_card_image","id":"CRkaULwB71","value":"d0a2f1d0-b481-11e7-a8f7-d1677c94aba6-web.jpg","url":"https://cdn.cosmicjs.com/d0a2f1d0-b481-11e7-a8f7-d1677c94aba6-web.jpg","imgix_url":"https://imgix.cosmicjs.com/d0a2f1d0-b481-11e7-a8f7-d1677c94aba6-web.jpg"},{"children":null,"type":"html-textarea","title":"Code Example","key":"code_example","id":"ePB6g14ykS","value":""},{"children":null,"type":"text","title":"SEO Title","key":"seo_title","id":"9qe0evDlCe","value":"Best Modern CMS"},{"children":[],"type":"repeater","title":"Videos","key":"videos","id":"frgtgqfrpylludl8pnsi","value":"","repeater_fields":[{"title":"Title","key":"title","value":"","type":"text","required":false},{"title":"Link","key":"link","value":"","type":"text","required":false}]}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"kb-articles","created":"2017-10-19T04:01:29.379Z","created_at":"2017-10-19T03:50:16.379Z","modified_at":"2020-06-27T19:27:52.231Z","created_by":"5357ef811693be2118000001","modified_by":"5357ef811693be2118000001","status":"published","publish_at":null,"order":29,"published_at":"2020-06-27T19:27:52.231Z","unpublish_at":null,"metadata":{"image":{"url":"https://cdn.cosmicjs.com/e9b89b20-b481-11e7-a8f7-d1677c94aba6-web.svg","imgix_url":"https://imgix.cosmicjs.com/e9b89b20-b481-11e7-a8f7-d1677c94aba6-web.svg"},"thumbnail":{"url":"https://cdn.cosmicjs.com/e9b89b20-b481-11e7-a8f7-d1677c94aba6-web.svg","imgix_url":"https://imgix.cosmicjs.com/e9b89b20-b481-11e7-a8f7-d1677c94aba6-web.svg"},"blurb":"

Cosmic is the best modern CMS for websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

","headline":"CMS","seo_description":"Cosmic is the best modern CMS for websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.","twitter_card_image":{"url":"https://cdn.cosmicjs.com/d0a2f1d0-b481-11e7-a8f7-d1677c94aba6-web.jpg","imgix_url":"https://imgix.cosmicjs.com/d0a2f1d0-b481-11e7-a8f7-d1677c94aba6-web.jpg"},"code_example":"","seo_title":"Best Modern CMS","videos":[]}},{"_id":"5bd9f2a41f78072de15afdd3","order":29,"slug":"trailercraft-builds-a-website-using-react-nextjs-and-cosmic-js","title":"TrailerCraft Builds a Website using React, Next.js and Cosmic","content":"

TrailerCraft, Inc has been owned and operated by Alaskans since its inception in 1969. Today it's one of the leading truck and transportation industry parts and sales facilities in Alaska, providing state of the art solutions for transport, handicap and recreational needs by selective affiliations with proven national franchises.



TrailerCraft needed a new website to provide information and service to its Alaskan audience, whose internet connectivity can vary wildly due to the landscape. Key needs for the new website were fast / optimized load times and dynamic content management, so TrailerCraft chose interactive agency High Point to built its zippy new React / Next.js website using Cosmic.



TrailerCraft's Team Shares Feedback on Cosmic:

Developer: "The Imigx integration that Cosmic has out of the box was key to serving a beautiful, image-filled site that was well optimized. We built the site with React and Next.js server side rendering. This way the site loads fast, is SEO-compatible, and when navigating the site, only the resources needed for fallowing pages are requested, keeping load times to a strict minimum."

Content Creator: "From a marketer's perspective (and having a much less technical background) I really enjoy how easy it is for a novice to be able to edit and make changes on the backend. It's a very "easy to use" system to keep our website up to date without the struggle of contacting a web development team each time we need an update."

Developer: "The Cosmic API plugin for React made requesting data a breeze and the built-in hosting makes deployments and updating super quick and easy."



"Cosmic allowed us to build a website and deliver content management exactly how we wanted it, specific for our needs. A breath of fresh air compared to the inevitably bloated admin panel that would have resulted if we used WordPress. The support team are total rock stars as well."

— Brandon Reid, Lead Developer   

","metafields":[{"value":"TrailerCraft","key":"company","title":"Company","type":"text","children":null},{"value":"Freightliner","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"TrailerCraft, Inc has been owned and operated by Alaskans since its inception in 1969. Today it's one of the leading truck and transportation industry parts and sales facilities in Alaska, providing state of the art solutions for transport, handicap and recreational needs by selective affiliations with proven national franchises.\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"853efab0-dd41-11e8-a404-4bdbcb86a80c-tc-logo-lg.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/853efab0-dd41-11e8-a404-4bdbcb86a80c-tc-logo-lg.png","imgix_url":"https://imgix.cosmicjs.com/853efab0-dd41-11e8-a404-4bdbcb86a80c-tc-logo-lg.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-07-16T20:38:24.222Z","created_by":"5716b504e9c686d006000073","created":"2018-10-31T18:21:24.851Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-12-11T20:05:05.919Z","metadata":{"company":"TrailerCraft","industry_type":"Freightliner","teaser":"TrailerCraft, Inc has been owned and operated by Alaskans since its inception in 1969. Today it's one of the leading truck and transportation industry parts and sales facilities in Alaska, providing state of the art solutions for transport, handicap and recreational needs by selective affiliations with proven national franchises.\n","logo":{"url":"https://cdn.cosmicjs.com/853efab0-dd41-11e8-a404-4bdbcb86a80c-tc-logo-lg.png","imgix_url":"https://imgix.cosmicjs.com/853efab0-dd41-11e8-a404-4bdbcb86a80c-tc-logo-lg.png"}}},{"_id":"5ddd5512cc6ea60007b6c749","order":29,"slug":"introducing-gatsby-preview-for-cosmic-js","title":"Introducing Gatsby Preview for Cosmic","content":"

This article was originally published on the Gatsby Blog.

We’re excited to announce the official release of Gatsby Preview for Cosmic. This new integration enables you to add powerful content preview functionality to your Cosmic Gatsby website.


Getting Started

  1. First go to the Gatsby Getting Started Page and follow the links for Cosmic.
  2. Select the Cosmic-powered Gatsby Blog
  3. You will then be asked for your GitHub and Cosmic authentication, so make sure you have both accounts set up (sign up for Cosmic here).
  4. After onboarding, go to any Post in your Cosmic Bucket and find the big, beautiful, purple button to preview your content. 


\"Cosmic


What happens?

After clicking the “Open Preview” button, a new tab will open to instantly show you what the content looks like for this specific version on your Gatsby website. This simple one-click preview will greatly enhance your content team’s\r\ncontent-creation workflow.

\"Cosmic


How did this integration happen?

The Cosmic / Gatsby Preview integration is the result of close collaboration between both teams to make the integration as easy as possible. Both sides had to refactor a bit of existing functionality to make it seamless. And the feedback that came\r\nfrom the collaboration effort actually helped to improve both products. We’re happy to say this powerful feature can be integrated in just a few clicks.


Why is this a big deal?

Both Gatsby and Cosmic believe deeply in providing developers the best development experience possible. But it’s not just about developers. Content creation team members are crucial to building great web products. And one of the most requested\r\nfeatures for content creators is preview, but this has been a challenge for developer teams pushing for highly-optimized JAMStack websites built on Gatsby.

Gatsby Preview solves this problem by providing a simple button for content creators to experience an instant preview of content directly in the CMS dashboard. Gatsby preview with the Cosmic headless CMS, is a further extension to empower content creators to preview content quickly and easily, giving teams faster content marketing velocity.


What’s next?

We’re excited to continue to work closely with the Gatsby team to help create more value-added integrations between both services. It’s our goal to continue to provide the full spectrum of team members the best tools to be successful.

Our users have been very helpful with letting us know ways to improve the Cosmic + Gatsby stack combo. So if you have any suggestions on ways we can improve, please let us know in the Cosmic Slack channel or on our Twitter.


Happy building!

— Tony and the Cosmic Team

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","id":"Vos3yQSrg9","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"id":"VNXMnh3TG8","key":"teaser","title":"Teaser","type":"html-textarea","children":null,"value":"

We’re excited to announce the official release of Gatsby Preview for Cosmic that enables you to add powerful content preview functionality to your Cosmic Gatsby website.

"},{"value":"15b01db0-106b-11ea-95fe-01afbd7f5f3b-gatsby-cosmic.jpg","id":"dun58avqID","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/15b01db0-106b-11ea-95fe-01afbd7f5f3b-gatsby-cosmic.jpg","imgix_url":"https://imgix.cosmicjs.com/15b01db0-106b-11ea-95fe-01afbd7f5f3b-gatsby-cosmic.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2019-11-26T16:38:42.877Z","created_by":"5357ef811693be2118000001","modified_at":"2020-10-02T02:07:53.246Z","created":"2019-11-26T16:38:42.877Z","status":"published","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-12-02T15:35:19.146Z","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

We’re excited to announce the official release of Gatsby Preview for Cosmic that enables you to add powerful content preview functionality to your Cosmic Gatsby website.

","featured_image":{"url":"https://cdn.cosmicjs.com/15b01db0-106b-11ea-95fe-01afbd7f5f3b-gatsby-cosmic.jpg","imgix_url":"https://imgix.cosmicjs.com/15b01db0-106b-11ea-95fe-01afbd7f5f3b-gatsby-cosmic.jpg"}}},{"_id":"5d93c087b23065032f5b6348","order":29,"slug":"filters-and-smart-views","title":"Filters and Smart Views","content":"

We're excited to release a new feature that should be a huge time-saver for finding and using your Bucket content: Filters and Smart Views. You can now filter and save smart views in your Objects table view in the Dashboard.

Filter and Save Smart View

Check it out by logging in and going to any Object Type in your Bucket. 


Filters
Click the "Filters" button on any Object Type table view in the Dashboard. Filter Objects by:


Smart views
You can then save your filtered content into "Smart Views" that will be added to the sidebar of your Bucket dashboard for easy access. Save for just yourself, or for your whole team.


API Filtering
After filtering, click the "Developer Tools" button to then get the API REST request and NPM module code for your filter options. Metadata filters are available in the latest NPM module v3.2.31. Read more about all NPM and API options in the Cosmic docs.

It looks\r\nlike this:

\">

I hope you enjoy the new capabilities. This feature comes as a direct response to users that needed a better way to find and filter content.

If you have any questions or update that you would like to see shipped, please reach out to us on Twitter and join the conversation on Slack.

","metafields":[{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"roVXMlQ8u8","value":"2019-10-02"},{"children":null,"type":"object","title":"Author","key":"author","id":"qW23hQni5o","value":"5768b253163172890e00002c","object_type":"authors","object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"onE1KWeC7u","value":"","url":null,"imgix_url":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"changelogs","created_at":"2019-10-01T21:09:27.323Z","created_by":"5357ef811693be2118000001","modified_at":"2020-08-10T14:02:39.393Z","created":"2019-10-01T21:09:27.323Z","status":"published","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-08-10T14:00:31.970Z","unpublish_at":null,"metadata":{"published_date":"2019-10-02","author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"featured_image":{"url":null,"imgix_url":null}}},{"_id":"59f102cbd4de657279002f97","order":30,"slug":"datalyze-solutions-adds-blog-and-job-feeds","title":"Datalyze Solutions Adds a Blog Feed","content":"

Data. Intelligence. Applications. Location Based Analytics. When everything is converging, teams needs collaboration tools to make their lives easier. That's why Datalyze Solutions chooses Cosmic to deliver its content from the cloud for its Blog feeds. 



"Cosmic has been in use at Datalyze Solutions for more than one and a half years. Cosmic has become a critically important tool for us to publish blog posts quickly and easily. This way, our customers and partners can stay informed about the latest news from our company and other industry-relevant information. Cosmic offers exactly the flexibility and features we really need as content editors!"

— Carolin Bauer, Content Editor and Marketing Manager

","metafields":[{"value":"Datalyze Solutions","key":"company","title":"Company","type":"text","children":null},{"value":"Internet","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Data. Intelligence. Applications. Location Based Analytics. When everything is converging, teams needs collaboration tools to make their lives easier.","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"b4173bb0-dc2d-11e7-9201-fb5838341592-DS_Logo_Blau.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/b4173bb0-dc2d-11e7-9201-fb5838341592-DS_Logo_Blau.png","imgix_url":"https://imgix.cosmicjs.com/b4173bb0-dc2d-11e7-9201-fb5838341592-DS_Logo_Blau.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2017-10-25T21:31:55.033Z","created_by":"5716b504e9c686d006000073","created":"2017-10-25T21:31:55.033Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"metadata":{"company":"Datalyze Solutions","industry_type":"Internet","teaser":"Data. Intelligence. Applications. Location Based Analytics. When everything is converging, teams needs collaboration tools to make their lives easier.","logo":{"url":"https://cdn.cosmicjs.com/b4173bb0-dc2d-11e7-9201-fb5838341592-DS_Logo_Blau.png","imgix_url":"https://imgix.cosmicjs.com/b4173bb0-dc2d-11e7-9201-fb5838341592-DS_Logo_Blau.png"}}},{"_id":"5d24ecc0144e051131561889","order":30,"slug":"developer-spotlight-jamie-introcaso","title":"Developer Spotlight: Jamie Introcaso","content":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Jamie Introcaso, an experienced Software Developer residing in Charlotte, North Carolina. Jamie is an active member of the Cosmic Community and recently shared a blog documenting his migration from WordPress to Cosmic using the WordPress Importer Extension. With more community projects on the way, we're excited to interview one of our own for this Spotlight. 😎 Check Jamie out on his Cosmic-powered website, Twitter and LinkedIn, and enjoy the conversation.

Cosmic: When did you first begin building software?
Jamie: After graduating high school, I worked as a live sound engineer and bartender for almost 15 years before deciding to go back to school and finish my bachelors degree. During my time working as a sound engineer, I had noticed how much more was being done using technology and software. I have always been drawn to technology from a young age, so that passion paired with the job growth in the industry made getting a degree in computer science an easy choice. I graduated in 2014 and have been working professionally in the field since then. And it has been super rewarding. Everyday I am learning something or even better teaching someone about something to solve a problem.

What is your preferred development stack?
I have mostly worked in the C#/.NET stack in various forms such as WebForms and MVC and that is what I feel most comfortable with. I am starting to try and branch out a little bit more and learning more front end frameworks. It is nice because I can still have the familiarity of .NET using WebAPI and grow my skills using a new front end framework.

What past projects are you most proud of and why?
I would say the project I am most proud of is a MES (Manufacturing Execution System) that was built by myself and two other developers. It was my first time leading and architecting a project from the ground up so that was good and bad and exciting and scary. Luckily I had a great team supporting me. I still would marvel when I would visit the plant and see all these operators using software that I had built. It was definitely a trial by fire experience. I realized that they were not going to shut the plant down during our initial “go live” so I could fix my software! But I also realized that I was up to the task and was able to execute a project and implement it at a professional level.

What made you want to get away from WordPress and shift to a headless CMS?
I initially went to WordPress out of convenience, maybe more so laziness actually. It was just so easy to get a blog up and running. And it was. I had a nice editor to type my blog posts for the world to read. And I could go in and click and add pretty themes and plugins that supposedly improved my performance and caching, basically treating symptoms caused by WordPress itself! It was just madness! 

I tried to set up a WordPress development environment a couple of times to tweak my site and it was so frustrating! I can make a UI. I just needed the part where I could host my content and have it delivered to me. That is what led me to looking into the idea of a Headless CMS. For someone like me who was versed in programming applications, it just made sense. The idea of just having something that would deliver my content to me and allow me to implement it in the way of my choosing was so liberating. And have you ever tried to migrate a WordPress site from one environment to another? It’s maddening!!

What's your best advice to a developer mired in WordPress right now?
Ask yourself how much of your development time is spent creating workarounds in how WordPress handles things. How much time have you spent on updates for WordPress? Fixing broken plugins? Rolling back changes and doing database updates? Think about what you could use that time for. Put more time into your site. Create another site. Spend more time with your friends and family. There is a better way. You have all the tools you need to move away from WordPress. More than likely you know HTML and CSS and JavaScript. That is all you need. Cosmic has the tools to migrate your posts into their API in a matter of minutes.

What are some technologies you are excited to learn more about?
As I mentioned before I am starting to explore learning some front end frameworks. Primarily Angular is what I have been working on learning. At my current position, we are using it so it is nice to get paid to learn it! I also have a desire to learn more NodeJS. I have used it a little bit, and I just think that deeper learning of Javascript in both the front and back ends will be useful to me in my career. Other than those, I feel like learning other technologies and concepts that help scalability and reliability are the next key things for me to focus on. I think knowledge of things like microservices, containerization, distributed systems and system design are conceptually some of the next things that I will be focusing on learning.

The Cosmic Spotlight Series is dedicated to showcasing developers that are building apps using modern tools. Learn how to contribute here. To stay connected with us follow us on Twitter and join the conversation on Slack.

Photo by Christopher Gower on Unsplash

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"key":"teaser","title":"Teaser","type":"html-textarea","children":null,"value":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Jamie Introcaso, an experienced Software Developer residing in Charlotte, North Carolina. Jamie is an active member of the Cosmic Community and recently wrote a blog detailing his migration from WordPress to Cosmic. With more community projects on the way, we're excited to interview one of our own for this Spotlight. 😎 Follow Jamie on his Cosmic-powered website, Twitter and LinkedIn and enjoy the conversation.

"},{"value":"3e0e3d10-cb55-11e9-834a-5307b4b63f5d-m_HRfLhgABo.jpg?q=&auto=compress,enhance,&w=1200&h=1000&fit=crop&crop=top,left,","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/3e0e3d10-cb55-11e9-834a-5307b4b63f5d-m_HRfLhgABo.jpg?q=&auto=compress,enhance,&w=1200&h=1000&fit=crop&crop=top,left,","imgix_url":"https://imgix.cosmicjs.com/3e0e3d10-cb55-11e9-834a-5307b4b63f5d-m_HRfLhgABo.jpg?q=&auto=compress,enhance,&w=1200&h=1000&fit=crop&crop=top,left,"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2019-07-09T19:36:32.628Z","created_by":"5716b504e9c686d006000073","modified_at":"2020-10-02T02:07:53.246Z","created":"2019-07-09T19:36:32.628Z","status":"published","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-08-30T18:41:02.332Z","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Jamie Introcaso, an experienced Software Developer residing in Charlotte, North Carolina. Jamie is an active member of the Cosmic Community and recently wrote a blog detailing his migration from WordPress to Cosmic. With more community projects on the way, we're excited to interview one of our own for this Spotlight. 😎 Follow Jamie on his Cosmic-powered website, Twitter and LinkedIn and enjoy the conversation.

","featured_image":{"url":"https://cdn.cosmicjs.com/3e0e3d10-cb55-11e9-834a-5307b4b63f5d-m_HRfLhgABo.jpg?q=&auto=compress,enhance,&w=1200&h=1000&fit=crop&crop=top,left,","imgix_url":"https://imgix.cosmicjs.com/3e0e3d10-cb55-11e9-834a-5307b4b63f5d-m_HRfLhgABo.jpg?q=&auto=compress,enhance,&w=1200&h=1000&fit=crop&crop=top,left,"}}},{"_id":"5b02c9008435cd1b1f0acec5","order":30,"slug":"ar-cms","title":"AR CMS","content":"

Augmented reality applications require dynamic content.  Cosmic JS makes it easy to manage content for your AR applications.

AR CMS Resources

React VR Art Gallery Example
Video: React VR Art Gallery App
VR Case Study: Medical Realities 
VR Case Study: Unleashed XR
Cosmic JS Docs
Official JavaScript Client
Cosmic JS GitHub

Using the Cosmic JS NPM Module

npm i cosmicjs

Then in your JavaScript file, get your content:

\">

Augmented Reality icon by Alessandro Suraci from the Noun Project

","metafields":[{"children":null,"type":"file","title":"Image","key":"image","id":"CoIglQVuP8","value":"cbefd7c0-5cfb-11e8-9276-0b00f900a0a0-ar.png","url":"https://cdn.cosmicjs.com/cbefd7c0-5cfb-11e8-9276-0b00f900a0a0-ar.png","imgix_url":"https://imgix.cosmicjs.com/cbefd7c0-5cfb-11e8-9276-0b00f900a0a0-ar.png"},{"children":null,"type":"file","title":"Thumbnail","key":"thumbnail","id":"hMpzIEcCjr","value":"cbefd7c0-5cfb-11e8-9276-0b00f900a0a0-ar.png","url":"https://cdn.cosmicjs.com/cbefd7c0-5cfb-11e8-9276-0b00f900a0a0-ar.png","imgix_url":"https://imgix.cosmicjs.com/cbefd7c0-5cfb-11e8-9276-0b00f900a0a0-ar.png"},{"children":null,"type":"html-textarea","title":"Blurb","key":"blurb","id":"4yW2OJGT1y","value":"

Cosmic is the best CMS for AR websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

"},{"children":null,"type":"text","title":"Headline","key":"headline","id":"6FeTQX5pEw","value":"AR CMS"},{"children":null,"type":"text","title":"SEO Description","key":"seo_description","id":"OyHpQvO4n9","value":"Cosmic is the best CMS for AR websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators."},{"children":null,"type":"file","title":"Twitter Card Image","key":"twitter_card_image","id":"yAwpfqUNUC","value":"cbefd7c0-5cfb-11e8-9276-0b00f900a0a0-ar.png","url":"https://cdn.cosmicjs.com/cbefd7c0-5cfb-11e8-9276-0b00f900a0a0-ar.png","imgix_url":"https://imgix.cosmicjs.com/cbefd7c0-5cfb-11e8-9276-0b00f900a0a0-ar.png"},{"children":null,"type":"html-textarea","title":"Code Example","key":"code_example","id":"FrechtT0lv","value":""},{"children":null,"type":"text","title":"SEO Title","key":"seo_title","id":"GsexjEKnwd","value":"Best Headless CMS for AR"},{"children":[],"type":"repeater","title":"Videos","key":"videos","id":"frgtgqfrpylludl8pnsi","value":"","repeater_fields":[{"title":"Title","key":"title","value":"","type":"text","required":false},{"title":"Link","key":"link","value":"","type":"text","required":false}]}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"kb-articles","created_at":"2018-05-21T13:24:40.741Z","created_by":"5357ef811693be2118000001","created":"2018-05-21T13:26:24.254Z","status":"published","modified_at":"2020-06-27T19:28:27.276Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-06-27T19:28:27.276Z","unpublish_at":null,"metadata":{"image":{"url":"https://cdn.cosmicjs.com/cbefd7c0-5cfb-11e8-9276-0b00f900a0a0-ar.png","imgix_url":"https://imgix.cosmicjs.com/cbefd7c0-5cfb-11e8-9276-0b00f900a0a0-ar.png"},"thumbnail":{"url":"https://cdn.cosmicjs.com/cbefd7c0-5cfb-11e8-9276-0b00f900a0a0-ar.png","imgix_url":"https://imgix.cosmicjs.com/cbefd7c0-5cfb-11e8-9276-0b00f900a0a0-ar.png"},"blurb":"

Cosmic is the best CMS for AR websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

","headline":"AR CMS","seo_description":"Cosmic is the best CMS for AR websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.","twitter_card_image":{"url":"https://cdn.cosmicjs.com/cbefd7c0-5cfb-11e8-9276-0b00f900a0a0-ar.png","imgix_url":"https://imgix.cosmicjs.com/cbefd7c0-5cfb-11e8-9276-0b00f900a0a0-ar.png"},"code_example":"","seo_title":"Best Headless CMS for AR","videos":[]}},{"_id":"5d6e86dca8fabe30a84678ca","order":30,"slug":"customize-rest-api-response-object-metafields-search","title":"Customize REST API Response, Object Metafields Search","content":"

We've got a couple updates to make editing and integrating your Cosmic-powered content faster and easier.

1. Customize API Response Data
You can now add a query parameter (props) to the REST API (or NPM module)\r\nto limit the response data to only selected properties. Think of this like GraphQL-ifying your REST response to get only the data you need.

For example here's the old way to get Objects from the REST API which gives you everything:

https://api.cosmicjs.com/v1/simple-react-blog/objects?pretty=true&hide_metafields=true&type=posts&limit=20
\">

And now the same query with added props query parameter.

https://api.cosmicjs.com/v1/simple-react-blog/objects?pretty=true&hide_metafields=true&type=posts&limit=20&props=slug,title,content
\">

As you can see, adding props to your query makes your response much more concise giving you only the data you need. This should make your API responses faster, giving you and your end users a better experience 😎

Note: You can also add metadata.your_key to get selected metadata values (limited to one level only).

We've also updated the "Developer Tools" modal in the Dashboard to check out what this looks like:


UPDATE: 9/10/2019
You can also limit the depth of your response data by adding the query param depth. This will limit the nested depth of Object Metafields.

Check out the updated REST API docs for more info.


2. Search Objects in Object Metafields
One of our most popular features is the ability to connect Objects to each other to create relationships. For example: Blog Posts may need to connect to Categories and Authors which you can accomplish using Object Relationship Metafields.

It's now much easier to find the Object you're looking for with a new search feature on the Object Select modal. Simply type in a keyword to quickly find the Objects you need. Gif below:

","metafields":[{"value":"2019-09-10","key":"published_date","title":"Published Date","type":"date","children":null},{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":null,"imgix_url":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"changelogs","created_at":"2019-09-03T15:29:32.128Z","created_by":"5357ef811693be2118000001","modified_at":"2020-08-10T14:02:39.393Z","created":"2019-09-03T15:29:32.128Z","status":"published","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-09-10T16:07:36.595Z","metadata":{"published_date":"2019-09-10","author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"featured_image":{"url":null,"imgix_url":null}}},{"_id":"595e75beb7cb932a71000110","order":31,"slug":"emberjs-cms","title":"Ember.js CMS","content":"

Cosmic JS makes it easy to manage content for your Ember.js applications. Install the Official Cosmic JS JavaScript Client to add dynamic content to your app. Get a feel for Ember.js by taking a spin through our Ember.js apps and check out the tutorials below.

Ember.js CMS Articles

How to Build a Real Estate Website Using Ember.js

Ember.js CMS Resources

Cosmic JS Docs
Official JavaScript Client
Cosmic JS GitHub

Examples

npm i cosmicjs

Then in your JavaScript file, get your content:

\">
","metafields":[{"children":null,"type":"file","title":"Image","key":"image","id":"Fh399127VV","value":"8640b3e0-6281-11e7-a707-9bd50fd3b6b0-Ember.js_Logo_and_Mascot.png","url":"https://cdn.cosmicjs.com/8640b3e0-6281-11e7-a707-9bd50fd3b6b0-Ember.js_Logo_and_Mascot.png","imgix_url":"https://imgix.cosmicjs.com/8640b3e0-6281-11e7-a707-9bd50fd3b6b0-Ember.js_Logo_and_Mascot.png"},{"children":null,"type":"file","title":"Thumbnail","key":"thumbnail","id":"utC5jTBA3S","value":"8d1cd630-6281-11e7-8d46-7b261262b385-Ember.js_Logo_and_Mascot.png","url":"https://cdn.cosmicjs.com/8d1cd630-6281-11e7-8d46-7b261262b385-Ember.js_Logo_and_Mascot.png","imgix_url":"https://imgix.cosmicjs.com/8d1cd630-6281-11e7-8d46-7b261262b385-Ember.js_Logo_and_Mascot.png"},{"children":null,"type":"html-textarea","title":"Blurb","key":"blurb","id":"NUcNsVAdzU","value":"

Cosmic JS makes it easy to manage content for your Ember.js applications. Install the Official Cosmic JS Javascript Client to integrate content into your app in minutes.

"},{"children":null,"type":"text","title":"Headline","key":"headline","id":"X10ZWX9Vdq","value":"Ember.js"},{"children":null,"type":"text","title":"SEO Description","key":"seo_description","id":"UgIMqHv95u","value":"Best Headless CMS for Ember.js. Use Cosmic JS to power content for your Ember.js applications."},{"children":null,"type":"file","title":"Twitter Card Image","key":"twitter_card_image","id":"UnAq7qVcVt","value":"9769b540-6281-11e7-8d46-7b261262b385-Ember.js_Logo_and_Mascot.png","url":"https://cdn.cosmicjs.com/9769b540-6281-11e7-8d46-7b261262b385-Ember.js_Logo_and_Mascot.png","imgix_url":"https://imgix.cosmicjs.com/9769b540-6281-11e7-8d46-7b261262b385-Ember.js_Logo_and_Mascot.png"},{"children":null,"type":"html-textarea","title":"Code Example","key":"code_example","id":"7Fi2aaclS5","value":""},{"children":null,"type":"text","title":"SEO Title","key":"seo_title","id":"1du6lr0buj","value":"Best Headless CMS for Ember.js"},{"children":[],"type":"repeater","title":"Videos","key":"videos","id":"frgtgqfrpylludl8pnsi","value":"","repeater_fields":[{"title":"Title","key":"title","value":"","type":"text","required":false},{"title":"Link","key":"link","value":"","type":"text","required":false}]}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"kb-articles","created_at":"2017-04-22T23:07:51.159Z","created_by":"5357ef811693be2118000001","created":"2017-07-06T17:39:10.101Z","status":"published","modified_at":"2020-07-22T13:12:15.591Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-11-11T22:20:47.155Z","unpublish_at":null,"metadata":{"image":{"url":"https://cdn.cosmicjs.com/8640b3e0-6281-11e7-a707-9bd50fd3b6b0-Ember.js_Logo_and_Mascot.png","imgix_url":"https://imgix.cosmicjs.com/8640b3e0-6281-11e7-a707-9bd50fd3b6b0-Ember.js_Logo_and_Mascot.png"},"thumbnail":{"url":"https://cdn.cosmicjs.com/8d1cd630-6281-11e7-8d46-7b261262b385-Ember.js_Logo_and_Mascot.png","imgix_url":"https://imgix.cosmicjs.com/8d1cd630-6281-11e7-8d46-7b261262b385-Ember.js_Logo_and_Mascot.png"},"blurb":"

Cosmic JS makes it easy to manage content for your Ember.js applications. Install the Official Cosmic JS Javascript Client to integrate content into your app in minutes.

","headline":"Ember.js","seo_description":"Best Headless CMS for Ember.js. Use Cosmic JS to power content for your Ember.js applications.","twitter_card_image":{"url":"https://cdn.cosmicjs.com/9769b540-6281-11e7-8d46-7b261262b385-Ember.js_Logo_and_Mascot.png","imgix_url":"https://imgix.cosmicjs.com/9769b540-6281-11e7-8d46-7b261262b385-Ember.js_Logo_and_Mascot.png"},"code_example":"","seo_title":"Best Headless CMS for Ember.js","videos":[]}},{"_id":"5d23649c3ad0334d73a01e3d","order":31,"slug":"introducing-workspaces","title":"Introducing Workspaces","content":"


We're excited to announce a new way to collaborate with your team on your digital projects. Introducing Workspaces.

Included with every Enterprise plan, your Workspace gives your team all of the powerful features of the Cosmic hosted CMS plus added benefits that make it your own.

With your company workspace you get:

✅ A branded company login page
✅ White label dashboard experience
✅ Custom company subdomain
✅ Usage and activity reports

See the Workspaces page for more information.

It's our goal to help your team build digital projects faster and easier. With Workspaces, you now have a single location to collaborate more efficiently with your company on your great work.

If you have any questions, join the community on Slack and follow us on Twitter for more updates.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"key":"teaser","title":"Teaser","type":"html-textarea","children":null,"value":"

We're excited to announce a new way to collaborate with your team on your digital projects. Introducing Workspaces.

"},{"value":"50a851e0-a198-11e9-8e98-936834bd7bf5-workspace.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/50a851e0-a198-11e9-8e98-936834bd7bf5-workspace.jpg","imgix_url":"https://imgix.cosmicjs.com/50a851e0-a198-11e9-8e98-936834bd7bf5-workspace.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2019-07-09T15:43:24.214Z","created_by":"5357ef811693be2118000001","modified_at":"2020-10-02T02:07:53.246Z","created":"2019-07-09T15:43:24.214Z","status":"published","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-07-09T13:44:00.023Z","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

We're excited to announce a new way to collaborate with your team on your digital projects. Introducing Workspaces.

","featured_image":{"url":"https://cdn.cosmicjs.com/50a851e0-a198-11e9-8e98-936834bd7bf5-workspace.jpg","imgix_url":"https://imgix.cosmicjs.com/50a851e0-a198-11e9-8e98-936834bd7bf5-workspace.jpg"}}},{"_id":"5c6b33f8e6d07b28347133e6","order":31,"slug":"procorp-builds-an-informational-app-with-vuejs-and-cosmic-js","title":"Procorp Builds an Informational App with Vue.js and Cosmic","content":"

Procorp is a 30+ year old integrated design and interactive advertising agency based in Chile. With extensive knowledge of the Chilean political and business environment, Procorp knew that public and private tender processes for bidding on design-oriented projects are complex and tedious.

App Comps


In response to the bureaucratic complexities, Procorp built one of its pro-bono clients an informational app to help agencies navigate the regulatory waters. They built the data structures for the application in less than a day and implemented their Cosmic-powered website using Vue.js. 





“Cosmic was instrumental in providing an interface so easy to use that an intern with no prior knowledge of HTML or Content Management Systems was able to transcribe and execute the entire job in an afternoon. The results are clean, completely separated from the code, and we are able to do updates and corrections without tying up resources."

— Gabriel Naranjo, Director of Digital Experience


","metafields":[{"value":"Procorp","key":"company","title":"Company","type":"text","children":null},{"value":"Integrated Design Agency","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Procorp is a 30+ year old integrated design and interactive advertising agency based in Chile. With extensive knowledge of the Chilean political and business environment, Procorp knew that public and private tender processes for bidding on design-oriented projects are complex and tedious. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"ccf974b0-3535-11e9-be5e-d196042f83b6-D-37DZHC_400x400.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/ccf974b0-3535-11e9-be5e-d196042f83b6-D-37DZHC_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/ccf974b0-3535-11e9-be5e-d196042f83b6-D-37DZHC_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-03-06T22:32:48.334Z","created_by":"5716b504e9c686d006000073","created":"2019-02-18T22:38:48.420Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2019-02-20T17:34:41.586Z","metadata":{"company":"Procorp","industry_type":"Integrated Design Agency","teaser":"Procorp is a 30+ year old integrated design and interactive advertising agency based in Chile. With extensive knowledge of the Chilean political and business environment, Procorp knew that public and private tender processes for bidding on design-oriented projects are complex and tedious. \n","logo":{"url":"https://cdn.cosmicjs.com/ccf974b0-3535-11e9-be5e-d196042f83b6-D-37DZHC_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/ccf974b0-3535-11e9-be5e-d196042f83b6-D-37DZHC_400x400.jpg"}}},{"_id":"5d6407dda7f5cd0e9ed2088f","order":31,"slug":"updates-to-scheduled-publishing","title":"Updates to Scheduled Publishing","content":"

We have a quick update to scheduled publishing that should make things easier for those using this handy feature.

How scheduled publishing used to work:

You set your scheduled publish day and time and it sets your content to draft. This was fine for new content, but not ideal for already published content. If you wanted to maintain your published content and save a new draft for later scheduled update\r\nthis didn't work.

The new way:
You can now save a published version AND save a draft version scheduled for later publish. This also makes it possible to keep two versions running: 1) Your published content and 2) your draft content scheduled for publish later.

I hope you like this update to scheduled publishing. This update was shipped in direct response to a user that needed a better experience with this feature.

If you have any questions or update that you would like to see shipped, please reach out to us on Twitter and join the conversation on Slack.

","metafields":[{"value":"2019-08-26","key":"published_date","title":"Published Date","type":"date","children":null},{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":null,"imgix_url":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"changelogs","created_at":"2019-08-26T16:25:01.689Z","created_by":"5357ef811693be2118000001","modified_at":"2020-08-10T13:59:43.225Z","created":"2019-08-26T16:25:01.689Z","status":"published","published_at":"2019-08-26T16:28:26.580Z","modified_by":"5357ef811693be2118000001","publish_at":null,"metadata":{"published_date":"2019-08-26","author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"featured_image":{"url":null,"imgix_url":null}}},{"_id":"5d603652be861751a5102d36","order":32,"slug":"edit-object-metafields","title":"Edit Object Metafields","content":"

You can now edit specific Metafields on existing Objects via the API. The following API method allows you to edit specific Metafields identified by key, without affecting other Metafields as well as add new Metafields. View in the docs.

The endpoint is:

PATCH https://api.cosmicjs.com/v1/:bucket_slug/edit-object-metafields

Body properties:

slug (String)\r\nmetafields (Array)


The Cosmic NPM module is also updated (3.2.19) to allow for this capability with the new method:

bucket.editObjectMetafields()

Further directions are available in the Metafields section in the REST API documentation.


Let me know if you have any questions. Join us on Slack and on Twitter.

","metafields":[{"value":"2019-08-23","key":"published_date","title":"Published Date","type":"date","children":null},{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":null,"imgix_url":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"changelogs","created_at":"2019-08-23T18:54:10.949Z","created_by":"5357ef811693be2118000001","modified_at":"2020-08-10T14:02:39.393Z","created":"2019-08-23T18:54:10.950Z","status":"published","published_at":"2019-08-23T19:02:01.453Z","modified_by":"5357ef811693be2118000001","publish_at":null,"metadata":{"published_date":"2019-08-23","author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"featured_image":{"url":null,"imgix_url":null}}},{"_id":"595e8eb2924137fa700001a5","order":32,"slug":"headless-cms-kb-page","title":"Headless CMS","content":"

The Cosmic JS Headless CMS makes it easy for your team to add dynamic content to any website or app in minutes. We provide a dashboard to create content and API tools and resources to integrate content into any website or app. 

Avoid the pain of building and maintaining your own CMS infrastructure. Use the Cosmic JS Headless CMS infrastructure and focus on what really matters: building great products and user experiences.

Looking to learn more about the benefits and tradeoffs of a Headless CMS? Read What is a Headless CMS.

Cosmic JS Videos


Using Cosmic JS as a Headless CMS with Gatsby

\">

Build a Cosmic JS-powered blog using Gatsby

\">

Webinar: Localization with Cosmic JS and Gatsby

\">


Headless CMS Articles

How to Build a Simple Blog Using Node.js
How to Build a Node.js User Management App
How to Build a Cross-Platform Blog Using React Native and Node.js

Headless CMS Resources

Cosmic JS Docs
Headless CMS Features
Headless CMS Solutions
Official JavaScript Client
Cosmic JS GitHub

Examples

npm i cosmicjs

Then in your JavaScript file, get your content:

\">
","metafields":[{"children":null,"type":"file","title":"Image","key":"image","id":"VWluSNk8Vk","value":"1b3aaf60-6286-11e7-a707-9bd50fd3b6b0-cloud.svg","url":"https://cdn.cosmicjs.com/1b3aaf60-6286-11e7-a707-9bd50fd3b6b0-cloud.svg","imgix_url":"https://imgix.cosmicjs.com/1b3aaf60-6286-11e7-a707-9bd50fd3b6b0-cloud.svg"},{"children":null,"type":"file","title":"Thumbnail","key":"thumbnail","id":"Ti0qpxezLk","value":"1f17e990-6286-11e7-a707-9bd50fd3b6b0-cloud.svg","url":"https://cdn.cosmicjs.com/1f17e990-6286-11e7-a707-9bd50fd3b6b0-cloud.svg","imgix_url":"https://imgix.cosmicjs.com/1f17e990-6286-11e7-a707-9bd50fd3b6b0-cloud.svg"},{"children":null,"type":"html-textarea","title":"Blurb","key":"blurb","id":"o9rGwl7Iib","value":"

Cosmic is the best Headless CMS for modern websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

"},{"children":null,"type":"text","title":"Headline","key":"headline","id":"vfgY7TbHf4","value":"Headless CMS"},{"children":null,"type":"text","title":"SEO Description","key":"seo_description","id":"UGLHhl5Czv","value":"Cosmic is the best Headless CMS for modern websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators."},{"children":null,"type":"file","title":"Twitter Card Image","key":"twitter_card_image","id":"6UwFyyxPVi","value":"2d5bcc60-6286-11e7-8d46-7b261262b385-Screen Shot 2017-07-06 at 3.03.09 PM.png","url":"https://cdn.cosmicjs.com/2d5bcc60-6286-11e7-8d46-7b261262b385-Screen Shot 2017-07-06 at 3.03.09 PM.png","imgix_url":"https://imgix.cosmicjs.com/2d5bcc60-6286-11e7-8d46-7b261262b385-Screen Shot 2017-07-06 at 3.03.09 PM.png"},{"children":null,"type":"html-textarea","title":"Code Example","key":"code_example","id":"VeK7777oSa","value":""},{"children":null,"type":"text","title":"SEO Title","key":"seo_title","id":"vsQhezcnur","value":"Best Headless CMS"},{"children":[],"type":"repeater","title":"Videos","key":"videos","id":"aSt9LunUxL","value":"","repeater_fields":[{"title":"Title","key":"title","value":"","type":"text","required":false},{"title":"Link","key":"link","value":"","type":"text","required":false}]},{"children":null,"type":"text","title":"Apps Search Term","key":"apps_search_term","id":"0j2XD9Gog1","value":""},{"children":null,"type":"text","title":"Articles Search Term","key":"articles_search_term","id":"8RgqbG1UTr","value":""},{"children":null,"type":"text","title":"Page Overview Title","key":"page_overview_title","id":"gj036836gx4c73fpdjzb","value":""},{"children":null,"type":"html-textarea","title":"Page Overview","key":"page_overview","id":"iSVFzvAn9h","value":""},{"children":null,"type":"html-textarea","title":"SEO Content","key":"seo_content","id":"lcsUSsZiB9","value":""},{"children":[],"type":"repeater","title":"Apps","key":"apps","id":"dkpxmwigd1z8x4ants9f","value":"","repeater_fields":[{"title":"App Slug","key":"app_slug","value":"","type":"text","required":false}]},{"children":[],"type":"repeater","title":"Articles","key":"articles","id":"dwil4bqojngnkej4v85k","value":"","repeater_fields":[{"title":"Article Slug","key":"article_slug","value":"","type":"text","required":false}]}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"kb-articles","created_at":"2017-04-22T23:07:51.159Z","created_by":"5357ef811693be2118000001","created":"2017-07-06T19:25:38.751Z","status":"published","modified_at":"2020-12-18T15:11:12.929Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-12-18T15:11:12.929Z","unpublish_at":null,"metadata":{"image":{"url":"https://cdn.cosmicjs.com/1b3aaf60-6286-11e7-a707-9bd50fd3b6b0-cloud.svg","imgix_url":"https://imgix.cosmicjs.com/1b3aaf60-6286-11e7-a707-9bd50fd3b6b0-cloud.svg"},"thumbnail":{"url":"https://cdn.cosmicjs.com/1f17e990-6286-11e7-a707-9bd50fd3b6b0-cloud.svg","imgix_url":"https://imgix.cosmicjs.com/1f17e990-6286-11e7-a707-9bd50fd3b6b0-cloud.svg"},"blurb":"

Cosmic is the best Headless CMS for modern websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

","headline":"Headless CMS","seo_description":"Cosmic is the best Headless CMS for modern websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.","twitter_card_image":{"url":"https://cdn.cosmicjs.com/2d5bcc60-6286-11e7-8d46-7b261262b385-Screen Shot 2017-07-06 at 3.03.09 PM.png","imgix_url":"https://imgix.cosmicjs.com/2d5bcc60-6286-11e7-8d46-7b261262b385-Screen Shot 2017-07-06 at 3.03.09 PM.png"},"code_example":"","seo_title":"Best Headless CMS","videos":[],"apps_search_term":"","articles_search_term":"","page_overview_title":"","page_overview":"","seo_content":"","apps":[],"articles":[]}},{"_id":"5d1a579b163abc45f7d22507","order":32,"slug":"developer-spotlight-sumit-kharche","title":"Developer Spotlight: Sumit Kharche","content":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Sumit Kharche, a Full Stack Software Developer residing in Pune, India. Sumit is an active member of the Cosmic Community, having recently built the new React Static Blog, which is available in the Cosmic Apps Marketplace. With more community projects on the way, we're excited to interview one of our own for this Spotlight. 😎 Follow Sumit on Twitter, LinkedIn and GitHub, and enjoy the conversation.

Cosmic: When did you first begin building software?
Sumit: I started building software when I was pursuing my Bachelor's degree in Computer Science back in 2011.

What is your preferred development stack?
I have really enjoyed building projects using the Microsoft .Net technologies stack. I’m currently working on a team that uses React, Redux, and Material-UI on the front end and .Net core as backend. Recently though, I've found myself really enjoying working in a JAMStack. On the client side, I build static markup with React using React-Static, Gatsby and then provide APIs with Cosmic.

What past projects are you most proud of and why?
I built a JAMStack website by myself in couple of days. I chose React-Static, which is completely new for me, as was Cosmic. It was very challenging but I learned so many incredible skills as a result. Take a look at the demo.

You've submitted apps built in React Static, Svelte and more. How are you finding these new frameworks and technologies?
I love exploring new development stacks and expanding my knowledge. I always love to read about the new frameworks and technologies. Dev.to, Medium, Twitter, etc will always help me in finding the new technologies and also keep me updated. Now, because of the way Cosmic simplifies my work, I love to integrate it with different frameworks.

What are some technologies you are excited to learn more about?
That’s a big list. There is so much cool stuff out there I’ve been wanting to get into. Currently, I am excited to explore more about Cosmic. Also, I have been eager to get some time to spin up on .Net Core. I am excited about serverless stacks.

The Cosmic Spotlight Series is dedicated to showcasing developers that are building apps using modern tools. Learn how to contribute here. To stay connected with us follow us on Twitter and join the conversation on Slack.

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"key":"teaser","title":"Teaser","type":"html-textarea","children":null,"value":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Sumit Kharche, a Full Stack Software Developer residing in Pune, India. Submit is an active member of the Cosmic Community, having recently built the new React Static Blog, which is available in the Cosmic Apps Marketplace. With more community projects on the way, we're excited to interview one of our own for this Spotlight. 😎 Follow Sumit on Twitter, LinkedIn and GitHub, and enjoy the conversation.

"},{"value":"e957d1c0-a190-11e9-aedf-bf249f2cc2eb-Sumit.png","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e957d1c0-a190-11e9-aedf-bf249f2cc2eb-Sumit.png","imgix_url":"https://imgix.cosmicjs.com/e957d1c0-a190-11e9-aedf-bf249f2cc2eb-Sumit.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2019-07-01T18:57:31.936Z","created_by":"5716b504e9c686d006000073","modified_at":"2020-10-02T02:07:53.246Z","created":"2019-07-01T18:57:31.936Z","status":"published","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2019-07-08T17:11:57.202Z","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Sumit Kharche, a Full Stack Software Developer residing in Pune, India. Submit is an active member of the Cosmic Community, having recently built the new React Static Blog, which is available in the Cosmic Apps Marketplace. With more community projects on the way, we're excited to interview one of our own for this Spotlight. 😎 Follow Sumit on Twitter, LinkedIn and GitHub, and enjoy the conversation.

","featured_image":{"url":"https://cdn.cosmicjs.com/e957d1c0-a190-11e9-aedf-bf249f2cc2eb-Sumit.png","imgix_url":"https://imgix.cosmicjs.com/e957d1c0-a190-11e9-aedf-bf249f2cc2eb-Sumit.png"}}},{"_id":"59f750667b9ce74e11000ab5","order":32,"slug":"healthplanseniororg-keeps-seniors-informed","title":"HealthPlanSenior.org Keeps Seniors Informed","content":"

HealthPlanSenior.org is a website dedicated to providing clear, concise insight into Medicare. Their contributors are some of the most knowledgeable minds in the industry and as an organization it’s their mission to constantly raise the bar of excellence when it comes to serving seniors with content on their website. With knowledge experts spread all over the country, contributors need an easy way to preview, edit, schedule and publish content. That's why HealthPlanSenior.org uses Cosmic as its Content Management System. 



“Cosmic allowed us to quickly build and deploy our content-driven application, freed from installed system constraints. Our content contributors can easily manage and publish their content via the Cosmic Dashboard and are given the precise tools they need to complete their job.  Cosmic is intuitive and unopinionated, perfect for this team’s needs.”  

— Erick Bett, Lead Developer 

","metafields":[{"value":"HealthPlanSenior.org","key":"company","title":"Company","type":"text","children":null},{"value":"Healthcare ","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"With knowledge experts spread all over the country, contributors need an easy way to preview, edit, schedule and publish content. That's why HealthPlanSenior.org uses Cosmic as its Content Management System. ","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"a23fc220-dc3e-11e7-9201-fb5838341592-hps-logo.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/a23fc220-dc3e-11e7-9201-fb5838341592-hps-logo.png","imgix_url":"https://imgix.cosmicjs.com/a23fc220-dc3e-11e7-9201-fb5838341592-hps-logo.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2017-10-30T16:16:37.900Z","created_by":"5716b504e9c686d006000073","created":"2017-10-30T16:16:37.900Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"metadata":{"company":"HealthPlanSenior.org","industry_type":"Healthcare ","teaser":"With knowledge experts spread all over the country, contributors need an easy way to preview, edit, schedule and publish content. That's why HealthPlanSenior.org uses Cosmic as its Content Management System. ","logo":{"url":"https://cdn.cosmicjs.com/a23fc220-dc3e-11e7-9201-fb5838341592-hps-logo.png","imgix_url":"https://imgix.cosmicjs.com/a23fc220-dc3e-11e7-9201-fb5838341592-hps-logo.png"}}},{"_id":"5d5c24574fa7a563428f4e15","order":33,"slug":"updates-new-webhook-event-delete-all-objects-in-type-export-options","title":"Updates: New Webhook Event, Delete all Objects in Type, Export Options","content":"

New Webhook Event
We have added a new webhook event:

object.edited.unpublished

If you relied on "object.edited.draft" for this event, you will need to edit your webhook to this event. Find your webhooks in Bucket Settings > Webhooks. Be sure to check this out in the Webhooks documentation.


Delete all Objects in your Object Type
This experience has been improved: now when you delete an Object Type it will remove all Objects in this type.


Export Options
You can now export specific Object Types and omit others in your Bucket Export area located in Bucket Settings > Import / Export.

","metafields":[{"value":"2019-08-20","key":"published_date","title":"Published Date","type":"date","children":null},{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"e8cdf700-c36b-11e9-a488-7925a97cd338--udZnjsCzsE.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e8cdf700-c36b-11e9-a488-7925a97cd338--udZnjsCzsE.jpg","imgix_url":"https://imgix.cosmicjs.com/e8cdf700-c36b-11e9-a488-7925a97cd338--udZnjsCzsE.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"changelogs","created_at":"2019-08-20T16:48:23.899Z","created_by":"5357ef811693be2118000001","modified_at":"2020-08-10T14:02:39.393Z","created":"2019-08-20T16:48:23.899Z","status":"published","published_at":"2019-08-20T16:59:54.739Z","modified_by":"5357ef811693be2118000001","publish_at":null,"metadata":{"published_date":"2019-08-20","author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"featured_image":{"url":"https://cdn.cosmicjs.com/e8cdf700-c36b-11e9-a488-7925a97cd338--udZnjsCzsE.jpg","imgix_url":"https://imgix.cosmicjs.com/e8cdf700-c36b-11e9-a488-7925a97cd338--udZnjsCzsE.jpg"}}},{"_id":"5b76d2b99880eb271bc28c8b","order":33,"slug":"red-queen-casino-delivers-gaming-promotions","title":"Red Queen Casino Delivers Gaming Promotions","content":"

Red Queen Casino is an online casino that also offers bingo, games, live-dealer games, lottery, mobile casinos, and an assortment of various mobile games powered by the 1X2 Network. The Red Queen Casino team serves weekly promotional content to notify players of upcoming game releases, prizes and updates to logistical information like Rules and Regulations and FAQ's. 


Red Queen Casino

Built on: Angular | Cosmic


Red Queen Casino needed a way for members of their cross-functional team to update the promotional content without having access to either the application codebase or the rest of the website's content, so they set up a content-editing workflow using Cosmic as their decoupled content management API. Red Queen Casino's developers have access to powerful APIs and content modeling tools, while the team members tasked with updating promotional content can do so from a familiar cloud-based editor.





"Using Cosmic means my team is now able to swiftly and efficiently update our promotions and adapt to our project needs using the system without any issues. Cosmic has made everything so much more accessible for us.”

- Christopher Reid – Casino Manager

","metafields":[{"value":"Red Queen Casino","key":"company","title":"Company","type":"text","children":null},{"value":"Online Gaming","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Red Queen Casino is an online casino that also offers bingo, games, live-dealer games, lottery, mobile casinos, and an assortment of various mobile games powered by the 1X2 Network. The Red Queen Casino team serves weekly promotional content to notify players of upcoming game releases, prizes and updates to logistical information like Rules and Regulations and FAQ's. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"bc23df30-a224-11e8-b671-4969be7a2b02-vyTIMqXN_400x400.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/bc23df30-a224-11e8-b671-4969be7a2b02-vyTIMqXN_400x400.png","imgix_url":"https://imgix.cosmicjs.com/bc23df30-a224-11e8-b671-4969be7a2b02-vyTIMqXN_400x400.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-03-01T22:26:36.367Z","created_by":"5716b504e9c686d006000073","created":"2018-08-17T13:50:49.376Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-08-17T18:43:20.889Z","metadata":{"company":"Red Queen Casino","industry_type":"Online Gaming","teaser":"Red Queen Casino is an online casino that also offers bingo, games, live-dealer games, lottery, mobile casinos, and an assortment of various mobile games powered by the 1X2 Network. The Red Queen Casino team serves weekly promotional content to notify players of upcoming game releases, prizes and updates to logistical information like Rules and Regulations and FAQ's. \n","logo":{"url":"https://cdn.cosmicjs.com/bc23df30-a224-11e8-b671-4969be7a2b02-vyTIMqXN_400x400.png","imgix_url":"https://imgix.cosmicjs.com/bc23df30-a224-11e8-b671-4969be7a2b02-vyTIMqXN_400x400.png"}}},{"_id":"5ad67c4e23895634795b4019","slug":"laravel-cms","title":"Laravel CMS ","content":"

Cosmic JS offers a powerful API-first CMS that integrates with Laravel and PHP. Laravel is a powerful PHP framework, designed for developers who need a simple and elegant toolkit to create full-featured web applications.  

Install the Official Cosmic JS PHP Client to start managing content for your Laravel application. Use Cosmic JS to quickly build content-powered blogs, dynamic pages, and more.  Get a feel for Cosmic JS by taking a spin through our apps and check out the tutorials below.


Laravel CMS Articles

The Cosmic Stack
Laravel Inventory Management App
Building an Inventory Management App Using Vue.js and Laravel
Alicomm Builds a Website Using Laravel, PHP and Cosmic JS

Laravel CMS Resources

Cosmic JS Docs
Official PHP Client
PHP Apps
Cosmic JS GitHub

Examples

Clone the PHP client:

git clone https://github.com/cosmicjs/cosmicjs-php

Then in your PHP file:

$config = new stdClass();\r\n$config->bucket_slug = "astral";\r\ninclude("cosmicjs.php");\r\n$objects = $cosmicjs->getObjects();\r\nvar_dump($objects);
","metafields":[{"children":null,"type":"file","title":"Image","key":"image","id":"7Gp59E6W0o","value":"18f957e0-4293-11e8-be46-91b69c5ea416-laravel-framework-logo-C10176EC8C-seeklogo.com.png","url":"https://cdn.cosmicjs.com/18f957e0-4293-11e8-be46-91b69c5ea416-laravel-framework-logo-C10176EC8C-seeklogo.com.png","imgix_url":"https://imgix.cosmicjs.com/18f957e0-4293-11e8-be46-91b69c5ea416-laravel-framework-logo-C10176EC8C-seeklogo.com.png"},{"children":null,"type":"file","title":"Thumbnail","key":"thumbnail","id":"bGVNwulV42","value":"1fe3ab00-4293-11e8-adf7-13ecf87e853c-laravel-framework-logo-C10176EC8C-seeklogo.com.png","url":"https://cdn.cosmicjs.com/1fe3ab00-4293-11e8-adf7-13ecf87e853c-laravel-framework-logo-C10176EC8C-seeklogo.com.png","imgix_url":"https://imgix.cosmicjs.com/1fe3ab00-4293-11e8-adf7-13ecf87e853c-laravel-framework-logo-C10176EC8C-seeklogo.com.png"},{"children":null,"type":"html-textarea","title":"Blurb","key":"blurb","id":"qhLc41AqB1","value":"

Cosmic is the best CMS for Laravel websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

"},{"children":null,"type":"text","title":"Headline","key":"headline","id":"M9GaWUvISP","value":"Laravel"},{"children":null,"type":"text","title":"SEO Description","key":"seo_description","id":"GVJadQIIGG","value":"Cosmic is the best CMS for Laravel websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators."},{"children":null,"type":"file","title":"Twitter Card Image","key":"twitter_card_image","id":"5EXx3jjyNh","value":"291fdd60-4293-11e8-ab30-279769ef94af-laravel-framework-logo-C10176EC8C-seeklogo.com.png","url":"https://cdn.cosmicjs.com/291fdd60-4293-11e8-ab30-279769ef94af-laravel-framework-logo-C10176EC8C-seeklogo.com.png","imgix_url":"https://imgix.cosmicjs.com/291fdd60-4293-11e8-ab30-279769ef94af-laravel-framework-logo-C10176EC8C-seeklogo.com.png"},{"children":null,"type":"html-textarea","title":"Code Example","key":"code_example","id":"hdX3OSLd8w","value":""},{"children":null,"type":"text","title":"SEO Title","key":"seo_title","id":"xwwJeSksVh","value":""},{"children":[],"type":"repeater","title":"Videos","key":"videos","id":"ubflSl5EGp","value":"","repeater_fields":[{"title":"Title","key":"title","value":"","type":"text","required":false},{"title":"Link","key":"link","value":"","type":"text","required":false}]},{"children":null,"type":"text","title":"Apps Search Term","key":"apps_search_term","id":"v95tq5i2enaf3oreecdk","value":""},{"children":null,"type":"text","title":"Articles Search Term","key":"articles_search_term","id":"apps_search_term_kef9yhcej8gy","value":""},{"children":null,"type":"html-textarea","title":"Page Overview","key":"page_overview","id":"zYuPyDtTWY","value":""},{"children":null,"type":"html-textarea","title":"SEO Content","key":"seo_content","id":"6dT4bcaDeW","value":""}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"kb-articles","created":"2018-04-17T22:59:26.329Z","created_at":"2017-10-19T03:50:16.379Z","modified_at":"2020-08-15T19:41:08.853Z","created_by":"5357ef811693be2118000001","modified_by":"5357ef811693be2118000001","status":"published","publish_at":null,"order":33,"published_at":"2020-08-15T19:41:08.853Z","unpublish_at":null,"metadata":{"image":{"url":"https://cdn.cosmicjs.com/18f957e0-4293-11e8-be46-91b69c5ea416-laravel-framework-logo-C10176EC8C-seeklogo.com.png","imgix_url":"https://imgix.cosmicjs.com/18f957e0-4293-11e8-be46-91b69c5ea416-laravel-framework-logo-C10176EC8C-seeklogo.com.png"},"thumbnail":{"url":"https://cdn.cosmicjs.com/1fe3ab00-4293-11e8-adf7-13ecf87e853c-laravel-framework-logo-C10176EC8C-seeklogo.com.png","imgix_url":"https://imgix.cosmicjs.com/1fe3ab00-4293-11e8-adf7-13ecf87e853c-laravel-framework-logo-C10176EC8C-seeklogo.com.png"},"blurb":"

Cosmic is the best CMS for Laravel websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

","headline":"Laravel","seo_description":"Cosmic is the best CMS for Laravel websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.","twitter_card_image":{"url":"https://cdn.cosmicjs.com/291fdd60-4293-11e8-ab30-279769ef94af-laravel-framework-logo-C10176EC8C-seeklogo.com.png","imgix_url":"https://imgix.cosmicjs.com/291fdd60-4293-11e8-ab30-279769ef94af-laravel-framework-logo-C10176EC8C-seeklogo.com.png"},"code_example":"","seo_title":"","videos":[],"apps_search_term":"","articles_search_term":"","page_overview":"","seo_content":""}},{"_id":"5ce2e4d983695c0b6e7a2cc2","order":33,"slug":"developer-spotlight-ben-hong","title":"Developer Spotlight: Ben Hong","content":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Ben Hong, a Senior Front End Engineer residing in Washington, D.C. Ben wears several hats, first as a Front End Engineer at GitLab, as well as being an active Google Developer Expert and Vue.js community partner. He's also a contributor to VuePress, one of the most popular static site generators for Vue.js projects.

Ben recently helped re-build the new Cosmic Documentation using VuePress, so we're very familiar and grateful for his frontend chops. 😎

Cosmic: When did you first begin building software?
Ben: I started writing code when I was 10 years old. My dad had purchased an HTML and CSS book and I took to it quite quickly since the only thing required to get started was a plain text editor. I would then attempt to learn JavaScript only to be unfortunately misinformed by the fact that I needed to learn Java first. With the resources at the time, I wasn't successful and it wouldn't be until post-graduate school when I would take a look back into the tech field.

What is your preferred development stack?
My preferred development stack is:


What past projects are you most proud of and why?
VuePress Blog Boilerplate is one of my past projects that I am rather proud of because of the impact it had even though it was a rather niche problem to solve. It's always a positive reminder of how important it is to document problems that you solve and share it with the rest of the world because odds are pretty good that someone else is trying to solve a similar problem.

Tell us more about being a Vue.js community partner and your area of responsibility.
As a Vue.js community partner, I work with the core team to help grow the community and improve the ecosystem for everyone. The project I am currently helping to lead is Vue.js Events, which is an initiative to centralize Vue.js community events (i.e., meetups, conferences, workshops, etc.) in a single area so it is easier for people to find fellow Vue.js enthusiasts like themselves.

You have some fascinating job posts on your resume. How was your time at Politico?
When I was a UI Developer at Politico, I had the honor and priviliege to work with a great team that would update the technology stack to utilize Vue.js and experiment with technologies like React-Native. Working at a news organization was a unique experience in the way content was curated since deadlines could change depending on what was happening in the world.

What are some technologies you are excited to learn more about?
As someone who tinkers with a lot of side projects, two projects that I've been spending more time on lately is Gridsome and TailwindCSS. Gridsome is an up and coming framework that allows users to build JAM stack websites and PWAs using Vue.js. Tailwind CSS on the other hand, is a low-level CSS Framework that utilizes many CSS architecture principles I believe in and it's been great to see it get so much attention.

What are the latest updates from VuePress?
VuePress is currently in alpha and the team is working hard to get it to a stable v1.0 release. That said, it is already being used in many production sites (such as Cosmic) due to the fact that the current features cover most of what users currently need to build incredible documentation sites. Definitely worth checking out for every team building a product that requires documentation!

The Cosmic Spotlight Series is dedicated to showcasing developers that are building apps using modern tools. Learn how to contribute here. To stay connected with us follow us on Twitter and join the conversation on Slack.

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"key":"teaser","title":"Teaser","type":"html-textarea","children":null,"value":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Ben Hong, a Senior Front End Engineer residing in Washington, D.C. Ben wears several hats, first as a Front End Engineer at GitLab, as well as being an active Google Developer Expert and Vue.js community partner. He's also put some work into VuePress, one of the newest static site generator for Vue.js projects.

"},{"value":"63d2e680-8637-11e9-a33b-2bfd4360e9a2-ben-hong.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/63d2e680-8637-11e9-a33b-2bfd4360e9a2-ben-hong.jpg","imgix_url":"https://imgix.cosmicjs.com/63d2e680-8637-11e9-a33b-2bfd4360e9a2-ben-hong.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2019-05-20T17:33:13.784Z","created_by":"5716b504e9c686d006000073","modified_at":"2020-10-02T02:07:53.246Z","created":"2019-05-20T17:33:13.784Z","status":"published","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2019-06-04T13:38:09.064Z","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Ben Hong, a Senior Front End Engineer residing in Washington, D.C. Ben wears several hats, first as a Front End Engineer at GitLab, as well as being an active Google Developer Expert and Vue.js community partner. He's also put some work into VuePress, one of the newest static site generator for Vue.js projects.

","featured_image":{"url":"https://cdn.cosmicjs.com/63d2e680-8637-11e9-a33b-2bfd4360e9a2-ben-hong.jpg","imgix_url":"https://imgix.cosmicjs.com/63d2e680-8637-11e9-a33b-2bfd4360e9a2-ben-hong.jpg"}}},{"_id":"5d543cc2696d9f3445b7e305","order":34,"slug":"cosmic-js-api-now-powered-by-fastly","title":"Cosmic API now powered by Fastly","content":"

We're excited to announce that all Cosmic API endpoints (REST and GraphQL) are now powered by the Fastly global CDN. You should now notice huge performance gains on your Bucket API endpoints. For example, if a large endpoint used to take 400ms it is now clocking in under 20ms!

What is Fastly?
Fastly is the leading global CDN cache layer provider that powers some of the most highly-trafficked websites on the internet. The New York Times, Airbnb, and more choose Fastly because of their global CDN of over 60 high-powered point of presence servers\r\n(POPs). These POPs are distributed closest to your users so they can get your content as fast as possible. This also shields your cached content from any issues caused by the origin infrastructure.

From the Fastly Network Map page, "we’ve focused our efforts on placing fewer, more powerful POPs at strategic locations around the world."



What does this mean for you?
We're happy to roll this out to all Cosmic users. Your Cosmic content is now automatically powered by the Fastly global CDN and available to your users world-wide. No extra work needs to be done on your part. Just sit back and notice huge performance gains for you and your users 😎 

And more great news: requests to the cache-served content from the Cosmic API will not count towards your API request limits on your billing plan. API requests are counted only on initial requests to any resource after you clear your cache either manually in Bucket > Settings or by adding, editing, or deleting content in your Bucket.

It's our mission to make sure your team has the best experience collaborating on content using Cosmic. With the Cosmic Fastly update, you can deliver great content and experiences to your world-wide customers even faster.

If you have any questions, reach out to us on Twitter and join the Slack community.

","metafields":[{"value":"2019-08-15","key":"published_date","title":"Published Date","type":"date","children":null},{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"b68677c0-beb3-11e9-9df8-f347c5233ec0-cosmic-fastly.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/b68677c0-beb3-11e9-9df8-f347c5233ec0-cosmic-fastly.jpg","imgix_url":"https://imgix.cosmicjs.com/b68677c0-beb3-11e9-9df8-f347c5233ec0-cosmic-fastly.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"changelogs","created_at":"2019-08-14T16:54:26.460Z","created_by":"5357ef811693be2118000001","modified_at":"2020-08-10T14:02:39.393Z","created":"2019-08-14T16:54:26.460Z","status":"published","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-08-15T14:45:08.259Z","metadata":{"published_date":"2019-08-15","author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"featured_image":{"url":"https://cdn.cosmicjs.com/b68677c0-beb3-11e9-9df8-f347c5233ec0-cosmic-fastly.jpg","imgix_url":"https://imgix.cosmicjs.com/b68677c0-beb3-11e9-9df8-f347c5233ec0-cosmic-fastly.jpg"}}},{"_id":"58fc09bf5161d903690003d5","order":34,"slug":"github-cms","title":"GitHub CMS","content":"

Cosmic JS is an API-first CMS that integrates well with GitHub. Use Cosmic JS to quickly build content-powered blogs, dynamic pages, and more.  Cosmic JS makes it easy to integrate with GitHub and manage content.\r\nCosmic JS offers various Client Libraries on GitHub. 

GitHub CMS Articles

The Cosmic Stack
App Deployment Monitoring Now Available
How to Deploy a Website with a Custom Domain

GitHub CMS Resources

Cosmic JS Docs
Official JavaScript Client
Cosmic JS GitHub

","metafields":[{"children":null,"type":"file","title":"Image","key":"image","id":"xhB4tSLyob","value":"e7ce1f70-27c7-11e7-9631-b17e7278f329-github.svg","url":"https://cdn.cosmicjs.com/e7ce1f70-27c7-11e7-9631-b17e7278f329-github.svg","imgix_url":"https://imgix.cosmicjs.com/e7ce1f70-27c7-11e7-9631-b17e7278f329-github.svg"},{"children":null,"type":"file","title":"Thumbnail","key":"thumbnail","id":"TUwV2FM6vs","value":"eb2adf00-27c7-11e7-9631-b17e7278f329-github.svg","url":"https://cdn.cosmicjs.com/eb2adf00-27c7-11e7-9631-b17e7278f329-github.svg","imgix_url":"https://imgix.cosmicjs.com/eb2adf00-27c7-11e7-9631-b17e7278f329-github.svg"},{"children":null,"type":"html-textarea","title":"Blurb","key":"blurb","id":"IE2yJGaEgL","value":"

Cosmic JS is an API-first CMS that integrates with GitHub. Use Cosmic JS to quickly build content-powered blogs, dynamic pages, and more.

"},{"children":null,"type":"text","title":"Headline","key":"headline","id":"2Lq96QX2y4","value":"GitHub"},{"children":null,"type":"text","title":"SEO Description","key":"seo_description","id":"OOhqRlH8k5","value":"Cosmic is the best CMS for your GitHub development workflow. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators."},{"children":null,"type":"file","title":"Twitter Card Image","key":"twitter_card_image","id":"UhMnadtQ3p","value":"0389ce20-2acb-11e7-ae54-e9a1fc58ec22-github.jpg","url":"https://cdn.cosmicjs.com/0389ce20-2acb-11e7-ae54-e9a1fc58ec22-github.jpg","imgix_url":"https://imgix.cosmicjs.com/0389ce20-2acb-11e7-ae54-e9a1fc58ec22-github.jpg"},{"children":null,"type":"html-textarea","title":"Code Example","key":"code_example","id":"rbcuUbTnMt","value":""},{"children":null,"type":"text","title":"SEO Title","key":"seo_title","id":"h5Xl9H7qtg","value":"Best GitHub CMS"},{"children":[],"type":"repeater","title":"Videos","key":"videos","id":"ZrrWfwgxvW","value":"","repeater_fields":[{"title":"Title","key":"title","value":"","type":"text","required":false},{"title":"Link","key":"link","value":"","type":"text","required":false}]}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"kb-articles","created_at":"2017-04-23T01:56:15.626Z","created_by":"5357ef811693be2118000001","created":"2017-04-23T01:56:15.626Z","status":"published","modified_at":"2020-06-27T19:34:15.179Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-06-27T19:34:15.179Z","unpublish_at":null,"metadata":{"image":{"url":"https://cdn.cosmicjs.com/e7ce1f70-27c7-11e7-9631-b17e7278f329-github.svg","imgix_url":"https://imgix.cosmicjs.com/e7ce1f70-27c7-11e7-9631-b17e7278f329-github.svg"},"thumbnail":{"url":"https://cdn.cosmicjs.com/eb2adf00-27c7-11e7-9631-b17e7278f329-github.svg","imgix_url":"https://imgix.cosmicjs.com/eb2adf00-27c7-11e7-9631-b17e7278f329-github.svg"},"blurb":"

Cosmic JS is an API-first CMS that integrates with GitHub. Use Cosmic JS to quickly build content-powered blogs, dynamic pages, and more.

","headline":"GitHub","seo_description":"Cosmic is the best CMS for your GitHub development workflow. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.","twitter_card_image":{"url":"https://cdn.cosmicjs.com/0389ce20-2acb-11e7-ae54-e9a1fc58ec22-github.jpg","imgix_url":"https://imgix.cosmicjs.com/0389ce20-2acb-11e7-ae54-e9a1fc58ec22-github.jpg"},"code_example":"","seo_title":"Best GitHub CMS","videos":[]}},{"_id":"5cc89b0e932dbd12e41696ad","order":34,"slug":"developer-spotlight-jacob-knaack","title":"Developer Spotlight: Jacob Knaack","content":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Jacob Knaack, a Web Developer and Technical Communicator residing in Seattle, Washington. Jacob is a Front End Developer at restack, a development studio that finely crafts websites and apps. Jacob is also a frequent contributor to the Cosmic Community, having recently built both the Progressive Apollo Blog as well as the Gatsby Documentation Website. Follow Jacob on LinkedIn and GitHub and enjoy the conversation.


Cosmic: When did you first begin building software?
Jacob: There’s really 2 answers here.  The first time I started to build something via a programming language was in the first grade when I built a website for a science fair.  This was in the early 90s so HTML, CSS, and JS weren’t super hot stuff and the site itself looked pretty crazy, as you can imagine a 1st grader would want a website to look.

I first started to build formal software for a living about 3 years ago when I started a programming bootcamp at Code Fellows in Seattle.  At the time I was working as a technical writer and wanted to level up my technical skills.  I began working on projects that revolved around full stack JavaScript and Python and from there I developed a nasty habit for designing and building web applications.

What is your preferred development stack?
I work almost entirely in the MERN / MEAN stack.  So the Node environment is really my bread and butter.  Using cloud storage and interfacing the internet of things all using JavaScript is very nice when working in primarily a JS environment, so I’ve really enjoyed working with Node all these years.

I do confess that if I’m working on a personal project, or just something that I’m working solo on, I do love just building things with simple vanilla JS (and nixing the fancy MVC workflows of React / Angular / Vue etc.)

What past projects are you most proud of and why?
A project that I really loved sinking time into was a a piece of software used for performing user market research for a tech company here is Seattle.  I built a Python server and a small front end client that would essentially scrape the internet and perform sentiment analysis on social media posts.  As a student at the University of Washington, most of my focus was on Psycholinguistics research (think of the intersection of linguistic behavior and psychological processing) so this was something that I very much wanted to grind away at. The project involved a lot of cloud computing services and ended up providing some extremely interesting results, dealing mostly with tweets and posts from Reddit.  Fun stuff.

You've contributed several Gatsby projects to the Cosmic Community. Talk more about the benefits you see in using a Gatsby + Cosmic stack. 
Gatsby is a great little static site generator and really works well for providing a performant experience for users.  Basically Gatsby takes all the data from our source code and API fetching and builds a bunch of HTML, CSS, and JS.   This allows content to be searched efficiently and faster with no long load times from enormous JS files trying to dynamically render things.  For the developer, Gatsby offers a ridiculous amount of flexibility.  For one, built in things like React, Graphql, hot-reloading, routing, and code splitting make the experience just like developing a dynamically rendered SPA (single page application).  Performance plus flexibility.

Combine this with a service like Cosmic and we can have even more flexibility for the end user.  A content management service that lets us define our own schemas and add whatever data we want while letting Gatsby fetch and build that data means we can build fast and performant applications that are able to respond quickly.  Now we have performance and flexibility for both the developer and the user as they can control their content through Cosmic while also getting a great interface from static files built with Gatsby.

What are some technologies you are excited about or want to learn more about
Honestly I’ve been excited about the VR space for a while now, and I think developing User Interfaces for VR platforms has a lot of opportunity.  I’ve played around with a couple web browser based frameworks for VR and they are getting quite sophisticated now that the hardware is becoming a little more affordable and prevalent.  As a React developer I am always burying my head in React workflows.  But the possibility using React to create VR components in the average web browser is pretty exciting.  It seems like Facebook is trying to make that a reality with React 360, I think formerly React VR.  As a psychologist and developer, I’m very interested in learning more about how we can create usable and exciting interfaces for web applications for VR devices.

The Cosmic Spotlight Series is dedicated to showcasing developers that are building apps using modern tools. Learn how to Contribute here. To stay connected with us follow us on Twitter and join the conversation on Slack.

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"key":"teaser","title":"Teaser","type":"html-textarea","children":null,"value":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Jacob Knaack, a Web Developer and Technical Communicator residing in Seattle, Washington. Jacob is a Front End Developer at restack, a development studio that finely crafts websites and apps. Jacob is also a frequent contributor to the Cosmic Community, having recently built both the Progressive Apollo Blog as well as the Gatsby Documentation Website. Follow Jacob on LinkedIn and GitHub and enjoy the conversation.

"},{"value":"1d2113c0-6c19-11e9-a246-abd80f26250a-Jacob.png","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/1d2113c0-6c19-11e9-a246-abd80f26250a-Jacob.png","imgix_url":"https://imgix.cosmicjs.com/1d2113c0-6c19-11e9-a246-abd80f26250a-Jacob.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2019-04-30T18:59:26.638Z","created_by":"5716b504e9c686d006000073","created":"2019-04-30T18:59:26.638Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2019-05-01T13:57:55.767Z","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Jacob Knaack, a Web Developer and Technical Communicator residing in Seattle, Washington. Jacob is a Front End Developer at restack, a development studio that finely crafts websites and apps. Jacob is also a frequent contributor to the Cosmic Community, having recently built both the Progressive Apollo Blog as well as the Gatsby Documentation Website. Follow Jacob on LinkedIn and GitHub and enjoy the conversation.

","featured_image":{"url":"https://cdn.cosmicjs.com/1d2113c0-6c19-11e9-a246-abd80f26250a-Jacob.png","imgix_url":"https://imgix.cosmicjs.com/1d2113c0-6c19-11e9-a246-abd80f26250a-Jacob.png"}}},{"_id":"5a0377fdb28973b91d000009","order":34,"slug":"smartconnect-launches-a-marketing-website","title":"SmartConnect Launches a Marketing Website","content":"

SmartConnect is a one-stop shop that helps ease the stress of moving into a new home. They help connect customer's water, gas, electricity, TV, phone, internet, satellite and security services in their new home. To do this SmartConnect partners with real estate companies to offer their services. They needed a way to manage content for their marketing website, as well as acquire realtor partners that can create their own branded pages within the website.  




“We were pitched Cosmic by our Interactive Agency Partner Simple Media. Simple was able to quickly build a content-driven marketing website that produces leads and allows us to convert them. Our website directly accepts Partner information and\r\ngenerates a new partner-branded landing page for our SmartConnect reps. Cosmic lets us make content edits, write new blogs and track leads while also automatically building new partner pages that helps us build our business faster."

— Michael Zobeck, Founder, SmartConnect


SmartConnect is an example of a Cosmic-powered application built by Community Member Simple Media. Read more about Simple Media in their \r\nCase Study. 

","metafields":[{"value":"SmartConnect","key":"company","title":"Company","type":"text","children":null},{"value":"Concierge Services ","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"SmartConnect is a one-stop shop that helps ease the stress of moving into a new home. They help connect customer's water, gas, electricity, TV, phone, internet, satellite and security services in their new home. To do this SmartConnect partners with real estate companies to offer their services. They needed a way to manage content for a marketing website, as well as acquire realtor partners that have their own branded pages. \n\n\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"437e90b0-c4cc-11e7-bedc-43d6110cf0dd-f2ca4000-b02c-11e7-ad94-cd2adf5d0d81-blank logo_full_landscape.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/437e90b0-c4cc-11e7-bedc-43d6110cf0dd-f2ca4000-b02c-11e7-ad94-cd2adf5d0d81-blank logo_full_landscape.png","imgix_url":"https://imgix.cosmicjs.com/437e90b0-c4cc-11e7-bedc-43d6110cf0dd-f2ca4000-b02c-11e7-ad94-cd2adf5d0d81-blank logo_full_landscape.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2017-11-08T21:32:43.952Z","created_by":"5716b504e9c686d006000073","created":"2017-11-08T21:32:43.952Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5357ef811693be2118000001","publish_at":null,"metadata":{"company":"SmartConnect","industry_type":"Concierge Services ","teaser":"SmartConnect is a one-stop shop that helps ease the stress of moving into a new home. They help connect customer's water, gas, electricity, TV, phone, internet, satellite and security services in their new home. To do this SmartConnect partners with real estate companies to offer their services. They needed a way to manage content for a marketing website, as well as acquire realtor partners that have their own branded pages. \n\n\n","logo":{"url":"https://cdn.cosmicjs.com/437e90b0-c4cc-11e7-bedc-43d6110cf0dd-f2ca4000-b02c-11e7-ad94-cd2adf5d0d81-blank logo_full_landscape.png","imgix_url":"https://imgix.cosmicjs.com/437e90b0-c4cc-11e7-bedc-43d6110cf0dd-f2ca4000-b02c-11e7-ad94-cd2adf5d0d81-blank logo_full_landscape.png"}}},{"_id":"5a2842a36eb72c025900014f","order":35,"slug":"sloma-real-estate-group-builds-a-website","title":"Sloma Real Estate Group Builds a Website","content":"

Sloma Real Estate wanted to make finding a home in Chicago a memorable experience for all the right reasons. When they decided to build a new website, they wanted something that was memorable without being gaudy, and distinguished without being pretentious. 



“With regards to speed and flexibility there is no equal to Cosmic. The amount of things that we were able to accomplish on a tight budget and timeline were nothing short of remarkable.”

— Garrett Sibinga, Front End Engineer  

Garrett Sibinga: "When we set out to build the website, we wanted a fast and modern site that could support rich content without slowing down. We wanted to be able to work with API’s, but still have the flexibility of a CMS system. After lots of research we settled on Cosmic because the interface and concepts were familiar from WordPress, but the prospect of working with Node.js instead of PHP was a huge relief."

"Once we started working with the Cosmic platform, we quickly began to see many of the advantages. Whether is was the API string that auto-populates for each page, adding metafields and structuring data on the fly, or the Imgix integration for serving the perfectly sized image every time, we were thrilled by the features we continued to discover. In addition to having great features, we were blown away by the speed and consistency that the platform offered."




"For everything that was awesome about the project, there were definitely some technical challenges. Because the site uses MLS data, iFrames were a necessary evil. In order to include them dynamically in our layouts, we had to communicate with them. We ended writing scripts that work between our MLS provider’s domain and our main domain which resize our frame window based on the content within it. Overall the project turned out great, and we couldn’t have been more excited when we launched slomarealestate.com. "


Case Study Contributed by Garrett Sibinga, Cosmic Community Member 


\">
","metafields":[{"value":"Sloma Real Estate Group","key":"company","title":"Company","type":"text","children":null},{"value":"Real Estate","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Sloma Real Estate wanted to make finding a home in Chicago a memorable experience for all the right reasons. When they decided to build a new website, they wanted something that was memorable without being gaudy, and distinguished without being pretentious. They wanted to be able to work with API’s while still having the flexibility of a CMS system. ","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"38908d20-e0fb-11e7-9770-193f8ce654df-Asset 34.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/38908d20-e0fb-11e7-9770-193f8ce654df-Asset 34.png","imgix_url":"https://imgix.cosmicjs.com/38908d20-e0fb-11e7-9770-193f8ce654df-Asset 34.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2017-12-06T19:18:59.312Z","created_by":"5716b504e9c686d006000073","created":"2017-12-06T19:18:59.313Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"metadata":{"company":"Sloma Real Estate Group","industry_type":"Real Estate","teaser":"Sloma Real Estate wanted to make finding a home in Chicago a memorable experience for all the right reasons. When they decided to build a new website, they wanted something that was memorable without being gaudy, and distinguished without being pretentious. They wanted to be able to work with API’s while still having the flexibility of a CMS system. ","logo":{"url":"https://cdn.cosmicjs.com/38908d20-e0fb-11e7-9770-193f8ce654df-Asset 34.png","imgix_url":"https://imgix.cosmicjs.com/38908d20-e0fb-11e7-9770-193f8ce654df-Asset 34.png"}}},{"_id":"5d35ed4c28b51555a1a478e5","order":35,"slug":"duplicate-object-types-editor-publishing-restrictions","title":"Duplicate Object Types, Editor Publishing Restrictions","content":"

We have a couple new feature releases for your review:

Duplicate Object Types
You can now Duplicate Object Types. Go to any Object Type > Settings page and scroll to the bottom and find the "Duplicate Objects Type" button. This is a great time saver for when you need to duplicate Object Type Metafield content models and settings (it does not duplicate Objects).


Editor Restricted Publishing
You can now assign a team member access to all content in your Bucket but only allow them to save content to draft. This is a nice in-between role between Editor and Contributor.

","metafields":[{"value":"","key":"published_date","title":"Published Date","type":"date","children":null},{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":null,"imgix_url":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"changelogs","created_at":"2019-07-22T17:07:24.944Z","created_by":"5357ef811693be2118000001","modified_at":"2020-08-10T13:59:43.225Z","created":"2019-07-22T17:07:24.944Z","status":"published","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-07-22T17:14:44.956Z","metadata":{"published_date":"","author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"featured_image":{"url":null,"imgix_url":null}}},{"_id":"5a2f014769fccec655000009","order":35,"slug":"typescript-cms","title":"TypeScript CMS ","content":"","metafields":[{"children":null,"type":"file","title":"Image","key":"image","id":"xEsEbr17ak","value":"ac1708c0-debf-11e7-ab11-c9d0f3286dfc-Unknown.png","url":"https://cdn.cosmicjs.com/ac1708c0-debf-11e7-ab11-c9d0f3286dfc-Unknown.png","imgix_url":"https://imgix.cosmicjs.com/ac1708c0-debf-11e7-ab11-c9d0f3286dfc-Unknown.png"},{"children":null,"type":"file","title":"Thumbnail","key":"thumbnail","id":"hxo5hWDtdQ","value":"a85ce6f0-debf-11e7-ab11-c9d0f3286dfc-Unknown.png","url":"https://cdn.cosmicjs.com/a85ce6f0-debf-11e7-ab11-c9d0f3286dfc-Unknown.png","imgix_url":"https://imgix.cosmicjs.com/a85ce6f0-debf-11e7-ab11-c9d0f3286dfc-Unknown.png"},{"children":null,"type":"html-textarea","title":"Blurb","key":"blurb","id":"JhvPtIN21b","value":"

Cosmic is the best CMS for TypeScript websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

"},{"children":null,"type":"text","title":"Headline","key":"headline","id":"eS4BnOnwpI","value":"TypeScript"},{"children":null,"type":"text","title":"SEO Description","key":"seo_description","id":"GLL8Huo0kA","value":"Cosmic is the best CMS for TypeScript websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators."},{"children":null,"type":"file","title":"Twitter Card Image","key":"twitter_card_image","id":"00WvECgvNL","value":"979b32e0-debf-11e7-a865-5b78e641a505-Unknown.png","url":"https://cdn.cosmicjs.com/979b32e0-debf-11e7-a865-5b78e641a505-Unknown.png","imgix_url":"https://imgix.cosmicjs.com/979b32e0-debf-11e7-a865-5b78e641a505-Unknown.png"},{"children":null,"type":"html-textarea","title":"Code Example","key":"code_example","id":"BouGTZZKHw","value":""},{"children":null,"type":"text","title":"SEO Title","key":"seo_title","id":"3jCXLJhykI","value":"Best Headless CMS for TypeScript"},{"children":[],"type":"repeater","title":"Videos","key":"videos","id":"qMCjXKINbg","value":"","repeater_fields":[{"title":"Title","key":"title","value":"","type":"text","required":false},{"title":"Link","key":"link","value":"","type":"text","required":false}]},{"children":null,"type":"text","title":"Apps Search Term","key":"apps_search_term","id":"3dkcxkd4ob","value":""},{"children":null,"type":"text","title":"Articles Search Term","key":"articles_search_term","id":"hJM1KnyWxu","value":""},{"children":null,"type":"text","title":"Page Overview Title","key":"page_overview_title","id":"l6U3bYtxCZ","value":""},{"children":null,"type":"html-textarea","title":"Page Overview","key":"page_overview","id":"aVM1hYsvg5","value":""},{"children":null,"type":"html-textarea","title":"SEO Content","key":"seo_content","id":"Wa5glLRZko","value":""},{"children":[],"type":"repeater","title":"Apps","key":"apps","id":"APBWc2DwG9","value":"","repeater_fields":[{"title":"App Slug","key":"app_slug","value":"","type":"text","required":false}]},{"children":[],"type":"repeater","title":"Articles","key":"articles","id":"CITz1i7kHD","value":"","repeater_fields":[{"title":"Article Slug","key":"article_slug","value":"","type":"text","required":false}]}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"kb-articles","created_at":"2017-04-22T23:07:51.159Z","created_by":"5357ef811693be2118000001","created":"2017-12-11T22:05:59.333Z","status":"published","modified_at":"2020-10-28T14:34:55.349Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-10-28T14:34:55.349Z","unpublish_at":null,"metadata":{"image":{"url":"https://cdn.cosmicjs.com/ac1708c0-debf-11e7-ab11-c9d0f3286dfc-Unknown.png","imgix_url":"https://imgix.cosmicjs.com/ac1708c0-debf-11e7-ab11-c9d0f3286dfc-Unknown.png"},"thumbnail":{"url":"https://cdn.cosmicjs.com/a85ce6f0-debf-11e7-ab11-c9d0f3286dfc-Unknown.png","imgix_url":"https://imgix.cosmicjs.com/a85ce6f0-debf-11e7-ab11-c9d0f3286dfc-Unknown.png"},"blurb":"

Cosmic is the best CMS for TypeScript websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

","headline":"TypeScript","seo_description":"Cosmic is the best CMS for TypeScript websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.","twitter_card_image":{"url":"https://cdn.cosmicjs.com/979b32e0-debf-11e7-a865-5b78e641a505-Unknown.png","imgix_url":"https://imgix.cosmicjs.com/979b32e0-debf-11e7-a865-5b78e641a505-Unknown.png"},"code_example":"","seo_title":"Best Headless CMS for TypeScript","videos":[],"apps_search_term":"","articles_search_term":"","page_overview_title":"","page_overview":"","seo_content":"","apps":[],"articles":[]}},{"_id":"5d238263f6d70b6118eaa61f","order":36,"slug":"headless-cms-features-and-solution-pages","title":"Headless CMS Features and Solution Pages","content":"

We're excited to launch new resources to demonstrate how teams all over the world are using the Cosmic headless CMS to manage content for their websites and apps. You'll now notice:

  1. The Navigation Bar has grown to include a new Solutions Tab, which outlines use-cases like E-Commerce Websites, Blogs, Native Apps and more. Each Solution page provides helpful open-source example apps, extensions and customer stories that demonstrate that particular use-case.
  2. All Cosmic Headless CMS Features now have a Feature Detail Page for easier adoption and reference among teams. See example: Revision History.

By highlighting customer use-cases and providing better feature documentation, it's our goal to help you build apps faster, together. If you have any questions, or any other feature requests, reach out to us on Slack and join us on Twitter.   

Photo by Johannes Plenio on Unsplash

","metafields":[{"value":"2019-07-09","key":"published_date","title":"Published Date","type":"date","children":null},{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"value":"29d44330-a279-11e9-891e-991d47368f91-johannes-plenio-voQ97kezCx0-unsplash.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/29d44330-a279-11e9-891e-991d47368f91-johannes-plenio-voQ97kezCx0-unsplash.jpg","imgix_url":"https://imgix.cosmicjs.com/29d44330-a279-11e9-891e-991d47368f91-johannes-plenio-voQ97kezCx0-unsplash.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"changelogs","created_at":"2019-07-08T17:50:27.918Z","created_by":"5716b504e9c686d006000073","modified_at":"2020-08-10T13:59:43.225Z","created":"2019-07-08T17:50:27.918Z","status":"published","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-07-09T19:06:57.190Z","metadata":{"published_date":"2019-07-09","author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"featured_image":{"url":"https://cdn.cosmicjs.com/29d44330-a279-11e9-891e-991d47368f91-johannes-plenio-voQ97kezCx0-unsplash.jpg","imgix_url":"https://imgix.cosmicjs.com/29d44330-a279-11e9-891e-991d47368f91-johannes-plenio-voQ97kezCx0-unsplash.jpg"}}},{"_id":"58fc11d1f9dd68656c0000b3","order":36,"slug":"python-cms","title":"Python CMS","content":"

Cosmic JS is an API-first CMS that integrates with Python. Use Cosmic JS to quickly build content-powered blogs, dynamic pages, and more. Install the Official Cosmic JS Python Client to start managing dynamic content. Cosmic JS offers an easy way to power\r\ncontent for your Python apps.  As your Python CMS, Cosmic  JS allows you to develop your application faster and easier.

Python CMS Articles

The Cosmic Stack

Python CMS Resources

Cosmic JS Docs
Official Python Client
Cosmic JS GitHub

Examples

git clone https://github.com/cosmicjs/cosmicjs-python.git\r\ncd cosmicjs-python\r\npython setup.py install

Then in your Python file:

from pythoncosmicjs import Api\r\n# Configure\r\napi = Api(bucket='bucket-slug', read_key='read_key', write_key='write_key')\r\n# Get all objects\r\nprint(api.objects(limit=10, skip=5)) # limit, skip the default is None\r\n# Get objects by type\r\nprint(api.object_type(type_slug='pages', limit=10, skip=5)) # limit, skip the default is None\r\n# Get object\r\nprint(api.object(object_slug='object-slug')) # object_slug mandatory variable\r\n

More examples available on the Getting Started page.

","metafields":[{"children":null,"type":"file","title":"Image","key":"image","id":"W0CkugvO0E","value":"89ba2960-27cc-11e7-8426-e9537a551401-python.svg","url":"https://cdn.cosmicjs.com/89ba2960-27cc-11e7-8426-e9537a551401-python.svg","imgix_url":"https://imgix.cosmicjs.com/89ba2960-27cc-11e7-8426-e9537a551401-python.svg"},{"children":null,"type":"file","title":"Thumbnail","key":"thumbnail","id":"5c7W2salx2","value":"8d27d8e0-27cc-11e7-8426-e9537a551401-python.svg","url":"https://cdn.cosmicjs.com/8d27d8e0-27cc-11e7-8426-e9537a551401-python.svg","imgix_url":"https://imgix.cosmicjs.com/8d27d8e0-27cc-11e7-8426-e9537a551401-python.svg"},{"children":null,"type":"html-textarea","title":"Blurb","key":"blurb","id":"pvAT2TorkC","value":"

Cosmic is the best CMS for Python websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

"},{"children":null,"type":"text","title":"Headline","key":"headline","id":"ZlXTKEubcD","value":"Python"},{"children":null,"type":"text","title":"SEO Description","key":"seo_description","id":"2znYsZjhzM","value":"Cosmic is the best CMS for Python websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators."},{"children":null,"type":"file","title":"Twitter Card Image","key":"twitter_card_image","id":"bA9gZH8Wvo","value":"bd335db0-2aca-11e7-ae54-e9a1fc58ec22-python.jpg","url":"https://cdn.cosmicjs.com/bd335db0-2aca-11e7-ae54-e9a1fc58ec22-python.jpg","imgix_url":"https://imgix.cosmicjs.com/bd335db0-2aca-11e7-ae54-e9a1fc58ec22-python.jpg"},{"children":null,"type":"html-textarea","title":"Code Example","key":"code_example","id":"cpaU1bH93b","value":""},{"children":null,"type":"text","title":"SEO Title","key":"seo_title","id":"fwokhKF34Q","value":""},{"children":[],"type":"repeater","title":"Videos","key":"videos","id":"frgtgqfrpylludl8pnsi","value":"","repeater_fields":[{"title":"Title","key":"title","value":"","type":"text","required":false},{"title":"Link","key":"link","value":"","type":"text","required":false}]}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"kb-articles","created_at":"2017-04-23T02:30:41.876Z","created_by":"5357ef811693be2118000001","created":"2017-04-23T02:30:41.876Z","status":"published","modified_at":"2020-06-27T19:34:59.755Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-06-27T19:34:59.755Z","unpublish_at":null,"metadata":{"image":{"url":"https://cdn.cosmicjs.com/89ba2960-27cc-11e7-8426-e9537a551401-python.svg","imgix_url":"https://imgix.cosmicjs.com/89ba2960-27cc-11e7-8426-e9537a551401-python.svg"},"thumbnail":{"url":"https://cdn.cosmicjs.com/8d27d8e0-27cc-11e7-8426-e9537a551401-python.svg","imgix_url":"https://imgix.cosmicjs.com/8d27d8e0-27cc-11e7-8426-e9537a551401-python.svg"},"blurb":"

Cosmic is the best CMS for Python websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

","headline":"Python","seo_description":"Cosmic is the best CMS for Python websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.","twitter_card_image":{"url":"https://cdn.cosmicjs.com/bd335db0-2aca-11e7-ae54-e9a1fc58ec22-python.jpg","imgix_url":"https://imgix.cosmicjs.com/bd335db0-2aca-11e7-ae54-e9a1fc58ec22-python.jpg"},"code_example":"","seo_title":"","videos":[]}},{"_id":"5c6dacf64692736579b70232","order":36,"slug":"product-update-view-as-editor","title":"Product Update: View as Editor","content":"

We're happy to release a new feature that helps you collaborate with your team members easier using Cosmic. Introducing View as Editor.

As a developer, getting a CMS set up for your content creators requires a certain level of empathy. It's your job to make a technology choice that allows them to work in a comfortable environment and only see what they need to get their job done.

With the new "View as Editor" toggle now available in your Bucket for the developer and admin roles (see gif below), you can preview the entire Bucket experience from the vantage point of your content creators hiding all developer features and settings.


So now when you add your content creators in the editor role, you can be sure that you are giving them an intuitive and easy-to-use editing experience.

I'd love to hear your thoughts on this and other ways to make it easier for teams of developers and content creators to collaborate. Join the conversation on Slack and reach out to us on Twitter.

Photo by Scott Webb on Unsplash.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"key":"teaser","title":"Teaser","type":"html-textarea","children":null,"value":"

As a developer, getting a CMS set up for your content creators requires a certain level of empathy. It's your job to make a technology choice that allows them to work in a comfortable environment and only see what they need to get their job done.

"},{"value":"daa1a400-3546-11e9-be5e-d196042f83b6--udZnjsCzsE.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/daa1a400-3546-11e9-be5e-d196042f83b6--udZnjsCzsE.jpg","imgix_url":"https://imgix.cosmicjs.com/daa1a400-3546-11e9-be5e-d196042f83b6--udZnjsCzsE.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2019-02-20T19:39:34.921Z","created_by":"5357ef811693be2118000001","created":"2019-02-20T19:39:34.921Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-02-21T01:38:58.279Z","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

As a developer, getting a CMS set up for your content creators requires a certain level of empathy. It's your job to make a technology choice that allows them to work in a comfortable environment and only see what they need to get their job done.

","featured_image":{"url":"https://cdn.cosmicjs.com/daa1a400-3546-11e9-be5e-d196042f83b6--udZnjsCzsE.jpg","imgix_url":"https://imgix.cosmicjs.com/daa1a400-3546-11e9-be5e-d196042f83b6--udZnjsCzsE.jpg"}}},{"_id":"59f100cb13c70dca7800304e","order":36,"slug":"resistbot-brings-democracy-to-your-fingertips","title":"Resistbot Brings Democracy to Your Fingertips","content":"

Resistbot empowers citizens to help bring change in their government.  By simply texting RESIST to 50409, they will take your request, turn it into a formal letter then fax it to your elected officials.  Resistbot uses Cosmic to empower their platform with information to serve to their millions of users.


“Cosmic enabled me to spin up a number of simple content-driven Resistbot features in a matter of minutes: helping folks find a topic to write to their officials about, tips for using the bot, and fun quotes. I was able to move content out of my\r\nflow logic and simplify my code. It worked great for me as a quick data API, and saved me a ton of time. And when I need help, the team is always right there.”

— Jason Putori, Co-creator Resistbot

","metafields":[{"value":"Resistbot","key":"company","title":"Company","type":"text","children":null},{"value":"Civic Action","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Resistbot empowers citizens to help bring change in their government. By simply texting RESIST to 50409, they will take your request, turn it into a formal letter then fax it to your elected officials. Resistbot uses Cosmic to empower their platform with information to serve to their millions of users.","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"bbe7a3e0-c3d5-11e7-8554-abcc312ecfae-resistbot.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/bbe7a3e0-c3d5-11e7-8554-abcc312ecfae-resistbot.png","imgix_url":"https://imgix.cosmicjs.com/bbe7a3e0-c3d5-11e7-8554-abcc312ecfae-resistbot.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2017-10-25T21:23:23.430Z","created_by":"5716b504e9c686d006000073","created":"2017-10-25T21:23:23.430Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5357ef811693be2118000001","publish_at":null,"metadata":{"company":"Resistbot","industry_type":"Civic Action","teaser":"Resistbot empowers citizens to help bring change in their government. By simply texting RESIST to 50409, they will take your request, turn it into a formal letter then fax it to your elected officials. Resistbot uses Cosmic to empower their platform with information to serve to their millions of users.","logo":{"url":"https://cdn.cosmicjs.com/bbe7a3e0-c3d5-11e7-8554-abcc312ecfae-resistbot.png","imgix_url":"https://imgix.cosmicjs.com/bbe7a3e0-c3d5-11e7-8554-abcc312ecfae-resistbot.png"}}},{"_id":"58fc0ec85161d9036900040f","order":37,"slug":"php-cms","title":"PHP CMS","content":"

Cosmic JS is an API-first CMS that integrates with PHP. Use Cosmic JS to quickly build content-powered blogs, dynamic pages, and more. Install the Official Cosmic JS PHP Client to start managing content for your app application.  Check out some PHP integration examples on our Apps page.

PHP CMS Articles

Build a PHP Single-Page Website in 4 Steps
Building an Inventory Management App Using Vue.js and Laravel

PHP CMS Resources

Cosmic JS Docs
Official PHP Client
PHP Apps
Cosmic JS GitHub

Examples

Clone the PHP client:

git clone https://github.com/cosmicjs/cosmicjs-php

Then in your PHP file:

$config = new stdClass();\r\n$config->bucket_slug = "astral";\r\ninclude("cosmicjs.php");\r\n$objects = $cosmicjs->getObjects();\r\nvar_dump($objects);
","metafields":[{"children":null,"type":"file","title":"Image","key":"image","id":"rQBITCqU8g","value":"2e3b1dc0-27cb-11e7-9631-b17e7278f329-php.svg","url":"https://cdn.cosmicjs.com/2e3b1dc0-27cb-11e7-9631-b17e7278f329-php.svg","imgix_url":"https://imgix.cosmicjs.com/2e3b1dc0-27cb-11e7-9631-b17e7278f329-php.svg"},{"children":null,"type":"file","title":"Thumbnail","key":"thumbnail","id":"zVRkJRMJ0M","value":"f5fd1350-27ca-11e7-9631-b17e7278f329-php.svg","url":"https://cdn.cosmicjs.com/f5fd1350-27ca-11e7-9631-b17e7278f329-php.svg","imgix_url":"https://imgix.cosmicjs.com/f5fd1350-27ca-11e7-9631-b17e7278f329-php.svg"},{"children":null,"type":"html-textarea","title":"Blurb","key":"blurb","id":"COhPQ3A2M3","value":"

Cosmic is the best CMS for PHP websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

"},{"children":null,"type":"text","title":"Headline","key":"headline","id":"NZP0ZERoVW","value":"PHP"},{"children":null,"type":"text","title":"SEO Description","key":"seo_description","id":"vtCIYox5S2","value":"Cosmic is the best CMS for PHP websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators."},{"children":null,"type":"file","title":"Twitter Card Image","key":"twitter_card_image","id":"drMNo5czEb","value":"cc373520-2aca-11e7-ae54-e9a1fc58ec22-php.jpg","url":"https://cdn.cosmicjs.com/cc373520-2aca-11e7-ae54-e9a1fc58ec22-php.jpg","imgix_url":"https://imgix.cosmicjs.com/cc373520-2aca-11e7-ae54-e9a1fc58ec22-php.jpg"},{"children":null,"type":"html-textarea","title":"Code Example","key":"code_example","id":"jCqcuVLuet","value":""},{"children":null,"type":"text","title":"SEO Title","key":"seo_title","id":"fwokhKF34Q","value":""},{"children":[],"type":"repeater","title":"Videos","key":"videos","id":"frgtgqfrpylludl8pnsi","value":"","repeater_fields":[{"title":"Title","key":"title","value":"","type":"text","required":false},{"title":"Link","key":"link","value":"","type":"text","required":false}]}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"kb-articles","created_at":"2017-04-23T02:17:44.047Z","created_by":"5357ef811693be2118000001","created":"2017-04-23T02:17:44.047Z","status":"published","modified_at":"2020-06-27T19:35:25.336Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-06-27T19:35:25.336Z","unpublish_at":null,"metadata":{"image":{"url":"https://cdn.cosmicjs.com/2e3b1dc0-27cb-11e7-9631-b17e7278f329-php.svg","imgix_url":"https://imgix.cosmicjs.com/2e3b1dc0-27cb-11e7-9631-b17e7278f329-php.svg"},"thumbnail":{"url":"https://cdn.cosmicjs.com/f5fd1350-27ca-11e7-9631-b17e7278f329-php.svg","imgix_url":"https://imgix.cosmicjs.com/f5fd1350-27ca-11e7-9631-b17e7278f329-php.svg"},"blurb":"

Cosmic is the best CMS for PHP websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

","headline":"PHP","seo_description":"Cosmic is the best CMS for PHP websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.","twitter_card_image":{"url":"https://cdn.cosmicjs.com/cc373520-2aca-11e7-ae54-e9a1fc58ec22-php.jpg","imgix_url":"https://imgix.cosmicjs.com/cc373520-2aca-11e7-ae54-e9a1fc58ec22-php.jpg"},"code_example":"","seo_title":"","videos":[]}},{"_id":"5a8f0ad2730d8d2953107b77","order":37,"slug":"design-spin-builds-a-react-website","title":"Design Spin Builds a React Website","content":"

Design Spin is a boutique independent design and development shop in Norwich, England. Principal Jason Foster focuses on creating premium interactive experiences for clients through web and mobile application development. Updating the Design Spin website had been on his radar for quite some time and this week we see the released product. Read on to hear the narrative directly from Jason Foster as written in his blog. 

Jason Foster: "We don't see the site as finished, but rather an ongoing project that we will iterate on and improve over time. Our old website was built with WordPress. We love WordPress, as do the clients we have that are using it. But we wanted the new site to be something modern, incorporating some of the latest in what the web has to offer.

JavaScript as a language has made a lot of advances over the last few years and has become extremely popular. It used to be known as a front end language, predominantly used for providing effects and interactions to web pages, things like image sliders for example. But today with the availability of node.js, it is possible to do a whole lot more.

Node allows JavaScript to run on the server side. If this was a WordPress website the language we would be using on the server side would be PHP, but we would still be using JavaScript on the client side for any browser trickery such as the image sliders mentioned. As we see it, this is one of the benefits of using Node for our server side implementation: much of the codebase used on the server side can be shared with the client and vice versa.

When you visit this website, the first page is delivered from the server then further page changes are handled client side. This makes the whole experience seem very quick. I will outline two of the tools used to get this job done.



React

Developed by Facebook, react is a popular JavaScript library for developing user interfaces. React allows you to break your page / user interface into smaller re-usable components that can have state and can be driven by state. When state in your app changes, React will only change what needs to change through its own complex differing algorithm.

This library also includes methods for rendering components on the server side. You may have seen apps that when loaded in your browser present you with an empty app container or a loading spinner, shortly followed by content. The content that follows was triggered to load after the initial page had been served. This all sounds innocent enough but if that content was important from an SEO perspective, the chances are a search engine may never know about it.

We used the server rendering features of react, so on initial page load our content is available to be crawled by a search engine.


Cosmic

As we were no longer using WordPress, we needed something to replace our content management system. WordPress has a built in Restful API, which would of worked well for this project, but we discovered Cosmic. Cosmic does everything WordPress does but without the programmatic hassle, so we could get the site up to speed quicker. They provide a useful library making it easy to query your data, so we wrapped this functionality on our own server routes so we could switch it out easily in the future should we ever need to. 

Cosmic also provides Web Hooks for setup to the URLs of your choice. When we create a new article, Cosmic notifies us through our specified URL, allowing us to do things like update our sitemap and send out push notifications.


PROGRESSIVE WEB APPS

When we built this website we wanted to ensure that we ticked the boxes outlined by Lighthouse for a progressive web app. Lighthouse is available within the Google Chrome browsers development tools, allowing you to quickly audit any of your web pages for Progressive Web Apps, Performance, Best Practices and Accessibility.

We care about what Google deems as important, so put a fair bit of effort in trying to get what Google's Lighthouse deemed to be a performant website / web app. We got a 100% for PWA and are still tweaking a bit to try and up our performance score, on last check 86%.

Our home page has a pixelated animation of My face! On the first iteration of coding that, the performance score was really suffering, as it was basically blocking interaction on the website which in Lighthouse's opinion is a big no no. When things like this happen you have to get creative. We knew we wanted the animation, because it looks cool right? So we ended up doing the calculations for where each pixel should be in a web worker. This got us back to a pretty good performance score and everybody was happy again, phew!"


"I hope in the future that this new website will convince clients to avoid WordPress and use the fantastic Cosmic API to build apps and manage content.”

— Jason Foster, Principal and Lead Developer

","metafields":[{"value":"Design Spin","key":"company","title":"Company","type":"text","children":null},{"value":"Interactive Agency","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Design Spin is a boutique independent design and development shop in Norwich, England. Principal Jason Foster focuses on creating premium interactive experiences for clients through web and mobile application development. Updating the Design Spin website had been on his radar for quite some time and this week we see the released product. \n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"8446d310-1804-11e8-b0cb-5d400b8ba5fa-3aedfc70-15b1-11e8-b72b-ad95b808aa14-design-spin-site-image.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/8446d310-1804-11e8-b0cb-5d400b8ba5fa-3aedfc70-15b1-11e8-b72b-ad95b808aa14-design-spin-site-image.jpg","imgix_url":"https://imgix.cosmicjs.com/8446d310-1804-11e8-b0cb-5d400b8ba5fa-3aedfc70-15b1-11e8-b72b-ad95b808aa14-design-spin-site-image.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-02-22T18:24:18.364Z","created_by":"5716b504e9c686d006000073","created":"2018-02-22T18:24:18.364Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"metadata":{"company":"Design Spin","industry_type":"Interactive Agency","teaser":"Design Spin is a boutique independent design and development shop in Norwich, England. Principal Jason Foster focuses on creating premium interactive experiences for clients through web and mobile application development. Updating the Design Spin website had been on his radar for quite some time and this week we see the released product. \n","logo":{"url":"https://cdn.cosmicjs.com/8446d310-1804-11e8-b0cb-5d400b8ba5fa-3aedfc70-15b1-11e8-b72b-ad95b808aa14-design-spin-site-image.jpg","imgix_url":"https://imgix.cosmicjs.com/8446d310-1804-11e8-b0cb-5d400b8ba5fa-3aedfc70-15b1-11e8-b72b-ad95b808aa14-design-spin-site-image.jpg"}}},{"_id":"5cf6f8ca78d0ad2a93da2d1d","order":37,"slug":"sign-up-log-in-with-google","title":"Sign up / Log in with Google","content":"

We're excited to announce a new way to sign up and log in with Cosmic: using your Google account. It just takes 2 clicks 😎 


Authenticating with your Google account comes in addition to the existing options of using GitHub, Single Sign-On or manual account creation. We hope this makes your team's onboarding experience frictionless and easy.

Log in or sign up to check it out.


If you have any questions, or any other feature requests (the squeaky wheel gets the grease!) reach out to us on Slack and join us on Twitter.   

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"value":"d40ca570-879b-11e9-8ede-1b82ca6d6457-cosmic-google.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/d40ca570-879b-11e9-8ede-1b82ca6d6457-cosmic-google.jpg","imgix_url":"https://imgix.cosmicjs.com/d40ca570-879b-11e9-8ede-1b82ca6d6457-cosmic-google.jpg"},{"value":"2019-06-05","key":"published_date","title":"Published Date","type":"date","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"changelogs","created_at":"2019-06-04T23:03:38.671Z","created_by":"5716b504e9c686d006000073","modified_at":"2020-08-10T13:59:43.225Z","created":"2019-06-04T23:03:38.671Z","status":"published","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:46:03.933Z","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"featured_image":{"url":"https://cdn.cosmicjs.com/d40ca570-879b-11e9-8ede-1b82ca6d6457-cosmic-google.jpg","imgix_url":"https://imgix.cosmicjs.com/d40ca570-879b-11e9-8ede-1b82ca6d6457-cosmic-google.jpg"},"published_date":"2019-06-05"}},{"_id":"5ced833730f2d23cfcb44613","order":38,"slug":"dashboard-updates","title":"Dashboard Updates","content":"

Here's a quick update on some nice improvements to the Cosmic Dashboard, accompanied by gifs for your viewing pleasure 😁 

1. Easier Integration Tools
We are committed to a world-class developer experience. It's our goal to make it as easy as possible to integrate Cosmic content into any application. And now the experience is even better because with this new Integration Tools modal update, you have instant access to the API response for any dashboard resource in your Bucket. You also have easy access to all the other available integration methods: GraphQL API, NPM Module, and more. 

Just click the "Integration Tools" button to see the magic in action.

The high standard for an easy integration experience is Stripe. And we are aiming to make it even easier than Stripe to integrate your Cosmic code into your app. That's right, I said it, and you can hold me to it 😜 

2. Remove File Metafields
You can now remove files from File Metafields. This is a feature that falls in the category of "why wasn't this shipped earlier?", but here it is, better late than never.


We hope you like these improvements to get you up and running with cloud-powered content faster and easier. If you have any questions, or any other feature requests (the squeaky wheel gets the grease!) reach out to us on Slack and join us on Twitter. 


Photo by Chris Liverani on Unsplash

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"b2b282a0-8179-11e9-a201-1d9059ecc643-HUJDz6CJEaM.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/b2b282a0-8179-11e9-a201-1d9059ecc643-HUJDz6CJEaM.jpg","imgix_url":"https://imgix.cosmicjs.com/b2b282a0-8179-11e9-a201-1d9059ecc643-HUJDz6CJEaM.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"changelogs","created_at":"2019-05-28T18:51:35.680Z","created_by":"5357ef811693be2118000001","modified_at":"2020-08-10T14:02:39.393Z","created":"2019-05-28T18:51:35.680Z","status":"published","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-05-28T19:54:46.501Z","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"featured_image":{"url":"https://cdn.cosmicjs.com/b2b282a0-8179-11e9-a201-1d9059ecc643-HUJDz6CJEaM.jpg","imgix_url":"https://imgix.cosmicjs.com/b2b282a0-8179-11e9-a201-1d9059ecc643-HUJDz6CJEaM.jpg"}}},{"_id":"58fc0f975161d90369000429","order":38,"slug":"android-cms","title":"Android CMS","content":"

2.5 million Apps in the Android App Store means that being cross-platform means web, iOS and Android. Get a feel for developing for Android by taking a spin through our Android App, the Cross-Platform Blog. 

Android CMS Articles

How to Build a Cross-Platform Blog Using ReactNative and \r\n\r\nNode.js
Build a Cross-Platform Blog in 4 Steps 

Android CMS Resources

Cosmic JS Docs
Official Javascript Client 
Android Apps 
Cosmic JS GitHub

Examples

You can access your Cosmic JS Bucket content with simple HTTP requests to the API:

https://api.cosmicjs.com/v1/cross-platform-blog/object-type/posts?pretty=true&hide_metafields=true
","metafields":[{"children":null,"type":"file","title":"Image","key":"image","id":"WO5s7ICSlz","value":"6a2df2d0-27cb-11e7-9631-b17e7278f329-android.svg","url":"https://cdn.cosmicjs.com/6a2df2d0-27cb-11e7-9631-b17e7278f329-android.svg","imgix_url":"https://imgix.cosmicjs.com/6a2df2d0-27cb-11e7-9631-b17e7278f329-android.svg"},{"children":null,"type":"file","title":"Thumbnail","key":"thumbnail","id":"dT7SfHF6id","value":"75d3f940-27cb-11e7-9631-b17e7278f329-android.svg","url":"https://cdn.cosmicjs.com/75d3f940-27cb-11e7-9631-b17e7278f329-android.svg","imgix_url":"https://imgix.cosmicjs.com/75d3f940-27cb-11e7-9631-b17e7278f329-android.svg"},{"children":null,"type":"html-textarea","title":"Blurb","key":"blurb","id":"gN3RPyRbFy","value":"

Cosmic is the best CMS for Android apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

"},{"children":null,"type":"text","title":"Headline","key":"headline","id":"Sbir6Vxtq7","value":"Android"},{"children":null,"type":"text","title":"SEO Description","key":"seo_description","id":"dHjcJATcg5","value":"Cosmic is the best CMS for Android apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators."},{"children":null,"type":"file","title":"Twitter Card Image","key":"twitter_card_image","id":"XSfMbb8iL8","value":"f1fe8880-2aca-11e7-ae54-e9a1fc58ec22-android.jpg","url":"https://cdn.cosmicjs.com/f1fe8880-2aca-11e7-ae54-e9a1fc58ec22-android.jpg","imgix_url":"https://imgix.cosmicjs.com/f1fe8880-2aca-11e7-ae54-e9a1fc58ec22-android.jpg"},{"children":null,"type":"html-textarea","title":"Code Example","key":"code_example","id":"nkdXOhfoCo","value":""},{"children":null,"type":"text","title":"SEO Title","key":"seo_title","id":"fwokhKF34Q","value":""},{"children":[],"type":"repeater","title":"Videos","key":"videos","id":"frgtgqfrpylludl8pnsi","value":"","repeater_fields":[{"title":"Title","key":"title","value":"","type":"text","required":false},{"title":"Link","key":"link","value":"","type":"text","required":false}]}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"kb-articles","created_at":"2017-04-23T02:21:11.603Z","created_by":"5357ef811693be2118000001","created":"2017-04-23T02:21:11.603Z","status":"published","modified_at":"2020-06-27T19:35:47.434Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-06-27T19:35:47.434Z","unpublish_at":null,"metadata":{"image":{"url":"https://cdn.cosmicjs.com/6a2df2d0-27cb-11e7-9631-b17e7278f329-android.svg","imgix_url":"https://imgix.cosmicjs.com/6a2df2d0-27cb-11e7-9631-b17e7278f329-android.svg"},"thumbnail":{"url":"https://cdn.cosmicjs.com/75d3f940-27cb-11e7-9631-b17e7278f329-android.svg","imgix_url":"https://imgix.cosmicjs.com/75d3f940-27cb-11e7-9631-b17e7278f329-android.svg"},"blurb":"

Cosmic is the best CMS for Android apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

","headline":"Android","seo_description":"Cosmic is the best CMS for Android apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.","twitter_card_image":{"url":"https://cdn.cosmicjs.com/f1fe8880-2aca-11e7-ae54-e9a1fc58ec22-android.jpg","imgix_url":"https://imgix.cosmicjs.com/f1fe8880-2aca-11e7-ae54-e9a1fc58ec22-android.jpg"},"code_example":"","seo_title":"","videos":[]}},{"_id":"5afae2e358cb6871b19ad2b4","order":38,"slug":"be-builds-a-new-community-and-website","title":"be© Builds a New Community, and Website ","content":"

be©: An unexpected place. Close to Milan, and only a few kilometers from the Linate and Orio al Serio airport, there is a workplace that could be the efficient and cost-effective answer to all you need in a business location. be© offices are built around the philosophy of smart-working practices and strives to enhance a good work-life balance.



Offering everything from optimal commutes to great meetings rooms and spaces as well as outdoor gardens and trails, Cassina de' Pecchi needed a way to digitally tell its story to its multiple audiences, so they choose Cosmic to build their new website. Cosmic offers Cassina de' Pecchi and their agency team the freedom to build applications in any programming language while giving non-technical editors the opportunity to edit, plan and manage content.

Built on Vue.js and Cosmic, the new website offers amenities such as Services, Information, Galleries and Location information. The tech team tasked with the website build heavily relied on the Cosmic GraphQL API and bills it as their team's "go-to feature". 



"We needed a flexible tool to implement different types of content at any given time so we choose Cosmic, which also allows for collaboration on our team. The killer feature, however, is the GraphQL API: we managed to develop the website with\r\nVue.js, just the way we like!

— Martino Roma, Lead Software Engineer  
","metafields":[{"value":"be©","key":"company","title":"Company","type":"text","children":null},{"value":"Construction","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Offering everything from optimal commutes to great meetings rooms and spaces as well as outdoor gardens and trails, Cassina de' Pecchi needed a way to digitally tell its story to its multiple audiences, so they choose Cosmic to build their new website. Cosmic offers Cassina de' Pecchi and their agency team the freedom to build applications in any programming language while giving non-technical editors the opportunity to edit, plan and manage content.\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"2db7a3d0-5922-11e8-81ce-5dccd2a7dbce-Risorsa 1@2x.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/2db7a3d0-5922-11e8-81ce-5dccd2a7dbce-Risorsa 1@2x.png","imgix_url":"https://imgix.cosmicjs.com/2db7a3d0-5922-11e8-81ce-5dccd2a7dbce-Risorsa 1@2x.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-05-15T13:38:43.379Z","created_by":"5716b504e9c686d006000073","created":"2018-05-15T13:38:43.379Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-11-02T14:32:13.903Z","metadata":{"company":"be©","industry_type":"Construction","teaser":"Offering everything from optimal commutes to great meetings rooms and spaces as well as outdoor gardens and trails, Cassina de' Pecchi needed a way to digitally tell its story to its multiple audiences, so they choose Cosmic to build their new website. Cosmic offers Cassina de' Pecchi and their agency team the freedom to build applications in any programming language while giving non-technical editors the opportunity to edit, plan and manage content.\n","logo":{"url":"https://cdn.cosmicjs.com/2db7a3d0-5922-11e8-81ce-5dccd2a7dbce-Risorsa 1@2x.png","imgix_url":"https://imgix.cosmicjs.com/2db7a3d0-5922-11e8-81ce-5dccd2a7dbce-Risorsa 1@2x.png"}}},{"_id":"5c58e60ff883ff0e8eba234b","order":38,"slug":"developer-spotlight-raymond-camden-of-american-express","title":"Developer Spotlight: Raymond Camden of American Express","content":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Raymond Camden, a Senior Software Engineer and Developer Advocate residing in Lafayette, Louisiana. Raymond has extensive experience in the technology space, having enjoyed stints at IBM, Adobe and AuthO prior to becoming a Senior Engineer for Developer Experience at American Express. Follow Raymond on Twitter, GitHub or LinkedIn,\r\nand enjoy the Q/A.


Cosmic: When did you first begin building software?
Raymond: I began on an Apple 2e (it may have been the +) back in the 80s. My initial reason was to cheat at games (ask me about hex editing for Bard's Tale) but after seeing Tron I was really inspired to become a coder. Boy was reality somewhat different...

What is your preferred development stack?
The web in general. I'd say mainly JavaScript and lately with Vue, but I'm passionate about the entire web stack. My favorite editor is Visual Studio Code (although I was a big Brackets fan for a while). When working on the back-end I'll still use JavaScript and Node.js.

What past projects are you most proud of and why?
I was big into MUD programming (multi-player online text adventure games, think Zork but with multiple players) and I built a framework to enable easier dialog creation and more thematic elements (time passing, etc). The code wasn't necessarily rocket science, but the end result - enabling more creativity - is something I'm really proud of.

Oh - and I built an app that scans your contacts, finds ones without pictures, and assigns a random cat picture. Yeah, I'm pretty proud of that too.

What are some technologies you are excited about or want to learn more about?
GraphQL for one. A lot of my work involves APIs and GraphQL feels like a real game changer. I'm incredibly excited about serverless and have been (slowly) playing with various different platforms and trying them out.

Do you have any tips for new developers just starting to code? 
For web developers, MDN Web Docs is the absolute best resource for learning, period. I'm a big fan of Node School as well since I like the interactive problem/solving experience. I'm also a big believer in building something that already existed. As programmers we've got DRY beaten into our skulls and that obviously makes sense, but when I'm learning a new language or platform, I'll build somethingvthat already exists, like a blog. That way I'm focused on the *how* of building it and not the *what*. The end result may be thrown away, but it's a great way to spend more time learning then trying to figure out what to do.


The Cosmic Spotlight Series is dedicated to showcasing developers that are building apps using modern tools. Learn how to Contribute here. To stay connected with us follow us on Twitter and join the conversation on Slack.

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"key":"teaser","title":"Teaser","type":"html-textarea","children":null,"value":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Raymond Camden, a Senior Software Engineer and Developer Advocate residing in Lafayette, Louisiana. Raymond has extensive experience in the technology space, having enjoyed stints at IBM, Adobe and AuthO prior to becoming a Senior Engineer for Developer Experience at American Express. Follow Raymond on Twitter, GitHub or LinkedIn, and enjoy the Q/A.

"},{"value":"dcc13c20-2973-11e9-ae72-4925ebbc0b12-DE-3AJbX_400x400.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/dcc13c20-2973-11e9-ae72-4925ebbc0b12-DE-3AJbX_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/dcc13c20-2973-11e9-ae72-4925ebbc0b12-DE-3AJbX_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2019-02-05T01:25:35.417Z","created_by":"5716b504e9c686d006000073","created":"2019-02-05T01:25:35.417Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2019-02-05T18:28:43.027Z","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Raymond Camden, a Senior Software Engineer and Developer Advocate residing in Lafayette, Louisiana. Raymond has extensive experience in the technology space, having enjoyed stints at IBM, Adobe and AuthO prior to becoming a Senior Engineer for Developer Experience at American Express. Follow Raymond on Twitter, GitHub or LinkedIn, and enjoy the Q/A.

","featured_image":{"url":"https://cdn.cosmicjs.com/dcc13c20-2973-11e9-ae72-4925ebbc0b12-DE-3AJbX_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/dcc13c20-2973-11e9-ae72-4925ebbc0b12-DE-3AJbX_400x400.jpg"}}},{"_id":"5c5333ba50a84c679d2be59b","order":39,"slug":"developer-spotlight-ali-spittel-of-dev-community","title":"Developer Spotlight: Ali Spittel of DEV Community","content":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Ali Spittel, a Software Engineer and Developer Advocate residing in Washington, DC. Ali was most recently Lead Instructor at General Assembly prior to scaling back her course schedule to accept a position as Software Engineer and Dev Advocate at DEV Community. When she's not busy teaching or leading the front-end charge at DEV Community, she's directing the DC Chapter of WomenWhoCode. Follow Ali on Twitter or her DEV Community profile and enjoy the Q/A.

Cosmic: When did you first begin building software?
Ali: I started writing code during my Sophomore year of college. I had an extra class block to take an elective, and I had heard that computer science was a great one to take. I fell in love with building stuff, and I moved into a teaching assistant role the next semester. I also started taking a C++ data structures and algorithms class, which I worked so hard at but I just didn't understand. So, I decided that programming wasn't for me, and moved down to DC for a political internship the next semester. Then, I fell back into data analysis programming for that internship, which led me into a software engineering career!

What is your preferred development stack?
I think in a dream world, I would write Vue frontends with Django APIs. Python brought me into programming, and it's still my go-to language. Django, and Django REST Framework, has so much awesome stuff built-in that makes building apps fun and quick.\r\nFor the frontend, I have love for both React and Vue, and I have professional experience with both. I just think Vue is usually easier to get up and running with. For databases, I'm a PosgreSQL loyalist.


What past projects are you most proud of and why?
Though it's not strictly a code project, I'm really proud of my tech blogging. I've only been doing it for a little over a year, and it's been awesome to see it grow and people's response. I also built Learn Code from Us which highlights tech content creators from underrepresented groups in tech, which is something I'm really passionate about. 


What were your biggest challenges being an instructor at General Assembly? 
Being an instructor is one of the most rewarding things I've ever done. Seeing students' growth is awesome. Learning to code can be really challenging from a lot of angles, and getting through that with the students is a challenge as well! It's\r\na truly immersive experience, and it is for the instructors as well.

I only taught fulltime for a year and a half, but we did make two big curriculum changes to fit in better with where we saw the DC market going. We first moved from AngularJS to React, since AngularJS is in the sunsetting process. We also moved from Ruby\r\nand Rails to Django and Python, since Python is so well used by the data science community which is really big in DC.


What was the inspiration for joining DEV Community? 
I've been a community member for a little over a year, and writing there was a huge part of how my blog gained traction. I really like the mission and the inclusive community that they foster.

It's my dream job! I get to do everything that I love doing -- coding, speaking, teaching, and working with the developer community. I'm very excited about it!


What are some technologies you are excited about or want to learn more about?
I really enjoy working with Gatsby and Vue, so I may try VuePress in the future. I also haven't gotten a chance to play with React Hooks yet, I'm really excited about them!


The Cosmic Spotlight Series is dedicated to showcasing developers that are building apps using modern tools. Learn how to Contribute here. To stay connected with us follow us on Twitter and join the conversation on Slack.

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"key":"teaser","title":"Teaser","type":"html-textarea","children":null,"value":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Ali Spittel, a Software Engineer and Developer Advocate residing in Washington, DC. Ali was most recently Lead Instructor at General Assembly prior to scaling back her course schedule to accept a position as Software Engineer and Dev Advocate at DEV Community. When she's not busy teaching or leading the front-end charge at DEV Community, she's directing the DC Chapter of WomenWhoCode. Follow Ali on Twitter or her DEV Community profile and enjoy the Q/A.

"},{"value":"e5a99560-2592-11e9-97d0-4b614869ef97-Ali.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e5a99560-2592-11e9-97d0-4b614869ef97-Ali.jpg","imgix_url":"https://imgix.cosmicjs.com/e5a99560-2592-11e9-97d0-4b614869ef97-Ali.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2019-01-31T17:43:22.306Z","created_by":"5716b504e9c686d006000073","created":"2019-01-31T17:43:22.306Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2019-02-01T17:13:26.546Z","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Ali Spittel, a Software Engineer and Developer Advocate residing in Washington, DC. Ali was most recently Lead Instructor at General Assembly prior to scaling back her course schedule to accept a position as Software Engineer and Dev Advocate at DEV Community. When she's not busy teaching or leading the front-end charge at DEV Community, she's directing the DC Chapter of WomenWhoCode. Follow Ali on Twitter or her DEV Community profile and enjoy the Q/A.

","featured_image":{"url":"https://cdn.cosmicjs.com/e5a99560-2592-11e9-97d0-4b614869ef97-Ali.jpg","imgix_url":"https://imgix.cosmicjs.com/e5a99560-2592-11e9-97d0-4b614869ef97-Ali.jpg"}}},{"_id":"5b2263219630a82b2e9cde53","order":39,"slug":"story-licensing-republishing-website-using-sendgrid-algolia-and-cosmic-js","title":"Story Licensing: Republishing Website Using SendGrid, Algolia and Cosmic","content":"

Story Licensing is a site for users to find and republish high-quality and high traffic blog posts on their own site, application or blog. Cosmic partnered with AMI to build the Story Licensing application using some of the most powerful development tools available. By offloading the non-core development functionality onto available API services, our cross-functional teams were able to build this application faster than we ever could have imagined.



AMI stands for ArtMap, Inc. and is a collection of publications that range from Hackernoon to Art + Marketing and P.S. I Love You. A backup of each AMI publication's content is stored in Cosmic. The team plugged in Algolia to search the available content and integrated SendGrid to notify the publisher and writer of a republishing lead. You can see more about how Story Licensing was built here.





"When the opportunity to work with Hacker Noon contributors Tony Spiro and Carson Gibbons came up, I jumped on the opportunity. Their API-first content management platform Cosmic was perfect (and super simple) for connecting best-in-class services like Algolia for search and SendGrid for email.  In terms of providing the framework for teams to quickly build quality professional apps, Cosmic is definitely onto something.”

— David Smooke, AMI Publisher-in-Chief  


\">
","metafields":[{"value":"Story Licensing ","key":"company","title":"Company","type":"text","children":null},{"value":"Republishing Platform","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Story Licensing is a site for users to find and republish high-quality and high traffic blog posts on their own site, application or blog. Cosmic partnered with AMI to build the Story Licensing application using some of the most powerful development tools available.\n\n\n\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"d3d32130-6fd0-11e8-922a-eb4448ab4dca-fb07c320-5f5c-11e8-889c-33c9a0abc661-sl.jpg","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/d3d32130-6fd0-11e8-922a-eb4448ab4dca-fb07c320-5f5c-11e8-889c-33c9a0abc661-sl.jpg","imgix_url":"https://imgix.cosmicjs.com/d3d32130-6fd0-11e8-922a-eb4448ab4dca-fb07c320-5f5c-11e8-889c-33c9a0abc661-sl.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2017-12-03T19:49:54.515Z","created_by":"5716b504e9c686d006000073","created":"2018-06-14T12:44:17.854Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-07-20T14:57:42.081Z","metadata":{"company":"Story Licensing ","industry_type":"Republishing Platform","teaser":"Story Licensing is a site for users to find and republish high-quality and high traffic blog posts on their own site, application or blog. Cosmic partnered with AMI to build the Story Licensing application using some of the most powerful development tools available.\n\n\n\n","logo":{"url":"https://cdn.cosmicjs.com/d3d32130-6fd0-11e8-922a-eb4448ab4dca-fb07c320-5f5c-11e8-889c-33c9a0abc661-sl.jpg","imgix_url":"https://imgix.cosmicjs.com/d3d32130-6fd0-11e8-922a-eb4448ab4dca-fb07c320-5f5c-11e8-889c-33c9a0abc661-sl.jpg"}}},{"_id":"5ce2b37260fd82017b4169a2","order":39,"slug":"cloudfront-cdn-now-included","title":"CloudFront CDN Now Included","content":"

Faster is better. And Cosmic media assets just got a whole lot faster. We are excited to announce that AWS CloudFront CDN asset delivery is now included free and automatically for all media assets delivered from the Cosmic\r\nJS API. This means that all of your global users will now receive your media assets faster on the global Cosmic CloudFront CDN.

Go into your Bucket and notice media urls will now originate from the Cosmic CloudFront CDN with the following base URL:

https://cdn.cosmicjs.com


What is CloudFront?
From the AWS website:
"Amazon CloudFront is a fast content delivery network (CDN) service that securely delivers data, videos, applications, and APIs to customers globally with low latency, high transfer speeds, all within a developer-friendly environment."

We hope you enjoy this added value for you, your team, and your end users. Join the conversation on Slack and follow us on Twitter.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"c9386830-7b09-11e9-9995-d5d38695c1e5-cloudfront-cosmicjs.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/c9386830-7b09-11e9-9995-d5d38695c1e5-cloudfront-cosmicjs.jpg","imgix_url":"https://imgix.cosmicjs.com/c9386830-7b09-11e9-9995-d5d38695c1e5-cloudfront-cosmicjs.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"changelogs","created_at":"2019-05-20T14:02:26.194Z","created_by":"5357ef811693be2118000001","modified_at":"2020-08-10T14:00:04.404Z","created":"2019-05-20T14:02:26.194Z","status":"published","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-05-20T15:28:51.168Z","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"featured_image":{"url":"https://cdn.cosmicjs.com/c9386830-7b09-11e9-9995-d5d38695c1e5-cloudfront-cosmicjs.jpg","imgix_url":"https://imgix.cosmicjs.com/c9386830-7b09-11e9-9995-d5d38695c1e5-cloudfront-cosmicjs.jpg"}}},{"_id":"58fc0a4f5161d903690003da","order":39,"slug":"ruby-on-rails-cms","title":"Ruby on Rails CMS","content":"

Cosmic JS is an API-first CMS that integrates with Ruby on Rails. Use Cosmic JS to quickly build content-powered blogs, dynamic pages, and more. Use the Cosmic JS Rest API to integrate with your Rails app to start managing content today. 

Rails CMS Articles

The Cosmic Stack

Rails CMS Resources

Cosmic JS Docs
Official JavaScript Client
Cosmic JS GitHub

Examples

You can access your Cosmic JS Bucket content with simple HTTP requests to the API:

https://api.cosmicjs.com/v1/cross-platform-blog/object-type/posts?pretty=true


","metafields":[{"children":null,"type":"file","title":"Image","key":"image","id":"AvR6zOeIjj","value":"4ae89b30-27c8-11e7-9631-b17e7278f329-rails.svg","url":"https://cdn.cosmicjs.com/4ae89b30-27c8-11e7-9631-b17e7278f329-rails.svg","imgix_url":"https://imgix.cosmicjs.com/4ae89b30-27c8-11e7-9631-b17e7278f329-rails.svg"},{"children":null,"type":"file","title":"Thumbnail","key":"thumbnail","id":"uX67Mqoabt","value":"4e326f00-27c8-11e7-9631-b17e7278f329-rails.svg","url":"https://cdn.cosmicjs.com/4e326f00-27c8-11e7-9631-b17e7278f329-rails.svg","imgix_url":"https://imgix.cosmicjs.com/4e326f00-27c8-11e7-9631-b17e7278f329-rails.svg"},{"children":null,"type":"html-textarea","title":"Blurb","key":"blurb","id":"SBTATnTTE9","value":"

Cosmic is the best CMS for Ruby on Rails websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

"},{"children":null,"type":"text","title":"Headline","key":"headline","id":"B7AHw2pbLf","value":"Ruby On Rails"},{"children":null,"type":"text","title":"SEO Description","key":"seo_description","id":"jhgCnluW6b","value":"Cosmic is the best CMS for Ruby on Rails websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators."},{"children":null,"type":"file","title":"Twitter Card Image","key":"twitter_card_image","id":"0gVtbjNgtP","value":"178a5980-2acb-11e7-ae54-e9a1fc58ec22-rails.jpg","url":"https://cdn.cosmicjs.com/178a5980-2acb-11e7-ae54-e9a1fc58ec22-rails.jpg","imgix_url":"https://imgix.cosmicjs.com/178a5980-2acb-11e7-ae54-e9a1fc58ec22-rails.jpg"},{"children":null,"type":"html-textarea","title":"Code Example","key":"code_example","id":"feepzZZjzq","value":""},{"children":null,"type":"text","title":"SEO Title","key":"seo_title","id":"QKuYj7ARJb","value":"Best Headless CMS for Ruby on Rails"},{"children":[],"type":"repeater","title":"Videos","key":"videos","id":"frgtgqfrpylludl8pnsi","value":"","repeater_fields":[{"title":"Title","key":"title","value":"","type":"text","required":false},{"title":"Link","key":"link","value":"","type":"text","required":false}]}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"kb-articles","created_at":"2017-04-23T01:58:39.740Z","created_by":"5357ef811693be2118000001","created":"2017-04-23T01:58:39.740Z","status":"published","modified_at":"2020-06-27T19:36:20.036Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-06-27T19:36:20.036Z","unpublish_at":null,"metadata":{"image":{"url":"https://cdn.cosmicjs.com/4ae89b30-27c8-11e7-9631-b17e7278f329-rails.svg","imgix_url":"https://imgix.cosmicjs.com/4ae89b30-27c8-11e7-9631-b17e7278f329-rails.svg"},"thumbnail":{"url":"https://cdn.cosmicjs.com/4e326f00-27c8-11e7-9631-b17e7278f329-rails.svg","imgix_url":"https://imgix.cosmicjs.com/4e326f00-27c8-11e7-9631-b17e7278f329-rails.svg"},"blurb":"

Cosmic is the best CMS for Ruby on Rails websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

","headline":"Ruby On Rails","seo_description":"Cosmic is the best CMS for Ruby on Rails websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.","twitter_card_image":{"url":"https://cdn.cosmicjs.com/178a5980-2acb-11e7-ae54-e9a1fc58ec22-rails.jpg","imgix_url":"https://imgix.cosmicjs.com/178a5980-2acb-11e7-ae54-e9a1fc58ec22-rails.jpg"},"code_example":"","seo_title":"Best Headless CMS for Ruby on Rails","videos":[]}},{"_id":"5c4f20a4c420fc09709e5c8e","order":40,"slug":"developer-spotlight-rick-hanlon-of-facebook","title":"Developer Spotlight: Rick Hanlon of Facebook","content":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Rick Hanlon, a Front End Engineer and recent New Yorker that is now residing in London, England working on the React Native Core team at Facebook. Follow Rick on Twitter or LinkedIn and enjoy the Q/A.



Cosmic: When did you first begin building software?
Rick: I was fortunate because my dad taught me BASIC when I was 11. This sparked a love with computers really early on. Through middle school I spent most of my time either in the computer lab playing with apps and downloading music on Napster or in my parents basement building websites on GeoCities and Angelfire. I eventually went to college and got a degree in theoretical math, but switched back to software after I graduated and joined my first startup.

What is your preferred development stack?
I'm all-in on the React/Node/Express stack. This stack allows you to build sites as fast as we did back when we would just FTP php files to webservers, but now we can build rich experiences that push and redefine the limits of web technology. On this stack I highly recommend Next.js. I think the whole suite of tools offered by Zeit are amazing (Hyper, Now, Next, Domains) and with them you can spin up a site in an afternoon, which is crazy cool.

What past projects are you most proud of and why?
There a are a few projects I'm super proud of! On the backend, I build the entire checkout order system used by SeatGeek to process all of their ticket transactions through a Python API. On the frontend, I managed a team at Kustomer that built a massive React/Redux app which was quick to iterate on with very few regressions. While there I also built a few really cool web technologies including a jsx templating engine.

What were your biggest challenges in building apps at Kustomer in New York? 
The biggest challenge for me was balancing short term gains with long term strategies. At a growing startup, every project in the pipeline is money on the table, and it can be easy to focus on the easy money. It takes discipline and courage to understand that if you only focus on what's on the table now, you won't innovate and bring more people in the door.

What was the inspiration for joining Facebook? How has your experience been thus far?Last May I visited the Facebook London office for the Jest Summit. Walking the halls of the office, I really started to see myself working here and that's when I decided to start studying for an interview. A few months later, I accepted an offer and was moving from NYC to London!

So far Facebook lives up to the hype. I was worried that there was going to be some big company boogeyman waiting for me with overbearing process and structure, but instead I've found Facebook to run like a community of well funded startups. I actually feel more in control of my time and impact than I ever did at a startup, which is both empowering and intimidating at the same time.

What are some technologies you are excited about or want to learn more about?
Like almost everyone I talk to, I'm super excited about TypeScript. Coming from a Java background, I'm a big fan of types and I think TypeScript has nailed the syntax and community support in a great way. I'm interested to see how much of the JavaScript stack TypeScript eats over the next 3 years.

Do you have any tips for working in a new team environment since you just moved countries for this gig? 
I have to remind myself constantly that no one is expecting some huge contribution on the first day. Instead, take time to ramp up, get to know as many people as possible, and enjoy the new role while you find where you fit in.

What does the future of React Native look like? 
The future of React Native looks a lot more like React than Native ;)

The Cosmic Spotlight Series is dedicated to showcasing developers that are building apps using modern tools. Learn how to Contribute here. To stay connected with us follow us on Twitter and join the conversation on Slack.

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"key":"teaser","title":"Teaser","type":"html-textarea","children":null,"value":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Rick Hanlon, a Front End Engineer  and recent New Yorker that is now residing in London, England working on the front end team at Facebook. Rick is also on the core team of Jest, a JavaScript testing platform. Follow Rick on Twitter or LinkedIn and enjoy the Q/A.

"},{"value":"ebea2e40-2311-11e9-b734-1b28bdc32736-0L4If1ta_400x400.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/ebea2e40-2311-11e9-b734-1b28bdc32736-0L4If1ta_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/ebea2e40-2311-11e9-b734-1b28bdc32736-0L4If1ta_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2019-01-28T15:32:52.868Z","created_by":"5716b504e9c686d006000073","created":"2019-01-28T15:32:52.869Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2019-01-30T18:25:16.132Z","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Rick Hanlon, a Front End Engineer  and recent New Yorker that is now residing in London, England working on the front end team at Facebook. Rick is also on the core team of Jest, a JavaScript testing platform. Follow Rick on Twitter or LinkedIn and enjoy the Q/A.

","featured_image":{"url":"https://cdn.cosmicjs.com/ebea2e40-2311-11e9-b734-1b28bdc32736-0L4If1ta_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/ebea2e40-2311-11e9-b734-1b28bdc32736-0L4If1ta_400x400.jpg"}}},{"_id":"59f2166834dbbd042a000273","order":40,"slug":"second-wind-nation","title":"Second Wind Nation","content":"

Second Wind Nation exists to provide resources for swimming, cycling and running enthusiasts to achieve breakthroughs. Their goal is to build a community that helps one another find their "Second Wind". Second Wind Nation is a publication that covers Running, Cycling and Triathalons. With expert writers in each segment, they needed a solution that ensured developer flexibility while also giving their content writers and editors access to only their particular segment. 



Cosmic has allowed us to enter the market quicker. We managed to build a Proof of Concept and deploy it within one week thanks to the well-documented APIs and easy-to-use User Interface for our editors.

— Yew Wee Chua, Chief Technology Officer

","metafields":[{"value":"Second Wind Nation","key":"company","title":"Company","type":"text","children":null},{"value":"Publication","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"Second Wind Nation is a publication that covers Running, Cycling and Triathalons. With expert writers in each segment, they needed a solution that ensured developer flexibility while also giving their content writers and editors access to only their particular segment. ","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"05e34100-bf14-11e7-8141-970f143098e4-secondwind.png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/05e34100-bf14-11e7-8141-970f143098e4-secondwind.png","imgix_url":"https://imgix.cosmicjs.com/05e34100-bf14-11e7-8141-970f143098e4-secondwind.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2017-10-26T17:07:52.049Z","created_by":"5716b504e9c686d006000073","created":"2017-10-26T17:07:52.049Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5357ef811693be2118000001","publish_at":null,"metadata":{"company":"Second Wind Nation","industry_type":"Publication","teaser":"Second Wind Nation is a publication that covers Running, Cycling and Triathalons. With expert writers in each segment, they needed a solution that ensured developer flexibility while also giving their content writers and editors access to only their particular segment. ","logo":{"url":"https://cdn.cosmicjs.com/05e34100-bf14-11e7-8141-970f143098e4-secondwind.png","imgix_url":"https://imgix.cosmicjs.com/05e34100-bf14-11e7-8141-970f143098e4-secondwind.png"}}},{"_id":"58fc10095161d90369000430","order":40,"slug":"ios-cms","title":"iOS CMS","content":"

Build a website, and build an app for the iOS store - update content to both with one click. Get a feel for developing for iOS by taking a spin through our iOS App, the Cross-Platform Blog.

iOS CMS Articles

How to Build a Cross-Platform Blog Using ReactNative and \r\n\r\nNode.js
Build a Cross-Platform Blog in 4 Steps \r\n 

iOS CMS Resources

Cosmic JS Docs
Official Javascript Client 
iOS Apps 
Cosmic JS GitHub

Examples

You can access your Cosmic JS Bucket content with simple HTTP requests to the API:

https://api.cosmicjs.com/v1/cross-platform-blog/object-type/posts?pretty=true&hide_metafields=true
","metafields":[{"children":null,"type":"file","title":"Image","key":"image","id":"D61rGzc25z","value":"b92a4910-27cb-11e7-9631-b17e7278f329-ios.svg","url":"https://cdn.cosmicjs.com/b92a4910-27cb-11e7-9631-b17e7278f329-ios.svg","imgix_url":"https://imgix.cosmicjs.com/b92a4910-27cb-11e7-9631-b17e7278f329-ios.svg"},{"children":null,"type":"file","title":"Thumbnail","key":"thumbnail","id":"hGVCX6SHir","value":"b92a4910-27cb-11e7-9631-b17e7278f329-ios.svg","url":"https://cdn.cosmicjs.com/b92a4910-27cb-11e7-9631-b17e7278f329-ios.svg","imgix_url":"https://imgix.cosmicjs.com/b92a4910-27cb-11e7-9631-b17e7278f329-ios.svg"},{"children":null,"type":"html-textarea","title":"Blurb","key":"blurb","id":"djRnn0vq4n","value":"

Cosmic is the best CMS for iOS apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

"},{"children":null,"type":"text","title":"Headline","key":"headline","id":"dCS93ugITl","value":"iOS"},{"children":null,"type":"text","title":"SEO Description","key":"seo_description","id":"cWyNuquWl3","value":"Cosmic is the best CMS for iOS apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators."},{"children":null,"type":"file","title":"Twitter Card Image","key":"twitter_card_image","id":"WUX14nTKgx","value":"dd9ace80-2aca-11e7-ae54-e9a1fc58ec22-ios.jpg","url":"https://cdn.cosmicjs.com/dd9ace80-2aca-11e7-ae54-e9a1fc58ec22-ios.jpg","imgix_url":"https://imgix.cosmicjs.com/dd9ace80-2aca-11e7-ae54-e9a1fc58ec22-ios.jpg"},{"children":null,"type":"html-textarea","title":"Code Example","key":"code_example","id":"4UcJQJ6asl","value":""},{"children":null,"type":"text","title":"SEO Title","key":"seo_title","id":"KLusB02V6P","value":"Best Headless CMS for iOS"},{"children":[],"type":"repeater","title":"Videos","key":"videos","id":"frgtgqfrpylludl8pnsi","value":"","repeater_fields":[{"title":"Title","key":"title","value":"","type":"text","required":false},{"title":"Link","key":"link","value":"","type":"text","required":false}]}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"kb-articles","created_at":"2017-04-23T02:23:05.477Z","created_by":"5357ef811693be2118000001","created":"2017-04-23T02:23:05.477Z","status":"published","modified_at":"2020-06-27T19:36:41.638Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-06-27T19:36:41.638Z","unpublish_at":null,"metadata":{"image":{"url":"https://cdn.cosmicjs.com/b92a4910-27cb-11e7-9631-b17e7278f329-ios.svg","imgix_url":"https://imgix.cosmicjs.com/b92a4910-27cb-11e7-9631-b17e7278f329-ios.svg"},"thumbnail":{"url":"https://cdn.cosmicjs.com/b92a4910-27cb-11e7-9631-b17e7278f329-ios.svg","imgix_url":"https://imgix.cosmicjs.com/b92a4910-27cb-11e7-9631-b17e7278f329-ios.svg"},"blurb":"

Cosmic is the best CMS for iOS apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

","headline":"iOS","seo_description":"Cosmic is the best CMS for iOS apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.","twitter_card_image":{"url":"https://cdn.cosmicjs.com/dd9ace80-2aca-11e7-ae54-e9a1fc58ec22-ios.jpg","imgix_url":"https://imgix.cosmicjs.com/dd9ace80-2aca-11e7-ae54-e9a1fc58ec22-ios.jpg"},"code_example":"","seo_title":"Best Headless CMS for iOS","videos":[]}},{"_id":"5cdc55b25265734551852132","order":40,"slug":"new-graphql-api-release","title":"New GraphQL API Release","content":"

We're excited to announce a big update to our GraphQL API. Check out the all of the new features in the GraphQL API documentation section in the new docs area. The changes include:

Serverless FTW!
Our new GraphQL API is powered by AWS Lambda Functions. So you have the assurance of infinite scalability and reliability for your content queries. This is what some call "Serverless" but we won't get into that debate, but we can all agree that it's awesome 😁 

More Queries
We have included lots of new methods to query your content as well as expanded account-level access queries. Old methods are still available, and have been deprecated. Check out the new queries.

Mutations
A much-requested feature, mutations allow you to perform writes, edits, and deletes on your Bucket content. We're happy to now include this functionality with the GraphQL API. Check out mutations.

Playground
We have a new playground setup to explore all of the features, docs, and schema for the new GraphQL API. Check out the playground.

Special thanks to the developers in our community who helped us make these big improvements. We plan to continue to provide more tools and resources for our GraphQL API users.

Let me know if you have any questions. Join the community on Slack and reach out on Twitter.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"88af5360-773e-11e9-bdd0-2fb2b1d856d9-graphql-lambda.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/88af5360-773e-11e9-bdd0-2fb2b1d856d9-graphql-lambda.jpg","imgix_url":"https://imgix.cosmicjs.com/88af5360-773e-11e9-bdd0-2fb2b1d856d9-graphql-lambda.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"changelogs","created_at":"2019-05-16T18:08:50.752Z","created_by":"5357ef811693be2118000001","created":"2019-05-16T18:08:50.752Z","status":"published","modified_at":"2020-08-10T14:02:39.393Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-05-16T14:21:33.481Z","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"featured_image":{"url":"https://cdn.cosmicjs.com/88af5360-773e-11e9-bdd0-2fb2b1d856d9-graphql-lambda.jpg","imgix_url":"https://imgix.cosmicjs.com/88af5360-773e-11e9-bdd0-2fb2b1d856d9-graphql-lambda.jpg"}}},{"_id":"58fdf952b53aeb5e5b000b5b","order":41,"slug":"go-cms","title":"Go CMS","content":"

Cosmic JS is a great choice for your Go application CMS.  Cosmic JS makes it easy to connect your Go application to our CMS API to power your content.

Go CMS Articles

The Cosmic Stack

Go CMS Resources

Cosmic JS Docs
Official JavaScript Client
Cosmic JS GitHub

Examples

You can access your Cosmic JS Bucket content with simple HTTP requests to the API:

https://api.cosmicjs.com/v1/cross-platform-blog/object-type/posts?pretty=true
","metafields":[{"children":null,"type":"file","title":"Image","key":"image","id":"cL74kvMzFU","value":"56dbf540-28ef-11e7-89e7-6d9e98749006-go.svg","url":"https://cdn.cosmicjs.com/56dbf540-28ef-11e7-89e7-6d9e98749006-go.svg","imgix_url":"https://imgix.cosmicjs.com/56dbf540-28ef-11e7-89e7-6d9e98749006-go.svg"},{"children":null,"type":"file","title":"Thumbnail","key":"thumbnail","id":"7EV0JlUaOl","value":"56dbf540-28ef-11e7-89e7-6d9e98749006-go.svg","url":"https://cdn.cosmicjs.com/56dbf540-28ef-11e7-89e7-6d9e98749006-go.svg","imgix_url":"https://imgix.cosmicjs.com/56dbf540-28ef-11e7-89e7-6d9e98749006-go.svg"},{"children":null,"type":"html-textarea","title":"Blurb","key":"blurb","id":"6polUQLrDO","value":"

Cosmic is the best CMS for Go websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

"},{"children":null,"type":"text","title":"Headline","key":"headline","id":"xaNiX5kDJL","value":"Go"},{"children":null,"type":"text","title":"SEO Description","key":"seo_description","id":"pneErPPJAb","value":"Cosmic is the best CMS for Go websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators."},{"children":null,"type":"file","title":"Twitter Card Image","key":"twitter_card_image","id":"BXTsLY5wk9","value":"26aa4470-2acb-11e7-ae54-e9a1fc58ec22-go.jpg","url":"https://cdn.cosmicjs.com/26aa4470-2acb-11e7-ae54-e9a1fc58ec22-go.jpg","imgix_url":"https://imgix.cosmicjs.com/26aa4470-2acb-11e7-ae54-e9a1fc58ec22-go.jpg"},{"children":null,"type":"html-textarea","title":"Code Example","key":"code_example","id":"C3APKPAvFo","value":""},{"children":null,"type":"text","title":"SEO Title","key":"seo_title","id":"fwokhKF34Q","value":""},{"children":[],"type":"repeater","title":"Videos","key":"videos","id":"frgtgqfrpylludl8pnsi","value":"","repeater_fields":[{"title":"Title","key":"title","value":"","type":"text","required":false},{"title":"Link","key":"link","value":"","type":"text","required":false}]}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"kb-articles","created_at":"2017-04-24T13:10:42.642Z","created_by":"5357ef811693be2118000001","created":"2017-04-24T13:10:42.642Z","status":"published","modified_at":"2020-06-27T19:37:09.576Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-06-27T19:37:09.576Z","unpublish_at":null,"metadata":{"image":{"url":"https://cdn.cosmicjs.com/56dbf540-28ef-11e7-89e7-6d9e98749006-go.svg","imgix_url":"https://imgix.cosmicjs.com/56dbf540-28ef-11e7-89e7-6d9e98749006-go.svg"},"thumbnail":{"url":"https://cdn.cosmicjs.com/56dbf540-28ef-11e7-89e7-6d9e98749006-go.svg","imgix_url":"https://imgix.cosmicjs.com/56dbf540-28ef-11e7-89e7-6d9e98749006-go.svg"},"blurb":"

Cosmic is the best CMS for Go websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

","headline":"Go","seo_description":"Cosmic is the best CMS for Go websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.","twitter_card_image":{"url":"https://cdn.cosmicjs.com/26aa4470-2acb-11e7-ae54-e9a1fc58ec22-go.jpg","imgix_url":"https://imgix.cosmicjs.com/26aa4470-2acb-11e7-ae54-e9a1fc58ec22-go.jpg"},"code_example":"","seo_title":"","videos":[]}},{"_id":"5c4a6498301dec60d6005af0","order":41,"slug":"developer-spotlight-leslie-cohn-wein-of-netlify","title":"Developer Spotlight: Leslie Cohn-Wein of Netlify","content":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Leslie Cohn-Wein, a Front End Developer and Austin native now residing in Dallas, Texas. Leslie most recently worked as a Front End Engineer for Canvas United, a New York City-based digital agency, prior to starting as a Front End Developer at Netlify. Follow Leslie on Twitter or LinkedIn and enjoy the Q/A.


When did you first begin building software?
I taught myself basic CSS in the early 2000s in order to customize my MySpace and LiveJournal backgrounds. To my surprise, that experience kicked off an enduring interest in code.

After studying digital media in college and interning at the Denver Open Media Foundation theming Drupal sites for nonprofits, I moved to NYC for a role as a communications manager. I successfully made the transition into full-time front end development a few years later, working at ad agencies with clients like Nintendo, Comedians in Cars Getting Coffee, and Crunch Fitness. I’ve been building software professionally for the past 5 years.

What is your preferred development stack?
I’m a huge proponent of the JAMstack, which is a modern web development architecture based on client-side JavaScript, APIs, and markup. JAMstack apps are incredibly performant,\r\nscalable, and secure, and go hand-in-hand with our modern workflows.

In the agency world, I found that I was able to get new projects started more quickly by leveraging static site generators like Middleman and Gatsby, which gave me scaffolding, a templating system, hot reloading, and more without all the tedious setup. Deploying to Netlify was as easy as hooking up my GitHub account and pushing my code (full disclosure: I now work as a front end dev at Netlify). 

The JAMstack put the power of developing and deploying dynamic apps in my hands, no back end dev or server maintenance required. I am such a fan of developing with the stack that I jumped ship from agency life back in October to join the Netlify team.

What past projects are you most proud of and why?
Aside from my recent work on the Netlify app, I'd have to say that one of my favorite agency projects was a website build for The Parker Palm Springs hotel in California. I worked for a Ruby on Rails shop at the time, so we chose to develop with Middleman, manage content with a headless CMS, and automatically deploy to Netlify\r\nwith a standard Git workflow. 

Building with the JAMstack meant my time was spent pairing with my art director, refining the interactive storytelling experience on the homepage ー not wiring up views or coordinating with DevOps to get a staging site live. I loved working on a purely front end stack with such a playful design, and it didn't hurt that we ultimately won the 2018 Communication Arts Interactive Award for it.

What were your biggest challenges in building apps in an agency environment at Canvas? 
Shipping a new, self-contained site every 2 or 3 months was exhilarating, but that process demands an incredibly well-coordinated workflow. Using static site generators to speed up the build process changed the game for me.

In an effort to ship work even faster, we worked on developing a reusable, easily skinnable component library that would help avoid building duplicate functionality for each new project (because who wants to build another hamburger nav, amirite?). 

Contrary to popular opinion, we also found that trying out new tech on occasion improved our velocity. Moving from CoffeeScript, jQuery, and CDN-hosted includes to ES6, React, Jest, and npm did require an investment in learning, but ultimately improved\r\nour team's dev experience and significantly shortened the QA cycle.

What was the inspiration for joining Netlify? How has your experience been thus far?
I was scrolling through my Twitter feed last year when I saw a retweet from the smart and prolific Amelia Bellamy-Royds about a front end opening at Netlify. I applied immediately.

Joining the team last October was oddly familiar; I'd been in touch with Netlify's support team for guidance several times over the past few years, and had recently worked with the sales team to power up my agency's capabilities. I'm still getting up to speed, but the tech, too, is familiar: the front end of \r\napp.netlify.com is build with React, and ー of course! ー deployed to Netlify. So meta.

I just returned from our week-long all hands meeting in San Francisco, where we reviewed the company roadmap and started concepting some of the new features I'll get to help build. Unlike the agency world, the Netlify team truly believes in an interdisciplinary\r\napproach ー I have the opportunity to work side-by-side every day with designers, API and platform developers, technical writers, and other front enders to bring a new vision of the web to life.

What are some technologies you are excited about or want to learn more about?
There are too many to name them all! I actually keep a "learning plan" where I outline concepts, courses, and articles I want to dive deeper in to, and have an accountability buddy at work to keep me honest in my progress.

A few of the highlights right now:


Do you have any tips for working remote in a team environment? 
I've been working remotely for over 2 years now and while it was tough to adjust at first, I can't imagine going back. I've found that a consistent routine is necessary; I get ready as if I were going into an office (minus the slippers!), work from the desk in my dedicated home office, and walk my dog Mack over lunch. This has helped compartmentalize "work time" vs "play time" and usually keeps me from pushing sloppy code from the couch at midnight.

A daily stand-up ensures I get at least a few minutes of "face to face" time every day (thanks, Google Meet!). Slack has also been a huge help in this regard, allowing me to "drop by someone's desk" whenever necessary. As a remotee,\r\nI believe it's better to err on the side of over-communicating.

Occasional in-person meetups, both with coworkers and in my community, have been priceless for team bonding and combatting loneliness. It's also a great opportunity to step outside your own bubble and keep a pulse on what's happening in the wider\r\nworld of software development.


Conclusion
The Cosmic Spotlight Series is dedicated to showcasing developers that are building apps using modern tools. Learn how to Contribute here. To stay connected with us follow us on Twitter and join the conversation on Slack.

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"key":"teaser","title":"Teaser","type":"html-textarea","children":null,"value":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Leslie Cohn-Wein, a Front End Developer and Austin native now residing in Dallas, Texas. Leslie most recently worked as a Front End Engineer for Canvas United, a New York City-based digital agency, prior to starting as a Front End Developer at Netlify. Follow Leslie on Twitter or LinkedIn and enjoy the Q/A.

"},{"value":"88933cd0-203f-11e9-92c9-db458343bde2-ZhG3yywl_400x400.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/88933cd0-203f-11e9-92c9-db458343bde2-ZhG3yywl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/88933cd0-203f-11e9-92c9-db458343bde2-ZhG3yywl_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2019-01-25T01:21:28.582Z","created_by":"5716b504e9c686d006000073","created":"2019-01-25T01:21:28.582Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2019-01-28T19:39:58.465Z","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Leslie Cohn-Wein, a Front End Developer and Austin native now residing in Dallas, Texas. Leslie most recently worked as a Front End Engineer for Canvas United, a New York City-based digital agency, prior to starting as a Front End Developer at Netlify. Follow Leslie on Twitter or LinkedIn and enjoy the Q/A.

","featured_image":{"url":"https://cdn.cosmicjs.com/88933cd0-203f-11e9-92c9-db458343bde2-ZhG3yywl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/88933cd0-203f-11e9-92c9-db458343bde2-ZhG3yywl_400x400.jpg"}}},{"_id":"5a9f17109ef8cf5e264d65a4","order":41,"slug":"alicomm-builds-a-website-using-laravel-and-cosmic-js","title":"Alicomm Builds a Website using Laravel and Cosmic","content":"

Alicomm is a professional communication coaching firm that empowers executives and business leaders to succeed by effectively establishing their brand, articulating their message and mission, and connecting with their audience. 

In order to empower others, Alicomm knows presenting strong and dynamic content is mission-critical, so they chose activate interactive agency Simple Media to build a new website using Laravel, PHP and Cosmic.



“While developing complex web apps, agencies can't forget about the client and their user experience, particularly when it comes to managing content.  PHP frameworks like Laravel provide sturdy architecture and scaling potential; however a CMS layer has to be built to support the day-to-day content management efforts of both internal and external teams.  

Cosmic has proven to be a massive solution for both our agency and our client by helping us streamline content management for both the marketing website and the web app."

— Nick Bonanno, Simple Media (consulting interactive agency)

","metafields":[{"value":"Alicomm","key":"company","title":"Company","type":"text","children":null},{"value":"Executive Training","key":"industry_type","title":"Industry Type","type":"text","children":null},{"value":"AliComm is a professional communication coaching firm that empowers executives and business leaders to succeed by effectively establishing their brand, articulating their message and mission, and connecting with their audience. In order to empower others, AliComm knows presenting a strong and dynamic content is mission-critical, so they chose to build a new website using Laravel, PHP and Cosmic.\n","key":"teaser","title":"Teaser","type":"textarea","children":null},{"value":"aff9d810-40f2-11e8-9919-e3487fdc7656-Alicomm full color (2).png","key":"logo","title":"Logo","type":"file","children":null,"url":"https://cdn.cosmicjs.com/aff9d810-40f2-11e8-9919-e3487fdc7656-Alicomm full color (2).png","imgix_url":"https://imgix.cosmicjs.com/aff9d810-40f2-11e8-9919-e3487fdc7656-Alicomm full color (2).png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"case-studies","created_at":"2018-03-06T22:32:48.334Z","created_by":"5716b504e9c686d006000073","created":"2018-03-06T22:32:48.334Z","status":"published","modified_at":"2020-10-02T02:10:14.361Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-04-15T21:19:33.582Z","metadata":{"company":"Alicomm","industry_type":"Executive Training","teaser":"AliComm is a professional communication coaching firm that empowers executives and business leaders to succeed by effectively establishing their brand, articulating their message and mission, and connecting with their audience. In order to empower others, AliComm knows presenting a strong and dynamic content is mission-critical, so they chose to build a new website using Laravel, PHP and Cosmic.\n","logo":{"url":"https://cdn.cosmicjs.com/aff9d810-40f2-11e8-9919-e3487fdc7656-Alicomm full color (2).png","imgix_url":"https://imgix.cosmicjs.com/aff9d810-40f2-11e8-9919-e3487fdc7656-Alicomm full color (2).png"}}},{"_id":"5cd9a8a3630c5172d98e48c8","order":41,"slug":"introducing-the-new-docs","title":"Introducing the new docs","content":"

We're excited to announce that we have made a big update to the Cosmic documentation. We think you'll agree that the experience is much improved and makes thumbing through the docs much easier and even enjoyable 😁

Here are the updates:

  1. All of the docs for the main features are all now in a single location for easy access: REST API, GraphQL API, CLI, Webhooks, Extensions, and Functions.
  2. Speed between pages is now blazing fast.
  3. Search! You can now search through all of the documentation to find what you need quickly.


Good documentation is so important. It can be the deal-maker or deal-breaker when deciding which tools to use on your team. And we think this release is a big improvement that we hope you like.

Check out the new docs and let me know what you think! Join the community on Slack and on Twitter.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"b68f3110-75c7-11e9-b6b5-b978e3708b4c-cosmicjs-docs.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/b68f3110-75c7-11e9-b6b5-b978e3708b4c-cosmicjs-docs.jpg","imgix_url":"https://imgix.cosmicjs.com/b68f3110-75c7-11e9-b6b5-b978e3708b4c-cosmicjs-docs.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"changelogs","created_at":"2019-05-14T17:25:55.309Z","created_by":"5357ef811693be2118000001","created":"2019-05-14T17:25:55.310Z","status":"published","modified_at":"2020-08-10T14:02:39.393Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-05-14T14:19:37.307Z","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"featured_image":{"url":"https://cdn.cosmicjs.com/b68f3110-75c7-11e9-b6b5-b978e3708b4c-cosmicjs-docs.jpg","imgix_url":"https://imgix.cosmicjs.com/b68f3110-75c7-11e9-b6b5-b978e3708b4c-cosmicjs-docs.jpg"}}},{"_id":"595e8ee6924137fa700001a9","order":42,"slug":"bootstrap-cms","title":"Bootstrap CMS","content":"

Cosmic JS makes it easy to manage content for your Bootstrap applications. Check out some of the apps built with Bootstrap and the Cosmic JS CMS API.  And check out the tutorials below.

Bootstrap CMS Articles

How to Build a Medium Backup App
How to Build a Node.js User Management App

Bootstrap CMS Resources

Cosmic JS Docs
Official JavaScript Client
Cosmic JS GitHub

Examples

npm i cosmicjs

Then in your JavaScript file, get your content:

\">
","metafields":[{"children":null,"type":"file","title":"Image","key":"image","id":"EjHBqfbyjf","value":"87f56f20-6289-11e7-ab3d-9ddd8313526f-bootstrap.png","url":"https://cdn.cosmicjs.com/87f56f20-6289-11e7-ab3d-9ddd8313526f-bootstrap.png","imgix_url":"https://imgix.cosmicjs.com/87f56f20-6289-11e7-ab3d-9ddd8313526f-bootstrap.png"},{"children":null,"type":"file","title":"Thumbnail","key":"thumbnail","id":"P4igJngy5k","value":"87f56f20-6289-11e7-ab3d-9ddd8313526f-bootstrap.png","url":"https://cdn.cosmicjs.com/87f56f20-6289-11e7-ab3d-9ddd8313526f-bootstrap.png","imgix_url":"https://imgix.cosmicjs.com/87f56f20-6289-11e7-ab3d-9ddd8313526f-bootstrap.png"},{"children":null,"type":"html-textarea","title":"Blurb","key":"blurb","id":"Ynn0u4jg5K","value":"

Cosmic is the best CMS for Bootstrap websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

"},{"children":null,"type":"text","title":"Headline","key":"headline","id":"2PXkbhI9Dd","value":"Bootstrap"},{"children":null,"type":"text","title":"SEO Description","key":"seo_description","id":"K1vIaINadD","value":"Cosmic is the best CMS for Bootstrap websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators."},{"children":null,"type":"file","title":"Twitter Card Image","key":"twitter_card_image","id":"kogD3PAJoA","value":"87f56f20-6289-11e7-ab3d-9ddd8313526f-bootstrap.png","url":"https://cdn.cosmicjs.com/87f56f20-6289-11e7-ab3d-9ddd8313526f-bootstrap.png","imgix_url":"https://imgix.cosmicjs.com/87f56f20-6289-11e7-ab3d-9ddd8313526f-bootstrap.png"},{"children":null,"type":"html-textarea","title":"Code Example","key":"code_example","id":"CBSVIzkoLV","value":""},{"children":null,"type":"text","title":"SEO Title","key":"seo_title","id":"zhZH7Hc8aI","value":"Bootstrap CMS"},{"children":[],"type":"repeater","title":"Videos","key":"videos","id":"EJPS1t2oPf","value":"","repeater_fields":[{"title":"Title","key":"title","value":"","type":"text","required":false},{"title":"Link","key":"link","value":"","type":"text","required":false}]},{"children":null,"type":"text","title":"Apps Search Term","key":"apps_search_term","id":"0j2XD9Gog1","value":""},{"children":null,"type":"text","title":"Articles Search Term","key":"articles_search_term","id":"8RgqbG1UTr","value":""},{"children":null,"type":"text","title":"Page Overview Title","key":"page_overview_title","id":"gj036836gx4c73fpdjzb","value":""},{"children":null,"type":"html-textarea","title":"Page Overview","key":"page_overview","id":"iSVFzvAn9h","value":""},{"children":null,"type":"html-textarea","title":"SEO Content","key":"seo_content","id":"lcsUSsZiB9","value":""},{"children":[],"type":"repeater","title":"Apps","key":"apps","id":"dkpxmwigd1z8x4ants9f","value":"","repeater_fields":[{"title":"App Slug","key":"app_slug","value":"","type":"text","required":false}]},{"children":[],"type":"repeater","title":"Articles","key":"articles","id":"dwil4bqojngnkej4v85k","value":"","repeater_fields":[{"title":"Article Slug","key":"article_slug","value":"","type":"text","required":false}]}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"kb-articles","created_at":"2017-04-22T23:07:51.159Z","created_by":"5357ef811693be2118000001","created":"2017-07-06T19:26:30.459Z","status":"published","modified_at":"2021-02-04T15:56:18.611Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2021-02-04T15:56:18.611Z","unpublish_at":null,"metadata":{"image":{"url":"https://cdn.cosmicjs.com/87f56f20-6289-11e7-ab3d-9ddd8313526f-bootstrap.png","imgix_url":"https://imgix.cosmicjs.com/87f56f20-6289-11e7-ab3d-9ddd8313526f-bootstrap.png"},"thumbnail":{"url":"https://cdn.cosmicjs.com/87f56f20-6289-11e7-ab3d-9ddd8313526f-bootstrap.png","imgix_url":"https://imgix.cosmicjs.com/87f56f20-6289-11e7-ab3d-9ddd8313526f-bootstrap.png"},"blurb":"

Cosmic is the best CMS for Bootstrap websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

","headline":"Bootstrap","seo_description":"Cosmic is the best CMS for Bootstrap websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.","twitter_card_image":{"url":"https://cdn.cosmicjs.com/87f56f20-6289-11e7-ab3d-9ddd8313526f-bootstrap.png","imgix_url":"https://imgix.cosmicjs.com/87f56f20-6289-11e7-ab3d-9ddd8313526f-bootstrap.png"},"code_example":"","seo_title":"Bootstrap CMS","videos":[],"apps_search_term":"","articles_search_term":"","page_overview_title":"","page_overview":"","seo_content":"","apps":[],"articles":[]}},{"_id":"5c48978d7ec1dc376af9b466","order":42,"slug":"developer-spotlight-jason-lengstorf-of-gatsby","title":"Developer Spotlight: Jason Lengstorf of Gatsby","content":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Jason Lengstorf, a developer, architect, keynote speaker and occasional designer residing in Portland, Oregon. Having worked previously at IBM and Precision Nutrition, Jason now serves as Head of Developer Relations at Gatsby. Check out the video of the pair programming session he did demonstrating how to use Cosmic to power your Gatsby websites. Follow Jason on Twitter, GitHub and his blog and enjoy the Q/A.



Cosmic: When did you first begin building software?
Jason: As a teenager, I was in a band, and we needed things like concert posters, merch designs, and a custom MySpace page. I wrote my first few lines of CSS around then, and slowly started doing more and more: I built our first website, learned Flash so I could embed our music, learned PHP and built a crappy CMS so the rest of the band could post updates to the site, and just kept going deeper and deeper down that rabbit hole. Eventually it became obvious that I wasn't rockstar material, so I stopped pretending to be a musician and focused exclusively on design/code.

What is your preferred development stack?
Right now, I work mostly with React, GraphQL, and Node.js.

What past projects are you most proud of and why?
The first two that come to mind are GrAMPS and the Gatsby swag store.

GrAMPS is a way to allow multiple independent teams to publish GraphQL schemas as npm packages that are then aggregated and stitched together. IBM Cloud, which I was working on when my team and I built it, uses a microservice architecture, which means that a different team owns each piece of the data. This meant that the API surface was hard to understand, largely undocumented, and extremely difficult to keep track of. By introducing GraphQL with GrAMPS, these teams got to keep control of their data sources, but gave us the ability to expose all of the data through a centralized GraphQL endpoint. This was a huge win for everyone inside the company, and it led to much better communication and standardization within the team.

The Gatsby swag store is a Gatsby site where we sell our swag, but it's also a way for us to give back to the community. Anyone who contributes to Gatsby — whether that's through code, giving a talk, writing an article, or something else — can log in with their GitHub account and get a discount code for free swag. This is our way of saying "thank you" to the community for all the hard work they put in. It's only a small part of what we try to do for the Gatsby community, but for me, it's a really fun way to give back and joke around.

What are your biggest challenges in building the community at Gatsby?
I'm very fortunate at Gatsby, because the community is incredible. I often make the joke that working in developer relations really just means retweeting all the nice things people already say about us.

The most challenging part has been making sure we don't miss things. People have questions, and when they reach out to us and we lose the message, that sucks. Gatsby is a community-powered company, so we work extremely hard to make sure the community stays at the center of everything we do: how does Gatsby make people's lives easier? how do we make sure every decision we make is creating a better experience for the community? how do we ensure that our community is a safe and supportive place for everyone, regardless of experience level or background?

How do things change moving from a legacy company like IBM to a bleeding-edge startup like Gatsby?
Both have their perks and problems. For example, at IBM I felt like I spent months asking permission to do a few weeks' worth of work, which was super frustrating. However, IBM can solve any problem because they have so many incredibly talented people working there, and their resources are... significant.

At Gatsby, we can quickly move toward new ideas with minimal bureaucracy, but we also hit resource limits: I can't necessarily hire all the people I'd like to for my team, or sponsor every event I'd like to, or spin up an exploratory team to tackle an interesting-but-unproven problem.

In general, the biggest difference for me has been the amount of chaos available to me. I'm the kind of person who loves to be buried in hard problems with fuzzy definitions. I like trying to make sense out of the mess, and identify pathways through tricky problem spaces. At IBM, there are occasional challenges like this — the GraphQL/GrAMPS project was one of them — but mostly things are relatively well established, so the level of chaos is fairly low. At Gatsby, it often feels like everything we do is being done for the first time, so there's no shortage of chaos. My personality type tends to thrive in the Gatsby environment, I've found.

What are some technologies you are excited about or want to learn more about?
I'm really excited about new developments in the GraphQL space, and I'll always be learning more about the fundamentals: HTML, CSS, vanilla JavaScript. I've also been dipping my toes into "abstract syntax trees", which are what tools like Babel use to change code from one format to another. It hurts my brain a little bit, but it's really fun once it works. :)


The Cosmic Spotlight Series is dedicated to showcasing developers that are building apps using modern tools. Learn how to Contribute here. To stay connected with us follow us on Twitter and join the conversation on Slack.

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"key":"teaser","title":"Teaser","type":"html-textarea","children":null,"value":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Jason Lengstorf, a developer, architect, keynote speaker and occasional designer residing in Portland, Oregon. Having worked previously at IBM and Precision Nutrition, Jason now serves as Head of Developer Relations at Gatsby. Follow Jason on Twitter, LinkedIn or GitHub, and enjoy the Q/A.

"},{"value":"564c3590-2023-11e9-85d1-29a68f3754e7-Jason.png","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/564c3590-2023-11e9-85d1-29a68f3754e7-Jason.png","imgix_url":"https://imgix.cosmicjs.com/564c3590-2023-11e9-85d1-29a68f3754e7-Jason.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2019-01-23T16:34:21.501Z","created_by":"5716b504e9c686d006000073","created":"2019-01-23T16:34:21.501Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-01-25T17:46:48.839Z","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Jason Lengstorf, a developer, architect, keynote speaker and occasional designer residing in Portland, Oregon. Having worked previously at IBM and Precision Nutrition, Jason now serves as Head of Developer Relations at Gatsby. Follow Jason on Twitter, LinkedIn or GitHub, and enjoy the Q/A.

","featured_image":{"url":"https://cdn.cosmicjs.com/564c3590-2023-11e9-85d1-29a68f3754e7-Jason.png","imgix_url":"https://imgix.cosmicjs.com/564c3590-2023-11e9-85d1-29a68f3754e7-Jason.png"}}},{"_id":"5c9991c6329e6a1b5152fd8f","slug":"introducing-the-powered-by-cosmic-js-badge","title":"Introducing the 'Powered by Cosmic' Badge","content":"

We're excited to unveil a new feature for the Cosmic Community: the Powered by Cosmic Badge.

Here's how it looks 😍 


Add the badge to the footer of your website to let your visitors know how you power your content (API-first!). Enable sharing to allow others to clone your content to their own Bucket.

You will get a Free Personal plan forever for helping us spread the word.


Here's how to do it: 

1. Navigate to Your Bucket > Settings and turn sharing on.

2. Copy and paste the code to the footer of your website using HTML or markdown.

3. Reach out to Cosmic support with a link to the badge and we'll upgrade your Bucket of choice to a free Personal plan forever!


Photo by israel palacio on Unsplash

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"b1d456a0-50b0-11e9-9e90-b1c67a0a9b8f-531fc300-4f71-11e9-a51b-7da149d7af67-ImcUkZ72oUs.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/b1d456a0-50b0-11e9-9e90-b1c67a0a9b8f-531fc300-4f71-11e9-a51b-7da149d7af67-ImcUkZ72oUs.jpg","imgix_url":"https://imgix.cosmicjs.com/b1d456a0-50b0-11e9-9e90-b1c67a0a9b8f-531fc300-4f71-11e9-a51b-7da149d7af67-ImcUkZ72oUs.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"changelogs","created":"2019-03-26T02:43:18.645Z","created_at":"2019-03-26T02:43:18.645Z","modified_at":"2020-08-10T14:00:04.404Z","status":"published","locale":null,"published_at":"2019-03-27T16:52:30.893Z","created_by":"5357ef811693be2118000001","modified_by":"5716b504e9c686d006000073","publish_at":null,"order":42,"metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"featured_image":{"url":"https://cdn.cosmicjs.com/b1d456a0-50b0-11e9-9e90-b1c67a0a9b8f-531fc300-4f71-11e9-a51b-7da149d7af67-ImcUkZ72oUs.jpg","imgix_url":"https://imgix.cosmicjs.com/b1d456a0-50b0-11e9-9e90-b1c67a0a9b8f-531fc300-4f71-11e9-a51b-7da149d7af67-ImcUkZ72oUs.jpg"}}},{"_id":"5c4894956b991a3d5e9d2f3f","order":43,"slug":"developer-spotlight-quincy-larson-of-freecodecamp","title":"Developer Spotlight: Quincy Larson of freeCodeCamp","content":"

The Cosmic Community focuses on providing helpful resources to equip developers and content creators with the inspiration and know-how to build apps faster, together. In this installment of the Cosmic Developer Spotlight Series, we sat down with Quincy Larson, the developer and famed teacher behind freeCodeCamp.org. Follow Quincy on Twitter and enjoy the Q/A.

Cosmic: When and how did you first begin building software?
Quincy: I first started building software when I was in my 30's, working as a school director. I wanted to figure out how to automate some of the more tedious tasks for my teachers and staff, which lead to me learning some programming.

I guess you could consider those early automation scripts to be my first pieces of software, even though they were super hacky and I was the only person who ran them.


So your first love was for education, and coding became the subject you loved teaching?
Yes - I worked as a teacher and school director for about a decade before I started coding.

There are so many aspects of civilization that can be improved through better systems - and software is just a way of telling computers how to enact those systems.

I knew first hand how hard it was to learn how to code, and that we needed better learning resources. So I started building learning resources. Eventually I built the earliest version of \r\nfreeCodeCamp.org.

What is your preferred development stack?
I started off with Python and Django, worked as a Ruby on Rails developer for a while, and now I work with full stack JavaScript - Node, npm packages, and friends.

What past projects are you most proud of and why?
I'm most proud of freeCodeCamp because it's helping millions of people learn to code - tens of thousands of whom have already gotten their first job as a developer.

This said, we are still early days. I think everyone would benefit from learning at least some coding because it allows you to take advantage of the past 70 years of breakthroughs in computing.

If you take everyone who's working-age on earth, that's several billion people whom we ultimately want to teach. That's a multi-generational effort. But that's what freeCodeCamp is aiming for.

What were your biggest challenges in starting freeCodeCamp? 
The biggest challenge was figuring out a tool people would actually use and continue to use. 

I had created other educational tools where people would say "oh, that's cool" but then never come back.

Once I noticed people coming back and progressing through freeCodeCamp's curriculum, that's when I started to realize that I'd created something useful.

What are some technologies you are excited about or want to learn more about?
I'm excited about the JAMstack and the prospect of serving static files quickly and inexpensively around the world. A ton of freeCodeCamp's community is in places with unreliable internet connections, and pushing everything to the CDN layer dramatically improves these peoples' experience.

Do you have any tips for new developers just starting to code? 
Sure - I recommend coding as much as possible. Following along with tutorials and building projects. And building projects at hackathons.

The more time you spend coding, the better. freeCodeCamp's interactive curriculum is a biproduct of that bias toward action. If you're coding and getting feedback in the form of failing tests or error messages, you're learning and you're\r\nmoving forward.


The Cosmic Spotlight Series is dedicated to showcasing developers that are building apps using modern tools. Learn how to contribute here. To stay connected with us follow us on Twitter and join the conversation on Slack.

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"key":"teaser","title":"Teaser","type":"html-textarea","children":null,"value":"

The Cosmic Community focuses on providing helpful resources to equip developers and content creators with the inspiration and know-how to build apps faster, together. In this installment of the Cosmic Developer Spotlight Series, we sat down with Quincy Larson, the developer and famed teacher behind freeCodeCamp.org. Follow Quincy on Twitter, Medium, GitHub or LinkedIn, and enjoy the Q/A.

"},{"value":"9407afd0-1f2a-11e9-bed1-876abe5d5a05-quincy-headshot-highres.png","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/9407afd0-1f2a-11e9-bed1-876abe5d5a05-quincy-headshot-highres.png","imgix_url":"https://imgix.cosmicjs.com/9407afd0-1f2a-11e9-bed1-876abe5d5a05-quincy-headshot-highres.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2019-01-23T16:21:41.835Z","created_by":"5716b504e9c686d006000073","created":"2019-01-23T16:21:41.835Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2019-01-23T18:14:52.006Z","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

The Cosmic Community focuses on providing helpful resources to equip developers and content creators with the inspiration and know-how to build apps faster, together. In this installment of the Cosmic Developer Spotlight Series, we sat down with Quincy Larson, the developer and famed teacher behind freeCodeCamp.org. Follow Quincy on Twitter, Medium, GitHub or LinkedIn, and enjoy the Q/A.

","featured_image":{"url":"https://cdn.cosmicjs.com/9407afd0-1f2a-11e9-bed1-876abe5d5a05-quincy-headshot-highres.png","imgix_url":"https://imgix.cosmicjs.com/9407afd0-1f2a-11e9-bed1-876abe5d5a05-quincy-headshot-highres.png"}}},{"_id":"5c7f0c3f7ca3461dcbec19b7","order":43,"slug":"optimize-images-on-the-fly-with-the-new-image-settings-editor","title":"Optimize images on the fly with the new image settings editor 📷 🛠","content":"

You can now edit your images on the fly using the new editor available on every image Metafield.

To see the new feature, login to your Cosmic account and go to any Object with an image Metafield and you'll notice a button to edit "Settings". (Note: you will need to have a role that includes developer features)



Click the button and you will be able to edit and optimize the image using imgix query params.


If you have any questions about this feature or others, join the conversation on Slack and reach out to us on Twitter.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"e960cab0-3fa1-11e9-a6a6-3b139f4a7008-b3f3ee60-24d6-11e9-8b39-47bf34720c5d-Artboard-3.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e960cab0-3fa1-11e9-a6a6-3b139f4a7008-b3f3ee60-24d6-11e9-8b39-47bf34720c5d-Artboard-3.jpg","imgix_url":"https://imgix.cosmicjs.com/e960cab0-3fa1-11e9-a6a6-3b139f4a7008-b3f3ee60-24d6-11e9-8b39-47bf34720c5d-Artboard-3.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"changelogs","created_at":"2019-03-05T23:54:39.910Z","created_by":"5357ef811693be2118000001","created":"2019-03-05T23:54:39.910Z","status":"published","published_at":"2019-03-06T18:25:45.422Z","modified_at":"2020-08-10T14:00:04.404Z","modified_by":"5357ef811693be2118000001","publish_at":null,"metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"featured_image":{"url":"https://cdn.cosmicjs.com/e960cab0-3fa1-11e9-a6a6-3b139f4a7008-b3f3ee60-24d6-11e9-8b39-47bf34720c5d-Artboard-3.jpg","imgix_url":"https://imgix.cosmicjs.com/e960cab0-3fa1-11e9-a6a6-3b139f4a7008-b3f3ee60-24d6-11e9-8b39-47bf34720c5d-Artboard-3.jpg"}}},{"_id":"5c40a8c079c1dd08aacd75f4","order":44,"slug":"developer-spotlight-emma-wedekind-of-logmein","title":"Developer Spotlight: Emma Wedekind of LogMeIn","content":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Emma Wedekind, a developer and New York native now residing in Karlsruhe, Germany. Emma is a Software Engineer at LogMeIn and the Founder of CodingCoach.io. Follow Emma on Twitter, LinkedIn or Medium, and enjoy the Q/A.



Cosmic: When did you first begin building software?
Emma: I began my Sophomore year of college. I was originally a Biology major but switched to actuarial science, and ultimately found my passion in software engineering.

What is your preferred development stack?
I am a huge fan of React / Redux / TypeScript :) I began learning it about a year ago when I joined LogMeIn and have fallen in love with it! I am also a huge lover of Gatsby for building static sites with React. Cannot recommend highly enough!

What past projects are you most proud of and why?
I built the IBM Q Network website all by myself in just a couple of weeks! I chose to use Vue.js, which was extremely challenging as it was my first time using Vue, but I learned so many incredible skills as a result.



What are your biggest challenges in building software at LogMeIn?
Understanding the underlying architecture. It's built on top of Web-RTC, but there is a lot of proprietary and legacy code which can be difficult to navigate. Debugging can sometimes become a bit convoluted when you don't know which layer to start with.


What was the inspiration for Coding Coach?
I am a huge proponent of mentorship, primarily because I didn’t have a mentor when I was beginning my front-end development journey. Navigating the world of front-end was extremely difficult without a mentor to guide me along. And although there are mentorship platforms out there, they’re often expensive. I wanted to create something accessible to all!



What are some technologies you are excited about or want to learn more about?
I want to really hone in on learning SVG animations this year. I will also be focusing a lot more on how to build robust Design Systems and Component Libraries using React and native web components.


The Cosmic Spotlight Series is dedicated to showcasing developers that are building apps using modern tools. Learn how to Contribute here. To stay connected with us follow us on Twitter and join the conversation on Slack.

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"key":"teaser","title":"Teaser","type":"html-textarea","children":null,"value":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Emma Wedekind, a developer and New York native now residing in Karlsruhe, Germany. Emma is a Software Engineer at LogMeIn and the Founder of CodingCoach.io. Follow Emma on Twitter, LinkedIn or Medium, and enjoy the Q/A.

"},{"value":"68a38eb0-1b4a-11e9-a9d3-29385bebbe9f-emma1.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/68a38eb0-1b4a-11e9-a9d3-29385bebbe9f-emma1.jpg","imgix_url":"https://imgix.cosmicjs.com/68a38eb0-1b4a-11e9-a9d3-29385bebbe9f-emma1.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2019-01-17T16:09:36.403Z","created_by":"5716b504e9c686d006000073","created":"2019-01-17T16:09:36.403Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-01-19T01:18:05.242Z","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Emma Wedekind, a developer and New York native now residing in Karlsruhe, Germany. Emma is a Software Engineer at LogMeIn and the Founder of CodingCoach.io. Follow Emma on Twitter, LinkedIn or Medium, and enjoy the Q/A.

","featured_image":{"url":"https://cdn.cosmicjs.com/68a38eb0-1b4a-11e9-a9d3-29385bebbe9f-emma1.jpg","imgix_url":"https://imgix.cosmicjs.com/68a38eb0-1b4a-11e9-a9d3-29385bebbe9f-emma1.jpg"}}},{"_id":"5c7f15396a645a27c32b9384","order":44,"slug":"view-as-editor","title":"View as Editor","content":"

We're happy to release a new feature that helps you collaborate with your team members easier using Cosmic. Introducing View as Editor.

As a developer, getting a CMS set up for your content creators requires a certain level of empathy. It's your job to make a technology choice that allows them to work in a comfortable environment and only see what they need to get their job done.

With the new "View as Editor" toggle now available in your Bucket for the developer and admin roles (see gif below), you can preview the entire Bucket experience from the vantage point of your content creators hiding all developer features and settings.


So now when you add your content creators in the editor role, you can be sure that you are giving them an intuitive and easy-to-use editing experience.

I'd love to hear your thoughts on this and other ways to make it easier for teams of developers and content creators to collaborate. Join the conversation on Slack and reach out to us on Twitter.

Photo by Scott Webb on Unsplash.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"daa1a400-3546-11e9-be5e-d196042f83b6--udZnjsCzsE.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/daa1a400-3546-11e9-be5e-d196042f83b6--udZnjsCzsE.jpg","imgix_url":"https://imgix.cosmicjs.com/daa1a400-3546-11e9-be5e-d196042f83b6--udZnjsCzsE.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"changelogs","created_at":"2019-02-20T00:32:57.943Z","created_by":"5357ef811693be2118000001","created":"2019-02-20T00:32:57.943Z","status":"published","published_at":"2019-03-06T00:45:25.583Z","modified_at":"2020-08-10T14:00:04.404Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"featured_image":{"url":"https://cdn.cosmicjs.com/daa1a400-3546-11e9-be5e-d196042f83b6--udZnjsCzsE.jpg","imgix_url":"https://imgix.cosmicjs.com/daa1a400-3546-11e9-be5e-d196042f83b6--udZnjsCzsE.jpg"}}},{"_id":"58fdfa0bb53aeb5e5b000b5f","order":44,"slug":"aspnet-cms","title":"ASP.net CMS","content":"

Cosmic JS is a great choice to power content for your ASP.net apps.  The Cosmic JS API can connect to any application, so you can freely build your website in ASP.net and serve your content via our CMS API to any other application.

ASP.net CMS Articles

The Cosmic Stack

ASP.net CMS Resources

Cosmic JS Docs
Official JavaScript Client
Cosmic JS GitHub

Examples

You can access your Cosmic JS Bucket content with simple HTTP requests to the API:

https://api.cosmicjs.com/v1/cross-platform-blog/object-type/posts?pretty=true
","metafields":[{"children":null,"type":"file","title":"Image","key":"image","id":"IKV5qtc2K4","value":"cb7a8ab0-28ef-11e7-89e7-6d9e98749006-asp.net.svg","url":"https://cdn.cosmicjs.com/cb7a8ab0-28ef-11e7-89e7-6d9e98749006-asp.net.svg","imgix_url":"https://imgix.cosmicjs.com/cb7a8ab0-28ef-11e7-89e7-6d9e98749006-asp.net.svg"},{"children":null,"type":"file","title":"Thumbnail","key":"thumbnail","id":"nAp4LyUJA4","value":"cb7a8ab0-28ef-11e7-89e7-6d9e98749006-asp.net.svg","url":"https://cdn.cosmicjs.com/cb7a8ab0-28ef-11e7-89e7-6d9e98749006-asp.net.svg","imgix_url":"https://imgix.cosmicjs.com/cb7a8ab0-28ef-11e7-89e7-6d9e98749006-asp.net.svg"},{"children":null,"type":"html-textarea","title":"Blurb","key":"blurb","id":"ZlrWRpdkMV","value":"

Cosmic is the best CMS for ASP.net websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

"},{"children":null,"type":"text","title":"Headline","key":"headline","id":"vKv0f2OU6D","value":"ASP.net"},{"children":null,"type":"text","title":"SEO Description","key":"seo_description","id":"SqiIzi0nhU","value":"Cosmic is the best CMS for ASP.net websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators."},{"children":null,"type":"file","title":"Twitter Card Image","key":"twitter_card_image","id":"Td4RXWs9Qu","value":"37f46260-2acb-11e7-ae54-e9a1fc58ec22-asp.net.jpg","url":"https://cdn.cosmicjs.com/37f46260-2acb-11e7-ae54-e9a1fc58ec22-asp.net.jpg","imgix_url":"https://imgix.cosmicjs.com/37f46260-2acb-11e7-ae54-e9a1fc58ec22-asp.net.jpg"},{"children":null,"type":"html-textarea","title":"Code Example","key":"code_example","id":"iBAMNfEEFK","value":""},{"children":null,"type":"text","title":"SEO Title","key":"seo_title","id":"fwokhKF34Q","value":""},{"children":[],"type":"repeater","title":"Videos","key":"videos","id":"frgtgqfrpylludl8pnsi","value":"","repeater_fields":[{"title":"Title","key":"title","value":"","type":"text","required":false},{"title":"Link","key":"link","value":"","type":"text","required":false}]}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"kb-articles","created_at":"2017-04-24T13:13:47.601Z","created_by":"5357ef811693be2118000001","created":"2017-04-24T13:13:47.601Z","status":"published","modified_at":"2020-06-27T19:38:42.776Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-06-27T19:38:42.776Z","unpublish_at":null,"metadata":{"image":{"url":"https://cdn.cosmicjs.com/cb7a8ab0-28ef-11e7-89e7-6d9e98749006-asp.net.svg","imgix_url":"https://imgix.cosmicjs.com/cb7a8ab0-28ef-11e7-89e7-6d9e98749006-asp.net.svg"},"thumbnail":{"url":"https://cdn.cosmicjs.com/cb7a8ab0-28ef-11e7-89e7-6d9e98749006-asp.net.svg","imgix_url":"https://imgix.cosmicjs.com/cb7a8ab0-28ef-11e7-89e7-6d9e98749006-asp.net.svg"},"blurb":"

Cosmic is the best CMS for ASP.net websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.

","headline":"ASP.net","seo_description":"Cosmic is the best CMS for ASP.net websites and apps. As the new standard in digital content management, the Cosmic Headless CMS provides powerful API tools for developers and an intuitive admin dashboard for content creators.","twitter_card_image":{"url":"https://cdn.cosmicjs.com/37f46260-2acb-11e7-ae54-e9a1fc58ec22-asp.net.jpg","imgix_url":"https://imgix.cosmicjs.com/37f46260-2acb-11e7-ae54-e9a1fc58ec22-asp.net.jpg"},"code_example":"","seo_title":"","videos":[]}},{"_id":"5c2cf1cc472378384bf3f255","order":46,"slug":"developer-spotlight-john-leider-of-vuetify","title":"Developer Spotlight: John Leider of Vuetify","content":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with John Leider, the founder of Vuetify who recently spoke at the Cosmic Vuetiful Holiday Meetup following his presentation at VueConf in Toronto. To see the slides from the Vuetiful Meetup Presentation, "The Path to Vuetify 2.0", click here. Otherwise, follow John on Twitter, LinkedIn or GitHub, and enjoy the Q/A.



Cosmic: When did you first begin building software?
John: I started programming in August of 2013.

What is your preferred development stack?
Naturally, Vue.js and Vuetify 😀

What past projects are you most proud of and why?
I was very proud of a Diablo site that I made with Vue1, and plan to remake it in 2019.

What are your biggest challenges in building the Vuetify platform?
The biggest challenge with Vuetify is that OSS is hard, and the supply does not always meet the demand. This has the side-effect of forcing us to be very efficient and work harder to come up with more intuitive ways to fund the project's development.

What are some technologies you are excited about or want to learn more about?
I'm really big into tooling. I love making it easier to do common things and translate that knowledge to projects I'm responsible for. One thing I want to learn more about is Service Workers.

The Cosmic Spotlight Series is dedicated to showcasing developers that are building apps using modern tools. Learn how to Contribute here. To stay connected with us follow us on Twitter and join the conversation on Slack.

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"key":"teaser","title":"Teaser","type":"html-textarea","children":null,"value":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with John Leider, the founder of Vuetify who recently spoke at the Cosmic Vuetiful Holiday Meetup following his presentation at VueConf in Toronto. To see the slides from the Vuetiful Meetup Presentation "The Path to Vuetify 2.0", you can click here. Otherwise, follow John on Twitter, LinkedIn or GitHub, and enjoy the Q/A.

"},{"value":"0e85fb60-0eb2-11e9-9980-dd54a91eb8ce-IL1Ytuzu_400x400.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/0e85fb60-0eb2-11e9-9980-dd54a91eb8ce-IL1Ytuzu_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/0e85fb60-0eb2-11e9-9980-dd54a91eb8ce-IL1Ytuzu_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2019-01-02T17:15:56.591Z","created_by":"5716b504e9c686d006000073","created":"2019-01-02T17:15:56.591Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2019-01-08T23:16:29.457Z","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with John Leider, the founder of Vuetify who recently spoke at the Cosmic Vuetiful Holiday Meetup following his presentation at VueConf in Toronto. To see the slides from the Vuetiful Meetup Presentation "The Path to Vuetify 2.0", you can click here. Otherwise, follow John on Twitter, LinkedIn or GitHub, and enjoy the Q/A.

","featured_image":{"url":"https://cdn.cosmicjs.com/0e85fb60-0eb2-11e9-9980-dd54a91eb8ce-IL1Ytuzu_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/0e85fb60-0eb2-11e9-9980-dd54a91eb8ce-IL1Ytuzu_400x400.jpg"}}},{"_id":"5c2d5008137cf238591db888","order":47,"slug":"extensions-feature-update","title":"Extensions Feature Update","content":"

Extensions are a powerful component of Cosmic that allow you to create custom views in your Bucket Dashboard. We've recently made some updates to make using this feature even better.

New Extension edit view

Extension Edit View
You can now edit your Extension information such as Title, Sidenav icon, as well as add query parameters.

Query Parameters
Extensions are a great way to leverage powerful third party API services in your Cosmic Bucket. When you do connect to these services, however, you usually need some sort of API keys to access this content.

Until now, adding these keys to your Bucket was usually done in a makeshift way of adding a new Object Type such as "Analytics" and adding an Object to store your keys. This was an ok temporary solution, but definitely needed to change.

You can now add query parameters directly to your Extension in the Extension edit view which will be added to the Extension iframe query string.

Extension Starter
If you need an easy place to get started building your own Extensions, we now have an Extension Starter available for download. If you would like more information on what you can build with Extensions, check out the documentation page.

I hope you enjoy these updates to Cosmic Extensions to help you build amazing custom experiences in your Bucket Dashboard. I'm looking forward to seeing what you build!

If you have any questions, feel free to reach out to us on Twitter and in our Slack community channel.

Photo by Fausto García on Unsplash.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"key":"teaser","title":"Teaser","type":"html-textarea","children":null,"value":"

Extensions are a powerful component of the Cosmic that allow you to create custom views in your Bucket Dashboard. We've recently made some updates to make using this feature even better.

"},{"value":"611249d0-0eec-11e9-9037-9f98d83e8470-5qAnYQzZ2Fk.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/611249d0-0eec-11e9-9037-9f98d83e8470-5qAnYQzZ2Fk.jpg","imgix_url":"https://imgix.cosmicjs.com/611249d0-0eec-11e9-9037-9f98d83e8470-5qAnYQzZ2Fk.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2019-01-02T23:58:00.005Z","created_by":"5357ef811693be2118000001","created":"2019-01-02T23:58:00.005Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-01-03T00:22:10.979Z","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

Extensions are a powerful component of the Cosmic that allow you to create custom views in your Bucket Dashboard. We've recently made some updates to make using this feature even better.

","featured_image":{"url":"https://cdn.cosmicjs.com/611249d0-0eec-11e9-9037-9f98d83e8470-5qAnYQzZ2Fk.jpg","imgix_url":"https://imgix.cosmicjs.com/611249d0-0eec-11e9-9037-9f98d83e8470-5qAnYQzZ2Fk.jpg"}}},{"_id":"5c212d68dc2bf3440b278cb3","order":48,"slug":"developer-spotlight-diego-perez","title":"Developer Spotlight: Diego Perez","content":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Diego Perez, a Demandware / Software Developer residing in Spain who recently submitted the new Angular Company Website in the Cosmic Community. Follow Diego on Twitter, LinkedIn or GitHub, and enjoy the Q/A.


How long have you been building software and how did you get started?
I've been into the software business since 2006. I never graduated from the university, but I met some great people there and started working with them for a\r\nvery small startup, building software and websites for SMEs using .NET Framework.

What is your preferred development stack?
I think every stack has a different purpose, but if I have to choose one, I would go for MEAN. The Angular team is doing a great job and Express/Node is the straightforward solution for someone\r\nlike me, I barely code in anything different than JavaScript nowadays.

What past projects are you most proud of and why?
My friends from university and I used to allocate some time in that startup to investigate and test things we couldn't use in official projects. I am proud to say that, before facebook\r\nor twitter, we developed some sort of social network where people could share pictures, music or thoughts... We never got traction to get anywhere, but it was a really intense and rewarding exercise.

Talk a little bit more about your process for building apps. What are your biggest challenges and opportunities?
I always start planning, finding use cases, etc. But I can't help it, I always start coding way too soon, so I end\r\nup doing several iterations trying to find a balance between a more practical or modular code. Best designed apps are easy to read and maintain, and that's my goal.

What are some technologies you are excited about that you are using today, or want to learn more about?
I want to get into desktop apps, so Ionic and Electron are in my radar at the moment. I would also like to play a little bit around\r\nwith Tensorflow.js; I used Tensorflow before but never on the web, and I'd like to give it a try.

The Cosmic Spotlight Series is dedicated to showcasing developers that are building apps using modern tools. Learn how to Contribute here. To stay connected with us follow us on Twitter and join the conversation on Slack.

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"key":"teaser","title":"Teaser","type":"html-textarea","children":null,"value":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Diego Perez, a Demandware / Software Developer residing in Spain who recently submitted the new Angular Company Website in the Cosmic Community. Follow Diego on Twitter, LinkedIn or GitHub, and enjoy the Q/A.

"},{"value":"798516e0-07ae-11e9-85f6-838db3e54dd2-0.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/798516e0-07ae-11e9-85f6-838db3e54dd2-0.jpg","imgix_url":"https://imgix.cosmicjs.com/798516e0-07ae-11e9-85f6-838db3e54dd2-0.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2018-12-24T19:03:04.958Z","created_by":"5716b504e9c686d006000073","created":"2018-12-24T19:03:04.958Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2019-01-03T00:38:39.203Z","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Diego Perez, a Demandware / Software Developer residing in Spain who recently submitted the new Angular Company Website in the Cosmic Community. Follow Diego on Twitter, LinkedIn or GitHub, and enjoy the Q/A.

","featured_image":{"url":"https://cdn.cosmicjs.com/798516e0-07ae-11e9-85f6-838db3e54dd2-0.jpg","imgix_url":"https://imgix.cosmicjs.com/798516e0-07ae-11e9-85f6-838db3e54dd2-0.jpg"}}},{"_id":"5bfc741cacd4a151bd8b4905","order":49,"slug":"new-feature-activity-reports","title":"New Feature: Activity Reports","content":"

We're excited to roll out Activity Reports, a feature that helps you keep track of team member activity within your Bucket.

Click image to zoom

To find Activity Reports:
1. Login to Cosmic
2. Choose a new or existing Bucket
3. In the left sidenav of your Bucket Dashboard click the link under Settings > Activity


With Activity Reports, you can keep track of all activity within your Bucket, as well as filter by team members to see individual activity. Filter by date range, click through to revisions, and even download a CSV to save for later auditing. This feature is only available for admin level team members.

We hope you enjoy this new feature to help your team collaborate more effectively on your digital projects using Cosmic. If you have any questions, feel free to reach out to us on Twitter and in our Slack community channel.

Photo by Ferdinand Stöhr on Unsplash

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"key":"teaser","title":"Teaser","type":"html-textarea","children":null,"value":"

With Activity Reports, you can keep track of all activity within your Bucket, as well as filter by team members to see individual activity. Filter by date range, click through to revisions, and even download a CSV to save for later auditing.

"},{"value":"bbe51dd0-f1cb-11e8-a8f5-49a98284373c-photo-1476445704028-a36e0c798192.jpeg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/bbe51dd0-f1cb-11e8-a8f5-49a98284373c-photo-1476445704028-a36e0c798192.jpeg","imgix_url":"https://imgix.cosmicjs.com/bbe51dd0-f1cb-11e8-a8f5-49a98284373c-photo-1476445704028-a36e0c798192.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2018-11-26T22:30:52.449Z","created_by":"5357ef811693be2118000001","created":"2018-11-26T22:30:52.449Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-11-27T15:50:38.394Z","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

With Activity Reports, you can keep track of all activity within your Bucket, as well as filter by team members to see individual activity. Filter by date range, click through to revisions, and even download a CSV to save for later auditing.

","featured_image":{"url":"https://cdn.cosmicjs.com/bbe51dd0-f1cb-11e8-a8f5-49a98284373c-photo-1476445704028-a36e0c798192.jpeg","imgix_url":"https://imgix.cosmicjs.com/bbe51dd0-f1cb-11e8-a8f5-49a98284373c-photo-1476445704028-a36e0c798192.jpeg"}}},{"_id":"5bf828870305cf0d7f6b70d6","order":50,"slug":"developer-spotlight-owen-liversidge-with-tripwire-interactive","title":"Developer Spotlight: Owen Liversidge with Tripwire Interactive","content":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Owen Liversidge, a Web Developer residing in Atlanta, Georgia who's currently helping lead the development charge at renowned game development company Tripwire Interactive. Owen just launched Tripwire's new corporate website using a React and Cosmic-powered stack. Follow Owen on LinkedIn or GitHub, and enjoy the Q/A.



Cosmic: You just started coding within the last calendar year, right? 
Owen: Yes, I graduated back in April. My bootcamp of choice was General Assembly in Atlanta, graduating in the Web Development Immersive. It was an insane three months, but I learned the tools needed to start building websites. Before that I was a music teacher for fifteen years, which ironically was gradually destroyed by my current chosen field - the internet. More and more budding musicians were turning to free online resources to learn how to play their instruments, so I decided to go back to my early roots in design and advertising (way before I took up music as a profession). I'm happy that I made the switch - web development is fun, challenging, and a good workout for both sides of the brain.

What is your preferred development stack / tools?
On the front end I work primarily with React. I have dabbled a little with Gatsby, but I don't really have the need yet to start using GraphQL (although it is very interesting). On the back end I use Node and Express, which connects nicely with Cosmic - being able to edit all of my content using the Cosmic Dashboard allows me to keep my code very light on the server side. The only other framework that I have built apps with is Ruby On Rails. Before using Cosmic I was building databases with both PostgreSQL and Mongo DB, but I needed something for Tripwire that anyone could maintain, not just software engineers.


Talk about working in a game dev company. What types of projects are you tasked with? 
Working for a game development company is very fun and very loose. As I am the sole web developer here, I'm not really part of a web dev team but instead work closely with the marketing team.  When I started here my first main task was to completely replace the previous company website, which had been built using Umbraco. Other than that we have landing pages for every single game published by Tripwire, plus microsites for seasonal updates and promotions. So I stay busy!


What tools and technologies are you excited to explore in the near future?
As I mentioned before, I'd love to dive into GraphQL, and will probably look into the new course that Wes Bos has recently created. I'm also interested in getting a proper workout with Gatsby, which is a framework incorporating both React and GraphQL. But really, as someone that is still new to web development, my biggest aim is to get better and more versatile with the technologies that I already use.


You just launched Tripwire's new website, your first app ever. How did you get started?
Having no one at Tripwire to act as a mentor, my first task was to become a master at Google! Being a bootcamp graduate showed me the basics, but there was still so much to learn before I could build my first production app. Knowing how to do research on my own was a huge undertaking, and I probably spent most of my first month just gathering up information. After that it was mostly trial and error - seeing what worked and what didn't. The biggest challenge was figuring out how to implement a database. Everything I had built before used seeds from within the app itself, and although I had experience connecting to third party API's, I hadn't yet incorporated a headless CMS. 

Thankfully, I discovered Cosmic, which took care of everything seamlessly. They have great online resources, and I was even able to reference some code to help me build my app much quicker than by myself - this was the closest thing I had to an actual mentor all along! And because the web dashboard is so easy to use, I didn't really have to train anyone up on how to use it. After my database was set up, things fell into place a lot easier. My background in design has really helped me with styling, so most of my challenges are with coding itself. But I believe that being thrown into the deep end for my first professional project taught me a lot about how to be resourceful. I did have a few "phone a friend" moments along the way, and would like to thank both James Royals and Selo for their time and patience.


Case Studies

Tripwire Interactive Builds a React Corporate Website
Killing Floor 2 Launches Twisted Christmas
Road Redemption Launches a Marketing Microsite

The Cosmic Spotlight Series is dedicated to showcasing developers that are building apps using modern tools. Learn how to Contribute here. To stay connected with us follow us on Twitter and join the conversation on Slack.

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"key":"teaser","title":"Teaser","type":"html-textarea","children":null,"value":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Owen Liversidge, a Web Developer residing in Atlanta, Georgia who's currently helping lead the development charge at renowned game development company Tripwire Interactive. Owen just built Tripwire's new corporate website on a React and Cosmic stack. Follow Owen on LinkedIn or GitHub, and enjoy the Q/A.

"},{"value":"eaac4ef0-ef3b-11e8-9a39-a5b33ea47754-0.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/eaac4ef0-ef3b-11e8-9a39-a5b33ea47754-0.jpg","imgix_url":"https://imgix.cosmicjs.com/eaac4ef0-ef3b-11e8-9a39-a5b33ea47754-0.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2018-11-23T16:19:19.870Z","created_by":"5716b504e9c686d006000073","created":"2018-11-23T16:19:19.870Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-11-26T16:43:37.547Z","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Owen Liversidge, a Web Developer residing in Atlanta, Georgia who's currently helping lead the development charge at renowned game development company Tripwire Interactive. Owen just built Tripwire's new corporate website on a React and Cosmic stack. Follow Owen on LinkedIn or GitHub, and enjoy the Q/A.

","featured_image":{"url":"https://cdn.cosmicjs.com/eaac4ef0-ef3b-11e8-9a39-a5b33ea47754-0.jpg","imgix_url":"https://imgix.cosmicjs.com/eaac4ef0-ef3b-11e8-9a39-a5b33ea47754-0.jpg"}}},{"_id":"5be4c17ce6b8111e97553504","order":51,"slug":"product-update-media-management-search-and-filter","title":"Product Update: Media Management Search and Filter","content":"

We're excited to ship an enhancement to Media Management within Cosmic. Now when you Add Media from your Media Folder to the Content Editor or an Image Metafield, you'll be able to search by media name, metadata, as well as filter among media folders. 



We hope you enjoy the new updates to media management. And that they make managing content in your Bucket even easier. 

Photo by Gem & Lauris RK on Unsplash

If you have any questions or comments, join our Slack community and reach out to us on Twitter.

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"key":"teaser","title":"Teaser","type":"html-textarea","children":null,"value":"

We're excited to ship an enhancement to Media Management within Cosmic. Now when you Add Media from your Media Folder to the Content Editor or an Image Metafield, you'll be able to search by media name, metadata, as well as filter among media folders. 

"},{"value":"e8da5b90-e3aa-11e8-bb22-af373a2038ed-gem-lauris-rk-384958-unsplash.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e8da5b90-e3aa-11e8-bb22-af373a2038ed-gem-lauris-rk-384958-unsplash.jpg","imgix_url":"https://imgix.cosmicjs.com/e8da5b90-e3aa-11e8-bb22-af373a2038ed-gem-lauris-rk-384958-unsplash.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2018-11-08T23:06:36.235Z","created_by":"5716b504e9c686d006000073","created":"2018-11-08T23:06:36.235Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-11-09T14:56:08.303Z","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

We're excited to ship an enhancement to Media Management within Cosmic. Now when you Add Media from your Media Folder to the Content Editor or an Image Metafield, you'll be able to search by media name, metadata, as well as filter among media folders. 

","featured_image":{"url":"https://cdn.cosmicjs.com/e8da5b90-e3aa-11e8-bb22-af373a2038ed-gem-lauris-rk-384958-unsplash.jpg","imgix_url":"https://imgix.cosmicjs.com/e8da5b90-e3aa-11e8-bb22-af373a2038ed-gem-lauris-rk-384958-unsplash.jpg"}}},{"_id":"5be076b1023fc2313a05213b","order":52,"slug":"revised-pricing-new-community-plan","title":"Revised Pricing, New Community Plan","content":"

We have revised the pricing for all Bucket and Cluster plans. Take a look at the pricing page to see the new, simplified pricing including a new Community Plan that gives you a Free Personal Bucket forever.

A few things to note:
1. If you are a current customer on an existing plan, your plan rate will not change.
2. If you were thinking about upgrading your plan and notice your desired plan has increased, reach out to support for a coupon code to be grandfathered into the previous rate for your selected plan. The coupon  will expire Friday, November 9, 2018.
3. If you don't want to pay anything, that's fine too! You can get a Free Personal Bucket forever with the Community Plan.

Community Plan
We now have a Community Plan that rewards you for contributing educational resources and open source code to the Cosmic community.

I'm sure you've seen other companies offer a Community plan that requires you to add their logo attribution wherever you are using their service. But we wanted to go a different route to better serve our community.

When you contribute Apps, Extensions, Learning Center Articles, Functions or open source code, you will get a Free Personal Bucket forever plus dev swag goodies, and the opportunity to join Cosmic in a paid developer role (We're always looking for talented people!)

Click here to become a contributor »

Our mission is to help modern, digital teams build amazing products together. If you have any questions or comments, reach out to us on Twitter and join our Slack channel.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"key":"teaser","title":"Teaser","type":"html-textarea","children":null,"value":"

We have revised the pricing for all Bucket and Cluster plans. Take a look at the pricing page to see the new, simplified pricing including a new Community Plan that gives you a Free Personal Bucket forever.

"},{"value":"2b124940-e11d-11e8-9975-d3748b57b62d-plans.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/2b124940-e11d-11e8-9975-d3748b57b62d-plans.jpg","imgix_url":"https://imgix.cosmicjs.com/2b124940-e11d-11e8-9975-d3748b57b62d-plans.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2018-11-05T16:58:25.243Z","created_by":"5357ef811693be2118000001","created":"2018-11-05T16:58:25.243Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-11-05T17:19:42.486Z","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

We have revised the pricing for all Bucket and Cluster plans. Take a look at the pricing page to see the new, simplified pricing including a new Community Plan that gives you a Free Personal Bucket forever.

","featured_image":{"url":"https://cdn.cosmicjs.com/2b124940-e11d-11e8-9975-d3748b57b62d-plans.jpg","imgix_url":"https://imgix.cosmicjs.com/2b124940-e11d-11e8-9975-d3748b57b62d-plans.jpg"}}},{"_id":"5bbb608b0d0468118ea1e36d","order":53,"slug":"json-metafield-now-available","title":"JSON Metafield Now Available","content":"


Cosmic is on a mission to provide your team with flexible solutions to store content for websites and apps. Until now, to store plain data, the only option was to use a Plain Text Metafield and store the data as a string.  This was not ideal for storing raw data or retrieving data, especially if it's not intended to be a string. So we're excited to introduce a new Metafield to give you even more flexibility to store raw application data.

Using the new JSON Metafield, you can now store any valid JSON data. This gives you great flexibility to store any data type: String, Boolean, Array, Objects as well as creating nested data models.

Using the JSON Metafield in the Dashboard


Storing JSON data using the Cosmic NPM Module

\">

We hope you enjoy the new JSON Metafield to provide you even more flexibility for storing application data for your Cosmic-powered applications.

If you have any questions or comments, join our Slack community and reach out to us on Twitter.

Photo by Tools For Motivation on Unsplash.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"key":"teaser","title":"Teaser","type":"html-textarea","children":null,"value":"

We hope you enjoy the new JSON Metafield to provide you even more flexibility for storing application data for your Cosmic-powered applications.

"},{"value":"91d15b70-cb02-11e8-9001-13182418d138-tools-for-motivation-290346-unsplash.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/91d15b70-cb02-11e8-9001-13182418d138-tools-for-motivation-290346-unsplash.jpg","imgix_url":"https://imgix.cosmicjs.com/91d15b70-cb02-11e8-9001-13182418d138-tools-for-motivation-290346-unsplash.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2018-10-08T13:50:03.955Z","created_by":"5357ef811693be2118000001","created":"2018-10-08T13:50:03.955Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-10-09T13:56:21.664Z","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

We hope you enjoy the new JSON Metafield to provide you even more flexibility for storing application data for your Cosmic-powered applications.

","featured_image":{"url":"https://cdn.cosmicjs.com/91d15b70-cb02-11e8-9001-13182418d138-tools-for-motivation-290346-unsplash.jpg","imgix_url":"https://imgix.cosmicjs.com/91d15b70-cb02-11e8-9001-13182418d138-tools-for-motivation-290346-unsplash.jpg"}}},{"_id":"5b96c18bbe0f5f13bec4cdb9","order":54,"slug":"introducing-cosmic-functions","title":"Introducing Cosmic Functions","content":"

We're excited to release Cosmic Functions (public beta) to help teams build amazing modern products together with new serverless solutions.

Click here to go directly to the Cosmic Functions documentation >>


What are serverless functions?
Serverless function development is rapidly growing in popularity. And it's no surprise. With serverless, you don't have to manage server infrastructure, you get infinite scalability, and you never have to pay for idle server time like with AWS EC2, Digital Ocean Droplets, etc. You only pay for code executions. 

We even wrote an article about the advantages of serverless development and offer a Serverless Starter App for teams that want to get familiar with this new technology.

Along with our best-in-class headless CMS and application development tools, adding serverless solutions helps further our mission to help teams build modern apps faster.  We think that you'll find Cosmic Functions to be the most delightful way to deploy serverless functions, right from the comfort of your Cosmic Bucket.

Find Cosmic Functions in Your Bucket > Settings > Functions


What are Cosmic Functions?
Cosmic Functions allow you to deploy AWS Lambda functions (currently Node.js v8.10) without having to manage server infrastructure.  You can deploy your functions to AWS through your Bucket Dashboard located at Your Bucket > Settings > Functions. 

AWS Lambda functions are infinitely scalable, highly cost effective, and you get 1M requests per month free.  Using Cosmic to deploy your functions is 100% free.  Cosmic does not charge you to deploy your AWS Lambda functions.  All analytics and billing is connected to your AWS account.

What's required?
1. Your AWS access key and secret key
2. Node.js codebase (zip or link to git repo) that follows Lambda requirements. (If you've linked your Cosmic account to your GitHub account, you can deploy private GitHub repos as well as public repos).


Getting Started
To get started deploying your own Functions go to Your Bucket > Settings > Functions.  For more information, go to the Cosmic Functions documentation.


It's our hope that Cosmic Functions help you deploy code fast and efficiently, helping your team build great products. We're excited to see what you build and please let use know if you have any questions or would like to schedule a demo.

You can also reach out to us on Twitter and join the conversation on Slack.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"key":"teaser","title":"Teaser","type":"html-textarea","children":null,"value":"

We're excited to release Cosmic Functions (public beta) to help teams build amazing modern products together with new serverless solutions.

"},{"value":"1db09e30-b52d-11e8-a872-d9db9fcff0a8-cosmic-lambda-functions.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/1db09e30-b52d-11e8-a872-d9db9fcff0a8-cosmic-lambda-functions.jpg","imgix_url":"https://imgix.cosmicjs.com/1db09e30-b52d-11e8-a872-d9db9fcff0a8-cosmic-lambda-functions.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2018-09-11T19:10:03.455Z","created_by":"5357ef811693be2118000001","created":"2018-09-11T19:10:03.455Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-09-11T13:50:07.192Z","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

We're excited to release Cosmic Functions (public beta) to help teams build amazing modern products together with new serverless solutions.

","featured_image":{"url":"https://cdn.cosmicjs.com/1db09e30-b52d-11e8-a872-d9db9fcff0a8-cosmic-lambda-functions.jpg","imgix_url":"https://imgix.cosmicjs.com/1db09e30-b52d-11e8-a872-d9db9fcff0a8-cosmic-lambda-functions.jpg"}}},{"_id":"5b966f966c2dbd0f3c8016f0","order":55,"slug":"developer-spotlight-chris-schwab-with-life-is-good","title":"Developer Spotlight: Chris Schwab with Life is Good","content":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Chris Schwab, a Front End Engineer residing in Boston who's currently helping lead the development charge at positivity-prone apparel brand Life is Good. Chris and his team at Life is Good have been using the Cosmic API to manage user-generated-content for their positivity campaigns (now in their second consecutive year). Follow Chris on LinkedIn or Twitter, and enjoy the Q/A.

TL;DR:

Life is Good Case Study  
Positive Thinking Day


How long have you been building software and how did you get started?
I went to business school and didn’t become interested in coding until a junior year marketing internship in which the start-up I was helping out needed to build a web presence. I took up the challenge and built them a basic Wix HTML site. That\r\nreally sparked my interest and I decided to pursue an IT minor. This opened up a few doors and another internship as a junior developer with Saltwater Creative Agency. The internship turned into a job offer and this is where I really learned how to code,\r\nmanage web projects, and be a part of a nimble digital marketing team. I’m grateful for the path I took, as I believe the best way to become a developer is through working on real projects versus in the classroom. Great mentors help too, and I’m\r\nlucky to have had a few of those during my journey.


What is your preferred development stack?
I’m certainly not an expert at one particular technology, but I pride myself on having the ability to transfer skills and problem solve across a wide range of technologies. I started developing on the LAMP stack for custom websites and today I mostly\r\nwork in the Salesforce Commerce Cloud development environment. I also enjoy working on a good ‘ol MERN stack React project.


What past projects are you most proud of and why?
Two single page application projects come to mind, because at the time, we were trailblazing with this new type of approach. One of them was simply using jQuery and AJAX to create an SPA which a bank displayed product information, specials and rates for\r\ncustomers to view on in-branch iPads instead of the traditional print materials. Another early SPA was my first React project in which I helped put together a robust tool for customizing, previewing and ordering a shed through a major home improvement\r\nstore. Users could customize and order online, or in-store with an associate on an iPad. One of the coolest parts of this project was owning the front end development and helping integrate with the back end web services of a major corporation. The technology\r\nwas the latest and greatest at the time and we had no experience with it, but sometimes it’s best to be thrown into the fire and just figure it out. I worked with a great team and we successfully navigated the unknown.


\">


Talk a little bit more about your process for building apps at Life is Good. Are they for external or internal audiences?
We have a mix of internal and external applications at Life is Good. Most external apps are for ecommerce or brand building. Most internal apps are for monitoring business and technical KPI’s. Cosmic has been a key technology for all of our applications\r\nthat collect user generated content. Abstracting the content collection, storage, moderation and distribution to a central source have allowed us to rapidly deploy brand building UGC apps without diverting too many resources from our primary ecommerce\r\ndevelopment needs.


What are some technologies you are excited about that you are using today, or want to learn more about?
As a front end developer who has some back end skills, but would like to become more full stack, I’ve enjoyed working with Node and Python as much as possible. Luckily, being on a smaller tech team, I get the opportunity to work on projects outside\r\nof the boundaries of my role quite often and constantly expand my skill set. I’m also interested in more exposure to data viz and voice, exploring blockchain and crypto, and the evolution of AR/VR.


Tell us more about the recent Life is Good UGC Campaign Launch.
After our first successful UGC campaign powered by Cosmic last November, the choice was obvious for how to approach our latest UGC campaign for Positive Thinking Day. We wanted to give people the ability to “share one positive thought” and post it as part of a unique community. The challenges were how to collect and store user content, moderate it, distribute it across multiple channels and do it as fast as possible with minimal custom development. We worked with Tony and Carson to choose the best Cosmic starting point project for our needs and architect a plan to achieve our goal of creating the hub of positive thoughts. Our design team put together some fantastic looking assets and I customized the React Sticky Notes Cosmic starting point project and we were able to put together this application in days versus what could have taken weeks. Cosmic provided the scaffolding and plumbing, we just had to do the finish work to pretty it up and brand it. We were able to focus on what we do best while Comisc JS took care of the rest.


\">


The Cosmic Spotlight Series is dedicated to showcasing developers that are building apps using modern tools. To stay connected with us follow us on Twitter and join the conversation on Slack.

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"key":"teaser","title":"Teaser","type":"html-textarea","children":null,"value":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Chris Schwab, a Front End Engineer residing in Boston who's currently helping lead the development charge at positivity-prone apparel brand Life is Good. Chris and his team at Life is Good have been using the Cosmic API to manage user-generated-content for their positivity campaigns (now in their second consecutive year). Follow Chris on LinkedIn or Twitter, and enjoy the Q/A.

"},{"value":"0a972930-b506-11e8-a74e-0360eb996f20-IMG_3240.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/0a972930-b506-11e8-a74e-0360eb996f20-IMG_3240.jpg","imgix_url":"https://imgix.cosmicjs.com/0a972930-b506-11e8-a74e-0360eb996f20-IMG_3240.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2018-09-10T13:20:22.356Z","created_by":"5716b504e9c686d006000073","created":"2018-09-10T13:20:22.356Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-09-10T14:47:32.535Z","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Chris Schwab, a Front End Engineer residing in Boston who's currently helping lead the development charge at positivity-prone apparel brand Life is Good. Chris and his team at Life is Good have been using the Cosmic API to manage user-generated-content for their positivity campaigns (now in their second consecutive year). Follow Chris on LinkedIn or Twitter, and enjoy the Q/A.

","featured_image":{"url":"https://cdn.cosmicjs.com/0a972930-b506-11e8-a74e-0360eb996f20-IMG_3240.jpg","imgix_url":"https://imgix.cosmicjs.com/0a972930-b506-11e8-a74e-0360eb996f20-IMG_3240.jpg"}}},{"_id":"5b902a86cc3d87038d114b8a","order":56,"slug":"developer-spotlight-brandon-reid","title":"Developer Spotlight: Brandon Reid ","content":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Brandon Reid, a JavaScript developer residing in Dallas, Texas who's currently Lead Developer at Simple Media. Brandon recently launched a new React / Node website on Cosmic for The Arnold Companies, an energy and aviation client. Follow Brandon on LinkedIn and GitHub, and enjoy the Q/A.

Cosmic: How long have you been building software?
Brandon:\r\nPersonally, I used to create small C# scripts for a PC game I played back in high school, called Space Engineers (I know! How much more nerdier can it get right?) Professionally, I didn’t start building production grade software until my sophomore\r\nyear during my Bachelor's degree at the University of North Texas. I was working as a research assistant at the time, back in 2015. So three years now, and I’ve enjoyed every minute of it.


What is your preferred development stack?
I’m on the JavaScript bandwagon. So, my go to has always been the CERN stack. Couchbase, Express, React, and Node. However, since working with Cosmic, I’m going to have to switch out my  backend preference: Couchbase for Cosmic. :wink:\r\nAs far as UI frameworks go, my go to has always been Material UI design. It’s simple, elegant, and has a huge UI Kit for react that offers a ton of great components. 


What past projects are you most proud of and why?
Hands down, one of my first production applications I ever built when I was a research assistant at The University of North Texas, working under Dr. Ram Dantu. His research lab built a mobile android application based on wearable technology, that could\r\nmonitor the quality of CPR being performed on patients in code blue emergencies. Essentially, a nurse would wear an android smartwatch synced with an android tablet that would monitor CPR movements/quality. The research was partnered with Texas Health\r\nPresbyterian at Frisco. My job was to implement an internal web application that could display live statistical data in the form of charts/histograms. The data included rates/min of pumps being performed during CPR, how many pumps/min, etc. I had to implement\r\na backend sync gateway between android devices and an internal server, working with a full stack. This project really made me feel like I was making a difference and an impact in the medical industry.


Talk a little bit more about your process for building apps. 
Usually before I build an application I try to put together a few high level diagrams laying out important functionalities of the application, mostly in the form of interactive/sequence diagrams. Then I’ll analyze what kind of global and reusable\r\ncomponents the applications will have. This helps me get a better picture of how data will flow throughout the application’s component tree and what kind of data management I will need to implement. After that I’ll implement some type of agile\r\nworkflow, work in development sprints, and try to get an MVP out to my clients. I like to be as transparent as possible with my clients, and include them in the agile process every step of the way.  


What are some technologies you are excited about that you are using today, or want to learn more about?
Oh gosh that’s a big list. There is so much cool stuff out there I’ve been wanting to get into. I’m really excited to work with some JavaScript libraries that offer 3D rendering capabilities like 3D.js. With modern browsers becoming\r\nmore powerful, I feel like we will see an increase in sites using 3D stuff. I’m also excited about the use of AI for chatbots and other use cases, I’ve been eager to get some time to spin up an AI server on Digital Ocean and play with it.\r\nAlso! React animation libraries. There are some really talented developers out there creating some cool animation stuff. Can’t wait to get some time to play with those as well. 


You just finished building TAC, taking it from a WordPress installation to a modern API-first stack - what was that like?
Building TAC was a blast! It couldn’t have been smoother working in Cosmic to build out a super fast API backend. I was able to use Cosmic’s React Starter kit and hit the ground running using an awesome boilerplate packed with NextJS and it’s SSR capabilities. I never once had an issue with Cosmic and never had to contact support. That’s how simple, easy, and elegant it is for a developer to get started on the platform. I love seeing this trend of larger companies finally getting off clunky systems like WordPress/Drupal and moving over to a more modern web stack. As a Full Stack Developer specializing in React/Node, I couldn’t be more excited for the future of web development. 


TAC’s backend is powered by Node, Next.js, and Express. Next.js is used for server side rendering capabilities for SEO optimization as well as site routing. Next.js also makes it easy to integrate with babel and webpack since they are built right\r\nin. I used Next.js routing API to rendering page templates for pages that have the same design layouts.  TAC’s frontend is powered by React.js and the world's most popular react UI framework, Material UI. In order to use Material UI with\r\nSSR, I had to wrap the site in a JSSProvider, and use CSSBaseline. For development I used Eslint as a linter for a cleaner and more consistent codebase. Since TAC uses ES6 javascript, I had to also implement a very small amount of polyfill to transpile\r\nES6 to ES5 in order for the site to work with IE11. Some notable node modules I used were: React-Image-Gallery for the image galleries across the site, React-Masonry-Component for the newsroom, and Fetch for API requests. For email services/API I used\r\nnodemailer and mailgun. 



I started building the site by using Cosmic’s React Starter Kit, which helped me get jump started right away. The beginning of building TAC started with implementing all globals for the site (Header, Footer, Favicon, etc). So I quickly created some\r\njavascript request functions to pull data from the cosmic buckets using Cosmic’s Node API. I added those global components to the sites main _app layout, so every page would be wrapped and rendered with those globals. From there I analyzed what\r\npages would have reusable components across multiple pages or the site, and created component views for those pages based off my analysis. From there I was able to efficiently knock out page designs and implement object types in the cosmic bucket on the\r\nfly. As we got closer to site launch, I noticed the compatibility issues with IE11 and had to come up with a solution. At first, I was going to do a browser sniff in the code to display something that would work on IE. Instead I implemented Babel and\r\nsome polyfills to solve any compatibility issues. 

The Cosmic Spotlight Series is dedicated to showcasing developers that are building apps using modern tools. To stay connected with us follow us on Twitter and join the conversation on Slack.

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"key":"teaser","title":"Teaser","type":"html-textarea","children":null,"value":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Brandon Reid, a JavaScript developer residing in Dallas, Texas who's currently Lead Developer at Simple Media. Brandon recently launched a new React / Node website on Cosmic for The Arnold Companies, an energy and aviation client. Follow Brandon on LinkedIn and GitHub, and enjoy the Q/A.

"},{"value":"90c13ec0-b14a-11e8-bd6f-4fc18dc9a940-my_photo.png","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/90c13ec0-b14a-11e8-bd6f-4fc18dc9a940-my_photo.png","imgix_url":"https://imgix.cosmicjs.com/90c13ec0-b14a-11e8-bd6f-4fc18dc9a940-my_photo.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2018-09-05T19:12:06.242Z","created_by":"5716b504e9c686d006000073","created":"2018-09-05T19:12:06.242Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-09-05T20:59:30.439Z","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Brandon Reid, a JavaScript developer residing in Dallas, Texas who's currently Lead Developer at Simple Media. Brandon recently launched a new React / Node website on Cosmic for The Arnold Companies, an energy and aviation client. Follow Brandon on LinkedIn and GitHub, and enjoy the Q/A.

","featured_image":{"url":"https://cdn.cosmicjs.com/90c13ec0-b14a-11e8-bd6f-4fc18dc9a940-my_photo.png","imgix_url":"https://imgix.cosmicjs.com/90c13ec0-b14a-11e8-bd6f-4fc18dc9a940-my_photo.png"}}},{"_id":"5b7ada9ea3ec1e74082b88c7","order":57,"slug":"developer-spotlight-brandy-morgan","title":"Developer Spotlight: Brandy Morgan ","content":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Brandy Morgan, a JavaScript developer residing in sunny Florida who's currently spearheading her startup CreatorsCode. Brandy is a creative technology influencer, speaker, and consultant with large followings of developer advocates and students alike. Follow Brandy on Instagram, LinkedIn or Twitter, and enjoy the Q/A.



Cosmic: How long have you been building software?
Brandy: I have been building software since 2015. I started attending Full Sail University for web development in 2014 and got my first paying job a year into the program. I knew that no matter what, the experience I could get actually building products would be far more useful than education alone.  


What is your preferred development stack?
I love all things JavaScript. My favorite framework to build in is React Native but for web I prefer React and Node.js. Writing in JavaScript for both the frontend and backend gives you familiarity when going from backend to frontend that other stacks doesn't have. 


What past projects are you most proud of and why?
My favorite project that I built was for the Powerpuff Girls, powerpuffyourself.com. It is a web application written in Vue.js and Node.js. This was a fast project, meaning we only had 8 weeks to build, with a hard deadline. I had never heard of Vue.js (this was in 2016). I started by reading their docs several times to become familiar with syntax. The other big hurdle was the project needed a strong understanding of AWS, more specifically Lambda. 

During those 2 months I spent every waking moment writing code and learning AWS. On the last night at around 3am, I had created my last pull request, and the other programmer on the project approved it and I was ready to do a push to staging and have QA have a go at it before pushing to production in a few hours. I left the office and got home, showered, and had to catch a flight to NYC to be the technical lead at the Powderpuff Girls pop up shop, where our app would be the main attraction. 

The next four days were the most intense for fixing bugs, adding features, removing features, all while explaining everything in terms the Cartoon Network team could understand. It was one of the best experiences of my life and really taught me the importance of communication and to always do your work with a smile on, no matter the level of exhaustion.



\">


 

Talk a little bit more about your process for building apps.
The main thing to think about when it comes to scoping a project is, what is the  business need behind it? You really need to understand the process in which the application is for, so you know how to solve for it. If someone comes to you with a problem they are facing and they want software to fix it. 

We as developers need to be asking the right questions so that the software we build actually fixes the issue. A lot of times it isn’t the initial problem we are solving for. That gets uncovered by asking questions and better understanding their processes and pain points.


What are some technologies you are excited about right now?
I have been fascinated with AI and machine learning for sometime. I would love to create smart software that learns the behavior of its users to create a better experience for them. 

Join the conversation on Twitter and Slack. 

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"key":"teaser","title":"Teaser","type":"html-textarea","children":null,"value":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Brandy Morgan, a JavaScript developer residing in sunny Florida who's currently spearheading her startup CreatorsCode. Brandy is a creative technology influencer, speaker, and consultant with large followings of developer advocates and students alike. Follow Brandy on Instagram, LinkedIn or Twitter, and enjoy the Q/A.

"},{"value":"d06ef000-a4b4-11e8-bbe0-2760c84a7c36-ice_screenshot_20180820-150816.png","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/d06ef000-a4b4-11e8-bbe0-2760c84a7c36-ice_screenshot_20180820-150816.png","imgix_url":"https://imgix.cosmicjs.com/d06ef000-a4b4-11e8-bbe0-2760c84a7c36-ice_screenshot_20180820-150816.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2018-08-20T15:13:34.539Z","created_by":"5716b504e9c686d006000073","created":"2018-08-20T15:13:34.539Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-08-20T20:08:34.868Z","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Brandy Morgan, a JavaScript developer residing in sunny Florida who's currently spearheading her startup CreatorsCode. Brandy is a creative technology influencer, speaker, and consultant with large followings of developer advocates and students alike. Follow Brandy on Instagram, LinkedIn or Twitter, and enjoy the Q/A.

","featured_image":{"url":"https://cdn.cosmicjs.com/d06ef000-a4b4-11e8-bbe0-2760c84a7c36-ice_screenshot_20180820-150816.png","imgix_url":"https://imgix.cosmicjs.com/d06ef000-a4b4-11e8-bbe0-2760c84a7c36-ice_screenshot_20180820-150816.png"}}},{"_id":"5b648bf43a617a08872d027b","order":58,"slug":"improved-metafield-modeling","title":"Improved Metafield Modeling","content":"

Metafields are a powerful feature of the Cosmic CMS.  They give developers the power to build complex data models in a delightfully simple and intuitive way.

Check out the Getting Started guide for more information on the Cosmic data structure.

In an effort to make the data modeling of Metafields even easier, you can now add Metafields at the top, bottom and inline between Metafields. This should come as a welcome improvement for those that have Objects with lots of Metafields.

I hope you enjoy the new flexibility for adding Metafields. If you have any questions or comments, reach out to us on Twitter and join our Slack community. 

Photo by Esther Jiao on Unsplash.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"key":"teaser","title":"Teaser","type":"html-textarea","children":null,"value":"

In an effort to make the data modeling of Metafields even easier, you can now add Metafields at the top, bottom and inline between Metafields.

"},{"value":"180ff670-974f-11e8-abe4-e9431faebfc5-esther-jiao-640129-unsplash (1).jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/180ff670-974f-11e8-abe4-e9431faebfc5-esther-jiao-640129-unsplash (1).jpg","imgix_url":"https://imgix.cosmicjs.com/180ff670-974f-11e8-abe4-e9431faebfc5-esther-jiao-640129-unsplash (1).jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2018-08-03T17:08:04.491Z","created_by":"5357ef811693be2118000001","created":"2018-08-03T17:08:04.491Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-08-03T18:58:46.407Z","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

In an effort to make the data modeling of Metafields even easier, you can now add Metafields at the top, bottom and inline between Metafields.

","featured_image":{"url":"https://cdn.cosmicjs.com/180ff670-974f-11e8-abe4-e9431faebfc5-esther-jiao-640129-unsplash (1).jpg","imgix_url":"https://imgix.cosmicjs.com/180ff670-974f-11e8-abe4-e9431faebfc5-esther-jiao-640129-unsplash (1).jpg"}}},{"_id":"5b560dad0c191c080d015a03","order":59,"slug":"developer-spotlight-kyle-mathews-of-gatsby","title":"Developer Spotlight: Kyle Mathews of Gatsby","content":"

Since debuting the Cosmic Gatsby Source Plugin and Cosmic-powered Gatsby Blog earlier this summer, it's been one of the most popular applications in the Cosmic Apps Marketplace. Taking the hint that the Cosmic Community was crazy for Gatsby, we made the Gatsby Starter App available, which lets you install a Cosmic-powered Gatsby app in seconds. 



With all the recent Gatsby fervor, we were delighted to get to sit down with Kyle Mathews, founder of Gatsby and a software engineer living in San Francisco. Follow Kyle on GitHub and Twitter, and enjoy the Q/A. 





Cosmic: How long have you been building software?
Kyle: My oldest brother is a programmer and tried introducing me to qbasic when I was 10 or something. I thought it was kinda interesting but it didn't stick. I did a lot of video editing and animation in high school but I didn't program program until my sophomore year in college when I took an intro to programming class and got hooked. This led to a bunch of web projects then a startup project my last year of college and then haven't stopped since.


What is your preferred development stack?
I write a lot of JavaScript so React & JS on the frontend and Node on the back. GraphQL is my favorite way to make APIs and I really love the event sourcing model for larger projects. 


What past projects are you most proud of and why?
Pre-Gatsby — I worked at a startup called Pantheon. It was my first "real" job and first time working with a great engineering & product team and I'm really proud of the work I did there building out their dashboard tools. 

These days of course I'm working full-time on Gatsby — which I'm super proud of. It's been really fun to design & build something lots of people love and even more—to see it gradually become other people's project and passion—not just mine.


Talk a little bit more about your process for building apps. 
I like to think about things fairly thoroughly before working on them. Try to jump through every requirement users could ever have for the project. How that'd impact the UI and the technical side of things, etc. And then try to forget about all that and figure out the tiniest part of it I can build and ship immediately aka the MVP. Doing that is tricky but it helps avoid coding yourself in corners by not anticipating a big requirement but also to avoid spending lots of time solving problems that turn out to not actually be problems. When you get the balance right, you can solve some small part of the problem very quickly which will help you get a lot of great feedback from excited users and that feedback and energy combined with your foreseeing what will be needed will enable you to iterate on the rest of the problem very very quickly.


What are some technologies you are excited about that you are using today, or want to learn more about?
I think JavaScript, React, Node — as big as they are — are just getting started. They have massive growth still ahead of them. Beyond that, I'm extremely excited by Serverless (Functions as a Service) and all the really refreshing improvements that brings to engineering productivity and server costs.


What problems are Gatsby solving in the future? What is the plan of growth? 
So many! We want to ensure that whatever you build with Gatsby will always be lightning quick and that development will be fun and fast.

So no shortage of things to do :-) We're very energized by the enthusiasm from the community and are excited to keep pushing forward the experience of building sites with Gatsby.

Join the conversation on Twitter and Slack. 

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"key":"teaser","title":"Teaser","type":"html-textarea","children":null,"value":"

With all the recent Gatsby fervor, we were delighted to get to sit down with Kyle Mathews, founder of Gatsby and a software engineer living in San Francisco. Follow Kyle on GitHub and Twitter, and enjoy the Q/A. 

"},{"value":"7685e0b0-8f49-11e8-ac9b-a568525636cf-gatsby-cosmic.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/7685e0b0-8f49-11e8-ac9b-a568525636cf-gatsby-cosmic.jpg","imgix_url":"https://imgix.cosmicjs.com/7685e0b0-8f49-11e8-ac9b-a568525636cf-gatsby-cosmic.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2018-07-23T17:17:33.153Z","created_by":"5716b504e9c686d006000073","created":"2018-07-23T17:17:33.154Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-07-24T13:57:14.644Z","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

With all the recent Gatsby fervor, we were delighted to get to sit down with Kyle Mathews, founder of Gatsby and a software engineer living in San Francisco. Follow Kyle on GitHub and Twitter, and enjoy the Q/A. 

","featured_image":{"url":"https://cdn.cosmicjs.com/7685e0b0-8f49-11e8-ac9b-a568525636cf-gatsby-cosmic.jpg","imgix_url":"https://imgix.cosmicjs.com/7685e0b0-8f49-11e8-ac9b-a568525636cf-gatsby-cosmic.jpg"}}},{"_id":"5b4c90cd0d94ad101fc120c9","order":60,"slug":"developer-spotlight-harrie-pieters","title":"Developer Spotlight: Harrie Pieters ","content":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Harrie Pieters, a Full Stack JavaScript developer in Amsterdam. Harrie recently was on a team collaborating to build the Bookabus project, a localized transportation website that serves marketing and bus-route content to its European markets. Follow Harrie on GitHub, LinkedIn or Twitter, and enjoy the Q/A.


How long have you been building software?
It all started more than 15 years ago, at the time where people just started to realise using tables was a much better way to build websites than frames. At that time I just started high school and was just playing around. During my university years some 8 years later I decided to start turning my hobby into a business and have been developing websites, web applications and apps ever since.


What is your preferred development stack?
Currently I focus heavily on JavaScript as full stack developer, using React on the frontend, React Native for apps, and Node on the backend. 


What past projects are you most proud of and why?
One of the most rewarding projects was building an app for The Ocean Cleanup to digitise ocean trash sightings research. Especially debugging the app in the middle of the Atlantic Ocean  was a unique experience, as having no internet or cell service calls for some creative solutions.


In talking about your process for building apps, do any recent projects come to mind?
So early on this year I was asked to build the Bookabus website from scratch, in an attempt to combine the productivity React with Server Side Rendering (SEO) I decided on giving Next.js a go. One of the requirements for the website was a CMS for the team to be able to edit content that supported multiple countries and languages in Europe. We found Cosmic to be the best solution for us at the time to act as our headless CMS.



The current stack consists of a backend API using GraphQL that serves the content to the frontend (website). The API fetches the localised content from Cosmic, makes a local cache, and serves the content based upon query parameters. The frontend does some additional caching for static content such as FAQ items and pages. 


We are currently investigating the possibility of moving one step further and making a static build that already has the localised content in the project. Utilising the web hook to trigger an automatic build.


What are some technologies you are excited about that you are using today, or want to learn more about?
There are so many exciting things going on, currently I am excited about serverless stacks, improving products beyond our own imagination using AI, smart-contracts and moving towards functional programming. 


To learn how you can contribute Apps, Articles and Extensions to the Cosmic Community, contact us at jobs@cosmicjs.com.

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"key":"teaser","title":"Teaser","type":"html-textarea","children":null,"value":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Harrie Pieters, a Full Stack JavaScript developer in Amsterdam. Harrie recently was on a team collaborating to build the Bookabus project, a localized transportation website that serves marketing and bus-route content to its European markets. Follow Harrie on GitHub, LinkedIn or Twitter, and enjoy the Q/A.

"},{"value":"8b81d6a0-88f4-11e8-a6dd-9522b35cef3e-blake-connally-373084-unsplash.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/8b81d6a0-88f4-11e8-a6dd-9522b35cef3e-blake-connally-373084-unsplash.jpg","imgix_url":"https://imgix.cosmicjs.com/8b81d6a0-88f4-11e8-a6dd-9522b35cef3e-blake-connally-373084-unsplash.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2018-07-16T12:34:21.826Z","created_by":"5716b504e9c686d006000073","created":"2018-07-16T12:34:21.826Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"published_at":"2018-07-16T13:15:27.681Z","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Harrie Pieters, a Full Stack JavaScript developer in Amsterdam. Harrie recently was on a team collaborating to build the Bookabus project, a localized transportation website that serves marketing and bus-route content to its European markets. Follow Harrie on GitHub, LinkedIn or Twitter, and enjoy the Q/A.

","featured_image":{"url":"https://cdn.cosmicjs.com/8b81d6a0-88f4-11e8-a6dd-9522b35cef3e-blake-connally-373084-unsplash.jpg","imgix_url":"https://imgix.cosmicjs.com/8b81d6a0-88f4-11e8-a6dd-9522b35cef3e-blake-connally-373084-unsplash.jpg"}}},{"_id":"5b192d4a0d7160027f1a704c","order":62,"slug":"developer-spotlight-trey-huffine","title":"Developer Spotlight: Trey Huffine","content":"

In this Cosmic Developer Spotlight, we sat down with Trey Huffine, a Software Engineer in San Francisco who currently works as a frontend engineer at Postmates. Trey is also the founder of BlockAce, gitconnected, and Radion. Check him out on Twitter or Medium, and enjoy the Q/A.



How long have you been building software?
I began building software about 10 years in during college in my engineering program which mostly consisted of Matlab and Python. I knew that I loved to code, but I was a little unsure of how to turn that into a career. I moved to Berkeley to get a master's degree, and during the program, I started to teach myself web development by starting with Ruby on Rails and JavaScript. 


I became consumed by it and realized this was the area I was truly passionate about. I would spend more time focusing on building apps than my school work, and I realized that I needed to move my career in that direction. Immediately after I graduated, I applied to a JavaScript bootcamp, and I couldn't be happier with how things have turned out.


What is your preferred development stack?
For the client side, I almost always tend to pick React as the tool of the choice. Whether I'm building a small project or a large scalable interface, React is mostly unbeatable and the community around the technology is incredible. If I need more powerful state management, I'll also add in Redux.


For the server, I tend to focus more on a project's need to help guide choosing the right tool. If I'm focused more on development speed, I'll choose Node (JavaScript) since it allows me to write my API's very quickly. If I decide not to use Node, then Go would be my next pick. It's a minimalistic but powerful language, and it's a ton of fun to code in. There are few languages that offer the combined developer experience and performance that Go provides.


Recently though, I've found myself really enjoying working in a JAMStack. On the client side, I build static markup with React using react-static and then provide API's with AWS Lambda functions written in either Node or Go. By pre-building the markup, apps feel blazing fast to users, and you don't need to wait for database calls. By using Lambdas, it forces me to keep the logic small and modular, producing better overall code quality. It also makes your server horizontally scalable since you don't manage your own CPU's. Working in this stack is also what has gotten me interested in Cosmic and thinking about how to use that to manage my data backend.


What past projects are you most proud of and why?
I think the project I'm most proud of is gitconnected which was created as a way to help developers connect and offer social learning community. I know first-hand that making a career change into the software engineering field can be intimidating. Many developers suffer from imposter syndrome, and it can feel very difficult to find and connect with other engineers. Gitconnected was created to help build a community as well as support collaboration and open source software development.


Recently I've also been enamored with blockchain technology which made me decide to start BlockAce and Radion. I've bought into the hype that blockchain can be transformative and disrupt the way we do many things. Since blockchain is so new, there is a disconnect between developers and companies, and BlockAce is a job platform to people get hired for careers in blockchain.


Another issue with blockchain is adoption. The companies that do offer blockchain software solutions expect the clients to make radical changes to their current business model, and we believe this is the wrong approach. Radion focuses on building software that allows companies to integrate blockchain immediately without needing to change any of their day-to-day operations.


I'm also a software engineer at Postmates, and we've been doing some very exciting things. We recently rebuilt our entire web application as well as the view layer on the mobile apps. Being part of a ground-up rewrite for a product that is used by millions of people is a learning experience that I'm very grateful to have been a part of. We were able to choose the exact technologies we wanted to use and build a software stack that's great to work with as a developer and offers all the features needed to grow the company. The team itself at Postmates is very talented, and I really believe that the sky is the limit on what we're now able to achieve.


Talk a little bit more about your process for building apps. Are you working on a team, and if so, what types of roles within the organization are you collaborating with?
I've both built applications individually as well as worked on larger teams where I need to collaborate all different roles - other engineers, designers, product managers, marketing, customer service, etc. I think regardless of the size of the project or number of people, I tend to find following these principles lead to successful outcomes and happy individuals.

- Focus on completeness over perfect and then iterate.
- Individual ownership is critical. Everyone should feel like the CEO of their own work.
- Get input early and often from everyone involved, and make the process of building a product a conversation among all stakeholders.
- Focus and prioritize the things that will make the greatest impact.
- Keep business objectives in mind when making decisions.
- Don't make assumptions. You should validate ideas.
- Always find ways to make the process fun - try new technologies, add your twist on ideas, work on building features with other people. If you're enjoying what you're doing, a lot of the other things will fall into place.

For me personally, I tend to start putting down code as quickly as possible. It helps me think through the entire problem and identify areas of concern or opportunities early. It also allows people to see results and provides the chance to get feedback.


What are some technologies you are excited about that you are using today, or want to learn more about?
The technologies I'm currently using that excite me are CSS-in-JS on the client, Golang on the server, and building app architecture using "serverless" ideologies. Being able to style the project while being able to manage dependencies and data all in JavaScript has greatly improved by development speed. I didn't realize how painful it was to manage CSS and switching it and JS was until I returned to old projects that don't have CSS-in-JS. It's something I incorporate in all new apps. I love Go because it's very refreshing to have a typed and compiled language that's so easy to use. Serverless architecture is exciting because it has really challenged the way I think about applications and has made me a better developer. Also, by only needing to focus on the business logic and removing many of the boilerplate activities of managing a server, it speeds up development and let's you focus on the fun part.

The technology I'm really excited to continue to learn more about is Blockchain, Solidity, and Hyperledger development. It's fun to be working on something that's so new to everyone and collectively finding the best way to utilize the technology in a practical context. The blockchain space has also embraced the open source mentality maybe more than any other field, and I'm eager to see how things develop.


To learn how you can contribute Apps, Articles and Extensions to the Cosmic Community, contact us at jobs@cosmicjs.com.

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"key":"teaser","title":"Teaser","type":"html-textarea","children":null,"value":"

In this Cosmic Developer Spotlight, we sat down with Trey Huffine, a Software Engineer in San Francisco who currently works as a frontend engineer at Postmates. Trey is also the founder of BlockAce, gitconnected, and Radion. Check him out on Twitter or Medium, and enjoy the Q/A.

"},{"value":"033514b0-6a6d-11e8-abf3-a7a39a3e2f3e-max-nelson-492729-unsplash.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/033514b0-6a6d-11e8-abf3-a7a39a3e2f3e-max-nelson-492729-unsplash.jpg","imgix_url":"https://imgix.cosmicjs.com/033514b0-6a6d-11e8-abf3-a7a39a3e2f3e-max-nelson-492729-unsplash.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2018-06-07T13:04:10.582Z","created_by":"5716b504e9c686d006000073","created":"2018-06-07T13:04:10.582Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-06-26T19:31:12.515Z","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

In this Cosmic Developer Spotlight, we sat down with Trey Huffine, a Software Engineer in San Francisco who currently works as a frontend engineer at Postmates. Trey is also the founder of BlockAce, gitconnected, and Radion. Check him out on Twitter or Medium, and enjoy the Q/A.

","featured_image":{"url":"https://cdn.cosmicjs.com/033514b0-6a6d-11e8-abf3-a7a39a3e2f3e-max-nelson-492729-unsplash.jpg","imgix_url":"https://imgix.cosmicjs.com/033514b0-6a6d-11e8-abf3-a7a39a3e2f3e-max-nelson-492729-unsplash.jpg"}}},{"_id":"5b217f0a841d4022416fae08","order":63,"slug":"additional-user-permissions-now-available","title":"Additional User Permissions Now Available","content":"

You now have the ability to grant additional user permissions to team members working in your Bucket.  More granular control is useful if your editors need the ability to add other editors, if your developer needs access to Bucket billing, and other admin features.

When you navigate to Your Bucket Dashboard > Users, you will now notice options to add Additional Permissions for either the Developer or Editors role.


These new options include User management and access to Bucket Settings (including Billing).  This should give your team a little more control and help your team work that much better together.

If you have any questions about the new user permissions, you can join us on Slack and reach out to us on Twitter.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"key":"teaser","title":"Teaser","type":"html-textarea","children":null,"value":"

You now have the ability to grant additional user permissions to team members working in your Bucket.  More granular control is useful if your editors need the ability to add other editors, if your developer needs access to Bucket billing, and other admin features.

"},{"value":"c40265a0-6f48-11e8-8c57-8dc36c228878-mcLpPD36-2k.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/c40265a0-6f48-11e8-8c57-8dc36c228878-mcLpPD36-2k.jpg","imgix_url":"https://imgix.cosmicjs.com/c40265a0-6f48-11e8-8c57-8dc36c228878-mcLpPD36-2k.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2018-06-13T20:31:06.329Z","created_by":"5357ef811693be2118000001","created":"2018-06-13T20:31:06.329Z","status":"published","modified_at":"2020-08-10T14:04:22.001Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-06-13T21:15:10.717Z","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

You now have the ability to grant additional user permissions to team members working in your Bucket.  More granular control is useful if your editors need the ability to add other editors, if your developer needs access to Bucket billing, and other admin features.

","featured_image":{"url":"https://cdn.cosmicjs.com/c40265a0-6f48-11e8-8c57-8dc36c228878-mcLpPD36-2k.jpg","imgix_url":"https://imgix.cosmicjs.com/c40265a0-6f48-11e8-8c57-8dc36c228878-mcLpPD36-2k.jpg"}}},{"_id":"5b1141d51928be5073cc76fd","order":64,"slug":"developer-spotlight-john-allen-hopper","title":"Developer Spotlight: John Allen Hopper","content":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Dallas-based Software Developer John Allen Hopper. In addition to having a degree in Anthropology from the University of North Texas, John is a graduate of Coding Dojo and has been building applications both in advertising agencies and for freelance gigs for years. Follow John on GitHub, LinkedIn and Twitter, and enjoy the Q/A. 


How long have you been building software?
I began building websites and C++ programming at University of North Texas while attaining a Bachelor of Arts in anthropology. My degree actually encouraged me to pursue software development as a career because I understood programming and web applications as important tools for communication and cultural transformation. All in all, I have been coding HTML, CSS, and JavaScript for 8 years. I began to "stack" program while attending Coding Dojo in 2016, and have been building new applications ever since.

What is your preferred development stack?
I was taught on MEAN stack, Ruby on Rails, and Python. My preference leans towards JavaScript frameworks built on Express and Node. I am beginning to enjoy frameworks like React a lot more because of its focus on constructing UI components. I am always searching for new libraries, frameworks, and stacks, and have not really settled down on one just yet. To me the convenience of being a programmer is understanding coded language within any software application. If I had to identify my top three tools-of-the-trade, they would be 1.) Ubuntu, 2). JavaScript/Node/NPM, and 3). HTML5 w/ Bootstrap CSS.


What past projects are you most proud of and why?
Developing mexene.com for Johnson & Sekin was an insightful and challenging experience. It was my first ad-agency project where there was not a senior developer building the site in tandem. As a  junior front-end developer, I felt a great deal of responsibility. I studied carefully details within the original design, implemented code libraries for creating animations, and adhered to a strategic methodology. I was able to develop complex UI/UX components by way of pixel-perfect representation. This project certainly taught me the syncretic relationship between design and coding. The two forms of art should always be inclusive of each other.


Talk a little bit more about your process for building apps. Are they for external or internal audiences? 
I love building apps for education's sake and for improving technique. Building apps for the community is a new experience for me. Coding for any purpose always proves to be rewarding because there are important problems to solve and wonderful experiences to create. I have worked on projects for external audiences, such as my developer website and a photographer's website-- as well as projects within professional roles reliant on frameworks like Laravel, AngularJS, and MongoDB. Cosmic has improved productivity tenfold because it has compiled modern code libraries into a center where people can learn, build, and grow. Now, more time can be spent on things like design, content, and progress.


What are some technologies you are excited about that you are using today, or want to learn more about?
Zeit Now/Next brings reliable command-line deployments. The technology allowed me to update and deploy projects on the fly.  Bootstrap will always have a special place in my heart because of its aesthetic. I predict I will be researching and building\r\nnew applications with React, Redux, Ionic, GraphQL, Apollo, etc. These frameworks employ incredible responsiveness, methodical code structure, and seamless efficiency- allowing programmers freedom to build complex web applications through straightforward\r\nJS logic. 


To learn how you can contribute Apps, Articles and Extensions to the Cosmic Community, contact us at jobs@cosmicjs.com.

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"key":"teaser","title":"Teaser","type":"html-textarea","children":null,"value":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Dallas-based Software Developer John Allen Hopper. In addition to having a degree in Anthropology, John is a graduate of Coding Dojo and has been building applications in agency environments, freelance gigs and as a contributor for years. Follow John on GitHub, LinkedIn and Twitter, and enjoy the Q/A. 

"},{"value":"4085c8e0-67f8-11e8-ae3d-1fcb789439d0-alexandru-acea-582050-unsplash.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/4085c8e0-67f8-11e8-ae3d-1fcb789439d0-alexandru-acea-582050-unsplash.jpg","imgix_url":"https://imgix.cosmicjs.com/4085c8e0-67f8-11e8-ae3d-1fcb789439d0-alexandru-acea-582050-unsplash.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2018-06-01T12:53:41.640Z","created_by":"5716b504e9c686d006000073","created":"2018-06-01T12:53:41.640Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-06-04T21:25:18.239Z","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Dallas-based Software Developer John Allen Hopper. In addition to having a degree in Anthropology, John is a graduate of Coding Dojo and has been building applications in agency environments, freelance gigs and as a contributor for years. Follow John on GitHub, LinkedIn and Twitter, and enjoy the Q/A. 

","featured_image":{"url":"https://cdn.cosmicjs.com/4085c8e0-67f8-11e8-ae3d-1fcb789439d0-alexandru-acea-582050-unsplash.jpg","imgix_url":"https://imgix.cosmicjs.com/4085c8e0-67f8-11e8-ae3d-1fcb789439d0-alexandru-acea-582050-unsplash.jpg"}}},{"_id":"5b101dcda0381448a8bebaef","order":65,"slug":"developer-spotlight-joe-warren","title":"Developer Spotlight: Joe Warren","content":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Dallas-based Software Developer Joe Warren. Joe is a DevMountain graduate and currently works on a team building applications for an SMS technology platform based in Frisco, Texas. Joe is active in the local ReactJS Community, as pictured below during a recent presentation. Follow Joe on GitHub and Twitter, and enjoy the Q/A. 

React JS Dallas Meetup


How long have you been building software?
I have always been passionate about technology, but my official transition into a software engineering career began in 2016. After 6 years of work experience in a different field, I decided to shift my focus to web development. My two years of building software have included personal projects, bootcamp projects, open-source projects, and professional production experience.

What is your preferred development stack?
I’ve really enjoyed building projects using the SERN (SQL, Express, React, Node) stack. I’m currently working on a team that uses React, Redux, and Material-UI on the front end. Although I enjoy my current stack, Vue.js and Cosmic are two technologies that I’m interested in picking up.

What past projects are you most proud of and why?
My favorite non work-related project is my DevMountain group project, Fittr.us. Fittr.us was created out of our team's love for fitness and desire to put useful data and features all in one place. Fittr.us syncs with Fitbit to import and visualize data based on the user's goals. We also implemented a friend system along with a badging system. Timer and stopwatch features are both available too for real-time usage during workouts.

This was a fun and challenging project as we were forced to function as a single unit, plan together, use Git & GitHub effectively, and quickly figure out how to do new things.

What are some technologies you are excited about or want to learn more about?
I really look forward to exploring Cosmic’s methods for handling data and file management. At the moment, I’d like to focus most on building client applications and  Cosmic will allow me to do so with the tools I already love using. I was also really intrigued by Tony’s Spiro’s React VR Art Gallery demonstration at the ReactJS Meetup, so that\r\nis another area I’d like to eventually explore.


To learn how you can contribute Apps, Articles and Extensions to the Cosmic Community, contact us at jobs@cosmicjs.com.

","metafields":[{"children":null,"type":"object","title":"Author","key":"author","id":"wfWPjaQon4","value":"5768b27f163172890e00002e","object_type":"authors","object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"children":null,"type":"html-textarea","title":"Teaser","key":"teaser","id":"F8r4QPwgC2","value":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Dallas-based React Developer Joe Warren. Joe is a DevMountain graduate and currently interning with Call-em-All, an SMS technology platform based in Frisco, Texas. Follow Joe on GitHub and Twitter, and enjoy the Q/A. 

"},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"oJ0j78dAXv","value":"525275d0-64ee-11e8-8d8f-270b3131d367-william-iven-11250-unsplash.jpg","url":"https://cdn.cosmicjs.com/525275d0-64ee-11e8-8d8f-270b3131d367-william-iven-11250-unsplash.jpg","imgix_url":"https://imgix.cosmicjs.com/525275d0-64ee-11e8-8d8f-270b3131d367-william-iven-11250-unsplash.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2018-05-31T16:07:41.165Z","created_by":"5716b504e9c686d006000073","created":"2018-05-31T16:07:41.165Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-07-19T19:29:12.812Z","unpublish_at":null,"metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

In this installment of the Cosmic Developer Spotlight Series, we sat down with Dallas-based React Developer Joe Warren. Joe is a DevMountain graduate and currently interning with Call-em-All, an SMS technology platform based in Frisco, Texas. Follow Joe on GitHub and Twitter, and enjoy the Q/A. 

","featured_image":{"url":"https://cdn.cosmicjs.com/525275d0-64ee-11e8-8d8f-270b3131d367-william-iven-11250-unsplash.jpg","imgix_url":"https://imgix.cosmicjs.com/525275d0-64ee-11e8-8d8f-270b3131d367-william-iven-11250-unsplash.jpg"}}},{"_id":"5b0f00f1eba5cd26c721f728","order":68,"slug":"starter-apps-now-available","title":"Starter Apps Now Available 🔥","content":"

We have new starter apps available to help you get started building Cosmic-powered apps faster and easier.  We currently have three starter apps available for Node.js, React and Vue.js which you can install right from the comfort of the Cosmic CLI.  

To install a starter app open your command-line tool and run the following commands:

\">

Check out the codebase for each app:

Node.js Starter App
React Starter App
Vue.js Starter App


Enjoy these new starter apps to start your Cosmic-powered project faster and easier.  If you have any questions, reach out to us on Twitter and join the community on Slack.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"key":"teaser","title":"Teaser","type":"html-textarea","children":null,"value":"

We have new Starter Apps available to help you get started building Cosmic-powered apps faster and easier.

"},{"value":"aae1ab30-6444-11e8-b271-f1299268f696-node-react-vue.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/aae1ab30-6444-11e8-b271-f1299268f696-node-react-vue.jpg","imgix_url":"https://imgix.cosmicjs.com/aae1ab30-6444-11e8-b271-f1299268f696-node-react-vue.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2018-05-30T19:52:17.353Z","created_by":"5357ef811693be2118000001","created":"2018-05-30T19:52:17.353Z","status":"published","modified_at":"2020-08-10T16:04:56.383Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-05-31T13:27:59.817Z","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

We have new Starter Apps available to help you get started building Cosmic-powered apps faster and easier.

","featured_image":{"url":"https://cdn.cosmicjs.com/aae1ab30-6444-11e8-b271-f1299268f696-node-react-vue.jpg","imgix_url":"https://imgix.cosmicjs.com/aae1ab30-6444-11e8-b271-f1299268f696-node-react-vue.jpg"}}},{"_id":"5ae74a38ac3a613ec2ada543","order":69,"slug":"automatic-backups-now-available","title":"Automatic Backups Now Available 💾","content":"

We're excited to announce you can now add automatic daily backups to your Buckets via the Automatic Daily Backups Add-on.  To add daily Backups to your Buckets go to Your Bucket Dashboard > Settings > Backups.

How it works
1. Add the Automatic Daily Backups Add-on in Bucket Dashboard > Settings > Billing.
2. Every day at 12am UTC a Backup of your Bucket will be saved.
3. You will be able to manually save a Snapshot of your Bucket at any time as well.
4. All Snapshots are available for easy download and restore.


We hope you enjoy using the new Automatic Bucket Backups for peace of mind to know that every day your Bucket is saved as a Snapshot for easy backup and emergency restore.  Management of Snapshots is easy with naming, deleting and downloading available.

If you have any questions, please reach to us on Twitter and on Slack.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"key":"teaser","title":"Teaser","type":"html-textarea","children":null,"value":"

We are happy to announce that you can now add automatically backup your Buckets via the Automatic Daily Backups Add-on.  To add the peace of mind of daily Backups, go to Your Bucket Dashboard > Settings > Backups.

"},{"value":"498621a0-4c97-11e8-b319-b572aa0d188f-S7cyjr_3prc.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/498621a0-4c97-11e8-b319-b572aa0d188f-S7cyjr_3prc.jpg","imgix_url":"https://imgix.cosmicjs.com/498621a0-4c97-11e8-b319-b572aa0d188f-S7cyjr_3prc.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2018-04-30T16:54:16.796Z","created_by":"5357ef811693be2118000001","created":"2018-04-30T16:54:16.796Z","status":"published","modified_at":"2020-08-10T16:04:56.383Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-05-01T13:55:03.620Z","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

We are happy to announce that you can now add automatically backup your Buckets via the Automatic Daily Backups Add-on.  To add the peace of mind of daily Backups, go to Your Bucket Dashboard > Settings > Backups.

","featured_image":{"url":"https://cdn.cosmicjs.com/498621a0-4c97-11e8-b319-b572aa0d188f-S7cyjr_3prc.jpg","imgix_url":"https://imgix.cosmicjs.com/498621a0-4c97-11e8-b319-b572aa0d188f-S7cyjr_3prc.jpg"}}},{"_id":"5ad7644306f6203b9ec49a41","order":70,"slug":"cosmic-cli-apps-release","title":"Cosmic CLI Apps Release 🛠️🚀","content":"

We're excited to announce new features for the Cosmic CLI which are sure to speed up your workflow using Cosmic Apps.

To install the latest release, in your preferred command-line tool, run the following command:

npm i cosmic-cli -g

With this latest Cosmic CLI release (1.1.0) you can now:

🔍 Search Apps
You can search available Cosmic Apps with a simple command, which will give you a list of available apps that include a given keyword.

cosmic browse-apps -q graphql

Viewing apps in the browser is as easy as a command as well.

cosmic view-app portfolio-website


⬇️ Install and Run Apps Locally
With a simple command, you can now install an App to your Bucket and download it locally.  (CAREFUL! This will overwrite your entire Bucket contents with the App data) You will need to use the login, and use-bucket commands first.

cosmic login\r\ncosmic use-bucket your-bucket-slug\r\ncosmic install-app portfolio-website


Then run the app.  It will automatically be connected to your Bucket.

cosmic start-app


🚀 Deploy Apps
You can also deploy the App to the Cosmic App server by running:

cosmic deploy-app


You can also view the CLI steps on each App page by clicking the button "Install via CLI":


The Cosmic CLI is a great way to use all of the powerful features of the Cosmic API from the comfort of your command-line tool.  With this release, you now have some powerful capabilities to demo and deploy Cosmic Apps for faster development and collaboration.

If you have any questions about the Cosmic CLI, join us on Slack and reach out to us on Twitter.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"key":"teaser","title":"Teaser","type":"html-textarea","children":null,"value":"

The Cosmic CLI is a great way to use all of the powerful features of the Cosmic API from the comfort of your command-line tool.  With this release, you now have some powerful capabilities to demo and deploy Cosmic Apps for faster development and collaboration.

"},{"value":"d5557580-2610-11e8-ab11-0fc63395db5c-cosmic-cli.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/d5557580-2610-11e8-ab11-0fc63395db5c-cosmic-cli.jpg","imgix_url":"https://imgix.cosmicjs.com/d5557580-2610-11e8-ab11-0fc63395db5c-cosmic-cli.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2018-04-18T15:29:07.054Z","created_by":"5357ef811693be2118000001","created":"2018-04-18T15:29:07.055Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-04-18T16:20:04.364Z","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

The Cosmic CLI is a great way to use all of the powerful features of the Cosmic API from the comfort of your command-line tool.  With this release, you now have some powerful capabilities to demo and deploy Cosmic Apps for faster development and collaboration.

","featured_image":{"url":"https://cdn.cosmicjs.com/d5557580-2610-11e8-ab11-0fc63395db5c-cosmic-cli.jpg","imgix_url":"https://imgix.cosmicjs.com/d5557580-2610-11e8-ab11-0fc63395db5c-cosmic-cli.jpg"}}},{"_id":"5ad35d2769c6bb4292851ff3","order":71,"slug":"developer-spotlight-aaron-vail","title":"Developer Spotlight: Aaron Vail","content":"

In this latest installment of the Cosmic Developer Spotlight Series, we sat down with Aaron Vail, a Google Analytics Implementation Analyst and Software Developer at Main Event Entertainment's corporate headquarters in Plano, Texas. Check him out on Twitter and LinkedIn, and enjoy the Q/A.


Cosmic: How long have you been building software?
Aaron Vail: I was first introduced to web development when I was 13. I received a book titled Web Design for Teens that tought the basics of HTML and CSS and how they interact with each other. I really haven't stopped learning since. As my skills grew and and my abilities got sharper I began developing websites for my friends and family. This turned into several freelance projects throughout highschool. Professionally I've been building web experiences for 5 years.


What is your preferred development stack?
I love exploring new development stacks and expanding my knowledge but my main "go to" recently has been Vue and Nuxt. Though I still consider myself a novice after working with it for about 3 months, for a lot of small projects I prefer JAMstack which is a mix of JavaScript, Markup, and an API for delivering content and functionality. This is why platforms like Cosmic are very appealing to me.


What past projects are you most proud of and why?
I don't really have any specific project I'm most proud of. Mostly due to the fact that past projects are usually limited to what I knew at the time. For example when I see\r\na screenshot of some of the first websites I built I cringe. A lot of the professional projects I've worked on are for internal organizations so I do not have the liberty of speaking about them.


Talk a little bit more about your process for building apps. Are they for external or internal audiences?
At the moment most of my work with Cosmic has been for personal projects as I learn the platform and the different methods\r\nof implementation. However, from my experience in web development it's very apparent that Cosmic has real potential to help speed up project workflows and content management tenfold. I especially like the performance of hosting images because of\r\nthe imgix implementation with Cosmic. I can actually see companies being built off of this API to more broadly serve the B2B side of things as well as the average consumer.


What are some technologies you are excited about that you are using today, or want to learn more about?
I'm really excited about VueJS and the direction it's going, the community behind it is awesome and seeing the different\r\nthings people are building with the framework. It's a lot of fun to work with and explore the different use cases that are possible. 

In my time using Cosmic it's been really interesting seeing how well it interacts and works with different front-end frameworks such as Vue. I love working with language agnostic APIs because it makes sense if later during the evolution of applications\r\nthey occasionally change frameworks, and if that does happen the APIs can still work meaning less technical debt in the long run.

To learn how you can contribute Apps, Articles and Extensions to the Cosmic Community, contact us at build@cosmicjs.com.

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"key":"teaser","title":"Teaser","type":"html-textarea","children":null,"value":"

In this latest installment of the Cosmic Developer Spotlight Series, we sat down with Aaron Vail, a Google Analytics Implementation Analyst and Software Developer at Main Event Entertainment's corporate headquarters in Plano, Texas. Check him out on Twitter and LinkedIn, and enjoy the Q/A.

"},{"value":"a25d01f0-40b6-11e8-a16d-95942e947e38-goran-ivos-422398-unsplash.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/a25d01f0-40b6-11e8-a16d-95942e947e38-goran-ivos-422398-unsplash.jpg","imgix_url":"https://imgix.cosmicjs.com/a25d01f0-40b6-11e8-a16d-95942e947e38-goran-ivos-422398-unsplash.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2018-04-15T14:09:43.778Z","created_by":"5716b504e9c686d006000073","created":"2018-04-15T14:09:43.778Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-04-16T14:23:36.141Z","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

In this latest installment of the Cosmic Developer Spotlight Series, we sat down with Aaron Vail, a Google Analytics Implementation Analyst and Software Developer at Main Event Entertainment's corporate headquarters in Plano, Texas. Check him out on Twitter and LinkedIn, and enjoy the Q/A.

","featured_image":{"url":"https://cdn.cosmicjs.com/a25d01f0-40b6-11e8-a16d-95942e947e38-goran-ivos-422398-unsplash.jpg","imgix_url":"https://imgix.cosmicjs.com/a25d01f0-40b6-11e8-a16d-95942e947e38-goran-ivos-422398-unsplash.jpg"}}},{"_id":"5abab131c3814526f15596d8","order":72,"slug":"new-website-boilerplates","title":"New Website Boilerplates 🛠️🚀","content":"

Website boilerplates are a great way to jump-start your new development project. We're excited to announce the addition of our Next.js and Nuxt.js Website Boilerplates which connect to your Cosmic Bucket for easy content management.  Check them out below:

Click here to view the Next.js Boilerplate
Click here to view the Nuxt.js Boilerplate

React and Vue are two of the most beloved JavaScript frameworks. And Next.js and Nuxt.js add to the value these frameworks give you.  They provide some great out-of-the-box features including built-in routing, server-side rendering and a killer developer experience.

We also also offer a Node.js website boilerplate for those that would rather stay server-side:
Click here to view the Node.js Website Boilerplate

Reach out to us on Twitter and build with us on Slack.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"key":"teaser","title":"Teaser","type":"html-textarea","children":null,"value":"

We're happy to offer website boilerplates for both of these powerful frameworks that give you out-of-the-box connection to your Cosmic Bucket.

"},{"value":"9d4bb260-3201-11e8-a2ad-a381da7b0841-next-nuxt-cosmic.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/9d4bb260-3201-11e8-a2ad-a381da7b0841-next-nuxt-cosmic.jpg","imgix_url":"https://imgix.cosmicjs.com/9d4bb260-3201-11e8-a2ad-a381da7b0841-next-nuxt-cosmic.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2018-03-27T21:01:37.373Z","created_by":"5357ef811693be2118000001","created":"2018-03-27T21:01:37.373Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2018-03-28T13:54:16.275Z","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

We're happy to offer website boilerplates for both of these powerful frameworks that give you out-of-the-box connection to your Cosmic Bucket.

","featured_image":{"url":"https://cdn.cosmicjs.com/9d4bb260-3201-11e8-a2ad-a381da7b0841-next-nuxt-cosmic.jpg","imgix_url":"https://imgix.cosmicjs.com/9d4bb260-3201-11e8-a2ad-a381da7b0841-next-nuxt-cosmic.jpg"}}},{"_id":"5ab5356056cc597b400d64ca","order":73,"slug":"quick-add-object-relationships-now-available","title":"Quick Add Object Relationships Now Available","content":"



You can now quickly add Objects to your Bucket directly from Object Relationship Metafields.  We're always looking for ways to speed up the work flow for building apps and managing content.  And this new feature is sure to\r\nbe a time-saver for those of you who use Object Relationship Metafields. 

The gif below shows an example of a Book Store Bucket.  Now you can add a new Book directly to an Author Object from the "Quick Add" button on the Relationship Metafield.  This saves you quite a few clicks and makes adding new Object Relationships super fast and easy!



Here are the steps to use the Quick Add feature:

1. Add a new (or view existing) Object Relationship Metafield to any Object.
2. Click the "Quick Add" button on the Metafield.
3. Add your new Object via the modal form.
4. It will automagically add the Object to your Bucket and select the value in the Metafield.
(4.5. Add more Objects if you like!)
5. Save your Main Object.

We're always on the lookout for new features that will benefit our community of builders.  If you have any questions, comments or suggestions, join our Slack channel and reach out to us on Twitter.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"key":"teaser","title":"Teaser","type":"html-textarea","children":null,"value":"

We are always looking for ways to speed up the work flow for building apps and managing content.  And this new feature is sure to be a time-saver for many who use Object Relationship Metafields.  

"},{"value":"d8f292c0-2ebe-11e8-ac83-91ff76a973a4-lance-anderson-256077-unsplash.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/d8f292c0-2ebe-11e8-ac83-91ff76a973a4-lance-anderson-256077-unsplash.jpg","imgix_url":"https://imgix.cosmicjs.com/d8f292c0-2ebe-11e8-ac83-91ff76a973a4-lance-anderson-256077-unsplash.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2018-03-23T17:12:00.053Z","created_by":"5357ef811693be2118000001","created":"2018-03-23T17:12:00.053Z","status":"published","modified_at":"2020-08-10T16:04:56.383Z","modified_by":"5357ef811693be2118000001","publish_at":null,"metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

We are always looking for ways to speed up the work flow for building apps and managing content.  And this new feature is sure to be a time-saver for many who use Object Relationship Metafields.  

","featured_image":{"url":"https://cdn.cosmicjs.com/d8f292c0-2ebe-11e8-ac83-91ff76a973a4-lance-anderson-256077-unsplash.jpg","imgix_url":"https://imgix.cosmicjs.com/d8f292c0-2ebe-11e8-ac83-91ff76a973a4-lance-anderson-256077-unsplash.jpg"}}},{"_id":"5aa6a6c7c299803f1ade2f79","order":74,"slug":"introducing-the-cosmic-cli","title":"Introducing the Cosmic CLI 🎉","content":"

After much development and preparation, we are excited to announce the release of the official Cosmic CLI.

The Cosmic CLI puts you in the cockpit of your Cosmic Dashboard, giving you access to the powerful features of the Cosmic API, all from the comfort of your command line interface.

Available commands allow you to:

To learn more and for a list of all available commands, check out the GitHub repo.

We know you're going to love the new Cosmic CLI.  This is another way that we hope to empower you and your team to build modern apps faster and easier.  If you have any comments or suggestions join our Slack community and reach out to us on Twitter.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"key":"teaser","title":"Teaser","type":"html-textarea","children":null,"value":"

The Cosmic CLI puts you in the cockpit of your Cosmic Dashboard, giving you access to the powerful features of the Cosmic API, all from the comfort of your command line interface.

"},{"value":"d5557580-2610-11e8-ab11-0fc63395db5c-cosmic-cli.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/d5557580-2610-11e8-ab11-0fc63395db5c-cosmic-cli.jpg","imgix_url":"https://imgix.cosmicjs.com/d5557580-2610-11e8-ab11-0fc63395db5c-cosmic-cli.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2018-03-13T16:11:51.846Z","created_by":"5357ef811693be2118000001","created":"2018-03-13T16:11:51.846Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","publish_at":null,"metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

The Cosmic CLI puts you in the cockpit of your Cosmic Dashboard, giving you access to the powerful features of the Cosmic API, all from the comfort of your command line interface.

","featured_image":{"url":"https://cdn.cosmicjs.com/d5557580-2610-11e8-ab11-0fc63395db5c-cosmic-cli.jpg","imgix_url":"https://imgix.cosmicjs.com/d5557580-2610-11e8-ab11-0fc63395db5c-cosmic-cli.jpg"}}},{"_id":"5a9d6ff9e74dca19e0ebfd1f","order":75,"slug":"new-dashboard-redesign","title":"New Dashboard Redesign","content":"

We're excited to announce a big update to the Cosmic Dashboard.  It's our mission to help you build modern apps faster and our new Dashboard redesign is\r\nsure to make your app development experience faster, more efficient and more enjoyable.

To check out the changes for yourself, log in to your Cosmic account.  Here are some of the improvements we've made:

Light Theme Carried Over
The light theme is now consistent across public and private Dashboard pages.



Tight and Centered
You will notice that all Dashboard pages are now contained and centered in the screen to provide greater efficiency of motion (no more long mouse scrolls on larger screens!)



Thank you to all of our community members for feedback and help with the redesign.  If you have any questions or comments, we'd love to hear from you.  Connect with us on Slack or shout to us on Twitter.


Photo by Scott Webb on Unsplash

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"key":"teaser","title":"Teaser","type":"html-textarea","children":null,"value":"

We're excited to push a big redesign to the Cosmic Dashboard which you should immediately notice after logging in.

"},{"value":"139c1e80-2093-11e8-a436-27f675d7ccc4-scott-webb-272211-unsplash.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/139c1e80-2093-11e8-a436-27f675d7ccc4-scott-webb-272211-unsplash.jpg","imgix_url":"https://imgix.cosmicjs.com/139c1e80-2093-11e8-a436-27f675d7ccc4-scott-webb-272211-unsplash.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2018-03-06T16:27:37.421Z","created_by":"5357ef811693be2118000001","created":"2018-03-06T16:27:37.421Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","publish_at":null,"metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

We're excited to push a big redesign to the Cosmic Dashboard which you should immediately notice after logging in.

","featured_image":{"url":"https://cdn.cosmicjs.com/139c1e80-2093-11e8-a436-27f675d7ccc4-scott-webb-272211-unsplash.jpg","imgix_url":"https://imgix.cosmicjs.com/139c1e80-2093-11e8-a436-27f675d7ccc4-scott-webb-272211-unsplash.jpg"}}},{"_id":"5a70b7383432953f341fb17a","order":76,"slug":"new-apps-page","title":"New Apps Page ","content":"

Thanks to the Cosmic Community, we have some great Cosmic-powered apps available for easy install.  Pre-built applications offer teams the ability to get started building apps even faster and we are excited to announce a big update to our Apps page.

Along with an updated design and layout, the Apps page now includes a super simple search at the top of the page.   Simply type your query into the search bar, either by programming language, use case or keyword.



This is another way that we are helping you build apps faster and easier with Cosmic. If you have any questions or suggestions, please reach out to us on Twitterand join the Cosmic Community on Slack.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"key":"teaser","title":"Teaser","type":"html-textarea","children":null,"value":"

We are excited to announce a big update to our Apps page.

"},{"value":"436fb5f0-05ee-11e8-977e-11d8a6308b6f-imac-apple-mockup-app-38544.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/436fb5f0-05ee-11e8-977e-11d8a6308b6f-imac-apple-mockup-app-38544.jpg","imgix_url":"https://imgix.cosmicjs.com/436fb5f0-05ee-11e8-977e-11d8a6308b6f-imac-apple-mockup-app-38544.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2018-01-30T18:19:36.679Z","created_by":"5716b504e9c686d006000073","created":"2018-01-30T18:19:36.679Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

We are excited to announce a big update to our Apps page.

","featured_image":{"url":"https://cdn.cosmicjs.com/436fb5f0-05ee-11e8-977e-11d8a6308b6f-imac-apple-mockup-app-38544.jpg","imgix_url":"https://imgix.cosmicjs.com/436fb5f0-05ee-11e8-977e-11d8a6308b6f-imac-apple-mockup-app-38544.jpg"}}},{"_id":"5a68a99fbbdcac08491ab778","order":77,"slug":"dev-spotlight-kevin-grossnicklaus","title":"Dev Spotlight: Kevin Grossnicklaus","content":"


In this Cosmic Developer Spotlight, we sat down with Kevin Grossnicklaus, Principal of ArchitectNow, a St. Louis-based software development firm that specializes in helping customers design, build, and launch rich web and mobile applications across a variety of industries.  Kevin and his team recently launched a new client project called VendorSurf built using Cosmic. Check them out on Twitter or LinkedIn, and enjoy the Q/A.


How long have you been building software?
I got my start as a 12-year-old in central Nebraska back in the mid-80’s.  My parents got me an Apple IIgs that came with no software and a book called “A Touch of Applesoft Basic”.  If I wanted the computer to do anything I was forced to tell it what and how.  To be fair, I did start buying packaged software, but I also dove headfirst into teaching myself to code (back before it was “cool”).  Oddly enough I just recently purchased another Apple IIgs as I had sold my original when I was 19 so that I could buy a guitar. I also dug up all my old floppy disks (which I had kept in storage) and was able to get access to all my original programs. With everything we do today it was a fascinating process to be able to see the original programs I had ever written. I wrote a blog post about the process which you may find interesting.  You can find it here.


What is your preferred development stack?
At ArchitectNow our tech stack and areas of focus have changed dramatically over the course of the last 10 years.   The industry drives a lot of that and the capabilities of our team drives some of it. Right now, we are heavily into Angular, TypeScript, ASP.NET Core/C#, Xamarin, MongoDB, all things Azure.  The great thing about a smaller development shop like ours is that we get the opportunity to work with a ton of languages and platforms.  We also get to utilize 3rd party components and APIs (such as Cosmic) in a number of scenarios.  This gives us the ability to pick and choose the best platform and tools for a given project.  We’ve hit a lot of homeruns in our choice of technologies and 3rd party tools but we’ve also used some we wouldn’t recommend.  A key benefit we bring to our customers is the knowledge of what we’ve found that “works” and what doesn’t.


What past projects are you most proud of and why?
We have been very fortunate to work for a large number of great customers on some very cutting-edge projects.   Our customers range from Fortune 500 enterprise customers (where our apps may be used either internally or as part of their external facing offerings) to startups launching either consumer facing or business-to-business applications. 

The projects I personally enjoy the most are those that leverage new technology in a creative and clever way that isn’t simply data-in/data-out.   It’s also great fun when we get the opportunity to take full advantage of mobile devices and integrate with 3rd party devices or leverage device specific functionality such as scanning or GPS in a creative way.


Talk a little bit more about your process for building apps - who’s using them? What purpose do they serve?
As mentioned above we are very flexible when it comes to the platforms we utilize to build great software.   Customers do not come to us for the “cookie-cutter” WordPress site or standard marketing website.   We are engaged when people need a highly scalable and robust architecture and a rich user experience.   Sometimes that’s for internal enterprise apps and, in other scenarios, that is for rich consumer facing apps or websites.   Our team is very hands on with customers in terms of managing the Agile development process, recommending alternative solutions to complex problems, and assisting them in identifying creative ways to leverage technologies we may be aware of to better build or grow their products.  


What are some technologies you are excited about that you are using today, or want to learn more about?
I have focused on building a team of individuals who love to learn new technologies.   You would be amazed at how much time some of the individual ArchitectNow team members spend in their off-hours simply focused on learning.  I have developers who spend nearly every night and weekend focused on getting through online courses on new technologies just to get better at what they do.   These are people passionate about what they do and who are excited about what technologies are available today.

In terms of the things we are growing into at ArchitectNow that lean towards the cutting edge of technology I would say that the Internet of Things (IoT) is very exciting.  We have some customers really looking at creative ways to leverage hardware, software, and the ubiquitous computing power and scale of the Cloud to grow their capabilities.  Those are really fun things to think about and work on.  

That said, for me personally, I’m excited about a lot of the things I see in the game space.  I’m a big fan of Unity lately and am working with some of my friends and coworkers to get a few Unity/C# games out in the app stores.   When I was younger I wanted to be a game developer.  I even went to college to achieve that goal.   Nowadays it’s more of a hobby but one that I’m focused pretty heavily on recently.   There isn’t much difference between the process of designing and building a large Angular/MongoDB application for a startup and the design and implementation of a game in Unity.   It’s the same skills with a slightly different audience.  

Learn more about ArchitectNow and its VendorSurf project by reading the Case Study:


\">

To learn how you can contribute Apps, Articles and Extensions to the Cosmic Community, contact us at build@cosmicjs.com.

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"key":"teaser","title":"Teaser","type":"html-textarea","children":null,"value":"

In this Cosmic Developer Spotlight, we sat down with Kevin Grossnicklaus, Principal of ArchitectNow, a St. Louis-based software development firm that specializes in helping customers design, build, and launch rich web and mobile applications across a variety of industries.

"},{"value":"e98be280-0696-11e8-8c83-91b31c84f95d-architect-now.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e98be280-0696-11e8-8c83-91b31c84f95d-architect-now.jpg","imgix_url":"https://imgix.cosmicjs.com/e98be280-0696-11e8-8c83-91b31c84f95d-architect-now.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2018-01-24T15:43:27.495Z","created_by":"5716b504e9c686d006000073","created":"2018-01-24T15:43:27.495Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","publish_at":null,"metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

In this Cosmic Developer Spotlight, we sat down with Kevin Grossnicklaus, Principal of ArchitectNow, a St. Louis-based software development firm that specializes in helping customers design, build, and launch rich web and mobile applications across a variety of industries.

","featured_image":{"url":"https://cdn.cosmicjs.com/e98be280-0696-11e8-8c83-91b31c84f95d-architect-now.jpg","imgix_url":"https://imgix.cosmicjs.com/e98be280-0696-11e8-8c83-91b31c84f95d-architect-now.jpg"}}},{"_id":"5a6748a9c834da78ab7e9558","order":78,"slug":"developer-spotlight-brian-ray","title":"Developer Spotlight: Brian Ray","content":"

In this Cosmic Developer Spotlight, we sat down with Brian Ray, an Austin-based web developer who focuses on building applications on modern stacks with his agency Nomad JS.  Check him out on Twitter or GitHub, and enjoy the Q/A.


How long have you been building software?
As a kid, I was very interested in Gaming PCs,  RAM, Graphics Card, CPU processing speeds and Computer Games. At my last sales role, we built web scrapers and always used the latest marketing automation software. After a trip around Southeast Asia, I decided to become a web developer full time.  Over the past two years, I’ve built various web applications from start ups to hackathon projects and developed a passion for web development.  Most recently, I launched an agency, Nomad JS, focused on JavaScript web development and freelancing.  

What is your preferred development stack?
My preferred stack is JavaScript, Node and React. On the backend:  MongoDB or CosmicJS.

What past projects are you most proud of and why?
Cosmic React Blog: I decided to build a blogging platform and underestimated the time and effort required. You have to build a text editor,  database, authentication system, etc. and it’s a lot of work for something so simple. I abandoned my project, threw it on GitHub, and found Cosmic. You’ve heard it before, don’t reinvent the wheel. Cosmic has an authentication system, JSON Buckets, an awesome text editor, so you don’t have to waste development building your own CMS. Cosmic & React Blog allowed me to spend more time on design and front end development. The support and appreciation I’ve received from Carson, Tony, and the Cosmic community really makes Cosmic React Blog stand out.

RooferX: My friend, Kyle, and I met as Commercial Roofing Salesmen and a few years later decided to launch a web app in the industry. We had a rough idea of where we wanted to go with the RooferX but lacked software experience. Looking back at our old code, it was an awesome learning experience.  RooferX never really took off, but we had a great time trying.

Talk a little bit more about your process for building apps. Are they for clients or internal audiences? 
It’s roughly a 50/50 split between client and internal audiences. For personal apps, I try to find a repetitive task and automate it. From a web development standpoint, I like to build out the apps architecture, functionality, and then add design. 

Cosmic speeds up my development time by taking care of Databases and REST APIs, so I can spend more time in the browser. As we learned with Cosmic React Blog, you can save yourself a lot time not reinventing the wheel with the every new project!

What are some technologies you are excited about that you are using today, or want to learn more about?
Vue and Elm would be at the top of my Front End Developer list for 2018.  

To learn how you can contribute Apps, Articles and Extensions to the Cosmic Community, contact us at support@cosmicjs.com.

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"key":"teaser","title":"Teaser","type":"html-textarea","children":null,"value":"

In this Cosmic Developer Spotlight, we sat down with Brian Ray, an Austin-based web developer who focuses on building applications on modern stacks with his agency Nomad JS.

"},{"value":"ca71cbd0-004c-11e8-9f74-c182a209ec69-Screen Shot 2018-01-23 at 8.50.18 AM.png","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/ca71cbd0-004c-11e8-9f74-c182a209ec69-Screen Shot 2018-01-23 at 8.50.18 AM.png","imgix_url":"https://imgix.cosmicjs.com/ca71cbd0-004c-11e8-9f74-c182a209ec69-Screen Shot 2018-01-23 at 8.50.18 AM.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2018-01-23T14:37:29.013Z","created_by":"5716b504e9c686d006000073","created":"2018-01-23T14:37:29.013Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

In this Cosmic Developer Spotlight, we sat down with Brian Ray, an Austin-based web developer who focuses on building applications on modern stacks with his agency Nomad JS.

","featured_image":{"url":"https://cdn.cosmicjs.com/ca71cbd0-004c-11e8-9f74-c182a209ec69-Screen Shot 2018-01-23 at 8.50.18 AM.png","imgix_url":"https://imgix.cosmicjs.com/ca71cbd0-004c-11e8-9f74-c182a209ec69-Screen Shot 2018-01-23 at 8.50.18 AM.png"}}},{"_id":"5a6244968512291e99511912","order":79,"slug":"code-snippets-now-available","title":"Code Snippets Now Available","content":"

Earlier this week we released our new NPM module and REST API docs and the response has been amazing. 😄 

To make it even easier to get familiar with the new NPM module API, and faster to add dynamic content to your apps, you now have code snippets available in your Dashboard.

To find the snippets, simply click the code icon on the API endpoint and choose between JavaScript or cURL (more languages coming soon!).  The code works as is!

This is another way that we are helping you build apps faster and easier with Cosmic. If you have any questions or suggestions, please reach out to us on Twitterand join the Cosmic Community on Slack.

Photo by Dmitri Popov on Unsplash

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"key":"teaser","title":"Teaser","type":"html-textarea","children":null,"value":"

Earlier this week we released our new NPM module and REST API docs and the response has been amazing\n😄 

"},{"value":"2fd0f2c0-fd60-11e7-8b84-c965fbec65c1-dmitri-popov-69419.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/2fd0f2c0-fd60-11e7-8b84-c965fbec65c1-dmitri-popov-69419.jpg","imgix_url":"https://imgix.cosmicjs.com/2fd0f2c0-fd60-11e7-8b84-c965fbec65c1-dmitri-popov-69419.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2018-01-19T19:18:46.868Z","created_by":"5357ef811693be2118000001","created":"2018-01-19T19:18:46.868Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","publish_at":null,"metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

Earlier this week we released our new NPM module and REST API docs and the response has been amazing\n😄 

","featured_image":{"url":"https://cdn.cosmicjs.com/2fd0f2c0-fd60-11e7-8b84-c965fbec65c1-dmitri-popov-69419.jpg","imgix_url":"https://imgix.cosmicjs.com/2fd0f2c0-fd60-11e7-8b84-c965fbec65c1-dmitri-popov-69419.jpg"}}},{"_id":"5a5ce592a71775802b00003c","order":80,"slug":"new-rest-api-docs-and-npm-module","title":"New REST API Docs and NPM Module 🎉","content":"

We are excited to announce that we have completely rebuilt both our REST API docs and NPM module from the ground up.   This comes after weeks of development and gathering feedback from the Cosmic Community.  Thank you to everyone who helped us with this big release!


New REST API Docs

Our new REST API docs now live at https://cosmicjs.github.io/rest-api-docs.  The new design makes it a lot easier to find what you need, allowing you to toggle between bash and JavaScript code (more languages coming soon!).  We've also added more detail for powerful features such as Metafields, Webhooks and Extensions.


New NPM Module

Our new NPM module can be found at \r\nhttps://www.npmjs.com/package/cosmicjs.  It has been bumped to version 3.0 and features new Promise-based methods:

Authenticate

\">

Add Bucket

\">

Add Object

\">

Get Objects

\">

Add Media

\">

View more methods available with the updated NPM module.

It is our goal to help teams build apps faster, and with these updates, we are happy to provide teams even more powerful tools for an even better developer experience.

Photo by Carl Cerstrand on Unsplash

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"key":"teaser","title":"Teaser","type":"html-textarea","children":null,"value":"

After many weeks of development we are excited to announce a couple of big updates.  We have completely rebuilt both our REST API docs and NPM module.

"},{"value":"0bd63910-fb9f-11e7-a07e-698b15f627c9-carl-cerstrand-132373.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/0bd63910-fb9f-11e7-a07e-698b15f627c9-carl-cerstrand-132373.jpg","imgix_url":"https://imgix.cosmicjs.com/0bd63910-fb9f-11e7-a07e-698b15f627c9-carl-cerstrand-132373.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2018-01-17T17:32:02.451Z","created_by":"5357ef811693be2118000001","created":"2018-01-17T17:32:02.451Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","publish_at":null,"metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

After many weeks of development we are excited to announce a couple of big updates.  We have completely rebuilt both our REST API docs and NPM module.

","featured_image":{"url":"https://cdn.cosmicjs.com/0bd63910-fb9f-11e7-a07e-698b15f627c9-carl-cerstrand-132373.jpg","imgix_url":"https://imgix.cosmicjs.com/0bd63910-fb9f-11e7-a07e-698b15f627c9-carl-cerstrand-132373.jpg"}}},{"_id":"5a4d4d18b06da69d1d00009e","order":81,"slug":"single-sign-on-now-available-for-larger-teams","title":"Single Sign-On Now Available for Larger Teams","content":"

We're on a mission to help teams of all sizes collaborate to build apps faster and easier.  In some cases, incorporating a new solution into a workflow for larger teams involves challenges for user onboarding and management.

To help alleviate these user management challenges, we're excited to introduce Single Sign On.


How it works:

1. Contact our sales department and let them know you are interested in using Cosmic SSO for your organization.
2. We will get you set up with Cosmic login using your IdP.
3. All of the employees in your organization that have an account with your IdP will now be able to login using the SSO Login option on the login page.
4. You can manage user access to Cosmic via your IdP.


We support OneLogin, Okta and other popular Identity Providers using the SAML 2.0 protocol.  This is another way that we are making Cosmic the best solution to build apps faster for small to large organizations.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"key":"teaser","title":"Teaser","type":"html-textarea","children":null,"value":"

We're on a mission to help teams of all sizes collaborate to build apps faster and easier.  In some cases incorporating a new solution into a workflow for larger team involves challenges for user onboarding and management.

"},{"value":"75b1c380-f498-11e7-b948-afa0abf2fc70-cosmicjs-sso.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/75b1c380-f498-11e7-b948-afa0abf2fc70-cosmicjs-sso.jpg","imgix_url":"https://imgix.cosmicjs.com/75b1c380-f498-11e7-b948-afa0abf2fc70-cosmicjs-sso.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2018-01-09T21:37:28.594Z","created_by":"5357ef811693be2118000001","created":"2018-01-09T21:37:28.594Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","publish_at":null,"metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

We're on a mission to help teams of all sizes collaborate to build apps faster and easier.  In some cases incorporating a new solution into a workflow for larger team involves challenges for user onboarding and management.

","featured_image":{"url":"https://cdn.cosmicjs.com/75b1c380-f498-11e7-b948-afa0abf2fc70-cosmicjs-sso.jpg","imgix_url":"https://imgix.cosmicjs.com/75b1c380-f498-11e7-b948-afa0abf2fc70-cosmicjs-sso.jpg"}}},{"_id":"5a427ba998e25f1257000116","order":82,"slug":"a-cosmic-year-in-review","title":"A Cosmic Year in Review","content":"

As 2017 comes to a close and we look forward to the new year, I wanted to share my gratitude and excitement for what we've accomplished at Cosmic over the past year and what's to come in 2018.

Cosmic is built on a bold idea: API-driven micro service applications will power our future digital world.  And Cosmic is the place where your team comes together to build these applications faster and easier.  To continue to be your team's\r\napplication management dashboard, we are remaining focused on a few key priorities:


1. Core Platform Experience

See how we made the core platform 10x faster

Our goal is to make the developer and content editor experience faster, easier and more enjoyable.  The content management dashboard and CMS API are constantly being updated with updates and new features to help your team build apps faster. 

In 2017 we shipped new fixes and features on average 5 times a day.  We also improved API response times by a factor of 10.  In 2018 we have an ambitious roadmap that includes updated documentation, releasing a new API version, more developer SDKs for different programming languages, and offerings for our larger customers such as Single Sign-On and on-premise deployment.

2. Education

Read about how Life is Good used a Cosmic App to launch a campaign for gratitude

Education is an important part of our company and I believe a big part of why we are in this industry.  As an industry, we are excited about learning the best ways to build cool new products.  With this in mind, we have new applications being added to our Apps page on a regular basis to show you how to build apps with the Cosmic platform.  

In 2017 we saw over 30 apps built and we released the option to offer Premium Apps for purchase and developer revenue share. In 2018 we plan to continue to push for education for common use cases as well as exploring how Cosmic can be your control center for new areas of tech including VR, blockchain and AI.

3. Community

Join our growing community

Our community is growing fast and is more active than ever.  Community members from all over the world are helping to educate new developers on the best ways to build modern apps using Cosmic.

In 2017 we released profile pages (see mine here) to help developers showcase their work and connect with others interested in working with them on development projects.\r\n In 2018 we plan to continue to engage our community to build Apps, Extensions and write tutorials to showcase their skills building modern apps using the latest technology.


It is our hope that in the new year, more teams use Cosmic to build faster, more light-weight modern applications.  We started Cosmic to solve our own problem with application development and it brings us joy to see more and more teams use Cosmic as their application development solution.  We are grateful to you, our customers and hope you have a very happy new year.

Cheers,
Tony Spiro and the Cosmic team.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"key":"teaser","title":"Teaser","type":"html-textarea","children":null,"value":"

As 2017 comes to a close and we look forward to a new year, I wanted to share my gratitude and excitement for what we've accomplished at Cosmic over the past year and what's to come in 2018.

"},{"value":"949adcb0-ea5b-11e7-b217-d72143811043-nordwood-themes-467442.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/949adcb0-ea5b-11e7-b217-d72143811043-nordwood-themes-467442.jpg","imgix_url":"https://imgix.cosmicjs.com/949adcb0-ea5b-11e7-b217-d72143811043-nordwood-themes-467442.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-12-28T16:41:13.563Z","created_by":"5357ef811693be2118000001","created":"2017-12-28T16:41:13.563Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","publish_at":null,"metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

As 2017 comes to a close and we look forward to a new year, I wanted to share my gratitude and excitement for what we've accomplished at Cosmic over the past year and what's to come in 2018.

","featured_image":{"url":"https://cdn.cosmicjs.com/949adcb0-ea5b-11e7-b217-d72143811043-nordwood-themes-467442.jpg","imgix_url":"https://imgix.cosmicjs.com/949adcb0-ea5b-11e7-b217-d72143811043-nordwood-themes-467442.jpg"}}},{"_id":"5a2461b3f914d5981d000079","order":83,"slug":"developer-spotlight-devin-otway","title":"Developer Spotlight: Devin Otway","content":"

In this Cosmic Developer Spotlight, we sat down with Devin Otway, a Software Engineer in San Francisco who currently works as a frontend engineer at Postmates. Devin recently launched a blog called Hacking Depression built using Cosmic. Check him out on Twitter or LinkedIn, and enjoy the Q/A.


\">

How long have you been building software?
I have been building software for about 5 years, but got into frontend development 3 years ago. Coding was an accidental passion. In graduate school for environmental engineering, I got my first taste developing dynamic models in matlab and found the development process so much fun. I then started learning Python and JavaScript on my own and would find myself working into the morning on fun little projects when I should have been looking for jobs after finishing grad school. I knew I had found my passion. It tickled both the creative and analytical sides of my brain.


What is your preferred development stack?
I come from more of a JS background, so I am a bit biased towards those language options. Right now it is React, Node.js and any lightweight db that fits my project needs. I have also been playing around with Golang recently. I love its simplicity and expressiveness and have plans to rewrite my blog’s web server using it.


What past projects are you most proud of and why?
Well, two recent projects come to mind. First is  www.hackingdepression.com , which is the blog I just finished building (now the article writing starts!). I built this project using React, Node/Express, and Cosmic as the cms/backend. Aside from being an extremely fun project it’s very meaningful to me on a personal level.

Depression affects 6.7% of adults (including me!) and is the leading cause of disability among people ages 15-44 and most people don’t like to talk about it. But in many ways it’s no different than other health issues like diabetes. It has\r\ncauses and conditions and as a result there are things that you can do that give you an edge over the illness and things that you can do that make it worse. It’s this edge between what helps and what doesn’t that I hope to discuss and quantify\r\non my blog.

Secondly, I currently work as a frontend engineer at Postmates. We are in the process of wrapping up a huge rewrite of our web client. Rebuilding something from the ground up with a company that already has a large user base has been an amazing opportunity.\r\nFrom performance, to scalability, to seo, we have to consider it all. Also, everyday I get to work with insanely talented engineers, designers, and leaders to build a world class experience for our customers. I am very proud of the work we are doing.


Talk a little bit more about your process for building apps - who’s using them? What purpose do they serve?
Well in terms of my side projects, Hacking Depression is the first that I have put in front of users. My process was really driven by my own desire to 1) play with new technologies and 2) do something that would help me solve a challenge/problem that I was experiencing. You could say that it was quite selfish! I wanted to learn, grow, and become healthier! Those were easy motivators to align with. In terms of purpose, I expect that to evolve. Right now I am focused on it serving me first, and hopefully the more that happens, the more it can serve my future readers.


What are some technologies you are excited about that you are using today, or want to learn more about?
On the language side, Golang. More broadly speaking, I am interested in learning more about cloud based service architectures and have plans to build some small services to support my blog and help me do things like quantify mood in relation to activities\r\n(exercise, diet, etc). More immediately, however, CSS-in-JS has been a client side technology that I feel has revolutionized my development. Giving CSS easy access to your JS context is a game changer!

To learn how you can contribute Apps, Articles and Extensions to the Cosmic Community, contact us at build@cosmicjs.com.

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"key":"teaser","title":"Teaser","type":"html-textarea","children":null,"value":"

In this Cosmic Developer Spotlight, we sat down with Devin Otway, a Software Engineer in San Francisco who currently works as a frontend engineer at Postmates. Devin recently launched a blog called Hacking Depression on Cosmic. Check him out on  Twitter  or  LinkedIn , and enjoy the Q/A.

"},{"value":"ebffa8e0-de9a-11e7-bdb9-afef163e47ef-devin-ottway.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/ebffa8e0-de9a-11e7-bdb9-afef163e47ef-devin-ottway.jpg","imgix_url":"https://imgix.cosmicjs.com/ebffa8e0-de9a-11e7-bdb9-afef163e47ef-devin-ottway.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-12-03T20:42:27.444Z","created_by":"5716b504e9c686d006000073","created":"2017-12-03T20:42:27.444Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","publish_at":null,"metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

In this Cosmic Developer Spotlight, we sat down with Devin Otway, a Software Engineer in San Francisco who currently works as a frontend engineer at Postmates. Devin recently launched a blog called Hacking Depression on Cosmic. Check him out on  Twitter  or  LinkedIn , and enjoy the Q/A.

","featured_image":{"url":"https://cdn.cosmicjs.com/ebffa8e0-de9a-11e7-bdb9-afef163e47ef-devin-ottway.jpg","imgix_url":"https://imgix.cosmicjs.com/ebffa8e0-de9a-11e7-bdb9-afef163e47ef-devin-ottway.jpg"}}},{"_id":"5a26c6a704aa846e4f00003a","order":86,"slug":"developer-spotlight-jazib-sawar","title":"Developer Spotlight: Jazib Sawar ","content":"

In this Cosmic Developer Spotlight, we sat down with Jazib Sawar, a full stack web developer at BitBytes.  Jazib has a Bachelor's Degree in Computer Science from the National University of Computer and Emerging Sciences and has led teams on interactive projects for several years.  Jazib is the mastermind behind the Cosmic Sticky Notes App that was recently adapted by Life is Good for their Gratitude Wall. 

Jazib is a member of the Cosmic Community, contributing Apps, Articles and Extensions.  Check out his contributions on his Cosmic profile page.  Jazib and his team recently launched a new Premium App for agencies on Cosmic.  Check him out on Twitter, LinkedIn, and enjoy the Q/A.


\">


How long have you been building software?
I have been in the software development business for about 3 years. It was always my dream to build a startup company primarily focused in web and cloud technologies. Six months ago, I, along with a couple of my friends, was able to fulfill that dream and start a software company called BitBytes. We mainly deal in cloud and web development.

What is your preferred development stack?
MERN (MongoDB, Express, React and Node.js)

What past projects are you most proud of and why?
During the past few years, I’ve worked on quite a few interesting projects. The one that stands out from the rest is Crowdsquad: an intelligent lead system that we built based on social networks. The system uses modern technology stack like React, Express, IBM Bluemix API Connect, Cloudant and interactive UI. Currently, we are working on integrating Continuous Deployment and IBM Watson into the project which makes it even more challenging and hence, we are most proud of it.

Talk a little bit more about your process for building apps. How has Cosmic sped up your time to market? Has it improved collaboration among your team members? 
Everyone at BitBytes follows the agile methodology for software development. At the start of each project, we try to gather as much information related to the project as we can. Collaborative environment within the company allows everyone to work as a team. As far as tools are concerned, we use Trello and Plutio for the management and assignment of tasks. And for version control, the obvious choice is Github. 

We used to rely heavily on WordPress and Magento but since the introduction of Cosmic, everything is much better. Unlike other platforms, we can make use of only those features that we need. PWA (progressive web applications) are trending these days and like everyone else, we are more concerned with speed and reliability. Cosmic has allowed us to focus more on UI than backend and as a result, we can build very fast and interactive websites in almost half the time. Unsurprisingly, we will be using more of Cosmic in our upcoming projects.

What are some technologies you are excited about that you are using today, or want to learn more about?
I want to learn more about the latest technologies such as GraphQL, Cloud and Big Data. Also, I want to explore Artificial Intelligence and Machine Learning so that I can make a positive impact in this world by providing solutions to different problems.

What's your best piece of advice to a Developer wanting to build their next app on Cosmic?
We have been building applications using Cosmic for about 3-4 months. It has been a great experience so far. If any developer is looking for a quick turnaround and wants to build super fast applications, I would recommend using Cosmic. The best part is that the developer doesn’t need to build the back-end or API for the applications which saves a lot of time. My only advice is to use Cosmic and focus more on the UI/UX. Happy Coding!

To learn how you can contribute Apps, Articles and Extensions to the Cosmic Community, contact us at support@cosmicjs.com.

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"key":"teaser","title":"Teaser","type":"html-textarea","children":null,"value":"

In this Cosmic Developer Spotlight, we sat down with Jazib Sawar, a full stack web developer at Bitbytes.  Jazib has a Bachelor's Degree in Computer Science from the National University of Computer and Emerging Sciences and has led teams on interactive projects for several years.  Jazib is the mastermind behind the Cosmic Sticky Notes App that was recently adapted by Life is Good for their Gratitude Wall. 

"},{"value":"00a42ab0-d9e0-11e7-8867-71f6e4966a20-3523ab00-d876-11e7-9dcf-bd18c1639b0f-agency-app-banner2.png","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/00a42ab0-d9e0-11e7-8867-71f6e4966a20-3523ab00-d876-11e7-9dcf-bd18c1639b0f-agency-app-banner2.png","imgix_url":"https://imgix.cosmicjs.com/00a42ab0-d9e0-11e7-8867-71f6e4966a20-3523ab00-d876-11e7-9dcf-bd18c1639b0f-agency-app-banner2.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-12-05T16:17:43.175Z","created_by":"5716b504e9c686d006000073","created":"2017-12-05T16:17:43.175Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

In this Cosmic Developer Spotlight, we sat down with Jazib Sawar, a full stack web developer at Bitbytes.  Jazib has a Bachelor's Degree in Computer Science from the National University of Computer and Emerging Sciences and has led teams on interactive projects for several years.  Jazib is the mastermind behind the Cosmic Sticky Notes App that was recently adapted by Life is Good for their Gratitude Wall. 

","featured_image":{"url":"https://cdn.cosmicjs.com/00a42ab0-d9e0-11e7-8867-71f6e4966a20-3523ab00-d876-11e7-9dcf-bd18c1639b0f-agency-app-banner2.png","imgix_url":"https://imgix.cosmicjs.com/00a42ab0-d9e0-11e7-8867-71f6e4966a20-3523ab00-d876-11e7-9dcf-bd18c1639b0f-agency-app-banner2.png"}}},{"_id":"5a1e5594c57d0f9663000012","order":87,"slug":"blazing-fast-response-times-and-new-status-page","title":"Blazing Fast Response Times and New Status Page","content":"

I am deeply sorry for the performance and uptime issues that we experienced several hours of the day on Tuesday, November 21 and in the days following.  The initial issue was caused by a friendly-fire DDOS attack that caused our servers to become slow or unresponsive and continued due to increased traffic on the platform.

We quickly diagnosed the problem and have been working around the clock to fix it and try to prevent the issue from happening again.  And in the process, we've made significant improvements in overall speed and reliability.  Here's what we did:

  1. We've deployed a new high-speed caching layer for all API requests which has dramatically improved API response times (by a factor of 10+)!  You will now notice blazing fast response times across the web dashboard and API endpoints.
  2. We've upgraded our infrastructure capacity to scale with increasing traffic and perform reliably with sudden spikes in traffic.
  3. We have a new status page dedicated to communicating to you any performance or uptime issues.


We are grateful for your business and hold ourselves accountable when there's any issue with providing you the best possible service.

Thank you for your patience and support as we strive to help you build apps fast, now even faster.  Please feel free to reach out to me personally if you have any questions or comments.

Sincerely,

Tony Spiro
CEO Cosmic
tony@cosmicjs.com



","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"key":"teaser","title":"Teaser","type":"html-textarea","children":null,"value":"

We have been working around the clock to fix the issues and have taking steps to prevent this issue from happening again.  And in the process, we've made significant improvements in speed and reliability.

"},{"value":"49183a40-d51a-11e7-9e36-db834fcbe6fe-redis-status.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/49183a40-d51a-11e7-9e36-db834fcbe6fe-redis-status.jpg","imgix_url":"https://imgix.cosmicjs.com/49183a40-d51a-11e7-9e36-db834fcbe6fe-redis-status.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-11-29T06:37:08.876Z","created_by":"5357ef811693be2118000001","created":"2017-11-29T06:37:08.876Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","publish_at":null,"metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

We have been working around the clock to fix the issues and have taking steps to prevent this issue from happening again.  And in the process, we've made significant improvements in speed and reliability.

","featured_image":{"url":"https://cdn.cosmicjs.com/49183a40-d51a-11e7-9e36-db834fcbe6fe-redis-status.jpg","imgix_url":"https://imgix.cosmicjs.com/49183a40-d51a-11e7-9e36-db834fcbe6fe-redis-status.jpg"}}},{"_id":"5a09a933cc9127e804000dec","order":88,"slug":"markdown-metafield-now-available","title":"Markdown Metafield Now Available","content":"



Markdown is a great tool in the developer's tool belt that offers a quick and easy alternative to HTML text formatting.  We are happy to let you know that you now have a Markdown Metafield to use for your Cosmic Objects.

Login or sign up to begin using Markdown.

Simply go to add a new Object or edit an existing Object and click "+ Add Metafield" and notice the latest Markdown option.  You have the ability to preview the Markdown as well by clicking the Preview tab.

Let me know if you have any questions about this new option in our community and on Twitter.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"

We are happy to let you know that now have a Markdown Metafield to use in your Cosmic Objects.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"337ce5e0-c87d-11e7-9a3c-5fec67617bf7-Markdown-mark.svg.png","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/337ce5e0-c87d-11e7-9a3c-5fec67617bf7-Markdown-mark.svg.png","imgix_url":"https://imgix.cosmicjs.com/337ce5e0-c87d-11e7-9a3c-5fec67617bf7-Markdown-mark.svg.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-11-13T14:16:19.459Z","created_by":"5357ef811693be2118000001","created":"2017-11-13T14:16:19.459Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","publish_at":null,"metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

We are happy to let you know that now have a Markdown Metafield to use in your Cosmic Objects.

","featured_image":{"url":"https://cdn.cosmicjs.com/337ce5e0-c87d-11e7-9a3c-5fec67617bf7-Markdown-mark.svg.png","imgix_url":"https://imgix.cosmicjs.com/337ce5e0-c87d-11e7-9a3c-5fec67617bf7-Markdown-mark.svg.png"}}},{"_id":"5a0346140027573b13000b9b","order":89,"slug":"introducing-the-builder-bucket-referral-program","title":"Introducing the Builder Bucket Referral Program","content":"

Developers need time to build.  And content editors need time to test-drive a project as it's being built.  For these reasons, we're rolling out our new Builder Bucket Referral Program which gives you more trial time on your Free Builder Bucket when you invite friends and colleagues to join Cosmic.  It works like this:

  1. Set up your Builder Bucket which includes a free 14-day trial
  2. At any point during your 14-day trial, you have the option to upgrade to any paid plan OR send your personal referral link to a friend or colleague
  3. Once they sign up, you get 14 more days to use your Builder Bucket

You can invite as many people as you want and there is no limit to the number of Free trial days you can earn from referrals.



For more details and to get your referral link, login and go to Account Settings > Referrals.


It is our mission to help teams build apps faster together, and we're happy to roll out this program to give you more time to get your projects ready for production.  If you have any questions about the Builder Bucket Referral Program or anything else, join our Community and reach out to us on Twitter.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"

Developers need time to build.  And content editors need time to test-drive a project as it's being built.  For these reasons, we're rolling out our new Builder Bucket Referral Program.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"761bc440-c556-11e7-bcbf-794d69923463-builder-bucket-program.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/761bc440-c556-11e7-bcbf-794d69923463-builder-bucket-program.jpg","imgix_url":"https://imgix.cosmicjs.com/761bc440-c556-11e7-bcbf-794d69923463-builder-bucket-program.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-11-09T17:59:48.173Z","created_by":"5357ef811693be2118000001","created":"2017-11-09T17:59:48.173Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","publish_at":null,"metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

Developers need time to build.  And content editors need time to test-drive a project as it's being built.  For these reasons, we're rolling out our new Builder Bucket Referral Program.

","featured_image":{"url":"https://cdn.cosmicjs.com/761bc440-c556-11e7-bcbf-794d69923463-builder-bucket-program.jpg","imgix_url":"https://imgix.cosmicjs.com/761bc440-c556-11e7-bcbf-794d69923463-builder-bucket-program.jpg"}}},{"_id":"59f8bf47ff2bcc134f000ffd","order":90,"slug":"introducing-object-revision-history","title":"Introducing Object Revision History ","content":"


We're excited to announce that Revision History is now available for all of your Cosmic Objects. This means that you now have the power to go back in time to previous versions, save new versions without publishing live and more (click on screenshots to zoom):


1. Objects remain published while you save changes to draft
You now have the ability to keep your published Objects while saving new versions to Draft.  Many have requested this and we're happy to now make this possible 😀 .  To unpublish the Object, click the new "Unpublish" button.


2. View prior changes
You can view all prior revisions on Objects (since this release date) by clicking the Revision History modal link.


3. Rollback to prior changes
To roll back to a prior version simply click on a revision and Save Draft or Publish in the Edit Object revision view.


We're excited about rolling this out as it makes collaboration between developers and editors that more comfortable.  No need to worry about mistakes when the revert button is just a click away.

If you would like to join our mission to help teams collaborate around building great products together, join our Community and follow us on Twitter.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"

We're excited to announce that Revision History is now available for all of your Cosmic Objects.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"d20bc9a0-c374-11e7-84d7-69582fe69304-back-to-the-future-white.png","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/d20bc9a0-c374-11e7-84d7-69582fe69304-back-to-the-future-white.png","imgix_url":"https://imgix.cosmicjs.com/d20bc9a0-c374-11e7-84d7-69582fe69304-back-to-the-future-white.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-11-07T18:21:59.659Z","created_by":"5716b504e9c686d006000073","created":"2017-11-07T18:21:59.659Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","publish_at":null,"metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

We're excited to announce that Revision History is now available for all of your Cosmic Objects.

","featured_image":{"url":"https://cdn.cosmicjs.com/d20bc9a0-c374-11e7-84d7-69582fe69304-back-to-the-future-white.png","imgix_url":"https://imgix.cosmicjs.com/d20bc9a0-c374-11e7-84d7-69582fe69304-back-to-the-future-white.png"}}},{"_id":"59f9cbaa1536ad374e0027c5","order":91,"slug":"developer-spotlight-yew-wee-chua","title":"Developer Spotlight: Yew Wee Chua","content":"

In this Cosmic Developer Spotlight, we sat down with Yew Wee Chua, Chief Technology Officer of Second Wind Nation whose team has largely focused on data analytics and web development over the last several years. They're currently building out content-driven applications for teams of content editors with specific areas of focus to contribute content to a more comprehensive publication site. Read the Second Wind Nation Case Study. Check Yew out on Twitter or LinkedIn, and enjoy the Q/A.

1. How long have you been building software?
My team and I have been building software for about 2-3 years. Our background is primarily in data analytics and web development.


2. What is your preferred development stack?
MERN. MERN stands for Mongo DB, Express.js, React and Node.js. To see all of the tools that Cosmic works well with and supports, check out the Cosmic Knowledge Base. 


3. What past projects are you most proud of and why?
Building a web-based search application for a large mining company. We developed and brought it into production within 2 weeks. Additionally it has cool features such as a recommendation\r\nengine based on the user's search history. I'm proud of it because we only had 2 weeks to bring it to production.


4. Talk a little bit more about your process for building apps.  How has Cosmic sped up your time to market for project delivery deadlines?
We typically work using the agile scrum method, getting the software requirements from\r\nthe business, prioritizing features on the product backlogs, sprint planning and so on. Cosmic has freed us from worrying about the backend CMS and now we spend more time on building the front-end as well as deploying the application. 

Previously we were using WordPress. WordPress was limiting as whenever we needed new features to be added onto the application, we were required to add additional plugins which result in the clunkiness of the application. Thus we moved away from WordPress\r\nand found Cosmic as our solution for a headless CMS.


5. What are some technologies you are excited about that you are using today, or want to learn more about?
We will want to learn more about containerizing our application and employ a continuous deployment of our containerized application\r\non the cloud.


To learn how you can contribute Apps, Articles and Extensions to the Cosmic Community, contact us at \r\nsupport@cosmicjs.com.

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"value":"

Cosmic has allowed us to enter the market quicker. We managed to build a Proof of Concept and deploy it within one week thanks to the well-documented APIs and easy-to-use User Interface for our Content Editors. 

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"4f537490-bf14-11e7-958b-232a3f62ac7b-secondwind.png","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/4f537490-bf14-11e7-958b-232a3f62ac7b-secondwind.png","imgix_url":"https://imgix.cosmicjs.com/4f537490-bf14-11e7-958b-232a3f62ac7b-secondwind.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-11-01T13:27:06.118Z","created_by":"5716b504e9c686d006000073","created":"2017-11-01T13:27:06.118Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","publish_at":null,"metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

Cosmic has allowed us to enter the market quicker. We managed to build a Proof of Concept and deploy it within one week thanks to the well-documented APIs and easy-to-use User Interface for our Content Editors. 

","featured_image":{"url":"https://cdn.cosmicjs.com/4f537490-bf14-11e7-958b-232a3f62ac7b-secondwind.png","imgix_url":"https://imgix.cosmicjs.com/4f537490-bf14-11e7-958b-232a3f62ac7b-secondwind.png"}}},{"_id":"59ee6a80140bd002640009b9","order":92,"slug":"premium-apps","title":"Premium Apps","content":"

We're excited to announce that we are now expanding our Developer Program to include Premium Apps and Extensions.  To kick things off, our first Premium App is now available:  Bootstrap Landing Page.



We know first-hand the problem of building websites and apps on a time crunch.  And it's always nice to find something pre-built that you can simply pull "off-the-shelf" and customize to fit your needs.  The cost savings on development hours makes it a great option and we're excited to add this option to help teams get projects finished faster.

If you are interested in contributing Apps to sell in our Marketplace we would love to work with you.  This is an opportunity to get paid recurring revenue every time your App is purchased.

To get started offering your Premium Apps and Extensions, login to your account, go to Account Settings > Developer Program and request access.

To learn more about the opportunity please email us at build@cosmicjs.com.

We're excited to see what you build!

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"

We know first hand the problem of building websites and apps on a time crunch.  And it's always nice to find something pre-built that you can simply pull "off-the-shelf" and customize to fit your needs.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"d442e3e0-b8be-11e7-b121-e93c833840db-premium-apps.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/d442e3e0-b8be-11e7-b121-e93c833840db-premium-apps.jpg","imgix_url":"https://imgix.cosmicjs.com/d442e3e0-b8be-11e7-b121-e93c833840db-premium-apps.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-10-23T22:17:35.829Z","created_by":"5357ef811693be2118000001","created":"2017-10-23T22:17:35.829Z","status":"published","modified_at":"2020-08-10T14:04:22.001Z","modified_by":"5357ef811693be2118000001","publish_at":null,"metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

We know first hand the problem of building websites and apps on a time crunch.  And it's always nice to find something pre-built that you can simply pull "off-the-shelf" and customize to fit your needs.

","featured_image":{"url":"https://cdn.cosmicjs.com/d442e3e0-b8be-11e7-b121-e93c833840db-premium-apps.jpg","imgix_url":"https://imgix.cosmicjs.com/d442e3e0-b8be-11e7-b121-e93c833840db-premium-apps.jpg"}}},{"_id":"59e623bb4242f45d4700016c","order":93,"slug":"navigation-update","title":"Navigation Update","content":"

Helping you get where you need to go faster is a top priority for Cosmic.  That's why you'll notice we recently updated our navigation (main menu and footer links) to help you get to Cosmic products, resources and information faster and easier.



Our simplified main navigation includes our most popular and most important pages: Products, Developers, Pricing and Company.  

We've also added a new hub for our developer documentation:
https://www.cosmicjs.com/docs

And finally in the footer, we've organized links in a more thoughtful way to help you find what you need faster (see them below).

Please let me know if you have any questions.  We're always available to help in our Slack channel and on Twitter.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"

We've rolled out a few new navigation items to get you where you need to go faster.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"af139060-b350-11e7-838a-497b4764a634-frank-mckenna-282487.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/af139060-b350-11e7-838a-497b4764a634-frank-mckenna-282487.jpg","imgix_url":"https://imgix.cosmicjs.com/af139060-b350-11e7-838a-497b4764a634-frank-mckenna-282487.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-10-17T15:37:31.431Z","created_by":"5357ef811693be2118000001","created":"2017-10-17T15:37:31.431Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","publish_at":null,"metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

We've rolled out a few new navigation items to get you where you need to go faster.

","featured_image":{"url":"https://cdn.cosmicjs.com/af139060-b350-11e7-838a-497b4764a634-frank-mckenna-282487.jpg","imgix_url":"https://imgix.cosmicjs.com/af139060-b350-11e7-838a-497b4764a634-frank-mckenna-282487.jpg"}}},{"_id":"59d269c5632917c44300001d","order":94,"slug":"preview-link-now-available","title":"Preview Link Now Available","content":"

You can now add a link for your writers to be able to preview Object content.  By setting up your Preview links on your Object Types, your writers will easily be able to preview changes to content in draft or published state.  To add preview\r\nbuttons to your Objects, simply:

1. Go to Your Bucket > Object Type Settings > Preview Link.
2. Add your Preview Link (dynamically add the object slug with the [object_slug] shortcode).  If you would like to view Draft status Objects, you will need to make sure your web app queries the endpoint with ?status=all.  View the API documentation for more information on how to access your Objects in draft status.


3. Click the Preview button located at the top right in the Edit Object page.


Then preview the content:


Here it is in Gif format:

It is our hope that this feature will further help developers and editors collaborate to create great apps and write compelling content.  If you have any questions about this feature or other ways to build apps faster and easier using Cosmic reach out to us on Twitter and join our Slack community.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"

You can now add a link for your writers to be able to preview Object content.  By setting up your Preview links on your Object Types, your writers will easily be able to preview changes to content in draft or published state.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"c00dd790-a842-11e7-accf-27ec26fef6ca-preview.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/c00dd790-a842-11e7-accf-27ec26fef6ca-preview.jpg","imgix_url":"https://imgix.cosmicjs.com/c00dd790-a842-11e7-accf-27ec26fef6ca-preview.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-10-02T16:31:01.771Z","created_by":"5357ef811693be2118000001","created":"2017-10-02T16:31:01.771Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","publish_at":null,"metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

You can now add a link for your writers to be able to preview Object content.  By setting up your Preview links on your Object Types, your writers will easily be able to preview changes to content in draft or published state.

","featured_image":{"url":"https://cdn.cosmicjs.com/c00dd790-a842-11e7-accf-27ec26fef6ca-preview.jpg","imgix_url":"https://imgix.cosmicjs.com/c00dd790-a842-11e7-accf-27ec26fef6ca-preview.jpg"}}},{"_id":"59cd0065c6bfb9652b00175e","order":95,"slug":"product-updates-localization-repeater-items-and-more","title":"Product Updates: Localization, Repeater Items and more","content":"

We've rolled out a few updates that were requested by members of our community.  Check them out below:

1. Localization
We've consolidated Objects with multiple locales to appear on the same row with links to each localized Object in the Objects table view.


2. Repeater Item Sorting
You can now drag and drop sort your repeating items.


3. Embedly
We've added Embedly functionality to our HTML editor to allow you to easily add GitHub Gists, Twitter cards and more.

Add a link to the resource using the Embedly icon in the editor:



Wherever this content goes, you will need to make sure you have the Embedly script installed on your webpage.

And it will look something like this:

\">
","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"

We've rolled out a few updates that were requested by members of our community.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"0afa7760-76be-11e7-a00c-4fed1ad8a55e-guillaume-bolduc-259596.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/0afa7760-76be-11e7-a00c-4fed1ad8a55e-guillaume-bolduc-259596.jpg","imgix_url":"https://imgix.cosmicjs.com/0afa7760-76be-11e7-a00c-4fed1ad8a55e-guillaume-bolduc-259596.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-09-28T14:00:05.512Z","created_by":"5357ef811693be2118000001","created":"2017-09-28T14:00:05.512Z","status":"published","modified_at":"2020-08-10T14:04:22.001Z","modified_by":"5357ef811693be2118000001","publish_at":null,"metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

We've rolled out a few updates that were requested by members of our community.

","featured_image":{"url":"https://cdn.cosmicjs.com/0afa7760-76be-11e7-a00c-4fed1ad8a55e-guillaume-bolduc-259596.jpg","imgix_url":"https://imgix.cosmicjs.com/0afa7760-76be-11e7-a00c-4fed1ad8a55e-guillaume-bolduc-259596.jpg"}}},{"_id":"59c0242aa67fea8d4b001c6e","order":96,"slug":"introducing-the-developer-program","title":"Introducing the Developer Program","content":"

We are excited to announce our Developer Program (in private beta) which gives developers the opportunity to join us in our mission to help others build apps faster using Cosmic.

If you would like to contribute Apps, Extensions and Articles to help others learn and build using Cosmic, you can request access to join the Developer Program in Your Account Settings > Developer Dashboard area.  Once added to our developer community, you will be able to contribute content to show off the cool things you can build using Cosmic and get compensated for quality contributions.  More active developers will have the opportunity to work on various projects that come our way.

We look forward to seeing what you build and learning about how you build apps faster using Cosmic!  For more information, please reach out to us in our Slack community, on Twitter, or by emailing us at build@cosmicjs.com.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"

We are excited to announce our Developer Program (in private beta) and we invite developers to join us in our mission to help our community learn more about how to build apps faster using Cosmic.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"573585d0-9d41-11e7-9022-cf144d5fea2d-goran-ivos-307271.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/573585d0-9d41-11e7-9022-cf144d5fea2d-goran-ivos-307271.jpg","imgix_url":"https://imgix.cosmicjs.com/573585d0-9d41-11e7-9022-cf144d5fea2d-goran-ivos-307271.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-09-18T19:53:13.965Z","created_by":"5357ef811693be2118000001","created":"2017-09-18T19:53:13.965Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","publish_at":null,"metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

We are excited to announce our Developer Program (in private beta) and we invite developers to join us in our mission to help our community learn more about how to build apps faster using Cosmic.

","featured_image":{"url":"https://cdn.cosmicjs.com/573585d0-9d41-11e7-9022-cf144d5fea2d-goran-ivos-307271.jpg","imgix_url":"https://imgix.cosmicjs.com/573585d0-9d41-11e7-9022-cf144d5fea2d-goran-ivos-307271.jpg"}}},{"_id":"59baf102bed717b62f0004f4","order":97,"slug":"developer-spotlight-ben-packer","title":"Developer Spotlight: Ben Packer","content":"


In this Cosmic Developer Spotlight, we sat down with Ben Packer, a web developer who focused on natural language processing prior to turning his talents toward web development for non-profit initiatives. Ben serves as the Director of Technology for Brand New Congress, an initiative aiming to elect 535 new members of Congress.  Check him out on Twitter or LinkedIn, and enjoy the Q/A.

How long have you been building software?
I've been programming for 4 years now, but only full-time professionally for 3 months since I graduated college. I've done a bit of everything, previously focusing on natural language processing before turning to web development.

What is your preferred development stack?
I've used lots of MERN (MongoDB, Express, React, Node), but have recently made the switch to Elixir + Phoenix + Postgres, which is what I've done all of my Cosmic based development with. Despite the JS in the Cosmic name, Elixir's been a great fit due to its built-in in-memory storage solution, called "ets" (Erlang Term Storage). This, combined with Cosmic's web-hooks, has let me serve Cosmic-based pages very quickly out of a cache without managing a separate external Redis or Memcached instance. You can find our Elixir Cosmic wrapper and cache solution here.

What past projects are you most proud of and why?
My work with Brand New Congress and Justice Democrats has been building the tools required to effectively run a large scale and modern grassroots political campaign. I feel very fortunate that I get to focus and do this political work full-time, rather than volunteer and split my headspace as many developers do. Before working with Brand New Congress and Justice Democrats, I developed an open source online meeting platform called assemble, which uses WebRTC technology to bring the experience of breakout groups common in physical meetings to your browser.

Talk a little bit more about your process for building apps. How is building apps for political or idealogical causes different than other client work?
I'm also very happy that I'm able to develop all of these solutions in the open with an A-GPL license attached. Once our tools are mature and ready to be re-purposed, we'll have reduced the costs of running grassroots political campaigns for other organizations and future campaigns, who will be able to self-host what we've developed at a fraction of the cost of traditional campaign software services.

What are some technologies you are excited about that you are using today, or want to learn more about?
Cosmic has made it much easier for me to enable the non-programming parts of our organization to configure the software I make, and to edit the content on our websites. Our use of it has evolved beyond a CMS to a general admin interface – we use it to manage a url shortener, as a user whitelist for internal tools, to specify changing webhooks, etc. With Cosmic, after I recognize that a particular component of our website or process will need to change, I can implement a mechanism for that component to be edited or configured in a matter of minutes.

I don't think that development for political causes is too different than more typical development – we move quickly, things break sometimes, etc. What may be different is that we have volunteers who contribute their own amount of time and/or expertise. If you have experience with Elixir, React, Node.js, or setting up AWS-based workflows and you want to help elect a congress full of individuals who support medicare for all, massive investment in our infrastructure and renewable energy, and refuse to take corporate money, send me an email at ben@justicedemocrats.com and we'll find the best way for you to help.

Our internal tools are built using React, Ant.Design (a React UI toolkit), and communicate with our server over Phoenix Channels (websockets), creating a snappy user experience. Staff members and volunteers will end up spending a lot of their time in these tools, contacting our supporters, managing events, etc., and so it's important that they're performant, with as few pain points as possible.

For our world facing websites, I'd like to bring as much of the new web as I can to the political space. A lot of the things we're encouraging supporters to do are collective action problems – individually ineffective, but collectively powerful, and it's one's belief that you're all working alongside others that gives you the confidence to try. However, people are also overworked and worried about the future, including not only the future of our political system but also their next two weeks.

So, it's my hope that in the coming months we'll be able to design experiences that not only inspire a sense of participation and belonging in collective political action, but that we'll be able to deliver those experiences while you're riding a bus and surfing the web on your friend's old Android phone.

To learn how you can contribute Apps, Articles and Extensions to the Cosmic Community, contact us at support@cosmicjs.com.

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"value":"

In this Developer Spotlight we sit down with Ben Packer, a web developer who's writing code for a cause.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"9c1b9d70-9c7d-11e7-b535-f98e7a50bba9-bnc.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/9c1b9d70-9c7d-11e7-b535-f98e7a50bba9-bnc.jpg","imgix_url":"https://imgix.cosmicjs.com/9c1b9d70-9c7d-11e7-b535-f98e7a50bba9-bnc.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-09-14T21:13:38.399Z","created_by":"5716b504e9c686d006000073","created":"2017-09-14T21:13:38.399Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","publish_at":null,"metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

In this Developer Spotlight we sit down with Ben Packer, a web developer who's writing code for a cause.

","featured_image":{"url":"https://cdn.cosmicjs.com/9c1b9d70-9c7d-11e7-b535-f98e7a50bba9-bnc.jpg","imgix_url":"https://imgix.cosmicjs.com/9c1b9d70-9c7d-11e7-b535-f98e7a50bba9-bnc.jpg"}}},{"_id":"59b95345b31fba6012000a02","order":98,"slug":"developer-spotlight-matt-cain","title":"Developer Spotlight: Matt Cain","content":"

In our latest installment of the Cosmic Developer Spotlight Series, we sat down with Matt Cain, a web developer who took a physics undergrad and spring-boarded into the world of Java, Rails and ultimately, programming language agnostic APIs. In addition to his day job of being a web application developer and writing code, Matt is a Cosmic Contributor and responsible for several apps and blogs in our ecosystem. Check him out on his portfolio site or LinkedIn, and enjoy the Q/A.

How long have you been building software?
I've been seriously building software for about a year. When I was a kid I liked to play around building static sites in Frontpage (the good old days) but moved away from it. Still, I continued to follow the web development world in the background and about a year ago, around last October, I decided to dive in and get my hands dirty. With the Java and Python skills I picked up from my physics undergrad I was able to pick up JavaScript and Rails pretty quickly and started working with  their respective frameworks.

What is your preferred development stack?
I love full stack JavaScript with NoSQL. I love language agnostic APIs. If I can get away with it, I prefer using services like Cosmic as a database rather than something like MongoDB. I realize there are flaws inherent to those preferences but I'm typically working by myself or in small teams, so keeping code in one language and data remote really reduces cognitive strain.

What past projects are you most proud of and why?
I always like to say my first real project is my favorite. I had spent a couple weeks learning Rails and some fundamental CS stuff and really wanted to build my own app. So I decided on a map data visualization app. I used Rails, jQuery, and hosted the maps with MapBox and basically learned everything as I went. The code's sloppy, it doesn't look great, but it was something that made me proud and encouraged me to keep going. Check the live website out here: http://pghmaps.mattcain.io/.  More recently, I was pretty satisfied with the Premium User Blog app I built for Cosmic.

Talk a little bit more about your process for building apps, who they're for, and how Cosmic has helped. 
I've been building a lot of small apps and prototypes for mostly small businesses and entrepreneuers. So I like to deliver things fast. Cosmic being essentially a simple to use, one-stop-shop for everything I need to deploy is a blessing.

What are some technologies you are excited about that you are using today, or want to learn more about?
I'm excited about using PWA's and integrating bots in sites more. I'm very much looking foward to where AR goes.

To learn how you can contribute Apps, Articles and Extensions to the Cosmic Community, contact us at support@cosmicjs.com.

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"value":"

In our latest installment of the Cosmic Developer Spotlight Series, we sat down with Matt Cain, a physics major turned Creative Director and Developer. 

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"fbe180e0-9a15-11e7-b3ce-37829f00d429-web-design-and-development.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/fbe180e0-9a15-11e7-b3ce-37829f00d429-web-design-and-development.jpg","imgix_url":"https://imgix.cosmicjs.com/fbe180e0-9a15-11e7-b3ce-37829f00d429-web-design-and-development.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-09-13T15:48:21.444Z","created_by":"5716b504e9c686d006000073","created":"2017-09-13T15:48:21.444Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

In our latest installment of the Cosmic Developer Spotlight Series, we sat down with Matt Cain, a physics major turned Creative Director and Developer. 

","featured_image":{"url":"https://cdn.cosmicjs.com/fbe180e0-9a15-11e7-b3ce-37829f00d429-web-design-and-development.jpg","imgix_url":"https://imgix.cosmicjs.com/fbe180e0-9a15-11e7-b3ce-37829f00d429-web-design-and-development.jpg"}}},{"_id":"59b9531a9410590110000a1f","order":99,"slug":"garrett-sibinga","title":"Developer Spotlight: Garrett Sibinga","content":"

In our latest installment of the Cosmic Developer Spotlight Series, we sat down with Garrett Sibinga, a web application designer and developer focusing on HTML, CSS and JavaScript. In addition to designing and writing code, Garrett travels and actually wrote this piece from a cafe on a ferry on the North Sea (pictured below). Check him out on his site Garrett.is or LinkedIn, and enjoy the Q/A.


How long have you been developing software?
I've been working in web development since 2013, so four years now. In most industries this isn't a whole lot of time, but when I think about some of the web technologies that we were excited about in 2013 I can't believe how outdated they sound. It's a landscape that is constantly changing, and with the exception of a few things the industry basically rewrites itself every few years.

What drew you to Cosmic?
Well, I think it was sort of precisely this thing -- the necessity for a certain amount of flexibility in an industry where the only thing that is certain is change. A programming language agnostic CMS seemed like a really appealing idea. I think I've always sort of thought of myself as a language agnostic developer. It's not that I don't read certain languages better or feel more comfortable writing with the syntax of some languages, but I think as a general approach it is best not to get too attached. That's why I love the idea of a platform that works with a wide range of languages, where you can use the best languages or libraries depending on the project.

What is your preferred development stack?
I started out programming in Java, learned Python for some courses and projects I took on, picked up some Ruby along the way, and worked with a MAMP stack with WordPress for a while. Even if you fall in love with a language there are no guarantees that it will be widely used in 2 years, or even 2 months. I think you learn to adapt as a developer, and these experiences add to your baseline for learning and understanding new languages. It's all part of an exercise improving your code literacy in my view. I'm new to Node.js, but I've really been enjoying the flexibility and speed that it allows so far, and look forward to seeing where this new adventure leads.

What projects are you most proud of and why?
For development projects, I built a world clock app that used the Flickr API to pull images based on your location. It is part of an art piece which has showed at a couple of museums, and just closed out a show at the Copenhagen Contemporary in Denmark. This was one of my first experiences working with API's in a JavaScript environment, and I really enjoyed working with external data so I guess in a way it was a precursor to working with Cosmic.

How does Cosmic improve your process for building software?
Cosmic is great for me because it allows me to entirely separate my code from my content. This is a wonderful feature because it really streamlines the process of creating web apps that aren't tied to one particular instance. I have also really enjoyed using Imgix to serve different sizes of images -- being able to add query strings for size to your image url's straight into your template is awesome and really powerful. It's a great way to build applications that perform really well at a wide range of screen sizes by serving only the content sizes that you need. The added bonus of integrated version control through GitHub means that you are able to work very quickly to develop clean and concise codebases.

What technologies are you excited about right now?
I'm excited about npm and Node because they are new to me, but really they are exciting because they open up a whole new realm of possibilities with npm's libraries and frameworks. Most notably among these is React, because of the added speed\r\nbonus of being able to develop for multiple platforms at the same time. I'm also looking forward to integrating asynchronous javascript into more of my projects because it's scary fast.

When Garrett's not building new apps on the Cosmic platform he occasionally updates his website: Garrett.is. If you are interested in connecting you can find him on LinkedIn or hit him up with an email.

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"value":"

In our latest installment of the Cosmic Developer Spotlight Series, we sat down with Garrett Sibinga, a web application designer and developer focusing on HTML, CSS and JavaScript

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"afd683a0-9964-11e7-8195-ebc4f8e92f76-john-salzarulo-342868.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/afd683a0-9964-11e7-8195-ebc4f8e92f76-john-salzarulo-342868.jpg","imgix_url":"https://imgix.cosmicjs.com/afd683a0-9964-11e7-8195-ebc4f8e92f76-john-salzarulo-342868.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-09-13T15:47:38.589Z","created_by":"5716b504e9c686d006000073","created":"2017-09-13T15:47:38.589Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","publish_at":null,"metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

In our latest installment of the Cosmic Developer Spotlight Series, we sat down with Garrett Sibinga, a web application designer and developer focusing on HTML, CSS and JavaScript

","featured_image":{"url":"https://cdn.cosmicjs.com/afd683a0-9964-11e7-8195-ebc4f8e92f76-john-salzarulo-342868.jpg","imgix_url":"https://imgix.cosmicjs.com/afd683a0-9964-11e7-8195-ebc4f8e92f76-john-salzarulo-342868.jpg"}}},{"_id":"59b801a7b87c84fe09000670","order":100,"slug":"build-an-appointment-scheduler-using-react-twilio-and-cosmic-js","title":"Build an Appointment Scheduler Using React, Twilio and Cosmic","content":"

TL;DR

View the demo
Install the App
View the codebase

Your time is valuable but you can't waste a second of it. People need to see you because work needs to get done and there are collaborations to be made. Instead of letting people communicate with you directly to schedule their use of your time - which only wastes it more - we'll use Cosmic to build an appointment scheduler. That way, the people who need to talk to you only have to once.

Cosmic is an API-first CMS, meaning it is language independent, database independent, and practically everything-else independent. This is great for a small project like this one because we can extend it quickly with any language or framework in the future and we can define data structures that are only as complex as we need them to be.

Our Appointment Scheduler will let users select a day and a one-hour time slot between 9AM and 5PM to meet with us. We'll then integrate our app with Twilio to send them a confirmation text that their appointment has been scheduled. Finally, we'll build a Cosmic Extension so we can manage the appointments right from within the Cosmic dashboard.

We'll complete our project in 3 major sections:

  1. Building out the front-end in React and Webpack, with the help of the Material UI component library
  2. Wiring it up to a simple Express backend that will serve to make API calls to Twilio and to expose our Appointment objects to the front-end (in the spirit of keeping our Cosmic bucket keys out of our frontend code)
  3. Building the Extension in React, again using the Material UI library

But, before any of that, we need to get our Cosmic bucket ready to store and serve data.

Part 0: Setting Up Cosmic

We'll use two types of Objects to store our data: one for appointments and one for site configurations. In Cosmic, first create the Appointments object type with the specified metafields. Then, we'll create a Configs object type with no default metafields and a Site object in which we'll define object-specific metafields.

Appointments

Metafield NameType
emailtext
phonetext
datetext
slottext


Here, email and phone will be the user's metadata — we'll use their name as the Appointment object's title. Datewill hold the appointment date in YYYY-DD-MM format and slot will be how many hours away the appointment is from 9AM.

Configs/Site

Metafield NameTypeValue
site_titletextCosmic Appointment Scheduler
about_page_urltexthttps://www.cosmicjs.com/about
contact_page_urltexthttps://www.cosmicjs.com/contact
home_page_urltexthttps://www.cosmicjs.com


We're using the Config object to define details about the app that we want to be able to change on the fly, rather than having to redeploy for.

And with our simple data scheme in place, we're ready to get building.

Part 1: Building the Front End

1. Boilerplate setup

  1. First, we'll make our appointment-scheduler directory, run yarn init (feel free to use npm), and set up the project structure as follows:
appointment-scheduler\r\n|\r\n|--dist\r\n|--src\r\n|. |--Components\r\n|. |. |--App.js\r\n|. |--index.html\r\n|. |--index.js\r\n|--.babelrc\r\n|--.gitignore\r\n|--package.json\r\n|--webpack.config.js\r\n
  1. Then, we'll make our HTML template:
<!-- ./src/index.html -->\r\n\r\n<!DOCTYPE html>\r\n<html>\r\n  <head>\r\n    <meta charset="utf-8">\r\n    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">\r\n    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">\r\n    <title>Appointment Scheduler</title>\r\n  </head>\r\n  <body>\r\n    <div id="root"></div>\r\n  </body>\r\n</html>
  1. Next, we'll install the packages we need. Of interest, alongside any standard packages needed to develop a React app in ES6, we'll be using:
  2. To install everything we need, run yarn add async axios babel-preset-stage-3 material-ui moment normalze.css react react-dom react-tap-event-plugin, and for our dev-dependencies, yarn add babel-core babel-loader babel-preset-env babel-preset-react css-loader eslint file-loader html-webpack-plugin path style-loader webpack
  3. Having installed the Babel packages we need, we'll tell Babel to use them in it's config file and we'll tell git to ignore everyhing we just installed:
    // ./.babelrc\r\n\r\n{ "presets": ["env", "react", "stage-3"] }
    # ./.gitignore\r\n\r\nnode_modules\r\n
  4. Finally, we'll set up Webpack so everything's in place for build time
    const path = require('path')\r\nconst HtmlWebpackPlugin = require('html-webpack-plugin')\r\nconst webpack = require('webpack')\r\n\r\nmodule.exports = {\r\n  entry: './src/index.js',\r\n  output: {\r\n    path: path.resolve('dist'),\r\n    filename: 'bundle.js',\r\n    sourceMapFilename: 'bundle.map.js'\r\n  },\r\n  devtool: 'source-map',\r\n  devServer: {\r\n    port: 8080\r\n  },\r\n  module: {\r\n    rules: [{\r\n      test: /\\.js$/,\r\n      use: { loader: 'babel-loader' },\r\n      exclude: path.resolve('node_modules')\r\n    }, {\r\n      test: [/\\.scss$/,/\\.css$/],\r\n      loader: ['style-loader', 'css-loader', 'sass-loader']\r\n    }, {\r\n      test: /\\.(png|jpg|gif|svg)$/,\r\n      use: [\r\n        { loader: 'file-loader' }\r\n      ]\r\n    }]\r\n  },\r\n  plugins: [\r\n    new HtmlWebpackPlugin({\r\n      template: './src/index.html',\r\n      filename: 'index.html',\r\n      inject: true,\r\n      xhtml: true\r\n    }),\r\n    new webpack.DefinePlugin({\r\n      PRODUCTION: process.env.NODE_ENV === 'production'\r\n    })\r\n  ]\r\n}

We've configured Webpack to output bundle.js, it's source map, and index.html (according to the template in src) to dist on building. You also have the option to use SCSS throughout the project and have access to your Node environment via window.PRODUCTION at build-time.

2. Create an Entry Point

Before we go any further we need to define an entry point for our app. Here, we'll import any necessary global libraries or wrapper components. We'll also use it as the render point for our React app. This will be our src/index.js file and it will look like this:

// ./src/index.js\r\n\r\nimport React from 'react'\r\nimport ReactDom from 'react-dom'\r\nimport App from './Components/App'\r\nimport MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'\r\n\r\nimport 'normalize.css'\r\n\r\nrequire('./scss/app.scss')\r\n\r\nwindow.React = React\r\n\r\nReactDom.render(\r\n  <MuiThemeProvider>\r\n    <App />\r\n  </MuiThemeProvider>,\r\n  document.getElementById('root')\r\n)\r\n\r\n// MuiThemeProvider is a wrapper component for MaterialUI's components

3. Work out a Skeleton

Having eveything in place to get our app working, we have a few things to consider and a few choices to make about how we want our app to work before we start building it. To help us think, we'll build out a basic skeleton of how we need it to look:

// ./src/Components/App.js\r\n\r\nimport { Component } from 'react'\r\nimport injectTapEventPlugin from 'react-tap-event-plugin'\r\n\r\ninjectTapEventPlugin()\r\n\r\nexport default class App extends Component {\r\n    constructor() {\r\n    super()\r\n      this.state = {\r\n            // initial state\r\n        }\r\n        \r\n  //method bindings\r\n    }\r\n  \r\n  //component methods?\r\n  \r\n  //lifecycle methods\r\ncomponentWillMount() {\r\n        //fetch data from cosmic, watch window width\r\n    }\r\n  componentWillUnmount() {\r\n        //remove window width event listener\r\n    }\r\n  render() {\r\n     //define variables\r\n      return (\r\n        <div>\r\n          </div>\r\n        )\r\n    }\r\n}

To start, we need to think about what the app's state will look like. Here are some considerations:

We then arrive at this as our initial state:

// ./src/Components/App.js\r\n\r\n// ...\r\nthis.state = {\r\n  loading: true,\r\n  navOpen: false,\r\n  confirmationModalOpen: false,\r\n  confirmationTextVisible: false,\r\n  stepIndex: 0,\r\n  appointmentDateSelected: false,\r\n  appointmentMeridiem: 0,\r\n  validEmail: false,\r\n  validPhone: false,\r\n  smallScreen: window.innerWidth < 768,\r\n  confirmationSnackbarOpen: false\r\n}

Note that appointmentMeridiem takes on 0 or 1, such that 0 => 'AM' and 1 => 'PM'.

4. Draft Out Functionality

We've defined an initial state for our app, but before we build out a view with Material components we'll find it useful to brainstorm what needs done with our data. Our app will boil down to the following functionality:

All in all, unwritten methods included, our App.js now looks like this (method bindings included):

// ./src/Components/App.js\r\n\r\nimport { Component } from 'react'\r\nimport injectTapEventPlugin from 'react-tap-event-plugin'\r\n\r\ninjectTapEventPlugin()\r\n\r\nexport default class App extends Component {\r\n    constructor() {\r\n    super()\r\n      this.state = {\r\n          loading: true,\r\n          navOpen: false,\r\n          confirmationModalOpen: false,\r\n          confirmationTextVisible: false,\r\n          stepIndex: 0,\r\n          appointmentDateSelected: false,\r\n          appointmentMeridiem: 0,\r\n          validEmail: false,\r\n          validPhone: false,\r\n          smallScreen: window.innerWidth < 768,\r\n          confirmationSnackbarOpen: false\r\n        }\r\n       \r\n      //method bindings\r\n      this.handleNavToggle = this.handleNavToggle.bind(this)\r\n      this.handleNextStep = this.handleNextStep.bind(this)\r\n      this.handleSetAppointmentDate = this.handleSetAppointmentDate.bind(this)\r\n      this.handleSetAppointmentSlot = this.handleSetAppointmentSlot.bind(this)\r\n      this.handleSetAppointmentMeridiem = this.handleSetAppointmentMeridiem.bind(this)\r\n      this.handleSubmit = this.handleSubmit.bind(this)\r\n      this.validateEmail = this.validateEmail.bind(this)\r\n      this.validatePhone = this.validatePhone.bind(this)\r\n      this.checkDisableDate = this.checkDisableDate.bind(this)\r\n      this.renderAppointmentTimes = this.renderAppointmentTimes.bind(this)\r\n      this.renderConfirmationString = this.renderConfirmationString.bind(this)\r\n      this.renderAppointmentConfirmation = this.renderAppointmentConfirmation.bind(this)\r\n      this.resize = this.resize.bind(this)\r\n    }\r\n  \r\n  handleNavToggle() {\r\n        \r\n   }\r\n  \r\n  handleNextStep() {\r\n        \r\n    }\r\n  \r\n  handleSetAppointmentDate(date) {\r\n        \r\n    }\r\n  \r\n  handleSetAppointmentSlot(slot) {\r\n        \r\n    }\r\n  \r\n  handleSetAppointmentMeridiem(meridiem) {\r\n        \r\n    }\r\n  \r\n  handleFetch(response) {\r\n        \r\n    }\r\n  \r\n  handleFetchError(err) {\r\n        \r\n    }\r\n  \r\n  handleSubmit() {\r\n        \r\n    }\r\n  \r\n  validateEmail(email) {\r\n        \r\n    }\r\n  \r\n  validatePhone(phoneNumber) {\r\n        \r\n    }\r\n  \r\n  checkDisableDate(date) {\r\n        \r\n    }\r\n  \r\n  renderConfirmationString() {\r\n        \r\n    }\r\n  \r\n  renderAppointmentTimes() {\r\n        \r\n    }\r\n  \r\n  renderAppointmentConfirmation() {\r\n        \r\n    }\r\n  \r\n  resize() {\r\n        \r\n    }\r\n  \r\n  //lifecycle methods\r\ncomponentWillMount() {\r\n        //fetch data from cosmic, watch window width\r\n    }\r\n  componentWillUnmount() {\r\n        //remove window width event listener\r\n    }\r\n  render() {\r\n     //define variables\r\n      return (\r\n        <div>\r\n          </div>\r\n        )\r\n    }\r\n}

5. Build Out the View

Having a basic idea of how our app is going to function, we can start building out its UI. Besides a couple of wrappers and a few custom styles, the majority of our app will be constructed with pre-packaged Material UI components.

In order, we need:

// ./src/Components/App.js\r\n\r\n// .. previous imports\r\n\r\nimport AppBar from 'material-ui/AppBar'\r\nimport Drawer from 'material-ui/Drawer'\r\nimport Dialog from 'material-ui/Dialog'\r\nimport Divider from 'material-ui/Divider'\r\nimport MenuItem from 'material-ui/MenuItem'\r\nimport Card from 'material-ui/Card'\r\nimport DatePicker from 'material-ui/DatePicker'\r\nimport TimePicker from 'material-ui/TimePicker'\r\nimport TextField from 'material-ui/TextField'\r\nimport SelectField from 'material-ui/SelectField'\r\nimport SnackBar from 'material-ui/Snackbar'\r\nimport {\r\n  Step,\r\n  Stepper,\r\n  StepLabel,\r\n  StepContent,\r\n  StepButton\r\n} from 'material-ui/stepper'\r\nimport {\r\n  RadioButton,\r\n  RadioButtonGroup\r\n} from 'material-ui/RadioButton'\r\nimport RaisedButton from 'material-ui/RaisedButton';\r\nimport FlatButton from 'material-ui/FlatButton'\r\nimport logo from './../../dist/assets/logo.svg'\r\n\r\nexport default class App extends Component {\r\n    // ... component methods, lifecycle methods\r\n  render() {\r\n    const { stepIndex, loading, navOpen, smallScreen, confirmationModalOpen, confirmationSnackbarOpen, ...data } = this.state\r\n    const contactFormFilled = data.firstName && data.lastName && data.phone && data.email && data.validPhone && data.validEmail\r\n    const modalActions = [\r\n      <FlatButton\r\n        label="Cancel"\r\n        primary={false}\r\n        onClick={() => this.setState({ confirmationModalOpen : false})} />,\r\n      <FlatButton\r\n        label="Confirm"\r\n        primary={true}\r\n        onClick={() => this.handleSubmit()} />\r\n    ]\r\n    return (\r\n      <div>\r\n        <AppBar\r\n          title={data.siteTitle}\r\n          onLeftIconButtonTouchTap={() => this.handleNavToggle() }/>\r\n        <Drawer\r\n          docked={false}\r\n          width={300}\r\n          open={navOpen}\r\n          onRequestChange={(navOpen) => this.setState({navOpen})} >\r\n          <img src={logo}\r\n               style={{\r\n                 height: 70,\r\n                 marginTop: 50,\r\n                 marginBottom: 30,\r\n                 marginLeft: '50%',\r\n                 transform: 'translateX(-50%)'\r\n               }}/>\r\n          <a style={{textDecoration: 'none'}} href={this.state.homePageUrl}><MenuItem>Home</MenuItem></a>\r\n          <a style={{textDecoration: 'none'}} href={this.state.aboutPageUrl}><MenuItem>About</MenuItem></a>\r\n          <a style={{textDecoration: 'none'}} href={this.state.contactPageUrl}><MenuItem>Contact</MenuItem></a>\r\n\r\n          <MenuItem disabled={true}\r\n                    style={{\r\n                      marginLeft: '50%',\r\n                      transform: 'translate(-50%)'\r\n                    }}>\r\n            {"© Copyright " + moment().format('YYYY')}</MenuItem>\r\n        </Drawer>\r\n        <section style={{\r\n            maxWidth: !smallScreen ? '80%' : '100%',\r\n            margin: 'auto',\r\n            marginTop: !smallScreen ? 20 : 0,\r\n          }}>\r\n          {this.renderConfirmationString()}\r\n          <Card style={{\r\n              padding: '10px 10px 25px 10px',\r\n              height: smallScreen ? '100vh' : null\r\n            }}>\r\n            <Stepper\r\n              activeStep={stepIndex}\r\n              linear={false}\r\n              orientation="vertical">\r\n              <Step disabled={loading}>\r\n                <StepButton onClick={() => this.setState({ stepIndex: 0 })}>\r\n                  Choose an available day for your appointment\r\n                </StepButton>\r\n                <StepContent>\r\n                  <DatePicker\r\n                      style={{\r\n                        marginTop: 10,\r\n                        marginLeft: 10\r\n                      }}\r\n                      value={data.appointmentDate}\r\n                      hintText="Select a date"\r\n                      mode={smallScreen ? 'portrait' : 'landscape'}\r\n                      onChange={(n, date) => this.handleSetAppointmentDate(date)}\r\n                      shouldDisableDate={day => this.checkDisableDate(day)}\r\n                       />\r\n                  </StepContent>\r\n              </Step>\r\n              <Step disabled={ !data.appointmentDate }>\r\n                <StepButton onClick={() => this.setState({ stepIndex: 1 })}>\r\n                  Choose an available time for your appointment\r\n                </StepButton>\r\n                <StepContent>\r\n                  <SelectField\r\n                    floatingLabelText="AM or PM"\r\n                    value={data.appointmentMeridiem}\r\n                    onChange={(evt, key, payload) => this.handleSetAppointmentMeridiem(payload)}\r\n                    selectionRenderer={value => value ? 'PM' : 'AM'}>\r\n                    <MenuItem value={0}>AM</MenuItem>\r\n                    <MenuItem value={1}>PM</MenuItem>\r\n                  </SelectField>\r\n                  <RadioButtonGroup\r\n                    style={{ marginTop: 15,\r\n                             marginLeft: 15\r\n                           }}\r\n                    name="appointmentTimes"\r\n                    defaultSelected={data.appointmentSlot}\r\n                    onChange={(evt, val) => this.handleSetAppointmentSlot(val)}>\r\n                    {this.renderAppointmentTimes()}\r\n                  </RadioButtonGroup>\r\n                </StepContent>\r\n              </Step>\r\n              <Step disabled={ !Number.isInteger(this.state.appointmentSlot) }>\r\n                <StepButton onClick={() => this.setState({ stepIndex: 2 })}>\r\n                  Share your contact information with us and we'll send you a reminder\r\n                </StepButton>\r\n                <StepContent>\r\n                  <section>\r\n                    <TextField\r\n                      style={{ display: 'block' }}\r\n                      name="first_name"\r\n                      hintText="First Name"\r\n                      floatingLabelText="First Name"\r\n                      onChange={(evt, newValue) => this.setState({ firstName: newValue })}/>\r\n                    <TextField\r\n                      style={{ display: 'block' }}\r\n                      name="last_name"\r\n                      hintText="Last Name"\r\n                      floatingLabelText="Last Name"\r\n                      onChange={(evt, newValue) => this.setState({ lastName: newValue })}/>\r\n                    <TextField\r\n                      style={{ display: 'block' }}\r\n                      name="email"\r\n                      hintText="name@mail.com"\r\n                      floatingLabelText="Email"\r\n                      errorText={data.validEmail ? null : 'Enter a valid email address'}\r\n                      onChange={(evt, newValue) => this.validateEmail(newValue)}/>\r\n                    <TextField\r\n                      style={{ display: 'block' }}\r\n                      name="phone"\r\n                      hintText="(888) 888-8888"\r\n                      floatingLabelText="Phone"\r\n                      errorText={data.validPhone ? null: 'Enter a valid phone number'}\r\n                      onChange={(evt, newValue) => this.validatePhone(newValue)} />\r\n                    <RaisedButton\r\n                      style={{ display: 'block' }}\r\n                      label={contactFormFilled ? 'Schedule' : 'Fill out your information to schedule'}\r\n                      labelPosition="before"\r\n                      primary={true}\r\n                      fullWidth={true}\r\n                      onClick={() => this.setState({ confirmationModalOpen: !this.state.confirmationModalOpen })}\r\n                      disabled={!contactFormFilled || data.processed }\r\n                      style={{ marginTop: 20, maxWidth: 100}} />\r\n                  </section>\r\n                </StepContent>\r\n              </Step>\r\n            </Stepper>\r\n          </Card>\r\n          <Dialog\r\n            modal={true}\r\n            open={confirmationModalOpen}\r\n            actions={modalActions}\r\n            title="Confirm your appointment">\r\n            {this.renderAppointmentConfirmation()}\r\n          </Dialog>\r\n          <SnackBar\r\n            open={confirmationSnackbarOpen || loading}\r\n            message={loading ? 'Loading... ' : data.confirmationSnackbarMessage || ''}\r\n            autoHideDuration={10000}\r\n            onRequestClose={() => this.setState({ confirmationSnackbarOpen: false })} />\r\n        </section>\r\n      </div>\r\n    )\r\n  }\r\n}

Before moving on, notice that, because they take some extra logic to render, we'll be handing the radio buttons for the time slots and the confirmation strings in their own methods.

With the view components in place, our last big step will be to write all of the functionality we've mapped out.

6. Component Lifecycle Methods

componentWillMount()

The first step in adding functionality will be to write out the componentWillMount() method. In componentWillMount() we'll use axios to fetch our configuration and appointments data from our backend. Again, we're using our backend as a middleman so we can selectively expose data to our front end and omit things like users' contact information.

// ./src/Components/App.js\r\n\r\n// previous imports\r\nimport async from 'async'\r\nimport axios from 'axios'\r\n\r\nexport default class App extends Component {\r\nconstructor() {}\r\n  \r\n  componentWillMount() {\r\n    async.series({\r\n        configs(callback) {\r\n          axios.get(HOST + 'api/config').then(res =>\r\n            callback(null, res.data.data)\r\n          )\r\n        },\r\n        appointments(callback) {\r\n          axios.get(HOST + 'api/appointments').then(res => {\r\n            callback(null, res.data.data)\r\n          })\r\n       }\r\n      }, (err,response) => {\r\n        err ? this.handleFetchError(err) : this.handleFetch(response)\r\n    })\r\n    addEventListener('resize', this.resize)\r\n    }\r\n  \r\n // rest...\r\n}

We use async to make our axios calls in series, and name them so we have access to them as response.configsand response.appointments in handleFetch(). We also use componentWillMount to start tracking the window width with resize().

componentWillUnmount()

Practicing good form, we'll remove the event listener in componentWillUnmount().

// ./src/Components/App.js\r\n\r\n// previous imports\r\nimport async from 'async'\r\nimport axios from 'axios'\r\n\r\nexport default class App extends Component {\r\nconstructor() {}\r\n  \r\n  componentWillUnmount() {\r\nremoveEventListener('resize', this.resize)\r\n    }\r\n  \r\n // rest...\r\n}

7. Processing Data

Having fetched the data we need, we'll process a successful fetch with handleFetch() and an error with handleFetchError(). In handleFetch() we'll build a schedule of appointmens to store in the state, such that schedule = { appointmentDate: [slots] }. We also use this method to store the app's configuration data in the state.

handleFetch()

handleFetch(response) {\r\nconst { configs, appointments } = response\r\n    const initSchedule = {}\r\n    const today = moment().startOf('day')\r\n    initSchedule[today.format('YYYY-DD-MM')] = true\r\n    const schedule = !appointments.length ? initSchedule : appointments.reduce((currentSchedule, appointment) => {\r\n      const { date, slot } = appointment\r\n      const dateString = moment(date, 'YYYY-DD-MM').format('YYYY-DD-MM')\r\n      !currentSchedule[date] ? currentSchedule[dateString] = Array(8).fill(false) : null\r\n      Array.isArray(currentSchedule[dateString]) ?\r\n        currentSchedule[dateString][slot] = true : null\r\n      return currentSchedule\r\n    }, initSchedule)\r\n\r\n    for (let day in schedule) {\r\n      let slots = schedule[day]\r\n      slots.length ? (slots.every(slot => slot === true)) ? schedule[day] = true : null : null\r\n    }\r\n\r\n    this.setState({\r\n      schedule,\r\n      siteTitle: configs.site_title,\r\n      aboutPageUrl: configs.about_page_url,\r\n      contactPageUrl: configs.contact_page_url,\r\n      homePageUrl: configs.home_page_url,\r\n      loading: false\r\n    })\r\n  }

handleFetchError()

For handling errors, we'll simply show the users an error message in the SnackBar.

handleFetchError(err) {\r\nconsole.log('Error fetching data:' + err)\r\n    this.setState({ confirmationSnackbarMessage: 'Error fetching data', confirmationSnackbarOpen: true })\r\n}

8. Handle UI Changes

We need to manage the state whenever the user opens the Drawer, moves onto another step, or if the browser width changes. First we'll handle the drawer toggle.

handleNavToggle() {\r\n  return this.setState({ navOpen: !this.state.navOpen })\r\n}

Then, as long as the user isn't on the last step, we'll handle incrementing the step.

handleNextStep() {\r\n  const { stepIndex } = this.state\r\n  return (stepIndex < 3) ? this.setState({ stepIndex: stepIndex + 1}) : null\r\n}

Finally, we'll simply change the state on resize if the window width is less than 768px.

resize() {\r\n  this.setState({ smallScreen: window.innerWidth < 768 })\r\n}

9. Handle Setting Appointment Data

When the user selects appointment options in steps one and two, we need three simple setters to change the state to reflect those selections.

handleSetAppointmentDate(date) {\r\n  this.handleNextStep()\r\n  this.setState({ appointmentDate: date, confirmationTextVisible: true })\r\n}\r\n\r\nhandleSetAppointmentSlot(slot) {\r\n  this.handleNextStep()\r\n  this.setState({ appointmentSlot: slot })\r\n}\r\n\r\nhandleSetAppointmentMeridiem(meridiem) {\r\n  this.setState({ appointmentMeridiem: meridiem})\r\n}

10. Handle Validations

We need to validate the user's inputted email address, phone number, and we need to feed the DatePickercomponent a function to check which days should be disabled. Although naive, we'll be using regex's to check the inputs for simplicities sake.

validateEmail(email) {\r\n  const regex = /^(([^<>()\\[\\]\\.,;:\\s@\\"]+(\\.[^<>()\\[\\]\\.,;:\\s@\\"]+)*)|(\\".+\\"))@(([^<>()[\\]\\.,;:\\s@\\"]+\\.)+[^<>()[\\]\\.,;:\\s@\\"]{2,})$/i\r\n  return regex.test(email) ? this.setState({ email: email, validEmail: true }) : this.setState({ validEmail: false })\r\n}\r\n\r\nvalidatePhone(phoneNumber) {\r\n  const regex = /^(1\\s|1|)?((\\(\\d{3}\\))|\\d{3})(\\-|\\s)?(\\d{3})(\\-|\\s)?(\\d{4})$/\r\n  return regex.test(phoneNumber) ? this.setState({ phone: phoneNumber, validPhone: true }) : this.setState({ validPhone: false })\r\n}

For checking if a date should be disabled, we need to check if the date passed by DatePicker is either in state.schedule or is today.

  checkDisableDate(day) {\r\n    const dateString = moment(day).format('YYYY-DD-MM')\r\n    return this.state.schedule[dateString] === true || moment(day).startOf('day').diff(moment().startOf('day')) < 0\r\n  }

11. Build the Render Methods for the confirmation strings and the time slot radio buttons

In our render() lifecycle method we abstracted out the logic for displaying the dynamic confirmation string above the Card, the confirmation details we'll show in the confirmation modal, and the radio buttons for selecting a time slot.

Starting with the confirmation string, we'll display the parts of it that correspond to inputted data only as it's entered.

renderConfirmationString() {\r\n  const spanStyle = {color: '#00bcd4'}\r\n  return this.state.confirmationTextVisible ? <h2 style={{ textAlign: this.state.smallScreen ? 'center' : 'left', color: '#bdbdbd', lineHeight: 1.5, padding: '0 10px', fontFamily: 'Roboto'}}>\r\n    { <span>\r\n     Scheduling a\r\n\r\n     <span style={spanStyle}> 1 hour </span>\r\n\r\nappointment {this.state.appointmentDate && <span>\r\n  on <span style={spanStyle}>{moment(this.state.appointmentDate).format('dddd[,] MMMM Do')}</span>\r\n             </span>} {Number.isInteger(this.state.appointmentSlot) && <span>at <span style={spanStyle}>{moment().hour(9).minute(0).add(this.state.appointmentSlot, 'hours').format('h:mm a')}</span></span>}\r\n             </span>}\r\n             </h2> : null\r\n}

Then, similarly, we'll let the user verify their data before confirming submission.

renderAppointmentConfirmation() {\r\n  const spanStyle = { color: '#00bcd4' }\r\n  return <section>\r\n    <p>Name: <span style={spanStyle}>{this.state.firstName} {this.state.lastName}</span></p>\r\n      <p>Number: <span style={spanStyle}>{this.state.phone}</span></p>\r\n        <p>Email: <span style={spanStyle}>{this.state.email}</span></p>\r\n          <p>Appointment: <span style={spanStyle}>{moment(this.state.appointmentDate).format('dddd[,] MMMM Do[,] YYYY')}</span> at <span style={spanStyle}>{moment().hour(9).minute(0).add(this.state.appointmentSlot, 'hours').format('h:mm a')}</span></p>\r\n  </section>\r\n}

Finally, we'll write the method to render the appointment slot radio buttons. To do this we first have to filter the slots by availabity and by whether AM or PM is selected. Both are simple checks; for the first we see if it exists in state.schedule, for the later, we check the meridiem part with moment().format('a'). To compute the time string in 12 hour format, we add the slot to 9AM in units of hours.

renderAppointmentTimes() {\r\n  if (!this.state.loading) {\r\n    const slots = [...Array(8).keys()]\r\n    return slots.map(slot => {\r\n      const appointmentDateString = moment(this.state.appointmentDate).format('YYYY-DD-MM')\r\n      const t1 = moment().hour(9).minute(0).add(slot, 'hours')\r\n      const t2 = moment().hour(9).minute(0).add(slot + 1, 'hours')\r\n      const scheduleDisabled = this.state.schedule[appointmentDateString] ? this.state.schedule[moment(this.state.appointmentDate).format('YYYY-DD-MM')][slot] : false\r\n      const meridiemDisabled = this.state.appointmentMeridiem ? t1.format('a') === 'am' : t1.format('a') === 'pm'\r\n      return <RadioButton\r\n      label={t1.format('h:mm a') + ' - ' + t2.format('h:mm a')}\r\n      key={slot}\r\n      value={slot}\r\n      style={{marginBottom: 15, display: meridiemDisabled ? 'none' : 'inherit'}}\r\n                     disabled={scheduleDisabled || meridiemDisabled}/>\r\n                     })\r\n  } else {\r\n    return null\r\n  }\r\n}

13. Handle the Form Submission

Once we show the user the confirmation modal, upon final submission we'll send the data to our backend with an axios POST. We'll notifty them of either a success or an error.

  handleSubmit() {\r\n    const appointment = {\r\n      date: moment(this.state.appointmentDate).format('YYYY-DD-MM'),\r\n      slot: this.state.appointmentSlot,\r\n      name: this.state.firstName + ' ' + this.state.lastName,\r\n      email: this.state.email,\r\n      phone: this.state.phone\r\n    }\r\n    axios.post(HOST + 'api/appointments', )\r\n    axios.post(HOST + 'api/appointments', appointment)\r\n    .then(response => this.setState({ confirmationSnackbarMessage: "Appointment succesfully added!", confirmationSnackbarOpen: true, processed: true }))\r\n    .catch(err => {\r\n      console.log(err)\r\n      return this.setState({ confirmationSnackbarMessage: "Appointment failed to save.", confirmationSnackbarOpen: true })\r\n    })\r\n  }

14. Conclusion: Seeing it All Together

Before moving on to building the backend, here's what we have as our final product.

// ./src/Components/App.js\r\n\r\nimport { Component } from 'react'\r\nimport injectTapEventPlugin from 'react-tap-event-plugin'\r\nimport axios from 'axios'\r\nimport async from 'async'\r\nimport moment from 'moment'\r\nimport AppBar from 'material-ui/AppBar'\r\nimport Drawer from 'material-ui/Drawer'\r\nimport Dialog from 'material-ui/Dialog'\r\nimport Divider from 'material-ui/Divider'\r\nimport MenuItem from 'material-ui/MenuItem'\r\nimport Card from 'material-ui/Card'\r\nimport DatePicker from 'material-ui/DatePicker'\r\nimport TimePicker from 'material-ui/TimePicker'\r\nimport TextField from 'material-ui/TextField'\r\nimport SelectField from 'material-ui/SelectField'\r\nimport SnackBar from 'material-ui/Snackbar'\r\nimport {\r\n  Step,\r\n  Stepper,\r\n  StepLabel,\r\n  StepContent,\r\n  StepButton\r\n} from 'material-ui/stepper'\r\nimport {\r\n  RadioButton,\r\n  RadioButtonGroup\r\n} from 'material-ui/RadioButton'\r\nimport RaisedButton from 'material-ui/RaisedButton';\r\nimport FlatButton from 'material-ui/FlatButton'\r\nimport logo from './../../dist/assets/logo.svg'\r\n\r\ninjectTapEventPlugin()\r\nconst HOST = PRODUCTION ? '/' : 'http://localhost:3000/'\r\n\r\nexport default class App extends Component {\r\n  constructor() {\r\n    super()\r\n    this.state = {\r\n      loading: true,\r\n      navOpen: false,\r\n      confirmationModalOpen: false,\r\n      confirmationTextVisible: false,\r\n      stepIndex: 0,\r\n      appointmentDateSelected: false,\r\n      appointmentMeridiem: 0,\r\n      validEmail: true,\r\n      validPhone: true,\r\n      smallScreen: window.innerWidth < 768,\r\n      confirmationSnackbarOpen: false\r\n    }\r\n\r\n    this.handleNavToggle = this.handleNavToggle.bind(this)\r\n    this.handleNextStep = this.handleNextStep.bind(this)\r\n    this.handleSetAppointmentDate = this.handleSetAppointmentDate.bind(this)\r\n    this.handleSetAppointmentSlot = this.handleSetAppointmentSlot.bind(this)\r\n    this.handleSetAppointmentMeridiem = this.handleSetAppointmentMeridiem.bind(this)\r\n    this.handleSubmit = this.handleSubmit.bind(this)\r\n    this.validateEmail = this.validateEmail.bind(this)\r\n    this.validatePhone = this.validatePhone.bind(this)\r\n    this.checkDisableDate = this.checkDisableDate.bind(this)\r\n    this.renderAppointmentTimes = this.renderAppointmentTimes.bind(this)\r\n    this.renderConfirmationString = this.renderConfirmationString.bind(this)\r\n    this.renderAppointmentConfirmation = this.renderAppointmentConfirmation.bind(this)\r\n    this.resize = this.resize.bind(this)\r\n  }\r\n\r\n  handleNavToggle() {\r\n    return this.setState({ navOpen: !this.state.navOpen })\r\n  }\r\n\r\n  handleNextStep() {\r\n    const { stepIndex } = this.state\r\n    return (stepIndex < 3) ? this.setState({ stepIndex: stepIndex + 1}) : null\r\n  }\r\n\r\n  handleSetAppointmentDate(date) {\r\n    this.handleNextStep()\r\n    this.setState({ appointmentDate: date, confirmationTextVisible: true })\r\n  }\r\n\r\n  handleSetAppointmentSlot(slot) {\r\n    this.handleNextStep()\r\n    this.setState({ appointmentSlot: slot })\r\n  }\r\n\r\n  handleSetAppointmentMeridiem(meridiem) {\r\n    this.setState({ appointmentMeridiem: meridiem})\r\n  }\r\n\r\n  handleFetch(response) {\r\n    const { configs, appointments } = response\r\n    const initSchedule = {}\r\n    const today = moment().startOf('day')\r\n    initSchedule[today.format('YYYY-DD-MM')] = true\r\n    const schedule = !appointments.length ? initSchedule : appointments.reduce((currentSchedule, appointment) => {\r\n      const { date, slot } = appointment\r\n      const dateString = moment(date, 'YYYY-DD-MM').format('YYYY-DD-MM')\r\n      !currentSchedule[date] ? currentSchedule[dateString] = Array(8).fill(false) : null\r\n      Array.isArray(currentSchedule[dateString]) ?\r\n        currentSchedule[dateString][slot] = true : null\r\n      return currentSchedule\r\n    }, initSchedule)\r\n\r\n    for (let day in schedule) {\r\n      let slots = schedule[day]\r\n      slots.length ? (slots.every(slot => slot === true)) ? schedule[day] = true : null : null\r\n    }\r\n\r\n    this.setState({\r\n      schedule,\r\n      siteTitle: configs.site_title,\r\n      aboutPageUrl: configs.about_page_url,\r\n      contactPageUrl: configs.contact_page_url,\r\n      homePageUrl: configs.home_page_url,\r\n      loading: false\r\n    })\r\n  }\r\n\r\n  handleFetchError(err) {\r\n    console.log('Error fetching data:' + err)\r\n    this.setState({ confirmationSnackbarMessage: 'Error fetching data', confirmationSnackbarOpen: true })\r\n  }\r\n\r\n  handleSubmit() {\r\n    const appointment = {\r\n      date: moment(this.state.appointmentDate).format('YYYY-DD-MM'),\r\n      slot: this.state.appointmentSlot,\r\n      name: this.state.firstName + ' ' + this.state.lastName,\r\n      email: this.state.email,\r\n      phone: this.state.phone\r\n    }\r\n    axios.post(HOST + 'api/appointments', )\r\n    axios.post(HOST + 'api/appointments', appointment)\r\n    .then(response => this.setState({ confirmationSnackbarMessage: "Appointment succesfully added!", confirmationSnackbarOpen: true, processed: true }))\r\n    .catch(err => {\r\n      console.log(err)\r\n      return this.setState({ confirmationSnackbarMessage: "Appointment failed to save.", confirmationSnackbarOpen: true })\r\n    })\r\n  }\r\n\r\n  validateEmail(email) {\r\n    const regex = /^(([^<>()\\[\\]\\.,;:\\s@\\"]+(\\.[^<>()\\[\\]\\.,;:\\s@\\"]+)*)|(\\".+\\"))@(([^<>()[\\]\\.,;:\\s@\\"]+\\.)+[^<>()[\\]\\.,;:\\s@\\"]{2,})$/i\r\n    return regex.test(email) ? this.setState({ email: email, validEmail: true }) : this.setState({ validEmail: false })\r\n  }\r\n\r\n  validatePhone(phoneNumber) {\r\n    const regex = /^(1\\s|1|)?((\\(\\d{3}\\))|\\d{3})(\\-|\\s)?(\\d{3})(\\-|\\s)?(\\d{4})$/\r\n    return regex.test(phoneNumber) ? this.setState({ phone: phoneNumber, validPhone: true }) : this.setState({ validPhone: false })\r\n  }\r\n\r\n  checkDisableDate(day) {\r\n    const dateString = moment(day).format('YYYY-DD-MM')\r\n    return this.state.schedule[dateString] === true || moment(day).startOf('day').diff(moment().startOf('day')) < 0\r\n  }\r\n\r\n  renderConfirmationString() {\r\n    const spanStyle = {color: '#00bcd4'}\r\n    return this.state.confirmationTextVisible ? <h2 style={{ textAlign: this.state.smallScreen ? 'center' : 'left', color: '#bdbdbd', lineHeight: 1.5, padding: '0 10px', fontFamily: 'Roboto'}}>\r\n      { <span>\r\n        Scheduling a\r\n\r\n          <span style={spanStyle}> 1 hour </span>\r\n\r\n        appointment {this.state.appointmentDate && <span>\r\n          on <span style={spanStyle}>{moment(this.state.appointmentDate).format('dddd[,] MMMM Do')}</span>\r\n      </span>} {Number.isInteger(this.state.appointmentSlot) && <span>at <span style={spanStyle}>{moment().hour(9).minute(0).add(this.state.appointmentSlot, 'hours').format('h:mm a')}</span></span>}\r\n      </span>}\r\n    </h2> : null\r\n  }\r\n\r\n  renderAppointmentTimes() {\r\n    if (!this.state.loading) {\r\n      const slots = [...Array(8).keys()]\r\n      return slots.map(slot => {\r\n        const appointmentDateString = moment(this.state.appointmentDate).format('YYYY-DD-MM')\r\n        const t1 = moment().hour(9).minute(0).add(slot, 'hours')\r\n        const t2 = moment().hour(9).minute(0).add(slot + 1, 'hours')\r\n        const scheduleDisabled = this.state.schedule[appointmentDateString] ? this.state.schedule[moment(this.state.appointmentDate).format('YYYY-DD-MM')][slot] : false\r\n        const meridiemDisabled = this.state.appointmentMeridiem ? t1.format('a') === 'am' : t1.format('a') === 'pm'\r\n        return <RadioButton\r\n          label={t1.format('h:mm a') + ' - ' + t2.format('h:mm a')}\r\n          key={slot}\r\n          value={slot}\r\n          style={{marginBottom: 15, display: meridiemDisabled ? 'none' : 'inherit'}}\r\n          disabled={scheduleDisabled || meridiemDisabled}/>\r\n      })\r\n    } else {\r\n      return null\r\n    }\r\n  }\r\n\r\n  renderAppointmentConfirmation() {\r\n    const spanStyle = { color: '#00bcd4' }\r\n    return <section>\r\n      <p>Name: <span style={spanStyle}>{this.state.firstName} {this.state.lastName}</span></p>\r\n      <p>Number: <span style={spanStyle}>{this.state.phone}</span></p>\r\n      <p>Email: <span style={spanStyle}>{this.state.email}</span></p>\r\n      <p>Appointment: <span style={spanStyle}>{moment(this.state.appointmentDate).format('dddd[,] MMMM Do[,] YYYY')}</span> at <span style={spanStyle}>{moment().hour(9).minute(0).add(this.state.appointmentSlot, 'hours').format('h:mm a')}</span></p>\r\n    </section>\r\n  }\r\n\r\n  resize() {\r\n    this.setState({ smallScreen: window.innerWidth < 768 })\r\n  }\r\n\r\n  componentWillMount() {\r\n    async.series({\r\n      configs(callback) {\r\n        axios.get(HOST + 'api/config').then(res =>\r\n          callback(null, res.data.data)\r\n        )\r\n      },\r\n      appointments(callback) {\r\n        axios.get(HOST + 'api/appointments').then(res => {\r\n          callback(null, res.data.data)\r\n        })\r\n      }\r\n    }, (err,response) => {\r\n      err ? this.handleFetchError(err) : this.handleFetch(response)\r\n    })\r\n    addEventListener('resize', this.resize)\r\n  }\r\n\r\n  componentWillUnmount() {\r\n    removeEventListener('resize', this.resize)\r\n  }\r\n\r\n  render() {\r\n    const { stepIndex, loading, navOpen, smallScreen, confirmationModalOpen, confirmationSnackbarOpen, ...data } = this.state\r\n    const contactFormFilled = data.firstName && data.lastName && data.phone && data.email && data.validPhone && data.validEmail\r\n    const modalActions = [\r\n      <FlatButton\r\n        label="Cancel"\r\n        primary={false}\r\n        onClick={() => this.setState({ confirmationModalOpen : false})} />,\r\n      <FlatButton\r\n        label="Confirm"\r\n        primary={true}\r\n        onClick={() => this.handleSubmit()} />\r\n    ]\r\n    return (\r\n      <div>\r\n        <AppBar\r\n          title={data.siteTitle}\r\n          onLeftIconButtonTouchTap={() => this.handleNavToggle() }/>\r\n        <Drawer\r\n          docked={false}\r\n          width={300}\r\n          open={navOpen}\r\n          onRequestChange={(navOpen) => this.setState({navOpen})} >\r\n          <img src={logo}\r\n               style={{\r\n                 height: 70,\r\n                 marginTop: 50,\r\n                 marginBottom: 30,\r\n                 marginLeft: '50%',\r\n                 transform: 'translateX(-50%)'\r\n               }}/>\r\n          <a style={{textDecoration: 'none'}} href={this.state.homePageUrl}><MenuItem>Home</MenuItem></a>\r\n          <a style={{textDecoration: 'none'}} href={this.state.aboutPageUrl}><MenuItem>About</MenuItem></a>\r\n          <a style={{textDecoration: 'none'}} href={this.state.contactPageUrl}><MenuItem>Contact</MenuItem></a>\r\n\r\n          <MenuItem disabled={true}\r\n                    style={{\r\n                      marginLeft: '50%',\r\n                      transform: 'translate(-50%)'\r\n                    }}>\r\n            {"© Copyright " + moment().format('YYYY')}</MenuItem>\r\n        </Drawer>\r\n        <section style={{\r\n            maxWidth: !smallScreen ? '80%' : '100%',\r\n            margin: 'auto',\r\n            marginTop: !smallScreen ? 20 : 0,\r\n          }}>\r\n          {this.renderConfirmationString()}\r\n          <Card style={{\r\n              padding: '10px 10px 25px 10px',\r\n              height: smallScreen ? '100vh' : null\r\n            }}>\r\n            <Stepper\r\n              activeStep={stepIndex}\r\n              linear={false}\r\n              orientation="vertical">\r\n              <Step disabled={loading}>\r\n                <StepButton onClick={() => this.setState({ stepIndex: 0 })}>\r\n                  Choose an available day for your appointment\r\n                </StepButton>\r\n                <StepContent>\r\n                  <DatePicker\r\n                      style={{\r\n                        marginTop: 10,\r\n                        marginLeft: 10\r\n                      }}\r\n                      value={data.appointmentDate}\r\n                      hintText="Select a date"\r\n                      mode={smallScreen ? 'portrait' : 'landscape'}\r\n                      onChange={(n, date) => this.handleSetAppointmentDate(date)}\r\n                      shouldDisableDate={day => this.checkDisableDate(day)}\r\n                       />\r\n                  </StepContent>\r\n              </Step>\r\n              <Step disabled={ !data.appointmentDate }>\r\n                <StepButton onClick={() => this.setState({ stepIndex: 1 })}>\r\n                  Choose an available time for your appointment\r\n                </StepButton>\r\n                <StepContent>\r\n                  <SelectField\r\n                    floatingLabelText="AM or PM"\r\n                    value={data.appointmentMeridiem}\r\n                    onChange={(evt, key, payload) => this.handleSetAppointmentMeridiem(payload)}\r\n                    selectionRenderer={value => value ? 'PM' : 'AM'}>\r\n                    <MenuItem value={0}>AM</MenuItem>\r\n                    <MenuItem value={1}>PM</MenuItem>\r\n                  </SelectField>\r\n                  <RadioButtonGroup\r\n                    style={{ marginTop: 15,\r\n                             marginLeft: 15\r\n                           }}\r\n                    name="appointmentTimes"\r\n                    defaultSelected={data.appointmentSlot}\r\n                    onChange={(evt, val) => this.handleSetAppointmentSlot(val)}>\r\n                    {this.renderAppointmentTimes()}\r\n                  </RadioButtonGroup>\r\n                </StepContent>\r\n              </Step>\r\n              <Step disabled={ !Number.isInteger(this.state.appointmentSlot) }>\r\n                <StepButton onClick={() => this.setState({ stepIndex: 2 })}>\r\n                  Share your contact information with us and we'll send you a reminder\r\n                </StepButton>\r\n                <StepContent>\r\n                  <section>\r\n                    <TextField\r\n                      style={{ display: 'block' }}\r\n                      name="first_name"\r\n                      hintText="First Name"\r\n                      floatingLabelText="First Name"\r\n                      onChange={(evt, newValue) => this.setState({ firstName: newValue })}/>\r\n                    <TextField\r\n                      style={{ display: 'block' }}\r\n                      name="last_name"\r\n                      hintText="Last Name"\r\n                      floatingLabelText="Last Name"\r\n                      onChange={(evt, newValue) => this.setState({ lastName: newValue })}/>\r\n                    <TextField\r\n                      style={{ display: 'block' }}\r\n                      name="email"\r\n                      hintText="name@mail.com"\r\n                      floatingLabelText="Email"\r\n                      errorText={data.validEmail ? null : 'Enter a valid email address'}\r\n                      onChange={(evt, newValue) => this.validateEmail(newValue)}/>\r\n                    <TextField\r\n                      style={{ display: 'block' }}\r\n                      name="phone"\r\n                      hintText="(888) 888-8888"\r\n                      floatingLabelText="Phone"\r\n                      errorText={data.validPhone ? null: 'Enter a valid phone number'}\r\n                      onChange={(evt, newValue) => this.validatePhone(newValue)} />\r\n                    <RaisedButton\r\n                      style={{ display: 'block' }}\r\n                      label={contactFormFilled ? 'Schedule' : 'Fill out your information to schedule'}\r\n                      labelPosition="before"\r\n                      primary={true}\r\n                      fullWidth={true}\r\n                      onClick={() => this.setState({ confirmationModalOpen: !this.state.confirmationModalOpen })}\r\n                      disabled={!contactFormFilled || data.processed }\r\n                      style={{ marginTop: 20, maxWidth: 100}} />\r\n                  </section>\r\n                </StepContent>\r\n              </Step>\r\n            </Stepper>\r\n          </Card>\r\n          <Dialog\r\n            modal={true}\r\n            open={confirmationModalOpen}\r\n            actions={modalActions}\r\n            title="Confirm your appointment">\r\n            {this.renderAppointmentConfirmation()}\r\n          </Dialog>\r\n          <SnackBar\r\n            open={confirmationSnackbarOpen || loading}\r\n            message={loading ? 'Loading... ' : data.confirmationSnackbarMessage || ''}\r\n            autoHideDuration={10000}\r\n            onRequestClose={() => this.setState({ confirmationSnackbarOpen: false })} />\r\n        </section>\r\n      </div>\r\n    )\r\n  }\r\n}

Part 2: Building the Backend

1. Installations and Directory Structure

Our backend will be simple. All it needs to do is act as an intermediary between our frontend and Cosmic and handle interfacing with Twilio.

First, we'll get our directory structure in place.

AppointmentScheduler\r\n|\r\n|--public\r\n|--app.js\r\n|--.gitignore\r\n|--package.json\r\n

public will be where we serve our built frontend from and .gitignore will hide node_modules.

# .gitignore\r\n\r\nnode_modules\r\n

We'll use the following packages:

Run yarn init, then edit package.json with a start script so we can deploy on Cosmic.

{\r\n    // etc...\r\n  "scripts": {\r\n        "start": "node app.js"\r\n    }\r\n}

Then, before we start working:

yarn add axios body-parser cors cosmicjs express express-session http moment morgan path twilio

2. Outline the Backend's Structure

Our Express app will be fairly basic as far as configuration and middleware goes. For Appointment submissions we'll handle post requests at /api/appointments. We'll serve our site configs and appointments from /api/config and /api/appointments respectively. Finally, since our Frontend is an SPA, we'll serve index.html from / and redirect all other requests there.

Before getting into much logic, our server will start off looking like this:

const express = require('express')\r\nconst path = require('path')\r\nconst morgan = require('morgan')\r\nconst bodyParser = require('body-parser')\r\nconst cors = require('cors')\r\nconst config = require('./config')\r\nconst http = require('http')\r\nconst Cosmic = require('cosmicjs')\r\nconst twilio = require('twilio')\r\nconst moment = require('moment')\r\nconst axios = require('axios')\r\n\r\nconst config = {\r\n  bucket: {\r\n    slug: process.env.COSMIC_BUCKET,\r\n    read_key: process.env.COSMIC_READ_KEY,\r\n    write_key: process.env.COSMIC_WRITE_KEY\r\n  },\r\n  twilio: {\r\n    auth: process.env.TWILIO_AUTH,\r\n    sid: process.env.TWILIO_SID,\r\n    number: process.env.TWILIO_NUMBER\r\n  }\r\n}\r\n\r\nconst app = express()\r\nconst env = process.env.NODE_ENV || 'development'\r\nconst twilioSid = config.twilio.sid\r\nconst twilioAuth = config.twilio.auth\r\nconst twilioClient = twilio(twilioSid, twilioAuth)\r\nconst twilioNumber = config.twilio.number\r\n\r\napp.set('trust proxy', 1)\r\napp.use(session({\r\n  secret: 'sjcimsoc',\r\n  resave: false,\r\n  saveUninitialized: true,\r\n  cookie: { secure: false }\r\n}))\r\napp.use(cors())\r\napp.use(morgan('dev'))\r\napp.use(bodyParser.json())\r\napp.use(bodyParser.urlencoded({ extended: true }))\r\napp.use(express.static(path.join(__dirname, 'public')))\r\napp.set('port', process.env.PORT || 3000)\r\n\r\napp.post('/api/appointments', (req, res) => {\r\n    //handle posting new appointments to Cosmic\r\n  //and sending a confirmation text with Twilio\r\n})\r\n\r\napp.get('/api/config', (req, res) => {\r\n    //fetch configs from Cosmic, expose to frontend\r\n})\r\n\r\napp.get('/api/appointments', (req, res) => {\r\n    //fetch appointments from Cosmic, expose to frontend without personal data\r\n})\r\n\r\napp.get('/', (req, res) => {\r\n    res.send('index.html')\r\n})\r\n\r\napp.get('*', (req, res) => {\r\n    res.redirect('/')\r\n})\r\n\r\nhttp.createServer(app).listen(app.get('port'), () =>\r\n  console.log('Server running at: ' + app.get('port'))\r\n)

Note: we'll provide all process.env variables at deployment with Cosmic. Cosmic-specific variables are supplied automatically.

3. Handle Post Requests

Two things need to happen here. We'll use the official Twilio client to send a text to the user, and we'll use axios to make a POST request to the Cosmic API. Before doing both, we'll strip the user-inputted phone number of any non-digits and compute the time from the selected slot. We have:

app.post('/api/appointments', (req, res) => {\r\n  const appointment = req.body\r\n  appointment.phone = appointment.phone.replace(/\\D/g,'')\r\n  const date = moment(appointment.date, 'YYYY-DD-MM').startOf('day')\r\n  const time = date.hour(9).add(appointment.slot, 'hours')\r\n  const smsBody = `${appointment.name}, this message is to confirm your appointment at ${time.format('h:mm a')} on ${date.format('dddd MMMM Do[,] YYYY')}.`\r\n  //send confirmation message to user\r\n  twilioClient.messages.create({\r\n    to: '+1' + appointment.phone,\r\n    from: twilioNumber,\r\n    body: smsBody\r\n  }, (err, message) => console.log(message, err))\r\n  //push to cosmic\r\n  const cosmicObject = {\r\n    "title": appointment.name,\r\n    "type_slug": "appointments",\r\n    "write_key": config.bucket.write_key,\r\n    "metafields": [\r\n      {\r\n        "key": "date",\r\n        "type": "text",\r\n        "value": date.format('YYYY-DD-MM')\r\n      },\r\n      {\r\n        "key": "slot",\r\n        "type": "text",\r\n        "value": appointment.slot\r\n      },\r\n      {\r\n        "key": "email",\r\n        "type": "text",\r\n        "value": appointment.email\r\n      },{\r\n        "key": "phone",\r\n        "type": "text",\r\n        "value": appointment.phone //which is now stripped of all non-digits\r\n      }\r\n    ]\r\n  }\r\n  axios.post(`https://api.cosmicjs.com/v1/${config.bucket.slug}/add-object`, cosmicObject)\r\n  .then(response => res.json({ data: 'success' })).catch(err => res.json({ data: 'error '}))\r\n})

4. Expose Site Configs

We'll simply use cosmicjs to get the site-config object we need for the frontend to display links in the navigation.

app.get('/api/config', (req,res) => {\r\n  Cosmic.getObject(config, { slug: 'site-config' }, (err, response) => {\r\n    const data = response.object.metadata\r\n    err ? res.status(500).json({ data: 'error' }) : res.json({ data })\r\n  })\r\n})

5. Expose Appointments

Where it's definitely redundant to expose the site configurations through our backends API, its definitely important that we're doing it with the Appointment objects. First, we can conveniently reorganize the data to expose only what we need, but second, and infinitely more important, we don't publicly expose our users' personal information. We'll use cosmicjs to fetch all Appointment objects, but only expose an array of objects with the form { date, slot }.

app.get('/api/appointments', (req, res) => {\r\n  Cosmic.getObjectType(config, { type_slug: 'appointments' }, (err, response) => {\r\n    const appointments = response.objects.all ? response.objects.all.map(appointment => {\r\n      return {\r\n        date: appointment.metadata.date,\r\n        slot: appointment.metadata.slot\r\n      }\r\n    }) : {}\r\n    res.json({ data: appointments })\r\n  })\r\n})

6. The Finished Product

Within minutes, entirely thanks to the simplicity of Express, CosmicJs's official client, and Twilio's official client, we have a backend that does everything we wanted it to do and nothing more. Pure zen.

const express = require('express')\r\nconst path = require('path')\r\nconst morgan = require('morgan')\r\nconst bodyParser = require('body-parser')\r\nconst cors = require('cors')\r\nconst config = require('./config')\r\nconst http = require('http')\r\nconst Cosmic = require('cosmicjs')\r\nconst twilio = require('twilio')\r\nconst moment = require('moment')\r\nconst axios = require('axios')\r\n\r\nconst config = {\r\n  bucket: {\r\n    slug: process.env.COSMIC_BUCKET,\r\n    read_key: process.env.COSMIC_READ_KEY,\r\n    write_key: process.env.COSMIC_WRITE_KEY\r\n  },\r\n  twilio: {\r\n    auth: process.env.TWILIO_AUTH,\r\n    sid: process.env.TWILIO_SID,\r\n    number: process.env.TWILIO_NUMBER\r\n  }\r\n}\r\n\r\nconst app = express()\r\nconst env = process.env.NODE_ENV || 'development'\r\nconst twilioSid = config.twilio.sid\r\nconst twilioAuth = config.twilio.auth\r\nconst twilioClient = twilio(twilioSid, twilioAuth)\r\nconst twilioNumber = config.twilio.number\r\n\r\napp.set('trust proxy', 1)\r\napp.use(session({\r\n  secret: 'sjcimsoc',\r\n  resave: false,\r\n  saveUninitialized: true,\r\n  cookie: { secure: false }\r\n}))\r\napp.use(cors())\r\napp.use(morgan('dev'))\r\napp.use(bodyParser.json())\r\napp.use(bodyParser.urlencoded({ extended: true }))\r\napp.use(express.static(path.join(__dirname, 'public')))\r\napp.set('port', process.env.PORT || 3000)\r\n\r\napp.post('/api/appointments', (req, res) => {\r\n  const appointment = req.body\r\n  appointment.phone = appointment.phone.replace(/\\D/g,'')\r\n  const date = moment(appointment.date, 'YYYY-DD-MM').startOf('day')\r\n  const time = date.hour(9).add(appointment.slot, 'hours')\r\n  const smsBody = `${appointment.name}, this message is to confirm your appointment at ${time.format('h:mm a')} on ${date.format('dddd MMMM Do[,] YYYY')}.`\r\n  //send confirmation message to user\r\n  twilioClient.messages.create({\r\n    to: '+1' + appointment.phone,\r\n    from: twilioNumber,\r\n    body: smsBody\r\n  }, (err, message) => console.log(message, err))\r\n  //push to cosmic\r\n  const cosmicObject = {\r\n    "title": appointment.name,\r\n    "type_slug": "appointments",\r\n    "write_key": config.bucket.write_key,\r\n    "metafields": [\r\n      {\r\n        "key": "date",\r\n        "type": "text",\r\n        "value": date.format('YYYY-DD-MM')\r\n      },\r\n      {\r\n        "key": "slot",\r\n        "type": "text",\r\n        "value": appointment.slot\r\n      },\r\n      {\r\n        "key": "email",\r\n        "type": "text",\r\n        "value": appointment.email\r\n      },{\r\n        "key": "phone",\r\n        "type": "text",\r\n        "value": appointment.phone //which is now stripped of all non-digits\r\n      }\r\n    ]\r\n  }\r\n  axios.post(`https://api.cosmicjs.com/v1/${config.bucket.slug}/add-object`, cosmicObject)\r\n  .then(response => res.json({ data: 'success' })).catch(err => res.json({ data: 'error '}))\r\n})\r\n\r\napp.get('/api/config', (req,res) => {\r\n  Cosmic.getObject(config, { slug: 'site-config' }, (err, response) => {\r\n    const data = response.object.metadata\r\n    err ? res.status(500).json({ data: 'error' }) : res.json({ data })\r\n  })\r\n})\r\n\r\napp.get('/api/appointments', (req, res) => {\r\n  Cosmic.getObjectType(config, { type_slug: 'appointments' }, (err, response) => {\r\n    const appointments = response.objects.all ? response.objects.all.map(appointment => {\r\n      return {\r\n        date: appointment.metadata.date,\r\n        slot: appointment.metadata.slot\r\n      }\r\n    }) : {}\r\n    res.json({ data: appointments })\r\n  })\r\n})\r\n\r\napp.get('/', (req, res) => {\r\n    res.send('index.html')\r\n})\r\n\r\napp.get('*', (req, res) => {\r\n    res.redirect('/')\r\n})\r\n\r\nhttp.createServer(app).listen(app.get('port'), () =>\r\n  console.log('Server running at: ' + app.get('port'))\r\n)

Part 3: Build and Deploy

Before we build an extension to manage our Appointments, we'll bundle the frontend and deploy the app to Cosmic so we can have even have some appointments to manage.

In the frontend directory, appointment-scheduler, run webpack to build out into dist. Then move the contents of dist to the backend's public folder - AppointmentScheduler/public. The index.html that Webpack builds will then be the index.html we serve from /.

From AppointmentScheduler, commit the app to a new Github repo. Then, create a trial Twilio account and within the Cosmic dashboard, add the following env variables from the deploy menu.

Now go ahead and deploy and add a few sample appointments that we can use to test our extension.

Part 4. Build the Extension

Cosmic let's you upload SPA's that you can use to access and manipulate your bucket's data right within the Cosmic dashboard. These are called Extensions and we'll be building one to be able to view a table of all scheduled appointments, as well as providing us with an easy way to delete them.

Just as with the frontend, we'll be using React with Material UI and the steps here will be similar to Part 1.

1. Boilerplate setup

  1. First, make our appointment-scheduler-extension directory, run yarn init, and create the following project structure.
appointment-scheduler-extension\r\n|\r\n|--dist\r\n|--src\r\n|. |--Components\r\n|. |. |--App.js\r\n|. |--index.html\r\n|. |--index.js\r\n|--.babelrc\r\n|--.gitignore\r\n|--package.json\r\n|--webpack.config.js\r\n
  1. Use the same exact index.html template we used for the frontend.
<!-- ./src/index.html -->\r\n\r\n<!DOCTYPE html>\r\n<html>\r\n  <head>\r\n    <meta charset="utf-8">\r\n    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">\r\n    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">\r\n    <title>Appointment Scheduler</title>\r\n  </head>\r\n  <body>\r\n    <div id="root"></div>\r\n  </body>\r\n</html>
  1. We'll be using almost all of the same packages as the frontend. Refer to Part 1 for installations, including adding lodash and query-string. We'll use lodash for filtering data and query-string as a convenient way to get our Cosmic keys, which Cosmic supplies as url parameters.
  2. Likewise, webpack.config.js, .gitignore, and .babelrc will all be entirely the same as in Part 1.
  3. index.js won't change either besides a new scheme for config variables:
    import React from 'react'\r\nimport ReactDom from 'react-dom'\r\nimport App from './Components/App'\r\nimport MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'\r\nimport QueryString from 'query-string'\r\nimport 'normalize.css'\r\n\r\nwindow.React = React\r\n\r\nconst url = QueryString.parse(location.search)\r\n\r\nconst config = { bucket: {\r\n    slug: url.bucket_slug,\r\n    write_key: url.write_key,\r\n    read_key: url.read_key\r\n  }\r\n}\r\n\r\n\r\nReactDom.render(\r\n  <MuiThemeProvider>\r\n    <App config={config}/>\r\n  </MuiThemeProvider>,\r\n  document.getElementById('root')\r\n)

3. Work Out a Skeleton

From here, our extesion and frontend start to diverge.

At it's barest, our extension will look like this:

import { Component } from 'react'\r\nimport injectTapEventPlugin from 'react-tap-event-plugin'\r\n\r\ninjectTapEventPlugin()\r\n\r\nexport default class App extends Component {\r\n    constructor(props) {\r\n        super(props)\r\n      // set initial state\r\n      // bind component methods\r\n    }\r\n  \r\n  // component methods, lifecycle methods\r\n  \r\n  render() {\r\n        return (\r\n        //Material UI components \r\n        )\r\n    }\r\n}

Thinking about what we need for an initial state:

Thus, for an initial state, we have:

this.state = {\r\n  config: props.config,\r\n  snackbarDisabled: false,\r\n  snackbarMessage: 'Loading...',\r\n  toolbarDropdownValue: 1,\r\n  appointments: {},\r\n  filteredAppointments: {},\r\n  datePickerDisabled: true,\r\n  selectedRows: [],\r\n  deleteButtonDisabled: true,\r\n  allRowsSelected: false\r\n}

4. Draft Out Functionality

Our Extension needs to have the following functions to get it working the way we need it to:

Including those in our extension's skeleton, we now have:

import { Component } from 'react'\r\nimport injectTapEventPlugin from 'react-tap-event-plugin'\r\n\r\ninjectTapEventPlugin()\r\n\r\nexport default class App extends Component {\r\n    constructor(props) {\r\n        super(props)\r\n      this.state = {\r\n          config: props.config,\r\n          snackbarDisabled: false,\r\n          snackbarMessage: 'Loading...',\r\n          toolbarDropdownValue: 1,\r\n          appointments: {},\r\n          filteredAppointments: {},\r\n          datePickerDisabled: true,\r\n          selectedRows: [],\r\n          deleteButtonDisabled: true,\r\n          allRowsSelected: false\r\n        }\r\n    }\r\n  \r\n  handleFetchError(err) {\r\n        //handle errors fetching data from Cosmic\r\n    }\r\n  \r\n  handleFetch(response) {\r\n        //process data fetched from Cosmic\r\n    }\r\n  \r\n  handleToolbarDropdownChange(val) {\r\n        // set the dropdown value and clear filteredAppointments() if\r\n      // "List All" is selected. (State 1). \r\n    }\r\n  \r\n  handleRowSelection(rowsToSelect) {\r\n        // Table returns 'all' if the select-all button was used, an array of selected\r\n      // row numbers, otherwise. We need to make sense of this.\r\n    }\r\n  \r\n  handleDelete(selectedRows) {\r\n        //send a post request to Cosmic's api to get rid of unwanted appointments\r\n    }\r\n  \r\n  checkDisableDate(date) {\r\n        //feed the DatePicker days based on availability determined by appointments\r\n      //retrieved from Cosmic\r\n    }\r\n  \r\n  filterAppointments(date) {\r\n        //Only show appointments occuring on date\r\n    }\r\n  \r\n setTableChildren(selectedRows = this.state.selectedRows, appointments = this.state.appointments) {\r\n        //render a TableRow for each appointment loaded\r\n    }\r\n  \r\n  componentWillMount() {\r\n        //fetch data immediately\r\n    }\r\n  \r\n  render() {\r\n        return (\r\n        //Material UI components \r\n        )\r\n    }\r\n}

5. Build Out the View

Like the frontend, we'll use all Material UI components to display our data.

render() {\r\n  const { snackbarDisabled, appointments, datePickerDisabled, deleteButtonDisabled, ...data } = this.state\r\n  return (\r\n    <div style={{ fontFamily: 'Roboto' }}>\r\n      <AppBar\r\n        showMenuIconButton={false}\r\n        title="Appointment Manager"/>\r\n      <SnackBar\r\n        message={data.snackbarMessage}\r\n        open={!snackbarDisabled} />\r\n      <Toolbar>\r\n        <ToolbarGroup firstChild={true}>\r\n          <DropDownMenu\r\n            value={data.toolbarDropdownValue}\r\n            onChange={(evt, key, val) => this.handleToolbarDropdownChange(val)}>\r\n            <MenuItem value={0} primaryText="Filter Appointments By Date" />\r\n            <MenuItem value={1} primaryText="List All Appointments" />\r\n          </DropDownMenu>\r\n          <DatePicker\r\n            hintText="Select a date"\r\n            autoOk={true}\r\n            disabled={datePickerDisabled}\r\n            name="date-select"\r\n            onChange={(n, date) => this.filterAppointments(date)}\r\n            shouldDisableDate={(day) => this.checkDisableDate(day)} />\r\n        </ToolbarGroup>\r\n        <ToolbarGroup lastChild={true}>\r\n          <RaisedButton\r\n            primary={true}\r\n            onClick={() => this.handleDelete(data.selectedRows)}\r\n            disabled={deleteButtonDisabled}\r\n            label={`Delete Selected ${data.selectedRows.length ? '(' + data.selectedRows.length + ')' : ''}`} />\r\n        </ToolbarGroup>\r\n      </Toolbar>\r\n      <Table\r\n        onRowSelection={rowsToSelect => this.handleRowSelection(rowsToSelect)}\r\n        multiSelectable={true} >\r\n        <TableHeader>\r\n          <TableRow>\r\n            <TableHeaderColumn>ID</TableHeaderColumn>\r\n            <TableHeaderColumn>Name</TableHeaderColumn>\r\n            <TableHeaderColumn>Email</TableHeaderColumn>\r\n            <TableHeaderColumn>Phone</TableHeaderColumn>\r\n            <TableHeaderColumn>Date</TableHeaderColumn>\r\n            <TableHeaderColumn>Time</TableHeaderColumn>\r\n          </TableRow>\r\n        </TableHeader>\r\n        <TableBody\r\n          children={data.tableChildren}\r\n          allRowsSelected={data.allRowsSelected}>\r\n        </TableBody>\r\n      </Table>\r\n    </div>\r\n  )\r\n}

6. Fetch Appointment Data

Unllike with the frontend, we don't have to worry about exposing sensitive data to the public, so we can easily use cosmicjs to handle the fetch. We'll do this in componentWillMount().

componentWillMount() {\r\n  Cosmic.getObjectType(this.state.config, { type_slug: 'appointments' }, (err, response) => err ? this.handleFetchError(err) : this.handleFetch(response)\r\n  )\r\n}

We'll handle errors with handleFetchError(), which will show the user that an error occured in the SnackBar.

handleFetchError(err) {\r\n  console.log(err)\r\n  this.setState({ snackbarMessage: 'Error loading data' })\r\n}

If data is successfully returned, we'll process it with handleFetch().

handleFetch(response) {\r\n  const appointments = response.objects.all ? response.objects.all.reduce((currentAppointments, appointment) => {\r\n    const date = appointment.metadata.date\r\n    if (!currentAppointments[date]) currentAppointments[date] = []\r\n    const appointmentData = {\r\n      slot: appointment.metadata.slot,\r\n      name: appointment.title,\r\n      email: appointment.metadata.email,\r\n      phone: appointment.metadata.phone,\r\n      slug: appointment.slug\r\n    }\r\n    currentAppointments[date].push(appointmentData)\r\n    currentAppointments[date].sort((a,b) => a.slot - b.slot)\r\n    return currentAppointments\r\n  }, {}) : {}\r\n\r\n  this.setState({ appointments, snackbarDisabled: true, tableChildren: this.setTableChildren([], appointments) })\r\n}

From the array of Appointment objects our bucket sends, we create a schedule of all loaded appointments, appointments. We then save that to the state and pass it to setTableChildren() to use in rendering the Table.

7. Handle UI Changes

We need a few simple methods to handle the filter dropdown in the toolbar, selecting rows, filtering appointments, feeding a check for disabling dates to the DatePicker. Starting with handling the dropdown filter, 0 maps to filtering the appointments by date, 1 maps to listing all. For listing all, we reset state.filteredAppointments.

handleToolbarDropdownChange(val) {\r\n  //0: filter by date, 1: list all\r\n  val ? this.setState({ filteredAppointments: {}, datePickerDisabled: true, toolbarDropdownValue: 1 }) : this.setState({ toolbarDropdownValue: 0, datePickerDisabled: false })\r\n}

For handling row selection, we save the selected rows to the state, set the table children based on the rows selected, and enable the delete button if at least one row is selected.

handleRowSelection(rowsToSelect) {\r\n  const allRows = [...Array(this.state.tableChildren.length).keys()]\r\n  const allRowsSelected = rowsToSelect === 'all'\r\n  const selectedRows = Array.isArray(rowsToSelect) ? rowsToSelect : allRowsSelected ? allRows : []\r\n  const appointments = _.isEmpty(this.state.filteredAppointments) ? this.state.appointments : this.state.filteredAppointments\r\n  const deleteButtonDisabled = selectedRows.length == 0\r\n  const tableChildren = allRowsSelected ? this.setTableChildren([], appointments) : this.setTableChildren(selectedRows, appointments)\r\n  this.setState({ selectedRows, deleteButtonDisabled, tableChildren })\r\n}

For disabling dates, we only make them active if state.appointments.date, where date = 'YYYY-DD-MM', exists.

checkDisableDate(day) {\r\n  return !this.state.appointments[moment(day).format('YYYY-DD-MM')]\r\n}

8. Filtering Appointments and Rendering the Table

When the user changes the filter dropdown to Filter By Date they then pick a date from the date picker. Upon choosing a date, the date picker fires filterAppointments() to set state.filteredAppoitments to the sub-schedule state.appointments[selectedDate] and pass that sub-schedule setTableChildren().

filterAppointments(date) {\r\n  const dateString = moment(date).format('YYYY-DD-MM')\r\n  const filteredAppointments = {}\r\n  filteredAppointments[dateString] = this.state.appointments[dateString]\r\n  this.setState({ filteredAppointments, tableChildren: this.setTableChildren([], filteredAppointments) })\r\n}

When filterAppointments() (or any other method) calls setTableChildren() we can optionally pass an array of selected rows and an appointments object or let it default to state.selectedRows and state.appointments. If the appointments are filtered, we sort them by time before rendering.

setTableChildren(selectedRows = this.state.selectedRows, appointments = this.state.appointments) {\r\n  const renderAppointment = (date, appointment, index) => {\r\n    const { name, email, phone, slot } = appointment\r\n    const rowSelected = selectedRows.includes(index)\r\n    return <TableRow key={index} selected={rowSelected}>\r\n      <TableRowColumn>{index}</TableRowColumn>\r\n      <TableRowColumn>{name}</TableRowColumn>\r\n      <TableRowColumn>{email}</TableRowColumn>\r\n      <TableRowColumn>{phone}</TableRowColumn>\r\n      <TableRowColumn>{moment(date, 'YYYY-DD-MM').format('M[/]D[/]YYYY')}</TableRowColumn>\r\n      <TableRowColumn>{moment().hour(9).minute(0).add(slot, 'hours').format('h:mm a')}</TableRowColumn>\r\n    </TableRow>\r\n  }\r\n  const appointmentsAreFiltered = !_.isEmpty(this.state.filteredAppointments)\r\n  const schedule = appointmentsAreFiltered ? this.state.filteredAppointments : appointments\r\n  const els = []\r\n  let counter = 0\r\n  appointmentsAreFiltered ?\r\n    Object.keys(schedule).forEach(date => {\r\n    schedule[date].forEach((appointment, index) => els.push(renderAppointment(date, appointment, index)))\r\n  }) :\r\n  Object.keys(schedule).sort((a,b) => moment(a, 'YYYY-DD-MM').isBefore(moment(b, 'YYYY-MM-DD')))\r\n    .forEach((date, index) => {\r\n    schedule[date].forEach(appointment => {\r\n      els.push(renderAppointment(date, appointment, counter))\r\n      counter++\r\n    })\r\n  })\r\n  return els\r\n}

9. Deleting Appointments

The last thing we need to handle is letting the user delete appointments, leveraging cosmicjs for deleting objects found using lodash from state.appointments according to selectedRows.

handleDelete(selectedRows) {\r\n  const { config } = this.state\r\n  return selectedRows.map(row => {\r\n    const { tableChildren, appointments } = this.state\r\n    const date = moment(tableChildren[row].props.children[4].props.children, 'M-D-YYYY').format('YYYY-DD-MM')\r\n    const slot = moment(tableChildren[row].props.children[5].props.children, 'h:mm a').diff(moment().hours(9).minutes(0).seconds(0), 'hours') + 1\r\n    return _.find(appointments[date], appointment =>\r\n                  appointment.slot === slot\r\n                 )\r\n  }).map(appointment => appointment.slug).forEach(slug =>\r\n                                                  Cosmic.deleteObject(config, { slug, write_key: config.bucket.write_key }, (err, response) => {\r\n    if (err) {\r\n      console.log(err)\r\n      this.setState({ snackbarDisabled: false, snackbarMessage: 'Failed to delete appointments' })\r\n    } else {\r\n      this.setState({ snackbarMessage: 'Loading...', snackbarDisabled: false })\r\n      Cosmic.getObjectType(this.state.config, { type_slug: 'appointments' }, (err, response) =>\r\n                           err ? this.handleFetchError(err) : this.handleFetch(response)\r\n                          )}\r\n  }\r\n                                                                     )\r\n                                                 )\r\n  this.setState({ selectedRows: [], deleteButtonDisabled: true})\r\n}

10. Putting It All Together

At this point, including all necessary imports, our completed extension looks like this:

// ./src/Components/App.js\r\n\r\nimport { Component } from 'react'\r\nimport injectTapEventPlugin from 'react-tap-event-plugin'\r\nimport axios from 'axios'\r\nimport async from 'async'\r\nimport _ from 'lodash'\r\nimport moment from 'moment'\r\nimport Cosmic from 'cosmicjs'\r\nimport AppBar from 'material-ui/AppBar'\r\nimport FlatButton from 'material-ui/FlatButton'\r\nimport RaisedButton from 'material-ui/RaisedButton'\r\nimport SnackBar from 'material-ui/SnackBar'\r\nimport DropDownMenu from 'material-ui/DropDownMenu'\r\nimport MenuItem from 'material-ui/MenuItem'\r\nimport DatePicker from 'material-ui/DatePicker'\r\nimport {\r\n  Toolbar,\r\n  ToolbarGroup\r\n} from 'material-ui/Toolbar'\r\nimport {\r\n  Table,\r\n  TableBody,\r\n  TableHeader,\r\n  TableHeaderColumn,\r\n  TableRow,\r\n  TableRowColumn,\r\n} from 'material-ui/Table';\r\n\r\ninjectTapEventPlugin()\r\n\r\nexport default class App extends Component {\r\n  constructor(props) {\r\n    super(props)\r\n    this.state = {\r\n      config: props.config,\r\n      snackbarDisabled: false,\r\n      snackbarMessage: 'Loading...',\r\n      toolbarDropdownValue: 1,\r\n      appointments: {},\r\n      filteredAppointments: {},\r\n      datePickerDisabled: true,\r\n      selectedRows: [],\r\n      deleteButtonDisabled: true,\r\n      allRowsSelected: false\r\n    }\r\n    this.handleFetchError = this.handleFetchError.bind(this)\r\n    this.handleFetch = this.handleFetch.bind(this)\r\n    this.handleRowSelection = this.handleRowSelection.bind(this)\r\n    this.handleToolbarDropdownChange = this.handleToolbarDropdownChange.bind(this)\r\n    this.handleDelete = this.handleDelete.bind(this)\r\n    this.checkDisableDate = this.checkDisableDate.bind(this)\r\n    this.setTableChildren = this.setTableChildren.bind(this)\r\n  }\r\n\r\n  handleFetchError(err) {\r\n    console.log(err)\r\n    this.setState({ snackbarMessage: 'Error loading data' })\r\n  }\r\n\r\n  handleFetch(response) {\r\n    const appointments = response.objects.all ? response.objects.all.reduce((currentAppointments, appointment) => {\r\n      const date = appointment.metadata.date\r\n      if (!currentAppointments[date]) currentAppointments[date] = []\r\n      const appointmentData = {\r\n        slot: appointment.metadata.slot,\r\n        name: appointment.title,\r\n        email: appointment.metadata.email,\r\n        phone: appointment.metadata.phone,\r\n        slug: appointment.slug\r\n      }\r\n      currentAppointments[date].push(appointmentData)\r\n      currentAppointments[date].sort((a,b) => a.slot - b.slot)\r\n      return currentAppointments\r\n    }, {}) : {}\r\n\r\n    this.setState({ appointments, snackbarDisabled: true, tableChildren: this.setTableChildren([], appointments) })\r\n  }\r\n\r\n  handleToolbarDropdownChange(val) {\r\n    //0: filter by date, 1: list all\r\n    val ? this.setState({ filteredAppointments: {}, datePickerDisabled: true, toolbarDropdownValue: 1 }) : this.setState({ toolbarDropdownValue: 0, datePickerDisabled: false })\r\n  }\r\n\r\n  handleRowSelection(rowsToSelect) {\r\n    const allRows = [...Array(this.state.tableChildren.length).keys()]\r\n    const allRowsSelected = rowsToSelect === 'all'\r\n    const selectedRows = Array.isArray(rowsToSelect) ? rowsToSelect : allRowsSelected ? allRows : []\r\n    const appointments = _.isEmpty(this.state.filteredAppointments) ? this.state.appointments : this.state.filteredAppointments\r\n    const deleteButtonDisabled = selectedRows.length == 0\r\n    const tableChildren = allRowsSelected ? this.setTableChildren([], appointments) : this.setTableChildren(selectedRows, appointments)\r\n    this.setState({ selectedRows, deleteButtonDisabled, tableChildren })\r\n  }\r\n\r\n  handleDelete(selectedRows) {\r\n    const { config } = this.state\r\n    return selectedRows.map(row => {\r\n      const { tableChildren, appointments } = this.state\r\n      const date = moment(tableChildren[row].props.children[4].props.children, 'M-D-YYYY').format('YYYY-DD-MM')\r\n      const slot = moment(tableChildren[row].props.children[5].props.children, 'h:mm a').diff(moment().hours(9).minutes(0).seconds(0), 'hours') + 1\r\n      return _.find(appointments[date], appointment =>\r\n        appointment.slot === slot\r\n      )\r\n    }).map(appointment => appointment.slug).forEach(slug =>\r\n      Cosmic.deleteObject(config, { slug, write_key: config.bucket.write_key }, (err, response) => {\r\n        if (err) {\r\n          console.log(err)\r\n          this.setState({ snackbarDisabled: false, snackbarMessage: 'Failed to delete appointments' })\r\n        } else {\r\n          this.setState({ snackbarMessage: 'Loading...', snackbarDisabled: false })\r\n          Cosmic.getObjectType(this.state.config, { type_slug: 'appointments' }, (err, response) =>\r\n            err ? this.handleFetchError(err) : this.handleFetch(response)\r\n          )}\r\n        }\r\n      )\r\n    )\r\n    this.setState({ selectedRows: [], deleteButtonDisabled: true})\r\n  }\r\n\r\n  checkDisableDate(day) {\r\n    return !this.state.appointments[moment(day).format('YYYY-DD-MM')]\r\n  }\r\n\r\n  filterAppointments(date) {\r\n    const dateString = moment(date).format('YYYY-DD-MM')\r\n    const filteredAppointments = {}\r\n    filteredAppointments[dateString] = this.state.appointments[dateString]\r\n    this.setState({ filteredAppointments, tableChildren: this.setTableChildren([], filteredAppointments) })\r\n  }\r\n\r\n  setTableChildren(selectedRows = this.state.selectedRows, appointments = this.state.appointments) {\r\n    const renderAppointment = (date, appointment, index) => {\r\n      const { name, email, phone, slot } = appointment\r\n      const rowSelected = selectedRows.includes(index)\r\n      return <TableRow key={index} selected={rowSelected}>\r\n        <TableRowColumn>{index}</TableRowColumn>\r\n        <TableRowColumn>{name}</TableRowColumn>\r\n        <TableRowColumn>{email}</TableRowColumn>\r\n        <TableRowColumn>{phone}</TableRowColumn>\r\n        <TableRowColumn>{moment(date, 'YYYY-DD-MM').format('M[/]D[/]YYYY')}</TableRowColumn>\r\n        <TableRowColumn>{moment().hour(9).minute(0).add(slot, 'hours').format('h:mm a')}</TableRowColumn>\r\n      </TableRow>\r\n    }\r\n    const appointmentsAreFiltered = !_.isEmpty(this.state.filteredAppointments)\r\n    const schedule = appointmentsAreFiltered ? this.state.filteredAppointments : appointments\r\n    const els = []\r\n    let counter = 0\r\n    appointmentsAreFiltered ?\r\n      Object.keys(schedule).forEach(date => {\r\n        schedule[date].forEach((appointment, index) => els.push(renderAppointment(date, appointment, index)))\r\n      }) :\r\n      Object.keys(schedule).sort((a,b) => moment(a, 'YYYY-DD-MM').isBefore(moment(b, 'YYYY-MM-DD')))\r\n      .forEach((date, index) => {\r\n        schedule[date].forEach(appointment => {\r\n          els.push(renderAppointment(date, appointment, counter))\r\n          counter++\r\n        })\r\n      })\r\n    return els\r\n  }\r\n\r\n  componentWillMount() {\r\n    Cosmic.getObjectType(this.state.config, { type_slug: 'appointments' }, (err, response) =>\r\n      err ? this.handleFetchError(err) : this.handleFetch(response)\r\n    )\r\n  }\r\n\r\n  render() {\r\n    const { snackbarDisabled, appointments, datePickerDisabled, deleteButtonDisabled, ...data } = this.state\r\n    return (\r\n      <div style={{ fontFamily: 'Roboto' }}>\r\n        <AppBar\r\n          showMenuIconButton={false}\r\n          title="Appointment Manager"/>\r\n        <SnackBar\r\n          message={data.snackbarMessage}\r\n          open={!snackbarDisabled} />\r\n        <Toolbar>\r\n          <ToolbarGroup firstChild={true}>\r\n            <DropDownMenu\r\n              value={data.toolbarDropdownValue}\r\n              onChange={(evt, key, val) => this.handleToolbarDropdownChange(val)}>\r\n              <MenuItem value={0} primaryText="Filter Appointments By Date" />\r\n              <MenuItem value={1} primaryText="List All Appointments" />\r\n            </DropDownMenu>\r\n            <DatePicker\r\n              hintText="Select a date"\r\n              autoOk={true}\r\n              disabled={datePickerDisabled}\r\n              name="date-select"\r\n              onChange={(n, date) => this.filterAppointments(date)}\r\n              shouldDisableDate={(day) => this.checkDisableDate(day)} />\r\n          </ToolbarGroup>\r\n          <ToolbarGroup lastChild={true}>\r\n            <RaisedButton\r\n              primary={true}\r\n              onClick={() => this.handleDelete(data.selectedRows)}\r\n              disabled={deleteButtonDisabled}\r\n              label={`Delete Selected ${data.selectedRows.length ? '(' + data.selectedRows.length + ')' : ''}`} />\r\n          </ToolbarGroup>\r\n        </Toolbar>\r\n        <Table\r\n          onRowSelection={rowsToSelect => this.handleRowSelection(rowsToSelect)}\r\n          multiSelectable={true} >\r\n          <TableHeader>\r\n            <TableRow>\r\n              <TableHeaderColumn>ID</TableHeaderColumn>\r\n              <TableHeaderColumn>Name</TableHeaderColumn>\r\n              <TableHeaderColumn>Email</TableHeaderColumn>\r\n              <TableHeaderColumn>Phone</TableHeaderColumn>\r\n              <TableHeaderColumn>Date</TableHeaderColumn>\r\n              <TableHeaderColumn>Time</TableHeaderColumn>\r\n            </TableRow>\r\n          </TableHeader>\r\n          <TableBody\r\n            children={data.tableChildren}\r\n            allRowsSelected={data.allRowsSelected}>\r\n          </TableBody>\r\n        </Table>\r\n      </div>\r\n    )\r\n  }\r\n}

Part 5: Conclusion

Once you run webpack in appointment-scheduler-extension, create extension.json in dist to make Cosmic recognize it:

// appointment-scheduler-extension/dist/extension.json\r\n\r\n{\r\n  "title": "Appointment Manager",\r\n  "font_awesome_class": "fa-calendar",\r\n  "image_url": ""\r\n}

Then, compress dist, upload it to Cosmic, and we're ready to start managing appointments.

Using Cosmic, Twilio, Express, and React, we've built a modular, easy to extend appointment scheduler to both give others easy access to our time while saving more of it for ourselves. The speed at which we're able to get our app deployed and the simplicity of managing our data reinforces that it was an obvious choice to use Cosmic both for CMS and deployment. Although our appointment scheduler will definitely save us time in the future, it's a sure thing that it can never compete with the time Cosmic will save us on future projects.

Matt Cain builds smart web applications and writes about the tech used to build them. You can learn more about him on his portfolio.

","metafields":[{"object_type":"authors","value":"59528e59833ff0503d000e98","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"59528e59833ff0503d000e98","slug":"matt-cain","title":"Matt Cain","content":"","metafields":[{"value":"9ff99380-5b59-11e7-a33a-a9e1bde9cf9a-matt-cain.jpeg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/9ff99380-5b59-11e7-a33a-a9e1bde9cf9a-matt-cain.jpeg","imgix_url":"https://imgix.cosmicjs.com/9ff99380-5b59-11e7-a33a-a9e1bde9cf9a-matt-cain.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-06-27T16:56:57.686Z","created_by":"5357ef811693be2118000001","created":"2017-06-27T16:56:57.686Z","status":"published","modified_at":"2023-01-20T22:01:28.380Z","modified_by":"5357ef811693be2118000001","thumbnail":"https://imgix.cosmicjs.com/9ff99380-5b59-11e7-a33a-a9e1bde9cf9a-matt-cain.jpeg"}},{"value":"

This Appointment Scheduler lets users select a day and a one-hour time slot between 9AM and 5PM to meet with us. It integrates with Twilio to send a confirmation text that their appointment has been scheduled. This also comes with a Cosmic Extension so we can manage the appointments right from within the Cosmic dashboard.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"895d94a0-97d1-11e7-aeb7-99586de38c8d-cal.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/895d94a0-97d1-11e7-aeb7-99586de38c8d-cal.jpg","imgix_url":"https://imgix.cosmicjs.com/895d94a0-97d1-11e7-aeb7-99586de38c8d-cal.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-09-12T15:47:51.319Z","created_by":"5357ef811693be2118000001","created":"2017-09-12T15:47:51.319Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","publish_at":null,"metadata":{"author":{"_id":"59528e59833ff0503d000e98","slug":"matt-cain","title":"Matt Cain","content":"","metafields":[{"value":"9ff99380-5b59-11e7-a33a-a9e1bde9cf9a-matt-cain.jpeg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/9ff99380-5b59-11e7-a33a-a9e1bde9cf9a-matt-cain.jpeg","imgix_url":"https://imgix.cosmicjs.com/9ff99380-5b59-11e7-a33a-a9e1bde9cf9a-matt-cain.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-06-27T16:56:57.686Z","created_by":"5357ef811693be2118000001","created":"2017-06-27T16:56:57.686Z","status":"published","modified_at":"2023-01-20T22:01:28.380Z","modified_by":"5357ef811693be2118000001","thumbnail":"https://imgix.cosmicjs.com/9ff99380-5b59-11e7-a33a-a9e1bde9cf9a-matt-cain.jpeg","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/9ff99380-5b59-11e7-a33a-a9e1bde9cf9a-matt-cain.jpeg","imgix_url":"https://imgix.cosmicjs.com/9ff99380-5b59-11e7-a33a-a9e1bde9cf9a-matt-cain.jpeg"}}},"teaser":"

This Appointment Scheduler lets users select a day and a one-hour time slot between 9AM and 5PM to meet with us. It integrates with Twilio to send a confirmation text that their appointment has been scheduled. This also comes with a Cosmic Extension so we can manage the appointments right from within the Cosmic dashboard.

","featured_image":{"url":"https://cdn.cosmicjs.com/895d94a0-97d1-11e7-aeb7-99586de38c8d-cal.jpg","imgix_url":"https://imgix.cosmicjs.com/895d94a0-97d1-11e7-aeb7-99586de38c8d-cal.jpg"}}},{"_id":"59b5adc464a7f09c54000eaa","order":101,"slug":"introducing-sign-up-later","title":"Introducing Sign Up Later","content":"

It is the mission of Cosmic to help development teams build apps faster, and we're always looking for new ways to speed up the development process.  With this goal in mind, we are excited to announce that you can now use all of the Cosmic features in a full demo before signing up for an official Cosmic account.  On the signup page you will now see an option to "Skip this step".

Add Buckets, Objects, Media and plug your dynamic content into your apps.  When you are ready to save your account and save all demo data, simply click the "Save Account" button located in the main nav dropdown.

If you have any questions please reach out to us on Twitter and join our Slack community.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"

We are excited to announce that you can now use all of the Cosmic features in a full demo before signing up for an official Cosmic account.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"6bdc0830-967d-11e7-9083-ad5a382c6904-tim-mossholder-174907.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/6bdc0830-967d-11e7-9083-ad5a382c6904-tim-mossholder-174907.jpg","imgix_url":"https://imgix.cosmicjs.com/6bdc0830-967d-11e7-9083-ad5a382c6904-tim-mossholder-174907.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-09-10T21:25:24.321Z","created_by":"5357ef811693be2118000001","created":"2017-09-10T21:25:24.322Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","publish_at":null,"metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

We are excited to announce that you can now use all of the Cosmic features in a full demo before signing up for an official Cosmic account.

","featured_image":{"url":"https://cdn.cosmicjs.com/6bdc0830-967d-11e7-9083-ad5a382c6904-tim-mossholder-174907.jpg","imgix_url":"https://imgix.cosmicjs.com/6bdc0830-967d-11e7-9083-ad5a382c6904-tim-mossholder-174907.jpg"}}},{"_id":"59aea645480fbb12770003be","order":102,"slug":"how-to-build-a-multi-language-static-website-without-ajax","title":"How to Build a Multi-Language Static Website Without AJAX","content":"


A couple of weeks ago I wrote an article about building a static website with Gulp, and why it’s so fantastic,\r\nas well as a couple of things I learned on the way.

But one of the things I failed to touch on was how to manage dynamic content with static websites. In a dynamic website, pulling locale data is often taxed with multiple AJAX requests, as well as the time it takes to process the data\r\nbeing pulled from the remote server.

But what if I told you there is a faster, and more optimized way to bundle the language data for your small web-application? And what if, I also told you that you can use a remote Content Management System (CMS), that can manage your website’s content?

Enter Cosmic JS

Do you want to know — what…. it…. is?

Cosmic is an API-first CMS system made to help bridge the gap between developers and editors. Unlike WordPress or Drupal, the Cosmic API lives independently from your code. This allows it to be implemented in a numerous amount of ways to accomplish an awesome amount of things.

There are several benefits to this (which you can read in detail about here), but the one I will be focusing right now will be the flexibility it can give us when approaching unique challenges.

One of these challenges that we can overcome is trying to manage content on a static web-application. Because Cosmic at it’s heart uses JSON data to deliver content to your website, we can take advantage of this to filter and embed the content\r\nwe need.

Let me show you how it’s done.


Before we begin…

The Cosmic homepage (as of late 2017)


If you intend on modifying the app content you’ll have to create a Cosmic account.\r\nThey offer free plans that you can use, as well as a 2 week trial to test it out without any restrictions.

Regardless, you’ll need to have a working development environment with Node.js and npm installed. We need it in order to run the Gulp build tooling as well as the development server. Once you have both Node.js and npm installed, we can begin working on the demo application.

Installing the demo

The demo GitHub project is located at cosmicjs/static-multi-language-app. Either clone the repository with git clone or download the project manually using the download button on the repository page.

Once the project is downloaded (and extracted if you downloaded an archive), cd into the project directory and then download the project dependencies with the command npm install. Once that is done, you should now be able to\r\nbuild the project.

Before we go through some the project details, build the developmentversion with the command gulp dbuild. The built application should then be available inside the build/ directory.

Running the App

How the default application should look (set to es-MX)


At this point, you’d probably want to run the application locally. To do so, make sure the project is built and start the development server with gulp server. Your default browser should open with the web app, located by accessing localhost:8080on\r\nyour web browser.

App structure

The default app structure


The main structure of the application is split into two segments (like many web applications). There is the build/ section, which contains the built project files, which also acts as the additional web root for our development server. And the src/ section, which contains the source code for the project.

Key files in the root project directory include the config.js file, which contains the configuration for both the Cosmic API fetcher script fetch.js, as well as the Gulp build-file gulpfile.js. 

The file fetch-utils.jscontains a helper function for filtering through specific objects.

The fetcher-utils is fairly powerful, and I’m considering porting a more robust version to it’s own mini npm module. Follow me on Twitter or GitHub if you’d like updates about my open source projects.

There is also a README.md if you’d like more detailed explanations and examples of how to take advantage of the API provided in the app.

Setting up for additional content

Here is a code snippet from the configuration file config.js:
// The config.js file\r\nmodule.exports = {\r\n    // Cosmic specific configuration...\r\n    lang: {\r\n        defaultLocale: 'en-US'\r\n    },\r\n    fetch: {\r\n        file: 'src/cosmic-data.json',\r\n        cache: false,\r\n        NodeWhiteList: ['locale', 'slug', 'content'],\r\n        NodeAllowedTags: ['a', 'b', 'i', 'only-the-tags-you-want']\r\n    }\r\n}

The default language loaded by the application is specified in the lang.defaultLocale key, and is en-US by default. This means that it will attempt to load the language locale en-US when the application first loads unless other-wise specified.

Dashboard > Nodes — This is what it should look like.

If you activated the demo on the Cosmic website, you should already have a bucket populated with Nodes, which are the default type that the application uses. Each Node contains a specific inline string that gets parsed\r\nby fetch.js to be embedded in your application.

Creating a new Node with the Cosmic API is fairly simple. To create a new Node, simply click the button on the top right + Add Node, and it should bring up a fairly simple UI that resembles something\r\nlike this:

The UI for the Node creation interface.


When creating a new Node (for multiple languages) it is best to first select a locale with the Select Locale drop-down. This ensures that your data gets loaded with the correct locale when the app loads.

To name the Node, simply type a name into the Node Title field. A Slugfield (which will be mentioned again later) should auto-populate as you are creating the Title of the Node. Note that you cannot create a new Node with the same Slug unless the locale is different. This\r\nis to prevent accidental duplicate values within your app.

Once that’s done, enter in the content you’d like your Node to represent. This should be consistent between locales of your app.

A sample node.


When done, make sure to publish the Node by clicking the Publish button located at the top right of the page.

That’s it. You’ve created a new Node with the locale specified. For consistency, make sure to repeat this for each locale, so you have a set Node value for the locale specified.

So, now that you have all the locales set for a particular slug, you can start including the newly available data into your static web application.

To bundle the newly created Node, make sure you have an active internet connection. If you do, then run gulp dbuild or gulp build to fetch and embed the data into the bundle.js file located in build/assets/bundle.js

Adding static content to the markup

I created two main ways of adding content to your static website. The first is a static method, which involves adding a custom data-cosmic-node attribute to your application. The string value of the attribute should be equivalent to the slug name generated by the Cosmic API.

Navigate to the src/html/main.html and replace the default markup of :

<div class="app-container">\r\n    <div class="cosmic-app">\r\n        <h2 data-cosmic-node="button-press-prompt"></h2>\r\n        <div>\r\n            <button id="add-button" class="cosmic-app-button">\r\n                <span data-cosmic-node="add-button"></span>\r\n            </button>\r\n            <button id="sub-button" class="cosmic-app-button">\r\n                <span data-cosmic-node="sub-button"></span>\r\n            </button>\r\n        </div>\r\n        <h2 class="cosmic-app-current-count">\r\n            <span data-cosmic-node="current-count"></span>\r\n            <span id="current-count"></span>\r\n        </h2>\r\n        <h3 id="count-message"></h3>\r\n    </div>\r\n</div>

With this:

<div class="app-container">\r\n    <h2 data-cosmic-node="this-is-a-sample-element"></h2>\r\n</div>

Now simply rebuild the application with gulp dbuild. You should now get something that looks like this:

This is what the updated app should look like.


Assuming you made a Node for the locales appropriate for your app, you should see the contents of the element update whenever you switch locales. This is done through a element caching technique that searches the DOM for elements with the attribute data-cosmic-node,\r\nand will attempt to each one with the matching language value (if it exists).

Adding dynamic content to your app

Obviously, a static implementation alone is not enough for a useful web app, and being somewhat seasoned in this area I knew exactly what needed to be done.

I created a minimal language API for the application located at src/js/lang.js. It is not only responsible for caching and updating elements when the language changes, but it also provides methods that allows developers to manually get stored\r\nlanguage strings, as well as execute custom events whenever the language locale successfully changes.

The documentation as well as a working implementation can be found within the demo itself (at src/js/main.js), in addition to the README.md file.

But in case you’d rather me explain it here, this is the simple rundown of methods that will help you manage locale state in the application.


CosmicLanguage.getString

The method CosmicLangauge.getStringmethod does exactly what it sounds like. It attempts to fetch a specific value of a Node from the stored content. If found, it will return the filtered HTML content for the currently selected\r\nlocale.

Here is an example of the method at work at work inside of a closure:

So, you can potentially loop this method, conditionally rendering different Node values depending on the conditions set forth by your logic. But as you may have figured, what would happen in the event that the locale changes throughout the app?


CosmicLanguage.addUpdateEvent

As the name probably suggests, this is an event handler. Whenever a locale change event is invoked (via the loadFromLocale method), an additional array of event handlers are also fired. These are bound with the aforementioned addUpdateEvent.

A simple example of the event handler in action.

While simple in practice, you’ll most likely need this if you plan on setting any sort of dynamic multi-language content within your web app. 

The example on the official repository shows a slightly more advanced means of managing the content of an Element based on state. I’d recommenced that you go check it out to get a better feel of how to implement\r\nthe event.

In closing…

I could go on about the multiple ways to implement the mini language API I made. But the best way to learn is to simply throw yourself at it, and learn it at your own pace. Go ahead and try it out!

Personally, I really enjoyed writing the language API. It felt cool to accomplish something new, and provide a means to help other developers build their own applications.

","metafields":[{"object_type":"authors","value":"59aea3f20ba82c9e770006b1","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"59aea3f20ba82c9e770006b1","slug":"flynn-buckingham","title":"Flynn Buckingham","content":"","metafields":[{"value":"93257c90-923c-11e7-a292-7fa737c9dc7c-flynn.jpeg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/93257c90-923c-11e7-a292-7fa737c9dc7c-flynn.jpeg","imgix_url":"https://imgix.cosmicjs.com/93257c90-923c-11e7-a292-7fa737c9dc7c-flynn.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-09-05T13:17:38.764Z","created_by":"5357ef811693be2118000001","created":"2017-09-05T13:17:38.764Z","status":"published","modified_at":"2020-09-14T17:45:23.837Z","modified_by":"5357ef811693be2118000001","thumbnail":"https://imgix.cosmicjs.com/93257c90-923c-11e7-a292-7fa737c9dc7c-flynn.jpeg"}},{"value":"

What if I told you there is a faster, and more optimized way to bundle the language data for your small web-application? And what if, I also told you that you can use a remote Content Management System (CMS), that can manage your website’s content?

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"ed829d70-923d-11e7-ac16-9bd4a7f0c125-cosmic-blur.jpeg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/ed829d70-923d-11e7-ac16-9bd4a7f0c125-cosmic-blur.jpeg","imgix_url":"https://imgix.cosmicjs.com/ed829d70-923d-11e7-ac16-9bd4a7f0c125-cosmic-blur.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-09-05T13:27:33.277Z","created_by":"5357ef811693be2118000001","created":"2017-09-05T13:27:33.278Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","publish_at":null,"metadata":{"author":{"_id":"59aea3f20ba82c9e770006b1","slug":"flynn-buckingham","title":"Flynn Buckingham","content":"","metafields":[{"value":"93257c90-923c-11e7-a292-7fa737c9dc7c-flynn.jpeg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/93257c90-923c-11e7-a292-7fa737c9dc7c-flynn.jpeg","imgix_url":"https://imgix.cosmicjs.com/93257c90-923c-11e7-a292-7fa737c9dc7c-flynn.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-09-05T13:17:38.764Z","created_by":"5357ef811693be2118000001","created":"2017-09-05T13:17:38.764Z","status":"published","modified_at":"2020-09-14T17:45:23.837Z","modified_by":"5357ef811693be2118000001","thumbnail":"https://imgix.cosmicjs.com/93257c90-923c-11e7-a292-7fa737c9dc7c-flynn.jpeg","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/93257c90-923c-11e7-a292-7fa737c9dc7c-flynn.jpeg","imgix_url":"https://imgix.cosmicjs.com/93257c90-923c-11e7-a292-7fa737c9dc7c-flynn.jpeg"}}},"teaser":"

What if I told you there is a faster, and more optimized way to bundle the language data for your small web-application? And what if, I also told you that you can use a remote Content Management System (CMS), that can manage your website’s content?

","featured_image":{"url":"https://cdn.cosmicjs.com/ed829d70-923d-11e7-ac16-9bd4a7f0c125-cosmic-blur.jpeg","imgix_url":"https://imgix.cosmicjs.com/ed829d70-923d-11e7-ac16-9bd4a7f0c125-cosmic-blur.jpeg"}}},{"_id":"59a98711d74b0e0b35000564","order":103,"slug":"new-feature-object-pagination","title":"New Feature: Object Pagination","content":"

We're excited to announce that we've rolled out a new feature for users whose Buckets have a large number of Objects: Object Pagination. Instead of having to scroll indefinitely through a section of Objects, we've added Pagination to the bottom of each page to help you navigate and more effectively manage your content within your Bucket. 

This is another Community-requested feature to help you and your team Build Apps Faster.  If you have any questions, connect with us on Twitter and join other members of our Community in conversation on our Slack channel.

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"value":"

Object Pagination is now live in your Cosmic JS Bucket.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"b4190000-8f37-11e7-9fbe-ad48cde7c48e-joel-filipe-171928.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/b4190000-8f37-11e7-9fbe-ad48cde7c48e-joel-filipe-171928.jpg","imgix_url":"https://imgix.cosmicjs.com/b4190000-8f37-11e7-9fbe-ad48cde7c48e-joel-filipe-171928.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-09-01T16:13:04.978Z","created_by":"5716b504e9c686d006000073","created":"2017-09-01T16:13:04.978Z","status":"published","modified_at":"2020-08-10T14:04:22.001Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

Object Pagination is now live in your Cosmic JS Bucket.

","featured_image":{"url":"https://cdn.cosmicjs.com/b4190000-8f37-11e7-9fbe-ad48cde7c48e-joel-filipe-171928.jpg","imgix_url":"https://imgix.cosmicjs.com/b4190000-8f37-11e7-9fbe-ad48cde7c48e-joel-filipe-171928.jpg"}}},{"_id":"59a83d3a5b88f0ba07001097","order":104,"slug":"how-to-build-a-portfolio-platform-app-using-angularjs","title":"How to Build a Portfolio Platform App Using AngularJS","content":"

In this tutorial I'm going to show you how to create a "Portfolio Platform" app using AngularJS, a little bit of Node, and Cosmic.  At the end of the tutorial we will have a platform that enables management of multiple portfolio\r\nwebsites.   Users can login and manage their portfolio website.  The admin can manage multiple users from the Cosmic Dashboard.  Let's get started.

TL;DR

Download the GitHub repo.
Check out the demo.
Install to your Cosmic Bucket in a few clicks.

Getting Started:

First, let’s make a new directory to build our project in and lets also make a package.json file.

mkdir cosmicapp-porfolio
cosmicapp-porfolio$ touch package.json

Now, in your package.json, copy and paste the code below:

//cosmicapp-porfolio/package.json\r\n{\r\n  "name": "photography-portfolio-app",\r\n  "version": "1.0.0",\r\n  "main": "app-server.js",\r\n  "engines": {\r\n    "node": "4.1.2",\r\n    "npm": "3.5.2"\r\n  },\r\n  "description": "",\r\n  "dependencies": {\r\n    "body-parser": "^1.17.2",\r\n    "bower": "^1.7.7",\r\n    "buffer-to-vinyl": "^1.1.0",\r\n    "express": "^4.13.3",\r\n    "gulp": "^3.9.1",\r\n    "gulp-autoprefixer": "^3.1.0",\r\n    "gulp-concat": "^2.6.0",\r\n    "gulp-concat-css": "^2.2.0",\r\n    "gulp-env": "^0.4.0",\r\n    "gulp-minify-css": "^1.2.4",\r\n    "gulp-ng-config": "^1.4.0",\r\n    "gulp-npm-script-sync": "^1.1.0",\r\n    "gulp-webserver": "^0.9.1",\r\n    "http-server": "^0.9.0",\r\n    "stripe": "^4.22.0",\r\n    "wiredep": "^3.0.0"\r\n  },\r\n  "scripts": {\r\n    "postinstall": "bower install && gulp config && gulp js",\r\n    "start": "npm run production",\r\n    "production": "node app-server.js",\r\n    "gulp": "gulp"\r\n  },\r\n  "author": "",\r\n  "license": "ISC",\r\n  "devDependencies": {\r\n    "gulp-npm-script-sync": "^1.1.0",\r\n    "gulp-remote-src": "^0.4.2"\r\n  }\r\n}\r\n

Second, let’s make a bower.json file.

cosmicapp-porfolio$ touch bower.json

Now, in your bower.json, copy and paste the code below:

//cosmicapp-porfolio/bower.json\r\n{\r\n  "name": "photography-portfolio-app",\r\n  "description": "Photography Portfolio App",\r\n  "version": "0.0.0",\r\n  "homepage": "https://github.com/kutsaniuk/cosmicapp-porfolio",\r\n  "license": "MIT",\r\n  "private": true,\r\n  "dependencies": {\r\n    "angular": "~1.5.x",\r\n    "angular-mocks": "~1.5.x",\r\n    "angular-bootstrap": "~1.1.x",\r\n    "angular-cookies": "~1.5.x",\r\n    "angular-route": "~1.5.x",\r\n    "angular-ui-router": "0.2.x",\r\n    "angular-resource": "1.5.x",\r\n    "angular-animate": "~1.5.x",\r\n    "ng-dialog": "0.6.1",\r\n    "bootstrap": "3.3.x",\r\n    "cr-acl": "",\r\n    "angular-chosen-localytics": "*",\r\n    "bootstrap-chosen": "*",\r\n    "ng-flow": "^2.7.4",\r\n    "angular-mask": "*",\r\n    "checklist-model": "0.9.0",\r\n    "angular-ui-notification": "^0.2.0",\r\n    "angular-ui-calendar": "^1.0.2",\r\n    "angular-ui-switch": "^0.1.1",\r\n    "ng-scrollbars": "^0.0.11",\r\n    "jquery.scrollbar": "*",\r\n    "angular-flash-alert": "^2.4.0",\r\n    "components-font-awesome": "^4.7.0",\r\n    "angular-loading-bar": "^0.9.0",\r\n    "angular-environment": "^1.0.8",\r\n    "angular-dragdrop": "",\r\n    "angular-sanitize": "1.5.*",\r\n    "angular-drag-and-drop-directives": "",\r\n    "jquery-ui-touch-punch": "",\r\n    "angular-touch":"1.5.*",\r\n    "textAngular":"1.5.*"\r\n  },\r\n  "resolutions": {\r\n    "angular": "~1.5.x"\r\n  },\r\n  "devDependencies": {\r\n    "cr-acl": "^0.5.0"\r\n  }\r\n}\r\n

Config app server:

cosmicapp-porfolio$ touch app-server.js
//cosmicapp-porfolio/app-server.js\r\nvar express = require('express');\r\nvar bodyParser = require('body-parser');\r\nvar app = express();\r\napp.set('port', process.env.PORT || 3000)\r\napp.use(express.static(__dirname))\r\napp.use(bodyParser.json())\r\nvar http = require('http').Server(app)\r\n// Route\r\napp.get('/', (req, res) => {\r\n  res.sendFile(__dirname + '/index.html');\r\n})\r\nhttp.listen(app.get('port'), () => {\r\n  console.log('Photography Portfolio App listening on ' + app.get('port'))\r\n})\r\n

What we're installing and why:

  1. We're going to use the AngularJS framework to build Single-page application
  2. We're installing angular-ui-router for create multi views.
  3. We are going to use gulp for build all js and css files into one file.

Building our app:

Now we're going to build out our file structure a bit more so that we can organize our angular modules and js files. This is what our cosmicapp-porfolio directory should look like:

cosmicapp-porfolio\r\n|----app\r\n|       |----auth\r\n|                 |----auth.ctrl.js\r\n|                 |----auth.service.js\r\n|       |----config\r\n|                 |----config.js\r\n|       |----portfolio\r\n|                 |----about\r\n|                           |----portfolio.about.mdl.js\r\n|                 |----contact\r\n|                           |----portfolio.contact.mdl.js\r\n|                 |----intro\r\n|                           |----portfolio.intro.mdl.js\r\n|                 |----projects\r\n|                           |----add\r\n|                                   |----portfolio.projects.add.ctrl.js\r\n|                           |----edit\r\n|                                   |----portfolio.projects.edit.ctrl.js\r\n|                           |----portfolio.projects.mdl.js\r\n|                 |----settings\r\n|                           |----portfolio.settings.ctrl.js\r\n|                           |----portfolio.settings.mdl.js\r\n|                 |----portfolio.ctrl.js\r\n|                 |----portfolio.mdl.js\r\n|                 |----portfolio.service.js\r\n|       |----user\r\n|                 |----user.service.js\r\n|       |----main.mdl.js\r\n|----dist\r\n|       |----css\r\n|       |----img\r\n|       |----js\r\n|----css\r\n|----views\r\n|----gulpfile.js\r\n|----app-server.js\r\n|----bower.json\r\n|----package.json\r\n

Now we we will set up our index.html. Copy and paste the following code into your index.html file:

<!DOCTYPE html>\r\n<html lang="en" ng-app="main">\r\n<head>\r\n    <meta charset="utf-8">\r\n    <meta http-equiv="X-UA-Compatible" content="IE=edge">\r\n    <meta name="viewport" content="width=device-width, initial-scale=1">\r\n    <meta name="description" content="">\r\n    <meta name="author" content="">\r\n\r\n    <title>Photography Portfolio App</title>\r\n\r\n    <!-- bower:css -->\r\n    <!-- endbower -->\r\n\r\n    <!-- Bootstrap Core CSS -->\r\n    <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">\r\n\r\n    <!-- Custom CSS -->\r\n\r\n    <link href="dist/css/main.min.css" rel="stylesheet">\r\n\r\n\r\n    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->\r\n    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->\r\n    <!--[if lt IE 9]>\r\n    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>\r\n    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>\r\n    <![endif]-->\r\n\r\n</head>\r\n<body>\r\n\r\n<div ui-view></div>\r\n\r\n<!-- bower:js -->\r\n<!-- endbower -->\r\n\r\n<script src="dist/js/main.js"></script>\r\n</body>\r\n</html>\r\n

Here, we are going to target our "root" view to place our angular modules in later. The main.js file located in our dist directory is what our gulpfile.js file will spit out after bundling all of our angular modules Now, set up our gulpfile.js\r\nfile to bundle all of our js files and export that bundle file to our dist directory. Copy the following code into your gulpfile.js file:

//cosmicapp-porfolio/gulpfile.js\r\n'use strict';\r\n\r\n'use strict';\r\n\r\nvar gulp = require('gulp'),\r\n    webserver = require('gulp-webserver'),\r\n    minifyCSS = require('gulp-minify-css'),\r\n    concat = require('gulp-concat'),\r\n    wiredep = require('wiredep').stream,\r\n    gulpNgConfig = require('gulp-ng-config'),\r\n    autoprefixer = require('gulp-autoprefixer'),\r\n    b2v = require('buffer-to-vinyl'),\r\n    sync = require('gulp-npm-script-sync');\r\n\r\nsync(gulp);\r\n\r\ngulp.task('css', function () {\r\n  return gulp.src('css/**/*.css')\r\n    .pipe(minifyCSS())\r\n    .pipe(concat('main.min.css'))\r\n    .pipe(autoprefixer())\r\n    .pipe(gulp.dest('dist/css'));\r\n});\r\n\r\ngulp.task('js', function() {\r\n    return gulp.src('app/**/**/*.js')\r\n        .pipe(concat('main.js'))\r\n        .pipe(gulp.dest('dist/js/'));\r\n});\r\n\r\ngulp.task('config', function () {\r\n    const json = JSON.stringify({\r\n        BUCKET_SLUG: process.env.COSMIC_BUCKET,\r\n        MEDIA_URL: 'https://api.cosmicjs.com/v1/' + process.env.COSMIC_BUCKET + '/media',\r\n        URL: 'https://api.cosmicjs.com/v1/',\r\n        READ_KEY: process.env.COSMIC_READ_KEY || '',\r\n        WRITE_KEY: process.env.COSMIC_WRITE_KEY || '',\r\n        DEFAULT_IMAGE: process.env.DEFAULT_IMAGE || ''\r\n    });\r\n    return b2v.stream(new Buffer(json), 'config.js')\r\n        .pipe(gulpNgConfig('config'))\r\n        .pipe(gulp.dest('app/config'));\r\n});\r\n\r\ngulp.task('default', function () {\r\n  gulp.watch('css/**/*.css', ['css']);\r\n  gulp.watch('app/**/**/*.js', ['js']);\r\n  gulp.watch('bower.json', ['bower']);\r\n});\r\n\r\ngulp.task('bower', function () {\r\n  gulp.src('index.html')\r\n    .pipe(wiredep({\r\n      directory: 'bower_components'\r\n    }))\r\n    .pipe(gulp.dest(''));\r\n});\r\n

After that we can create main module. Copy and paste the following code into your main.mdl.js file:

(function () {\r\n    'use strict';\r\n\r\n    angular\r\n        .module('main', [\r\n            'ui.router',\r\n            'ui.bootstrap',\r\n            'ngMask',\r\n            'ngCookies',\r\n            'ngRoute',\r\n            'ngDialog',\r\n            'cr.acl',\r\n            'ui-notification',\r\n            'ngFlash',\r\n            'ngAnimate',\r\n            'textAngular',\r\n            'flow',\r\n            'angular-loading-bar',\r\n            'ngDragDrop',\r\n            'ngSanitize',\r\n            'ngTouch',\r\n\r\n            'portfolio',\r\n\r\n            'config'\r\n        ])\r\n        .config(config)\r\n        .run(run);\r\n\r\n    config.$inject = ['$stateProvider', '$urlRouterProvider', 'cfpLoadingBarProvider', 'NotificationProvider', '$locationProvider'];\r\n    function config($stateProvider, $urlRouterProvider, cfpLoadingBarProvider, NotificationProvider, $locationProvider) {\r\n        cfpLoadingBarProvider.includeSpinner = false;\r\n\r\n        NotificationProvider.setOptions({\r\n            startTop: 25,\r\n            startRight: 25,\r\n            verticalSpacing: 20,\r\n            horizontalSpacing: 20,\r\n            positionX: 'right',\r\n            positionY: 'bottom'\r\n        });\r\n\r\n        $urlRouterProvider.otherwise(function ($injector) {\r\n            var $state = $injector.get("$state");\r\n            $state.go('login');\r\n        });\r\n\r\n        $stateProvider\r\n            .state('blog', {\r\n                url: '/blog',\r\n                templateUrl: '../blog.html'\r\n            })\r\n            .state('login', {\r\n                url: '/login',\r\n                templateUrl: '../views/auth/login.html',\r\n                controller: 'AuthCtrl as auth',\r\n                onEnter: ['AuthService', 'crAcl', function(AuthService, crAcl) {\r\n                    AuthService.clearCredentials();\r\n                    crAcl.setRole();\r\n                }],\r\n                data: {\r\n                    is_granted: ['ROLE_GUEST']\r\n                }\r\n            })\r\n            .state('register', {\r\n                url: '/register',\r\n                templateUrl: '../views/auth/register.html',\r\n                controller: 'AuthCtrl as auth',\r\n                onEnter: ['AuthService', 'crAcl', function(AuthService, crAcl) {\r\n                    AuthService.clearCredentials();\r\n                    crAcl.setRole();\r\n                }],\r\n                data: {\r\n                    is_granted: ['ROLE_GUEST']\r\n                }\r\n            });\r\n\r\n    }\r\n\r\n    run.$inject = ['$rootScope', '$cookieStore', '$state', 'crAcl'];\r\n    function run($rootScope, $cookieStore, $state, crAcl) {\r\n\r\n        $rootScope.globals = $cookieStore.get('globals') || {};\r\n\r\n        crAcl\r\n            .setInheritanceRoles({\r\n                'ROLE_ADMIN': ['ROLE_ADMIN', 'ROLE_GUEST'],\r\n                'ROLE_USER': ['ROLE_USER', 'ROLE_GUEST'],\r\n                'ROLE_GUEST': ['ROLE_GUEST']\r\n            });\r\n\r\n        crAcl\r\n            .setRedirect('login');\r\n\r\n        if ($rootScope.globals.currentUser) {\r\n            crAcl.setRole($rootScope.globals.currentUser.role);\r\n            $state.go('portfolio.intro');\r\n        }\r\n        else {\r\n            crAcl.setRole();\r\n        }\r\n\r\n    }\r\n\r\n})();\r\n

Now we we will set up our Auth Controller. Copy and paste the following code into your auth.ctrl.js file:

(function () {\r\n    'use strict';\r\n\r\n    angular\r\n        .module('main')\r\n        .controller('AuthCtrl', AuthCtrl);\r\n\r\n    function AuthCtrl(crAcl, $state, AuthService, Flash, $log) {\r\n        var vm = this;\r\n\r\n        vm.login = login;\r\n        vm.register = register;\r\n\r\n        vm.loginForm = null;\r\n\r\n        vm.credentials = {};\r\n        vm.user = {};\r\n\r\n        function login(credentials) {\r\n            function success(response) {\r\n                function success(response) {\r\n                    if (response.data.status !== 'empty') {\r\n                        var currentUser = response.data.objects[0];\r\n\r\n                        crAcl.setRole('ROLE_USER');\r\n                        AuthService.setCredentials({\r\n                            slug: currentUser.slug,\r\n                            first_name: currentUser.metadata.first_name,\r\n                            last_name: currentUser.metadata.last_name,\r\n                            email: currentUser.metadata.email,\r\n                            role: 'ROLE_USER'\r\n                        });\r\n                        $state.go('portfolio.intro', {slug: currentUser.slug});\r\n                    }\r\n                    else\r\n                        Flash.create('danger', 'Incorrect username or password');\r\n                }\r\n\r\n                function failed(response) {\r\n                    $log.error(response);\r\n                }\r\n\r\n                if (response.data.status !== 'empty')\r\n                    AuthService\r\n                        .checkPassword(credentials)\r\n                        .then(success, failed);\r\n                else\r\n                    Flash.create('danger', 'Incorrect username or password');\r\n\r\n                $log.info(response);\r\n            }\r\n\r\n            function failed(response) {\r\n                $log.error(response);\r\n            }\r\n\r\n            if (vm.loginForm.$valid)\r\n                AuthService\r\n                    .checkUsername(credentials)\r\n                    .then(success, failed);\r\n        }\r\n\r\n        function register(credentials) {\r\n            function success(response) {\r\n                login(credentials);\r\n\r\n                $log.info(response);\r\n            }\r\n\r\n            function failed(response) {\r\n                $log.error(response);\r\n            }\r\n\r\n            if (vm.loginForm.$valid)\r\n                AuthService\r\n                    .register(credentials)\r\n                    .then(success, failed);\r\n        }\r\n\r\n    }\r\n})();\r\n

Create Auth Service, copy and paste the code below:

(function () {\r\n    'use strict';\r\n\r\n    angular\r\n        .module('main')\r\n        .service('AuthService', function ($http,\r\n                                          $cookieStore,\r\n                                          $q,\r\n                                          $rootScope,\r\n                                          URL, BUCKET_SLUG, READ_KEY, WRITE_KEY) {\r\n            var authService = this;\r\n            $http.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';\r\n\r\n            authService.checkUsername = function (credentials) {\r\n                return $http.get(URL + BUCKET_SLUG + '/object-type/users/search', {\r\n                    params: {\r\n                        metafield_key: 'email',\r\n                        metafield_value_has: credentials.email,\r\n                        limit: 1,\r\n                        read_key: READ_KEY\r\n                    }\r\n                });\r\n            };\r\n            authService.checkPassword = function (credentials) {\r\n                return $http.get(URL + BUCKET_SLUG + '/object-type/users/search', {\r\n                    ignoreLoadingBar: true,\r\n                    params: {\r\n                        metafield_key: 'password',\r\n                        metafield_value: credentials.password,\r\n                        limit: 1,\r\n                        read_key: READ_KEY\r\n                    }\r\n                });\r\n            };\r\n            this.register = function (user) {\r\n                return $http.post(URL + BUCKET_SLUG + '/add-object', {\r\n                        title: user.first_name + ' ' + user.last_name,\r\n                        type_slug: 'users',\r\n                        slug: user.username,\r\n                        metafields: [\r\n                            {\r\n                                key: "first_name",\r\n                                type: "text",\r\n                                value: user.first_name\r\n                            },\r\n                            {\r\n                                key: "last_name",\r\n                                type: "text",\r\n                                value: user.last_name\r\n                            },\r\n                            {\r\n                                key: "email",\r\n                                type: "text",\r\n                                value: user.email\r\n                            },\r\n                            {\r\n                                key: "password",\r\n                                type: "text",\r\n                                value: user.password\r\n                            },\r\n                            {\r\n                                key: "intro",\r\n                                type: "html-textarea",\r\n                                value: null\r\n                            },\r\n                            {\r\n                                key: "about",\r\n                                type: "html-textarea",\r\n                                value: null\r\n                            },\r\n                            {\r\n                                key: "contact",\r\n                                type: "html-textarea",\r\n                                value: null\r\n                            },\r\n                            {\r\n                                key: "projects",\r\n                                type: "objects",\r\n                                objects: [],\r\n                                object_type: "projects",\r\n                                value: null\r\n                            }\r\n                        ],\r\n\r\n                        write_key: WRITE_KEY\r\n                    }, { ignoreLoadingBar: false });\r\n            };\r\n            authService.setCredentials = function (user) {\r\n                $rootScope.globals = {\r\n                    currentUser: user\r\n                };\r\n\r\n                $cookieStore.put('globals', $rootScope.globals);\r\n            };\r\n            authService.clearCredentials = function () {\r\n                var deferred = $q.defer();\r\n                $cookieStore.remove('globals');\r\n\r\n                if (!$cookieStore.get('globals')) {\r\n                    $rootScope.globals = {};\r\n                    deferred.resolve('Credentials clear success');\r\n                } else {\r\n                    deferred.reject('Can\\'t clear credentials');\r\n                }\r\n\r\n                return deferred.promise;\r\n            };\r\n        });\r\n})();\r\n

What's going on here:

  1. We are using the ui-router for config routes.
  2. We created Auth Service for our asynchronous calls to our Cosmic API.
  3. We created Auth Controller for checking credentials and registration users.

Create User Service for get and update User, copy and paste the code below:

(function () {\r\n    'use strict';\r\n\r\n    angular\r\n        .module('main')\r\n        .service('UserService', function ($http,\r\n                                          $cookieStore,\r\n                                          $q,\r\n                                          $rootScope,\r\n                                          URL, BUCKET_SLUG, READ_KEY, WRITE_KEY) {\r\n            $http.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';\r\n\r\n            this.getCurrentUser = function (ignoreLoadingBar) {\r\n                return $http.get(URL + BUCKET_SLUG + '/object/' + $rootScope.globals.currentUser.slug, {\r\n                    ignoreLoadingBar: ignoreLoadingBar,\r\n                    params: {\r\n                        read_key: READ_KEY\r\n                    }\r\n                });\r\n            };\r\n            this.getUser = function (slug, ignoreLoadingBar) {\r\n                return $http.get(URL + BUCKET_SLUG + '/object/' + slug, {\r\n                    ignoreLoadingBar: ignoreLoadingBar,\r\n                    params: {\r\n                        read_key: READ_KEY\r\n                    }\r\n                });\r\n            };\r\n            this.updateUser = function (user) {\r\n                user.write_key = WRITE_KEY;\r\n\r\n                return $http.put(URL + BUCKET_SLUG + '/edit-object', user, {\r\n                    ignoreLoadingBar: false\r\n                });\r\n            };\r\n\r\n        });\r\n})();\r\n

Create Portfolio Service for get and update, copy and paste the code below:

(function () {\r\n    'use strict';\r\n\r\n    angular\r\n        .module('main')\r\n        .service('PortfolioService', function ($http,\r\n                                          $cookieStore,\r\n                                          $q,\r\n                                          $rootScope,\r\n                                          URL, BUCKET_SLUG, READ_KEY, WRITE_KEY, MEDIA_URL) {\r\n\r\n            $http.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';\r\n\r\n            this.getPortfolioBySlug = function (slug) {\r\n                return $http.get(URL + BUCKET_SLUG + '/object/' + slug, {\r\n                    params: {\r\n                        read_key: READ_KEY\r\n                    }\r\n                });\r\n            };\r\n\r\n            this.updatePortfolio = function (portfolio) {\r\n                portfolio.write_key = WRITE_KEY;\r\n\r\n                return $http.put(URL + BUCKET_SLUG + '/edit-object', portfolio);\r\n            };\r\n\r\n            this.upload = function (file) {\r\n                var fd = new FormData();\r\n                fd.append('media', file);\r\n                fd.append('write_key', WRITE_KEY);\r\n\r\n                var defer = $q.defer();\r\n\r\n                var xhttp = new XMLHttpRequest();\r\n\r\n                xhttp.upload.addEventListener("progress",function (e) {\r\n                    defer.notify(parseInt(e.loaded * 100 / e.total));\r\n                });\r\n                xhttp.upload.addEventListener("error",function (e) {\r\n                    defer.reject(e);\r\n                });\r\n\r\n                xhttp.onreadystatechange = function() {\r\n                    if (xhttp.readyState === 4) {\r\n                        defer.resolve(JSON.parse(xhttp.response)); //Outputs a DOMString by default\r\n                    }\r\n                };\r\n\r\n                xhttp.open("post", MEDIA_URL, true);\r\n\r\n                xhttp.send(fd);\r\n\r\n                return defer.promise;\r\n            }\r\n        });\r\n})();\r\n

Create Portfolio Controller for update and add, edit projects, copy and paste the code below:

(function () {\r\n    'use strict';\r\n\r\n    angular\r\n        .module('main')\r\n        .controller('PortfolioCtrl', PortfolioCtrl);\r\n\r\n    function PortfolioCtrl($rootScope, $stateParams, $sce, $scope, $state, ngDialog, AuthService, UserService, PortfolioService, $log) {\r\n        var vm = this;\r\n\r\n        getPortfolio();\r\n\r\n        vm.currentUser = $rootScope.globals.currentUser ? $rootScope.globals.currentUser : getUser();\r\n\r\n        vm.logout = logout;\r\n        vm.updatePortfolio = updatePortfolio;\r\n        vm.openAddProjectDialog = openAddProjectDialog;\r\n        vm.openEditProjectDialog = openEditProjectDialog;\r\n\r\n        vm.portfolio = {};\r\n\r\n        vm.toolbarEditor = [\r\n            ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'bold', 'italics', 'underline', 'justifyLeft', 'justifyCenter', 'justifyRight']\r\n        ];\r\n\r\n        function chunk(arr, size) {\r\n            var newArr = [];\r\n            for (var i = 0; i < arr.length; i += size) {\r\n                newArr.push(arr.slice(i, i + size));\r\n            }\r\n            return newArr;\r\n        }\r\n\r\n        function getUser() {\r\n            function success(response) {\r\n                var currentUser = response.data.object;\r\n\r\n                vm.currentUser = {\r\n                    slug: currentUser.slug,\r\n                    first_name: currentUser.metadata.first_name,\r\n                    last_name: currentUser.metadata.last_name,\r\n                    email: currentUser.metadata.email\r\n                };\r\n            }\r\n\r\n            function failed(response) {\r\n                $log.error(response);\r\n            }\r\n\r\n            UserService\r\n                .getUser($stateParams.slug, true)\r\n                .then(success, failed);\r\n        }\r\n\r\n        function getPortfolio() {\r\n            function success(response) {\r\n                vm.portfolio = response.data.object;\r\n\r\n                if (Array.isArray(vm.portfolio.metadata.projects))\r\n                    vm.projectsChunk = chunk(vm.portfolio.metadata.projects, 2);\r\n                else\r\n                    vm.projectsChunk = [];\r\n\r\n                vm.contact = $sce.trustAsResourceUrl('mailto:' + vm.currentUser.email);\r\n\r\n                $log.info(response);\r\n            }\r\n\r\n            function failed(response) {\r\n                $log.error(response);\r\n            }\r\n\r\n            PortfolioService\r\n                .getPortfolioBySlug($stateParams.slug)\r\n                .then(success, failed);\r\n        }\r\n\r\n        function updatePortfolio() {\r\n            function success(response) {\r\n                getPortfolio();\r\n\r\n                $log.info(response);\r\n            }\r\n\r\n            function failed(response) {\r\n                $log.error(response);\r\n            }\r\n\r\n            PortfolioService\r\n                .updatePortfolio(vm.portfolio)\r\n                .then(success, failed);\r\n        }\r\n\r\n        function openAddProjectDialog(slug) {\r\n\r\n            var options = {\r\n                templateUrl: '../views/portfolio/portfolio.project.edit.html',\r\n                showClose: true,\r\n                controller: 'PortfolioProjectsAddCtrl as vm'\r\n            };\r\n\r\n            ngDialog.open(options).closePromise.finally(function () {\r\n                getPortfolio();\r\n            });\r\n        }\r\n\r\n        function openEditProjectDialog(slug) {\r\n\r\n            var options = {\r\n                templateUrl: '../views/portfolio/portfolio.project.edit.html',\r\n                showClose: true,\r\n                controller: 'PortfolioProjectsEditCtrl as vm',\r\n                data: {\r\n                    slug: slug\r\n                }\r\n            };\r\n\r\n            ngDialog.open(options).closePromise.finally(function () {\r\n                getPortfolio();\r\n            });\r\n        }\r\n\r\n        function logout() {\r\n            function success(response) {\r\n                $state.go('auth');\r\n\r\n                $log.info(response);\r\n            }\r\n\r\n            function failed(response) {\r\n                $log.error(response);\r\n            }\r\n\r\n            AuthService\r\n                .clearCredentials()\r\n                .then(success, failed);\r\n        }\r\n\r\n        $scope.state = $state;\r\n\r\n    }\r\n})();\r\n

Create Portfolio Module, copy and paste the code below:

(function () {\r\n    'use strict';\r\n\r\n    angular\r\n        .module('portfolio', [\r\n            'portfolio.intro',\r\n            'portfolio.projects',\r\n            'portfolio.about',\r\n            'portfolio.contact',\r\n            'portfolio.settings'\r\n        ])\r\n        .config(config);\r\n\r\n    config.$inject = ['$stateProvider'];\r\n    function config($stateProvider) {\r\n\r\n        $stateProvider\r\n            .state('portfolio', {\r\n                url: '/:slug/',\r\n                abstract: true,\r\n                templateUrl: '../views/portfolio/portfolio.html',\r\n                controller: 'PortfolioCtrl as vm',\r\n                data: {\r\n                    is_granted: ['ROLE_USER', 'ROLE_GUEST']\r\n                }\r\n            });\r\n    }\r\n})();\r\n

What's going on here:

  1. We created Portfolio Service for get and update.
  2. We created Portfolio Controller for update and add, edit project.
  3. We created Portfolio Module.

Create Author Controller for getting information of author, copy and paste the code below:

Conclusion:

We were able to consume the Cosmic API with our actions and dispatcher functions. I hope you enjoyed this tutorial as much as I did, if you have any questions reach out to us on Twitter and join our community on Slack.

","metafields":[{"object_type":"authors","value":"5914999aa57d9d4b390034d5","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5914999aa57d9d4b390034d5","slug":"dmytro-kutsaniuk","title":"Dmytro Kutsaniuk","content":"","metafields":[{"value":"e265ea60-366b-11e7-9161-61cd2f0acd2a-kutsaniuk.jpeg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e265ea60-366b-11e7-9161-61cd2f0acd2a-kutsaniuk.jpeg","imgix_url":"https://imgix.cosmicjs.com/e265ea60-366b-11e7-9161-61cd2f0acd2a-kutsaniuk.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-05-11T17:04:26.061Z","created_by":"5357ef811693be2118000001","created":"2017-05-11T17:04:26.061Z","status":"published"}},{"value":"

At the end of the tutorial we will have a platform that enables management of multiple portfolio websites.   Users can login and manage their portfolio website.  The admin can manage multiple users from the Cosmic Dashboard.  Let's get started.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"cf142be0-8e6b-11e7-82dc-39c3e4709045-nirzar-pangarkar-798.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/cf142be0-8e6b-11e7-82dc-39c3e4709045-nirzar-pangarkar-798.jpg","imgix_url":"https://imgix.cosmicjs.com/cf142be0-8e6b-11e7-82dc-39c3e4709045-nirzar-pangarkar-798.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-08-31T16:45:46.640Z","created_by":"55767c3ffbcf5cbb13000001","created":"2017-08-31T16:45:46.640Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"55767c3ffbcf5cbb13000001","publish_at":null,"metadata":{"author":{"_id":"5914999aa57d9d4b390034d5","slug":"dmytro-kutsaniuk","title":"Dmytro Kutsaniuk","content":"","metafields":[{"value":"e265ea60-366b-11e7-9161-61cd2f0acd2a-kutsaniuk.jpeg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e265ea60-366b-11e7-9161-61cd2f0acd2a-kutsaniuk.jpeg","imgix_url":"https://imgix.cosmicjs.com/e265ea60-366b-11e7-9161-61cd2f0acd2a-kutsaniuk.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-05-11T17:04:26.061Z","created_by":"5357ef811693be2118000001","created":"2017-05-11T17:04:26.061Z","status":"published","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e265ea60-366b-11e7-9161-61cd2f0acd2a-kutsaniuk.jpeg","imgix_url":"https://imgix.cosmicjs.com/e265ea60-366b-11e7-9161-61cd2f0acd2a-kutsaniuk.jpeg"}}},"teaser":"

At the end of the tutorial we will have a platform that enables management of multiple portfolio websites.   Users can login and manage their portfolio website.  The admin can manage multiple users from the Cosmic Dashboard.  Let's get started.

","featured_image":{"url":"https://cdn.cosmicjs.com/cf142be0-8e6b-11e7-82dc-39c3e4709045-nirzar-pangarkar-798.jpg","imgix_url":"https://imgix.cosmicjs.com/cf142be0-8e6b-11e7-82dc-39c3e4709045-nirzar-pangarkar-798.jpg"}}},{"_id":"599f2cf75f2b9d457f000a0c","order":105,"slug":"new-feature-media-metadata","title":"New Feature: Media Metadata","content":"

We're excited to announce you now have the ability to add metadata to your Bucket Media.  It's easy and just takes a couple steps:

1. Go to the Media area in your Bucket located in Your Bucket Dashboard > Media.  Hover over the Media that you want to add metadata to and click "Add Metadata".


2. Add your key / values to the Media and click "Save Metadata".


3. Your Media now has the metadata available via the media endpoint.


This is another Community-requested feature to help you and your team Build Apps Faster.  If you have any questions, connect with us on Twitter and join other members of our Community in conversation on our Slack channel.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"

We're excited to announce you now have the ability to add metadata to your Media files.  It's easy and just takes a few steps:

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"66fb2140-89a6-11e7-9058-37a4cf571938-metadata.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/66fb2140-89a6-11e7-9058-37a4cf571938-metadata.jpg","imgix_url":"https://imgix.cosmicjs.com/66fb2140-89a6-11e7-9058-37a4cf571938-metadata.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-08-25T19:45:59.592Z","created_by":"5716b504e9c686d006000073","created":"2017-08-25T19:45:59.592Z","status":"published","modified_at":"2020-08-10T14:04:22.001Z","modified_by":"5357ef811693be2118000001","publish_at":null,"metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

We're excited to announce you now have the ability to add metadata to your Media files.  It's easy and just takes a few steps:

","featured_image":{"url":"https://cdn.cosmicjs.com/66fb2140-89a6-11e7-9058-37a4cf571938-metadata.jpg","imgix_url":"https://imgix.cosmicjs.com/66fb2140-89a6-11e7-9058-37a4cf571938-metadata.jpg"}}},{"_id":"599dcfe171c343eb6f00091d","order":106,"slug":"new-feature-scheduled-publishing","title":"New Feature: Scheduled Publishing","content":"

You now have the ability to schedule your Objects for automatic publishing at a later date and time.  You will notice next to the "Publish" button there is now a calendar button.  Select your preferred publish date and time, then click Save Draft and your Object will be scheduled to publish automatically.


If you have any questions about this new feature, reach out to us on Twitter and join the conversation with the Cosmic Community on our Slack channel.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"

We're happy to announce that you now have the ability to publish your Objects at a later date and time.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"c4e4dee0-8834-11e7-87d1-078af47a9a3d-jeanne-rouillard-43967.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/c4e4dee0-8834-11e7-87d1-078af47a9a3d-jeanne-rouillard-43967.jpg","imgix_url":"https://imgix.cosmicjs.com/c4e4dee0-8834-11e7-87d1-078af47a9a3d-jeanne-rouillard-43967.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-08-23T18:56:33.094Z","created_by":"5357ef811693be2118000001","created":"2017-08-23T18:56:33.094Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5716b504e9c686d006000073","publish_at":null,"metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

We're happy to announce that you now have the ability to publish your Objects at a later date and time.

","featured_image":{"url":"https://cdn.cosmicjs.com/c4e4dee0-8834-11e7-87d1-078af47a9a3d-jeanne-rouillard-43967.jpg","imgix_url":"https://imgix.cosmicjs.com/c4e4dee0-8834-11e7-87d1-078af47a9a3d-jeanne-rouillard-43967.jpg"}}},{"_id":"599b31e7372985c958000097","order":107,"slug":"how-to-build-a-sticky-notes-app-using-react-and-redux","title":"How to Build a Sticky Notes App Using React and Redux","content":"

In this tutorial, I'm going to show you how to create a simple Sticky Notes app using React, Redux, Selectors, Redux Sagas, a little bit of Node, and Cosmic. For the sake of understanding how to consume Restful API’s, this tutorial will show how to make AJAX (XHR) requests to the Cosmic API in order to retrieve, add, update, and delete data/media in our Cosmic Buckets. Let's get started.

TL;DR

Download the GitHub repo\r\n
Check out the demo

{\r\n  "name": "sticky-notes",\r\n  "version": "1.0.0",\r\n  "description": "Sticky Notes app built using react, redux & cosmic.",\r\n  "main": "index.js",\r\n  "scripts": {\r\n    "start": "npm run build; node server/index.js",\r\n    "start-dev": "nodemon server/index.js",\r\n    "build": "webpack -p",\r\n    "build-dev": "webpack -w",\r\n    "test": "echo \\"Error: no test specified\\" && exit 1"\r\n  },\r\n  "repository": {\r\n    "type": "git",\r\n    "url": "git+https://github.com/jazibsawar/sticky-notes.git"\r\n  },\r\n  "author": "Muhammad Musa",\r\n  "license": "ISC",\r\n  "bugs": {\r\n    "url": "https://github.com/jazibsawar/sticky-notes/issues"\r\n  },\r\n  "homepage": "https://github.com/jazibsawar/sticky-notes#readme",\r\n  "dependencies": {\r\n    "async": "^2.5.0",\r\n    "babel": "^6.23.0",\r\n    "babel-core": "^6.25.0",\r\n    "babel-loader": "^7.1.1",\r\n    "babel-plugin-transform-class-properties": "^6.24.1",\r\n    "babel-plugin-transform-regenerator": "^6.24.1",\r\n    "babel-polyfill": "^6.23.0",\r\n    "babel-preset-es2015": "^6.24.1",\r\n    "babel-preset-react": "^6.24.1",\r\n    "babel-preset-stage-0": "^6.24.1",\r\n    "body-parser": "^1.17.2",\r\n    "cosmicjs": "^2.39.91",\r\n    "express": "^4.15.3",\r\n    "immutable": "^3.8.1",\r\n    "moment": "^2.18.1",\r\n    "prop-types": "^15.5.10",\r\n    "react": "^15.6.1",\r\n    "react-addons-css-transition-group": "^15.6.0",\r\n    "react-addons-transition-group": "^15.6.0",\r\n    "react-color": "^2.13.4",\r\n    "react-dom": "^15.6.1",\r\n    "react-modal-dialog": "^4.0.7",\r\n    "react-redux": "^5.0.5",\r\n    "react-router": "^3.0.5",\r\n    "react-spinners": "0.0.30",\r\n    "redux": "^3.7.2",\r\n    "redux-logger": "^3.0.6",\r\n    "redux-saga": "^0.15.6",\r\n    "redux-thunk": "^2.2.0",\r\n    "reselect": "^3.0.1",\r\n    "styled-components": "^2.1.1",\r\n    "volleyball": "^1.4.1",\r\n    "webpack": "^3.4.1",\r\n    "webpack-livereload-plugin": "^0.11.0",\r\n    "whatwg-fetch": "^2.0.3"\r\n  },\r\n  "devDependencies": {\r\n    "chai": "^4.1.0",\r\n    "cross-env": "^5.0.1",\r\n    "mocha": "^3.5.0",\r\n    "nodemon": "^1.11.0"\r\n  }\r\n}

What we're installing and why:

  1. We're going to use the whatwg-fetch and cosmicjs library to handle our requests to our Cosmic Bucket.
  2. We're installing react and react-dom to build our react components.
  3. We are going to use redux, react-redux, redux-logger, reselect and redux-sagas to help us implement what is called the Redux architecture.
  4. We have used styled-components to make the stickynotes component styling generic. We can pass style variables in it too.
  5. We used react-spinners to use loading component.
  6. We used react-color to use color picker component.
  7. We used react-modal-dialog to use react modal component.
  8. We used immutable package by Facebook to use immutable objects.
  9. We used moment to format dates.
  10. We used react-router for routing and navigation.
  11. The only thing worth mentioning in the dev dependencies is webpack and volleyball. Webpack will help us bundle all of our react and redux files into one large "bundle" file that will be used in our index.html.\r\nVolleyball is a cool little library that allows us to see in our console incoming and outgoing HTTP requests.

Building our app:

Now we we will set up our index.html in our client directory. Copy and paste the following code into your index.html file:

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <meta charset="UTF-8" />\r\n    <meta name="viewport" content="width=device-width, initial-scale=1" />\r\n    <title>Cosmic Sticky Notes App!</title>\r\n    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">\r\n    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >\r\n    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>\r\n    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>\r\n    <script src="/dist/bundle.js" defer></script>\r\n</head>\r\n<body id="top">\r\n<div id="root"></div>\r\n</body>\r\n</html>

Here, we are going to target our root div to place our react components in later. The bundle.js file located in our dist directory is what our webpack.config file will spit out after bundling all of our react components. Now, set up our webpack.config file to bundle all of our react files and export that bundle file to our dist directory. Copy the following code into your webpack.config.js file:

var path = require('path');\r\nvar LiveReloadPlugin = require('webpack-livereload-plugin');\r\nvar webpack = require('webpack');\r\n\r\nmodule.exports = {\r\n  entry: './client/index.js',\r\n  output: {\r\n    filename: 'bundle.js',\r\n    path: path.resolve(__dirname, 'client/dist')\r\n  },\r\n  context: __dirname,\r\n  resolve: {\r\n    extensions: ['.js', '.jsx', '.json', '*']\r\n  },\r\n  module: {\r\n    rules: [{\r\n        test: /\\.jsx?$/,\r\n        exclude: /(node_modules|bower_components)/,\r\n        loader: 'babel-loader',\r\n        options: {\r\n          presets: ['react', 'es2015', 'stage-0']\r\n        }\r\n      },\r\n    ]\r\n  },\r\n  plugins: [\r\n    new webpack.DefinePlugin({\r\n      'process.env': {\r\n        'COSMIC_BUCKET': JSON.stringify(process.env.COSMIC_BUCKET),\r\n        'COSMIC_READ_KEY': JSON.stringify(process.env.COSMIC_READ_KEY),\r\n        'COSMIC_WRITE_KEY': JSON.stringify(process.env.COSMIC_WRITE_KEY)\r\n      }\r\n    }),\r\n    new LiveReloadPlugin({appendScriptTag: true}),\r\n  ]\r\n};

Then, we have server/index.js file when we used express to make our server.

In Client folder there is store.js file which is creating redux store to manage states and data. The things that are happening are as follows:

import { createStore, applyMiddleware, combineReducers } from 'redux';\r\nimport homeReducer from './containers/Home/reducer';\r\nimport homeSagas from './containers/Home/sagas';\r\n\r\n\r\nimport groupReducer from './containers/Group/reducer';\r\nimport groupSagas from './containers/Group/sagas';\r\n\r\nimport thunkMiddleware from 'redux-thunk';\r\nimport createSagaMiddleware from 'redux-saga';\r\n\r\nconst sagaMiddleware = createSagaMiddleware();\r\n\r\nconst middlewares = [\r\n  sagaMiddleware,\r\n  thunkMiddleware,\r\n];\r\n\r\nconst reducers = combineReducers({\r\n  home: homeReducer,\r\n  group: groupReducer,\r\n});\r\nconst store = createStore(\r\n  reducers,\r\n  applyMiddleware(...middlewares),\r\n);\r\n\r\nsagaMiddleware.run(homeSagas)\r\nsagaMiddleware.run(groupSagas)\r\n\r\nexport default store;

Now we have client/Routes.js. Here, we have two routes:

  1. Path="/" => Lists all groups
  2. Path="/group/:groupSlug/:groupId" => list all notes against some groups
import React from 'react';\r\nimport { Router, Route, browserHistory } from 'react-router';\r\nimport { connect } from 'react-redux';\r\nimport Home from './containers/Home';\r\nimport Group from './containers/Group';\r\n\r\nconst Routes = ({}) => {\r\n  return (\r\n    <Router history={browserHistory}>\r\n        <Route path="/" component={Home} />\r\n        <Route path="/group/:groupSlug/:groupId" component={Group} />\r\n    </Router>\r\n  )\r\n};\r\n\r\n// const mapState = ({}) => ({});\r\n// const mapDispatch = {};\r\n\r\nexport default connect(null, null)(Routes);

In client folder we have create a configuration file inorder to save API_KEYS and COSMIC BUCKET NAME. You can edit this file to use your own keys and slugs.

export default {\r\n  bucket: {\r\n    slug: process.env.COSMIC_BUCKET || 'sticky-note-app',\r\n    read_key: "YOUR READ KEY",\r\n    write_key: "YOUR WRITE KEY",\r\n  }\r\n}

There are two utils:

Request

Request uses whatwg-fetch to hit AJAX requests to the Cosmic API. This util is used to call those endpoints which are not present in the Cosmic package e.g deleteMedia and searchObjects based on filters

Cosmic

Cosmic uses cosmicjs package to hit AJAX request to Cosmic API.

There are two container:

Home

This container lists down groups. This group add new Note Group. It also edits and delete NoteGroups. This selects NoteGroup data from reducers and passes them to their components. This also passes add, edit and delete NoteGroup actions to the home component.

Group

This selects Notes data from reducers and passes them to their components. This also passes add, edit and delete Notes actions to the home component.

There are following components in this app

ColorPicker

This component is for picking the color of Sticky Note.

import React, {Component} from 'react';\r\nimport { ChromePicker } from 'react-color';\r\n\r\n\r\nclass ColorPickerField extends Component {\r\n  constructor(props){\r\n    super(props);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <ChromePicker\r\n        color={this.props.color}\r\n        onChangeComplete={this.props.changeColor}\r\n      />\r\n    )\r\n  }\r\n}\r\n\r\nexport default ColorPickerField;

Dialog

This component will show the popups and dialogs to get input data and output responses

import React, {Component} from 'react';\r\nimport { ModalContainer, ModalDialog } from 'react-modal-dialog';\r\n\r\n\r\nclass Dialog extends Component {\r\n  constructor(props){\r\n    super(props);\r\n  }\r\n\r\n\r\n  handleClose = () => {\r\n    this.props.closeDialog();\r\n  }\r\n  render() {\r\n    const { open } = this.props;\r\n    return (\r\n      <div>\r\n        {\r\n          open &&\r\n          <ModalContainer onClose={this.handleClose}>\r\n            <ModalDialog onClose={this.handleClose}>\r\n              { this.props.children }\r\n            </ModalDialog>\r\n          </ModalContainer>\r\n        }\r\n      </div>\r\n    )\r\n  }\r\n}\r\n\r\nexport default Dialog;

Loader

This is a loader component and it triggers whenever an ajax request in taking place.

import React, {Component} from 'react';\r\nimport { BounceLoader } from 'react-spinners';\r\n\r\n\r\nclass Loader extends Component {\r\n  constructor(props){\r\n    super(props);\r\n  }\r\n\r\n\r\n  render() {\r\n    const style = {\r\n      position: "fixed",\r\n      top: "50%",\r\n      left: "50%",\r\n      marginTop: "-9em",\r\n      marginLeft: "-15em",\r\n    };\r\n    return (\r\n      <div style={style}>\r\n        <BounceLoader\r\n          color={'#123abc'}\r\n          loading\r\n          size={300}\r\n        />\r\n      </div>\r\n    )\r\n  }\r\n}\r\n\r\nexport default Loader;

StickyNotes

This component takes an array of options and convert them to stickynotes with edit, heading onclick and delete handler.

import React, {Component} from 'react';\r\nimport { NoteListWrapper, NoteWrapper, Note } from './styles';\r\nimport moment from 'moment/moment'\r\nclass StickyNotes extends Component {\r\n\r\n\r\n  render() {\r\n    const { options } = this.props;\r\n    return (\r\n      <NoteListWrapper>\r\n        {\r\n          !!options && options.toArray().map((option, index) => {\r\n          return  <NoteWrapper key={`note_${index}`}>\r\n              <Note backgroundColor={option.getIn(['metadata', 'color'])||"black"} color="#ffffff" rotate={index%2 === 0? -2 : 4}>\r\n                <small>{moment(option.get('created')).fromNow()}</small>\r\n                <h4 onClick={() => this.props.handleClick(option)}>{option.get('title').substring(0,11)}</h4>\r\n                <p>{option.get('content').substring(0, 41)}</p>\r\n                <span className="buttons">\r\n                  <a onClick={() => this.props.deleteOption(option.toJS(), index)} className="pull-right"><i className="fa fa-trash-o"></i></a>\r\n                  <a onClick={() => this.props.editOption(option, index)} style={{ marginRight: "1vw" }} className="pull-right"><i className="fa fa-pencil"></i></a>\r\n                </span>\r\n              </Note>\r\n            </NoteWrapper>\r\n          })\r\n        }\r\n      </NoteListWrapper>\r\n    )\r\n  }\r\n}\r\n\r\nexport default StickyNotes;

Home

This is a component where we feed NoteGroup options to Sticky Notes component and have add, edit and delete handlers.

import React, {Component} from 'react';\r\nimport Dialog from '../Dialog';\r\nimport StickyNotes from '../StickyNotes';\r\nimport ColorPicker from '../ColorPicker';\r\n\r\nclass Home extends Component {\r\n  constructor(props){\r\n    super(props);\r\n    this.state = {\r\n      title: "",\r\n      content: "",\r\n      color: "#fff",\r\n      selectedGroup: null,\r\n      openAddDialog: false,\r\n      openEditDialog: false,\r\n      group: {\r\n        title: "",\r\n      },\r\n    }\r\n  }\r\n\r\n  addGroup = () => {\r\n    const { title, content, color } = this.state;\r\n    this.props.addGroup({\r\n      title,\r\n      content,\r\n      color,\r\n    });\r\n    this.setState({ title: "", content: "", openAddDialog: false })\r\n  }\r\n\r\n\r\n  editGroup = () => {\r\n    const { group, selectedGroup } = this.state;\r\n    const { state } = this;\r\n    this.props.editGroup({\r\n      title: group.title,\r\n      content: group.content,\r\n      color: group.color,\r\n    }, group.slug, selectedGroup);\r\n    this.setState({ ...state, group: { title: "" }, openEditDialog: false })\r\n  }\r\n\r\n  goToNoteGroup = (group) => {\r\n    this.props.changeRoute(`/group/${group.get('slug')}/${group.get('_id')}`);\r\n  }\r\n\r\n  editOption = (group, selectedGroup) => {\r\n    this.setState({\r\n      openEditDialog: true,\r\n      group: group.toJS(),\r\n      selectedGroup,\r\n    });\r\n  }\r\n  render() {\r\n    const { groups } = this.props;\r\n    const { state } = this;\r\n    const { title, content, color, openAddDialog, openEditDialog, group } = this.state;\r\n\r\n    const styles = {\r\n      btnCircle: {\r\n        width: "30px",\r\n        height: "30px",\r\n        textAlign: "center",\r\n        padding: "6px 0",\r\n        fontSize: "12px",\r\n        fontWeight: "700",\r\n        lineHeight: "1.42",\r\n        borderRadius: "15px",\r\n        margin: "10px",\r\n        border: "none",\r\n        outline: "none",\r\n        float: "right"\r\n      }\r\n    }\r\n\r\n    return (\r\n      <div className="container-fluid">\r\n      <div className="row">\r\n        <button style={styles.btnCircle} className="btn btn-primary btn-lg" onClick={() => this.setState({ openAddDialog: true })}>\r\n          <i className="fa fa-plus"></i>\r\n        </button>\r\n      <Dialog\r\n        open={openAddDialog}\r\n        closeDialog={() => this.setState({ openAddDialog: false })}\r\n      >\r\n        <div className="container-fluid">\r\n          <div className="col-xs-12">\r\n            <input placeholder="Enter Name ..." type="text" style={{ margin: "1vh 0" }} value={title} className="form-control" onChange={(e) => this.setState({ title: e.target.value })} />\r\n          </div>\r\n          <div className="col-xs-12">\r\n            <textarea value={content} placeholder="Enter Description ..." rows="4" cols="50" style={{ margin: "1vh 0" }} className="form-control" onChange={(e) => this.setState({ content: e.target.value })} />\r\n          </div>\r\n\r\n          <div className="col-xs-12">\r\n            <ColorPicker color={color} changeColor={(color) => this.setState({ color: color.hex })} />\r\n          </div>\r\n\r\n\r\n          <div className="col-xs-12">\r\n            <input type="button" disabled={title === "" && "disabled"} style={{ margin: "1vh 0" }} value="Add Group" className="btn btn-primary btn-lg" onClick={this.addGroup} />\r\n          </div>\r\n        </div>\r\n      </Dialog>\r\n\r\n      <Dialog\r\n        open={openEditDialog}\r\n        closeDialog={() => this.setState({ openEditDialog: false })}\r\n      >\r\n        <div className="container-fluid">\r\n          <div className="col-xs-12">\r\n            <input style={{ margin: "1vh 0" }} type="text" value={group.title} className="form-control" onChange={(e) => this.setState({ ...state, group: {  ...this.state.group, title: e.target.value } })} />\r\n          </div>\r\n          <div className="col-xs-12">\r\n            <textarea value={group.content||""} style={{ margin: "1vh 0" }} type="text" className="form-control" onChange={(e) => this.setState({ ...state, group: {  ...this.state.group, content: e.target.value } })} />\r\n          </div>\r\n          <div className="col-xs-12">\r\n            <ColorPicker color={group.color} changeColor={(color) => this.setState({ ...state, group: { ...this.state.group, color: color.hex }})} />\r\n          </div>\r\n          <div className="col-xs-12">\r\n            <input disabled={group.title === "" && "disabled"} style={{ margin: "1vh 0" }} type="button" value="Edit Group" className="btn btn-warning btn-lg" onClick={this.editGroup} />\r\n          </div>\r\n\r\n        </div>\r\n      </Dialog>\r\n\r\n      {\r\n        <StickyNotes\r\n          options={groups}\r\n          editOption={this.editOption}\r\n          deleteOption={this.props.deleteGroup}\r\n          handleClick={this.goToNoteGroup}\r\n        />\r\n      }\r\n      </div>\r\n      </div>\r\n    )\r\n  }\r\n}\r\n\r\nexport default Home;

Group

This is a component where we feed Notes options to StickyNotes component and have add, edit and delete handlers.

import React, {Component} from 'react';\r\nimport Dialog from '../Dialog';\r\nimport StickyNotes from '../StickyNotes';\r\nimport ColorPicker from '../ColorPicker';\r\n\r\nclass Group extends Component {\r\n  constructor(props){\r\n    super(props);\r\n    this.state = {\r\n      title: "",\r\n      content: "",\r\n      color: "",\r\n      selectedNote: null,\r\n      openAddDialog: false,\r\n      openEditDialog: false,\r\n      openViewDialog: false,\r\n      note: {\r\n        title: "",\r\n      },\r\n    }\r\n  }\r\n\r\n  addNote = () => {\r\n    const { title, color, content } = this.state;\r\n    const { groupId, addedMedia } = this.props;\r\n    const image = this.refs.imageFile.files[0];\r\n    const file = this.refs.attachedFile.files[0];\r\n    this.props.addNote({\r\n      title,\r\n      content,\r\n      color,\r\n      image,\r\n      file,\r\n    }, groupId);\r\n    this.setState({ title: "", content: "", openAddDialog: false });\r\n  }\r\n\r\n  editNote = () => {\r\n    const { note, selectedNote } = this.state;\r\n    const { state } = this;\r\n    let METAFIELDS = note;\r\n    METAFIELDS.metafields[1].value = note.color || "#000"\r\n    this.props.editNote({\r\n      title: note.title,\r\n      color: note.color || "#000",\r\n      content: note.content,\r\n      metafields: METAFIELDS.metafields,\r\n    }, note.slug, selectedNote);\r\n    this.setState({ ...state, note: { title: "" }, openEditDialog: false })\r\n  }\r\n\r\n  editOption = (note, selectedNote) => {\r\n    this.setState({\r\n      openEditDialog: true,\r\n      note: note.toJS(),\r\n      selectedNote,\r\n    });\r\n  }\r\n\r\n  goToNote = (note) => {\r\n    this.setState({\r\n      note: note.toJS(),\r\n      openViewDialog: true,\r\n    })\r\n  }\r\n  render() {\r\n    const { notes } = this.props;\r\n    const { state } = this;\r\n\r\n    const { title, content, color, openAddDialog, openEditDialog, openViewDialog, note } = this.state;\r\n\r\n    const styles = {\r\n      btnCircle: {\r\n        width: "30px",\r\n        height: "30px",\r\n        textAlign: "center",\r\n        padding: "6px 0",\r\n        fontSize: "12px",\r\n        fontWeight: "700",\r\n        lineHeight: "1.42",\r\n        borderRadius: "15px",\r\n        margin: "10px",\r\n        border: "none",\r\n        outline: "none",\r\n        float: "right"\r\n      }\r\n    }\r\n\r\n    return (\r\n      <div className="container-fluid">\r\n      <button style={styles.btnCircle}  onClick={() => this.setState({ openAddDialog: true })} className="btn btn-primary btn-lg">\r\n        <i className="fa fa-plus"></i>\r\n      </button>\r\n      <Dialog\r\n        open={openAddDialog}\r\n        closeDialog={() => this.setState({ openAddDialog: false })}\r\n      >\r\n        <div className="container-fluid">\r\n          <div className="col-xs-12">\r\n            <input style={{ margin: "1vh 0" }} type="text" className="form-control" value={title} onChange={(e) => this.setState({ title: e.target.value })} /> <br />\r\n          </div>\r\n          <div className="col-xs-12">\r\n            <textarea style={{ margin: "1vh 0" }} type="text" className="form-control" value={content} onChange={(e) => this.setState({ content: e.target.value })} /> <br />\r\n          </div>\r\n          <div className="col-xs-12">\r\n            <input style={{ margin: "1vh 0" }} type="file" className="form-control" ref="imageFile" /> <br />\r\n          </div>\r\n          <div className="col-xs-12">\r\n            <input style={{ margin: "1vh 0" }} type="file" className="form-control" ref="attachedFile" /> <br />\r\n          </div>\r\n          <div className="col-xs-12">\r\n            <ColorPicker color={color} changeColor={(color) => this.setState({ color: color.hex })} />\r\n          </div>\r\n          <div className="col-xs-12">\r\n            <input disabled={(title === "" || content === "") && "disabled"} style={{ margin: "1vh 0" }} type="button" className="btn btn-success btn-md" value="Add Note" onClick={this.addNote} />\r\n          </div>\r\n        </div>\r\n      </Dialog>\r\n\r\n\r\n\r\n      <Dialog\r\n        open={openEditDialog}\r\n        closeDialog={() => this.setState({ openEditDialog: false })}\r\n      >\r\n        <div className="container-fluid">\r\n          <div className="col-xs-12">\r\n            <input style={{ margin: "1vh 0" }} type="text" value={note.title} className="form-control" onChange={(e) => this.setState({ ...state, note: {  ...this.state.note, title: e.target.value } })} />\r\n          </div>\r\n          <div className="col-xs-12">\r\n            <textarea style={{ margin: "1vh 0" }} type="text" value={note.content||""} className="form-control" onChange={(e) => this.setState({ ...state, note: {  ...this.state.note, content: e.target.value } })} />\r\n          </div>\r\n          <div className="col-xs-12">\r\n            <ColorPicker color={note.color} changeColor={(color) => this.setState({ ...state, note: { ...this.state.note, color: color.hex }})} />\r\n          </div>\r\n          <div className="col-xs-12">\r\n            <input disabled={(note.title === "" || note.content === "") && "disabled"} style={{ margin: "1vh 0" }} type="button" value="Edit Note" className="btn btn-warning btn-lg" onClick={this.editNote} />\r\n          </div>\r\n        </div>\r\n      </Dialog>\r\n\r\n      <Dialog\r\n        open={openViewDialog}\r\n        closeDialog={() => this.setState({ openViewDialog: false })}\r\n      >\r\n        <div className="container-fluid">\r\n          <div className="col-xs-12">\r\n            <h1 style={{ margin: "1vh 0" }}>{note.title}</h1>\r\n          </div>\r\n          <div className="col-xs-12">\r\n            <p style={{ margin: "1vh 0" }}>{note.content}</p>\r\n          </div>\r\n          {\r\n            !!note.metadata && !!note.metadata.feature_image &&\r\n            <div className="col-xs-12">\r\n              <img style={{ margin: "1vh 0" }} width="128" height="128" src={note.metadata.feature_image.imgix_url} />\r\n            </div>\r\n          }\r\n          {\r\n            !!note.metadata && !!note.metadata.attachment &&\r\n            <div className="col-xs-12">\r\n              <a style={{ margin: "1vh 0" }} href={note.metadata.attachment.imgix_url} target="_blank">Click on this link to open attachment in the new link</a>\r\n            </div>\r\n          }\r\n        </div>\r\n      </Dialog>\r\n\r\n      <StickyNotes\r\n        options={notes}\r\n        editOption={this.editOption}\r\n        deleteOption={this.props.deleteNote}\r\n        handleClick={this.goToNote}\r\n      />\r\n      </div>\r\n    )\r\n  }\r\n}\r\n\r\nexport default Group;

Conclusion

So, this is an app where every scenario of the Cosmic RESTful API is covered. I hope you liked the tutorial.

","metafields":[{"object_type":"authors","value":"599b30c44f629e3a5900010f","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"599b30c44f629e3a5900010f","slug":"jazib-sawar","title":"Jazib Sawar","content":"","metafields":[{"value":"d3261f20-1a9d-11ea-a8c4-6b69c807b1d7-12.jpg","id":"MoCJXLYqwC","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/d3261f20-1a9d-11ea-a8c4-6b69c807b1d7-12.jpg","imgix_url":"https://imgix.cosmicjs.com/d3261f20-1a9d-11ea-a8c4-6b69c807b1d7-12.jpg"},{"value":"jazibsawar","id":"","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-08-21T19:13:08.011Z","created_by":"5357ef811693be2118000001","created":"2017-08-21T19:13:08.011Z","status":"published","modified_at":"2020-09-15T15:41:11.076Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-12-09T16:06:31.900Z","thumbnail":"https://imgix.cosmicjs.com/d3261f20-1a9d-11ea-a8c4-6b69c807b1d7-12.jpg"}},{"value":"

In this tutorial, I'm going to show you how to create a simple Sticky Notes app using React, Redux, Selectors, Redux Sagas, a little bit of Node, and Cosmic.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"23f31390-86a8-11e7-8092-d3b8593f09e6-sticky-notes-1.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/23f31390-86a8-11e7-8092-d3b8593f09e6-sticky-notes-1.jpg","imgix_url":"https://imgix.cosmicjs.com/23f31390-86a8-11e7-8092-d3b8593f09e6-sticky-notes-1.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-08-22T19:17:59.493Z","created_by":"5357ef811693be2118000001","created":"2017-08-22T19:17:59.493Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5716b504e9c686d006000073","metadata":{"author":{"_id":"599b30c44f629e3a5900010f","slug":"jazib-sawar","title":"Jazib Sawar","content":"","metafields":[{"value":"d3261f20-1a9d-11ea-a8c4-6b69c807b1d7-12.jpg","id":"MoCJXLYqwC","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/d3261f20-1a9d-11ea-a8c4-6b69c807b1d7-12.jpg","imgix_url":"https://imgix.cosmicjs.com/d3261f20-1a9d-11ea-a8c4-6b69c807b1d7-12.jpg"},{"value":"jazibsawar","id":"","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-08-21T19:13:08.011Z","created_by":"5357ef811693be2118000001","created":"2017-08-21T19:13:08.011Z","status":"published","modified_at":"2020-09-15T15:41:11.076Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-12-09T16:06:31.900Z","thumbnail":"https://imgix.cosmicjs.com/d3261f20-1a9d-11ea-a8c4-6b69c807b1d7-12.jpg","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/d3261f20-1a9d-11ea-a8c4-6b69c807b1d7-12.jpg","imgix_url":"https://imgix.cosmicjs.com/d3261f20-1a9d-11ea-a8c4-6b69c807b1d7-12.jpg"},"username":"jazibsawar"}},"teaser":"

In this tutorial, I'm going to show you how to create a simple Sticky Notes app using React, Redux, Selectors, Redux Sagas, a little bit of Node, and Cosmic.

","featured_image":{"url":"https://cdn.cosmicjs.com/23f31390-86a8-11e7-8092-d3b8593f09e6-sticky-notes-1.jpg","imgix_url":"https://imgix.cosmicjs.com/23f31390-86a8-11e7-8092-d3b8593f09e6-sticky-notes-1.jpg"}}},{"_id":"599aff32e11ec8a742000bc4","order":108,"slug":"dashboard-design-updates","title":"Dashboard Design Updates","content":"

We're always trying to make the process of editing content easier.  We just released an update that makes editing your content in your Cosmic Dashboard easier on the eyes.  One of the goals of the update was to make the Object edit view design look less busy. 


Here's the old Object edit view:


Here's the new Object edit view:


A couple things we did to achieve this:

1. We added more space to help the editing area "breathe".
2. We removed the border around inputs and replaced them with a background color.  This removed a lot of horizontal lines which were a distraction in the previous design.
3. We added more emphasis to the title as this is the only required field.

We've also applied this "card" style to the rest of the Bucket Dashboard pages.  It is our hope that this design update will give you a more delightful experience as you manage content for your websites and apps using Cosmic.

If you have any questions or comments on the updates please reach out to us on Twitter and join our Slack community.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"

We're always trying to make the process of editing content easier.  We just released an update that makes editing your content in your Cosmic Buckets easier on the eyes.  One of the goals of the update was to make the Object edit view design look less busy. 

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"3d466850-868b-11e7-bf73-e3d192676a6d-joshua-fuller-328300.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/3d466850-868b-11e7-bf73-e3d192676a6d-joshua-fuller-328300.jpg","imgix_url":"https://imgix.cosmicjs.com/3d466850-868b-11e7-bf73-e3d192676a6d-joshua-fuller-328300.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-08-21T15:41:38.250Z","created_by":"5357ef811693be2118000001","created":"2017-08-21T15:41:38.250Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

We're always trying to make the process of editing content easier.  We just released an update that makes editing your content in your Cosmic Buckets easier on the eyes.  One of the goals of the update was to make the Object edit view design look less busy. 

","featured_image":{"url":"https://cdn.cosmicjs.com/3d466850-868b-11e7-bf73-e3d192676a6d-joshua-fuller-328300.jpg","imgix_url":"https://imgix.cosmicjs.com/3d466850-868b-11e7-bf73-e3d192676a6d-joshua-fuller-328300.jpg"}}},{"_id":"598e202b7f94677b360005ff","order":109,"slug":"introducing-cosmic-clusters-multi-bucket-billing-plans-now-available","title":"Introducing Cosmic Clusters: Multi-Bucket Billing Plans Now Available ","content":"

TL;DR

Add your first Cluster now.

The Cosmic mantra is Build Apps Faster. As former agency colleagues, we know the value of speeding up dev cycles and empowering non-technical users. As we've brought that mission and value to market, larger teams have begun requesting expanded use of the platform. Due to the requests of the Cosmic Community, we are unveiling new multi-Bucket billing plans in an effort to speed up larger team's development cycles and invoicing simplicity.

Cosmic Clusters

What is a Cluster? Simply put, a Cosmic Cluster is a way to group Buckets onto the same billing plan for shared usage limits. As larger teams began adopting Cosmic as their platform of choice to build and manage apps, they began asking for the use of multiple buckets within existing pricing tiers as long as they didn't exceed the monthly API Request and Storage limits. 

Adding Your First Cluster

1. Add Cluster Title
This could be a client's cluster, a project's cluster, whatever you need to label to identify from your Bucket Dashboard easy Cluster navigation. 

2. Choose Buckets to Cluster
You can choose existing Buckets from your Dashboard, even if they're already on another paid plan. You can easily add and remove Buckets from Clusters while maintaining the individual Bucket within your Dashboard. 

3. Choose Cluster Plan 
Clusters come in options of 12 Buckets and 35 Buckets with shared API Request and Storage Usage. Please note that products and features such as Users and Webhooks still operate at the Bucket level. Clusters simply allows for a simpler and more concise billing invoice process and account management experience. 

Summary:
Clusters is a billing and invoicing simplicity product.
You can easily add existing Buckets into a new Cluster.
You can easily add new Buckets into an existing Cluster.
All Bucket Add-Ons and Features still available at the Bucket Level.
Removing Buckets from a Cluster do not delete the Buckets permanently.
You will still be notified if your Cluster exceeds API Request usage and we will never automatically cut off your Bucket.

Add your first Cluster now.  To get more updates and submit feature requests to us directly, join our Slack community and reach out to us on Twitter.

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"value":"

At the request of the Cosmic Community, new Multi-Bucket Pricing Tiers are now Available for teams. Introducing, Cosmic Clusters. 

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"0da48f90-8281-11e7-8b27-b7b8acda6510-80987c3a-f5cc-4b7e-a583-ae3bf41a4664.png","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/0da48f90-8281-11e7-8b27-b7b8acda6510-80987c3a-f5cc-4b7e-a583-ae3bf41a4664.png","imgix_url":"https://imgix.cosmicjs.com/0da48f90-8281-11e7-8b27-b7b8acda6510-80987c3a-f5cc-4b7e-a583-ae3bf41a4664.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-08-11T21:22:51.651Z","created_by":"5716b504e9c686d006000073","created":"2017-08-11T21:22:51.651Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

At the request of the Cosmic Community, new Multi-Bucket Pricing Tiers are now Available for teams. Introducing, Cosmic Clusters. 

","featured_image":{"url":"https://cdn.cosmicjs.com/0da48f90-8281-11e7-8b27-b7b8acda6510-80987c3a-f5cc-4b7e-a583-ae3bf41a4664.png","imgix_url":"https://imgix.cosmicjs.com/0da48f90-8281-11e7-8b27-b7b8acda6510-80987c3a-f5cc-4b7e-a583-ae3bf41a4664.png"}}},{"_id":"59931b5f8aaf1f9448001779","order":110,"slug":"start-a-premium-content-business-using-nodejs-react-and-cosmic-js-extensions","title":"Start a Premium Content Business Using Node.js, React and Cosmic Extensions","content":"

TL;DR

View the demo
View the source code
Install the Premium Content Blog

You have great ideas. Your head is overflowing with content that you know people will pay to read. So where do you start? You're likely inclined to choose a trusted platform like WordPress, but since you want to offer paid content to your users you now face the problem of making a cumbersome solution even more so.

Instead of tweaking a platform to work for us, we want a simple, straightforward solution with no more functionality than we need. This, of course, means we're going to build it ourselves.

In the spirit of a simple, straight forward solution that works exactly the way we want it to, we'll be using Cosmic to host our blog, manage its users, and store its content.

Our project will be a play in two parts. First, we'll build our blog with Express and Cosmic and use Stripe to handle the blog's payments and subcriptions. Then, we'll leverage Cosmic's Extension feature to build a dashboard that gives us an overview of our business' backend.

Part 1: Building the Blog

1. Boilerplate Setup

To save time on boilerplate, we'll use Yeoman and the Express Generator (which builds on Express' official generator) to get started. If you don't have Yeoman installed, run npm i -g yo. Then install the generator with npm i -g generator-express and run it with yo express. Follow the instructions to set up your project under a new directory (say CosmicUserBlog), install the Basic version, and use Handlebars for your view engine.

Your directory structure is now this:

CosmicUserBlog\r\n| \r\n|--bin\r\n|   |--www\r\n|--(node_modules)\r\n|--public\r\n|--routes\r\n|    |--users.js\r\n     |--index.js\r\n|--views\r\n     |--layouts\r\n     |--partials\r\n     |--error.handlebars\r\n     |--index.handlebars\r\n|--.bowerrc\r\n|--.gitignore\r\n|--app.js\r\n|--bower.json\r\n|--gruntfile.js\r\n|--package.json

2. Installations

We'll be using the following packages:

You could install these with npm, but I advocate for Yarn. It's significantly faster and we have no time to waste. So install Yarn (on macOS we'll do a brew install yarn) then run yarn add async axios cors bcrypt cosmicjs expres-session dateformat stripe truncate-html . We're almost ready to start building.

3. Set Up Cosmic

Before we start building, we'll need to work out the schema for our Cosmic Bucket. We want to store Posts, Users, and Configs (to edit site configurations on the fly).

Those three object types will have the following matafields (all of type text, given by their Title):

Post:

MetafieldValue
Premiumtrue or false

User:

MetafieldValue
First namestring
Last namestring
PasswordHashed String
Emailstring
Stripe Idstring
Subsription Typestring

Config:

Object: Subscriptions: | Metafield | Value | | --------------- | -----: | | Monthly Price | string | | Quarterly Price | string | | Yearly Price | string | | Cancellations | string |

Object: Site: | Metafield | Value | | ---------- | -----: | | Site Title | string | | Domain | String |

Once you've added your Post, User, and Config object types and created your Subscriptions and Site Config objects, we'll get ourselves set up with Stripe.

4. Configure Stripe

Since we'll be charging users for their premium subscriptions we'll need a payment processor. With a robust API, fair pay-as-you-go pricing, and proven security, using Stripe is a no brainer. Moving foward, we'll need both a "Publishable" and a "Secret" key for Stripe's API and we need to setup Subscription plans for Monthly, Yearly, and Quarterly subscriptions. Follow Stripe's instructions to create these subscriptions and give them the ID's subscription-monthly, subscription-quarterly, and subscription-yearly accordingly.

5. Configure the Express App

We have our packages installed, we worked out our data schema, and we've set up a a Stripe account. Now we need to configure our Express backend.

The boilerplate Express code is pre-ES5, so for a consistent style we'll require the packages we need.

At the top of the Express app add:

// app.js\r\nvar session = require('express-session')\r\nvar dateFormat = require('date-format')\r\nvar truncate = require('truncate-html')\r\nvar cors = require('cors')

When we deploy our app, Cosmic will provide our Bucket keys as well as any custom keys we provide via process.env. Below the require statements, go ahead make those accessible throughout the app by storing them in app.locals

//app.js\r\n\r\nvar config = {\r\n    bucket: {\r\n        slug: process.env.COSMIC_BUCKET,\r\n     read_key: process.env.COSMIC_READ_KEY,\r\n      write_key: process.env.COSMIC_WRITE_KEY\r\n    }\r\n}\r\napp.locals.config = config\r\napp.locals.stripeKeyPublishable = process.env.STRIPE_PUBLISHABLE_KEY\r\napp.locals.stripeKeySecret = process.env.STRIPE_SECRET_KEY

The last step is then to connect the cors and session middleware like so:

//app.js\r\n\r\napp.locals.stripeKeySecret = process.env.STRIPE_SECRET_KEY\r\n\r\napp.use(session({\r\n  secret: 'sjcimsoc',\r\n  resave: false,\r\n  saveUninitialized: true,\r\n  cookie: { secure: false }\r\n}))\r\napp.use(cors())

At this point we have a solid base to build our app on and can start drafting out its views.

6. Sculpt Out the Views

Having a model of how we want our blog to look and feel will help us think about how to wire up its routes. We'll start with the main layout.

The Main Layout:

In handlebars, every page will render inside the body tag of a default layout. In our boilerplate, this is /views/layouts/main.handlebars.

We need to make three alterations.

  1. in the title tag, swap out {{title}} for {{config.site_title}}, which we'll pass via res.locals later.
  2. Before the end of the head tag add <script src="https://js.stripe.com/v3/"></script>. This is Stripe's browser client. We only need this for the checkout form, however Stripe reccomends including it on every page to aid in fraud detection.
  3. Include Bootstrap. Somewhere in the head tag add <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> and right before the end of the body tag add
<script src="https://code.jquery.com/jquery-3.2.1.min.js"\r\n integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="\r\n crossorigin="anonymous"></script>\r\n<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>\r\n

The Main layout now looks like this:

<!-- views/layouts/main.handlebars -->\r\n<!doctype html>\r\n<html lang="en">\r\n  <head>\r\n    <meta charset="UTF-8">\r\n    <meta name="viewport" content="width=device-width">\r\n    <title>{{config.site_title}}</title>\r\n    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />\r\n    {{#if ENV_DEVELOPMENT}}\r\n      <script src="http://localhost:35729/livereload.js"></script>\r\n    {{/if}}\r\n    <script src="https://js.stripe.com/v3/"></script>\r\n\r\n  </head>\r\n  <body>\r\n\r\n\r\n  {{{body}}}\r\n\r\n  <script\r\n    src="https://code.jquery.com/jquery-3.2.1.min.js"\r\n    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="\r\n    crossorigin="anonymous"></script>\r\n  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>\r\n  </body>\r\n</html>

The Header Partial:

Handlebars expects partials to be found in the /views/partials directory by default so we'll make header.handlebars there. It will look like this:

<header>\r\n  <div class="container">\r\n    <div class="row">\r\n      <div class="col-xs-12 text-center">\r\n        <h1>{{config.site_title}}</h1>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</header>\r\n\r\n<nav class="navbar navbar-default">\r\n  <div class="container-fluid">\r\n    <div class="navbar-header">\r\n      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-header" aria-expanded="false">\r\n        <span class="sr-only">Toggle navigation</span>\r\n        <span class="icon-bar"></span>\r\n        <span class="icon-bar"></span>\r\n        <span class="icon-bar"></span>\r\n      </button>\r\n    </div>\r\n\r\n    <div class="collapse navbar-collapse" id="navbar-collapse-header">\r\n      <ul class="nav navbar-nav">\r\n        <li {{#if route_posts}}class="active"{{/if}}><a href="/posts">Posts<span class="sr-only">(current)</span></a></li>\r\n        <li><a href="/premium">Premium Content</a></li>\r\n      </ul>\r\n      <ul class="nav navbar-nav navbar-right">\r\n        {{#if logged_in}}\r\n          <li class="navbar-text text-center">Welcome Back, {{user.first_name}}!</li>\r\n          <li><a href="/logout">Logout</a></li>\r\n        {{/if}}\r\n\r\n        {{#unless logged_in}}\r\n          <li {{#if route_login}}class="active"{{/if}}><a href="/login">Login</a></li>\r\n          <li {{#if route_signup}}class="active"{{/if}}><a href="/plans">Sign Up</a></li>\r\n        {{/unless}}\r\n      </ul>\r\n    </div>\r\n  </div>\r\n</nav>

Note: In the header partial we take advantage of Handlebars' built in if and unless helpers to make parts of our code route-specific. The we'll pass the relative booleans later in the route handlers.

The Posts View

On the Posts page we want to:

  1. Display the header
  2. Show an error message if the user is trying to access premium posts without an account
  3. Abstract the post display logic to its own partial to make our code cleaner and modular.

For the error message, we'll rely on Handlebars' if helper as we did before. For showing summaries of the posts, we'll be passing the posts to the view as an array of post objects. This lets us use the Handlebars each block helper to iterate over that array (each post being accessible as this). Our Posts view will then look like this:

{{> header}}\r\n<div class="container">\r\n  <div class="row">\r\n    {{#if error}}\r\n      <div class="alert alert-danger" role="alert">\r\n        {{error}}\r\n      </div>\r\n    {{/if}}\r\n    {{#each posts}}\r\n      {{> post-container this}}\r\n    {{/each}}\r\n  </div>\r\n</div>

The Post Container partial:

The next obvious step is to build the container to show summaries of each post on the Posts page. Beyond displaying the post's title and content (which is easily accessed with this.title, etc.) we want to show the user if the post is premium, as well as a truncation of the post's body and its creation date.

We'll again turn to the if helper to show a star beside the post if this.metadata.premium returns true, which is simple enough. For the blurb and creation date, we need to modify the content and created_at properties of the Post object; in the first place, to shorten it, in the latter, because Cosmic stores the date in ISO datetime format. To keep display logic out of our views, Handlebars provides us with functionality to write own helpers.

First, get the view code in place:

<!-- /views/partials/post-container.handlebars -->\r\n\r\n<div style="border-bottom: 3px solid #337ab7" class="col-xs-12 col-md-8 col-md-offset-2">\r\n  <h2>\r\n    {{#if this.metadata.premium}}\r\n      <span style="font-size: 0.5em" class="glyphicon glyphicon-star"></span>\r\n    {{/if}}\r\n    <a href="/post/{{this.slug}}">{{this.title}}</a>\r\n  </h2>\r\n  <p style="margin: 35px 40px">\r\n    {{truncateText this.content 20}} <a href="/post/{{this.slug}}">Read more</a>\r\n  </p>\r\n  <em style="margin: 20px 0" class="pull-right">\r\n    {{date this.created_at}}\r\n  </em>\r\n</div>

(Hint: our handlebars helpers will be named truncateText and date.)

Open app.js and find the snippet of code that sets Handlebars as the view engine. exphbs is a reference to express-handlebars and the object passed to it contains the parameters used to instantiate the engine. We need to add the helpers property to that object. The helpers property will then point to the date and truncateTextmethods as follows:

// app.js\r\n\r\n// etc...\r\napp.engine('handlebars', exphbs({\r\n  defaultLayout: 'main',\r\n  partialsDir: ['views/partials/'],\r\n  helpers: {\r\n    date: function(date) {\r\n      return dateFormat(new Date(date), "dddd, mmmm dS, yyyy")\r\n    },\r\n    truncateText: function(text, length) {\r\n      return truncate(text, length, { stripTags: true, byWords: true })\r\n    }\r\n  }\r\n}));\r\napp.set('views', path.join(__dirname, 'views'));\r\napp.set('view engine', 'handlebars');\r\n// etc...

To illustrate, {{truncateText this.content 20}} tells Handlebars to render the result of truncate(this.content, 20, {...} ) .

The Post View:

Our users need to be able to read individual posts, so we'll build a simple view that get's passed an array that's one post long. (In the future, outside the scope of this guide, we may find it useful to use the view to display multiple full posts in succession.)

We'll also display an error if the post isn't found. Create your post view like so:

<!-- /views/post.handlebars -->\r\n\r\n{{> header}}\r\n{{#if not_found}}\r\n  <div class="container">\r\n    <div class="row text-center">\r\n      <div class="col-xs12 col-md-6 col-md-offset-3">\r\n        <div class="alert alert-danger">\r\n          Post Not Found!\r\n        </div>\r\n        <a href="/posts">See All Posts</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n{{/if}}\r\n\r\n{{#each post}}\r\n  <article class="container">\r\n    <div class="row">\r\n      <div class="col-xs-12 col-sm-8 col-sm-offset-2">\r\n        <h1>{{this.title}}</h1>\r\n        <div class="lead" style="font-size: 1.5em">\r\n          {{{this.content}}}\r\n        </div>\r\n        <em class="pull-right">\r\n          <time>{{date this.created_at}}</time>\r\n        </em>\r\n      </div>\r\n    </div>\r\n  </article>\r\n{{/each}}

The Login Page:

The login page will be the simplest yet - a basic form that POSTs to a login route.

<!-- /views/login.handlebars -->\r\n\r\n{{> header}}\r\n\r\n<div class="container">\r\n  <div class="row">\r\n    <div class="col-xs-12 col-sm-4 col-sm-offset-4">\r\n      <h1>Log In</h1>\r\n      <p class="text-muted">\r\n        Log in to view premium content.\r\n      </p>\r\n\r\n      <form method="post">\r\n        <input class="form-control" type="email" name="email" placeholder="Email" required/>\r\n        <input type="password" class="form-control" name="password" placeholder="Password" required />\r\n        <button class="btn btn-lg btn-primary btn-block submit-btn" type="submit">Log in</button>\r\n      </form>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<style>\r\n  form > input, button {\r\n    margin-top: 12px;\r\n  }\r\n</style>

The Plans Page:

Obviously, our users will need to be able to signup before they can login, but since we're giving them the option to choose one of three subscription plans we'll build out a view that shows them their options just before checking out. Later, we'll need to pass the Subscriptions object to this view so we can set the plan prices from Cosmic, rather than hard coding them. The view will look like this:

<!-- /views/plans.handlebars -->\r\n\r\n{{> header}}\r\n\r\n<div class="container">\r\n  <div class="row text-center lead">\r\n    <h1>Choose a Plan to Read Premium Content</h1>\r\n    <p>\r\n      Sign up to view Premium Content on {{config.site_title}}\r\n    </p>\r\n  </div>\r\n\r\n  <div class="row">\r\n    <div class="col-sm-4">\r\n      <h3 class="text-center text-muted">\r\n        Monthly\r\n      </h3>\r\n      <p class="text-center">\r\n        <strong>Billed every month</strong>\r\n      </p>\r\n      <h1 class="text-center text-success">{{subscriptions.monthly_price}}</h1 class="text-center text-success">\r\n      <ul class="list-unstyled lead" style="padding: 0 20px">\r\n        <li>\r\n          <span class="glyphicon glyphicon-ok text-success"></span>Here's a good benefit\r\n        </li>\r\n        <li>\r\n          <span class="glyphicon glyphicon-ok text-success"></span>A reason to buy\r\n        </li>\r\n        <li>\r\n          <span class="glyphicon glyphicon-ok text-success"></span>Why you have to have it\r\n        </li>\r\n        <li>\r\n          <span class="glyphicon glyphicon-ok text-success"></span>Why you shouldn't miss out\r\n        </li>\r\n        <li>\r\n          <span class="glyphicon glyphicon-ok text-success"></span>Believe it.\r\n        </li>\r\n      </ul>\r\n      <a href="/signup?plan=monthly"><button class="btn btn-block btn-default btn-lg">Sign Up</button></a>\r\n    </div>\r\n    <div class="col-sm-4" style="border: 2px solid #3c763d">\r\n      <h3 style="background: #3c763d;color: white;padding: 7px 0" class="text-center text-success">\r\n        Yearly\r\n      </h3>\r\n      <p class="text-center">\r\n        <strong>Billed every 12 months</strong>\r\n      </p>\r\n      <h1 class="text-center text-success">{{subscriptions.yearly_price}}</h1>\r\n        <ul class="list-unstyled lead" style="padding: 0 20px">\r\n          <li>\r\n            <span class="glyphicon glyphicon-ok text-success"></span>Here's a good benefit\r\n          </li>\r\n          <li>\r\n            <span class="glyphicon glyphicon-ok text-success"></span>A reason to buy\r\n          </li>\r\n          <li>\r\n            <span class="glyphicon glyphicon-ok text-success"></span>Why you have to have it\r\n          </li>\r\n          <li>\r\n            <span class="glyphicon glyphicon-ok text-success"></span>Why you shouldn't miss out\r\n          </li>\r\n          <li>\r\n            <span class="glyphicon glyphicon-ok text-success"></span>Believe it.\r\n          </li>\r\n        </ul>\r\n        <a href="/signup?plan=yearly"><button class="btn btn-block btn-default btn-lg">Sign Up</button></a>\r\n    </div>\r\n    <div class="col-sm-4">\r\n      <h3 class="text-center text-muted">\r\n        Quarterly\r\n      </h3>\r\n      <p class="text-center">\r\n        <strong>Billed every 3 months</strong>\r\n      </p>\r\n      <h1 class="text-center text-success">{{subscriptions.quarterly_price}}</h1 class="text-center text-success">\r\n        <ul class="list-unstyled lead" style="padding: 0 30px">\r\n          <li>\r\n            <span class="glyphicon glyphicon-ok text-success"></span>Here's a good benefit\r\n          </li>\r\n          <li>\r\n            <span class="glyphicon glyphicon-ok text-success"></span>A reason to buy\r\n          </li>\r\n          <li>\r\n            <span class="glyphicon glyphicon-ok text-success"></span>Why you have to have it\r\n          </li>\r\n          <li>\r\n            <span class="glyphicon glyphicon-ok text-success"></span>Why you shouldn't miss out\r\n          </li>\r\n          <li>\r\n            <span class="glyphicon glyphicon-ok text-success"></span>Believe it.\r\n          </li>\r\n        </ul>\r\n        <a href="/signup?plan=quarterly"><button class="btn btn-block btn-default btn-lg">Sign Up</button></a>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n\r\n\r\n<style>\r\n  form > input, button {\r\n    margin-top: 12px;\r\n  }\r\n  ul.lead {\r\n    margin-top: 40px\r\n  }\r\n  .lead > li {\r\n    margin: 8px 0\r\n  }\r\n  .glyphicon {\r\n    margin-right: 12px\r\n  }\r\n  .btn {\r\n    margin: 35px 0px;\r\n  }\r\n</style>

Notice that each Sign Up button links to the signup route, passing a query paramter associated with the plan selected. I.e. /signup?plan={:plan}

The Signup Page:

Last, but certainly not least - the money maker. We've saved our most complicated view for last. These are our requirements:

  1. We need to pass the plan chosen on the page before in planName. (Later we'll do this in a URL query string)
  2. We need to use the Stripe Elements API for collecting credit card information. This is what we included Stripe.js in the Main layout earlier. At the end of our checkout form we need two divs; one ID'd card-element and the other ID'd card-errors for Stripe.js to inject into after the initial DOM rendering.
  3. We need to pass our publishable stripe key to make it all work.

Starting with the HTML we have:

<!-- /views/signup.handlebars -->\r\n{{>header}}\r\n\r\n<div class="container">\r\n  <div class="row">\r\n    <form method="post" id="payment-form">\r\n      <div class="col-xs-12 text-center">\r\n        <h4 class="lead"><em>You're one step away from a <u>{{planName}}</u> subscription to {{config.site_title}}!</em></h4>\r\n      </div>\r\n    </div>\r\n    <div class="row"  style="margin-top: 30px">\r\n      <div class="col-md-8 col-md-offset-2">\r\n        <h4>Enter your account details and payment information</h4>\r\n\r\n        <label for="first_name">First name:</label>\r\n        <input type="text" name="first_name" class="form-control" placeholder="First name" required />\r\n        <label for="last_name">Last name:</label>\r\n        <input type="text" name="last_name" class="form-control" placeholder="Last name" required />\r\n        <label for="email">Email:</label>\r\n        <input type="email" name="email" class="form-control" placeholder="Email" required />\r\n        <label for="password">Password</label>\r\n        <input type="password" name="password" class="form-control" placeholder="Password" required />\r\n        <label for="card-element">Credit or debit card</label>\r\n        <div class="form-control" id="card-element"></div>\r\n        <div id="card-errors" role="alert"></div>\r\n        <button id="submit-button" class="btn-success btn btn-lg btn-block btn-default" >Submit Payment</button>\r\n\r\n      </div>\r\n    </div>\r\n    </form>\r\n</div>

Then, for simplicity, we'll follow this with an inline script that integrates Stripe:

<!-- views/signup.handlebars -->\r\n\r\n<script>\r\n  var stripe = Stripe('{{stripeKeyPublishable}}')\r\n  var elements = stripe.elements()\r\n  var card = elements.create('card')\r\n  var style = {\r\n      base: {\r\n        color: '#32325d',\r\n        lineHeight: '24px',\r\n        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',\r\n        fontSmoothing: 'antialiased',\r\n        fontSize: '16px',\r\n        '::placeholder': {\r\n          color: '#aab7c4'\r\n        }\r\n      },\r\n      invalid: {\r\n        color: '#fa755a',\r\n        iconColor: '#fa755a'\r\n      }\r\n    };\r\n\r\n  card.mount('#card-element', {style: style})\r\n\r\n  // Handle real-time validation errors from the card Element.\r\ncard.addEventListener('change', function(event) {\r\n  var displayError = document.getElementById('card-errors');\r\n  if (event.error) {\r\n    displayError.textContent = event.error.message;\r\n  } else {\r\n    displayError.textContent = '';\r\n  }\r\n});\r\n\r\n// Handle form submission\r\nvar form = document.getElementById('payment-form');\r\nvar submitButton = document.getElementById('submit-button');\r\nform.addEventListener('submit', function(event) {\r\n  event.preventDefault();\r\n  submitButton.disabled=true\r\n  stripe.createToken(card).then(function(result) {\r\n    if (result.error) {\r\n      // Inform the user if there was an error\r\n      var errorElement = document.getElementById('card-errors');\r\n      errorElement.textContent = result.error.message;\r\n      submitButton.disabled=false\r\n    } else {\r\n      // Send the token to your server\r\n      stripeTokenHandler(result.token);\r\n    }\r\n  });\r\n});\r\n\r\nfunction stripeTokenHandler(token) {\r\n  // Insert the token ID into the form so it gets submitted to the server\r\n  var form = document.getElementById('payment-form');\r\n  var hiddenInput = document.createElement('input');\r\n  hiddenInput.setAttribute('type', 'hidden');\r\n  hiddenInput.setAttribute('name', 'stripeToken');\r\n  hiddenInput.setAttribute('value', token.id);\r\n  form.appendChild(hiddenInput);\r\n  // Submit the form\r\n  form.submit();\r\n}\r\n</script>\r\n\r\n<style>\r\n  label,button {\r\n    margin-top: 22px;\r\n  }\r\n</style>

Here's what's going on:

  1. We instantiate Stripe with the Publishable key we passed, assign its elements library to its own variable, use that to create a card element, and finally mount that to the <div id="card-element"> we created earlier. The card object handles card validation, comes packaged with good UX features, and reports errors back to the user in real time.
  2. We attach an event listener to the card object that responds to any change in either the user-inputted card number, CCV, or expiration date. It mounts that error on <div id="card-errors">
  3. We handle the form submission manually. First, we prevent the default action and disable multiple submissions. Then, barring no errors, we attach a hidden field to the form that contains Stripe's validation token, provided by Stripe.js, and then submit the form to the Signup route.

7. Build the Routes

With our views built, we know exactly what routes our application needs. Namely:

By default, your app has a Users route and an Index route. Delete Users and make Index redirect to Posts like so:

// /routes/index.js\r\n\r\nvar express = require('express')\r\nvar router = express.Router()\r\n\r\nrouter.get('/', function(req, res) {\r\n  res.redirect('/posts')\r\n});\r\n\r\nmodule.exports = router

The Posts Route:

Posts will use async to string together a series of async functions: one using the Cosmic client to get our Posts, the next using Cosmic to get the site config and render the posts view, passing in the relevant locals. If the user is not in an authenticated session, we'll use lodash to filter out the posts returned from Cosmic which have not been labelled premium (and are therefore free to read). We'll pass the Posts, Config, and route-specific view data via res.locals.

var express = require('express');\r\nvar router = express.Router();\r\nvar cosmic = require('cosmicjs');\r\nvar async = require('async');\r\nvar _ = require('lodash')\r\n\r\nrouter.get('/', function(req, res) {\r\n  async.series([\r\n    function(cb) {\r\n      cosmic.getObjectType(req.app.locals.config, { type_slug: 'posts' }, function(err, response) {\r\n        (req.session.user) ? res.locals.posts = response.objects.all : res.locals.posts = _.filter(response.objects.all, function(post) {\r\n          return !post.metadata.premium\r\n        })\r\n        cb()\r\n      })\r\n    },\r\n    function(cb) {\r\n      cosmic.getObject(req.app.locals.config, { slug: 'site' }, function(err, response) {\r\n        res.locals.config = response.object.metadata\r\n        res.locals.user = req.session.user\r\n        res.locals.route_posts = true\r\n        if (req.session.user) res.locals.logged_in = true\r\n        return res.render('posts.handlebars')\r\n      })=\r\n    }\r\n  ])\r\n});\r\n\r\nmodule.exports = router;

The Post Route:

Having a route for all posts, we'll need a companion route for a singular post that takes the post slug as a URL parameter and returns that post if it's found, utilizing similar logic as the Posts route.

// routes/post.js\r\n\r\nvar express = require('express');\r\nvar router = express.Router();\r\nvar cosmic = require('cosmicjs');\r\nvar async = require('async');\r\nvar _ = require('lodash')\r\n\r\nrouter.get('/:slug', function(req, res) {\r\n  async.series([\r\n    function(cb) {\r\n      cosmic.getObjectType(req.app.locals.config, { type_slug: 'posts' }, function(err, response) {\r\n        res.locals.post = _.filter(response.objects.all, function(post) {\r\n          return post.slug === req.params.slug\r\n        })\r\n        if (!res.locals.post) res.locals.not_found = true\r\n        cb()\r\n      })\r\n    },\r\n    function(cb) {\r\n      cosmic.getObject(req.app.locals.config, { slug: 'site' }, function(err, response) {\r\n        res.locals.config = response.object.metadata\r\n        res.locals.user = req.session.user\r\n        return res.render('post.handlebars')\r\n      })\r\n    }\r\n  ])\r\n});\r\n\r\nmodule.exports = router

The Login Route:

To let users have access to premium posts, we'll need to collect their login information, hash their password with bcrypt, and check it against the password associated with the email address stored in Cosmic.

A GET request will render the login form. We then handle the form's POST request by retrieiving all users from Cosmic and iteratating over all users with a series of two async functions: one using bcrypt to compare password hashes, the next saving the user's data into a session if they're found.

// routes/login.js\r\n\r\nvar express = require('express');\r\nvar router = express.Router();\r\nvar cosmic = require('cosmicjs');\r\nvar async = require('async');\r\nvar _ = require('lodash')\r\nvar bcrypt = require('bcrypt')\r\n\r\nrouter.get('/', function(req, res) {\r\n  async.series([\r\n    function(cb) {\r\n      cosmic.getObject(req.app.locals.config, { slug: 'site' }, function(err, response) {\r\n        res.locals.config = response.object.metadata\r\n        res.locals.route_login = true\r\n        return res.render('login.handlebars')\r\n      })\r\n    }\r\n  ])\r\n});\r\n\r\nrouter.post('/', function(req, res) {\r\n  cosmic.getObjectType(req.app.locals.config, { type_slug: 'users' }, function (err, response) {\r\n    if (err) res.status(500).json({ status: 'error', data: response })\r\n    else {\r\n      async.eachSeries(response.objects.all, function (user, eachCb) {\r\n        if (!_.find(user.metafields, { key: 'email', value: req.body.email.trim().toLowerCase() }))\r\n          return eachCb()\r\n        const stored_password = _.find(user.metafields, { key: 'password' }).value\r\n        bcrypt.compare(req.body.password, stored_password, function (err, correct) {\r\n          if (correct) res.locals.user_found = user\r\n          eachCb()\r\n        })\r\n      }, function () {\r\n        if (res.locals.user_found) {\r\n          req.session.user = {\r\n            first_name: res.locals.user_found.metafield.first_name.value,\r\n            last_name: res.locals.user_found.metafield.last_name.value,\r\n            email: res.locals.user_found.metafield.email.value\r\n          }\r\n          req.session.save()\r\n          return res.redirect('/posts')\r\n        }\r\n        return res.status(404).json({ status: 'error', message: 'User not found' })\r\n      })\r\n    }\r\n  })\r\n})\r\n\r\nmodule.exports = router

The Plans Route:

Before a user can log in, we need a sign up form so we can have users in the first place. As said before, we'll show them their subscription options right before the signup form. This does nothing more than pass the Site and Subscription configs before rendering the view:

var express = require('express');\r\nvar router = express.Router();\r\nvar cosmic = require('cosmicjs');\r\nvar async = require('async')\r\n\r\nrouter.get('/', function(req, res) {\r\n  async.series([\r\n    function(cb) {\r\n      cosmic.getObject(req.app.locals.config, { slug: 'site' }, function(err, response) {\r\n        res.locals.config = response.object.metadata\r\n        res.locals.route_signup = true\r\n        cb()\r\n      })\r\n    },\r\n    function(cb) {\r\n      cosmic.getObject(req.app.locals.config, { slug: 'subscriptions' }, function(err, response) {\r\n        res.locals.subscriptions = response.object.metadata\r\n        res.render('plans.handlebars')\r\n      })\r\n    }\r\n  ])\r\n});\r\n\r\nmodule.exports = router;

The Signup Route:

As you might have guessed, the signup route has the most going on out of them all. Here's what we need to implement:

  1. On a GET request, render the signup form and pass our publishable Stripe key through res.locals for Stripe.js to work.
  2. On a Post request:
    1. Instantiate Stripe server-side with our secret key
    2. If a user's already logged in, redirect them.
    3. Run a series of two named async functions (so we can use their return values after both have completed) to fetch our subscription data from Cosmic and hash the password.
    4. Having completed Step 3, we use the Stripe API to create a new customer, associating their payment method via the Stripe token we passed from the signup form.
    5. We then charge that customer based on the plan selected and create a new subscription (again, via Stripe) so recurring payments are processed automatically.
    6. We create a new User object based on our Cosmic schema, add that to our bucket, and once that's succesful we create a new session for the user and redirect them to the Posts route, where they'll now be able to view premium content.

All complete, it will look like this:

// routes/signup.js\r\n\r\nvar express = require('express');\r\nvar router = express.Router();\r\nvar cosmic = require('cosmicjs');\r\nvar async = require('async');\r\nvar bcrypt = require('bcrypt')\r\n\r\nrouter.get('/', function(req, res) {\r\n  if (req.session.user) res.redirect('/')\r\n  async.series([\r\n    function(cb) {\r\n      cosmic.getObject(req.app.locals.config, { slug: 'site' }, function(err, response) {\r\n        res.locals.config = response.object.metadata\r\n        res.locals.route_signup = true\r\n        cb()\r\n      })\r\n    },\r\n    function(cb) {\r\n      cosmic.getObject(req.app.locals.config, { slug: 'subscriptions' }, function(err, response) {\r\n        res.locals.subscriptions = response.object.metadata\r\n        res.locals.stripeKeyPublishable = req.app.locals.stripeKeyPublishable\r\n        res.locals.planName = req.query.plan\r\n        res.render('signup.handlebars')\r\n      })\r\n    }\r\n  ])\r\n});\r\n\r\nrouter.post('/', function(req, res) {\r\n  var stripe = require('stripe')(req.app.locals.stripeKeySecret)\r\n  if (req.session.user) res.redirect('/')\r\n\r\n  async.series({\r\n    subscriptions: function(callback) {\r\n      cosmic.getObject(req.app.locals.config, { slug: 'subscriptions' }, function(err, response) {\r\n        callback(null, response.object.metadata)\r\n      })\r\n    },\r\n    hash: function (callback) {\r\n      bcrypt.hash(req.body.password, 10, function (err, hash) {\r\n        callback(null, hash)\r\n      })\r\n    }\r\n  }, function (err, results) {\r\n\r\n    stripe.customers.create({\r\n      email: req.body.email,\r\n      source: req.body.stripeToken\r\n    }).then(function (customer) {\r\n      return stripe.charges.create({\r\n        amount: results.subscriptions[req.query.plan + "_price"].replace(/[$]/,'') + '00',\r\n        currency: "usd",\r\n        customer: customer.id\r\n      })\r\n    }).then(function (charge) {\r\n      stripe.subscriptions.create({\r\n        customer: charge.customer,\r\n        items: [\r\n          {\r\n            plan: 'subscription-' + req.query.plan\r\n          }\r\n        ]\r\n      })\r\n      var object = {\r\n        type_slug: 'users',\r\n        title: req.body.first_name + ' ' + req.body.last_name,\r\n        metafields: [\r\n          {\r\n            title: 'First name',\r\n            key: 'first_name',\r\n            type: 'text',\r\n            value: req.body.first_name\r\n          },\r\n          {\r\n            title: 'Last name',\r\n            key: 'last_name',\r\n            type: 'text',\r\n            value: req.body.last_name\r\n          },\r\n          {\r\n            title: 'Password',\r\n            key: 'password',\r\n            type: 'text',\r\n            value: results.hash\r\n          },\r\n          {\r\n            title: 'Email',\r\n            key: 'email',\r\n            type: 'text',\r\n            value: req.body.email\r\n          },\r\n          {\r\n            title: 'Stripe Id',\r\n            key: 'stripe_id',\r\n            type: 'text',\r\n            value: charge.customer\r\n          },\r\n          {\r\n            title: 'Subscription Type',\r\n            key: 'subscription_type',\r\n            type: 'text',\r\n            value: req.query.plan\r\n          }\r\n        ]\r\n      }\r\n      if (req.app.locals.config.bucket.write_key) object.write_key = req.app.locals.config.bucket.write_key\r\n      cosmic.addObject(req.app.locals.config, object, function (err, reponse) {\r\n        if (err)\r\n          res.status(500).json({ data: reponse })\r\n        else {\r\n          req.session.user = {\r\n            first_name: req.body.first_name,\r\n            last_name: req.body.last_name,\r\n            email: req.body.email\r\n          }\r\n          req.session.save()\r\n          res.redirect('/posts')\r\n        }\r\n      })\r\n    })\r\n  })\r\n})\r\n\r\nmodule.exports = router

The Logout Route:

To be user friendly we'll need to give our users a chance to log out. All this requires is a POST request to /logoutand a quick session.destroy() call.

var express = require('express')\r\nvar router = express.Router()\r\n\r\n/* GET home page. */\r\n\r\nrouter.get('/', function(req, res) {\r\n  req.session.destroy()\r\n  return res.redirect('/')\r\n});\r\n\r\nmodule.exports = router

Wiring Them All Together:

Having all of our routes built and ready to work as we need them to, we'll require them all in our app and point their associated enpoints to them via app.use()

// app.js\r\n\r\nvar routes = require('./routes/index');\r\nvar posts = require('./routes/posts');\r\nvar post = require('./routes/post')\r\nvar login = require('./routes/login')\r\nvar logout = require('./routes/logout')\r\nvar signup = require('./routes/signup')\r\nvar plans = require('./routes/plans')\r\nvar premium = require('./routes/premium')\r\nvar api = require('./routes/api')\r\n\r\napp.use('/', routes);\r\napp.use('/post', post)\r\napp.use('/posts', posts)\r\napp.use('/login', login)\r\napp.use('/logout', logout)\r\napp.use('/signup', signup)\r\napp.use('/plans', plans)\r\napp.use('/premium', premium)\r\napp.use('/api', api)

Moving On to the Extension:

If you've done everything right up until this point, your blog now works exactly as you'd expect it to. To test, go ahead and run npm start, create a few posts in Cosmic and verify that they're being fetched. Then create a dummy account and make sure it's being stored in Cosmic and registered by Stripe. Then, we'll build our dashboard extension for Cosmic.

Part 2: Building the Extension

Stripe provides us with an impressive amount of analytics, however we want a central location to get a quick glance at a list of all of our users, what subscription plan they're on, and three key metrics about our blog: revenue to date, active subscriptions, and cancellations to date.

Cosmic gives us the ability to do this by utilizing its extension feature, which lets us upload a SPA with index.html as an entry point that gets loaded into a frame in our Cosmic dashboard. Bucket keys are then provided to it via URL query strings.

We'll be building the extension with React, namely because our extension only requires a view layer.

Setup

To keep ourselves organized we'll store our app under our CosmicUserBlog directory. Our tree will look like this:

CosmicUserBlog\r\n|\r\n|--extensions\r\n| |--subscription-management\r\n| | |--client\r\n| | | |--components\r\n| | | |--index.js\r\n| | | |--index.html\r\n| | |--dist\r\n

Once you have your directory structure in place, run yarn init and we'll move onto installaitons.

Installations

We need these packages:

Run yarn add async axios babel-preset-2015 babel-preset-2016 cosmicjs html-webpack-plugin lodash query-string path react react-dom react-loading webpack babel-core babel-loader-babel-preset-react, then we'll dive in.

Configure Webpack and Babel

First, make .babelrc in the root folder and tell it how to transpile our code:

// .babelrc\r\n\r\n{\r\n  "presets": [\r\n    "es2016", "es2015", "react"\r\n  ]\r\n}

Then, again under CosmicUserBlog/extensions/subscription-management, make webpack.config.js so we can tell Webpack how to package our modules.

const path = require('path')\r\nconst HtmlWebpackPlugin = require('html-webpack-plugin')\r\n\r\nmodule.exports = {\r\n  entry: './client/index.js',\r\n  output: {\r\n    path: path.resolve('dist'),\r\n    filename: 'index_bundle.js'\r\n  },\r\n  module: {\r\n    loaders: [\r\n      { test: /\\.js$/, loader: 'babel-loader', exclude: /node_modules/ }\r\n    ]\r\n  },\r\n  plugins: [\r\n    new HtmlWebpackPlugin({\r\n      template: './client/index.html',\r\n      filename: 'index.html',\r\n      inject: 'body'\r\n    })\r\n  ]\r\n}

dist will contain all of our output files (those being index_bundle.js and index.html) and we'll ultimately compress dist to upload as our extension. html-webpack-plugin will take our html template from client/index.html and link to our compiled javascript in dist/index.html upon building.

Create an Entry File

We want to use Boostrap and we need a div (which we'll ID as root) for our React App to mount onto. client/index.html should look like this:

<!DOCTYPE html>\r\n<html>\r\n  <head>\r\n    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />\r\n  </head>\r\n  <body>\r\n    <div id="root">\r\n      <script\r\n        src="https://code.jquery.com/jquery-3.2.1.min.js"\r\n        integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="\r\n        crossorigin="anonymous"></script>\r\n      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>\r\n  </body>\r\n</html>

Build the React App

1. Create an Entry Point

We have everything in place to start getting our hands dirty. We'll use client/index.js as an entry point for our React app. We'll import React, set it as a global, pass our cosmic keys to it in its props, and mount the App component (which we'll make next) to <div id="root">.

import React from 'react'\r\nimport ReactDom from 'react-dom'\r\nimport App from './components/App'\r\nimport QueryString from 'query-string'\r\n\r\nwindow.React = React\r\nconst url = QueryString.parse(location.search)\r\n\r\nconst cosmic = { bucket: {\r\n    slug: url.bucket_slug,\r\n    write_key: url.write_key,\r\n    read_key: url.read_key\r\n  }\r\n}\r\n\r\nReactDom.render(\r\n  <App cosmic={cosmic}/>,\r\n  document.getElementById('root')\r\n)

2. Build the App Component

To keep our app modular, we'll have a tiered component structure that looks like this:

components\r\n|\r\n|--App.js\r\n|--Header.js\r\n|--SubscriberData\r\n| |\r\n| |--SubscriberContainer.js\r\n| |--Loader.js\r\n| |--StatsContainer.js\r\n| |--StatTicker.js\r\n| |--UserList.js\r\n

Header and SubscriberContainer will be immediate children of App. Loader, UserList, and StatsContainer will all be immediate children of SubcriberContainer. Finally, StatsContainer will be composed of StatTickers.

Aside from keeping an organized project, this structure allows us to maximize our number of stateless functional components which are not React classes and also happen to be fast.

Starting at the top of the heirarchy, we'll build an App component that stores our Cosmic keys in its state and renders a Header and a SubscriberContainer.

// components/App.js\r\n\r\nimport { Component } from 'react'\r\nimport Header from './Header'\r\nimport SubscriberContainer from './SubscriberData/SubscriberContainer'\r\n\r\nexport default class App extends Component {\r\n\r\n  constructor(props) {\r\n    super(props)\r\n    this.state = {\r\n      cosmic: this.props.cosmic\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div>\r\n        <Header\r\n          bucket={this.state.cosmic.bucket.slug} />\r\n        <SubscriberContainer\r\n          cosmic={this.state.cosmic} />\r\n      </div>\r\n    )\r\n  }\r\n}

The next obvious step is to build out the Header component.

Build the Header:

Header will be our first stateless functional component, taking only our bucket slug as a prop:

const Header = ({ bucket }) =>\r\n  <nav className="navbar navbar-default">\r\n    <div className="container-fluid">\r\n      <ul className="nav navbar-nav">\r\n        <li className="navbar-text"><strong>Managing Subscriptions for: </strong><em>{bucket}</em></li>\r\n      </ul>\r\n    </div>\r\n  </nav>\r\n\r\nexport default Header

Build the Subscriber Container:

SubscriberContainer will handle all of the logic associated with our subscriber data and render StatsContainer and UserList to display the data it processes.

SubscriberContainer will be a stateful React class containing the following:

  1. A constructor that initializes SubscriberContainer's state to contain our Cosmic keys (which we've passed as props) and reflect our subscriber data. We intialize the Revenue, Users, and Cancellations stats to 'Loading…'and their loading state to true.
  2. An override for componentDidMount() to get our component to fetch the data we need after it mounts to the DOM, and then refresh that data every minute.
  3. A getRevenue() method to fetch (in an admittedly hack-ish way) our revenue by iterating over the subscription types of our active users from Cosmic and storing the calculated revenue in the state.
  4. A getUsers() method to fetch all of our users from Cosmic and store them in an array in the state, as well as their total.
  5. A getCancellations() method to grab the amount of cancelled subscriptions from our Subscriptions config object. (Later we'll be updating that number with a webhook from Stripe.)
  6. A render() method to render our Loader component (only if we're fetching data), StatsContainer, and UserList.

All put together, we have this:

import { Component } from 'react'\r\nimport Cosmic from 'cosmicjs'\r\nimport async from 'async'\r\nimport _ from 'lodash'\r\nimport StatsContainer from './StatsContainer'\r\nimport Loader from './Loader'\r\nimport UserList from './UserList'\r\n\r\nconst formatter = new Intl.NumberFormat('en-US', {\r\n  style: 'currency',\r\n  currency: 'USD',\r\n  minimumFractionDigits: 2\r\n})\r\n\r\nexport default class App extends Component {\r\n \r\n  constructor(props) {\r\n    super(props)\r\n    this.state = {\r\n      cosmic: this.props.cosmic,\r\n      stats: {\r\n        revenue: 'Loading...',\r\n        users: 'Loading...',\r\n        cancellations: 'Loading...'\r\n      },\r\n      users: [],\r\n      fetchingRevenue: true,\r\n      fetchingUsers: true,\r\n    }\r\n  }\r\n\r\n  fetchData() {\r\n    this.getRevenue();this.getUsers();this.getCancellations()\r\n  }\r\n\r\n  componentDidMount() {\r\n    this.fetchData()\r\n    setInterval(() => {\r\n      this.fetchData()\r\n    }, 60000)\r\n  }\r\n\r\n  getRevenue(cosmic) {\r\n    this.setState({ fetchingRevenue: true})\r\n    async.series([\r\n      callback => {\r\n        Cosmic.getObject(this.state.cosmic, { slug: 'subscriptions' }, (err, response) => {\r\n          callback(null, response.object)\r\n        })\r\n      },\r\n      callback => {\r\n        Cosmic.getObjectType(this.state.cosmic, { type_slug: 'users' }, (err, response) => {\r\n          callback(null, response.objects.all)\r\n        })\r\n      }\r\n    ], (err, results) => {\r\n      let subscriptions = results[0], users = results[1];\r\n      let currentStats = this.state.stats\r\n      currentStats.revenue = formatter.format(users.map(user =>\r\n        parseInt(subscriptions.metadata[`${user.metadata.subscription_type}_price`].replace('$', ''))\r\n      )\r\n      .reduce((sum, val) => sum + val))\r\n      this.setState({ stats: currentStats })\r\n      this.setState({ fetchingRevenue: false })\r\n    })\r\n  }\r\n\r\n  getUsers(cosmic) {\r\n    this.setState({ fetchingUsers: true })\r\n    Cosmic.getObjectType(this.state.cosmic, { type_slug: 'users' }, (err, response) => {\r\n      if (err) {\r\n        currentStats = this.state.stats\r\n        currentStats.users = 'Error'\r\n        this.setState({ stats: currentStats })\r\n      } else {\r\n        let currentStats = this.state.stats\r\n        currentStats.users = isNaN(response.total) ? 0 : response.total\r\n        this.setState({ stats: currentStats })\r\n        this.setState({ users: response.objects.all })\r\n        this.setState({ fetchingUsers: false })\r\n      }\r\n    })\r\n  }\r\n\r\n  getCancellations(cosmic) {\r\n    this.setState({ fetchingCancellations: true})\r\n    Cosmic.getObject(this.state.cosmic, { slug: 'subscriptions' }, (err, response) => {\r\n      if (err) {\r\n        currentStats = this.state.stats\r\n        currentStats.users = 'Error'\r\n        this.setState({ stats: currentStats })\r\n      } else {\r\n        let currentStats = this.state.stats\r\n        currentStats.cancellations = isNaN(response.object.metadata.cancellations) ? 0: response.object.metadata.cancellations\r\n        this.setState({ stats: currentStats })\r\n        this.setState({ fetchingCancellations: false })\r\n      }\r\n    })\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div className="container">\r\n        <Loader loadingState={this.state.fetchingUsers || this.state.fetchingRevenue || this.state.fetchingCancellations} />\r\n        <StatsContainer stats={this.state.stats} />\r\n        <UserList users={this.state.users}/>\r\n      </div>\r\n    )\r\n  }\r\n}

We're now left with four stateless functional components to build out. These are:

1. Loader:

import ReactLoading from 'react-loading'\r\n\r\nconst Loader = ({ loadingState }) =>\r\n  <div className="row" style={{display: loadingState ? 'block' : 'none' }}>\r\n    <div className="col-xs-12">\r\n      <div className="pull-right">\r\n        <ReactLoading height='20px' width='20px' type="spin" color="#444" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\nexport default Loader

Which makes use of the handy react-loading package.

2. StatsContainer:

import StatTicker from './StatTicker'\r\n\r\nconst StatsContainer = ({ stats }) =>\r\n  <div className="row">{Object.keys(stats).map((key, index) =>\r\n      <div key={index} className="col-md-4 text-center"><StatTicker name={key} value={stats[key]} /></div>\r\n    )}\r\n  </div>\r\n\r\n\r\nexport default StatsContainer

3. StatTicker:

const StatTicker = ({ name, value }) =>\r\n  <div><h3 className="lead text-muted">{name}</h3><h1 className="text-primary">{value}</h1></div>\r\n\r\nexport default StatTicker

and finally...

4. UserList:

const UserList = ({ users, deleteUser }) =>\r\n  <div style={{marginTop: 50 + 'px'}} className="row">\r\n    <div className="col-xs-12">\r\n      <h4 className="pull-left lead">All Users:</h4>\r\n      <table className="table table-responsive table-hover">\r\n        <thead>\r\n          <tr>\r\n            <th>Stripe ID</th>\r\n            <th>First Name</th>\r\n            <th>Last Name</th>\r\n            <th>Email</th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          {users.map((user, index) =>\r\n            <tr key={index}>\r\n              <td>{user.metadata.stripe_id}</td>\r\n              <td>{user.metadata.first_name}</td>\r\n              <td>{user.metadata.last_name}</td>\r\n              <td>{user.metadata.email}</td>\r\n            </tr>\r\n          )}\r\n        </tbody>\r\n      </table>\r\n    </div>\r\n  </div>\r\n\r\n\r\nexport default UserList

Integrate Stripe Webhooks

To get our cancelled subscriber count, we'll udpate a cancellations metafield in our Cosmic Subscriptions object. To do this, we'll receive a webhook from Stripe through our Express app every time we delete a subscription on Stripe.

  1. Set up webhooks in Stripe and point them to the domain your Express app is deployed to.
  2. Create an api route at CosmicUserBlog/routes/api.js and require it in App.js.
  3. Handle POST requests with a switch statement acting on req.body. When Stripe sends us a subscription cancellation webhook, req.body.type will be customer.subscription.deleted.
  4. Delete the User object from Cosmic, get the Subscription object from Cosmic, shallow copy the object, increment metadata.cancellations, then use Cosmic's REST API to push the changes to the object.
  5. Respond with a 200 code so Stripe can confirm receipt of the webhook.

Here's the finshed product:

var express = require('express')\r\nvar router = express.Router()\r\nvar cosmic = require('cosmicjs')\r\nvar axios = require('axios')\r\n\r\nrouter.post('/', function(req, res) {\r\n  event = req.body\r\n  switch (event.type) {\r\n    case 'customer.subscription.deleted':\r\n      cosmic.deleteObject(req.app.locals.config, { slug: 'user', write_key: req.app.locals.config.bucket.slug }, function (err, response) {\r\n        cosmic.getObject(req.app.locals.config, { slug: 'subscriptions' }, function (err, response) {\r\n          var currentObject = response.object\r\n          currentObject.metadata.cancellations = currentObject.metadata.cancellations + 1\r\n          currentObject.metafield.cancellations.value = currentObject.metadata.cancellations + 1\r\n          currentObject.write_key = req.app.locals.config.bucket.write_key\r\n          axios({\r\n            method: 'put',\r\n            url: `https://api.cosmicjs.com/v1/${req.app.locals.config.bucket.slug}/edit-object`,\r\n            data: currentObject\r\n          }).then(function (axRes) {\r\n            console.log('Success')\r\n          }).catch(function (axError) {\r\n            console.log('Error')\r\n          })\r\n        })\r\n      })\r\n      return res.json({ received: true})\r\n      break;\r\n    default:\r\n      return res.json({ received: false })\r\n  }\r\n});\r\n\r\nmodule.exports = router

Deploy

To tell Cosmic what your extension is, you'll need to add extension.json to your dist folder. We'll configure our extension like this:

// dist/extension.json\r\n\r\n{\r\n  "title": "Subscription Management",\r\n  "font_awesome_class": "fa-gears",\r\n  "image_url": ""\r\n}

Conclusion

Using Cosmic, Express, Stripe, and React, we've built both a monetizable blog that lets our readers subscribe to read premium content and a convenient dashboard to view data about our blog. We've integrated Stripe for secure payments and we've built an app that does as much as we want it to do with room to grow.

With how quickly we've been able to build our app and with the simplicity of deploying and maintaining it, it's clear that Cosmic is one of a kind in its API first approach to content management. Clearly, CosmisJS is a money maker.

Matt Cain builds smart web applications and writes about the tech used to build them. You can learn more about him on his portfolio.

","metafields":[{"object_type":"authors","value":"59528e59833ff0503d000e98","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"59528e59833ff0503d000e98","slug":"matt-cain","title":"Matt Cain","content":"","metafields":[{"value":"9ff99380-5b59-11e7-a33a-a9e1bde9cf9a-matt-cain.jpeg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/9ff99380-5b59-11e7-a33a-a9e1bde9cf9a-matt-cain.jpeg","imgix_url":"https://imgix.cosmicjs.com/9ff99380-5b59-11e7-a33a-a9e1bde9cf9a-matt-cain.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-06-27T16:56:57.686Z","created_by":"5357ef811693be2118000001","created":"2017-06-27T16:56:57.686Z","status":"published","modified_at":"2023-01-20T22:01:28.380Z","modified_by":"5357ef811693be2118000001","thumbnail":"https://imgix.cosmicjs.com/9ff99380-5b59-11e7-a33a-a9e1bde9cf9a-matt-cain.jpeg"}},{"value":"

Using Cosmic, Express, Stripe, and React, we've built both a monetizable blog that lets our readers subscribe to read premium content and a convenient dashboard to view data about our blog. We've integrated Stripe for secure payments and we've built an app that does as much as we want it to do with room to grow.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"48d487e0-81d3-11e7-8612-9d67c44fe43c-joe-shillington-240205.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/48d487e0-81d3-11e7-8612-9d67c44fe43c-joe-shillington-240205.jpg","imgix_url":"https://imgix.cosmicjs.com/48d487e0-81d3-11e7-8612-9d67c44fe43c-joe-shillington-240205.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-08-15T16:03:43.313Z","created_by":"5357ef811693be2118000001","created":"2017-08-15T16:03:43.313Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5716b504e9c686d006000073","metadata":{"author":{"_id":"59528e59833ff0503d000e98","slug":"matt-cain","title":"Matt Cain","content":"","metafields":[{"value":"9ff99380-5b59-11e7-a33a-a9e1bde9cf9a-matt-cain.jpeg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/9ff99380-5b59-11e7-a33a-a9e1bde9cf9a-matt-cain.jpeg","imgix_url":"https://imgix.cosmicjs.com/9ff99380-5b59-11e7-a33a-a9e1bde9cf9a-matt-cain.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-06-27T16:56:57.686Z","created_by":"5357ef811693be2118000001","created":"2017-06-27T16:56:57.686Z","status":"published","modified_at":"2023-01-20T22:01:28.380Z","modified_by":"5357ef811693be2118000001","thumbnail":"https://imgix.cosmicjs.com/9ff99380-5b59-11e7-a33a-a9e1bde9cf9a-matt-cain.jpeg","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/9ff99380-5b59-11e7-a33a-a9e1bde9cf9a-matt-cain.jpeg","imgix_url":"https://imgix.cosmicjs.com/9ff99380-5b59-11e7-a33a-a9e1bde9cf9a-matt-cain.jpeg"}}},"teaser":"

Using Cosmic, Express, Stripe, and React, we've built both a monetizable blog that lets our readers subscribe to read premium content and a convenient dashboard to view data about our blog. We've integrated Stripe for secure payments and we've built an app that does as much as we want it to do with room to grow.

","featured_image":{"url":"https://cdn.cosmicjs.com/48d487e0-81d3-11e7-8612-9d67c44fe43c-joe-shillington-240205.jpg","imgix_url":"https://imgix.cosmicjs.com/48d487e0-81d3-11e7-8612-9d67c44fe43c-joe-shillington-240205.jpg"}}},{"_id":"598340e080aaa86220000afd","order":111,"slug":"how-to-build-a-vuejs-photo-gallery","title":"How to Build a Vue.js Photo Gallery","content":"

In this tutorial I’m going to show you how to build a photo gallery with a ready-to-use template from HTML5UP, powered by the Cosmic API, hosted on the Cosmic App Server.

\"\"

TL;DR

View demo
View the codebase on GitHub

Prerequisites

You’ll need Node JS and npm. Make sure you already have them before you start.

Getting Started

First of all we’ll need to install VueJS CLI and start the new project.  Run the following commands to do this:

npm install -g vue-cli\r\nvue init webpack vuejs-photo-gallery\r\ncd vuejs-photo-gallery\r\nnpm install

After you’ll setup this project you’ll be able to run

cd vuejs-photo-gallery\r\nnpm run dev

And play with your app in browser

Doing everything using the existing git repo

First of all, you have to be sure you have node > 6.x installed, than run the following commands:

npm install -g vue-cli\r\ngit clone https://github.com/cosmicjs/vuejs-photo-gallery.git\r\ncd vuejs-photo-gallery\r\nnpm install\r\nnpm run dev

Browser window will open automatically once you'll run the last command

Setting up Cosmic library

First of all, install Cosmic Angular/JavaScript library

npm install cosmicjs --save

Now you should be able to import Cosmic object and perform Cosmic API calls like following:

import Cosmic from 'cosmicjs';\r\nconst bucket = { slug: 'your-bucket-slug' };\r\n\r\nCosmic.getObjects({ bucket }, (err, res) => {\r\n  console.log(res.objects);\r\n});

Setting up things with Cosmic

Create the bucket and remeber the bucket name (vuejs-photo-gallery in our case):

Than create a new object type named Photo.

We also need a way to store the picture itself. Please enter the “Metafields Template” tab and add “Image/File” type metafield with key image. This metafield will store the image. We don’t need anything more,\r\nso just set the name and save object type. After save you’ll be redirected to ‘New Photo’ page. Create some photos using this page and save them - we'll use them as test data.

\"\"

The only thing left is to set site-wide things, such as title, tagline, social icons and footer text. Let's create one more object type named Global. And add the following metafields:

VueJS environments

We want to pick our bucket name automatically on deploy. In this case we'll need configuration file, which we'll populate with correct data during deploy. Create src/config.js to match the following:

Config = {\r\n    bucket: 'vuejs-photo-gallery'\r\n};\r\n\r\nmodule.exports = Config;

Prepare assets

Download the template ZIP and unzip it somewhere. In our case we have the following content:

index.html - this is our HTML markup, we'll move it to Vue components later. images - this is sample images folder. We don't need it, our images will be served from Cosmic servers assets - other assets such as CSS, fonts, javascript files. We'll need CSS and fonts. Let's ignore Javascript for now, since we're planning to use VueJS. Let's copy assets/css and assets/fonts folders to static folder inside our project. This will allow us to add these files to the build automatically as static assets.

Prepare index.html

Now it's time to include our assets to index.html. Add the following to the head section:

<meta name="viewport" content="width=device-width, initial-scale=1" />\r\n<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->\r\n<link rel="stylesheet" href="static/css/main.css" />\r\n<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->\r\n<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->\r\n<noscript><link rel="stylesheet" href="static/css/noscript.css" /></noscript>

This will include our static assets. Once we'll implement correct markup, appearance will be automatically set via CSS.

VueJS components

Looking into our page, we can define components we'll need:

Header and Footer - for this will be very simple components, which will display global data which will be loaded on app startup Thumbs - this component will display photos thumbnails Viwer - this component will display the big photo and provide prev/next navigation. Please note - we're creating component's templates markup using template we downloaded before (doing copy-paste from index.html and applying VueJS directives).

Header component:

<template>\r\n    <header id="header">\r\n        <h1>{{ header }}</h1>\r\n        <div v-html="text"></div>\r\n        <ul class="icons">\r\n            <li><a :href="twitter" class="icon fa-twitter"><span class="label">Twitter</span></a></li>\r\n            <li><a :href="instagram" class="icon fa-instagram"><span class="label">Instagram</span></a></li>\r\n            <li><a :href="github" class="icon fa-github"><span class="label">Github</span></a></li>\r\n            <li><a :href="email" class="icon fa-envelope-o"><span class="label">Email</span></a></li>\r\n        </ul>\r\n    </header>\r\n</template>\r\n\r\n<script>\r\nimport {EventBus} from '../event_bus';\r\n\r\nexport default {\r\n    name: 'app-header',\r\n    created() {\r\n        EventBus.$on('global_loaded', (obj) => {\r\n            this.header = obj.title;\r\n            this.text = obj.metafield.tagline.value;\r\n            this.twitter = obj.metafield.twitter.value;\r\n            this.instagram = obj.metafield.instagram.value;\r\n            this.github = obj.metafield.github.value;\r\n            this.email = 'mailto:' + obj.metafield.email.value;\r\n        });\r\n    },\r\n    data () {\r\n        return {\r\n            text: null,\r\n            twitter: '',\r\n            instagram: '',\r\n            github: '',\r\n            email: '',\r\n            header: ''\r\n        }\r\n    }\r\n}\r\n</script>

Footer component is very similar:

<template>\r\n    <footer id="footer">\r\n        <div v-html="text"></div>\r\n    </footer>\r\n</template>\r\n\r\n<script>\r\nimport {EventBus} from '../event_bus';\r\n\r\nexport default {\r\n    name: 'app-footer',\r\n    created() {\r\n        EventBus.$on('global_loaded', (obj) => {\r\n            this.text = obj.metafield.footer.value;\r\n        });\r\n    },\r\n    data () {\r\n        return {\r\n            text: null\r\n        }\r\n    }\r\n}\r\n</script>

Both components uses EventBus to receive data from parent component. I'll tell about the Event bus later in this post.

Thumbs component

This component is more complicated than previous two:

<template>\r\n    <section id="thumbnails">\r\n        <article v-for="(item, index) in items" v-bind:class="{ 'active': activeIndex == index }">\r\n            <a class="thumbnail" v-on:click="selectImage(item, index)">\r\n                <img v-bind:src="item.metafield.image.imgix_url" alt="" />\r\n            </a>\r\n            <h2>{{ item.title }}</h2>\r\n            <div v-html="item.content"></div>\r\n        </article>\r\n    </section>\r\n</template>\r\n\r\n<script>\r\nimport Cosmic from 'cosmicjs';\r\nimport * as Config from '../config';\r\nimport {EventBus} from '../event_bus';\r\n\r\nconst bucket = { slug: Config.bucket };\r\n\r\nexport default {\r\n    name: 'thumbs',\r\n    props: ['bus'],\r\n    created() {\r\n        Cosmic.getObjectType({ bucket }, { type_slug: 'photos' }, (err, res) => {\r\n            this.items = res.objects.all;\r\n            EventBus.$emit('loaded', this.items[0]);\r\n        });\r\n        EventBus.$on('move', (dir) => {\r\n            this.activeIndex = this.activeIndex + dir;\r\n            if (dir > 0 && this.activeIndex >= this.items.length) {\r\n                this.activeIndex = 0;\r\n            }\r\n            if (dir < 0 && this.activeIndex < 0) {\r\n                this.activeIndex = this.items.length - 1;\r\n            }\r\n            EventBus.$emit('loaded', this.items[this.activeIndex]);\r\n        });\r\n    },\r\n    data () {\r\n        return {\r\n            items: [],\r\n            activeIndex: 0\r\n        }\r\n    },\r\n    methods: {\r\n        selectImage (itm, index) {\r\n            EventBus.$emit('loaded', itm);\r\n            this.activeIndex = index;\r\n        }\r\n    }\r\n}\r\n</script>

On component creation we're fetching our photos list and subscribes to Event bus 'move' event. Than we just render these photos and emit a new event each time when user selects a new photo.

Viewer component

<template>\r\n    <div id="viewer">\r\n        <div class="inner">\r\n            <div class="nav-next" v-on:click="selectNext()"></div>\r\n            <div class="nav-previous" v-on:click="selectPrev()"></div>\r\n        </div>\r\n        <div class="slide active" v-if="img">\r\n            <div class="caption">\r\n                <h2>{{ img.title }}</h2>\r\n                <div v-html="img.content"></div>\r\n            </div>\r\n            <div class="image" v-bind:style='{ backgroundImage: "url(" + img.metafield.image.imgix_url + ")" }'>\r\n            </div>\r\n        </div> \r\n    </div>\r\n</template>\r\n\r\n<script>\r\nimport {EventBus} from '../event_bus';\r\n\r\nexport default {\r\n    name: 'viewer',\r\n    props: ['bus'],\r\n    created() {\r\n        EventBus.$on('loaded', (obj) => {\r\n            this.img = obj;\r\n        });\r\n    },\r\n    data () {\r\n        return {\r\n            img: null\r\n        }\r\n    },\r\n    methods: {\r\n        selectNext() {\r\n            EventBus.$emit('move', 1);\r\n        },\r\n        selectPrev() {\r\n            EventBus.$emit('move', -1);\r\n        }\r\n    }\r\n}\r\n</script>

This component subscribes to loaded event via Event bus. This event means that uses selected a new photo and we have to show it bigger size; Another task of this component is to notify Thumbs component when users click prev/next buttons. Component uses Event bus for this purpose also.

Event bus

Event bus follows publish-subscribe pattern and allows us setup communication between Thumbs and Viewer components. Both components are on the same level (no parent-child relationship), so we need something more complicated than simple event emission.\r\nEvent bus implementation is very easy (src/event_bus.js):

import Vue from 'vue';\r\nexport const EventBus = new Vue();

This event bus is used to fire events in one component (using EventBus.$emit) and subscribe on them in another component (using EventBus.$on).

Concatenating everything together

Now it's time to concat everything with App component:

<template>\r\n  <div>\r\n    <div id="main">\r\n      <app-header></app-header>\r\n      <thumbs></thumbs>\r\n      <app-footer></app-footer>\r\n    </div>\r\n    <viewer></viewer>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport AppHeader from './components/AppHeader'\r\nimport AppFooter from './components/AppFooter'\r\nimport Thumbs from './components/Thumbs'\r\nimport Viewer from './components/Viewer'\r\nimport Vue from 'vue';\r\nimport Cosmic from 'cosmicjs';\r\nimport * as Config from './config';\r\nimport {EventBus} from './event_bus';\r\n\r\nconst bucket = { slug: Config.bucket };\r\n\r\nexport default {\r\n  name: 'app',\r\n  components: {\r\n    AppFooter,\r\n    AppHeader,\r\n    Thumbs,\r\n    Viewer\r\n  },\r\n  created() {\r\n    Cosmic.getObjectType({ bucket }, { type_slug: 'globals' }, (err, res) => {\r\n      EventBus.$emit('global_loaded', res.objects.all[0]);\r\n      console.log(res.objects.all[0]);\r\n    });\r\n  },\r\n}\r\n</script>

This component loads globals data on creation and notify AppHeader and AppFooter components via EventBus.

Deploy to Cosmic servers

Cosmic has some requirements for deploying apps:

In our case we actually have HTML5 app, so we'll need some additional software.

Prepare config

Create a prepare.js file in your project directory:

var fs = require('fs');\r\n\r\nvar str = `\r\n    Config = {\r\n        bucket: '${process.env.COSMIC_BUCKET}'\r\n    };\r\n\r\n    module.exports = Config;\r\n`;\r\nfs.writeFile("./src/config.js", str, function(err) {\r\n    if(err) {\r\n        return console.log(err);\r\n    }\r\n    console.log("The file was saved!");\r\n});

This script will rewrite application config file (see more info above) file to use your Cosmic bucket write key and bucket name.

Modify package.json

VueJS CLI adds some packaged on package.json as devDependencies. We have to move them all into dependencies to make our scripts work in Cosmic servers.

Prepare software

We'll also need something to serve our Angular app. We'll use Express framework:

npm install --save express

Add the following to your package.json:

{\r\n  ...\r\n  "scripts": {\r\n    ...\r\n    "start": "node app.js"\r\n  },\r\n  ...\r\n}

The main point is to have start command defined in the scripts section (you can safely replace default angular start command). This is the command which will be run to start our app. So now we have the only thing left - create the app.js file:

const express = require('express')\r\nconst app = express()\r\n\r\napp.use(express.static('./dist'));\r\n\r\napp.listen(process.env.PORT, function () {\r\n});

This is a simple Express app which serves dist dir as dir of static files. Please take note - app listens on port specified via PORT environment variable, it's important to run apps on Cosmic App Server.

Build VueJS app for production

We'll use app.json to do this (dokku predeploy section):

{\r\n    "scripts": {\r\n        "dokku": {\r\n            "predeploy": "node prepare.js && npm run build"\r\n        }\r\n    }\r\n}

This script will be executed before we'll launch our express app to build the VueJS app for production.

Run it!

Now you can enter 'Deploy Web App' page in your Cosmic Dashboard.

\"\"

Simply enter your repo URL and click 'Deploy to Web' - deploy process will be started and app become ready in a couple of minutes.

Conclusion

Using Cosmic App Server allows quickly deploy the application to hosting using a git repo and don't worry about server configuration and software installation - everything will be done by Cosmic servers.

","metafields":[{"object_type":"authors","value":"591dcc617b17dbf10500212d","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"591dcc617b17dbf10500212d","slug":"ivan-larionov","title":"Ivan Larionov","content":"","metafields":[{"value":"713396e0-3be7-11e7-bfc3-91ffe5d3362c-ivan.jpeg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/713396e0-3be7-11e7-bfc3-91ffe5d3362c-ivan.jpeg","imgix_url":"https://imgix.cosmicjs.com/713396e0-3be7-11e7-bfc3-91ffe5d3362c-ivan.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-05-18T16:31:29.363Z","created_by":"5357ef811693be2118000001","created":"2017-05-18T16:31:29.363Z","status":"published"}},{"value":"

In this tutorial I’m going to show you how to build photo gallery with ready-to-use template, which will be hosted on Cosmic App Server.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"37222e70-7860-11e7-b95a-5b714b6ab507-will-langenberg-8989.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/37222e70-7860-11e7-b95a-5b714b6ab507-will-langenberg-8989.jpg","imgix_url":"https://imgix.cosmicjs.com/37222e70-7860-11e7-b95a-5b714b6ab507-will-langenberg-8989.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-08-03T15:27:28.290Z","created_by":"5357ef811693be2118000001","created":"2017-08-03T15:27:28.290Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"591dcc617b17dbf10500212d","slug":"ivan-larionov","title":"Ivan Larionov","content":"","metafields":[{"value":"713396e0-3be7-11e7-bfc3-91ffe5d3362c-ivan.jpeg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/713396e0-3be7-11e7-bfc3-91ffe5d3362c-ivan.jpeg","imgix_url":"https://imgix.cosmicjs.com/713396e0-3be7-11e7-bfc3-91ffe5d3362c-ivan.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-05-18T16:31:29.363Z","created_by":"5357ef811693be2118000001","created":"2017-05-18T16:31:29.363Z","status":"published","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/713396e0-3be7-11e7-bfc3-91ffe5d3362c-ivan.jpeg","imgix_url":"https://imgix.cosmicjs.com/713396e0-3be7-11e7-bfc3-91ffe5d3362c-ivan.jpeg"}}},"teaser":"

In this tutorial I’m going to show you how to build photo gallery with ready-to-use template, which will be hosted on Cosmic App Server.

","featured_image":{"url":"https://cdn.cosmicjs.com/37222e70-7860-11e7-b95a-5b714b6ab507-will-langenberg-8989.jpg","imgix_url":"https://imgix.cosmicjs.com/37222e70-7860-11e7-b95a-5b714b6ab507-will-langenberg-8989.jpg"}}},{"_id":"598081a385fadb6701000040","order":112,"slug":"new-features-metafield-options-help-text-and-more","title":"New Features: Metafield Options, Help Text and More","content":"

We're happy to announce that we've rolled out some new features requested by members of our community..  Here are some of the new features:

Metafield Options
For Metafields that require options, you will now notice the ability to easily edit those options right on the Metafield.

Metafield Min/Max Length
You can now restrict Text and Textarea Metafield Min/Max lengths for your content editors.

Metafield Help Text
You can now add help text to all Metafields to easily send tips to the content editor.

Get Draft Objects from the API
You can now add a query parameter to your endpoint to get all Objects including draft status Objects.  Simply add "status=all" to the endpoint.  The default behavior is still only published Objects.  Check it out on the API docs page.

To get more updates and submit feature requests to us directly, join our Slack community and reach out to us on Twitter.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"

We're happy to announce that we've rolled out some new features requested by members of our community.  Here are some of the new features:

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"0afa7760-76be-11e7-a00c-4fed1ad8a55e-guillaume-bolduc-259596.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/0afa7760-76be-11e7-a00c-4fed1ad8a55e-guillaume-bolduc-259596.jpg","imgix_url":"https://imgix.cosmicjs.com/0afa7760-76be-11e7-a00c-4fed1ad8a55e-guillaume-bolduc-259596.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-08-01T13:26:59.054Z","created_by":"5357ef811693be2118000001","created":"2017-08-01T13:26:59.054Z","status":"published","modified_at":"2020-08-10T14:04:22.001Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

We're happy to announce that we've rolled out some new features requested by members of our community.  Here are some of the new features:

","featured_image":{"url":"https://cdn.cosmicjs.com/0afa7760-76be-11e7-a00c-4fed1ad8a55e-guillaume-bolduc-259596.jpg","imgix_url":"https://imgix.cosmicjs.com/0afa7760-76be-11e7-a00c-4fed1ad8a55e-guillaume-bolduc-259596.jpg"}}},{"_id":"596f775955010484610000bd","order":113,"slug":"language-agnostic-content-management-with-cosmic-js","title":"Language Agnostic Content Management With Cosmic","content":"

If you’re a developer and need to open up a new blog for yourself or a client, the idea of using WordPress probably makes you cringe.

64.5% of developers surveyed on StackOverflow stated that WordPress was one of their most dreaded platforms to work with.

The dread makes sense. You can’t hand code an entire blog if you use WordPress for your content management system (CMS). You have to work within the WordPress stack and then use plugins for the extra pieces you need. This is antithetical to most people who write plain code.

What you probably want is a system that lets you input your content, store your content, and fetch it in a manner that is straightforward and easy. If you can input your content in a WYSIWYG dashboard even better¹.

While looking for something that did this I stumbled on Cosmic. It turns out that Cosmic is exactly that, a programming language agnostic CMS. You can write your blog in whatever language you want for whatever platform you want.

You put your content in and it gives you simple API endpoints to retrieve it from. One get request and your work is returned to you in a JSON object.

Here’s how you can setup a CMS for your blog in no time flat…

Once you’ve created and logged into your account go ahead and create a new bucket. Buckets are exactly what they sound like. A container that holds objects. The objects could all be of the same type or they could be different.



Once you’ve created your bucket and you click on it you’ll notice a new menu on the sidebar. One of the options will be Add Object Type.



This is how we add a new type of object to our bucket. We’re going to be creating a Blog Post type object that will hold all of the content and metadata associated with each of our blog posts.


Once you’ve clicked Add Object Type and input a name into the name field note that the name has been mapped to an API endpoint. These endpoints, which you’ll find on every single object page in Cosmic, are the beauty to the system. This endpoint will return all of your Blog Post type objects.

Make a simple get request to it and you’ll receive a JSON object that contains each of your posts and the metadata associated with each one. If you have 5 posts, it will return 5. 100, it will return 100.

At it’s base every object in a bucket automatically includes a title field and an HTML input field. So right off the bat without adding any metafields you have the basic components of a blog post.

To show more of the power Cosmic has lets add a cover image and description field to our Blog Object. While you’re creating your new object, clicking on the Metafields Template tab at the top will bring up the UI to add these.


Now that we have our object type created we can create an actual object of that type.



Once you’ve clicked Blog Posts you can +Add Blog Post. Inside you’ll see the structure of the Blog Post type object that we specified. All we need to do now is fill in each field with the content that we want.



Once you’ve input your content and hit publish or save draft² you’ll be given an API endpoint. To retrieve just this post you would send a get request to that endpoint and you’ll get your entire pre-formatted post back in JSON form.



Notice our added metafields and, most importantly, that our content remains in it’s HTML format.


That’s all there is to it. All you have to do is build out the front-end of your blog in whatever specs you like, write some content, retrieve your content, and then inject that content wherever you need to.

¹Though you could opt to build out or implement your own editor. Cosmic’s API does include tools for that.

²The API endpoint will not be live if you save as a draft.

Developer, entrepreneur, and writer. You can find me over at philandrews.io where I write about current projects, tech, code, and sometimes life itself.

Article originally appears on https://philandrews.io/blog

","metafields":[{"object_type":"authors","value":"596f7774804e4a0c61000098","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"596f7774804e4a0c61000098","slug":"phil-andrews","title":"Phil Andrews","content":"","metafields":[{"value":"1b623f80-6c95-11e7-95fb-e75796c08fcc-gOyHLnup_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/1b623f80-6c95-11e7-95fb-e75796c08fcc-gOyHLnup_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/1b623f80-6c95-11e7-95fb-e75796c08fcc-gOyHLnup_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-06-27T16:56:57.686Z","created_by":"5357ef811693be2118000001","created":"2017-07-19T15:15:00.525Z","status":"published","modified_at":"2017-07-19T15:15:35.891Z","modified_by":"5716b504e9c686d006000073"}},{"value":"

If you’re a developer and need to open up a new blog for yourself or a client, the idea of using Wordpress probably makes you cringe.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"f6a86480-6c94-11e7-aaee-1fa45137f0d8-1*B0HsQ8_mzLFpNoEEDLYgNg.png","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/f6a86480-6c94-11e7-aaee-1fa45137f0d8-1*B0HsQ8_mzLFpNoEEDLYgNg.png","imgix_url":"https://imgix.cosmicjs.com/f6a86480-6c94-11e7-aaee-1fa45137f0d8-1*B0HsQ8_mzLFpNoEEDLYgNg.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-07-19T15:14:33.536Z","created_by":"5716b504e9c686d006000073","created":"2017-07-19T15:14:33.536Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"596f7774804e4a0c61000098","slug":"phil-andrews","title":"Phil Andrews","content":"","metafields":[{"value":"1b623f80-6c95-11e7-95fb-e75796c08fcc-gOyHLnup_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/1b623f80-6c95-11e7-95fb-e75796c08fcc-gOyHLnup_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/1b623f80-6c95-11e7-95fb-e75796c08fcc-gOyHLnup_400x400.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-06-27T16:56:57.686Z","created_by":"5357ef811693be2118000001","created":"2017-07-19T15:15:00.525Z","status":"published","modified_at":"2017-07-19T15:15:35.891Z","modified_by":"5716b504e9c686d006000073","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/1b623f80-6c95-11e7-95fb-e75796c08fcc-gOyHLnup_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/1b623f80-6c95-11e7-95fb-e75796c08fcc-gOyHLnup_400x400.jpg"}}},"teaser":"

If you’re a developer and need to open up a new blog for yourself or a client, the idea of using Wordpress probably makes you cringe.

","featured_image":{"url":"https://cdn.cosmicjs.com/f6a86480-6c94-11e7-aaee-1fa45137f0d8-1*B0HsQ8_mzLFpNoEEDLYgNg.png","imgix_url":"https://imgix.cosmicjs.com/f6a86480-6c94-11e7-aaee-1fa45137f0d8-1*B0HsQ8_mzLFpNoEEDLYgNg.png"}}},{"_id":"5964c29442669c904c00092e","order":114,"slug":"developer-spotlight-phil-andrews","title":"Developer Spotlight: Phil Andrews","content":"

It's a bird; it's a plane! No, it's just the latest installment of the Cosmic Developer Spotlight Series, where Developers serve as the Hero of our story. We sat down with Phil Andrews, a web application developer and JavaScript evangelist. Check him out on Twitter, Medium and enjoy the Q/A.

How long have you been building software?
I’m relatively new to the game, having started writing software a little less than three years ago. I needed some custom software for my company. The problem was that I didn’t know exactly what I wanted but I knew how expensive it would be\r\nto have someone else build it and then always have to contract them back each time a change was necessary. So I decided to learn how to do it myself.

I started with Swift, then Python, then JavaScript. Haven’t looked backed since. In fact, I’m shutting down my previous company at the end of this month in order to split time between freelancing and personal projects.

What is your preferred development stack?
If it made sense I wouldn’t leave the Apple ecosystem. The tools (Xcode), the language (Swift), they’re just too good to not love. Particularly when they’re paired together. It’s very impressive the power Apple has put behind their\r\nIDE.

But in the real world Node / Express / React are my everyday tools. JavaScript, written everywhere developers want to be. That really should be it’s tagline. For all my backend needs I use AWS. They handle all of my database, server, and storage components. My IDE is Atom. Again, if it worked the same for every language you can’t beat Xcode.

What past projects are you most proud of and why?
The second thing that I built was far too complex for my skillset. A multiplayer iOS trivia app. It came complete with matchmaking, global leaderboards, complicated game logic (It was more like chess and less like Trivia Crack), and almost the entire suite of mobile add-ons from payments to geolocation to push notifications. I was in over my head. Which was great as it forced me to learn an immense amount in a short period of time. The app, landing page, preview video, I wrote everything. It was a big weight off my shoulders when that came to a completion.

Talk a little bit more about your process for building apps in your world and vertical. How has Cosmic sped up your time to market for project delivery deadlines?
If I want to use all of my JavaScript toolbox to put together a beautiful blog, where should I store my content? I’m going to need to retrieve and update large portions of it frequently. Plus it needs to have rich-text editing and preservation capabilities\r\nbuilt-in to the dashboard.

The answer is the place where it takes the fewest lines of code to retrieve your pre-formatted content in a manner that is simple and flexible to work with.

That is a single endpoint that returns a bunch of objects (all of my blog posts) or just one object (one blog post). It’s at the top of every object page in Cosmic. Sending\r\na get request to it will return a JSON response object that includes all of the associated content and metadata. And for me specifically, post body content is delivered in HTML form so it can be directly injected into a page.

That link being at the top of the page is great design. Copy and paste it into any browser and you can see the JSON object instantly. It makes testing and debugging very quick.

Two input boxes below that and there’s a full-powered editor. It toggles between WYSIWYG and straight HTML formatting. That allows you to easily add in custom classes or tags.

 To top it all off Cosmic is platform agnostic. I can write a post once and access it from anywhere. One fetch request, one post. Or, one fetch request, all my posts. I don’t need to incorporate anything else into my project. No add-ons, no downloads, just a simple and effective content delivery system.

It was a few hours before I stumbled on Cosmic. But as soon as I played around with it for a few minutes I stopped searching. For content management of a blog or portfolio I can’t think of a better system. I’m already thinking about how to incorporate it into client projects since the interface is friendly to developers and non-developers.

What are some technologies you are excited about that you are using today, or want to learn more about?
I have bit hook, line, and sinker on React for frontend work. The next big project I’m working on is a dual-platform React Native app so I’ll be wading even deeper into those waters. To me, the really interesting stuff is in the world of AI.\r\nSelf-driving cars captivate me. The idea of not having to drive places will have a profound effect on society. I’m a full proponent of “If it can be automated, it should be automated”.

The personal project I’m working on right now relies heavily on machine learning. The more I incorporate it the more I realize just how far off we are from the AI we are all fictionally familiar with, i.e. Jarvis from Iron Man. The main problem is in processing power. I believe that we won’t get a stellar AI experience until we develop a new kind of CPU. But I digress. We’ll get there. Even just the fraction of AI that we have right now is really useful.

Cosmic Developer Spotlight Series

Developer Spotlight: Jason Price\r\n
Developer Spotlight: Abe Hendricks
Developer Spotlight: Brian Mullis
Developer Spotlight: Micah Walter
Developer Spotlight: Joe Tuson
Developer Spotlight: Coding Dojo
Developer Spotlight: Simple Media
Developer Spotlight: Jon Kalfayan
Developer Spotlight: Jon Bloomer

Cosmic is an API-first cloud-based content management platform that makes it easy to manage applications and content. If you have questions about the Cosmic API, please reach out to us on Twitter or join the community on Slack.

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"value":"

"I started with Swift, then Python, then JavaScript... JavaScript, written everywhere developers want to be."

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"13b24d90-6662-11e7-86e5-bf100f537df6-code.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/13b24d90-6662-11e7-86e5-bf100f537df6-code.jpg","imgix_url":"https://imgix.cosmicjs.com/13b24d90-6662-11e7-86e5-bf100f537df6-code.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-07-11T12:20:36.211Z","created_by":"5716b504e9c686d006000073","created":"2017-07-11T12:20:36.211Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

"I started with Swift, then Python, then JavaScript... JavaScript, written everywhere developers want to be."

","featured_image":{"url":"https://cdn.cosmicjs.com/13b24d90-6662-11e7-86e5-bf100f537df6-code.jpg","imgix_url":"https://imgix.cosmicjs.com/13b24d90-6662-11e7-86e5-bf100f537df6-code.jpg"}}},{"_id":"59637cbc7f3a99b437000d3b","order":115,"slug":"how-to-build-an-emoji-game-using-angularjs","title":"How to Build an Emoji Game Using AngularJS","content":"

In this tutorial I'm going to show you how to create a "Emoji" game using a little bit of Node, and Cosmic. For the sake of understanding how to consume Restful API’s, this tutorial will show how to make simple AJAX requests\r\nto the Cosmic API in order to retrieve, update, and delete data in our Cosmic Buckets. Let's get started.

TL;DR

Download the GitHub repo.
Check out the demo.

Getting Started:

First, let’s make a new directory to build our project in and lets also make a package.json file.

mkdir emoji-app
emoji-app$ touch package.json

Now, in your package.json, copy and paste the code below:

//emoji-app/package.json\r\n{\r\n  "name": "emoji-app",\r\n  "version": "1.0.0",\r\n  "main": "app-server.js",\r\n  "engines": {\r\n    "node": "4.1.2",\r\n    "npm": "3.5.2"\r\n  },\r\n  "description": "",\r\n  "dependencies": {\r\n    "body-parser": "^1.17.2",\r\n    "bower": "^1.7.7",\r\n    "buffer-to-vinyl": "^1.1.0",\r\n    "express": "^4.13.3",\r\n    "gulp": "^3.9.1",\r\n    "gulp-autoprefixer": "^3.1.0",\r\n    "gulp-concat": "^2.6.0",\r\n    "gulp-concat-css": "^2.2.0",\r\n    "gulp-env": "^0.4.0",\r\n    "gulp-minify-css": "^1.2.4",\r\n    "gulp-ng-config": "^1.4.0",\r\n    "gulp-npm-script-sync": "^1.1.0",\r\n    "gulp-webserver": "^0.9.1",\r\n    "http-server": "^0.9.0",\r\n    "stripe": "^4.22.0",\r\n    "wiredep": "^3.0.0"\r\n  },\r\n  "scripts": {\r\n    "postinstall": "bower install && gulp config && gulp js",\r\n    "start": "npm run production",\r\n    "production": "node app-server.js",\r\n    "gulp": "gulp"\r\n  },\r\n  "author": "",\r\n  "license": "ISC",\r\n  "devDependencies": {\r\n    "gulp-npm-script-sync": "^1.1.0",\r\n    "gulp-remote-src": "^0.4.2"\r\n  }\r\n}/\r\n

Second, let’s make a bower.json file.

emoji-app$ touch bower.json

Now, in your bower.json, copy and paste the code below:

//emoji-app/bower.json\r\n{\r\n  "name": "emoji-app",\r\n  "description": "Emoji App",\r\n  "version": "0.0.0",\r\n  "homepage": "https://github.com/kutsaniuk/emoji-app",\r\n  "license": "MIT",\r\n  "private": true,\r\n  "dependencies": {\r\n    "angular": "~1.5.x",\r\n    "angular-mocks": "~1.5.x",\r\n    "angular-bootstrap": "~1.1.x",\r\n    "angular-cookies": "~1.5.x",\r\n    "angular-route": "~1.5.x",\r\n    "angular-ui-router": "0.2.x",\r\n    "angular-resource": "1.5.x",\r\n    "angular-animate": "~1.5.x",\r\n    "ng-dialog": "0.6.1",\r\n    "bootstrap": "3.3.x",\r\n    "cr-acl": "",\r\n    "angular-chosen-localytics": "*",\r\n    "bootstrap-chosen": "*",\r\n    "ng-flow": "^2.7.4",\r\n    "angular-mask": "*",\r\n    "checklist-model": "0.9.0",\r\n    "angular-ui-notification": "^0.2.0",\r\n    "angular-ui-calendar": "^1.0.2",\r\n    "angular-ui-switch": "^0.1.1",\r\n    "ng-scrollbars": "^0.0.11",\r\n    "jquery.scrollbar": "*",\r\n    "angular-flash-alert": "^2.4.0",\r\n    "components-font-awesome": "^4.7.0",\r\n    "angular-loading-bar": "^0.9.0",\r\n    "angular-environment": "^1.0.8",\r\n    "angular-emoji-popup": "",\r\n    "angular-dragdrop": "",\r\n    "angular-sanitize": "1.5.*",\r\n    "angular-drag-and-drop-directives": "",\r\n    "jquery-ui-touch-punch": "",\r\n    "angular-touch":"1.5.*",\r\n    "textAngular":"1.5.*"\r\n  },\r\n  "resolutions": {\r\n    "angular": "~1.5.x"\r\n  },\r\n  "devDependencies": {\r\n    "cr-acl": "^0.5.0"\r\n  }\r\n}\r\n

Config app server:

emoji-app$ touch app-server.js
//events-app/app-server.js\r\nvar express = require('express');\r\nvar bodyParser = require('body-parser');\r\nvar app = express();\r\napp.set('port', process.env.PORT || 3000)\r\napp.use(express.static(__dirname))\r\napp.use(bodyParser.json())\r\nvar http = require('http').Server(app)\r\n// Route\r\napp.get('/', (req, res) => {\r\n  res.sendFile(__dirname + '/index.html');\r\n})\r\nhttp.listen(app.get('port'), () => {\r\n  console.log('Emoji App listening on ' + app.get('port'))\r\n})\r\n

What we're installing and why:

  1. We're going to use the AngularJS framework to build Single-page application
  2. We're installing angular-ui-router for create multi views.
  3. We are going to use gulp for build all js and css files into one file.

Building our app:

Now we're going to build out our file structure a bit more so that we can organize our angular modules and js files. This is what our emoji-app directory should look like:

emoji-app\r\n|----app\r\n|       |----auth\r\n|                 |----auth.ctrl.js\r\n|                 |----auth.service.js\r\n|       |----config\r\n|                 |----config.js\r\n|       |----watch\r\n|                 |----profile\r\n|                           |----watch.profile.ctrl.js\r\n|                           |----watch.profile.mdl.js\r\n|                 |----watch.ctrl.js\r\n|                 |----watch.mdl.js\r\n|                 |----watch.service.js\r\n|       |----admin\r\n|                 |----authors\r\n|                           |----add\r\n|                                   |----admin.authors.add.ctrl.js\r\n|                                   |----admin.authors.add.mdl.js\r\n|                           |----edit\r\n|                                   |----admin.authors.edit.ctrl.js\r\n|                                   |----admin.authors.edit.mdl.js\r\n|                           |----admin.authors.ctrl.js\r\n|                           |----admin.authors.mdl.js\r\n|                           |----admin.authors.service.js\r\n|                 |----quotes\r\n|                           |----add\r\n|                                   |----admin.quotes.add.ctrl.js\r\n|                                   |----admin.quotes.add.mdl.js\r\n|                           |----edit\r\n|                                   |----admin.quotes.edit.ctrl.js\r\n|                                   |----admin.quotes.edit.mdl.js\r\n|                           |----admin.quotes.ctrl.js\r\n|                           |----admin.quotes.mdl.js\r\n|                           |----admin.quotes.service.js\r\n|                 |----admin.ctrl.js\r\n|                 |----admin.mdl.js\r\n|       |----author\r\n|                 |----author.ctrl.js\r\n|                 |----author.mdl.js\r\n|       |----emoji\r\n|                 |----emoji.ctrl.js\r\n|                 |----emoji.mdl.js\r\n|                 |----emoji.service.js\r\n|       |----user\r\n|                 |----user.service.js\r\n|       |----main.mdl.js\r\n|----dist\r\n|       |----css\r\n|       |----img\r\n|       |----js\r\n|----css\r\n|----views\r\n|----resources\r\n|----gulpfile.js\r\n|----app-server.js\r\n|----bower.json\r\n|----package.json\r\n

Now we we will set up our index.html. Copy and paste the following code into your index.html file:

<!DOCTYPE html>\r\n<html lang="en" ng-app="main">\r\n<head>\r\n    <meta charset="utf-8">\r\n    <meta http-equiv="X-UA-Compatible" content="IE=edge">\r\n    <meta name="viewport" content="width=device-width, initial-scale=1">\r\n    <meta name="description" content="">\r\n    <meta name="author" content="">\r\n\r\n    <title>Emoji App</title>\r\n\r\n    <!-- bower:css -->\r\n    <!-- endbower -->\r\n\r\n    <!-- Bootstrap Core CSS -->\r\n    <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">\r\n\r\n    <!-- Custom CSS -->\r\n\r\n    <link href="dist/css/main.min.css" rel="stylesheet">\r\n\r\n\r\n    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->\r\n    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->\r\n    <!--[if lt IE 9]>\r\n    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>\r\n    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>\r\n    <![endif]-->\r\n\r\n</head>\r\n<body>\r\n\r\n<div ui-view></div>\r\n\r\n<!-- bower:js -->\r\n<!-- endbower -->\r\n\r\n<script src="dist/js/main.js"></script>\r\n</body>\r\n</html>\r\n

Here, we are going to target our "root" view to place our angular modules in later. The main.js file located in our dist directory is what our gulpfile.js file will spit out after bundling all of our angular modules Now, set up our gulpfile.js\r\nfile to bundle all of our js files and export that bundle file to our dist directory. Copy the following code into your gulpfile.js file:

//emoji-app/gulpfile.js\r\n'use strict';\r\n\r\nvar gulp = require('gulp'),\r\n    webserver = require('gulp-webserver'),\r\n    minifyCSS = require('gulp-minify-css'),\r\n    concat = require('gulp-concat'),\r\n    wiredep = require('wiredep').stream,\r\n    gulpNgConfig = require('gulp-ng-config'),\r\n    autoprefixer = require('gulp-autoprefixer'),\r\n    b2v = require('buffer-to-vinyl'),\r\n    sync = require('gulp-npm-script-sync');\r\n\r\nsync(gulp);\r\n\r\ngulp.task('css', function () {\r\n  return gulp.src('css/**/*.css')\r\n    .pipe(minifyCSS())\r\n    .pipe(concat('main.min.css'))\r\n    .pipe(autoprefixer())\r\n    .pipe(gulp.dest('dist/css'));\r\n});\r\n\r\ngulp.task('js', function() {\r\n    return gulp.src('app/**/**/*.js')\r\n        .pipe(concat('main.js'))\r\n        .pipe(gulp.dest('dist/js/'));\r\n});\r\n\r\ngulp.task('config', function () {\r\n    const json = JSON.stringify({\r\n        BUCKET_SLUG: process.env.COSMIC_BUCKET,\r\n        MEDIA_URL: 'https://api.cosmicjs.com/v1/' + process.env.COSMIC_BUCKET + '/media',\r\n        URL: 'https://api.cosmicjs.com/v1/',\r\n        READ_KEY: process.env.COSMIC_READ_KEY || '',\r\n        WRITE_KEY: process.env.COSMIC_WRITE_KEY || '',\r\n        DEFAULT_IMAGE: process.env.DEFAULT_IMAGE || ''\r\n    });\r\n    return b2v.stream(new Buffer(json), 'config.js')\r\n        .pipe(gulpNgConfig('config'))\r\n        .pipe(gulp.dest('app/config'));\r\n});\r\n\r\ngulp.task('default', function () {\r\n  gulp.watch('css/**/*.css', ['css']);\r\n  gulp.watch('app/**/**/*.js', ['js']);\r\n  gulp.watch('bower.json', ['bower']);\r\n});\r\n\r\ngulp.task('bower', function () {\r\n  gulp.src('index.html')\r\n    .pipe(wiredep({\r\n      directory: 'bower_components'\r\n    }))\r\n    .pipe(gulp.dest(''));\r\n});\r\n\r\n

After that we can create main module. Copy and paste the following code into your main.mdl.js file:

(function () {\r\n    'use strict';\r\n\r\n    angular\r\n        .module('main', [\r\n            'ui.router',\r\n            'ui.bootstrap',\r\n            'ngMask',\r\n            'ngCookies',\r\n            'ngRoute',\r\n            'ngDialog',\r\n            'cr.acl',\r\n            'ui-notification',\r\n            'ngFlash',\r\n            'ngAnimate',\r\n            'textAngular',\r\n            'flow',\r\n            'angular-loading-bar',\r\n            'ngDragDrop',\r\n            'ngEmoticons',\r\n            'ngSanitize',\r\n            'ngTouch',\r\n\r\n            'emoji',\r\n            'admin',\r\n            'author',\r\n\r\n            'config'\r\n        ])\r\n        .config(config)\r\n        .run(run);\r\n\r\n    config.$inject = ['$stateProvider', '$urlRouterProvider', 'cfpLoadingBarProvider', 'NotificationProvider'];\r\n    function config($stateProvider, $urlRouterProvider, cfpLoadingBarProvider, NotificationProvider) {\r\n        cfpLoadingBarProvider.includeSpinner = false;\r\n\r\n        NotificationProvider.setOptions({\r\n            startTop: 25,\r\n            startRight: 25,\r\n            verticalSpacing: 20,\r\n            horizontalSpacing: 20,\r\n            positionX: 'right',\r\n            positionY: 'bottom'\r\n        });\r\n\r\n        $urlRouterProvider.otherwise(function ($injector) {\r\n            var $state = $injector.get("$state");\r\n            var $location = $injector.get("$location");\r\n            var crAcl = $injector.get("crAcl");\r\n\r\n            var state = "";\r\n\r\n            switch (crAcl.getRole()) {\r\n                case 'ROLE_ADMIN':\r\n                    state = 'admin.authors';\r\n                    break;\r\n                default : state = 'main.emoji';\r\n            }\r\n\r\n            if (state) $state.go(state);\r\n            else $location.path('/');\r\n        });\r\n\r\n        $stateProvider\r\n            .state('main', {\r\n                url: '/',\r\n                abstract: true,\r\n                templateUrl: '../views/main.html',\r\n                // controller: 'CartCtrl as cart',\r\n                data: {\r\n                    is_granted: ['ROLE_GUEST']\r\n                }\r\n            })\r\n            .state('blog', {\r\n                url: '/blog',\r\n                templateUrl: '../blog.html'\r\n            })\r\n            .state('auth', {\r\n                url: '/login',\r\n                templateUrl: '../views/auth/login.html',\r\n                controller: 'AuthCtrl as auth',\r\n                onEnter: ['AuthService', 'crAcl', function(AuthService, crAcl) {\r\n                    AuthService.clearCredentials();\r\n                    crAcl.setRole();\r\n                }],\r\n                data: {\r\n                    is_granted: ['ROLE_GUEST']\r\n                }\r\n            });\r\n    }\r\n\r\n    run.$inject = ['$rootScope', '$cookieStore', '$state', 'crAcl'];\r\n    function run($rootScope, $cookieStore, $state, crAcl) {\r\n        // keep user logged in after page refresh\r\n        $rootScope.globals = $cookieStore.get('globals') || {};\r\n\r\n        crAcl\r\n            .setInheritanceRoles({\r\n                'ROLE_ADMIN': ['ROLE_ADMIN', 'ROLE_GUEST'],\r\n                'ROLE_GUEST': ['ROLE_GUEST']\r\n            });\r\n\r\n        crAcl\r\n            .setRedirect('main.emoji');\r\n\r\n        if ($rootScope.globals.currentUser) {\r\n            crAcl.setRole($rootScope.globals.currentUser.metadata.role);\r\n            // $state.go('admin.watches');\r\n        }\r\n        else {\r\n            crAcl.setRole();\r\n        }\r\n\r\n    }\r\n    angular.module('main')\r\n        .directive('compile', ['$compile', function ($compile) {\r\n            return function (scope, element, attrs) {\r\n                scope.$watch(\r\n                    function (scope) {\r\n                        // watch the 'compile' expression for changes\r\n                        return scope.$eval(attrs.compile);\r\n                    },\r\n                    function (value) {\r\n                        element.html(value);\r\n\r\n                        $compile(element.contents())(scope);\r\n                    }\r\n                );\r\n            };\r\n        }]);\r\n})();\r\n

Now we we will set up our Auth Controller. Copy and paste the following code into your auth.ctrl.js file:

(function () {\r\n    'use strict';\r\n\r\n    angular\r\n        .module('main')\r\n        .controller('AuthCtrl', AuthCtrl);\r\n\r\n    function AuthCtrl(crAcl, $state, AuthService, Flash, $log) {\r\n        var vm = this;\r\n\r\n        vm.login = login;\r\n\r\n        vm.loginForm = null;\r\n\r\n        vm.credentials = {};\r\n        vm.user = {};\r\n\r\n        function login(credentials) {\r\n            function success(response) {\r\n                function success(response) {\r\n                    if (response.data.status !== 'empty') {\r\n                        var currentUser = response.data.objects[0];\r\n\r\n                        crAcl.setRole(currentUser.metadata.role);\r\n                        AuthService.setCredentials(currentUser);\r\n                        $state.go('admin.authors');\r\n                    }\r\n                    else\r\n                        Flash.create('danger', 'Incorrect username or password');\r\n                }\r\n\r\n                function failed(response) {\r\n                    $log.error(response);\r\n                }\r\n\r\n                if (response.data.status !== 'empty')\r\n                    AuthService\r\n                        .checkPassword(credentials)\r\n                        .then(success, failed);\r\n                else\r\n                    Flash.create('danger', 'Incorrect username or password');\r\n\r\n                $log.info(response);\r\n            }\r\n\r\n            function failed(response) {\r\n                $log.error(response);\r\n            }\r\n\r\n            if (vm.loginForm.$valid)\r\n                AuthService\r\n                    .checkUsername(credentials)\r\n                    .then(success, failed);\r\n        }\r\n\r\n    }\r\n})();\r\n

Create Auth Service, copy and paste the code below:

(function () {\r\n    'use strict';\r\n\r\n    angular\r\n        .module('main')\r\n        .service('AuthService', function ($http,\r\n                                          $cookieStore,\r\n                                          $q,\r\n                                          $rootScope,\r\n                                          URL, BUCKET_SLUG, READ_KEY, WRITE_KEY) {\r\n            var authService = this;\r\n            $http.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';\r\n\r\n            authService.checkUsername = function (credentials) {\r\n                return $http.get(URL + BUCKET_SLUG + '/object-type/users/search', {\r\n                    params: {\r\n                        metafield_key: 'email',\r\n                        metafield_value_has: credentials.email,\r\n                        limit: 1,\r\n                        read_key: READ_KEY\r\n                    }\r\n                });\r\n            };\r\n            authService.checkPassword = function (credentials) {\r\n                return $http.get(URL + BUCKET_SLUG + '/object-type/users/search', {\r\n                    ignoreLoadingBar: true,\r\n                    params: {\r\n                        metafield_key: 'password',\r\n                        metafield_value: credentials.password,\r\n                        limit: 1,\r\n                        read_key: READ_KEY\r\n                    }\r\n                });\r\n            };\r\n            authService.setCredentials = function (user) {\r\n                $rootScope.globals = {\r\n                    currentUser: user\r\n                };\r\n\r\n                $cookieStore.put('globals', $rootScope.globals);\r\n            };\r\n            authService.clearCredentials = function () {\r\n                var deferred = $q.defer();\r\n                $cookieStore.remove('globals');\r\n\r\n                if (!$cookieStore.get('globals')) {\r\n                    $rootScope.globals = {};\r\n                    deferred.resolve('Credentials clear success');\r\n                } else {\r\n                    deferred.reject('Can\\'t clear credentials');\r\n                }\r\n\r\n                return deferred.promise;\r\n            };\r\n        });\r\n})();\r\n

What's going on here:

  1. We are using the ui-router for config routes.
  2. We created Auth Service for our asynchronous calls to our Cosmic API.
  3. We created Auth Controller for checking credentials.

Create User Service for get and update User, copy and paste the code below:

(function () {\r\n    'use strict';\r\n\r\n    angular\r\n        .module('main')\r\n        .service('UserService', function ($http,\r\n                                          $cookieStore,\r\n                                          $q,\r\n                                          $rootScope,\r\n                                          URL, BUCKET_SLUG, READ_KEY, WRITE_KEY) {\r\n            $http.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';\r\n\r\n            this.getCurrentUser = function (ignoreLoadingBar) {\r\n                return $http.get(URL + BUCKET_SLUG + '/object/' + $rootScope.globals.currentUser.slug, {\r\n                    ignoreLoadingBar: ignoreLoadingBar,\r\n                    params: {\r\n                        read_key: READ_KEY\r\n                    }\r\n                });\r\n            };\r\n            this.getUser = function (slug, ignoreLoadingBar) {\r\n                return $http.get(URL + BUCKET_SLUG + '/object/' + slug, {\r\n                    ignoreLoadingBar: ignoreLoadingBar,\r\n                    params: {\r\n                        read_key: READ_KEY\r\n                    }\r\n                });\r\n            };\r\n            this.updateUser = function (user) {\r\n                user.write_key = WRITE_KEY;\r\n\r\n                return $http.put(URL + BUCKET_SLUG + '/edit-object', user, {\r\n                    ignoreLoadingBar: false\r\n                });\r\n            };\r\n\r\n        });\r\n})();\r\n

Create Emoji Service for get emoji from words, copy and paste the code below:

(function () {\r\n    'use strict';\r\n\r\n    angular\r\n        .module('main')\r\n        .service('EmojiService', function ($http) {\r\n\r\n            var that = this;\r\n\r\n            that.Quote = function (text, author, slug) {\r\n                this.text = text;\r\n                this.author = author;\r\n                this.slug = slug;\r\n            };\r\n\r\n            that.Emoji = function (code, position) {\r\n                this.code = code;\r\n                this.position = position;\r\n            };\r\n\r\n            that.Container = function (type, item) {\r\n                this.type = type;\r\n                this.item = item;\r\n            };\r\n\r\n            that.Random = {\r\n                randNumOld: 0,\r\n                getRandomInt: function (min, max) {\r\n                    var randNum = Math.floor(Math.random() * (max - min + 1)) + min;\r\n                    if (randNum == this.randNumOld) return this.getRandomInt(min, max);\r\n                    this.randNumOld = randNum;\r\n\r\n                    return randNum;\r\n                }\r\n            };\r\n\r\n            this.getEmojisFromWords = function (quote) {\r\n                var words = [];\r\n                var word = '';\r\n\r\n                quote += " ";\r\n\r\n                for (var i = 0; i < quote.length; i++) {\r\n                    if (quote[i] !== ' ') word += quote[i];\r\n                    else {\r\n                        words.push(word);\r\n                        word = '';\r\n                    }\r\n                }\r\n\r\n                for (var j = 0; j < words.length; j++) {\r\n                    if (getMeAnEmoji(words[j]) !== "") words[j] = ":" + getMeAnEmoji(words[j]) + ":";\r\n                }\r\n\r\n                console.log(words);\r\n                return words;\r\n            };\r\n\r\n            this.getEmoji = function (quote, emojis, containers, checkAnswers) {\r\n                var i = 0;\r\n                var position = 0;\r\n                var result;\r\n                var word = '';\r\n                var isEmoji = new RegExp(":");\r\n                var _quote = quote;\r\n\r\n                while (i < quote.text.length) {\r\n                    if (isEmoji.test(quote.text[i])) {\r\n                        result = ( /\\:(\\w+)\\:/.exec(quote.text) )[1];\r\n                        emojis.push(new that.Emoji(":" + result + ":", i));\r\n                        containers.push(new that.Container('emoji', []));\r\n                        checkAnswers.push(new that.Emoji(":" + result + ":", position));\r\n\r\n                        quote.text[i] = quote.text[i].replace(':' + result + ':', '_emoji_');\r\n\r\n                        position++;\r\n                    }\r\n                    else {\r\n                        containers.push(new that.Container('word', quote.text[i]));\r\n                    }\r\n                    word = '';\r\n                    i++;\r\n                }\r\n\r\n                $http.get('/resources/emojis.json')\r\n                    .success(function (data) {\r\n                        for (var j = 0; j < 3; j++) {\r\n                            emojis.push(new that.Emoji(":" + data[parseInt(Math.random() * data.length)] + ":"));\r\n                        }\r\n                    });\r\n\r\n                return _quote;\r\n            };\r\n\r\n        });\r\n})();\r\n

Create Emoji Controller for get quotes and checking results, copy and paste the code below:

(function () {\r\n    'use strict';\r\n\r\n    angular\r\n        .module('main')\r\n        .controller('EmojiCtrl', EmojiCtrl);\r\n\r\n    function EmojiCtrl($scope, DEFAULT_IMAGE, EmojiService, AdminQuotesService, $log) {\r\n        var vm = this;\r\n\r\n        vm.checkAnswers = [];\r\n        vm.quote = {};\r\n        vm.quotes = [];\r\n        vm.emojis = [];\r\n        vm.containers = [];\r\n        vm.win = false;\r\n\r\n        vm.DEFAULT_IMAGE = DEFAULT_IMAGE;\r\n\r\n        var random = EmojiService.Random;\r\n        var getEmojisFromWords = EmojiService.getEmojisFromWords;\r\n        var getEmoji = EmojiService.getEmoji;\r\n        var Quote = EmojiService.Quote;\r\n        var Emoji = EmojiService.Emoji;\r\n\r\n        var getRandomQuote = _getRandomQuote;\r\n        var getUserAnswers = _getUserAnswers;\r\n\r\n        vm.getUserAnswerLength = getUserAnswerLength;\r\n        vm.nextQuote = nextQuote;\r\n        vm.checkAnswer = checkAnswer;\r\n        vm.getUserAnswerLength = getUserAnswerLength;\r\n\r\n        $scope.getOptionsContainer = getOptionsContainer;\r\n\r\n        function _getRandomQuote(quotes) {\r\n            var _random = random.getRandomInt(0, quotes.length - 1);\r\n            console.log(quotes[_random]);\r\n            return quotes[_random].slug;\r\n        }\r\n\r\n        function _getUserAnswers(containers) {\r\n            var userAnswers = [];\r\n            var position = 0;\r\n\r\n            for (var i = 0; i < containers.length; i++) {\r\n\r\n                if (!Array.isArray(containers[i].item)) continue;\r\n                userAnswers.push(new Emoji(containers[i].item[0].code, position));\r\n                position++;\r\n\r\n            }\r\n\r\n            return userAnswers;\r\n        }\r\n\r\n        function getUserAnswerLength() {\r\n            var userAnswersLength = 0;\r\n\r\n            for (var k = 0; k < vm.containers.length; k++) {\r\n                if (!Array.isArray(vm.containers[k].item)) continue;\r\n                if (vm.containers[k].item.length !== 0) userAnswersLength += 1;\r\n            }\r\n            return userAnswersLength;\r\n        }\r\n\r\n        function nextQuote() {\r\n            getQuote(getRandomQuote(vm.quotes));\r\n        }\r\n\r\n        function checkAnswer() {\r\n            var result = [];\r\n            var position = 0;\r\n\r\n            function in_array(value, array) {\r\n                for (var i = 0; i < array.length; i++) {\r\n                    if (array[i] == value) return true;\r\n                }\r\n                return false;\r\n            }\r\n\r\n            if (vm.getUserAnswerLength() === vm.checkAnswers.length) {\r\n                var userAnswers = getUserAnswers(vm.containers);\r\n                for (var j = 0; j < userAnswers.length; j++) {\r\n                    vm.checkAnswers[j].code === userAnswers[j].code ? result.push(true) : result.push(false);\r\n                }\r\n\r\n                console.log(result);\r\n\r\n                for (var i = 0; i < vm.containers.length; i++) {\r\n\r\n                    if (!Array.isArray(vm.containers[i].item)) continue;\r\n                    if (!result[position]) {\r\n                        vm.emojis[vm.containers[i].item[0].jqyoui_pos] = new Emoji(vm.containers[i].item[0].code, i);\r\n                        vm.containers[i].item.splice(0, 1);\r\n                    }\r\n                    position++;\r\n\r\n                }\r\n\r\n                console.log(vm.emojis);\r\n                !in_array(false, result) ? vm.win = true : vm.win = false;\r\n            }\r\n        }\r\n\r\n        function getOptionsContainer(container) {\r\n            return {\r\n                accept: function (dragEl) {\r\n                    if (container.length >= 1) {\r\n                        return false;\r\n                    } else {\r\n                        return true;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n\r\n        function getQuotes() {\r\n            function success(response) {\r\n                response.data.objects.forEach(function (quote) {\r\n                    vm.quotes.push(\r\n                        new Quote(\r\n                            getEmojisFromWords(quote.metadata.text),\r\n                            quote.metadata.author,\r\n                            quote.slug\r\n                        )\r\n                    );\r\n                });\r\n                $log.info(vm.quotes);\r\n\r\n                getQuote(getRandomQuote(vm.quotes));\r\n\r\n            }\r\n\r\n            function failed(response) {\r\n                $log.error(response);\r\n            }\r\n\r\n            AdminQuotesService\r\n                .getQuotes(true)\r\n                .then(success, failed);\r\n        }\r\n\r\n        function getQuote(slug) {\r\n            function success(response) {\r\n                vm.quote = new Quote(\r\n                    getEmojisFromWords(response.data.object.metadata.text),\r\n                    response.data.object.metadata.author,\r\n                    response.data.object.slug\r\n                );\r\n\r\n                vm.emojis = [];\r\n                vm.containers = [];\r\n                vm.checkAnswers = [];\r\n                vm.win = false;\r\n\r\n                getEmoji(\r\n                    vm.quote,\r\n                    vm.emojis,\r\n                    vm.containers,\r\n                    vm.checkAnswers\r\n                );\r\n\r\n                vm.emojis.sort(function (a, b) {\r\n                    return a.code.charCodeAt(1) - b.code.charCodeAt(2)\r\n                });\r\n\r\n                vm.emojis.reverse();\r\n                console.log('emojis', vm.emojis);\r\n            }\r\n\r\n            function failed(response) {\r\n                $log.error(response);\r\n            }\r\n\r\n            AdminQuotesService\r\n                .getQuoteBySlug(slug)\r\n                .then(success, failed);\r\n        }\r\n\r\n        getQuotes();\r\n\r\n        $('.emoji').draggable(); // FOR TouchScreen\r\n    }\r\n})();\r\n

Create Emoji Module, copy and paste the code below:

(function () {\r\n    'use strict';\r\n\r\n    angular\r\n        .module('emoji', [])\r\n        .config(config);\r\n\r\n    config.$inject = ['$stateProvider', '$urlRouterProvider'];\r\n    function config($stateProvider, $urlRouterProvider) {\r\n\r\n        $stateProvider\r\n            .state('main.emoji', {\r\n                url: '',\r\n                templateUrl: '../views/emoji/emoji.html',\r\n                controller: 'EmojiCtrl as emojiCtrl'\r\n            });\r\n    }\r\n})();\r\n

What's going on here:

  1. We created Emoji Service for get emoji from words.
  2. We created Emoji Controller for drag and drop emoji, get quotes and checking results.
  3. We created Emoji Module.

Create Author Controller for getting information of author, copy and paste the code below:

(function () {\r\n    'use strict';\r\n\r\n    angular\r\n        .module('main')\r\n        .controller('AuthorCtrl', AuthorCtrl);\r\n\r\n    function AuthorCtrl($stateParams, $scope, DEFAULT_IMAGE, AdminAuthorsService, Flash, $log) {\r\n        var vm = this;\r\n\r\n        vm.author = {};\r\n\r\n        vm.DEFAULT_IMAGE = DEFAULT_IMAGE;\r\n\r\n        getAuthor($stateParams.slug);\r\n\r\n        function getAuthor(slug) {\r\n            function success(response) {\r\n                response.data.object.metadata.born = new Date(response.data.object.metafields[2].value);\r\n                response.data.object.metadata.died = new Date(response.data.object.metafields[3].value);\r\n                vm.author = response.data.object;\r\n            }\r\n\r\n            function failed(response) {\r\n                $log.error(response);\r\n            }\r\n\r\n            AdminAuthorsService\r\n                .getAuthorBySlug(slug)\r\n                .then(success, failed);\r\n        }\r\n    }\r\n})();

Create Author Module, copy and paste the code below:

(function () {\r\n    'use strict';\r\n\r\n    angular\r\n        .module('author', [])\r\n        .config(config);\r\n\r\n    config.$inject = ['$stateProvider', '$urlRouterProvider'];\r\n    function config($stateProvider, $urlRouterProvider) {\r\n\r\n        $stateProvider\r\n            .state('main.author', {\r\n                url: 'author/:slug',\r\n                templateUrl: '../views/author/author.html',\r\n                controller: 'AuthorCtrl as vm',\r\n                data: {\r\n                    is_granted: ['ROLE_GUEST']\r\n                }\r\n            });\r\n    }\r\n})();

What's going on here:

  1. We can see information about authors.

Conclusion:

We were able to consume the Cosmic API with our actions and dispatcher functions. I hope you enjoyed this tutorial as much as I did, if you have any questions reach out to us on Twitter and join our community on Slack.

","metafields":[{"object_type":"authors","value":"5914999aa57d9d4b390034d5","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5914999aa57d9d4b390034d5","slug":"dmytro-kutsaniuk","title":"Dmytro Kutsaniuk","content":"","metafields":[{"value":"e265ea60-366b-11e7-9161-61cd2f0acd2a-kutsaniuk.jpeg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e265ea60-366b-11e7-9161-61cd2f0acd2a-kutsaniuk.jpeg","imgix_url":"https://imgix.cosmicjs.com/e265ea60-366b-11e7-9161-61cd2f0acd2a-kutsaniuk.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-05-11T17:04:26.061Z","created_by":"5357ef811693be2118000001","created":"2017-05-11T17:04:26.061Z","status":"published"}},{"value":"

In this tutorial I'm going to show you how to create a "Emoji" app using a little bit of Node, and Cosmic. For the sake of understanding how to consume Restful API’s, this tutorial will show how to make simple AJAX requests to the Cosmic API in order to retrieve, update, and delete data in our Cosmic buckets. Let's get started.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"199c1a20-6571-11e7-9c7d-5db69f32654d-angular-emoji-app.png","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/199c1a20-6571-11e7-9c7d-5db69f32654d-angular-emoji-app.png","imgix_url":"https://imgix.cosmicjs.com/199c1a20-6571-11e7-9c7d-5db69f32654d-angular-emoji-app.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-07-10T13:10:20.023Z","created_by":"5357ef811693be2118000001","created":"2017-07-10T13:10:20.023Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"5914999aa57d9d4b390034d5","slug":"dmytro-kutsaniuk","title":"Dmytro Kutsaniuk","content":"","metafields":[{"value":"e265ea60-366b-11e7-9161-61cd2f0acd2a-kutsaniuk.jpeg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e265ea60-366b-11e7-9161-61cd2f0acd2a-kutsaniuk.jpeg","imgix_url":"https://imgix.cosmicjs.com/e265ea60-366b-11e7-9161-61cd2f0acd2a-kutsaniuk.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-05-11T17:04:26.061Z","created_by":"5357ef811693be2118000001","created":"2017-05-11T17:04:26.061Z","status":"published","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e265ea60-366b-11e7-9161-61cd2f0acd2a-kutsaniuk.jpeg","imgix_url":"https://imgix.cosmicjs.com/e265ea60-366b-11e7-9161-61cd2f0acd2a-kutsaniuk.jpeg"}}},"teaser":"

In this tutorial I'm going to show you how to create a "Emoji" app using a little bit of Node, and Cosmic. For the sake of understanding how to consume Restful API’s, this tutorial will show how to make simple AJAX requests to the Cosmic API in order to retrieve, update, and delete data in our Cosmic buckets. Let's get started.

","featured_image":{"url":"https://cdn.cosmicjs.com/199c1a20-6571-11e7-9c7d-5db69f32654d-angular-emoji-app.png","imgix_url":"https://imgix.cosmicjs.com/199c1a20-6571-11e7-9c7d-5db69f32654d-angular-emoji-app.png"}}},{"_id":"595e451d64ba08b84e0025b6","order":116,"slug":"developer-spotlight-jason-price","title":"Developer Spotlight: Jason Price","content":"

Dust off your cape, because a new Developer Hero joins us in our latest installment of the Cosmic Developer Spotlight Series. We sat down with Jason Price, a  full stack web application developer and JavaScript enthusiast. Jason lives and works at Squirrels, a product-centric dev shop that produces "Apps to go Nuts for." Check him out on Twitter, and enjoy the Q/A.

How long have you been building software?
I’ve been building websites since the early days of just flat HTML sites. I got into PHP when I was trying to make a website for the t-shirt printing business that I was running out of my basement (around 2006). I kept working to make my website better and started spending less time actually printing shirts. So while my website was sweet, my business suffered. One day I was looking for freelance work and came across a job opening as a web application developer. I was hired on the spot and shut the t-shirt business down the same day. Been doing web apps ever since.

What is your preferred development stack?
I am a full stack JavaScript developer. I have a lot of different server setups but my favorite is Dokku on a Digital Ocean droplet with a Node app running Express. I have an app running FeathersJS out there too and I’m starting to use that more and more. As for the client, I’m still running a lot of Backbone apps but I’m starting to move those over to React. React and Redux are just awesome. As for the data, I use a mixture of MongoDB / Mongoose, Firebase, and Cosmic.

What past projects are you most proud of and why?
My favorite project so far has been GoDitto. It’s a really cool app that lets you mirror your screen instantly in any room that has an Apple TV or Chromecast. The way it works is you setup your receivers as rooms in the admin console. Once a room is setup, it’s given a code that you can use to get a one time download of an application that knows to connect your screen to that receiver. There is A LOT going on under the hood and almost all of it is handled by Node and JavaScript.

Talk about building apps in your world.  Has Cosmic helped your development cycle?
I’d rather use Cosmic over other cloud-based database solutions or running my own database server. In some situations, you just need somewhere to put the data that someone who is kinda savvy can update. I can just set someone up as a user in my Cosmic Bucket and let them add and edit all the data they want. If they need more hand-holding, I have the freedom to build out a User Interface for specific Admin functions. If no one needs access, then they don’t get it. I can make my calls to get the data from the client or the server which makes it great for universal apps. I’ve honestly wanted to build something like Cosmic for years because I’ve always needed it. When I stumbled across a Reddit post saying something like “cloud-based CMS”, I was overjoyed.

What technologies are you excited about that you are using today or want to learn more about?
I’m looking forward to the advancement of things like isomorphic React apps, AWS Lambda, StdLib, and some various microservice architectures that are really changing the game with how a website or web app get data to the users. Also, watching Node and JavaScript grow into a first class programming language has been fun. I’m anxious to see how much it’s going to take over.

Cosmic Developer Spotlight Series\r\n
Developer Spotlight: Abe Hendricks
Developer Spotlight: Brian Mullis
Developer Spotlight: Micah Walter
Developer Spotlight: Joe Tuson
Developer Spotlight: Coding Dojo
Developer Spotlight: Simple Media
Developer Spotlight: Jon Kalfayan
Developer Spotlight: Jon Bloomer

Cosmic is an API-first cloud-based content management platform that makes it easy to manage applications and content. If you have questions about the Cosmic API, please reach out to us on Twitter or join the community on Slack.

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"key":"teaser","title":"Teaser","type":"html-textarea","children":null,"value":"

We sat down with Jason Price for our latest installment of the Cosmic Developer Spotlight Series. 

"},{"value":"fc3ebe90-4671-11e9-85a3-e5db413f3dee-PuxTq4DwUHE.jpg?q=&w=1200&h=1200&fit=crop&crop=top,","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/fc3ebe90-4671-11e9-85a3-e5db413f3dee-PuxTq4DwUHE.jpg?q=&w=1200&h=1200&fit=crop&crop=top,","imgix_url":"https://imgix.cosmicjs.com/fc3ebe90-4671-11e9-85a3-e5db413f3dee-PuxTq4DwUHE.jpg?q=&w=1200&h=1200&fit=crop&crop=top,"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-07-06T14:11:41.283Z","created_by":"5716b504e9c686d006000073","created":"2017-07-06T14:11:41.283Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-03-14T16:00:14.485Z","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

We sat down with Jason Price for our latest installment of the Cosmic Developer Spotlight Series. 

","featured_image":{"url":"https://cdn.cosmicjs.com/fc3ebe90-4671-11e9-85a3-e5db413f3dee-PuxTq4DwUHE.jpg?q=&w=1200&h=1200&fit=crop&crop=top,","imgix_url":"https://imgix.cosmicjs.com/fc3ebe90-4671-11e9-85a3-e5db413f3dee-PuxTq4DwUHE.jpg?q=&w=1200&h=1200&fit=crop&crop=top,"}}},{"_id":"595d587d64ba08b84e0014e4","order":117,"slug":"how-to-build-an-angular-js-image-feed","title":"How to Build an Angular Image Feed","content":"

In this tutorial I’m going to show you how to build a user-driven photo gallery, powered by Angular, hosted on the Cosmic App Server.

TL;DR

View Demo
View the full source code on GitHub
Install the App and deploy to the Cosmic App Server

Prerequisites

You’ll need the node JS, npm and Angular cli pre-installed. Make sure you already have them before you start. Please refer to Angular docs on how to do this.

Getting Started

First of all we’ll need to create the Angular project. We’ll use ng cli to do it. So once you’ll have all prerequisites installed, you’ll need to setup the new Angular project:

ng new cosmic-angular

After you’ll setup this project you’ll be able to run

cd cosmic-angular\r\nng serve --open

And play with your app in browser

Doing everything using the existing git repo

First of all, you have to be sure you have node > 6.x installed, than run the following commands:

npm install -g @angular/cli\r\ngit clone https://github.com/cosmicjs/angular-image-feed\r\ncd cosmic-angular\r\nnpm install\r\nng serve --open

The most recent ng cli version at the article creation moment was 1.1.3. Browser window will open automatically once you'll run the last command

Setting up Cosmic library

First of all, install the Cosmic npm module for Angular/JavaScript applications:

npm install cosmicjs --save

Now you should be able to import Cosmic object and perform Cosmic API calls like following:

import Cosmic from 'cosmicjs';\r\nconst bucket = { slug: 'your-bucket-slug' };\r\n\r\nCosmic.getObjects({ bucket }, (err, res) => {\r\n  console.log(res.objects);\r\n});

Setting up things with Cosmic

Create the bucket and remember the bucket name (‘cosmic-angular’ in our case):

Than create a new object type named Photo and please remember the object type slug (photos’).

We also need a way to store the picture itself. Please enter the “Metafields Template” tab and add “Image/File” type Metafield with key 'photo'. This Metafield will store the image. We don’t need anything\r\nmore, so just set the name and save Object Type. After save you’ll be redirected to ‘New Photo’ page. Create some photos using this page and save them - we'll use them as test data.

You'll also need to create the Bucket write key. It's necessary to allow users upload pictures and create photo Objects. Open Settings page and click 'Generate new key' on API Write Access Key than copy generated key and save the changes.

\"\"

Angular environments

Edit the src/environments/environment.ts to match the following:

export const environment = {\r\n  production: false,\r\n  write_key: 'YOURWRITEKEY',\r\n  bucket_name: 'YOURBUCKETNAME',\r\n  photos_type: 'photos'\r\n};

Configuration service for Angular

We're planning to use Cosmic Objects in more than one Angular component. In such case makes sense to create a dedicated configuration service and store all Cosmic related things such as bucket name, write key, etc in a single place. Let's create src/services/cosmic_config.ts with the following contents:

import {Injectable} from '@angular/core';\r\n\r\n@Injectable()\r\nexport class CosmicConfigService {\r\n    private write_key;\r\n    private bucket_name;\r\n    private photos_type;\r\n\r\n    constructor() {\r\n        this.photos_type = environment.photos_type;\r\n        this.write_key = environment.write_key;\r\n        this.bucket_name = environment.bucket_name\r\n    }\r\n\r\n    public getReadCfg(): any {\r\n        return {\r\n            bucket: {\r\n                slug: this.bucket_name\r\n            }\r\n        };\r\n    }\r\n\r\n    public getWriteCfg(): any {\r\n        return {\r\n            bucket: {\r\n                slug: this.bucket_name,\r\n                write_key: this.write_key\r\n            }\r\n        };\r\n    }\r\n\r\n    public buildPhotoUploadObj(title, file): any {\r\n        return {\r\n            write_key: this.write_key,\r\n            type_slug: this.photos_type,\r\n            title: title,\r\n            metafields: [{\r\n                key: 'picture',\r\n                type: 'file',\r\n                value: file\r\n            }]\r\n        };\r\n    }\r\n\r\n    getPhotoSlug() {\r\n        return this.photos_type;\r\n    }\r\n}

This service has a few methods:

We'll call these methods from our Angular components.

View the gallery - Angular part

Create src/components/picture/picture.ts file with the following content:

import { Component, Input } from '@angular/core';\r\n\r\n@Component({\r\n    selector: 'picture',\r\n    templateUrl: './picture.html'\r\n})\r\nexport class Picture {\r\n    @Input() picture: any;\r\n\r\n    constructor() {\r\n    }\r\n}

Than create a template for Picture component:

<div class="ui card picture-item">\r\n  <div class="image">\r\n    <img class="ui fluid image" [src]="picture.metafield.picture.url" alt="{{ picture.title }}">\r\n  </div>\r\n  <div class="content">\r\n    <div class="description">{{ picture.title }}</div>\r\n  </div>\r\n</div>

We'll use this component to display a single gallery picture item.

Now create src/components/picture_upload/picture_upload.ts file with the following content:

import { Component, Input, Output, EventEmitter } from '@angular/core';\r\nimport Cosmic from 'cosmicjs';\r\nimport { CosmicConfigService } from '../../services/cosmic_config';\r\n\r\n@Component({\r\n    selector: 'picture-upload',\r\n    templateUrl: './picture_upload.html'\r\n})\r\nexport class PictureUpload {\r\n    private fl;\r\n    private title;\r\n    public uploading;\r\n    @Output() onUpload = new EventEmitter<any>();\r\n\r\n    constructor(\r\n        private cosmicConfig: CosmicConfigService\r\n    ) {\r\n        this.uploading = false;\r\n        this.fl = null;\r\n        this.title = "";\r\n    }\r\n\r\n    onFileChange(ev) {\r\n        if (ev.target.files && ev.target.files.length) {\r\n            this.fl = ev.target.files[0];\r\n        }\r\n    }\r\n\r\n    upload() {\r\n        this.uploading = true;\r\n        Cosmic.addMedia(this.cosmicConfig.getWriteCfg(), {\r\n            media: this.fl,\r\n            folder: this.fl.name\r\n        }, (error, response) => {\r\n            Cosmic.addObject(this.cosmicConfig.getWriteCfg(),\r\n                this.cosmicConfig.buildPhotoUploadObj(this.title, response.body.media.name),\r\n            (error, response) => {\r\n                this.title = '';\r\n                this.fl = null;\r\n                this.uploading = false;\r\n                this.onUpload.emit({});\r\n            });\r\n        });\r\n    }\r\n}

Than add the following template:

<div class="picture-upload">\r\n    <div class="ui form" [ngClass]="{ 'active dimmer': uploading }">\r\n        <div class="ui grid" *ngIf="!uploading">\r\n            <div class="five wide column">\r\n                <div class="field">\r\n                    <input type="text" placeholder="Title..." (input)="title = $event.target.value" [value]="title"/>\r\n                </div>\r\n            </div>\r\n            <div class="six wide column">\r\n                <div class="field">\r\n                    <input type="file" (change)="onFileChange($event)"/>\r\n                </div>\r\n            </div>\r\n            <div class="five wide column">\r\n                <button class="ui primary button fluid" (click)="upload()">Upload photo</button>\r\n            </div>\r\n        </div>\r\n        <div *ngIf="uploading" class="ui text loader">Upload is in progress</div>\r\n    </div>\r\n</div>

Add Picture and PictureUpload components to app.module.ts as it’s done with other components like AppComponent. This will allow us to use it in our app.

What happens here?

Our Picture component doesn't perform anything interesting - it just displays object properties. However PuctureUpload component doing much more interesting thing. It creates a record on Cosmic servers, but this record has an image attached, so this makes the whole process more complicated:

Concatenating everything together

Now we need to modify our AppComponent to use these newly created components. Modify src/app/app.component.ts to look like the following:

import { Component } from '@angular/core';\r\nimport Cosmic from 'cosmicjs';\r\nimport {CosmicConfigService} from '../services/cosmic_config';\r\n\r\n@Component({\r\n  selector: 'app-root',\r\n  templateUrl: './app.component.html',\r\n  styleUrls: ['./app.component.css']\r\n})\r\nexport class AppComponent {\r\n  public items = [];\r\n  page = 0;\r\n  page_size = 2;\r\n  scrollEnabled = true;\r\n\r\n  constructor(\r\n    public cosmicCfg: CosmicConfigService\r\n  ) {\r\n    this.reload();\r\n  }\r\n\r\n  reload() {\r\n    this.items = [];\r\n    this.page = 0;\r\n    this.scrollEnabled = true;\r\n    let params = {\r\n      type_slug: this.cosmicCfg.getPhotoSlug(),\r\n      limit: this.page_size,\r\n      skip: 0\r\n    };\r\n    Cosmic.getObjectType(this.cosmicCfg.getReadCfg(), params, (err, res) => {\r\n      this.items = res.objects.all;\r\n    });\r\n  }\r\n\r\n  onUpload() {\r\n    this.reload();\r\n  }\r\n\r\n  onScroll() {\r\n    if (!this.scrollEnabled) {\r\n      return;\r\n    }\r\n    this.page++;\r\n    let params = {\r\n      type_slug: this.cosmicCfg.getPhotoSlug(),\r\n      limit: this.page_size,\r\n      skip: this.page * this.page_size\r\n    };\r\n    Cosmic.getObjectType(this.cosmicCfg.getReadCfg(), params, (err, res) => {\r\n      if (res.objects && res.objects.all) {\r\n        res.objects.all.forEach((itm) => {\r\n          this.items.push(itm);\r\n        });\r\n      }\r\n      else {\r\n        this.scrollEnabled = false;\r\n      }\r\n    });\r\n  }\r\n}

And make its template like following:

<div infiniteScroll [infiniteScrollDistance]="1" [infiniteScrollThrottle]="300" (scrolled)="onScroll()">\r\n    <picture-upload (onUpload)="onUpload()"></picture-upload>\r\n<picture *ngFor="let item of items" [picture]="item"></picture>\r\n</div>

We're planning to have the infinite-scrollable gallery (and you can already see it's directives in code). This means we have to install the right library:

npm install --save ngx-infinite-scroll

What’s happening here?

Deploy to Cosmic servers

Cosmic has some requirements for deploying apps:

In our case we actually have HTML5 app, so we'll need some additional software.

Prepare config

Create a prepare.js file in your project directory:

var fs = require('fs');\r\n\r\nvar str = `\r\n    export const environment = {\r\n        production: true,\r\n        write_key: '${process.env.COSMIC_WRITE_KEY}',\r\n        bucket_name: '${process.env.COSMIC_BUCKET}',\r\n        photos_type: 'photos'\r\n    };\r\n`;\r\nfs.writeFile("./src/environments/environment.prod.ts", str, function(err) {\r\n    if(err) {\r\n        return console.log(err);\r\n    }\r\n    console.log("The file was saved!");\r\n});

This script will rewrite default Angular production settings file to use your Cosmic bucket write key and bucket name.

Modify package.json

Angular cli adds some packaged on package.json as devDependencies. We have to move them in dependencies to make our scripts work:

...\r\n"dependencies": {\r\n    "@angular/cli": "^1.1.3",\r\n    "@angular/compiler-cli": "^4.0.0",\r\n    ...\r\n},\r\n...

Prepare software

We'll also need something to serve our Angular app. We'll use Express framework:

npm install --save express

Add the following to your package.json:

{\r\n  ...\r\n  "scripts": {\r\n    ...\r\n    "start": "node app.js"\r\n  },\r\n  ...\r\n  "engines": {\r\n    "node": "6.9.4",\r\n    "npm": "4.2.0"\r\n  }\r\n  ...\r\n}

The main point is to have start command defined in the scripts section (you can safely replace default angular start command). This is the command which will be run to start our app. So now we have the only thing left - create the app.js file:

const express = require('express')\r\nconst app = express()\r\n\r\napp.use(express.static('./dist'));\r\n\r\napp.listen(process.env.PORT, function () {\r\n});

This is a simple Express app which serves dist dir as dir of static files. Please take note - app listens on port specified via PORT environment variable, it's important to run apps on Cosmic App Server.

Build Angular app for production

We'll use app.json to do this (dokku predeploy section):

{\r\n    "scripts": {\r\n        "dokku": {\r\n            "predeploy": "node prepare.js && ng build --aot --prod"\r\n        }\r\n    }\r\n}

This script will be executed before we'll launch our express app to build the Angular app for production.

Run it!

Now you can enter 'Deploy Web App' page in your Cosmic Dashboard.

\"\"

Simply enter your repo URL and click 'Deploy to Web' - deploy process will be started and app become ready in a couple of minutes.

Conclusion

Using the Cosmic App Server allows us to quickly deploy the application to hosting using a git repo and you don't worry about server configuration and software installation - everything will be done by Cosmic servers.

","metafields":[{"object_type":"authors","value":"591dcc617b17dbf10500212d","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"591dcc617b17dbf10500212d","slug":"ivan-larionov","title":"Ivan Larionov","content":"","metafields":[{"value":"713396e0-3be7-11e7-bfc3-91ffe5d3362c-ivan.jpeg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/713396e0-3be7-11e7-bfc3-91ffe5d3362c-ivan.jpeg","imgix_url":"https://imgix.cosmicjs.com/713396e0-3be7-11e7-bfc3-91ffe5d3362c-ivan.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-05-18T16:31:29.363Z","created_by":"5357ef811693be2118000001","created":"2017-05-18T16:31:29.363Z","status":"published"}},{"value":"

In this tutorial I’m going to show you how to build a user-driven photo gallery, powered by Angular JS, hosted on the Cosmic App Server.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"965f5250-624e-11e7-9d28-7b65c66a2644-angular-image-feed.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/965f5250-624e-11e7-9d28-7b65c66a2644-angular-image-feed.jpg","imgix_url":"https://imgix.cosmicjs.com/965f5250-624e-11e7-9d28-7b65c66a2644-angular-image-feed.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-07-06T21:22:05.857Z","created_by":"5357ef811693be2118000001","created":"2017-07-06T21:22:05.857Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"591dcc617b17dbf10500212d","slug":"ivan-larionov","title":"Ivan Larionov","content":"","metafields":[{"value":"713396e0-3be7-11e7-bfc3-91ffe5d3362c-ivan.jpeg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/713396e0-3be7-11e7-bfc3-91ffe5d3362c-ivan.jpeg","imgix_url":"https://imgix.cosmicjs.com/713396e0-3be7-11e7-bfc3-91ffe5d3362c-ivan.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-05-18T16:31:29.363Z","created_by":"5357ef811693be2118000001","created":"2017-05-18T16:31:29.363Z","status":"published","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/713396e0-3be7-11e7-bfc3-91ffe5d3362c-ivan.jpeg","imgix_url":"https://imgix.cosmicjs.com/713396e0-3be7-11e7-bfc3-91ffe5d3362c-ivan.jpeg"}}},"teaser":"

In this tutorial I’m going to show you how to build a user-driven photo gallery, powered by Angular JS, hosted on the Cosmic App Server.

","featured_image":{"url":"https://cdn.cosmicjs.com/965f5250-624e-11e7-9d28-7b65c66a2644-angular-image-feed.jpg","imgix_url":"https://imgix.cosmicjs.com/965f5250-624e-11e7-9d28-7b65c66a2644-angular-image-feed.jpg"}}},{"_id":"595a7e5d0e2d88e933000f22","order":118,"slug":"cosmic-js-receipt-downloads-now-available","title":"Cosmic Receipt Downloads Now Available","content":"

As users add more and more Buckets to their Cosmic Dashboards, billing management can become hairy. Thanks to requests from and collaboration with the Cosmic Community, we have rolled out a new feature to help you manage your Buckets and their billing\r\ninformation for streamlined account management. Introducing Cosmic Receipt Downloads, now available in your Bucket Dashboard. 

To access receipts for your Buckets, navigate to your Cosmic Bucket > Settings > Billing. You will see detailed items such as your credit card information on file, your current plan and products as well as your payments table (pictured above). 

If you have questions about the new Cosmic Receipt Downloads, reach out to us on Twitter and join our Slack community. 

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"value":"

Download receipts for your Cosmic Buckets within your Dashboard. 

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"cc8dffc0-6014-11e7-8bef-13b197443c0f-1499119225_bill.svg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/cc8dffc0-6014-11e7-8bef-13b197443c0f-1499119225_bill.svg","imgix_url":"https://imgix.cosmicjs.com/cc8dffc0-6014-11e7-8bef-13b197443c0f-1499119225_bill.svg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-07-03T17:26:52.955Z","created_by":"5716b504e9c686d006000073","created":"2017-07-03T17:26:52.955Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5716b504e9c686d006000073","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

Download receipts for your Cosmic Buckets within your Dashboard. 

","featured_image":{"url":"https://cdn.cosmicjs.com/cc8dffc0-6014-11e7-8bef-13b197443c0f-1499119225_bill.svg","imgix_url":"https://imgix.cosmicjs.com/cc8dffc0-6014-11e7-8bef-13b197443c0f-1499119225_bill.svg"}}},{"_id":"59599fde6ed8253e1d000c49","order":119,"slug":"building-and-publishing-a-cosmic-js-extension-using-bitbucket-pipelines","title":"Building and Publishing a Cosmic Extension Using Bitbucket Pipelines","content":"

Cosmic just released their new Extension functionally, which enables anyone to embed their own custom app inside the Cosmic CMS!

In this tutorial we'll be going through some of the steps required to make our Amazon Product Search Extension.

TL;DR

View the full codebase on GitHub
Install the Extension in your Bucket in Your Bucket  > Extensions > Browse Extensions
View the Extension documentation for more information on building an Extension

The extension we're building

We're building a simple Extension that allows you to search the Amazon Product Catalogue and add Objects to your bucket with products' name, description, image, and an affiliate link.

This is quite a simple app, built using react, and we won't be going into too many details on the parts that don't directly relate to the new Cosmic Extensions API.

Getting access to the Cosmic API in your Extension

Cosmic embeds extensions as an <iframe> inside its CMS interface, the extension is given a url with a querystring providing all the information needed for your app to access the relevant bucket like so:

https://43d32000-5ce7-11e7-8fc4-c1f6eec4f920.cosmicext.com/?bucket_slug=my-bucket-slug&read_key=foo&write_key=bar

Extracting these variables, is very easy, and even easier using a library like qs:

import qs from "qs";\r\n\r\nconst { bucket_slug, read_key, write_key, } = qs.parse(window.location.search.slice(1, Infinity));\r\n\r\nconsole.log({\r\n   bucket_slug,\r\n   read_key,\r\n   write_key,\r\n});

These keys can then be used to make API calls on the bucket your currently using the extension in:

fetch(\r\n   `https://api.cosmicjs.com/v1/${bucket_slug}/object/amazon-credentials${\r\n      read_key\r\n         ? "?read_key=" + read_key\r\n         : ""\r\n   }`,\r\n   opts,\r\n);

In our app we use these keys to add new object for Amazon Products that we find.

extension.json

One file that must be included in your extension is the extension.json file. This tells Cosmic important metadata about your app, like it's name, icon, display image, and the default Objects and Object Types that should be created when the Extension is first installed. The extension.json for our app is as follows:

{\r\n  "title": "Amazon Product Search",\r\n  "font_awesome_class": "fa-shopping-basket",\r\n  "image_url": "http://fla.fg-a.com/shopping-cart/shopping-cart-black-3.png",\r\n  "objects": [\r\n    {\r\n      "title": "Amazon Credentials",\r\n      "slug": "amazon-credentials",\r\n      "type": "amazon-credentials",\r\n      "metafields": [\r\n        {\r\n        "key": "amz-key",\r\n        "title": "Key",\r\n        "type": "text",\r\n        "value": ""\r\n        },\r\n        {\r\n        "key": "amz-secret",\r\n        "title": "Secret",\r\n        "type": "text",\r\n        "value": ""\r\n        },\r\n        {\r\n        "key": "amz-tag",\r\n        "title": "Tag",\r\n        "type": "text",\r\n        "value": ""\r\n        }\r\n      ]\r\n    }\r\n  ],\r\n  "object_types": [\r\n    {\r\n      "title": "Amazon Products",\r\n      "slug": "amazon-items",\r\n      "singular": "Amazon Product",\r\n      "metafields":[\r\n        {"key":"image_url","type":"text","value":"","title":"image_url","parent":false,"children":null},\r\n        {"key":"affiliate_link","type":"text","value":"","title":"affiliate_link","parent":false,"children":null}\r\n      ]\r\n    }\r\n  ]\r\n}

The title field is the name that your extension will display inside Cosmic The font_awesome_class field must be a valid Font Awesome icon name the image_url field is a display image that will show with your extension.

You also have space to specify a list of objects that will be created when your extension is installed, here we've detailed an object that will store our Amazon Product Search credentials. This means that Cosmic will handle saving this information\r\nfor us!

Deployment and Continuous Integration

Uploading your extension to Cosmic is very easy, you just need to take a folder that contains you extension.jsonfile, and an index.html file (and any other assets you need), zip it up, and upload it.

Our build folder looks like this:

build\r\n├── extension.json\r\n├── index.html\r\n└── static\r\n └── js\r\n └── main.a651cd8a.js\r\n

You can either upload your zip file through the Cosmic CMS, or by using the rest API.

We use Bitbucket to host our code, which has a built in CI service called Pipelines. You can configure pipelines to run on every commit to the master branch of your git repo, and to upload the newest version of your app to Cosmic's servers.

We'll configure our Bitbucket Pipeline like so:

image: codogo/pipelines-universal:latest\r\n\r\npipelines:\r\n  branches:\r\n    master:\r\n      - step:\r\n          script:\r\n          - yarn install \r\n          - yarn run lint\r\n          - yarn run build\r\n          - ./uploadNewExtension.sh

Where uploadNewExtension.sh contains:

#!/bin/bash\r\n\r\n# $BUCKET_SLUG, $READ_KEY, and $WRITE_KEY are environment variables\r\n\r\nEXTENSION_NAME="${EXTENSION_NAME:-Amazon Product Search}"\r\n\r\necho "geting previous version extension id..."\r\nPREVIOUS_EXTENSION_ID="$( curl --progress-bar "https://api.cosmicjs.com/v1/extensions-2?hide_metafields=true&read_key=foo" | jq -r ".bucket.extensions | map(select(.title == \\"$EXTENSION_NAME\\" )) | .[0].id"  )"\r\n# jq is a neat little program for extracting data from json, it is available here: https://jqplay.org/\r\n\r\nif [ "$PREVIOUS_EXTENSION_ID" == "null" ] ; then\r\necho "There is no '$EXTENSION_NAME' extension on cosmic to delete"\r\nelse\r\necho "Found id for '$EXTENSION_NAME': $PREVIOUS_EXTENSION_ID"\r\necho "deleting old extension..."\r\ncurl --progress-bar -X DELETE "https://api.cosmicjs.com/v1/$BUCKET_SLUG/extensions/$PREVIOUS_EXTENSION_ID" -d "{\\"write_key\\":\\"$WRITE_KEY\\"}" -H "Content-type: application/json" > /dev/null\r\nfi\r\n\r\necho "upload new version of extension..."\r\ncurl --progress-bar --url "https://api.cosmicjs.com/v1/$BUCKET_SLUG/extensions" --header "content-type: multipart/form-data" --form "write_key=$WRITE_KEY" --form "zip=@./build.zip" > /dev/null

This script will remove any previously uploaded versions of our extension, then take our zipped Extension and upload it to our bucket.

Summary

In this tutorial we've had an introduction to the way Cosmic hosts and integrates with your Extension, and an explanation of how to upload your Extension using Bitbucket's Continuous integration. If you've learnt something, please share this article!

If you're making an extension, or anything else, with Cosmic get in touch on our Slack or Twitter, we'd love to see what you're making.

This post was written by Codogo, an award-winning digital agency with a passion for creating amazing digital experiences.

","metafields":[{"object_type":"authors","value":"590b73ff200ca2723f002d01","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"590b73ff200ca2723f002d01","slug":"freddie-ridell","title":"Freddie Ridell","content":"","metafields":[{"value":"2d96a700-30f8-11e7-8b84-cbc54315248d-freddie.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/2d96a700-30f8-11e7-8b84-cbc54315248d-freddie.jpg","imgix_url":"https://imgix.cosmicjs.com/2d96a700-30f8-11e7-8b84-cbc54315248d-freddie.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-05-04T18:33:35.138Z","created_by":"5357ef811693be2118000001","created":"2017-05-04T18:33:35.138Z","status":"published"}},{"value":"

Cosmic just released their new extension functionally, which enables anyone to embed their own custom app inside the Cosmic CMS!

In this tutorial we'll be going through some of the steps required to make our Amazon Product Search extension.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"26b41d70-5f9a-11e7-b120-9f6bc26aeb8f-amazon-product-search.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/26b41d70-5f9a-11e7-b120-9f6bc26aeb8f-amazon-product-search.jpg","imgix_url":"https://imgix.cosmicjs.com/26b41d70-5f9a-11e7-b120-9f6bc26aeb8f-amazon-product-search.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-07-03T01:37:34.041Z","created_by":"5357ef811693be2118000001","created":"2017-07-03T01:37:34.041Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"590b73ff200ca2723f002d01","slug":"freddie-ridell","title":"Freddie Ridell","content":"","metafields":[{"value":"2d96a700-30f8-11e7-8b84-cbc54315248d-freddie.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/2d96a700-30f8-11e7-8b84-cbc54315248d-freddie.jpg","imgix_url":"https://imgix.cosmicjs.com/2d96a700-30f8-11e7-8b84-cbc54315248d-freddie.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-05-04T18:33:35.138Z","created_by":"5357ef811693be2118000001","created":"2017-05-04T18:33:35.138Z","status":"published","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/2d96a700-30f8-11e7-8b84-cbc54315248d-freddie.jpg","imgix_url":"https://imgix.cosmicjs.com/2d96a700-30f8-11e7-8b84-cbc54315248d-freddie.jpg"}}},"teaser":"

Cosmic just released their new extension functionally, which enables anyone to embed their own custom app inside the Cosmic CMS!

In this tutorial we'll be going through some of the steps required to make our Amazon Product Search extension.

","featured_image":{"url":"https://cdn.cosmicjs.com/26b41d70-5f9a-11e7-b120-9f6bc26aeb8f-amazon-product-search.jpg","imgix_url":"https://imgix.cosmicjs.com/26b41d70-5f9a-11e7-b120-9f6bc26aeb8f-amazon-product-search.jpg"}}},{"_id":"5959076c4db72e53120009f8","order":120,"slug":"developer-spotlight-abe-hendricks","title":"Developer Spotlight: Abe Hendricks","content":"

Another Developer Hero joins us in our new installment of the Cosmic Developer Spotlight Series. We sat down with Abe Hendricks, a hybrid Developer / Interactive Manager / Content-Editor leading a government agency in California.  Check him out on GitHub, and enjoy the Q/A.

How long have you been building software?
I’ve been building websites and single page applications for a little over a year now.  Prior to that, most development was in the form of database development, business intelligence, and some basic server side scripting for task automation.

What is your preferred development stack?
Currently I’m working for a mid size Local/Regional Government Agency.  A long term goal is to keep any custom development in a tight stack.  We are trying not pick up a myriad of different technologies and tools with differing life cycles\r\nand diverging paths. I currently try to do as much development as I can in the front-end using Angular.  For servers we fill in the gaps using JavaScript / Typescript as well, with the aide of frameworks like Express. (If I were a freelance developer\r\nI’m certain my approach would be different). When I need to reach for something like a database I gravitate towards Firebase which fits in nicely with Angular.

What past projects are you most proud of and why?
It’s difficult for me to gloat about any projects in particular. I’m satisfied at the speed of which I’ve picked up new frameworks, tools, etc. and have been able to develop and deploy using these new tools.  Effectively I’m\r\na bit more impressed from the quantity and speed of which I’ve developed applications, more so than the quality of them (smiling emoji). But ironically, now that I write that, I’m not really proud of that at all (sad emoji).

Talk a little bit more about your process for building apps in your world and vertical. How has Cosmic sped up your time to market for project delivery deadlines?
Cosmic fits in perfectly with our organization and needs. Before Cosmic we were using a popular Blogging / CMS platform for managing content, in the most headless way it could be implemented and used.  However, the end result always felt awkward, I’d say "pear-shaped" on a good day.  Trying to explain to non-technical people that they need to add content to WordPress, while at the same time you are telling them that we are not really using WordPress, never really even made sense to me, let alone them. When Cosmic came along it really rocked off some socks that we didn’t want to wear to begin with.  Cosmic’s API-first CMS was really what we needed all along.  Moving forward, Cosmic will allow and enable many individuals in our organization to build out our applications.

What are some technologies you are excited about that you are using today, or want to learn more about?
I feel like I’m always learning so it’s starting to not feel very exciting at all.  (Thank you JavaScript community). But do to the nature of my current role at my organization I’m expected to put on a few different hats on a day\r\nto day basis.  I’m not just the developer, but I’m also a content editor and designer.  I’ve been wearing the developer hat for quite some time over the course of the last year. In the near future, I’m hoping to spend\r\nmore time using Cosmic to add content to our existing applications, and spend more time in Sketch working creatively on design. I mean, what’s the point of all this JavaScript if it doesn’t have any HTML or CSS buddies right? 

Somewhat related: I’m eager to see how certain projects such as Material2 for Angular develop and mature over the course of the next year.  Additionally I’m hoping to put together a native app or two using the Ionic Framework.

Cosmic Developer Spotlight Series
Developer Spotlight: Brian Mullis
Developer Spotlight: Micah Walter
Developer Spotlight: Joe Tuson
Developer Spotlight: Coding Dojo
Developer Spotlight: Simple Media
Developer Spotlight: Jon Kalfayan
Developer Spotlight: Jon Bloomer

Cosmic is an API-first cloud-based content management platform that makes it easy to manage applications and content. If you have questions about the Cosmic API, please reach out to us on Twitter or join the community on Slack.

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"value":"

We sat down with Abe Hendricks for our latest installment of the Cosmic Developer Spotlight Series. 

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"5069e780-5f36-11e7-944c-c77fe6f4c1e0-1499025228_Web_Development.png","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/5069e780-5f36-11e7-944c-c77fe6f4c1e0-1499025228_Web_Development.png","imgix_url":"https://imgix.cosmicjs.com/5069e780-5f36-11e7-944c-c77fe6f4c1e0-1499025228_Web_Development.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-07-02T14:47:08.640Z","created_by":"5716b504e9c686d006000073","created":"2017-07-02T14:47:08.640Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

We sat down with Abe Hendricks for our latest installment of the Cosmic Developer Spotlight Series. 

","featured_image":{"url":"https://cdn.cosmicjs.com/5069e780-5f36-11e7-944c-c77fe6f4c1e0-1499025228_Web_Development.png","imgix_url":"https://imgix.cosmicjs.com/5069e780-5f36-11e7-944c-c77fe6f4c1e0-1499025228_Web_Development.png"}}},{"_id":"59528e63833ff0503d000e9b","order":121,"slug":"how-to-build-a-real-estate-website-using-emberjs","title":"How to Build a Real Estate Website Using Ember.js","content":"

Today's internet is complicated. Wars are started over React state management, new languages are written just to make Angular work agreeably, and don't get started over all the hate for Node.

In the frenzy surrounding new tech, simplicity gets forgotten. Services like Cosmic challenge this. So in the spirit of doing the opposite, we're going to build a sleek real estate listing app (with a social flavor) that's easy to use.

TL;DR

View the demo
View the full codebase on GitHub

Getting Started

We'll be using Cosmic to manage all of our content and to deploy the site. We'll be building out the front end in Ember.js.

We're using Ember because it's opinionated. Our app won't be sensitive to performance issues on any modern device, so we can take advantage of a high level of abstraction that fits our design philosophy.

Setting Up the App

Assuming you have Node installed, open a terminal and run the commands in each step.

0. Set Up a Quick Server

var express = require('express');\r\nvar app = express();\r\nvar port = process.env.PORT || 3000;\r\n\r\napp.use(express.static(__dirname + '/public'));\r\n\r\nrequire('./app/routes')(app);\r\n\r\napp.listen(port);\r\n\r\nexports = module.exports = app;
module.exports = function(app) {\r\n       app.get('*', function(req, res) {\r\n           res.sendfile('./public/index.html'); // load our public/index.html file\r\n       });\r\n};
npm init\r\nnpm install express --save

You know have a simple Express application set up that will let us deploy the app on Cosmic. Later, we'll build our Ember app into the public directory. Run the following commands within CosmicRealEstate:

1. Install Ember's CLI

npm install -g ember-cli\r\nnpm install -g phantomjs

(Ember uses Phantonjs for running tests)

2. Generate the Ember Project Structure

ember new cosmic-real-estate && cd cosmic-real-estate

4. Install Bootstrap

From within the comsic-real-estate directory, install the Ember Bootstrap addon to automatically include Bootstrap in your build path

ember install ember-bootstrap

5. Fire Up Your Development Server

ember serve

Open your browser and you'll see the Ember welcome page at localhost:4200.

Building Your Listings Route

Now that you have your app's boilerplate code in place, let's start by building out a page to show all the listings in our Cosmic bucket.

0. Get Rid of the Welcome Code

We appreciate Ember's warm welcome, but we need to get to work. Go ahead and delete the following code from your app's main Handlebars template.

{{!-- app/templates/application.hbs --}}\r\n\r\n{{!-- The following component displays Ember's default welcome message. --}}\r\n{{welcome-page}}\r\n{{!-- Feel free to remove this! --}}

Now, add a container around the remaining {{outlet}} (this is where your routes will render). Your application template will now look like this:

{{!-- app/templates/application.hbs --}}\r\n\r\n<div class="container" style="margin-top:20px">\r\n    {{outlet}}\r\n</div>

1. Generate the Listings Route and Give your Template a Welcome Mat

Inside the cosmic-real-estate directory, run:

ember g route listings

Then, in your newly created Listings template, add the following HTML:

<div class="jumbotron" style="margin-top: 20px">\r\n  <h1>Welcome to Cosmic Real Estate!</h1>\r\n  <p>\r\n    Check out our awesome real estate listings -\r\n    stored and managed with Cosmic and\r\n    rendered right in your browser.\r\n  </p>\r\n</div>

If you go to localhost:4200/listings you'll see beginnings of our listings page.

2. Generate an Index Route to Make Your Listings Show on the Root URL

We want to forward the root domain to our listings page, so first run:

ember g route index

Then, open the route handler for Index and add the following code to the route's export:

// app/routes/index.js\r\n\r\nexport default Ember.Route.extend({\r\n  beforeModel() {\r\n    this.replaceWith('listings');\r\n  }\r\n});

Ember uses a series of lifecycle hooks for validation when rendering a route. Calling beforeModel() utilizes the first of these hooks to tell the route handler to immediately take us to the listings route. Visiting localhost:4200 will now take us to localhost:4200/listings.

Retrieving Data From Cosmic

We'll want to show our users listings that we've stored in Cosmic. To do so, we'll use Ember's built in data store, Ember Data, to retrieve listings from Cosmic to store in corresponding models.

0. Set Up Your Bucket From this point on, we'll assume you already have a Cosmic bucket created. (This guide's bucket slug will be cosmic-real-estate.) You'll set your's in your ENV variables later. In the cosmic-real-estate bucket\r\nare objects of type "Listing" with the following structure:

Listing:

Cosmic Metafield
Type
Price
Text Input
Address
Text Input
Profile Image
Image
Style
Radio Select
Neighborhood
Text Input
Beds
Text Input
Baths
Text Input
Square Feet
Text Input
Zipcode
Text Input

As emphasized at the beginning of this guide, Ember is convention over configuration. Ember Data handles all of the nasty AJAX and caching work that you don't want to do. All we have to do is tell Ember where to look for our data, how to interpret\r\nit, and how it fits in our models.

1. Create a Listing Model

As with any other web app framework, models in Ember simply act as a container for your backend data. We'll use a Listing model to match our Listing object in our Cosmic bucket. Run:

ember g model Listing

In the newly created listing file, add the following code:

// app/models/listing.js\r\n\r\nexport default DS.Model.extend({\r\n  title: DS.attr(),\r\n  price: DS.attr(),\r\n  address: DS.attr(),\r\n  profileImage: DS.attr(),\r\n  style: DS.attr(),\r\n  neighborhood: DS.attr(),\r\n  beds: DS.attr(),\r\n  baths: DS.attr(),\r\n  squareFeet: DS.attr(),\r\n  zipCode: DS.attr()\r\n});

We've now specified what properties a Listing will have, i.e. which properties to look for when grabbing data from our bucket.

2. Create a Listing Adapter and Serializer

Cosmic operates on an intuitive REST API, so we'll take advantage of Ember Data's built in REST Adapter and JSON Serializer. We'll just have to make a few slight tweaks to fit them to the Cosmic API spec. To generate the listing adapter,\r\nrun:

ember g adapter listing

To generate the serializer:

ember g serializer listing

Ember will now automatically use the Listing serializer and adaptaer for anything dealing with the Listing model.

3. Tweak the Listing Adapter

By default, Ember's REST Adapter points to sligtly different endpoints than we need to fetch data from our bucket. So, add the following code to the Listing adapter, making sure you swap out DS.JSONAPIAdapter for DS.RESTAdapter:

// app/adapters/listing.js\r\n\r\nexport default DS.RESTAdapter.extend({\r\n  host: 'https://api.cosmicjs.com/v1/cosmic-real-estate',\r\n  urlForFindAll(modelName, snapshot) {\r\n    let path = this.pathForType(modelName);\r\n    return this.buildURL() + '/object-type/' + path;\r\n  },\r\n  urlForQueryRecord(slug) {\r\n    return this.buildURL() + '/object/' + slug;\r\n  }\r\n});

The effect is that every time we query the Data Store for Listings, we tell Ember to fetch them from the response at https://api.cosmicjs.com/v1/cosmic-real-esate/object-type/listingor https://api.cosmicjs.com/v1/cosmic-real-esate\\object\\listing-slug, depending on whether we're retrieving a single listing or multiple.

4. Tweak the Listing Serializer

Cosmic gives us our data in a format slightly different from what Ember's REST Serializer expects. For example, Cosmic returns this

{\r\n  "objects": [\r\n    {\r\n      "_id": "59403aefacfbc8d252000563",\r\n      "slug": "example-condo",\r\n      "title": "Example Condo",\r\n      "content": "",\r\n      "bucket": "593f696bacfbc8d2520000df",\r\n      "type_slug": "listings",\r\n      "created_at": "2017-06-13T19:20:15.485Z",\r\n      "created_by": "593f691ea768e28650000334",\r\n      "created": "2017-06-13T19:20:15.485Z",\r\n      "status": "published",\r\n      "metadata": {\r\n        "price": 545000,\r\n        "address": "2100 High Avenue",\r\n        "profile": {\r\n          "url": "https://www.cosmicjs.com/uploads/4ff36ce0-506d-11e7-9f7d-dbfbf1c66da0-ex-condo.jpeg",\r\n          "imgix_url": "https://cosmicjs.imgix.net/4ff36ce0-506d-11e7-9f7d-dbfbf1c66da0-ex-condo.jpeg"\r\n        },\r\n        "style": "Condo",\r\n        "location": "Uptown"\r\n      }, \r\n      // etc...

where Ember expects:

{\r\n    "listings": [\r\n        {\r\n            "id": 1,\r\n            "title": "example-condo",\r\n            "price": 54000,\r\n            // etc...

The two main discrepancies here are that objects doesn't match our model name and that most of the primary properties we need are stored in metadata. To fix this, add the following code to the listing serializer, making sure to swap DS.JSONAPISerializer\r\nfor DS.RESTSerializer.

// app/serializers/listing.js\r\n\r\nimport DS from 'ember-data';\r\n\r\nfunction buildNormalizeListing(source) {\r\n  return {\r\n    id: source._id,\r\n    slug: source.slug,\r\n    content: source.content,\r\n    title: source.title,\r\n    price: source.metadata.price,\r\n    address: source.metadata.address,\r\n    profileImage: source.metadata.profile.url,\r\n    style: source.metadata.style,\r\n    neighborhood: source.metadata.neighborhood,\r\n    beds: source.metadata.beds,\r\n    baths: source.metadata.baths,\r\n    squareFeet: source.metadata.square_feet,\r\n    zipCode: source.metadata.zip_code\r\n\r\n  }\r\n}\r\n\r\nexport default DS.RESTSerializer.extend({\r\n  normalizeResponse(store, primaryModelClass, payload, id, requestType) {\r\n    if (payload.objects) {\r\n      let normalizedListings = payload.objects.map(function(listing) {\r\n        return buildNormalizeListing(listing)\r\n      });\r\n      payload = {\r\n        listings: normalizedListings\r\n      };\r\n    } else {\r\n      let normalizedListing = buildNormalizeListing(payload.object);\r\n      payload = {\r\n        listing: normalizedListing\r\n      }\r\n    }\r\n    return this._super(store, primaryModelClass, payload, id, requestType);\r\n\r\n  }\r\n});

For each of the Listings in the objects array returned by Cosmic, we create a new object with only the properties we want and map those to a new array. We then create a new hash to point our payload reference to with the listings key Ember is looking\r\nfor. Pack it all together by calling _super, and our app is ready to do business with Cosmic. (The process is similar for retrieving a single listing, so we abstract that into buildNormalizedListing())

Displaying the Listings

We want our users to be able to view individual listings to get more detailed information about them. To do that we need to take advantage of Ember's nested routes.

1. Generate an Index Route Under Listings

The listings/index route will take the place of our original listings route. Run:

ember g route listings/index

2. Move the Listings Template Code and Route Code

Move the following snippet of code from app/templates/listings.hbs to app/templates/listings/index.hbs

{{!-- app/templates/listings.hbs --}}\r\n\r\n<div class="row">\r\n  {{#each model as |currentListing|}}\r\n    <div class="col-sm-4" >\r\n       {{real-estate-listing listing=currentListing}}\r\n    </div>\r\n  {{/each}}\r\n</div>

Where you removed that last bit from the Listings template, add {{outlet}}. That is, listings.hbs now looks like this:

{{!-- app/templates/listings.hbs --}}\r\n\r\n<div class="container">\r\n  <div class="row">\r\n    <div class="col-md-12">\r\n      <div class="jumbotron" style="margin-top: 20px">\r\n        <h1>Welcome to Cosmic Real Estate!</h1>\r\n        <p>\r\n          Check out our awesome real estate listings -\r\n          stored and managed with Cosmic and\r\n          rendered right in your browser.\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class="container">\r\n  {{outlet}}\r\n</div>

The {{outlet}} helper simply specifies where child routes will render in a template.

Finally, make rendering all of the listings a behavior specific to the index route by moving the following snippet from app/routes/listings.js to app/routes/listings/index.js.

  model() {\r\n    return this.get('store').findAll('listing');\r\n  }

3. Create a Listing Route for Individual Listings

First, run:

ember g route listings/listing

When we open an individual listing, we want that to be reflected in the URL, so add the following code to the router to show the listing id at the end of the url.

// app/router.js\r\n\r\nRouter.map(function() {\r\n  this.route('listings', function() {\r\n    this.route('listing', { path: '/:listing_id'});\r\n  });\r\n});

4. Prepare the Listing Template to Show Data

Before we can let users check out a listing, we need to give them something to look at. Add the following HTML to the Listing child route:

<div class="row">\r\n  <div class="col-sm-12">\r\n    <ul class="nav nav-pills">\r\n      <li role="presentation"><a href="#description">Description</a></li>\r\n      <li role="presentation"><a href="#stats">Stats</a></li>\r\n      <li role="presentation">{{#link-to 'listings'}}Return to Listings{{/link-to}}</li>\r\n    </ul>\r\n  </div>\r\n  <div class="col-sm-9">\r\n    <div class="page-header">\r\n      <h1>\r\n        {{model.title}}\r\n      </h1>\r\n    </div>\r\n  </div>\r\n  <div class="col-sm-3">\r\n      <h1>\r\n        <span class="text-success">{{format-price model.price}}</span>\r\n      </h1>\r\n\r\n  </div>\r\n</div>\r\n<div class="row">\r\n  <div class="col-md-6">\r\n    <img src={{model.profileImage}} class="img-responsive" />\r\n  </div>\r\n  <div class="col-md-6">\r\n      <ul class="list-group">\r\n      <li class="list-group-item"><strong>Address:</strong><span class="pull-right">{{model.address}}</span></li>\r\n      <li class="list-group-item"><strong>Style:</strong><span class="pull-right">{{model.style}}</span></li>\r\n      <li class="list-group-item"><strong>Neighborhood:</strong><span class="pull-right">{{model.neighborhood}}</span></li>\r\n      <li class="list-group-item"><strong>Beds:</strong><span class="pull-right">{{model.beds}}</span></li>\r\n      <li class="list-group-item"><strong>Baths:</strong><span class="pull-right">{{model.baths}}</span></li>\r\n      <li class="list-group-item"><strong>Square Feet:</strong><span class="pull-right">{{model.squareFeet}}</span></li>\r\n      </ul>\r\n  </div>\r\n\r\n\r\n  <div class="col-sm-6">\r\n    <h3 id="description">Description</h3>\r\n    <span class="text-muted">{{{model.content}}}</span>\r\n  </div>\r\n</div>

Notice three new Handlebars features we're using: Using triple braces with {{{model.content}}} forces Handlebars to not escape the HTML in the content field. The {{#link-to}}helper in the menu automatically generates a proper link for us to whichver\r\nroute we specify. We'll use this in the next step to actually dynamically link to listings. * The {{format-price}} helper, which we'll be making ourselves next.

5. Generate a Helper to Format the Price

In Ember we have the option to generate custom helpers. We'll do this to display the listing's price as a currency. Run:

ember g helper filter-price

Then, in the new Format Price helper, add the following code:

// app/helpers/format-price.js\r\n\r\nexport function formatPrice(value) {\r\n  return '$' + value.toLocaleString();\r\n}

6. Link to the Listings

We'll need to dynamically generate a link to a listing's particular page from it's slug. We can do this painlessly using the {{#link-to}}} helper we just used in the previous step.

In the Real Estate Listing component, wrap {{listing.title}} in a {{#link-to}} like this:

{{!-- app/templates/components/real-estate-listing.hbs --}\r\n\r\n{{#link-to 'listings.listing' listing}}{{listing.title}}{{/link-to}}

We pass the model as the second parameter, and Ember automatically takes care of matching the routes. However, you might notice that our links now point to meaningless strings that Ember is using as unique ID's for the listings. As a simple fix, go\r\ninto your Listing serializer and add this line to tell Ember to use the Listing slug as it's primary key:

// app/serializers/listing.js\r\n\r\nexport default DS.RESTSerializer.extend({\r\n  primaryKey: 'slug',\r\n  normalizeResponse(store, primaryModelClass,\r\n  // etc...

We now have individual Listing routes and links to them that work just as we'd expect them to.

Make it Social

At this point we have ourselves a functioning real estate listing app. But, rather than end with something boring, we'll add a little flair. We want our users to be able to (in this case anonymously) vote on our listings. Cosmic will help us manage\r\nthis.

1. Update the Listing object, model, and serializer In your Cosmic bucket, add the metafield upvotes with a default value of 0 to your Listing Object. Update the Listing model accordingly:

// app/models/listing.js\r\n\r\n//etc...\r\n  zipCode: DS.attr(),\r\n  content: DS.attr(),\r\n  upvotes: DS.attr()\r\n});
// app/serializers/listing.js\r\n\r\nfunction buildNormalizeListing(source) {\r\n  return {\r\n    //etc...\r\n    zipCode: source.metadata.zip_code,\r\n    upvotes: source.metadata.upvotes\r\n  }\r\n}

2. Update the Real Estate Listing Component

After adding an upvote button, a downvote button, and a vote counter, your Real Estate Listing template will look like this:

{{!-- app/templates/components/real-estate-listing.hbs --}}\r\n\r\n<div class="panel panel-default">\r\n  <div class="panel-heading">\r\n    <h4>\r\n      {{#link-to 'listings.listing' listing}}{{listing.title}}{{/link-to}}\r\n      <span class="pull-right">\r\n        {{upvotes}}\r\n      </span>\r\n    </h4>\r\n  </div>\r\n  <div class="panel-body">\r\n    <p>\r\n      <img src="{{listing.profileImage}}" class="img-thumbnail" style="background-color: #fff;height:auto"/>\r\n\r\n    </p>\r\n    <p>\r\n      <strong>Address:</strong> {{listing.address}}\r\n    </p>\r\n    <p>\r\n      <strong>Style:</strong> {{listing.style}}\r\n    </p>\r\n    <p>\r\n      <strong>Neighborhood:</strong> {{listing.neighborhood}}\r\n    </p>\r\n  </div>\r\n  <div class="panel-footer">\r\n    <p class="pull-left">\r\n      <button {{action "vote" "down"}} class="btn btn-default"><span class="glyphicon glyphicon-thumbs-down"></span></button>\r\n      <button {{action "vote" "up"}} class="btn btn-default"><span class="glyphicon glyphicon-thumbs-up"></span></button>\r\n    </p>\r\n    <p class="text-right">\r\n       <h4>{{format-price listing.price}}</h4>\r\n    </p>\r\n  </div>\r\n</div>

Notably, we've added a thumbs-up and a thumbs-down button that take advantage of Ember's action helper to handle the click. We pass "vote" to specify the action to be called and "up" or "down" to indicate the direction\r\nof the vote. To get the buttons working, we need to implement the vote() action in the Real Estate Listing controller.

3. Implement the Vote Action

To handle the voting action, we'll take our first look at the Real Estate Listing component's controller.

Our first step in this process is to give the controller access to the listing's slug and upvotes. We do this through computed properties, which look like this:

// app/components/real-estate-listing.js\r\n\r\nexport default Ember.Component.extend({\r\n  slug: Ember.computed('slug', function() {\r\n    return this.get('listing.id');\r\n  }), //etc...

Note that we use listing.id to retrive the slug since we've defined the slug as the model's primary key.

Second, we add the property store: Ember.inject.service() to give ourselves access to the Data Store within the component.

Finally, we define the vote() action in the action hash:

// app/componenets/real-estate-listing.js\r\n\r\nactions: {\r\n    vote(direction) {\r\n      let upvotes = this.get('upvotes');\r\n      direction === 'up' ?\r\n        upvotes++ :\r\n        upvotes--;\r\n      this.set('upvotes', upvotes);\r\n      let slug = this.get('slug');\r\n      let store = this.get('store');\r\n      updateVote(upvotes,slug,store);\r\n    }\r\n}

(updateVote() is implemented above export)

All said and done, your Real Estate Listing component will look like this:

import Ember from 'ember';\r\n\r\nfunction updateVote(upvotes,listing_slug,store) {\r\n  store.findRecord('listing', listing_slug).then(function(listing) {\r\n    listing.set('upvotes',upvotes);\r\n    listing.save();\r\n  })\r\n}\r\n\r\nexport default Ember.Component.extend({\r\n  store: Ember.inject.service(),\r\n  upvotes: Ember.computed('upvotes', function() {\r\n    return this.get('listing.upvotes');\r\n  }),\r\n  slug: Ember.computed('slug', function() {\r\n    return this.get('listing.id');\r\n  }),\r\n  actions: {\r\n    vote(direction) {\r\n      let upvotes = this.get('upvotes');\r\n      direction === 'up' ?\r\n        upvotes++ :\r\n        upvotes--;\r\n      this.set('upvotes', upvotes);\r\n      let slug = this.get('slug');\r\n      let store = this.get('store');\r\n      updateVote(upvotes,slug,store);\r\n    }\r\n  }\r\n});

The buttons now increment/decrement the vote count, but if you refresh the page you'll notice the changes aren't persisting. If you check the console you'll see why.

Next, we need to revist our old friends the Adapter and the Serializer to handle our update requests.

4. Tweak the Serializer (Again)

Copy the code below to override the serialize() method:

// app/serializers/listing.js\r\n\r\nexport default DS.RESTSerializer.extend({\r\n  primaryKey: 'slug',\r\n  normalizeResponse(store, primaryModelClass, payload, id, requestType) {\r\n    // etc...\r\n  },\r\n  serialize(snapshot, options) {\r\n    var json = this._super(...arguments);\r\n    let payload = {\r\n      "slug": snapshot.id,\r\n      "metafields": [\r\n        {\r\n            "required": true,\r\n            "value": json.price,\r\n            "key": "price",\r\n            "title": "Price",\r\n            "type": "text",\r\n            "children": null\r\n        },\r\n        {\r\n            "required": true,\r\n            "value": json.address,\r\n            "key": "address",\r\n            "title": "Address",\r\n            "type": "text",\r\n            "children": null\r\n        },\r\n        {\r\n            "value": json.profileImage.split('/').slice(-1)[0],\r\n            "key": "profile",\r\n            "title": "Profile",\r\n            "type": "file",\r\n            "children": null,\r\n            "url": json.profileImage,\r\n            "imgix_url": "https://cosmicjs.imgix.net/" + json.profileImage.split('/').slice(-1)[0];\r\n        },\r\n        {\r\n            "required": true,\r\n            "options": [\r\n                {\r\n                    "value": "House"\r\n                },\r\n                {\r\n                    "value": "Apartment"\r\n                },\r\n                {\r\n                    "value": "Condo"\r\n                }\r\n            ],\r\n            "value": json.style,\r\n            "key": "style",\r\n            "title": "Style",\r\n            "type": "radio-buttons",\r\n            "children": null\r\n        },\r\n        {\r\n            "value": json.beds,\r\n            "key": "beds",\r\n            "title": "Beds",\r\n            "type": "text",\r\n            "children": null\r\n        },\r\n        {\r\n            "value": json.baths,\r\n            "key": "baths",\r\n            "title": "Baths",\r\n            "type": "text",\r\n            "children": null\r\n        },\r\n        {\r\n            "value": json.squareFeet,\r\n            "key": "square_feet",\r\n            "title": "Square Feet",\r\n            "type": "text",\r\n            "children": null\r\n        },\r\n        {\r\n            "required": true,\r\n            "value": json.neighborhood,\r\n            "key": "neighborhood",\r\n            "title": "Neighborhood",\r\n            "type": "text",\r\n            "children": null\r\n        },\r\n        {\r\n            "required": true,\r\n            "value": json.zipcode,\r\n            "key": "zipcode",\r\n            "title": "zipcode",\r\n            "type": "text",\r\n            "children": null\r\n        },\r\n        {\r\n            "value": json.upvotes,\r\n            "key": "upvotes",\r\n            "title": "Upvotes",\r\n            "type": "text",\r\n            "children": null\r\n        }\r\n    ]\r\n    }\r\n    return payload;\r\n  }\r\n});

5. Tweak the Adapter Again

In the Adapter's export, we need to override urlForUpdateRecord() and updateRecord(). Once we do so, we have:

// app/adapters/listing.js\r\n\r\nimport DS from 'ember-data';\r\n\r\nexport default DS.RESTAdapter.extend({\r\n  host: 'https://api.cosmicjs.com/v1/cosmic-real-estate',\r\n  urlForFindAll(modelName, snapshot) {\r\n    let path = this.pathForType(modelName);\r\n    return this.buildURL() + '/object-type/' + path;\r\n  },\r\n  urlForFindRecord(slug) {\r\n    return this.buildURL() + '/object/' + slug;\r\n  },\r\n  urlForUpdateRecord() {\r\n    return this.buildURL() + '/edit-object';\r\n  },\r\n  updateRecord: function(store, type, snapshot) {\r\n    var data = {};\r\n    var serializer = store.serializerFor(type.modelName);\r\n\r\n    serializer.serializeIntoHash(data, type, snapshot);\r\n    data = data.listing;\r\n    var id = snapshot.id;\r\n    var url = this.buildURL(type.modelName, id, snapshot, 'updateRecord');\r\n\r\n    return this.ajax(url, "PUT", { data: data });\r\n  }\r\n});

Make it All Look Nice

With our voting functionality added in, we'll add a couple features to pull the app together before it's complete.

1. Make a Filter for the Votes

Just as we did for the price, we'll make a filter to make the votes look pretty. Run:

ember g helper format-upvotes

Then, in the newly created Format Upvotes filter, add the following (replacing the default parameters):

// app/helpers/format-upvotes.js\r\n\r\nexport function formatUpvotes(upvote) {\r\n  if (upvote > 0) {\r\n    return '<span class="text-success">' + upvote + '</span>';\r\n  } else if (upvote < 0) {\r\n    return '<span class="text-danger">' + upvote + '</span>';\r\n  } else {\r\n    return '<span class="text-muted">' + upvote + '</span>';\r\n  }\r\n}

To get it working, swap out {{upvotes}} in the Real Estate Listing template for {{{format-upvotes upvotes}}}. (Remember, triple braces tell Handlebars to not escape the return value.)

2. Add the upvote count to the Invidual Listings

In the Individual Listing template, where {{model.title}} is, add:

{{!-- app/templates/listings/listing.hbs --}}\r\n\r\n<div class="page-header">\r\n  <h1>\r\n    {{model.title}} <small>Upvotes: {{{format-upvotes model.upvotes}}}</small>\r\n  </h1>\r\n</div>

Deploy the App

0. Hack Together an Endpoint to Serve the Keys in Express

Assuming you're using Cosmic to deploy your app, you'll automatically have access to your bucket's slug, read key, and write key via Node's process.env. However, since we've completely isolated our front end and using Express only\r\nto serve it, making these ENV variables accessible isn't the most straightforward task.

We'll take the route of serving them through an endpoint on our Express server. We'll retrieve them with a simple AJAX call in the Listing Adapter, as we don't need them elsewhere. (Note that we won't be doing it securely but it wouldn't\r\nbe much more work to add authentication.)

Now working out of CosmicRealEstate, we'll use the router to serve a JSON object containing our keys at /api.

// CosmicRealEstate/app/routes.js\r\n\r\nmodule.exports = function(app) {\r\n    app.get('/api', function(req,res){\r\n      return res.json({\r\n        bucket: process.env.COSMIC_BUCKET,\r\n        writeKey: process.env.COSMIC_WRITE_KEY,\r\n        readKey: process.env.COSMIC_READ_KEY\r\n      });\r\n    });\r\n    app.get('*', function(req, res) {\r\n      var path = require('path');\r\n      res.sendFile(path.join(__dirname, '../public', 'index.html')); // load our public/index.html file\r\n    });\r\n\r\n};

(Make sure the /api route goes before the wildcard route to override it).

Then, moving back into our Ember app to take care of the Listing Adapter, we need to do three things: 1. Import ember to give us access to jQuery 2. Import the configuration file so we can check the build environment 3. Make the Ajax call to the Express\r\nendpoint we just set up

Once we've done this, the Listing Adapter will look like this up until the export (which does not change).

import DS from 'ember-data';\r\nimport config from '../config/environment';\r\nimport Ember from 'ember';\r\n\r\nvar cosmic;\r\nif (config.environment === "production") {\r\n  Ember.$.ajax('/api', {\r\n    data: {format: 'json'},\r\n    async: false,\r\n    success: function(data) {\r\n      cosmic = {\r\n        bucket: data.bucket,\r\n        writeKey: data.writeKey,\r\n        readKey: data.readKey\r\n      }\r\n    }\r\n  });\r\n} else {\r\n  //config.environment === "development"\r\n  cosmic = {\r\n    bucket: 'cosmic-real-estate',\r\n    writeKey: null,\r\n    readKey: null\r\n  }\r\n}

(The choice to use async: false here is to keep things simple, albeit less than best practice. The idea is that the app can't do anything until the keys are provided - no harm, no foul.)

1. Build the Front End

With our Ember app now ready to go and keys ready to serve, we'll start off the deployment process by building it. In a terminal in cosmic-real-estate, run:

ember build --environment=production --output-path=../public/

We specify our build environment for good measure and use the parent Node app's public directory as the build path.

2. Test the Node App

Navigate up into CosmicRealEstate and run:

node server.js

You should see your app live on localhost:3000

Conclusion

Using Cosmic, Express.js, and Ember.js, you've just built yourself a modular app that you can scale in any direction you choose.

If you stick to our design philosophy and deploy the app to Cosmic, you're now able to completely manage your site and it's content from one place. If you think anything that isn't API first is worse than Mondays, can't stand worrying\r\nabout databases, and are trying to deliver your content as fast as possible with the least amount of worry, you'll find your happy place with Cosmic.

","metafields":[{"object_type":"authors","value":"59528e59833ff0503d000e98","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"59528e59833ff0503d000e98","slug":"matt-cain","title":"Matt Cain","content":"","metafields":[{"value":"9ff99380-5b59-11e7-a33a-a9e1bde9cf9a-matt-cain.jpeg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/9ff99380-5b59-11e7-a33a-a9e1bde9cf9a-matt-cain.jpeg","imgix_url":"https://imgix.cosmicjs.com/9ff99380-5b59-11e7-a33a-a9e1bde9cf9a-matt-cain.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-06-27T16:56:57.686Z","created_by":"5357ef811693be2118000001","created":"2017-06-27T16:56:57.686Z","status":"published","modified_at":"2023-01-20T22:01:28.380Z","modified_by":"5357ef811693be2118000001","thumbnail":"https://imgix.cosmicjs.com/9ff99380-5b59-11e7-a33a-a9e1bde9cf9a-matt-cain.jpeg"}},{"value":"

In the frenzy surrounding new tech, simplicity gets forgotten. Services like Cosmic challenge this. So in the spirit of doing the opposite, we're going to build a sleek real estate listing app (with a social flavor) that's as easy to use as a Wordpress blog.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"e6efc660-5b59-11e7-b717-653f819d86b5-ember-real-estate-website.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e6efc660-5b59-11e7-b717-653f819d86b5-ember-real-estate-website.jpg","imgix_url":"https://imgix.cosmicjs.com/e6efc660-5b59-11e7-b717-653f819d86b5-ember-real-estate-website.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-06-27T16:57:07.042Z","created_by":"5357ef811693be2118000001","created":"2017-06-27T16:57:07.042Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"59528e59833ff0503d000e98","slug":"matt-cain","title":"Matt Cain","content":"","metafields":[{"value":"9ff99380-5b59-11e7-a33a-a9e1bde9cf9a-matt-cain.jpeg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/9ff99380-5b59-11e7-a33a-a9e1bde9cf9a-matt-cain.jpeg","imgix_url":"https://imgix.cosmicjs.com/9ff99380-5b59-11e7-a33a-a9e1bde9cf9a-matt-cain.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-06-27T16:56:57.686Z","created_by":"5357ef811693be2118000001","created":"2017-06-27T16:56:57.686Z","status":"published","modified_at":"2023-01-20T22:01:28.380Z","modified_by":"5357ef811693be2118000001","thumbnail":"https://imgix.cosmicjs.com/9ff99380-5b59-11e7-a33a-a9e1bde9cf9a-matt-cain.jpeg","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/9ff99380-5b59-11e7-a33a-a9e1bde9cf9a-matt-cain.jpeg","imgix_url":"https://imgix.cosmicjs.com/9ff99380-5b59-11e7-a33a-a9e1bde9cf9a-matt-cain.jpeg"}}},"teaser":"

In the frenzy surrounding new tech, simplicity gets forgotten. Services like Cosmic challenge this. So in the spirit of doing the opposite, we're going to build a sleek real estate listing app (with a social flavor) that's as easy to use as a Wordpress blog.

","featured_image":{"url":"https://cdn.cosmicjs.com/e6efc660-5b59-11e7-b717-653f819d86b5-ember-real-estate-website.jpg","imgix_url":"https://imgix.cosmicjs.com/e6efc660-5b59-11e7-b717-653f819d86b5-ember-real-estate-website.jpg"}}},{"_id":"59508c41833ff0503d000044","order":122,"slug":"connect-your-cosmic-js-buckets-to-slack","title":"Connect Your Cosmic Buckets to Slack","content":"

You can now connect your Cosmic Buckets to Slack to be notified when any changes occur in your Bucket.  Installing the app to your Slack account is easy.

Follow these steps:
1. Install the Cosmic Slack app to your Slack account by clicking here.
2. Select which channel you would like to receive the notifications and click "Install".

3. After you install the Slack app, copy the webhook link provided and paste it into the Endpoint input field for each Webhook in your Cosmic Bucket and click "Save Webhooks".

Now whenever content is edited in your Cosmic Bucket, your team will be notified in Slack.

This is another way that Cosmic is making it easier for teams to collaborate to build apps faster.  We also have a new Integrations page to help keep track of all of the Cosmic integrations with your favorite services.  If you have any questions, feel free to reach out to us on Twitter and join the Slack community.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"

You can now connect your Cosmic Buckets to Slack to track changes in your Buckets.  Installing the app to your Slack account is easy.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"2ca6e910-5a27-11e7-b391-297f686fd25c-cosmicjs-slack.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/2ca6e910-5a27-11e7-b391-297f686fd25c-cosmicjs-slack.jpg","imgix_url":"https://imgix.cosmicjs.com/2ca6e910-5a27-11e7-b391-297f686fd25c-cosmicjs-slack.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-06-26T04:23:28.967Z","created_by":"5357ef811693be2118000001","created":"2017-06-26T04:23:28.967Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

You can now connect your Cosmic Buckets to Slack to track changes in your Buckets.  Installing the app to your Slack account is easy.

","featured_image":{"url":"https://cdn.cosmicjs.com/2ca6e910-5a27-11e7-b391-297f686fd25c-cosmicjs-slack.jpg","imgix_url":"https://imgix.cosmicjs.com/2ca6e910-5a27-11e7-b391-297f686fd25c-cosmicjs-slack.jpg"}}},{"_id":"594a7d05aa75cb9c6000074e","order":123,"slug":"how-to-make-a-simple-twitter-clone-with-react-native","title":"How to Make a Simple Twitter Clone with React Native","content":"

In this tutorial, we're going to create a small Twitter-like mobile app using React Native. With our app, users will be able to create accounts and log in, see a feed of all of the posts created by themselves and other users, and add their own posts\r\nto the feed. The data for all of our users and posts will be managed by Cosmic.

TL;DR

View the source code on GitHub
Install the app on Cosmic (you still need to run locally)

Getting Started

You’ll need to have node.js and yarn or npm installed. For this project I'm using yarn and node v8.1.2.

There are a number of ways to start a new React Native project; for this one, I used create-react-native-app. We can globally install CRNA\r\nand fire up a new project by running the following commands:

$ yarn global add create-react-native-app\r\n$ create-react-native-app twitter-clone\r\n$ cd twitter-clone/\r\n$ yarn start

I'm also using the Expo SDK so that I don't have to get Xcode and Android Studio set up. This is also going to provide me with features that will help with things like loading fonts and allowing users to upload photos to the app. To get started with Expo, please refer to the docs.

Dependencies

We're going to use several tools for this project; we'll talk about a few of the key ones here.

Go ahead and copy and paste the following into your package.json and then run yarn install again.

{\r\n  "name": "twitter-clone",\r\n  "version": "1.0.0",\r\n  "private": true,\r\n  "devDependencies": {\r\n    "jest-expo": "~1.0.1",\r\n    "react-native-scripts": "0.0.30",\r\n    "react-test-renderer": "16.0.0-alpha.6"\r\n  },\r\n  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",\r\n  "scripts": {\r\n    "start": ""react-native-scripts start",\r\n    "eject": "react-native-scripts eject",\r\n    "android": "react-native-scripts android",\r\n    "ios": "react-native-scripts ios",\r\n    "test": "node node_modules/jest/bin/jest.js --watch"\r\n  },\r\n  "jest": {\r\n    "preset": "jest-expo"\r\n  },\r\n  "dependencies": {\r\n    "@expo/vector-icons": "^5.0.0",\r\n    "axios": "^0.16.1",\r\n    "expo": "^17.0.0",\r\n    "form-data": "^2.2.0",\r\n    "native-base": "^2.1.4",\r\n    "react": "16.0.0-alpha.6",\r\n    "react-native": "^0.44.0",\r\n    "react-native-router-flux": "^3.39.2",\r\n    "react-redux": "^5.0.5",\r\n    "redux": "^3.6.0",\r\n    "redux-devtools-extension": "^2.13.2",\r\n    "redux-logger": "^3.0.6",\r\n    "redux-thunk": "^2.2.0",\r\n  }\r\n}

Directory Structure

Compared to some other boilerplates, CRNA is pretty unopinionated about how we structure the files in our application; it just gives us an index.ios.js and index.android.js and App.js as a starting point.

We're going to have our App.js point to a folder called app that will hold all of our components, layouts, config files, and our redux store and reducers. The following is the scaffolding that I have found works best for me. I won't go into the\r\ncontents of each and every file in this post, but you can see it all in the source code.

Here is what our app folder will look like:

.\r\n├── assets\r\n│   └── fonts\r\n│       └── Pacifico.ttf\r\n├── components\r\n│   ├── FeedNavbar\r\n│   │   ├── FeedNavbar.js\r\n│   │   ├── index.js\r\n│   │   └── styles.js\r\n│   ├── SinglePost\r\n│   │   ├── SinglePost.js\r\n│   │   ├── index.js\r\n│   │   └── styles.js\r\n│   ├── SmallButton\r\n│   │   ├── SmallButton.js\r\n│   │   ├── index.js\r\n│   │   └── styles.js\r\n│   └── TextField\r\n│       ├── TextField.js\r\n│       ├── index.js\r\n│       └── styles.js\r\n├── config\r\n│   ├── cosmic.js\r\n│   └── routes.js\r\n├── layouts\r\n│   ├── feed\r\n│   │   ├── Feed.js\r\n│   │   ├── index.js\r\n│   │   └── styles.js\r\n│   ├── login\r\n│   │   ├── Login.js\r\n│   │   ├── index.js\r\n│   │   └── styles.js\r\n│   ├── newPost\r\n│   │   ├── NewPost.js\r\n│   │   ├── index.js\r\n│   │   └── styles.js\r\n│   ├── signup\r\n│   │   ├── Signup.js\r\n│   │   ├── index.js\r\n│   │   └── styles.js\r\n│   └── welcome\r\n│       ├── Welcome.js\r\n│       ├── index.js\r\n│       └── styles.js\r\n└── redux\r\n    ├── reducers\r\n    │   ├── index.js\r\n    │   ├── posts.js\r\n    │   └── users.js\r\n    └── store.js

App

A few things are going to happen in our App.js file. We will:

You can copy and paste the following into your App.js file in the project root:

import React, { Component } from 'react';\r\nimport { AppRegistry, View } from 'react-native';\r\nimport { Provider, connect } from 'react-redux';\r\nimport { Font, AppLoading } from 'expo';\r\nimport store from './app/redux/store';\r\nimport Router from './app/config/routes';\r\n\r\nexport default class App extends Component {\r\n  constructor(){\r\n    super();\r\n    this.state = {\r\n      isReady: false,\r\n    }\r\n  }\r\n\r\n  async componentWillMount() {\r\n    await Font.loadAsync({\r\n      'Roboto': require('native-base/Fonts/Roboto.ttf'),\r\n      'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),\r\n      'Pacifico': require('./app/assets/fonts/Pacifico.ttf'),\r\n      'Ionicons': require('native-base/Fonts/Ionicons.ttf'),\r\n    });\r\n\r\n    this.setState({isReady: true});\r\n  }\r\n\r\n\r\n  render() {\r\n    if (!this.state.isReady) {\r\n      return <AppLoading />;\r\n    }\r\n    return (\r\n      <Provider store={store}>\r\n        <Router />\r\n      </Provider>\r\n    );\r\n  }\r\n}\r\n\r\nAppRegistry.registerComponent('main', () => App);

Next, let's take a look at our routes.js file:

import React from 'react';\r\nimport { Scene, Router, Actions, ActionConst } from 'react-native-router-flux';\r\nimport Welcome from '../layouts/welcome';\r\nimport Login from '../layouts/login';\r\nimport Signup from '../layouts/signup';\r\nimport NewPost from '../layouts/newPost';\r\nimport Feed from '../layouts/feed';\r\n\r\nconst scenes = Actions.create(\r\n  <Scene key="root">\r\n    <Scene key="welcome" component={Welcome} title="Welcome" initial={true} />\r\n    <Scene key="login" component={Login} title="Login" type={ActionConst.REPLACE} />\r\n    <Scene key="signup" component={Signup} title="Create New Account" type={ActionConst.REPLACE} />\r\n    <Scene key="feed" component={Feed} title="Your Feed" type={ActionConst.REPLACE} hideNavBar />\r\n    <Scene key="newPost" component={NewPost} title="Make a new post" />\r\n  </Scene>\r\n);\r\n\r\nexport default () => (\r\n  <Router scenes={scenes} />\r\n);

Using React Native Router Flux, we've just created a bunch of scenes to which we can easily navigate from anywhere in our app.

Our first scene is the Welcome layout, where users will choose between logging in and creating a new account. It looks like this:

import React from 'react';\r\nimport {\r\n  Container,\r\n  Content,\r\n  Icon,\r\n  Text,\r\n  Button,\r\n} from 'native-base';\r\nimport { View } from 'react-native';\r\nimport { Actions } from 'react-native-router-flux';\r\n\r\nimport styles from './styles';\r\n\r\n\r\nexport default () => (\r\n  <Container style={styles.container}>\r\n    <Content>\r\n      <View style={styles.iconBox}>\r\n        <Icon\r\n          style={styles.icon}\r\n          ios="ios-happy-outline"\r\n          android="md-happy"\r\n        />\r\n        <Text style={styles.welcome}>Welcome</Text>\r\n      </View>\r\n      <View style={styles.buttonContainer}>\r\n        <Button\r\n          block\r\n          style={styles.button}\r\n          onPress={() => Actions.login()}\r\n        >\r\n          <Text>Log in</Text>\r\n        </Button>\r\n        <Text style={styles.or}>OR</Text>\r\n        <Button\r\n          block\r\n          style={styles.button}\r\n          onPress={() => Actions.signup()}\r\n        >\r\n          <Text>Sign up</Text>\r\n        </Button>\r\n      </View>\r\n    </Content>\r\n  </Container>\r\n)

Here we've just created two buttons with Native Base that will navigate to the Loginand Signup layouts.

Let's take a look at our Signup layout and see what happens when users create a new account.

import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { ImagePicker } from 'expo';\r\nimport { Actions } from 'react-native-router-flux';\r\nimport {View} from 'react-native';\r\nimport {\r\n  Container,\r\n  Content,\r\n  Button,\r\n  Text,\r\n  Form,\r\n  Thumbnail,\r\n  Icon\r\n} from 'native-base';\r\nimport axios from 'axios';\r\n\r\nimport TextField from '../../components/TextField';\r\nimport styles from './styles';\r\nimport { addUser } from '../../redux/reducers/users';\r\nimport cosmicConfig from '../../config/cosmic';\r\n\r\nconst mapDispatchToProps = {addUser};\r\n\r\nconst validate = form => {\r\n  let errorMessage = '';\r\n  if (form.username.includes(" ")){\r\n    errorMessage = "Username cannot contain spaces";\r\n  }\r\n  if (form.password.includes(" ")){\r\n    errorMessage = "Password cannot contain spaces";\r\n  }\r\n  Object.keys(form).slice(0, 5).map(field => {\r\n    if (!form[field]){\r\n      errorMessage = 'All fields must be filled';\r\n    }\r\n  })\r\n  return errorMessage;\r\n}\r\n\r\nclass Signup extends Component {\r\n  constructor() {\r\n    super();\r\n    this.state = {\r\n      firstName: '',\r\n      lastName: '',\r\n      username: '',\r\n      password: '',\r\n      image: null,\r\n      error: '',\r\n    };\r\n  }\r\n\r\n  onSubmit(){\r\n    const error = validate(this.state);\r\n    if (error) {\r\n      this.setState({ error })\r\n    } else {\r\n      this.checkUsername(this.state.username);\r\n    }\r\n  }\r\n\r\n  checkUsername(username){\r\n    axios.get(`https://api.cosmicjs.com/v1/${cosmicConfig.bucket.slug}/object-type/users/search?metafield_key=username&metafield_value=${username}`)\r\n    .then(res => res.data)\r\n    .then(data => {\r\n      if (data.objects) {\r\n        this.setState({ error: 'Username not available'})\r\n      } else {\r\n        this.props.addUser(this.state);\r\n      }\r\n    })\r\n  }\r\n\r\n  uploadImage = async () => {\r\n    let result = await ImagePicker.launchImageLibraryAsync({\r\n      allowsEditing: true,\r\n      aspect: [4, 3],\r\n    });\r\n    if (!result.cancelled) {\r\n      this.setState({ image: result.uri });\r\n    }\r\n  };\r\n\r\n  render(){\r\n    return (\r\n      <Container style={styles.container}>\r\n        <Content>\r\n          <Form style={styles.mar10}>\r\n            <TextField\r\n              name="First Name"\r\n              value={this.state.firstName}\r\n              onChangeText={(text) => this.setState({firstName: text})}\r\n            />\r\n            <TextField\r\n              name="Last Name"\r\n              value={this.state.lastName}\r\n              onChangeText={(text) => this.setState({lastName: text})}\r\n            />\r\n            <TextField\r\n              name="Username"\r\n              value={this.state.username}\r\n              onChangeText={(text) => this.setState({username: text})}\r\n            />\r\n            <TextField\r\n              secureTextEntry\r\n              name="Password"\r\n              value={this.state.password}\r\n              onChangeText={(text) => this.setState({password: text})}\r\n            />\r\n          </Form>\r\n          <Text style={styles.addPic}>Add a profile picture</Text>\r\n          {\r\n            !this.state.image &&\r\n            <Button\r\n              primary\r\n              bordered\r\n              onPress={this.uploadImage}\r\n              style={styles.uploadButton}>\r\n              <Icon\r\n                ios='ios-camera'\r\n                android='md-camera'\r\n              />\r\n            </Button>\r\n          }\r\n          {\r\n            this.state.image &&\r\n            <Thumbnail\r\n              size={80}\r\n              source={{uri: this.state.image}}\r\n              style={styles.thumbnail}\r\n            />\r\n          }\r\n          <Button\r\n            block\r\n            style={styles.mar10}\r\n            onPress={() => this.onSubmit()}\r\n          >\r\n            <Text>Create account</Text>\r\n          </Button>\r\n          <Text style={styles.formMsg}>{this.state.error}</Text>\r\n          <Button\r\n            transparent\r\n            style={styles.loginBtn}\r\n            onPress={() => Actions.login()}\r\n          >\r\n            <Text style={styles.loginTxt}>Already have an account?</Text>\r\n          </Button>\r\n        </Content>\r\n      </Container>\r\n    );\r\n  }\r\n}\r\n\r\nexport default connect(null, mapDispatchToProps)(Signup);

There are a couple of things that happen here:

The addUser function is defined in our usersreducer; it looks like this:

export const addUser = user => dispatch => {\r\n  let data = new FormData();\r\n  data.append('media', {\r\n        uri: user.image,\r\n        type: 'image/jpeg',\r\n        name: 'image'\r\n      });\r\n\r\n  return axios.post(`https://api.cosmicjs.com/v1/${cosmicConfig.bucket.slug}/media`, data)\r\n  .then(res => res.data.media)\r\n  .then(media => {\r\n    return axios.post(`https://api.cosmicjs.com/v1/${cosmicConfig.bucket.slug}/add-object`, {\r\n      title: user.firstName + ' ' + user.lastName,\r\n      type_slug: 'users',\r\n      metafields: [\r\n        {\r\n          key: 'name',\r\n          type: 'text',\r\n          value: user.firstName + ' ' + user.lastName,\r\n        },\r\n        {\r\n          key: 'username',\r\n          type: 'text',\r\n          value: user.username,\r\n        },\r\n        {\r\n          key: 'password',\r\n          type: 'text',\r\n          value: user.password,\r\n        },\r\n        {\r\n          key: 'profile_picture',\r\n          type: 'file',\r\n          value: media.name,\r\n              }\r\n            ]\r\n          }\r\n        )}\r\n      )\r\n      .then(res => formatUser(res.data))\r\n      .then(formattedUser => dispatch(createUser(formattedUser)))\r\n      .then(() => Actions.feed())\r\n      .catch(err => console.error(`Creating user unsuccessful`, err))\r\n}

Here we make two calls to the Cosmic API. The first call will post the user's profile picture to our bucket as Media, and the second will use the reference to the picture that we get back to post all of the user's information as a new user.

If the user has already created an account, they can login:

import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport {\r\n  Container,\r\n  Content,\r\n  Icon,\r\n  Text,\r\n  Button,\r\n} from 'native-base';\r\nimport { View } from 'react-native';\r\nimport { Actions } from 'react-native-router-flux';\r\nimport TextField from '../../components/TextField';\r\nimport styles from './styles';\r\n\r\nimport { authenticate } from '../../redux/reducers/users';\r\n\r\nconst mapDispatchToProps = {authenticate};\r\n\r\nconst validate = form => {\r\n  let errorMessage = '';\r\n  if (form.username.includes(' ') || form.password.includes(' ')){\r\n    errorMessage = 'Username and password cannot contain spaces';\r\n  }\r\n  if (form.username === '' || form.password === ''){\r\n    errorMessage = 'All fields must be filled';\r\n  }\r\n  return errorMessage;\r\n}\r\n\r\nclass Login extends Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.state = {\r\n      username: '',\r\n      password: '',\r\n      error: '',\r\n    };\r\n  }\r\n\r\n  onSubmit(){\r\n    const error = validate(this.state);\r\n    if (error) {\r\n      this.setState({ error })\r\n    } else {\r\n    this.login();\r\n    }\r\n  }\r\n\r\n  login(){\r\n    this.props.authenticate(this.state)\r\n      .then(res => {\r\n        if (res === 'Username invalid' || res === 'Password invalid'){\r\n          this.setState({\r\n            error: res,\r\n            username: '',\r\n            password: '',\r\n          })\r\n        } else {\r\n          Actions.feed();\r\n        }\r\n      });\r\n  }\r\n\r\n  render(){\r\n    return (\r\n      <Container style={styles.container}>\r\n        <Content>\r\n          <Text style={styles.formMsg}>{this.state.error}</Text>\r\n          <Icon\r\n            style={styles.icon}\r\n            ios="ios-happy-outline"\r\n            android="md-happy"\r\n          />\r\n          <View style={styles.loginBox}>\r\n            <TextField\r\n            name="Enter Username"\r\n            type="big"\r\n            value={this.state.username}\r\n            onChangeText={(text) => this.setState({username: text})}\r\n            />\r\n            <TextField\r\n            secureTextEntry\r\n            name="Enter Password"\r\n            type="big"\r\n            value={this.state.password}\r\n            onChangeText={(text) => this.setState({password: text})}\r\n            />\r\n          <Button\r\n            block\r\n            style={styles.button}\r\n            onPress={() => this.onSubmit()}\r\n          >\r\n            <Text>Log in</Text>\r\n          </Button>\r\n          </View>\r\n          <Button\r\n            transparent\r\n            style={styles.signupBtn}\r\n            onPress={() => Actions.signup()}>\r\n            <Text style={styles.signupTxt}>Sign up for an account</Text>\r\n          </Button>\r\n        </Content>\r\n      </Container>\r\n    );\r\n  }\r\n}\r\n\r\nexport default connect(null, mapDispatchToProps)(Login);

Again, we check to make sure that the fields have valid input, and then check the login info against what is in our bucket using our authenticatefunction:

export const authenticate = user => dispatch => {\r\n  return axios.get(`https://api.cosmicjs.com/v1/${cosmicConfig.bucket.slug}/object-type/users/search?metafield_key=username&metafield_value=${user.username}`)\r\n    .then(res => res.data)\r\n    .then(data => {\r\n      console.log('RESPONSE: ', data);\r\n      if (data.objects) {\r\n        const userData = data.objects[0];\r\n        return {\r\n          password: userData.metadata.password,\r\n          username: userData.metadata.username,\r\n          name: userData.metadata.name,\r\n          profilePicture: userData.metadata.profile_picture,\r\n          slug: userData.slug,\r\n          id: userData._id,\r\n        }\r\n      } else {\r\n        return 'Username invalid';\r\n      }\r\n    })\r\n    .then(data => {\r\n      if (data === 'Username invalid'){\r\n        return data;\r\n      } else if (data.password === user.password){\r\n        dispatch(login({\r\n          name: data.name,\r\n          username: data.username,\r\n          profilePicture: data.profilePicture,\r\n          slug: data.slug,\r\n          id: data.id,\r\n        }))\r\n      } else {\r\n        return 'Password invalid';\r\n      }\r\n    })\r\n    .catch(error => console.error('Login unsuccessful', error))\r\n}

As a side note, we normally wouldn't want to be storing user credentials directly to our database without some kind of encryption, but we'll leave it like this for now as a simple illustration of how we can manage our data with the Cosmic API.

When users are logged in, they will go directly to the Feed layout, which looks like this:

import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { Actions } from 'react-native-router-flux';\r\nimport {\r\n  Container,\r\n  Content,\r\n  List,\r\n  Button,\r\n  Icon,\r\n  Text,\r\n} from 'native-base';\r\n\r\nimport SinglePost from '../../components/SinglePost';\r\nimport FeedNavbar from '../../components/FeedNavbar';\r\nimport { loadPosts } from '../../redux/reducers/posts';\r\nimport { logoutUser } from '../../redux/reducers/users';\r\nimport styles from './styles';\r\n\r\nconst mapStateToProps = ({ posts }) => ({ posts });\r\n\r\nconst mapDispatchToProps = { loadPosts, logoutUser };\r\n\r\nconst renderPost = (post, index) => (\r\n  <SinglePost\r\n    key={index}\r\n    name={post.name}\r\n    username={post.username}\r\n    profilePicture={post.profilePicture}\r\n    content={post.content}\r\n  />\r\n)\r\n\r\nclass Feed extends Component {\r\n  componentDidMount(){\r\n    this.props.loadPosts();\r\n  }\r\n\r\n  render(){\r\n    const endMsg = this.props.posts.length === 0 ? "There aren't any posts yet!" : "That's all the posts for now!"\r\n\r\n    return (\r\n      <Container>\r\n        <FeedNavbar logout={this.props.logoutUser} refresh={this.props.loadPosts} />\r\n        <Content>\r\n          <List>\r\n            {\r\n              !!this.props.posts.length && this.props.posts.map(renderPost)\r\n            }\r\n          </List>\r\n          <Text style={styles.end}>{endMsg}</Text>\r\n        </Content>\r\n        <Button\r\n          rounded\r\n          style={styles.button}\r\n          onPress={() => Actions.newPost()}\r\n        >\r\n          <Icon\r\n            name="create"\r\n            style={{padding: 5}}\r\n          />\r\n        </Button>\r\n      </Container>\r\n    );\r\n  }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Feed);

When the Feed layout mounts, we make a call to the Cosmic API to load all of the posts in our bucket onto our app state. The loadPostsfunction, in our posts reducer, looks like this:

export const loadPosts = () => dispatch => {\r\n  return axios.get(`https://api.cosmicjs.com/v1/${cosmicConfig.bucket.slug}/object-type/posts`)\r\n    .then(res => res.data.objects ? formatPosts(res.data.objects) : [])\r\n    .then(formattedPosts => formattedPosts.sort(postSorter))\r\n    .then(sortedPosts => dispatch(init(sortedPosts)))\r\n    .catch(err => console.error(`Could not load posts`, err));\r\n};

We pull in all of the posts that are in our bucket, format them in a way that will make it easy to get the data that we want, and load them onto state. They are then displayed in the feed.

From the feed, users can click a button to make a new post. They are then taken to the NewPostlayout:

import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport {\r\n  Container,\r\n  Content,\r\n  Text,\r\n  Button,\r\n} from 'native-base';\r\nimport { View } from 'react-native';\r\nimport TextField from '../../components/TextField';\r\nimport styles from './styles';\r\n\r\nimport { createPost } from '../../redux/reducers/posts';\r\n\r\nconst mapStateToProps = state => ({\r\n  user: state.user,\r\n})\r\n\r\nconst mapDispatchToProps = { createPost };\r\n\r\nclass NewPost extends Component {\r\n  constructor(){\r\n    super();\r\n    this.state = {\r\n      content: '',\r\n      error: '',\r\n    }\r\n  }\r\n  onSubmit() {\r\n    if (this.state.content){\r\n      this.props.createPost({\r\n        user: this.props.user,\r\n        content: this.state.content,\r\n      })\r\n    } else {\r\n      this.setState({error: 'You have to write something!'});\r\n    }\r\n  }\r\n\r\n  render(){\r\n    return (\r\n      <Container style={styles.container}>\r\n        <Content>\r\n          <Text style={styles.formMsg}>{this.state.error}</Text>\r\n          <View style={styles.input}>\r\n            <TextField\r\n              big\r\n              name="What's up?"\r\n              value={this.state.post}\r\n              onChangeText={(text) => this.setState({content: text})}\r\n            />\r\n            <Button\r\n              rounded\r\n              style={styles.button}\r\n              onPress={() => this.onSubmit()}\r\n            >\r\n              <Text>Post</Text>\r\n            </Button>\r\n          </View>\r\n        </Content>\r\n      </Container>\r\n    );\r\n  }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(NewPost);

When they submit their post, we will send it to our bucket:

export const createPost = post => dispatch => {\r\n  return axios.post(`https://api.cosmicjs.com/v1/${cosmicConfig.bucket.slug}/add-object`, {\r\n      title: post.user.username + ' post',\r\n      type_slug: 'posts',\r\n      content: post.content,\r\n      metafields: [\r\n        {\r\n          type: 'object',\r\n          title: 'User',\r\n          key: 'user',\r\n          object_type: 'users',\r\n          value: post.user.id\r\n        },\r\n      ]\r\n    })\r\n      .then(res => formatPost(res.data, post))\r\n      .then(formattedPost => dispatch(create(formattedPost)))\r\n      .then(() => Actions.feed({type: 'popAndReplace'}))\r\n      .catch(error => console.error('Post unsuccessful', error))\r\n}

and then redirect back to the feed which will pull in the updated list of posts. Users can also refresh their feed to see new posts and logout from the Feed.

Conclusion

We made a Twitter-like app using React Native which utilized the power of the Cosmic API to easily maintain all of the data for our users and posts. We were able to get up and running quickly with a few simple actions that POST and GET our data to/from\r\nour Cosmic Bucket.

","metafields":[{"object_type":"authors","value":"594a7d68aa75cb9c6000078f","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"594a7d68aa75cb9c6000078f","slug":"david-martin","title":"David Martin","content":"","metafields":[{"value":"d305d5a0-568a-11e7-9700-5ba5cd7a4f16-david.jpeg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/d305d5a0-568a-11e7-9700-5ba5cd7a4f16-david.jpeg","imgix_url":"https://imgix.cosmicjs.com/d305d5a0-568a-11e7-9700-5ba5cd7a4f16-david.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-06-21T14:06:32.593Z","created_by":"5357ef811693be2118000001","created":"2017-06-21T14:06:32.593Z","status":"published"}},{"value":"

In this tutorial, we're going to create a small Twitter-like mobile app using React Native. With our app, users will be able to create accounts and log in, see a feed of all of the posts created by themselves and other users, and add their own posts to the feed. The data for all of our users and posts will be managed by Cosmic.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"e7969310-568a-11e7-9700-5ba5cd7a4f16-react-native-twitter-clone.png","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e7969310-568a-11e7-9700-5ba5cd7a4f16-react-native-twitter-clone.png","imgix_url":"https://imgix.cosmicjs.com/e7969310-568a-11e7-9700-5ba5cd7a4f16-react-native-twitter-clone.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-06-21T14:04:53.480Z","created_by":"5357ef811693be2118000001","created":"2017-06-21T14:04:53.480Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"594a7d68aa75cb9c6000078f","slug":"david-martin","title":"David Martin","content":"","metafields":[{"value":"d305d5a0-568a-11e7-9700-5ba5cd7a4f16-david.jpeg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/d305d5a0-568a-11e7-9700-5ba5cd7a4f16-david.jpeg","imgix_url":"https://imgix.cosmicjs.com/d305d5a0-568a-11e7-9700-5ba5cd7a4f16-david.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-06-21T14:06:32.593Z","created_by":"5357ef811693be2118000001","created":"2017-06-21T14:06:32.593Z","status":"published","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/d305d5a0-568a-11e7-9700-5ba5cd7a4f16-david.jpeg","imgix_url":"https://imgix.cosmicjs.com/d305d5a0-568a-11e7-9700-5ba5cd7a4f16-david.jpeg"}}},"teaser":"

In this tutorial, we're going to create a small Twitter-like mobile app using React Native. With our app, users will be able to create accounts and log in, see a feed of all of the posts created by themselves and other users, and add their own posts to the feed. The data for all of our users and posts will be managed by Cosmic.

","featured_image":{"url":"https://cdn.cosmicjs.com/e7969310-568a-11e7-9700-5ba5cd7a4f16-react-native-twitter-clone.png","imgix_url":"https://imgix.cosmicjs.com/e7969310-568a-11e7-9700-5ba5cd7a4f16-react-native-twitter-clone.png"}}},{"_id":"59490fbb6dfe200e55000001","order":124,"slug":"introducing-cosmic-js-extensions","title":"Introducing Cosmic Extensions","content":"

We’re excited to announce Extensions, a powerful new way to create custom experiences within Cosmic.  With Cosmic Extensions, you can now build applications directly into your Bucket Dashboard giving you the power to create customized views and communicate with third party APIs to extend the functionality of Cosmic.

Check out the Extensions documentation.

This is another step in providing you with the best way to collaborate to create amazing products.  I hope you enjoy the new freedom you have to create and customize your Cosmic experience.  Take a look through the Cosmic Extensions documentation for more information on how to get started.   If you have any questions please reach out to us on Twitter and join our community on Slack.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"

We’re excited to announce Extensions, a powerful new way to create custom experiences using Cosmic.  With Cosmic Extensions, you can now build applications directly into your Bucket Dashboard giving you the power to create customized views and communicate with third party APIs to extend the functionality of Cosmic.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"dbec7000-55b0-11e7-9725-3701f7db93c5-extensions-screenshot.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/dbec7000-55b0-11e7-9725-3701f7db93c5-extensions-screenshot.jpg","imgix_url":"https://imgix.cosmicjs.com/dbec7000-55b0-11e7-9725-3701f7db93c5-extensions-screenshot.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-06-20T12:06:19.714Z","created_by":"5357ef811693be2118000001","created":"2017-06-20T12:06:19.715Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

We’re excited to announce Extensions, a powerful new way to create custom experiences using Cosmic.  With Cosmic Extensions, you can now build applications directly into your Bucket Dashboard giving you the power to create customized views and communicate with third party APIs to extend the functionality of Cosmic.

","featured_image":{"url":"https://cdn.cosmicjs.com/dbec7000-55b0-11e7-9725-3701f7db93c5-extensions-screenshot.jpg","imgix_url":"https://imgix.cosmicjs.com/dbec7000-55b0-11e7-9725-3701f7db93c5-extensions-screenshot.jpg"}}},{"_id":"593ef1c06c9cb18749000590","order":125,"slug":"developer-spotlight-brian-mullis","title":"Developer Spotlight: Brian Mullis","content":"

A new Developer Hero joins us in our latest installment of the Cosmic Developer Spotlight Series. We sat down with Brian Mullis, a developer working for an interactive agency in Portland.  Check him out on GitHub, and enjoy the Q/A.

How long have you been building software?

I have been building websites and applications for around 2 years now. Before learning web development I was in the Marines, did private security, and drove tractor trailers across the country. Though incredibly challenging, web development has seriously changed my life, and allowed me to pursue a career I never could have imagined.

What is your preferred development stack?

I learned development using a PHP/MySQL stack. However, lately I’ve been more interested in building front end applications with React and Vue. The shift towards using language-agnostic API’s to access data is interesting to me, and I plan on implementing it more in my future projects.

What past projects are you most proud of and why?

To be honest, I’d have to pick some of my earlier projects where I was learning so much as I went, and creating things in ways nobody would recommend duplicating. I remember making some truly “Frankenstein” applications and getting them to work somehow, it was so much fun.

We know you’ve developed a lot in WordPress and are now going API-first. What's your process for building apps for your clients? 

I have been building WordPress sites for over a year at a small agency. As I became a better developer, I grew increasingly frustrated with WordPress. I prefer to develop locally with modern build tools, which means I’m constantly syncing databases\r\nbetween my local server and development servers, and if that’s not enough of a headache, trying to collaborate with another developer on a project is complete misery. One solution I toyed with was the “headless WordPress” approach, which\r\nis just using the WordPress API to deliver the content to a separate front end application. This worked to an extent, but it’s really forcing the platform to behave in a way it wasn’t intended to be used. This also adds unnecessary confusion\r\nfor the client.

This is where Cosmic picks up the ball and runs with it. The simple interface is perfect for clients, and familiar enough for them to feel comfortable editing content. Collaborating with a fellow developer is now so simple with the one-click deployments from our GitHub repositories. I will not miss the days of syncing WordPress databases across multiple environments. Cosmic has allowed me to create more efficient development processes that reduce headaches and time in getting products to market.

What are some technologies you are excited about that you are using today, or want to learn more about?

I’m really enjoying React with Redux. It pairs perfectly with Cosmic as the backend, and allows me to create cool applications in a much shorter time-period.

Cosmic Developer Spotlight Series

Micah Walter
Joe Tuson
Coding Dojo
Simple Media
Jon Kalfayan
Jon Bloomer

Cosmic is an API-first cloud-based content management platform that makes it easy to manage applications and content. If you have questions about the Cosmic API, please reach out to us on Twitter or join the community on Slack.

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"value":"

A new Developer Hero joins us in our latest installment of the Cosmic Developer Spotlight Series. We sat down with Brian Mullis, a developer in Portland who  lead the charge on innovative app development for his interactive agency.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"19fa4970-4fa9-11e7-9489-8de9c824ec3f-Screen Shot 2017-06-12 at 1.28.11 PM.png","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/19fa4970-4fa9-11e7-9489-8de9c824ec3f-Screen Shot 2017-06-12 at 1.28.11 PM.png","imgix_url":"https://imgix.cosmicjs.com/19fa4970-4fa9-11e7-9489-8de9c824ec3f-Screen Shot 2017-06-12 at 1.28.11 PM.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-06-12T19:55:44.869Z","created_by":"5716b504e9c686d006000073","created":"2017-06-12T19:55:44.869Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

A new Developer Hero joins us in our latest installment of the Cosmic Developer Spotlight Series. We sat down with Brian Mullis, a developer in Portland who  lead the charge on innovative app development for his interactive agency.

","featured_image":{"url":"https://cdn.cosmicjs.com/19fa4970-4fa9-11e7-9489-8de9c824ec3f-Screen Shot 2017-06-12 at 1.28.11 PM.png","imgix_url":"https://imgix.cosmicjs.com/19fa4970-4fa9-11e7-9489-8de9c824ec3f-Screen Shot 2017-06-12 at 1.28.11 PM.png"}}},{"_id":"5936a8b153c2013e6a000386","order":126,"slug":"how-to-build-an-angular-js-ecommerce-app","title":"How to Build an Angular JS Ecommerce App","content":"

In this tutorial I'm going to show you how to create an ecommerce app using Angular JS and Cosmic. For the sake of understanding how to consume Restful API’s, this tutorial will show how to make simple AJAX requests\r\nto the Cosmic API in order to retrieve, update, and delete ecommerce products and data in our Cosmic Bucket.   At the end of this tutorial we will have a fully-functioning ecommerce website that can be deployed to begin accepting purchases through Stripe.  Let's get started.

TL;DR

Check out the demo.
Download the GitHub repo.
Install the app and deploy in minutes. (Go to Your Bucket > Apps)

Getting Started

First, let’s make a new directory to build our project in and lets also make a package.json file.

mkdir ecommerce-app
ecommerce-app$ touch package.json

Now, in your package.json, copy and paste the code below:

//ecommerce-app/package.json\r\n{\r\n  "name": "ecommerce-app",\r\n  "version": "1.0.0",\r\n  "main": "app-server.js",\r\n  "engines": {\r\n    "node": "4.1.2",\r\n    "npm": "3.5.2"\r\n  },\r\n  "description": "",\r\n  "dependencies": {\r\n    "bower": "^1.7.7",\r\n    "express": "^4.13.3",\r\n    "gulp": "^3.9.1",\r\n    "buffer-to-vinyl": "^1.1.0",\r\n    "gulp-autoprefixer": "^3.1.0",\r\n    "gulp-concat": "^2.6.0",\r\n    "gulp-concat-css": "^2.2.0",\r\n    "gulp-minify-css": "^1.2.4",\r\n    "gulp-ng-config": "^1.4.0",\r\n    "gulp-env": "^0.4.0",\r\n    "gulp-webserver": "^0.9.1",\r\n    "http-server": "^0.9.0",\r\n    "wiredep": "^3.0.0",\r\n    "gulp-npm-script-sync": "^1.1.0"\r\n  },\r\n  "scripts": {\r\n    "postinstall": "bower install && gulp config && gulp js",\r\n    "start": "npm run production",\r\n    "production": "node app-server.js",\r\n    "gulp": "gulp"\r\n  },\r\n  "author": "",\r\n  "license": "ISC",\r\n  "devDependencies": {\r\n    "gulp-npm-script-sync": "^1.1.0",\r\n    "gulp-remote-src": "^0.4.2"\r\n  }\r\n}\r\n

Second, let’s make a bower.json file.

ecommerce-app$ touch bower.json

Now, in your bower.json, copy and paste the code below:

//ecommerce-app/bower.json\r\n{\r\n  "name": "ecommerce-app",\r\n  "description": "Ecommerce App",\r\n  "version": "0.0.0",\r\n  "homepage": "https://github.com/kutsaniuk/ecommerce-app",\r\n  "license": "MIT",\r\n  "private": true,\r\n  "dependencies": {\r\n    "angular": "~1.4.x",\r\n    "angular-mocks": "~1.4.x",\r\n    "angular-bootstrap": "~1.1.x",\r\n    "angular-cookies": "~1.4.x",\r\n    "angular-route": "~1.4.x",\r\n    "angular-ui-router": "0.2.x",\r\n    "angular-resource": "1.4.x",\r\n    "angular-animate": "~1.4.x",\r\n    "ng-dialog": "0.6.1",\r\n    "bootstrap": "3.3.x",\r\n    "cr-acl": "",\r\n    "angular-chosen-localytics": "*",\r\n    "bootstrap-chosen": "*",\r\n    "ng-flow": "^2.7.4",\r\n    "angular-mask": "*",\r\n    "checklist-model": "0.9.0",\r\n    "angular-ui-notification": "^0.2.0",\r\n    "angular-ui-calendar": "^1.0.2",\r\n    "angular-ui-switch": "^0.1.1",\r\n    "ng-scrollbars": "^0.0.11",\r\n    "jquery.scrollbar": "*",\r\n    "angular-nvd3": "*",\r\n    "infinity-angular-chosen": "^0.2.0",\r\n    "angular-flash-alert": "^2.4.0",\r\n    "components-font-awesome": "^4.7.0",\r\n    "textAngular": "^1.5.16",\r\n    "angular-loading-bar": "^0.9.0",\r\n    "angular-environment": "^1.0.8",\r\n    "angular-sticky": "angular-sticky-plugin#^0.3.0"\r\n  },\r\n  "resolutions": {\r\n    "angular": "~1.4.x"\r\n  },\r\n  "devDependencies": {\r\n    "cr-acl": "^0.5.0"\r\n  }\r\n}\r\n

Config app server:

ecommerce-app$ touch app-server.js
//events-app/app-server.js\r\nvar express = require('express');\r\nvar app = express();\r\napp.set('port', process.env.PORT || 3000)\r\napp.use(express.static(__dirname))\r\nvar http = require('http').Server(app)\r\napp.get('/', (req, res) => {\r\n  res.sendFile(__dirname + '/index.html');\r\n})\r\nhttp.listen(app.get('port'), () => {\r\n  console.log('Ecommerce App listening on ' + app.get('port'))\r\n})\r\n

What we're installing and why

  1. We're going to use the AngularJS framework to build Single-page application
  2. We're installing angular-ui-router for create multi views.
  3. We are going to use gulp for build all js and css files into one file.

Building our app

Now we're going to build out our file structure a bit more so that we can organize our angular modules and js files. This is what our ecommerce-app directory should look like:

ecommerce-app\r\n|----app\r\n|       |----auth\r\n|                 |----auth.ctrl.js\r\n|                 |----auth.service.js\r\n|       |----config\r\n|                 |----config.js\r\n|       |----watch\r\n|                 |----profile\r\n|                           |----watch.profile.ctrl.js\r\n|                           |----watch.profile.mdl.js\r\n|                 |----watch.ctrl.js\r\n|                 |----watch.mdl.js\r\n|                 |----watch.service.js\r\n|       |----admin\r\n|                 |----orders\r\n|                           |----preview\r\n|                                   |----admin.orders.preview.mdl.js\r\n|                           |----admin.orders.ctrl.js\r\n|                           |----admin.orders.mdl.js\r\n|                           |----admin.orders.service.js\r\n|                 |----watches\r\n|                           |----add\r\n|                                   |----admin.watches.add.ctrl.js\r\n|                                   |----admin.watches.add.mdl.js\r\n|                           |----edit\r\n|                                   |----admin.watches.edit.ctrl.js\r\n|                                   |----admin.watches.edit.mdl.js\r\n|                           |----admin.watches.mdl.js\r\n|                 |----admin.ctrl.js\r\n|                 |----admin.mdl.js\r\n|       |----cart\r\n|                 |----checkout\r\n|                           |----cart.checkout.mdl.js\r\n|                 |----cart.ctrl.js\r\n|                 |----cart.mdl.js\r\n|                 |----cart.service.js\r\n|       |----user\r\n|                 |----user.service.js\r\n|       |----main.mdl.js\r\n|----dist\r\n|       |----css\r\n|       |----img\r\n|       |----js\r\n|----css\r\n|----views\r\n|----gulpfile.js\r\n|----app-server.js\r\n|----bower.json\r\n|----package.json\r\n

Now we we will set up our index.html. Copy and paste the following code into your index.html file:

<!DOCTYPE html>\r\n<html lang="en" ng-app="main">\r\n<head>\r\n    <meta charset="utf-8">\r\n    <meta http-equiv="X-UA-Compatible" content="IE=edge">\r\n    <meta name="viewport" content="width=device-width, initial-scale=1">\r\n    <meta name="description" content="">\r\n    <meta name="author" content="">\r\n\r\n    <title>Ecommerce App</title>\r\n\r\n    <!-- bower:css -->\r\n    <!-- endbower -->\r\n\r\n    <!-- Bootstrap Core CSS -->\r\n    <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">\r\n\r\n    <!-- Custom CSS -->\r\n\r\n    <link href="dist/css/main.min.css" rel="stylesheet">\r\n\r\n\r\n    \r\n    \r\n    <!--[if lt IE 9]>\r\n    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>\r\n    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>\r\n    <![endif]-->\r\n\r\n</head>\r\n<body>\r\n\r\n<div ui-view></div>\r\n\r\n<!-- bower:js -->\r\n<!-- endbower -->\r\n\r\n<script src="dist/js/main.js"></script>\r\n</body>\r\n</html>\r\n

Here, we are going to target our "root" view to place our angular modules in later. The main.js file located in our dist directory is what our gulpfile.js file will spit out after bundling all of our angular modules Now, set up our gulpfile.js file to bundle all of our js files and export that bundle file to our dist directory. Copy the following code into your gulpfile.js file:

//ecommerce-app/gulpfile.js\r\n'use strict';\r\n\r\nvar gulp = require('gulp'),\r\n    webserver = require('gulp-webserver'),\r\n    minifyCSS = require('gulp-minify-css'),\r\n    concat = require('gulp-concat'),\r\n    wiredep = require('wiredep').stream,\r\n    gulpNgConfig = require('gulp-ng-config'),\r\n    autoprefixer = require('gulp-autoprefixer'),\r\n    b2v = require('buffer-to-vinyl'),\r\n    sync = require('gulp-npm-script-sync');\r\n\r\nsync(gulp);\r\n\r\ngulp.task('css', function () {\r\n  return gulp.src('css/**/*.css')\r\n    .pipe(minifyCSS())\r\n    .pipe(concat('main.min.css'))\r\n    .pipe(autoprefixer())\r\n    .pipe(gulp.dest('dist/css'));\r\n});\r\n\r\ngulp.task('js', function() {\r\n    return gulp.src('app/**/**/*.js')\r\n        .pipe(concat('main.js'))\r\n        .pipe(gulp.dest('dist/js/'));\r\n});\r\n\r\ngulp.task('config', function () {\r\n    const json = JSON.stringify({\r\n        BUCKET_SLUG: process.env.COSMIC_BUCKET,\r\n        MEDIA_URL: 'https://api.cosmicjs.com/v1/' + process.env.COSMIC_BUCKET + '/media',\r\n        URL: 'https://api.cosmicjs.com/v1/',\r\n        READ_KEY: process.env.COSMIC_READ_KEY || '',\r\n        WRITE_KEY: process.env.COSMIC_WRITE_KEY || ''\r\n    });\r\n    return b2v.stream(new Buffer(json), 'config.js')\r\n        .pipe(gulpNgConfig('config'))\r\n        .pipe(gulp.dest('app/config'));\r\n});\r\n\r\ngulp.task('default', function () {\r\n  gulp.watch('css/**/*.css', ['css']);\r\n  gulp.watch('app/**/**/*.js', ['js']);\r\n  gulp.watch('bower.json', ['bower']);\r\n});\r\n\r\ngulp.task('bower', function () {\r\n  gulp.src('index.html')\r\n    .pipe(wiredep({\r\n      directory: 'bower_components'\r\n    }))\r\n    .pipe(gulp.dest(''));\r\n});\r\n

After that we can create main module. Copy and paste the following code into your index.html file:

(function () {\r\n    'use strict';\r\n\r\n    angular\r\n        .module('main', [\r\n            'ui.router',\r\n            'ui.bootstrap',\r\n            'ngMask',\r\n            'ngCookies',\r\n            'ngRoute',\r\n            'ngDialog',\r\n            'cr.acl',\r\n            'ui-notification',\r\n            'ngFlash',\r\n            'textAngular',\r\n            'flow',\r\n            'angular-loading-bar',\r\n            'hl.sticky',\r\n\r\n            'watch',\r\n            'cart',\r\n            'admin',\r\n\r\n            'config'\r\n        ])\r\n        .config(config)\r\n        .run(run);\r\n\r\n    config.$inject = ['$stateProvider', '$urlRouterProvider', 'cfpLoadingBarProvider', 'NotificationProvider'];\r\n    function config($stateProvider, $urlRouterProvider, cfpLoadingBarProvider, NotificationProvider) {\r\n        cfpLoadingBarProvider.includeSpinner = false;\r\n\r\n        NotificationProvider.setOptions({\r\n            startTop: 25,\r\n            startRight: 25,\r\n            verticalSpacing: 20,\r\n            horizontalSpacing: 20,\r\n            positionX: 'right',\r\n            positionY: 'bottom'\r\n        });\r\n\r\n        $urlRouterProvider.otherwise(function ($injector) {\r\n            var $state = $injector.get("$state");\r\n            var $location = $injector.get("$location");\r\n            var crAcl = $injector.get("crAcl");\r\n\r\n            var state = "";\r\n\r\n            switch (crAcl.getRole()) {\r\n                case 'ROLE_ADMIN':\r\n                    state = 'admin.watches';\r\n                    break;\r\n                default : state = 'main.watch';\r\n            }\r\n\r\n            if (state) $state.go(state);\r\n            else $location.path('/');\r\n        });\r\n\r\n        $stateProvider\r\n            .state('main', {\r\n                url: '/',\r\n                abstract: true,\r\n                templateUrl: '../views/main.html',\r\n                controller: 'CartCtrl as cart',\r\n                data: {\r\n                    is_granted: ['ROLE_GUEST']\r\n                }\r\n            })\r\n            .state('blog', {\r\n                url: '/blog',\r\n                templateUrl: '../blog.html'\r\n            })\r\n            .state('auth', {\r\n                url: '/login',\r\n                templateUrl: '../views/auth/login.html',\r\n                controller: 'AuthCtrl as auth',\r\n                onEnter: ['AuthService', 'crAcl', function(AuthService, crAcl) {\r\n                    AuthService.clearCredentials();\r\n                    crAcl.setRole();\r\n                }],\r\n                data: {\r\n                    is_granted: ['ROLE_GUEST']\r\n                }\r\n            });\r\n    }\r\n\r\n    run.$inject = ['$rootScope', '$cookieStore', '$state', 'crAcl'];\r\n    function run($rootScope, $cookieStore, $state, crAcl) {\r\n        // keep user logged in after page refresh\r\n        $rootScope.globals = $cookieStore.get('globals') || {};\r\n\r\n        crAcl\r\n            .setInheritanceRoles({\r\n                'ROLE_ADMIN': ['ROLE_ADMIN', 'ROLE_GUEST'],\r\n                'ROLE_GUEST': ['ROLE_GUEST']\r\n            });\r\n\r\n        crAcl\r\n            .setRedirect('main.watch');\r\n\r\n        if ($rootScope.globals.currentUser) {\r\n            crAcl.setRole($rootScope.globals.currentUser.metadata.role);\r\n            // $state.go('admin.watches');\r\n        }\r\n        else {\r\n            crAcl.setRole();\r\n        }\r\n\r\n    }\r\n\r\n})();\r\n

Now we we will set up our Auth Controller. Copy and paste the following code into your auth.ctrl.js file:

(function () {\r\n    'use strict';\r\n\r\n    angular\r\n        .module('main')\r\n        .controller('AuthCtrl', AuthCtrl);\r\n\r\n    function AuthCtrl(crAcl, $state, AuthService, Flash, $log) {\r\n        var vm = this;\r\n\r\n        vm.login = login;\r\n\r\n        vm.showRegisterForm = false;\r\n\r\n        vm.loginForm = null;\r\n\r\n        vm.credentials = {};\r\n        vm.user = {};\r\n\r\n        function login(credentials) {\r\n            function success(response) {\r\n                function success(response) {\r\n                    if (response.data.status !== 'empty') {\r\n                        var currentUser = response.data.objects[0];\r\n\r\n                        crAcl.setRole(currentUser.metadata.role);\r\n                        AuthService.setCredentials(currentUser);\r\n                        $state.go('admin.watches');\r\n                    }\r\n                    else\r\n                        Flash.create('danger', 'Incorrect username or password');\r\n                }\r\n\r\n                function failed(response) {\r\n                    $log.error(response);\r\n                }\r\n\r\n                if (response.data.status !== 'empty')\r\n                    AuthService\r\n                        .checkPassword(credentials)\r\n                        .then(success, failed);\r\n                else\r\n                    Flash.create('danger', 'Incorrect username or password');\r\n\r\n                $log.info(response);\r\n            }\r\n\r\n            function failed(response) {\r\n                $log.error(response);\r\n            }\r\n\r\n            if (vm.loginForm.$valid)\r\n                AuthService\r\n                    .checkUsername(credentials)\r\n                    .then(success, failed);\r\n        }\r\n\r\n    }\r\n})();\r\n

Create Auth Service, copy and paste the code below:

(function () {\r\n    'use strict';\r\n\r\n    angular\r\n        .module('main')\r\n        .service('AuthService', function ($http,\r\n                                          $cookieStore,\r\n                                          $q,\r\n                                          $rootScope,\r\n                                          URL, BUCKET_SLUG, READ_KEY, WRITE_KEY) {\r\n            var authService = this;\r\n            $http.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';\r\n\r\n            authService.checkUsername = function (credentials) {\r\n                return $http.get(URL + BUCKET_SLUG + '/object-type/users/search', {\r\n                    params: {\r\n                        metafield_key: 'email',\r\n                        metafield_value_has: credentials.email,\r\n                        limit: 1,\r\n                        read_key: READ_KEY\r\n                    }\r\n                });\r\n            };\r\n            authService.checkPassword = function (credentials) {\r\n                return $http.get(URL + BUCKET_SLUG + '/object-type/users/search', {\r\n                    ignoreLoadingBar: true,\r\n                    params: {\r\n                        metafield_key: 'password',\r\n                        metafield_value: credentials.password,\r\n                        limit: 1,\r\n                        read_key: READ_KEY\r\n                    }\r\n                });\r\n            };\r\n            authService.setCredentials = function (user) {\r\n                $rootScope.globals = {\r\n                    currentUser: user\r\n                };\r\n\r\n                $cookieStore.put('globals', $rootScope.globals);\r\n            };\r\n            authService.clearCredentials = function () {\r\n                var deferred = $q.defer();\r\n                $cookieStore.remove('globals');\r\n\r\n                if (!$cookieStore.get('globals')) {\r\n                    $rootScope.globals = {};\r\n                    deferred.resolve('Credentials clear success');\r\n                } else {\r\n                    deferred.reject('Can\\'t clear credentials');\r\n                }\r\n\r\n                return deferred.promise;\r\n            };\r\n        });\r\n})();\r\n

What's going on here

  1. We are using the ui-router for config routes.
  2. We created Auth Service for our asynchronous calls to our Cosmic API.
  3. We created Auth Controller for checking credentials.

Create User Service for get and update User, copy and paste the code below:

(function () {\r\n    'use strict';\r\n\r\n    angular\r\n        .module('main')\r\n        .service('UserService', function ($http,\r\n                                          $cookieStore,\r\n                                          $q,\r\n                                          $rootScope,\r\n                                          URL, BUCKET_SLUG, READ_KEY, WRITE_KEY) {\r\n            $http.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';\r\n\r\n            this.getCurrentUser = function (ignoreLoadingBar) {\r\n                return $http.get(URL + BUCKET_SLUG + '/object/' + $rootScope.globals.currentUser.slug, {\r\n                    ignoreLoadingBar: ignoreLoadingBar,\r\n                    params: {\r\n                        read_key: READ_KEY\r\n                    }\r\n                });\r\n            };\r\n            this.getUser = function (slug, ignoreLoadingBar) {\r\n                return $http.get(URL + BUCKET_SLUG + '/object/' + slug, {\r\n                    ignoreLoadingBar: ignoreLoadingBar,\r\n                    params: {\r\n                        read_key: READ_KEY\r\n                    }\r\n                });\r\n            };\r\n            this.updateUser = function (user) {\r\n                user.write_key = WRITE_KEY;\r\n\r\n                return $http.put(URL + BUCKET_SLUG + '/edit-object', user, {\r\n                    ignoreLoadingBar: false\r\n                });\r\n            };\r\n\r\n        });\r\n})();\r\n

Create Watch Service for get, update, add delete Watches from Cosmic API, copy and paste the code below:

(function () {\r\n    'use strict';\r\n\r\n    angular\r\n        .module('main')\r\n        .service('WatchService', function ($http,\r\n                                          $cookieStore,\r\n                                          $q,\r\n                                          $rootScope,\r\n                                          URL, BUCKET_SLUG, READ_KEY, WRITE_KEY, MEDIA_URL) {\r\n\r\n            $http.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';\r\n\r\n            this.watch = {\r\n                title: null,\r\n                type_slug: 'watches',\r\n                content: null,\r\n                metafields: [\r\n                    {\r\n                        key: "category",\r\n                        title: "Category",\r\n                        type: "text",\r\n                        value: null\r\n                    },\r\n                    {\r\n                        key: "brand",\r\n                        title: "Brand",\r\n                        type: "text",\r\n                        value: null\r\n                    },\r\n                    {\r\n                        key: "case_size",\r\n                        title: "Case Size",\r\n                        type: "text",\r\n                        value: null\r\n                    },\r\n                    {\r\n                        key: "case_thickness",\r\n                        title: "Case Thickness",\r\n                        type: "text",\r\n                        value: null\r\n                    },\r\n                    {\r\n                        key: "strap_width",\r\n                        title: "Strap Width",\r\n                        type: "text",\r\n                        value: null\r\n                    },\r\n                    {\r\n                        key: "movement",\r\n                        title: "Movement",\r\n                        type: "text",\r\n                        value: null\r\n                    },\r\n                    {\r\n                        key: "glass",\r\n                        title: "Glass",\r\n                        type: "text",\r\n                        value: null\r\n                    },\r\n                    {\r\n                        key: "water_resistance",\r\n                        title: "Water Resistance",\r\n                        type: "text",\r\n                        value: null\r\n                    },\r\n                    {\r\n                        key: "color",\r\n                        title: "Color",\r\n                        type: "text",\r\n                        value: null\r\n                    },\r\n                    {\r\n                        key: "strap_material",\r\n                        title: "Strap Material",\r\n                        type: "text",\r\n                        value: null\r\n                    },\r\n                    {\r\n                        key: "price",\r\n                        title: "Price",\r\n                        type: "text",\r\n                        value: null\r\n                    },\r\n                    {\r\n                        key: "images",\r\n                        title: "Images",\r\n                        type: "parent",\r\n                        value: "",\r\n                        children: [\r\n                            {\r\n                                key: "image_1",\r\n                                title: "Image_1",\r\n                                type: "file"\r\n                            },\r\n                            {\r\n                                key: "image_2",\r\n                                title: "Image_2",\r\n                                type: "file"\r\n                            },\r\n                            {\r\n                                key: "image_3",\r\n                                title: "Image_3",\r\n                                type: "file"\r\n                            }\r\n                        ]\r\n                    }\r\n                ]\r\n            };\r\n\r\n            this.getWatches = function (params) {\r\n                if (!angular.equals({}, params))\r\n                    return $http.get(URL + BUCKET_SLUG + '/object-type/watches/search', {\r\n                        params: {\r\n                            metafield_key: params.key,\r\n                            metafield_value_has: params.value,\r\n                            limit: 100,\r\n                            read_key: READ_KEY\r\n                        }\r\n                    });\r\n                else\r\n                    return $http.get(URL + BUCKET_SLUG + '/object-type/watches', {\r\n                        params: {\r\n                            limit: 100,\r\n                            read_key: READ_KEY\r\n                        }\r\n                    });\r\n            };\r\n            this.getWatchesParams = function () {\r\n                return $http.get(URL + BUCKET_SLUG + '/object-type/watches', {\r\n                    params: {\r\n                        limit: 100,\r\n                        read_key: READ_KEY\r\n                    }\r\n                });\r\n            };\r\n            this.getWatchBySlug = function (slug) {\r\n                return $http.get(URL + BUCKET_SLUG + '/object/' + slug, {\r\n                    params: {\r\n                        read_key: READ_KEY\r\n                    }\r\n                });\r\n            };\r\n            this.updateWatch = function (event) {\r\n                event.write_key = WRITE_KEY;\r\n\r\n                return $http.put(URL + BUCKET_SLUG + '/edit-object', event);\r\n            };\r\n            this.removeWatch = function (slug) {\r\n                return $http.delete(URL + BUCKET_SLUG + '/' + slug, {\r\n                    ignoreLoadingBar: true,\r\n                    headers:{\r\n                        'Content-Type': 'application/json'\r\n                    },\r\n                    data: {\r\n                        write_key: WRITE_KEY\r\n                    }\r\n                });\r\n            };\r\n            this.createWatch = function (watch) {\r\n                watch.write_key = WRITE_KEY;\r\n\r\n                return $http.post(URL + BUCKET_SLUG + '/add-object', watch);\r\n            };\r\n            this.upload = function (file) {\r\n                var fd = new FormData();\r\n\r\n                fd.append('media', file);\r\n                fd.append('write_key', WRITE_KEY);\r\n\r\n                var defer = $q.defer();\r\n\r\n                var xhttp = new XMLHttpRequest();\r\n\r\n                xhttp.upload.addEventListener("progress",function (e) {\r\n                    defer.notify(parseInt(e.loaded * 100 / e.total));\r\n                });\r\n                xhttp.upload.addEventListener("error",function (e) {\r\n                    defer.reject(e);\r\n                });\r\n\r\n                xhttp.onreadystatechange = function() {\r\n                    if (xhttp.readyState === 4) {\r\n                        defer.resolve(JSON.parse(xhttp.response)); //Outputs a DOMString by default\r\n                    }\r\n                };\r\n\r\n                xhttp.open("post", MEDIA_URL, true);\r\n\r\n                xhttp.send(fd);\r\n\r\n                return defer.promise;\r\n            }\r\n        });\r\n})();\r\n

Create Watch Controller for get all events and remove, copy and paste the code below:

(function () {\r\n    'use strict';\r\n\r\n    angular\r\n        .module('main')\r\n        .controller('WatchCtrl', WatchCtrl);\r\n\r\n    function WatchCtrl($stateParams, WatchService, Notification, $log, MEDIA_URL, $state) {\r\n        var vm = this;\r\n\r\n        vm.getWatches = getWatches;\r\n        vm.removeWatch = removeWatch;\r\n\r\n        vm.params = $stateParams;\r\n\r\n        vm.categories = [];\r\n        vm.brands = [];\r\n        vm.case_sizes = [];\r\n        vm.colors = [];\r\n\r\n        vm.watches = [];\r\n\r\n        function getWatches() {\r\n            function success(response) {\r\n                $log.info(response);\r\n\r\n                vm.watches = response.data.objects;\r\n\r\n            }\r\n\r\n            function failed(response) {\r\n                $log.error(response);\r\n            }\r\n\r\n            function params(response) {\r\n                response.data.objects.forEach(function (item) {\r\n                    if (vm.categories.indexOf(item.metadata.category) === -1)\r\n                        vm.categories.push(item.metadata.category);\r\n                    if (vm.brands.indexOf(item.metadata.brand) === -1)\r\n                        vm.brands.push(item.metadata.brand);\r\n                    if (vm.case_sizes.indexOf(item.metadata.case_size) === -1)\r\n                        vm.case_sizes.push(item.metadata.case_size);\r\n                    if (vm.colors.indexOf(item.metadata.color) === -1)\r\n                        vm.colors.push(item.metadata.color)\r\n                });\r\n            }\r\n\r\n            WatchService\r\n                .getWatches($stateParams)\r\n                .then(success, failed);\r\n\r\n            WatchService\r\n                .getWatchesParams()\r\n                .then(params);\r\n        }\r\n\r\n        function removeWatch(slug) {\r\n            function success(response) {\r\n                $log.info(response);\r\n                getWatches();\r\n                Notification.success('Removed!');\r\n            }\r\n\r\n            function failed(response) {\r\n                $log.error(response);\r\n            }\r\n\r\n            WatchService\r\n                .removeWatch(slug)\r\n                .then(success, failed);\r\n\r\n        }\r\n\r\n    }\r\n})();\r\n

Create Watch Module, copy and paste the code below:

(function () {\r\n    'use strict';\r\n\r\n    angular\r\n        .module('watch', [\r\n            'watch.profile'\r\n        ])\r\n        .config(config);\r\n\r\n    config.$inject = ['$stateProvider', '$urlRouterProvider'];\r\n    function config($stateProvider, $urlRouterProvider) {\r\n\r\n        $stateProvider\r\n            .state('main.watch', {\r\n                url: '?key&value',\r\n                templateUrl: '../views/watch/watch.list.html',\r\n                controller: 'WatchCtrl as vm'\r\n            });\r\n    }\r\n})();\r\n

What's going on here

  1. We created Watch Service for our asynchronous calls to our Cosmic API. We can create, update, remove and getting Watches.
  2. We created Watch Controller for getting all watches and remove.
  3. We created Watch Module.

Create Watch Profile Controller for getting watch information, copy and paste the code below:

(function () {\r\n    'use strict';\r\n\r\n    angular\r\n        .module('main')\r\n        .controller('WatchProfileCtrl', WatchProfileCtrl);\r\n\r\n    function WatchProfileCtrl(UserService, $stateParams, WatchService, Notification, $log, MEDIA_URL, $state) {\r\n        var vm = this;\r\n\r\n        vm.getWatch = getWatch;\r\n\r\n        function getWatch() {\r\n            function success(response) {\r\n                $log.info(response);\r\n                vm.watch = response.data.object;\r\n            }\r\n\r\n            function failed(response) {\r\n                $log.error(response);\r\n            }\r\n\r\n            WatchService\r\n                .getWatchBySlug($stateParams.slug)\r\n                .then(success, failed);\r\n        }\r\n\r\n    }\r\n})();\r\n\r\n

Create Watch Profile Module, copy and paste the code below:

(function () {\r\n    'use strict';\r\n\r\n    angular\r\n        .module('watch.profile', [])\r\n        .config(config);\r\n\r\n    config.$inject = ['$stateProvider', '$urlRouterProvider'];\r\n    function config($stateProvider, $urlRouterProvider) {\r\n\r\n        $stateProvider\r\n            .state('main.watch.profile', {\r\n                url: 'watches/:slug',\r\n                views: {\r\n                    '@main': {\r\n                        templateUrl: '../views/watch/watch.profile.html',\r\n                        controller: 'WatchProfileCtrl as vm'\r\n                    }\r\n                }\r\n            });\r\n    }\r\n\r\n})();

Create Cart Controller, copy and paste the code below:

    (function () {\r\n    'use strict';\r\n\r\n    angular\r\n        .module('main')\r\n        .controller('CartCtrl', CartCtrl);\r\n\r\n    function CartCtrl(CartService, WatchService, Notification, $log, MEDIA_URL, $state) {\r\n        var vm = this;\r\n\r\n        vm.addToCart = addToCart;\r\n        vm.getCart = getCart;\r\n        vm.hasInCart = hasInCart;\r\n        vm.removeFromCart = removeFromCart;\r\n        vm.completeOrder = completeOrder;\r\n\r\n        vm.cart = {};\r\n        vm.cart.order = {};\r\n        vm.watches = [];\r\n        vm.totalPrice = 0;\r\n        vm.orderForm = null;\r\n\r\n        function addToCart(item) {\r\n            function success(response) {\r\n                Notification.success(response);\r\n                getCart();\r\n\r\n            }\r\n\r\n            function failed(response) {\r\n                Notification.error(response);\r\n            }\r\n\r\n            CartService\r\n                .addToCart(item)\r\n                .then(success, failed);\r\n\r\n        }\r\n\r\n        function completeOrder(order) {\r\n            order.watches = vm.watches;\r\n\r\n            function success(response) {\r\n                Notification.success('Success');\r\n\r\n            }\r\n\r\n            function failed(response) {\r\n                Notification.error(response.data.message);\r\n            }\r\n\r\n            if (vm.orderForm)\r\n                CartService\r\n                    .completeOrder(order)\r\n                    .then(success, failed);\r\n        }\r\n\r\n        function removeFromCart(_id) {\r\n            function success(response) {\r\n                Notification.success(response);\r\n                getCart();\r\n            }\r\n\r\n            function failed(response) {\r\n                Notification.error(response);\r\n            }\r\n\r\n            CartService\r\n                .removeFromCart(_id)\r\n                .then(success, failed);\r\n\r\n        }\r\n\r\n        function hasInCart(_id) {\r\n            return CartService.hasInCart(_id);\r\n        }\r\n\r\n        function getCart() {\r\n            function success(response) {\r\n                vm.cart = response;\r\n                getWatches();\r\n\r\n                $log.info(response);\r\n            }\r\n\r\n            function failed(response) {\r\n                $log.error(response);\r\n            }\r\n\r\n            CartService\r\n                .getCart()\r\n                .then(success, failed);\r\n\r\n        }\r\n\r\n        function getWatches() {\r\n            function success(response) {\r\n                $log.info(response);\r\n\r\n                vm.watches = [];\r\n                vm.totalPrice = 0;\r\n\r\n                for (var _id in vm.cart)\r\n                    response.data.objects.forEach(function (item) {\r\n                        if (item._id === _id) {\r\n                            vm.watches.push(item);\r\n                            vm.totalPrice += item.metadata.price;\r\n                        }\r\n                    });\r\n\r\n            }\r\n\r\n            function failed(response) {\r\n                $log.error(response);\r\n            }\r\n\r\n            WatchService\r\n                .getWatches({})\r\n                .then(success, failed);\r\n\r\n        }\r\n    }\r\n})();

Create Cart Service, copy and paste the code below:

    (function () {\r\n    'use strict';\r\n\r\n    angular\r\n        .module('main')\r\n        .service('CartService', function ($http,\r\n                                          $cookieStore,\r\n                                          $q,\r\n                                          $rootScope,\r\n                                          URL, BUCKET_SLUG, READ_KEY, WRITE_KEY) {\r\n            var that = this;\r\n            $http.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';\r\n\r\n            that.addToCart = function (item) {\r\n                var deferred = $q.defer();\r\n\r\n                var cart = $cookieStore.get('cart');\r\n                cart = cart ? cart : {};\r\n\r\n                if (!(item._id in cart)) {\r\n                    cart[item._id] = item._id;\r\n\r\n                    $cookieStore.put('cart', cart);\r\n\r\n                    deferred.resolve('Added to cart');\r\n                } else {\r\n                    deferred.reject('Error: Can\\'t added to cart');\r\n                }\r\n\r\n                return deferred.promise;\r\n            };\r\n\r\n            that.getCart = function () {\r\n                var deferred = $q.defer();\r\n                var cart = $cookieStore.get('cart');\r\n\r\n                if (cart) {\r\n                    deferred.resolve(cart);\r\n                } else {\r\n                    deferred.reject('Error: Can\\'t get cart');\r\n                }\r\n\r\n                return deferred.promise;\r\n            };\r\n\r\n            that.removeFromCart = function (_id) {\r\n                var deferred = $q.defer();\r\n\r\n                var cart = $cookieStore.get('cart');\r\n                cart = cart ? cart : {};\r\n\r\n                if (_id in cart) {\r\n                    delete cart[_id];\r\n\r\n                    $cookieStore.put('cart', cart);\r\n\r\n                    deferred.resolve('Removed from cart');\r\n                } else {\r\n                    deferred.reject('Error: Can\\'t remove from cart');\r\n                }\r\n\r\n                return deferred.promise;\r\n            };\r\n\r\n            that.hasInCart = function (_id) {\r\n                var cart = $cookieStore.get('cart');\r\n                cart = cart ? cart : {};\r\n\r\n                return _id in cart;\r\n            };\r\n\r\n            that.completeOrder = function (order) {\r\n                var watches = [];\r\n\r\n                order.watches.forEach(function (item) {\r\n                    watches.push(item._id);\r\n                });\r\n\r\n                return $http.post(URL + BUCKET_SLUG + '/add-object/', {\r\n                    write_key: WRITE_KEY,\r\n                    title: order.firstName + ' ' + order.lastName,\r\n                    type_slug: "orders",\r\n                    metafields: [\r\n                        {\r\n                            key: "first_name",\r\n                            type: "text",\r\n                            value: order.firstName\r\n\r\n                        },\r\n                        {\r\n                            key: "last_name",\r\n                            type: "text",\r\n                            value: order.lastName\r\n\r\n                        },\r\n                        {\r\n                            key: "address",\r\n                            type: "text",\r\n                            value: order.address\r\n\r\n                        },\r\n                        {\r\n                            key: "city",\r\n                            type: "text",\r\n                            value: order.city\r\n\r\n                        },\r\n                        {\r\n                            key: "phone",\r\n                            type: "text",\r\n                            value: order.phone\r\n\r\n                        },\r\n                        {\r\n                            key: "postal_code",\r\n                            type: "text",\r\n                            value: order.postalCode\r\n\r\n                        },\r\n                        {\r\n                            key: "email",\r\n                            type: "text",\r\n                            value: order.email\r\n                        },\r\n                        {\r\n                            key: "watches",\r\n                            type: "objects",\r\n                            object_type: "watches",\r\n                            value: watches.join()\r\n                        }\r\n                    ]\r\n                });\r\n            };\r\n        });\r\n})();

Create Cart Module, copy and paste the code below:

    (function () {\r\n    'use strict';\r\n\r\n    angular\r\n        .module('cart', [\r\n            'cart.checkout'\r\n        ])\r\n        .config(config);\r\n\r\n    config.$inject = ['$stateProvider', '$urlRouterProvider'];\r\n    function config($stateProvider, $urlRouterProvider) {\r\n\r\n        $stateProvider\r\n            .state('main.cart', {\r\n                url: 'cart',\r\n                templateUrl: '../views/cart/cart.html'\r\n            });\r\n    }\r\n})();

What's going on here

  1. We can see information about watches.
  2. We can adding watches to cart.

Next Steps

Deploy this app in minutes from Cosmic.  After you deploy, you can set your Stripe keys as environment variables by going to Your Bucket > Deploy\r\nWeb App > Set Environment Variables.  Begin adding products and charging users for your goods! I hope you enjoyed this tutorial as much as I did, if you have any questions reach out to us on Twitterand join our community on Slack.

","metafields":[{"object_type":"authors","value":"5914999aa57d9d4b390034d5","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5914999aa57d9d4b390034d5","slug":"dmytro-kutsaniuk","title":"Dmytro Kutsaniuk","content":"","metafields":[{"value":"e265ea60-366b-11e7-9161-61cd2f0acd2a-kutsaniuk.jpeg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e265ea60-366b-11e7-9161-61cd2f0acd2a-kutsaniuk.jpeg","imgix_url":"https://imgix.cosmicjs.com/e265ea60-366b-11e7-9161-61cd2f0acd2a-kutsaniuk.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-05-11T17:04:26.061Z","created_by":"5357ef811693be2118000001","created":"2017-05-11T17:04:26.061Z","status":"published"}},{"value":"

In this tutorial I'm going to show you how to create a "Ecommerce" app using a little bit of Node, and Cosmic. For the sake of understanding how to consume Restful API’s, this tutorial will show how to make simple AJAX requests to the Cosmic API in order to retrieve, update, and delete data in our Cosmic buckets. Let's get started.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"1f2b0270-4b87-11e7-b06b-ad4450a81bf4-angular-js-ecommerce-app.png","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/1f2b0270-4b87-11e7-b06b-ad4450a81bf4-angular-js-ecommerce-app.png","imgix_url":"https://imgix.cosmicjs.com/1f2b0270-4b87-11e7-b06b-ad4450a81bf4-angular-js-ecommerce-app.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-06-06T13:05:53.490Z","created_by":"5357ef811693be2118000001","created":"2017-06-06T13:05:53.490Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"5914999aa57d9d4b390034d5","slug":"dmytro-kutsaniuk","title":"Dmytro Kutsaniuk","content":"","metafields":[{"value":"e265ea60-366b-11e7-9161-61cd2f0acd2a-kutsaniuk.jpeg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e265ea60-366b-11e7-9161-61cd2f0acd2a-kutsaniuk.jpeg","imgix_url":"https://imgix.cosmicjs.com/e265ea60-366b-11e7-9161-61cd2f0acd2a-kutsaniuk.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-05-11T17:04:26.061Z","created_by":"5357ef811693be2118000001","created":"2017-05-11T17:04:26.061Z","status":"published","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e265ea60-366b-11e7-9161-61cd2f0acd2a-kutsaniuk.jpeg","imgix_url":"https://imgix.cosmicjs.com/e265ea60-366b-11e7-9161-61cd2f0acd2a-kutsaniuk.jpeg"}}},"teaser":"

In this tutorial I'm going to show you how to create a "Ecommerce" app using a little bit of Node, and Cosmic. For the sake of understanding how to consume Restful API’s, this tutorial will show how to make simple AJAX requests to the Cosmic API in order to retrieve, update, and delete data in our Cosmic buckets. Let's get started.

","featured_image":{"url":"https://cdn.cosmicjs.com/1f2b0270-4b87-11e7-b06b-ad4450a81bf4-angular-js-ecommerce-app.png","imgix_url":"https://imgix.cosmicjs.com/1f2b0270-4b87-11e7-b06b-ad4450a81bf4-angular-js-ecommerce-app.png"}}},{"_id":"5936fca1ee1080c26a0005c7","order":127,"slug":"how-to-build-a-facebook-bot-app-using-nodejs","title":"How to Build a Facebook Bot App Using Node.js","content":"

TL;DR

View the source code on GitHub.

The process of building your messenger bot is fairly simple the hardest part is setting up your machine to talk to Facebook. That's why today I'm going to walk you through that real quick. Once it is all done you can get right on the way\r\nto creating your own bot.

Installing The Project

Go to folder where you would like the project to be and run.

git clone https://github.com/cosmicjs/facebook-bot\r\ncd facebook-bot\r\nyarn install

One more thing! Inside of your index.js file remove everything after line 38. We'll go back in and add that later. It should look like this.

const express = require('express')\r\nconst bodyParser = require('body-parser')\r\nconst request = require('request')\r\nconst app = express()\r\nconst Cosmic = require('cosmicjs')\r\nconst BootBot = require('bootbot')\r\nrequire('dotenv').config()\r\nconst chrono = require('chrono-node')\r\nvar schedule = require('node-schedule')\r\nconst EventEmitter = require('events').EventEmitter\r\n\r\nvar config = {}\r\n\r\nconst reminders = []\r\n\r\nconst eventEmitter = new EventEmitter()\r\n\r\napp.set('port', (process.env.PORT || 5000))\r\napp.use(bodyParser.urlencoded({extended: false}))\r\napp.use(bodyParser.json())\r\n\r\napp.get('/', function(req, res) {\r\n  res.send("hey there boi")\r\n})\r\n\r\napp.get('/webhook/', function(req, res) {\r\n  if (req.query['hub.verify_token'] === process.env.VERIFY_TOKEN){\r\n    return res.send(req.query['hub.challenge'])\r\n  }\r\n  res.send('wrong token')\r\n})\r\n\r\napp.listen(app.get('port'), function(){\r\n  console.log('Started on port', app.get('port'))\r\n})

This will only start the express server and prevent us from getting errors before we get a chance to start. See the line of code that says 'process.env.APP_SECRET' this is an environmental variable. There are a few ways you can set these up but\r\nfor now we'll use my favorite method the 'env' package.

Create a file to store all of your variables.

touch .env

This allows us to store are variables in plain text and clean up the start command. For example mine looks like this. I removed all the sensitive code.

APP_SECRET='some secret string of numbers and letters'\r\nACCESS_TOKEN='some secret string of numbers'\r\nVERIFY_TOKEN='DogLover49'

We will fill in APP_SECRET and ACCESS_TOKEN later but for now make sure that you have something in the VERIFY_TOKEN field. It can be anything at all. For the sake of this example I used DogLover49.

Starting Your Application

Now your going to need to start your application for the next part to work. Open two seperate terminal windows inside of your application root folder.

npm run start

Run this first and keep it running. Now in the next terminal window we will install and setup local tunnel.

Local Tunnel is a nice little utility that takes a port you specify and routes it to the outside world by giving it a secure web address. We'll just have to install it real quick.

npm install -g localtunnel

All you need to do now is run.

lt --port 3000 --subdomain <domainpick>

It should return this.

your url is: https://<domainpick>.localtunnel.me

This starts a tunnel that gives your machine a url for Facebook to look for. Whenever you start the application make sure that you start it before you initiate local tunnel or else it won't find the port and return errors.

Facebook Dev Panel Time

First thing you need to do is create a new application. Go to the Facebook Developer Panel and create a new app. Once your inside under 'Add Product' find the Messenger section and click on 'get started'. \"facebookAfter that you'll need to click on the settings tab which will pop up right after. Scroll down until you see this. \"afterThere are two important sections to note here 'Token Generation' and 'Webhooks'. The first one we are going to touch on is token generation. Select a Facebook page your going to use this will be the account you send a message to. \"p\"After you picked a page from the drop down it will generate a page access token. You can now go back and add this to your\r\n.env file. Once that is done we are going to change our focus to the webhooks.

Once you click on the button that says 'setup webhooks' you will see this. It may seem scary at first but don't worry. \"scary 

The only subscription fields you need to select are messages, messaging_postbacks, messaging_optins, and message_deliveries. Now for the verification token field. Do you remember the variable you created in your .env file under VERIFY_TOKEN? That is exactly what you want to put inside the box in this modal. For the callback url use the url from local tunnel and add '/webhook' to the end for me that would be https://noahsmessengerbog.localtunnel.me/webhook.If you filled in the fields correctly it should look something like this. \"enter 

Now go back to your application and make sure that is is running and you are also forwarding the url. Double check the url and make sure it's the same thing as shown in the callback url field.

Once it is all running successfully you can click 'verify and save' this will have Facebook send a request to the callback url and expect you to return the correct item from a json object.

At this point you should have almost all of the items you need inside of the .env file except for the App Secret. This can be easily found by going to your dashboard.

The Bot Comes Next

Remeber how earlier we removed everything after line 38? Now you can go and paste it back in. It should match this file exactly. When that is all done we can go over the code and learn just how it works. It should look like this.

const express = require('express')\r\nconst bodyParser = require('body-parser')\r\nconst request = require('request')\r\nconst app = express()\r\nconst Cosmic = require('cosmicjs')\r\nconst BootBot = require('bootbot')\r\nrequire('dotenv').config()\r\nconst chrono = require('chrono-node')\r\nvar schedule = require('node-schedule')\r\nconst EventEmitter = require('events').EventEmitter\r\n\r\nvar config = {}\r\n\r\nconst reminders = []\r\n\r\nconst eventEmitter = new EventEmitter()\r\n\r\napp.set('port', (process.env.PORT || 5000))\r\napp.use(bodyParser.urlencoded({extended: false}))\r\napp.use(bodyParser.json())\r\n\r\napp.get('/', function(req, res) {\r\n  res.send("hey there boi")\r\n})\r\n\r\napp.get('/webhook/', function(req, res) {\r\n  if (req.query['hub.verify_token'] === process.env.VERIFY_TOKEN){\r\n    return res.send(req.query['hub.challenge'])\r\n  }\r\n  res.send('wrong token')\r\n})\r\n\r\napp.listen(app.get('port'), function(){\r\n  console.log('Started on port', app.get('port'))\r\n})\r\n\r\n\r\nconst bot = new BootBot({\r\n  accessToken: process.env.ACCESS_TOKEN,\r\n  verifyToken: process.env.VERIFY_TOKEN,\r\n  appSecret: process.env.APP_SECRET\r\n})\r\n\r\nbot.setGreetingText("Hello, I'm here to help you manage your tasks. Be sure to setup your bucket by typing 'Setup'. ")\r\n\r\nbot.setGetStartedButton((payload, chat) => {\r\n  if(config.bucket === undefined){\r\n    chat.say('Hello my name is Note Buddy and I can help you keep track of your thoughts')\r\n    chat.say("It seems like you have not setup your bucket settings yet. That has to be done before you can do anything else. Make sure to type 'setup'")\r\n  }\r\n  BotUserId = payload.sender.id\r\n});\r\n\r\nbot.hear('setup', (payload, chat) => {\r\n  const getBucketSlug = (convo) => {\r\n    convo.ask("What's your buckets slug?", (payload, convo) => {\r\n      var slug = payload.message.text;\r\n      convo.set('slug', slug)\r\n      convo.say("setting slug as "+slug).then(() => getBucketReadKey(convo));\r\n    })\r\n  }\r\n  const getBucketReadKey = (convo) => {\r\n    convo.ask("What's your buckets read key?", (payload, convo) => {\r\n      var readkey = payload.message.text;\r\n      convo.set('read_key', readkey)\r\n      convo.say('setting read_key as '+readkey).then(() => getBucketWriteKey(convo))\r\n    })\r\n  }\r\n  const getBucketWriteKey = (convo) => {\r\n    convo.ask("What's your buckets write key?", (payload, convo) => {\r\n      var writekey = payload.message.text\r\n      convo.set('write_key', writekey)\r\n      convo.say('setting write_key as '+writekey).then(() => finishing(convo))\r\n    })\r\n  }\r\n  const finishing = (convo) => {\r\n    var newConfigInfo = {\r\n      slug: convo.get('slug'),\r\n      read_key: convo.get('read_key'),\r\n      write_key: convo.get('write_key')\r\n    }\r\n    config.bucket = newConfigInfo\r\n    convo.say('All set :)')\r\n    convo.end();\r\n  }\r\n  \r\n  chat.conversation((convo) => {\r\n    getBucketSlug(convo)\r\n  })\r\n})\r\n\r\nbot.hear(['hello', 'hey', 'sup'], (payload, chat)=>{\r\n  chat.getUserProfile().then((user) => {\r\n    chat.say(`Hey ${user.first_name}, How are you today?`)\r\n  })\r\n})\r\n\r\nbot.hear('config', (payloadc, hat) => {\r\n  if(JSON.stringify(config.bucket) === undefined){\r\n    chat.say("No config found :/ Be sure to run 'setup' to add your bucket details")\r\n  }\r\n  chat.say("A config has been found :) "+ JSON.stringify(config.bucket))\r\n})\r\n\r\nbot.hear('create', (payload, chat) => {\r\n  chat.conversation((convo) => {\r\n    convo.ask("What would you like your reminder to be? etc 'I have an appointment tomorrow from 10 to 11 AM' the information will be added automatically", (payload, convo) => {\r\n      datetime = chrono.parseDate(payload.message.text)\r\n      var params = {\r\n        write_key: config.bucket.write_key,\r\n        type_slug: 'reminders',\r\n        title: payload.message.text,\r\n        metafields: [\r\n         {\r\n           key: 'date',\r\n           type: 'text',\r\n           value: datetime\r\n         }\r\n        ]\r\n      }\r\n      Cosmic.addObject(config, params, function(error, response){\r\n        if(!error){\r\n          eventEmitter.emit('new', response.object.slug, datetime)\r\n          convo.say("reminder added correctly :)")\r\n          convo.end()\r\n        } else {\r\n          convo.say("there seems to be a problem. . .")\r\n          convo.end()\r\n        }\r\n      })\r\n    })\r\n  })\r\n})\r\n\r\nbot.hear('active', (payload, chat) => {\r\n  chat.say('finding all of your ongoing reminders.')\r\n})\r\n\r\neventEmitter.on('new', function(itemSlug, time) {\r\n  schedule.scheduleJob(time, function(){\r\n    Cosmic.getObject(config, {slug: itemSlug}, function(error, response){\r\n      if(response.object.metadata.date == new Date(time).toISOString()){\r\n        bot.say(BotUserId, response.object.title)\r\n        console.log('firing reminder')\r\n      } else {\r\n        eventEmitter.emit('new', response.object.slug, response.object.metafield.date.value)\r\n        console.log('times do not match checking again at '+response.object.metadata.date)\r\n      }\r\n    })\r\n  })\r\n})\r\n\r\nbot.start()

This bot comes with a few interactions to get us off the ground. Each one is completely seperate from the others so you can remove and modify them as you wish. I left it as bare as possible for this purpose. Let's take a look at them.

const bot = new BootBot({\r\n  accessToken: process.env.ACCESS_TOKEN,\r\n  verifyToken: process.env.VERIFY_TOKEN,\r\n  appSecret: process.env.APP_SECRET\r\n}) // 1\r\n\r\nbot.setGreetingText("Hello, I'm here to help you manage your tasks. Be sure to setup your bucket by typing 'Setup'. ") // 2\r\n\r\nbot.setGetStartedButton((payload, chat) => {\r\n  if(config.bucket === undefined){\r\n    chat.say('Hello my name is Note Buddy and I can help you keep track of your thoughts')\r\n    chat.say("It seems like you have not setup your bucket settings yet. That has to be done before you can do anything else. Make sure to type 'setup'")\r\n  }\r\n  BotUserId = payload.sender.id\r\n}); // 3
  1. This creates an object that talks to the bootbot npm package. This allows us to use webhooks and such things.
  2. This shows you a nice little message before you decide to message the Facebook page.
  3. Creates a get started button as a barrier to entry before you message the bot. It also checks if you have setup the bucket config information yet. This is done later on by calling a certain command. You can also modify it so It is hardwired with your\r\nbucket information.
bot.hear('setup', (payload, chat) => { // 1 \r\n  const getBucketSlug = (convo) => { // 2\r\n    convo.ask("What's your buckets slug?", (payload, convo) => {\r\n      var slug = payload.message.text;\r\n      convo.set('slug', slug) // 3\r\n      convo.say("setting slug as "+slug).then(() => getBucketReadKey(convo)); // 3 \r\n    })\r\n  }\r\n  const getBucketReadKey = (convo) => {\r\n    convo.ask("What's your buckets read key?", (payload, convo) => {\r\n      var readkey = payload.message.text;\r\n      convo.set('read_key', readkey)\r\n      convo.say('setting read_key as '+readkey).then(() => getBucketWriteKey(convo))\r\n    })\r\n  }\r\n  const getBucketWriteKey = (convo) => {\r\n    convo.ask("What's your buckets write key?", (payload, convo) => {\r\n      var writekey = payload.message.text\r\n      convo.set('write_key', writekey)\r\n      convo.say('setting write_key as '+writekey).then(() => finishing(convo))\r\n    })\r\n  }\r\n  const finishing = (convo) => {\r\n    var newConfigInfo = {\r\n      slug: convo.get('slug'),\r\n      read_key: convo.get('read_key'),\r\n      write_key: convo.get('write_key')\r\n    } \r\n    config.bucket = newConfigInfo // 4\r\n    convo.say('All set :)')\r\n    convo.end();\r\n  }\r\n  \r\n  chat.conversation((convo) => {\r\n    getBucketSlug(convo) // 5\r\n  })\r\n})
  1. This initiates a function that listens for specific keywords. Here we are listening for 'setup' but it can be changed to be anything. It can even accept regex statements.
  2. Creates a function that can be called later to start the chain.
  3. Takes what you send as an answer and sets that to a slug value that can be called in this instance of the conversation. If you started another conversation later in a separate instance this value would not be remembered.
  4. Now we are starting to finish up the setup process with our final touches. First thing we have to do is get all of the information together. Right here we are grabbing all of the info by calling 'convo.get'. Then we add it to the config object\r\ndeclared earlier.
  5. This is where everything starts. We start the conversation and start passing the convo value around.
bot.hear(['hello', 'hey', 'sup'], (payload, chat)=>{\r\n  chat.getUserProfile().then((user) => {\r\n    chat.say(`Hey ${user.first_name}, How are you today?`)\r\n  })\r\n})

Here we are utilizing the 'bot.hear' method and being friendly to the user. Remember earlier when I said you can use regex to listen for user input? You can also use an array of specific words! When the user says 'hello' we grab there\r\nprofile information from Facebook and greet them by name. It may seem weird at first but I promise robots knowing your name is normal.

bot.hear('create', (payload, chat) => {\r\n  chat.conversation((convo) => { \r\n    convo.ask("What would you like your reminder to be? etc 'I have an appointment tomorrow from 10 to 11 AM' the information will be added automatically", (payload, convo) => { // 1\r\n      datetime = chrono.parseDate(payload.message.text) // 2\r\n      var params = {\r\n        write_key: config.bucket.write_key,\r\n        type_slug: 'reminders',\r\n        title: payload.message.text,\r\n        metafields: [\r\n         {\r\n           key: 'date',\r\n           type: 'text',\r\n           value: datetime\r\n         }\r\n        ]\r\n      } // 3\r\n      Cosmic.addObject(config, params, function(error, response){ // 4\r\n        if(!error){\r\n          eventEmitter.emit('new', response.object.slug, datetime) //5\r\n          convo.say("reminder added correctly :)")\r\n          convo.end()\r\n        } else {\r\n          convo.say("there seems to be a problem. . .")\r\n          convo.end()\r\n        }\r\n      })\r\n    })\r\n  })\r\n})
  1. Inside of the conversation we ask the user a question and wait for the reply.
  2. Now we take what the user said and parse it using Chrono, a natural date parsing package.
  3. We build the params object to be used with the Cosmic Object addition.
  4. Now we take the Cosmic package and insert our new object using the params we created earlier.
  5. Here we are sending a nodejs event emitter passing the slug from the return and the datetime we created earlier.
bot.hear('help', (payload, chat) => {\r\n  chat.say('Here are the following commands for use.')\r\n  chat.say("'create': add a new reminder")\r\n  chat.say("'setup': add your bucket info such as slug and write key")\r\n  chat.say("'config': lists your current bucket config")\r\n})

This will return a series of messages telling you what you can and can't do with the bot.

eventEmitter.on('new', function(itemSlug, time) { // 1\r\n  schedule.scheduleJob(time, function(){ // 2\r\n    Cosmic.getObject(config, {slug: itemSlug}, function(error, response){ // 3\r\n      if(response.object.metadata.date == new Date(time).toISOString()){ // 4\r\n        bot.say(BotUserId, response.object.title) // 5\r\n        console.log('firing reminder')\r\n      } else {\r\n        eventEmitter.emit('new', response.object.slug, response.object.metafield.date.value) // 6\r\n        console.log('times do not match checking again at '+response.object.metadata.date)\r\n      }\r\n    })\r\n  })\r\n})

Now we are playing with event emitters these are neat functions provided by NodeJS out of the box. They work almost like calling functions but they are way more versatile. 6. We create an event emitter that listens for the new event to be passed. 7. Now\r\nwe use the schedule package and tell it to wait unitl the time you passed earlier. 8. Next we call cosmicjs and grab the specific object you just created. 9. Now we take the response and compare it to the time you passed originally if the time changed\r\nwe then send it back to the event emitter and check again at the changed time. 10. here we call the event emitter again.

If you did everything correctly you should be able to start the bot up by typing in a few commands.

npm run start

Now in a different terminal window

npm run forward

This will use local tunnel to let your application talk to Facebook. Now you can modify this as much as you want and it should work just like you want it to. Now that you have your notes saved to the Cosmic API, you can retrieve them and send them to any connected application.  Thanks for reading, if you have any questions reach out to us on Twitter and join the Slack community.

","metafields":[{"object_type":"authors","value":"5905fe6a710a2188470004a5","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5905fe6a710a2188470004a5","slug":"noah-vaillancourt","title":"Noah Vaillancourt","content":"","metafields":[{"value":"2664e120-2db7-11e7-826f-f34de0199ac5-noah-vaillancourt.jpeg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/2664e120-2db7-11e7-826f-f34de0199ac5-noah-vaillancourt.jpeg","imgix_url":"https://imgix.cosmicjs.com/2664e120-2db7-11e7-826f-f34de0199ac5-noah-vaillancourt.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-04-30T15:10:34.252Z","created_by":"5357ef811693be2118000001","created":"2017-04-30T15:10:34.252Z","status":"published"}},{"value":"

The process of building your messenger bot is fairly simple the hardest part is setting up your machine to talk to talk to Facebook. That's why today I'm going to walk you through that real quick. Once it is all done you can get right on the way to creating your own bot.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"cf007360-4aec-11e7-86b9-030f138f68e4-Screen Shot 2017-06-06 at 2.17.15 PM.png","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/cf007360-4aec-11e7-86b9-030f138f68e4-Screen Shot 2017-06-06 at 2.17.15 PM.png","imgix_url":"https://imgix.cosmicjs.com/cf007360-4aec-11e7-86b9-030f138f68e4-Screen Shot 2017-06-06 at 2.17.15 PM.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-06-06T19:04:01.376Z","created_by":"5357ef811693be2118000001","created":"2017-06-06T19:04:01.377Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"5905fe6a710a2188470004a5","slug":"noah-vaillancourt","title":"Noah Vaillancourt","content":"","metafields":[{"value":"2664e120-2db7-11e7-826f-f34de0199ac5-noah-vaillancourt.jpeg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/2664e120-2db7-11e7-826f-f34de0199ac5-noah-vaillancourt.jpeg","imgix_url":"https://imgix.cosmicjs.com/2664e120-2db7-11e7-826f-f34de0199ac5-noah-vaillancourt.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-04-30T15:10:34.252Z","created_by":"5357ef811693be2118000001","created":"2017-04-30T15:10:34.252Z","status":"published","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/2664e120-2db7-11e7-826f-f34de0199ac5-noah-vaillancourt.jpeg","imgix_url":"https://imgix.cosmicjs.com/2664e120-2db7-11e7-826f-f34de0199ac5-noah-vaillancourt.jpeg"}}},"teaser":"

The process of building your messenger bot is fairly simple the hardest part is setting up your machine to talk to talk to Facebook. That's why today I'm going to walk you through that real quick. Once it is all done you can get right on the way to creating your own bot.

","featured_image":{"url":"https://cdn.cosmicjs.com/cf007360-4aec-11e7-86b9-030f138f68e4-Screen Shot 2017-06-06 at 2.17.15 PM.png","imgix_url":"https://imgix.cosmicjs.com/cf007360-4aec-11e7-86b9-030f138f68e4-Screen Shot 2017-06-06 at 2.17.15 PM.png"}}},{"_id":"59305ad5744ba22d080000ab","order":128,"slug":"api-updates-authentication-add-buckets-and-more","title":"API Updates: Authentication, Add Buckets and More","content":"

Cosmic is on a mission to help you build apps faster.  With this goal in mind, we're happy to announce some additions to our API that will help you manage your application content faster and easier, right from the Cosmic API.

We’ve added new endpoints to the API which include:
1. User Authentication
2. Add Buckets to your account
3. Add / Edit / Delete Object Types in your Bucket
4. Add Media to a folder in your Bucket
Check out the Docs page for all of the new additions to the API.

Authentication
Have you ever wanted to access your account from the API and create new Buckets from the comfort of your own application?  Well now you can thanks to the new POST /authenticate endpoint.  Simply add your Cosmic email and password, get your token, then begin performing account-specific tasks from the API.  Currently this only includes Bucket creation, but we plan to open up more features for account management soon.

POST /authenticate

{\r\n  "email": "john@johndoe.com",\r\n  "password": "CatsAreAwesome"\r\n}

Read more about Authentication

Add Buckets
Use the new POST /buckets endpoint to add your new Bucket to your account.  The only required fields are title and a Header with Authorization: Bearer <token>.
Read more about adding Buckets

Add / Edit / Delete Object Types
Add Object Types with POST /:your-bucket-slug/add-object-type
Edit Object Types with PUT /:your-bucket-slug/edit-object-type
Delete Object Types with DELETE /:your-bucket-slug/:object-type-slug
Read more about Object Types

Add Media to Folders
You can now add Media to your Bucket and specify which folder to place it in.

POST /:your-bucket-slug/media

{\r\n  "media": FILE_DATA,\r\n  "folder": "your-folder-slug"\r\n}

Read more about adding Media

I hope you find these new additions to the API useful for building your applications.  Browse the API docs to see more detail on how to use the new additions to the API.  If you have any questions reach out to us on Twitter and join our Slack community.


Icon provided by Iconfinder.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"

Cosmic is on a mission to help you build apps faster.  And with that goal in mind, we're happy to announce some additions to our API that will help you manage your application content faster and easier, right from the Cosmic API.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"52d84b70-46f8-11e7-a70a-89b9eb3609ed-cloud-api.png","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/52d84b70-46f8-11e7-a70a-89b9eb3609ed-cloud-api.png","imgix_url":"https://imgix.cosmicjs.com/52d84b70-46f8-11e7-a70a-89b9eb3609ed-cloud-api.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-06-01T18:20:05.056Z","created_by":"5357ef811693be2118000001","created":"2017-06-01T18:20:05.056Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

Cosmic is on a mission to help you build apps faster.  And with that goal in mind, we're happy to announce some additions to our API that will help you manage your application content faster and easier, right from the Cosmic API.

","featured_image":{"url":"https://cdn.cosmicjs.com/52d84b70-46f8-11e7-a70a-89b9eb3609ed-cloud-api.png","imgix_url":"https://imgix.cosmicjs.com/52d84b70-46f8-11e7-a70a-89b9eb3609ed-cloud-api.png"}}},{"_id":"5926688fa38e019f75000296","order":129,"slug":"how-to-build-a-react-website-powered-by-the-cosmic-js-graphql-api","title":"How to Build a React Website Powered by the Cosmic GraphQL API","content":"

Building and maintaining a React app can be no mean feat. There plenty of tutorials out there covering the technical aspects of making a React app, but as with any technology, it's often hard to find information on best practices.

In this post we'll be exploring some tips, tricks, and techniques we've learnt whilst producing React/GraphQL apps for our clients. Hopefully these will help you make your project more performant and simplify maintenance.

TL;DR

View demo
Install the app on Cosmic
Check out the codebase on GitHub

You probably don't need state

If you've been using React for a while, your first instinct when starting a new project might be to set up a state management library like Redux, MobX, or freactal. These are really powerful solutions for state management, that can make wrestling\r\nwith the state of a large application much more manageable.

But, like any library, you shouldn't start using these state management solutions until you actually need to! For a simple blog like the one we'll be building today the only state you actually need is the current URL.

"But!" I hear you cry "How will I store/cache/handle the API-first data I'm fetching over the network, from a great service like Cosmic?". Well worry not! In the second half of this post we're going to explore GraphQL, a\r\nsystem for declaratively fetching data from a server and specifically the Apollo GraphQL client for simply interfacing with GraphQL.

We're focusing on a simple, view only app in this post, but it's worth mentioning that the state provided by class based React components is often sufficient for bits of state that only affect a localised part of your app. Dan Abramov (creator\r\nof Redux) has written in more detail about this subject here

Use routing to store your view information

Of course, if we don't have some state, we'd just be displaying our whole web app all at once. Luckily, your browser provides a built in state store with undo history, frictionless sharing, and a simple interface: your URL bar.

The excellent React Router library provides a simple and expressive interface for navigating around your app. Most of the routing in our example app is handled in the following file:

// src/components/posts.js\r\n\r\nimport styled from "styled-components";\r\nimport { Route, Switch, } from "react-router";\r\n\r\nimport Post, { Blank, Home, FourOhFour, } from "./post";\r\nimport Sidebar from "./Sidebar";\r\n\r\nconst PostsStyled = styled.div`\r\n    background-color: ${R.path(["theme", "white",])};\r\n    flex-direction: row;\r\n`;\r\n\r\nexport default () => (\r\n   <PostsStyled>\r\n\r\n        <Route path = "/post" component = { Sidebar } />\r\n\r\n        <Switch> \r\n            <Route path = "/post/:postSlug" component = { Post } />\r\n            <Route path = "/post/" component = { Blank } />\r\n            <Route path = "/" exact component = { Home } />\r\n            <Route component = { FourOhFour } />\r\n        </Switch>\r\n\r\n    </PostsStyled>\r\n);

The first Route renders the sidebar for any URL beginning with /post

The Switch component renders the first of its children with a matching path. Our routing configuration does the following:

All this together means we can simply switch between all the different views of our app just by changing the URL.

React Router provides a Link component, that acts like a supercharged <a> tag. You should use Link for any hyperlinks that don't lead out of your website.

Styled-Components and ThemeProvider stay on top of your styles

CSS precompilers like SASS first enabled web developers to start using variables and functions in their styles. Then React came along and popularised the inline style system:

<div\r\n   style = {{\r\n      display: "flex",\r\n      backgroundColor: "red",\r\n      color: "white",\r\n      margin: "4px",\r\n   }}\r\n/>

The hottest new trend is Styled Components, which allows you to create new components by specifying a component, and the CSS styles you'd like to apply to it. These styles are automatically vendor-prefixed, and are all converted to a stylesheet in\r\nthe end.

const Link = styled.a`\r\n   color: white;\r\n   font-size: 0.8em;\r\n   text-decoration: none;\r\n`;

Styled Components also provide a way to set global variables that are inherited by each styled component. The ThemeProvider component can be used to supply variables to each styled component like so:

const theme = {\r\n    white: "#fff",\r\n    blue: "#00afd7",\r\n};\r\n\r\nexport default () => (\r\n    <ThemeProvider theme = { theme }>\r\n      <App/>\r\n    </ThemeProvider>\r\n);

Now every styled component that is a child of App can access those variables using a function in the styles:

const Link = styled.a`\r\n   color: ${ (props) => props.theme.blue };\r\n   font-size: 0.8em;\r\n   text-decoration: none;\r\n`

The theme object can be any javascript object, and the function inside the ${ } block can be any function, so there's a huge range of cool stuff you can do in your styled components while still keeping all your variables in one unified place.

GraphQL

GraphQL is a declarative, self documenting API specification that allows you to ask your API only for the data you need. It imposes a few restrictions and ideas on your API, that allows a GraphQL Client to create some really cool features, including:

We're going to be going through and explaining all the steps we've used in our example project, but if you'd like a more complete explanation of the GraphQL protocol, you can read about it in full here.

The GraphQL API provided by Cosmic has 3 queries:

And those queries are documented in full here.

Setting up the Cosmic GraphQL API

First we need to set up our ApolloClient:

//src/GraphQL/index.js\r\n\r\nimport { ApolloClient, createNetworkInterface, } from "react-apollo";\r\n\r\nconst networkInterface = createNetworkInterface({\r\n    uri: "https://graphql.cosmicjs.com/v1",\r\n});\r\n\r\nconst client = new ApolloClient({\r\n    networkInterface,\r\n});\r\n\r\nexport default client;

Which we then provide to the rest of our app using the ApolloProvider:

//src/app.js\r\n\r\nimport React from "react";\r\nimport { ApolloProvider, } from "react-apollo";\r\nimport styled, { ThemeProvider, } from "styled-components";\r\n\r\nimport client from "./GraphQL";\r\n\r\nexport default () => (\r\n    <ThemeProvider theme = { theme }>\r\n        <ApolloProvider client = { client }>\r\n         <App />\r\n        </ApolloProvider>\r\n    </ThemeProvider>\r\n);

The Apollo provider means that any component in our app can connect itself to a GraphQL query, meaning each component can ask the client to fetch exactly the data needed to render itself. Don't worry about multiple components spamming the server with\r\nrequests; the ApolloClient handles caching and de-duplication itself!

We'll now spend a little time exploring some methods you can use to make GraphQL a little nicer to use, before we start exploring how we've used it in this app. We're not including all the code necessary to run the example in this blog post,\r\nbut you can find the source code for our demo project here. Follow along!

Reuse Data with Fragments

Sometimes you want to get the same fields from an object in two different queries, GraphQL provides a system to do this in the form of Fragments. Fragments allow you to pick some fields from an object, and ask for only those fields.

For example, in the sidebar we only want some basic information about a post:

fragment PostPreview on Object {\r\n    slug\r\n    typeSlug: type_slug\r\n    title\r\n    modifiedAt: modified_at\r\n}

But in the post itself we want all that information, plus some more:

fragment PostAllContent on Object {\r\n    ...PostPreview\r\n    content\r\n    metadata\r\n    order\r\n}

We can then use the PostPreview fragment in the query used by our Sidebar:

# getAllPostsQuery\r\nquery($bucketSlug: String! $readKey: String!){\r\n    objects: objectsByType(bucket_slug: $bucketSlug, read_key: $readKey, type_slug: "posts") {\r\n        ...PostPreview\r\n    }\r\n}

And the PostAllContent fragment in the query used by our Post component

# getPostQuery\r\nquery($bucketSlug: String! $readKey: String! $postSlug: String!){\r\n    object(bucket_slug: $bucketSlug, read_key: $readKey, slug: $postSlug) {\r\n        ...PostAllContent\r\n    }\r\n}

Fragments are great for two reasons:

  1. They allow you to modularise and reuse the properties you want to get from a query
  2. They ensure that two queries which should get the same information always stay in sync, so Apollo can successfully cache the results

Use Component props as query parameters

You'll notice that the above queries have 2/3 input fields:

These variables are used to direct the query to the correct data. Apollo gives us a powerful API to set these variables, but often for simple components it's easier to just set them using props:

Default Props

For variables that are the same across our app, like $bucketSlug, we can add them to our components using their defaultProps:

//src/components/sidebar.js\r\n\r\nconst Sidebar = graphql(getAllPostsQuery, { name: "allPosts", })(\r\n   props => (\r\n      <SidebarStyled>\r\n         <Nav>\r\n            <SidebarText>\r\n               Posts\r\n            </SidebarText>\r\n\r\n            {\r\n            props.allPosts.loading\r\n               ? <Loading />\r\n               : props.allPosts.objects.map(({ slug, ...rest }) => (\r\n                  <PostLink key = { slug } slug = { slug } { ...rest } />\r\n               ))\r\n            }\r\n\r\n         </Nav>\r\n      </SidebarStyled>\r\n   )\r\n);\r\n\r\nSideBar.defaultProps = {\r\n    bucketSlug: config.bucket.slug,\r\n    readKey: config.bucket["read_key"],\r\n};

Dynamic Props

For variables that change for different instances of a component, like $postSlug, you can pass them in as a prop to each instance of a component:

//src/components/post.js\r\nconst PostWrapper = GraphQL(getPostQuery)(props => (\r\n    <PostContainerStyled>\r\n        {\r\n         props.data.loading\r\n            ? <Loading />\r\n            : <Post\r\n               noShare = { props.noShare }\r\n               title = { R.path(["data", "object", "title",])(props) }\r\n               content = { R.path(["data", "object", "content",])(props) }\r\n               />\r\n      }\r\n    </PostContainerStyled>\r\n));\r\n\r\nPostWrapper.defaultProps = {\r\n    bucketSlug: config.bucket.slug,\r\n    readKey: config.bucket["read_key"],\r\n};\r\n\r\nexport const Home = () => <PostWrapper noShare postSlug = "home" />;

Preloading Data

It's always good to prefetch our data before the user needs it, this speeds up page transition time and makes for a nicer UX, Apollo provides a very simple way to do this.

While the Sidebar gets the query it need to display a preview of each post, it also performs another query:

#getAllPostsWithExtraQuery\r\nquery($bucketSlug: String! $readKey: String!){\r\n    objectsWithExtra: objectsByType(bucket_slug: $bucketSlug, read_key: $readKey, type_slug: "posts") {\r\n        ...PostAllContent\r\n    }\r\n}

This query gets all the fields of every post, meaning all that data is already loaded into the cache before we navigate to a Post page. You can attach multiple queries to a component using the compose function from the react-apollo package.

//src/components/sidebar.js\r\n\r\nconst Sidebar = compose(\r\n    GraphQL(getAllPostsQuery, { name: "allPosts", }),\r\n    GraphQL(getAllPostsWithExtraQuery, { name: "allPostsPreFetch", }),\r\n)(props => (\r\n    <SidebarStyled>\r\n        <Nav>\r\n            <SidebarText>\r\n                Posts\r\n            </SidebarText>\r\n\r\n            <Line />\r\n\r\n            {props.allPosts.loading\r\n                ? <Loading />\r\n                : props.allPosts.objects.map(({ slug, ...rest }) => (\r\n                    <PostLink key = { slug } slug = { slug } { ...rest } />\r\n                    ))}\r\n\r\n        </Nav>\r\n    </SidebarStyled>\r\n));\r\n\r\nSideBar.defaultProps = {\r\n    bucketSlug: config.bucket.slug,\r\n    readKey: config.bucket["read_key"],\r\n};

However, if you were to just do this, you would see no improvement in your network performance, and every time you loaded a new post you'd have to make a new network request. To benefit from this preloading we have to tell the ApolloClient a few more things.

Teach Apollo the shape of your data

By default, ApolloClient assumes that every Object returned by your API is identifiable by a field called id or _id. In Cosmic, each object is identifiable by a field called slug.

Telling Apollo about this is simple:

import { ApolloClient, createNetworkInterface, } from "react-apollo";\r\nimport { toIdValue, } from "Apollo-client";\r\n\r\n// ------------------------------\r\n\r\nconst networkInterface = createNetworkInterface({\r\n    uri: "https://GraphQL.cosmicjs.com/v1",\r\n});\r\n\r\nconst dataIdFromObject = ({ __typename, slug, }) => __typename + slug;\r\n\r\nconst customResolvers = {\r\n    Query: {\r\n        object: (_, args) =>\r\n            toIdValue(\r\n                dataIdFromObject({ __typename: "Object", slug: args.slug, }),\r\n            ),\r\n    },\r\n};\r\n\r\nconst client = new ApolloClient({\r\n    networkInterface,\r\n    dataIdFromObject,\r\n    customResolvers,\r\n});\r\n\r\n//------------------------------\r\n\r\nexport default client

The function dataIdFromObject tells ApolloClient how to generate a unique ID from any object it gets.

The object customResolvers tells ApolloClient that whenever we make an object query, we can try looking in the cache using the query variable slug.

Now our sidebar preloads all posts using getAllPostsWithExtraQuery, and any future calls to get Post data will be served by ApolloClient's cache, instead of the network.

Load GraphQL queries with webpack

Finally, Apollo provides us with another nifty technique to improve the developer experience.

If you're using webpack as part of your build system you can keep all your GraphQL queries and mutations in seperate files, and import them into javascript like any other file. This only only means to can benefit from compartmentalised code &\r\nsyntax highlighting, it also means that webpack can pre-compile your GraphQL queries into Apollo's own internal representation at build time, rather than in your user's browser.

Integrating the GraphQL loader into webpack is easy, you just have to include the following code in your webpack config:

module: {\r\n   rules: [\r\n      {\r\n         test: /\\.(GraphQL|gql)$/,\r\n         exclude: /node_modules/,\r\n         loader: 'GraphQL-tag/loader',\r\n      },\r\n   ],\r\n},

Conclusion

Now you know some of the tips, tricks, and techniques we've learnt from using React and GraphQL in production apps. If you've learnt something, please share this article!

If you're making a static site, or anything else, with Cosmic get in touch on our Slack or Twitter, we'd love to see what you're making.

This post was written by Codogo, an award-winning digital agency with a passion for creating amazing digital experiences.

","metafields":[{"object_type":"authors","value":"590b73ff200ca2723f002d01","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"590b73ff200ca2723f002d01","slug":"freddie-ridell","title":"Freddie Ridell","content":"","metafields":[{"value":"2d96a700-30f8-11e7-8b84-cbc54315248d-freddie.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/2d96a700-30f8-11e7-8b84-cbc54315248d-freddie.jpg","imgix_url":"https://imgix.cosmicjs.com/2d96a700-30f8-11e7-8b84-cbc54315248d-freddie.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-05-04T18:33:35.138Z","created_by":"5357ef811693be2118000001","created":"2017-05-04T18:33:35.138Z","status":"published"}},{"value":"

Building and maintaining a React app can be no mean feat. There plenty of tutorials out there covering the technical aspects of making a React app, but as with any technology, it's often hard to find information on best practices.

In this post we'll be exploring some tips, tricks, and techniques we've learnt whilst producing React/GraphQL apps for our clients. Hopefully these will help you make your project more performant and simplify maintenance.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"5a56d280-4109-11e7-8d6b-a1a75699efdb-cosmicjs-graphql.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/5a56d280-4109-11e7-8d6b-a1a75699efdb-cosmicjs-graphql.jpg","imgix_url":"https://imgix.cosmicjs.com/5a56d280-4109-11e7-8d6b-a1a75699efdb-cosmicjs-graphql.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-05-25T05:15:59.538Z","created_by":"5357ef811693be2118000001","created":"2017-05-25T05:15:59.538Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"590b73ff200ca2723f002d01","slug":"freddie-ridell","title":"Freddie Ridell","content":"","metafields":[{"value":"2d96a700-30f8-11e7-8b84-cbc54315248d-freddie.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/2d96a700-30f8-11e7-8b84-cbc54315248d-freddie.jpg","imgix_url":"https://imgix.cosmicjs.com/2d96a700-30f8-11e7-8b84-cbc54315248d-freddie.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-05-04T18:33:35.138Z","created_by":"5357ef811693be2118000001","created":"2017-05-04T18:33:35.138Z","status":"published","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/2d96a700-30f8-11e7-8b84-cbc54315248d-freddie.jpg","imgix_url":"https://imgix.cosmicjs.com/2d96a700-30f8-11e7-8b84-cbc54315248d-freddie.jpg"}}},"teaser":"

Building and maintaining a React app can be no mean feat. There plenty of tutorials out there covering the technical aspects of making a React app, but as with any technology, it's often hard to find information on best practices.

In this post we'll be exploring some tips, tricks, and techniques we've learnt whilst producing React/GraphQL apps for our clients. Hopefully these will help you make your project more performant and simplify maintenance.

","featured_image":{"url":"https://cdn.cosmicjs.com/5a56d280-4109-11e7-8d6b-a1a75699efdb-cosmicjs-graphql.jpg","imgix_url":"https://imgix.cosmicjs.com/5a56d280-4109-11e7-8d6b-a1a75699efdb-cosmicjs-graphql.jpg"}}},{"_id":"5922eb34707c1e004500016f","order":130,"slug":"new-metafields-required-and-value-less-parent","title":"New Metafields: Required and Value-less Parent","content":"

We've released a couple new additions to our powerful Metafields feature.  Check them out:

Required Metafield
You can now mark a Metafield as required to make sure that your editor fills in a value.  This can be applied for all Metafield types except any parent Metafield.  Your content editor will notice the required Metafields are marked with a red asterisk next to the title.\r\nScreenshot below:

Value-less Parent Metafield
No, it's not time to move in with Grandma, the name of this new Metafield describes how the Metafield contains children but has no value of its own.

Let's say you have a list of items on a page that you would like to keep under a certain title, but are not\r\nusing the parent element for any value other than to keep the child elements.  Enter the Value-less Parent Metafield which stores all of the child elements but has no value of its own.

Notice from the gif screenshot below that you can nest the children below the parent element by dragging them under the parent element.

In the API our Value-less Parent Metafield renders the metadata to:

"parent": {\r\n  "child_1": "Value 1",\r\n  "child_2": "Value 2"\r\n}

If you have any questions about how to use these new Metafield options, reach out to us on Twitter and join our Slack community.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"

We're releasing a couple new additions to our powerful Metafields feature.  Check them out...

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"3508bc70-3f09-11e7-bb72-af71fa7a5dfd-Screen Shot 2017-05-22 at 11.10.21 AM.png","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/3508bc70-3f09-11e7-bb72-af71fa7a5dfd-Screen Shot 2017-05-22 at 11.10.21 AM.png","imgix_url":"https://imgix.cosmicjs.com/3508bc70-3f09-11e7-bb72-af71fa7a5dfd-Screen Shot 2017-05-22 at 11.10.21 AM.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-05-22T13:44:20.855Z","created_by":"5357ef811693be2118000001","created":"2017-05-22T13:44:20.855Z","status":"published","modified_at":"2020-08-10T14:04:22.001Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

We're releasing a couple new additions to our powerful Metafields feature.  Check them out...

","featured_image":{"url":"https://cdn.cosmicjs.com/3508bc70-3f09-11e7-bb72-af71fa7a5dfd-Screen Shot 2017-05-22 at 11.10.21 AM.png","imgix_url":"https://imgix.cosmicjs.com/3508bc70-3f09-11e7-bb72-af71fa7a5dfd-Screen Shot 2017-05-22 at 11.10.21 AM.png"}}},{"_id":"591dcd407b17dbf1050021d0","order":131,"slug":"how-to-build-a-mobile-product-catalog-app-using-angular-js-ionic-and-cosmic-js","title":"How to Build a Mobile Product Catalog App Using Angular JS, Ionic and Cosmic","content":"

TL;DR

View the codebase and follow installation instructions on GitHub.

In this tutorial I’m going to show you how to create a simple catalog mobile app with Cosmic and Ionic Framework.

Prerequisites

You’ll need the node.js, npm and ionic cli pre-installed. Make sure you already have them before start. Please refer to ionic docs how to do this. You need Ionic framework >= 2.0 to run this example, so make sure you have the right Ionic version:

ionic -v

Getting Started

First of all we’ll need to create the ionic project. We’ll use standard tabs template and will modify one tab to keep our Catalog component. So once you’ll have all prerequisites installed, you’ll need to setup the new Ionic project:

ionic start cosmic-demo tabs --v2

After you’ll setup this project you’ll be able to run

ionic serve

And play with your app in browser

Setting up Cosmic library

First of all, install Cosmic Angular/JavaScript library

npm install cosmicjs --save

Now you should be able to import Cosmic object and perform Cosmic API calls like following:

import Cosmic from 'cosmicjs';\r\nconst bucket = { slug: 'your-bucket-slug' };\r\n\r\nCosmic.getObjects({ bucket }, (err, res) => {\r\n  console.log(res.objects);\r\n});

Setting up things with Cosmic

Create the bucket and remember the bucket name (‘cosmic-ionic’ in our case): 

Than create a new object type named ‘Category’ and please remember the object type slug (‘categories’).

We don’t need any additional settings right now, so just set the name and save object type. After save you’ll be redirected to ‘New Category’ page. Create some categories using this page and save them.

Now create the Product object type using the same method as for categories. But we’ll have one difference - please enter the “Metafields Template” tab and add “Image/File” type metafield with key 'image'. This metafield\r\nwill store the product image.

The second metafield you’ll need to add is “Single Object Relationship”. Please create such metafield and choose Category as “Object type to choose from”.

Such Product structure allows us to create one-to-many relationship between products and categories.

Once Product object type will be created, please add some demo products and assign them to different categories. Make sure you’ll have more than 5 products in single category - this allow us to test infinite scroll.

Ionic part of the app

Create src/pages/categories_list/categories_list.ts file with the following content:

import { Component } from '@angular/core';\r\nimport { NavController } from 'ionic-angular';\r\nimport Cosmic from 'cosmicjs';\r\nimport { ProductsList } from '../products_list/products_list';\r\n\r\n@Component({\r\n    selector: 'page-categories',\r\n    templateUrl: 'categories_list.html'\r\n})\r\nexport class CategoriesList {\r\n    public categories;\r\n\r\n    constructor(\r\n        public navCtrl: NavController\r\n    ) {\r\n        this.categories = [];\r\n\r\n        Cosmic.getObjectType({\r\n            bucket: {\r\n                slug: 'cosmic-ionc'\r\n            }\r\n        }, {\r\n            type_slug: 'categories'\r\n        }, (err, res) => {\r\n            this.categories = res.objects.all;\r\n        });\r\n    }\r\n    navToCategory(category) {\r\n        this.navCtrl.push(ProductsList, { title: category.title, id: category._id });\r\n    }\r\n}

Than create a template for CategoriesList component:

<ion-header>\r\n  <ion-navbar>\r\n    <ion-title>\r\n      Categories\r\n    </ion-title>\r\n  </ion-navbar>\r\n</ion-header>\r\n<ion-content padding>\r\n    <ion-list>\r\n        <button ion-item *ngFor="let category of categories" (click)="showProducts()">\r\n            {{ category.title }}\r\n        </button>\r\n    </ion-list>\r\n</ion-content>

Add CategoriesList component to app.module.ts as it’s done with other components like HomePage and set it as first tab for TabsPage component.

What happens here?

Our Categories list component uses Cosmic API on its constructor to receive a list of categories we have. It uses two things to achieve the required functionality:

CategoriesList components references ProductsList component - it navigates to products list page once user click on the category item. So we need the ProductsList - component which will show us products list for each particular category. Let’s introduce it!

import { Component } from '@angular/core';\r\nimport { NavController, NavParams } from 'ionic-angular';\r\nimport {Http} from '@angular/http';\r\nimport { DomSanitizer } from '@angular/platform-browser'\r\n@Component({\r\n    selector: 'page-products-list',\r\n    templateUrl: 'products_list.html'\r\n})\r\nexport class ProductsList {\r\n    public products;\r\n    public category_title;\r\n    constructor(\r\n        public navCtrl: NavController,\r\n        public params: NavParams,\r\n        public http: Http,\r\n        private sanitizer: DomSanitizer\r\n    ) {\r\n        this.products = [];\r\n        this.category_title = this.params.get('title');        this.http.get(`https://api.cosmicjs.com/v1/cosmic-ionc/object-type/products/search?metafield_key=category&metafield_value=${this.params.get('id')}`).subscribe((resp) => {\r\n            let data = resp.json();\r\n            if (data.objects) {\r\n                this.products = data.objects;\r\n            }\r\n            else {\r\n                this.products = [];\r\n            }\r\n        });\r\n    }\r\n    getImageUrl(product) {\r\n        let url = product.metafields.find((v) => { return (v.key == 'image') }).value;\r\n        return `https://cosmicjs.imgix.net/${url}`;\r\n    }\r\n    sanContent(product): any {\r\n        return this.sanitizer.bypassSecurityTrustHtml(product.content);\r\n    }\r\n\r\n}

And here we have the ProductsList template:

<ion-header>\r\n  <ion-navbar>\r\n    <ion-title>\r\n      {{ category_title }}\r\n    </ion-title>\r\n  </ion-navbar>\r\n</ion-header>\r\n<ion-content padding>\r\n    <ion-card ion-item *ngFor="let product of products">\r\n        <img [src]="getImageUrl(product)" alt="">\r\n        <ion-card-content>\r\n            <ion-card-title>{{ product.title }}</ion-card-title>\r\n            <div class="white-space-normal" [innerHTML]="sanContent(product)"></div>\r\n        </ion-card-content>\r\n    </ion-card>\r\n</ion-content>

What’s happening here?

Cosmic JavaScript library doesn’t provide any method to filter objects by their properties, but REST API does. That’s why we’re doing a HTTP request to Cosmic API using Angular Http module.

In this case request URL should look like the following:

https://api.cosmicjs.com/v1/BUCKET_NAME/object-type/OBJECT_TYPE_SLUG/search?metafield_key=CATEGORY_OBJECT_TYPE_SLUG&metafield_value=CATEGORY_OBJECT_ID

The second interesting thing we have to look at is getImageUrl function. Image is a part of product metadata, that’s why it’ll be an item of metafields array for each API response object. Our goal is to extract the required metafieldsarray\r\nitem (with key field equals to ‘image’ - the key we’ve entering during metafield creation). This array item will also have value key - it’s the image file name, we’ll need to prepend it with https://cosmicjs.imgix.net/ to\r\nget full image URL.

We’re using Angular 4 here, that’s why we have to use DomSanitizer to display HTML markup received from Cosmic API.

Conclusion

Cosmic allows us to quickly start mobile application development without thinking too much about backend and API. Generally, everything can be done using your Ionic/Angular developers and would save you a lof of time and money. Any backend/API entities\r\ncan be quickly added/removed or modified to meet your project requirements.

","metafields":[{"object_type":"authors","value":"591dcc617b17dbf10500212d","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"591dcc617b17dbf10500212d","slug":"ivan-larionov","title":"Ivan Larionov","content":"","metafields":[{"value":"713396e0-3be7-11e7-bfc3-91ffe5d3362c-ivan.jpeg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/713396e0-3be7-11e7-bfc3-91ffe5d3362c-ivan.jpeg","imgix_url":"https://imgix.cosmicjs.com/713396e0-3be7-11e7-bfc3-91ffe5d3362c-ivan.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-05-18T16:31:29.363Z","created_by":"5357ef811693be2118000001","created":"2017-05-18T16:31:29.363Z","status":"published"}},{"value":"

In this tutorial I’m going to show you how to create a simple catalog mobile app with Cosmic and Ionic Framework.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"0274a5e0-3be8-11e7-bfc3-91ffe5d3362c-angular-ionic-cosmic.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/0274a5e0-3be8-11e7-bfc3-91ffe5d3362c-angular-ionic-cosmic.jpg","imgix_url":"https://imgix.cosmicjs.com/0274a5e0-3be8-11e7-bfc3-91ffe5d3362c-angular-ionic-cosmic.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-05-18T16:35:12.586Z","created_by":"5357ef811693be2118000001","created":"2017-05-18T16:35:12.586Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"591dcc617b17dbf10500212d","slug":"ivan-larionov","title":"Ivan Larionov","content":"","metafields":[{"value":"713396e0-3be7-11e7-bfc3-91ffe5d3362c-ivan.jpeg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/713396e0-3be7-11e7-bfc3-91ffe5d3362c-ivan.jpeg","imgix_url":"https://imgix.cosmicjs.com/713396e0-3be7-11e7-bfc3-91ffe5d3362c-ivan.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-05-18T16:31:29.363Z","created_by":"5357ef811693be2118000001","created":"2017-05-18T16:31:29.363Z","status":"published","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/713396e0-3be7-11e7-bfc3-91ffe5d3362c-ivan.jpeg","imgix_url":"https://imgix.cosmicjs.com/713396e0-3be7-11e7-bfc3-91ffe5d3362c-ivan.jpeg"}}},"teaser":"

In this tutorial I’m going to show you how to create a simple catalog mobile app with Cosmic and Ionic Framework.

","featured_image":{"url":"https://cdn.cosmicjs.com/0274a5e0-3be8-11e7-bfc3-91ffe5d3362c-angular-ionic-cosmic.jpg","imgix_url":"https://imgix.cosmicjs.com/0274a5e0-3be8-11e7-bfc3-91ffe5d3362c-angular-ionic-cosmic.jpg"}}},{"_id":"5919ab2fe5e17073690057d4","order":132,"slug":"building-an-inventory-management-app-using-vuejs-and-laravel","title":"Building an Inventory Management App Using Vue.js and Laravel","content":"

In this tutorial, we are going to be creating a simple inventory management application with Laravel and Vue.js as our frontend. This tutorial assumes you have a basic knowledge of object oriented php and javascript, and though we will be going through the basics of Laravel and Vue.js, it is recommended to have a basic understanding of their concepts. Now that we have that cleared, fire up your php server and let’s build something.

TL;DR

View Demo
Check out the code on GitHub

Getting Started:

Since this is a laravel application you will need to create a new laravel project, ensure your server meets laravel’s requirements as stated here Laravel Servrer Requirements, and also make sure you have Composer installed on your server. Once you\r\nhave composer installed open up your command line and cd into your server root then simply run

composer create-project --prefer-dist laravel/laravel inventory

This will setup a new laravel project in the directory inventory once it has been succesfully run.

After setting up the new project you will then run npm install or npm install --no-bin-links if you are devveloping on windows. This will download and setup all our javascript dependencies. To be able to view our empty laravel project simply run php artisan\r\nserve from our project's directory, this will fire up a php server from our project's root which you can then type http://127.0.0.1:8000 in your browser url and you should be greeted with the default laravel screen.

Setting up the Cosmic php library

We will be using some functions from the Cosmic php library, download the repo into a separate folder, we will have to edit it a bit to work neatly with laravel. In the inventory/app/ folder, create a /Vendor/cosmicjs folder and copy all the contents of the cosmicjs-php library into it, such that for example the path for cosmicjs.php becoms app/Vendor/cosmicjs/cosmicjs.php. Then rename app/Vendor/cosmicjs/curl class to app/Vendor/cosmicjs/cosmiccurl and change this top part of the code:

class Curl {\r\n  ...\r\n  }

to

namespace App\\Vendor\\cosmicjs;\r\n\r\nclass CosmicCurl {\r\n  ....\r\n}

What we did was add a namespace to the cosmiccurl file so we can import into laravel and change the class name to match the file name. After doing that replace this section of cosmicjs.php

include("curl.php");\r\n$curl = new Curl;\r\nclass CosmicJS {\r\n  function __construct(){\r\n    global $curl;\r\n    global $config;\r\n    $this->curl = $curl;\r\n    $this->config = $config;\r\n    $this->config->bucket_slug = $config->bucket_slug;\r\n    $this->config->object_slug = $config->object_slug;\r\n    $this->config->read_key = $config->read_key;\r\n    $this->config->write_key = $config->write_key;\r\n    $this->config->url = "https://api.cosmicjs.com/v1/" . $this->config->bucket_slug;\r\n    $this->config->objects_url = $this->config->url . "/objects?read_key=" . $this->config->read_key;\r\n    $this->config->object_url = $this->config->url . "/object/" . $this->config->object_slug . "?read_key=" . $this->config->read_key;\r\n    $this->config->media_url = $this->config->url . "/media?read_key=" . $this->config->read_key;\r\n    $this->config->add_object_url = $this->config->url . "/add-object?write_key=" . $this->config->write_key;\r\n    $this->config->edit_object_url = $this->config->url . "/edit-object?write_key=" . $this->config->write_key;\r\n    $this->config->delete_object_url = $this->config->url . "/delete-object?write_key=" . $this->config->write_key;\r\n  }

with

namespace App\\Vendor\\cosmicjs;\r\n\r\nuse App\\Vendor\\cosmicjs\\CosmicCurl;\r\n\r\nclass CosmicJS {\r\n\r\n    private $config;\r\n    private $curl;\r\n    function __construct($bucket_slug, $type_slug,$object_slug = "", $read_key = "", $write_key = "") {\r\n        $this->curl = new CosmicCurl();\r\n        $this->config = new \\stdClass();\r\n        //$this->config = $config;\r\n        $this->config->bucket_slug = $bucket_slug;\r\n        $this->config->object_slug = $object_slug;\r\n        $this->config->type_slug = $type_slug;\r\n        $this->config->read_key = $read_key;\r\n        $this->config->write_key = $write_key;\r\n        $this->config->url = "https://api.cosmicjs.com/v1/" . $this->config->bucket_slug;\r\n        $this->config->objects_url = $this->config->url . "/objects?read_key=" . $this->config->read_key;\r\n        $this->config->object_type_url = $this->config->url . "/object-type/" . $this->config->type_slug . "?read_key=" . $this->config->read_key;\r\n        $this->config->object_url = $this->config->url . "/object/" . $this->config->object_slug . "?read_key=" . $this->config->read_key;\r\n        $this->config->media_url = $this->config->url . "/media?read_key=" . $this->config->read_key;\r\n        $this->config->add_object_url = $this->config->url . "/add-object?write_key=" . $this->config->write_key;\r\n        $this->config->edit_object_url = $this->config->url . "/edit-object?write_key=" . $this->config->write_key;\r\n        $this->config->delete_object_url = $this->config->url . "/delete-object?write_key=" . $this->config->write_key;\r\n    }\r\n\r\n

what this bit of change does is that it imports the cosmiccurl using its namespace, and it enables us to create multiple instances of a cosmicjs object quickly within laravel, simply by initializing with constructor parameters instead of having to setup some config variables which can get messy when being used with larger applications.Finally add the following function to the cosmicjs.php file.

public function getByObjectSlug($key,$slug)\r\n    {   \r\n        $this->config->object_by_meta_object = $this->config->url ."/object-type/" . $this->config->type_slug ."/search?metafield_key=" . $key ."&metafield_object_slug=" .$slug;\r\n        $data = json_decode($this->curl->get($this->config->object_by_meta_object));\r\n        return $data;\r\n    }

Building our app

Now that we have our cosmicjs library setup in the app/Vendor folder, its time to actually build something. Since all requests will be handled by the app/Http/Controller/IndexController.php file open it up and copy and paste this code into it.

<?php\r\n\r\nnamespace App\\Http\\Controllers;\r\n\r\nuse Illuminate\\Http\\Request;\r\nuse App\\Vendor\\cosmicjs\\CosmicJS;\r\nuse GuzzleHttp\\Client;\r\n\r\nclass IndexController extends Controller {\r\n\r\n    private $locations_cosmic;\r\n    private $items_cosmic;\r\n    private $bucket_slug = '';\r\n    private $read_key = '';\r\n    private $write_key = '';\r\n\r\n    public function __construct() {\r\n        //initialize cosmicjs php instance for fetching all locations\r\n        $this->bucket_slug = config('cosmic.slug');\r\n        $this->read_key = config('cosmic.read');\r\n        $this->write_key = config('cosmic.write');\r\n        $this->locations_cosmic = new CosmicJS($this->bucket_slug, 'locations');\r\n        $this->items_cosmic = new CosmicJS($this->bucket_slug, 'items', $this->read_key, $this->write_key);\r\n    }\r\n\r\n    public function index($location = null) {\r\n\r\n        //get objects with cosmic-js php\r\n        $locations = $this->locations_cosmic->getObjectsType();\r\n\r\n        //set locations and bucket_slug variable to be passed to view\r\n        if (property_exists($locations, 'objects')) {\r\n            $data['locations'] = $locations->objects;\r\n        }\r\n        else\r\n        {\r\n            $data['locations'] = [];\r\n        }\r\n\r\n        $data['bucket_slug'] = $this->bucket_slug;\r\n\r\n        //if location slug was passed in url, pass it to view as well\r\n        if ($location) {\r\n            $data['location_slug'] = $location;\r\n        } else {\r\n            $data['location_slug'] = '';\r\n        }\r\n\r\n        //load view\r\n        return view('index', $data);\r\n    }\r\n\r\n    //fetch items for location based on slug\r\n    public function itemsByLocation($slug) {\r\n        //fetch items using the cosmicjs library's custom function\r\n        $items = $this->items_cosmic->getByObjectSlug('location', $slug);\r\n\r\n        //if the returned value has "object" property, pass it \r\n        if (property_exists($items, 'objects')) {\r\n            //returning arrays in laravel automatically converts it to json string\r\n            return $items->objects;\r\n        } else {\r\n            return 0;\r\n        }\r\n    }\r\n\r\n    public function newLocation(Request $request) {\r\n        //get passed input\r\n        $title = $request->input('title');\r\n        $address = $request->input('address');\r\n        $picture = $request->input('image');\r\n\r\n        //set data array\r\n        $data['title'] = $title;\r\n        $data['type_slug'] = "locations";\r\n        $data['bucket_slug'] = $this->bucket_slug;\r\n        $metafields = array();\r\n        $address_data['key'] = "address";\r\n        $address_data['type'] = 'textarea';\r\n        $address_data['value'] = $address;\r\n        if ($picture != '') {\r\n            $picture_data['key'] = "picture";\r\n            $picture_data['type'] = 'file';\r\n            $picture_data['value'] = $picture;\r\n            array_push($metafields, $picture_data);\r\n        }\r\n        array_push($metafields, $address_data);\r\n        $data['metafields'] = $metafields;\r\n\r\n        //create a new guzzle client\r\n        $client = new Client();\r\n        //create guzzle request with data array passed as json value\r\n        $result = $client->post('https://api.cosmicjs.com/v1/' . $this->bucket_slug . '/add-object', [\r\n            'json' => $data,\r\n            'headers' => [\r\n                'Content-type' => 'application/json',\r\n            ]\r\n        ]);\r\n        //flash message\r\n        $request->session()->flash('status', 'The location"' . $title . '" was successfully locations');\r\n        //return result body\r\n        return $result->getBody();\r\n    }\r\n\r\n    //create a new item\r\n    public function newItem(Request $request) {\r\n        //get data\r\n        $name = $request->input('name');\r\n        $count = $request->input('count');\r\n        $location_id = $request->input('location');\r\n        $picture = $request->input('image');\r\n\r\n        //create data array to be passed\r\n        $data['title'] = $name;\r\n        $data['type_slug'] = "items";\r\n        $data['bucket_slug'] = $this->bucket_slug;\r\n        $count_metafield['key'] = "count";\r\n        $count_metafield['value'] = $count;\r\n        $count_metafield['type'] = "text";\r\n        $location_meta['key'] = "location";\r\n        $location_meta['object_type'] = "locations";\r\n        $location_meta['type'] = "object";\r\n        $location_meta['value'] = $location_id;\r\n        $metafields = array();\r\n\r\n        //set picture if passed into request\r\n        if ($picture != '') {\r\n            $picture_data['key'] = "picture";\r\n            $picture_data['type'] = 'file';\r\n            $picture_data['value'] = $picture;\r\n            array_push($metafields, $picture_data);\r\n        }\r\n        array_push($metafields, $count_metafield);\r\n        array_push($metafields, $location_meta);\r\n        $data['metafields'] = $metafields;\r\n\r\n        $client = new Client();\r\n        $result = $client->post('https://api.cosmicjs.com/v1/' . $this->bucket_slug . '/add-object', [\r\n            'json' => $data,\r\n            'headers' => [\r\n                'Content-type' => 'application/json',\r\n            ]\r\n        ]);\r\n        //flash message\r\n        $request->session()->flash('status', 'The Item "' . $name . '" was successfully created');\r\n        //return result body\r\n        return $result->getBody();\r\n    }\r\n\r\n    public function editItem(Request $request) {\r\n        $name = $request->input('name');\r\n        $count = $request->input('count');\r\n        $slug = $request->input('slug');\r\n        $location_id = $request->input('location_id');\r\n\r\n        $data['title'] = $name;\r\n        $data['slug'] = $slug;\r\n        $count_meta['key'] = "count";\r\n        $count_meta['value'] = $count;\r\n        $count_meta['type'] = "text";\r\n        $location_meta['key'] = "location";\r\n        $location_meta['object_type'] = "locations";\r\n        $location_meta['type'] = "object";\r\n        $location_meta['value'] = $location_id;\r\n        $metafields = array();\r\n        //set picture if passed into request\r\n        if ($request->input('image')) {\r\n            $picture_data['key'] = "picture";\r\n            $picture_data['type'] = 'file';\r\n            $picture_data['value'] = $request->input('image');\r\n            array_push($metafields, $picture_data);\r\n        }\r\n        array_push($metafields, $count_meta);\r\n        array_push($metafields, $location_meta);\r\n        $data['metafields'] = $metafields;\r\n\r\n        $client = new Client();\r\n        $result = $client->put('https://api.cosmicjs.com/v1/' . $this->bucket_slug . '/edit-object', [\r\n            'json' => $data,\r\n            'headers' => [\r\n                'Content-type' => 'application/json',\r\n            ]\r\n        ]);\r\n        //flash message\r\n        $request->session()->flash('status', 'The Item was successfully edited!');\r\n        //return result body\r\n        return $result->getBody();\r\n    }\r\n\r\n    public function deleteItem(Request $request, $slug) {\r\n        //create new client and delete item\r\n        $client = new Client();\r\n        $result = $client->delete('https://api.cosmicjs.com/v1/' . $this->bucket_slug . '/' . $slug, [\r\n            'headers' => [\r\n                'Content-type' => 'application/json',\r\n            ]\r\n        ]);\r\n\r\n        //flash message\r\n        $request->session()->flash('status', 'The Item was successfully deleted!');\r\n        return $result;\r\n    }\r\n\r\n}\r\n\r\n

The code above is preety self explanatory with the comments included

Things to note:

  1. We create a new Cosmic instance for retrieving locations
  2. We are setting up all functions our vuejs frontend will interact with
  3. $client = new CLient() creates a new guzzle instance which we use to make calls to the cosmic api

Next we will create our routes in the routes/web.php file. Open up the file and copy and paste this code into it.

<?php\r\nRoute::get('/{location?}', 'IndexController@index');\r\nRoute::get('items/{slug}', 'IndexController@itemsByLocation');\r\nRoute::post('locations/new','IndexController@newLocation');\r\nRoute::post('items/new','IndexController@newItem');\r\nRoute::post('items/edit','IndexController@editItem');

what are we doing

We are registering all our IndexCOntroller's function to routes so they can be accessible by the frontend.

Building the frontend

Remember this code in our IndexController return view('index', $data);? well its time to create the view that will be loaded. Open up the /resources/views folder and open up the master.blade.php then copy and paste this into it.

<html lang="{{ config('app.locale') }}">\r\n    <head>\r\n        <meta charset="utf-8">\r\n        <meta http-equiv="X-UA-Compatible" content="IE=edge">\r\n        <meta name="viewport" content="width=device-width, initial-scale=1">\r\n        <!-- Set Csrf token on all pages -->\r\n        <meta name="csrf-token" content="{{ csrf_token() }}">\r\n        <!-- Load Bootstrap-->\r\n        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">\r\n        <link href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.2/sweetalert2.css" rel="stylesheet" type="text/css">\r\n        <title>Inventory Manger</title>\r\n\r\n        <!-- Fonts -->\r\n        <link rel="stylesheet" href="{{ asset('css/font-awesome/css/font-awesome.min.css')}}"/>\r\n        <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">\r\n        <script src="https://use.fontawesome.com/682442a8be.js"></script>\r\n\r\n        <!-- Set Csrf token to be used by javascript and axios-->\r\n        <script>\r\nwindow.Laravel = <?php\r\necho json_encode([\r\n    'csrfToken' => csrf_token(),\r\n]);\r\n?>\r\n        </script>\r\n        <!-- Styles -->\r\n        <style>\r\n            .location-tab{\r\n                height:104px;\r\n                padding-left: 150px;\r\n            }\r\n            \r\n            .location-tab > img{\r\n                position: absolute;\r\n                left: 0;\r\n                top: 0;\r\n                height: 100%;\r\n                width: auto;\r\n                max-width: 130px;\r\n            }\r\n            \r\n            .text-primary{\r\n                color: #29ABE2 !important;\r\n            }\r\n            \r\n            .panel-heading{\r\n                background-color: #29ABE2 !important;\r\n                color: white !important;\r\n            }\r\n            \r\n            .panel{\r\n                border-color: #29ABE2 !important;\r\n            }\r\n            \r\n            .btn-primary{\r\n                background-color: #29ABE2 !important;\r\n                color: white !important;\r\n                border-color: #29ABE2 !important;\r\n                border-radius: 3px;\r\n                margin: 10px 0;\r\n            }\r\n        </style>\r\n    </head>\r\n    <body>\r\n        <div class="container">\r\n            <div id="wrapper">\r\n                @yield('content')\r\n            </div>\r\n        </div>\r\n        <!-- Load Jquery and bootstrap js-->\r\n        <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>\r\n        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>\r\n        <script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.2/sweetalert2.min.js"></script>\r\n        <script src="{{ asset('/js/app.js')}}"></script>\r\n        @yield('scripts')\r\n    </body>\r\n</html>\r\n\r\n

THe master.blade.php will serve as an extendable layout which we can then use as parent layouts for all our other views. Now create an index.blade.php file in the same folder and paste this into it.

@extends('master')\r\n\r\n@section('content')\r\n<div class="row">\r\n    <div class="col-md-12">\r\n        <div style="float:left">\r\n            <h1>Inventory Management</h1>\r\n        </div>\r\n        <div style="float:right;padding-top: 20px">\r\n            <a class="btn btn-default"><i class="fa fa-github"></i> View on Github</a>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class="row">\r\n    <div class="col-md-12">\r\n        <div style="float: right; margin-bottom: 15px;"><a href="https://www.cosmicjs.com" target="_blank" style="text-decoration: none;"><img class="pull-left" src="https://www.cosmicjs.com/images/logo.svg" width="28" height="28" style="margin-right: 10px;"><span style="color: rgb(102, 102, 102); position: relative; top: 3px;">Proudly powered by Cosmic</span></a></div>\r\n    </div>\r\n</div>\r\n\r\n<div class="row" style="font-size: 16px">\r\n    <!-- Display vue component and set props from given data  -->\r\n    <inventory message="{{Session::get('status')}}" :initial-locations="{{ json_encode($locations) }}" slug="{{ $bucket_slug }}" location-slug="{{ $location_slug }}"></inventory>\r\n</div>\r\n@endsection\r\n\r\n@section('scripts')\r\n<script>\r\n</script>\r\n@endsection

Things to note

  1. We created a master layout which has available sections for content, script and style that our other view can extend.
  2. We added the vue component (which will be created in the next section), with props as the data given to the view by the controller

Creating Our Controller

This section assumes you have fundamental knowledge of Vuejs, if not i recommend you brush up on it, as explaining how some vue functions works is out of the scope of this tutorial. Now to begin, open a command prompt and cd to the app's folder then\r\nrun npm run watch to fire up laravel mix, this will compile our assets whenever a change has been made to any of our files, alternatively you could type npm run dev whenever you need to compile the assets yourself. Open the /resources/assets/js/app.js\r\nfile and change this

Vue.component('example', require('./components/Example.vue'));

to

Vue.component('inventory', require('./components/Inventory.vue'));

Here we are replacing the default example component with a component called inventory which we will be creating.In the /resources/assets/js/components folder create and Inventory.vue file to house our component. In the newly created file copy and paste this code into it

<template>\r\n    <div>\r\n        <!---- ADD LOCATION FORM -->\r\n        <div v-if="add_location">\r\n            <button class="btn btn-primary" v-on:click="add_location=false"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> Go back</button>\r\n            <div class="panel panel-default">\r\n                <div class="panel-heading">Add New Location</div>\r\n                <div class="panel-body">\r\n                    <form id="location_form" name="location">\r\n                        <div class="form-group">\r\n                            <label for="name">Name</label>\r\n                            <input type="text" class="form-control" name="title" required="">\r\n                            <label for="address">Address</label>\r\n                            <input type="text" class="form-control" name="address" required="">\r\n                            <label for="image">Image</label>\r\n                            <input type="file" class="form-control media" name="media"/>\r\n                        </div>\r\n                        <button type="submit" class="btn btn-primary" :class="{disabled: isDisabled}" v-on:click.prevent="addLocation">Submit</button>\r\n                    </form>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div v-else>\r\n            <!---- LOCATIONS LIST -->\r\n            <div v-if="unselected">\r\n                <button class="btn btn-primary pull-right" v-on:click="add_location = true"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>Add New</button>\r\n                <ul class="list-group">\r\n                    <button type="button" class="list-group-item location-tab text-primary" :class="{disabled: list_disable}" v-for="location in locations" v-on:click="fetchItems(location)"><img v-if="location.metadata.hasOwnProperty('picture')" :src="location.metadata.picture.url">{{ location.title }} - {{ location.metadata.address}}</button>\r\n                </ul>\r\n            </div>\r\n\r\n            <div v-else>\r\n                <!---- ADD ITEM FORM -->\r\n                <div v-if="add_item">\r\n                    <button class="btn btn-primary" v-on:click="add_item=false"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> Go back</button>\r\n                    <div class="panel panel-default">\r\n                        <div class="panel-heading">Add New Item</div>\r\n                        <div class="panel-body">\r\n                            <form id="item_form">\r\n                                <div class="form-group">\r\n                                    <label for="name">Name</label>\r\n                                    <input type="text" class="form-control" name="name">\r\n                                </div>\r\n                                <div class="form-group">\r\n                                    <label for="count">Count</label>\r\n                                    <input type="number" class="form-control" name="count">\r\n                                </div>\r\n                                <div>\r\n                                    <label for="image">Image</label>\r\n                                    <input type="file" class="form-control media" name="media"/>\r\n                                </div>\r\n                                <button type="submit" class="btn btn-primary" :class="{disabled: isDisabled}" v-on:click.prevent="addItem">Submit</button>\r\n                            </form>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <!---- EDIT ITEM FORM -->\r\n                <div v-else-if="edit_item">\r\n                    <button class="btn btn-primary" v-on:click="edit_item=false"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> Go back</button>\r\n                    <div class="panel panel-default">\r\n                        <div class="panel-heading">Edit {{ selected_item.title }}</div>\r\n                        <div class="panel-body">\r\n                            <form id="edit_item">\r\n                                <div class="form-group">\r\n                                    <label for="name">Name</label>\r\n                                    <input type="text" class="form-control" name="name" :value="selected_item.title">\r\n                                </div>\r\n                                <div class="form-group">\r\n                                    <label for="count">Count</label>\r\n                                    <input type="number" class="form-control" name="count" :value="selected_item.metadata.count">\r\n                                </div>\r\n                                <button type="submit" class="btn btn-primary" :class="{disabled: isDisabled}" v-on:click.prevent="editItem">Submit</button>\r\n                            </form>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div v-else>\r\n                    <!---- ITEMS LIST -->\r\n                    <button class="btn btn-primary" v-on:click="unselected=true"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> Go back</button>\r\n                    <button class="btn btn-primary pull-right" v-on:click="add_item = true"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>Add New Item</button>\r\n                    <div class="panel panel-default">\r\n                        <div class="panel-heading">{{ selected_location.title }}</div>\r\n                        <div class="panel-body">\r\n                            <ul class="list-group">\r\n                                <button type="button" class="list-group-item text-primary location-tab" :class="{disabled: isDisabled}" v-for="item in items"><img v-if="item.metadata.hasOwnProperty('picture')" :src="item.metadata.picture.url">{{ item.title }} - {{ item.metadata.count }} <div class="pull-right"><span class="glyphicon glyphicon-pencil" aria-hidden="true" v-on:click.prevent="openEdit(item)"></span><span class="glyphicon glyphicon-trash" aria-hidden="true" v-on:click.prevent="deleteItem(item)" style="padding: 0 5px;"></span></div></button>\r\n                            </ul>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n</template>\r\n\r\n<script>\r\n    export default {\r\n        mounted() {\r\n            var self = this;\r\n            //If location slug was passed show items for that location\r\n            if(this.message)\r\n            {\r\n                swal(this.message);\r\n            }\r\n            if (this.locationSlug)\r\n            {\r\n                this.unselected = false;\r\n                //find location with slug\r\n                var item = this.locations.filter(function (obj)\r\n                {\r\n                    return obj.slug === self.locationSlug;\r\n                });\r\n\r\n                this.selected_location = item[0];\r\n                this.fetchItems(this.selected_location);\r\n            }\r\n        },\r\n        props: ['initial-locations', 'slug', 'location-slug','message'],\r\n        data: function () {\r\n            return {\r\n                edit_item: false,\r\n                locations: this.initialLocations,\r\n                isDisabled: false,\r\n                list_disable: false,\r\n                unselected: true,\r\n                items: [],\r\n                add_location: false,\r\n                selected_location: [],\r\n                selected_item: [],\r\n                add_item: false\r\n            };\r\n        },\r\n        methods: {\r\n            fetchItems(location)\r\n            {\r\n                //disable the list and fetch items from laravel\r\n                var self = this;\r\n                this.list_disable = true;\r\n                axios.get('items/' + location.slug).then(response => {\r\n                    if (response.data.constructor === Array)\r\n                    {\r\n                        self.items = (response.data);\r\n                        self.selected_location = location;\r\n                        self.unselected = false;\r\n                    } else {\r\n                        self.selected_location = location;\r\n                        self.items = [];\r\n                        self.unselected = false;\r\n                    }\r\n                    self.list_disable = false;\r\n\r\n                });\r\n            },\r\n            addLocation()\r\n            {\r\n                //disable button\r\n                this.isDisabled = true;\r\n                var image = '';\r\n                var form = $("#location_form")[0];\r\n                var data = new FormData(form);\r\n                //Check if image is selected then upload image first\r\n                if ($("#location_form .media").val() !== '')\r\n                {\r\n                    //delete X-csrf-token default header as it is not accepted by cosmic api\r\n                    delete axios.defaults.headers.common["X-CSRF-TOKEN"];\r\n                    axios.post('https://api.cosmicjs.com/v1/' + this.slug + '/media', data).then(function (response)\r\n                    {\r\n                        //set x-csrf-token again\r\n                        window.axios.defaults.headers.common['X-CSRF-TOKEN'] = window.Laravel.csrfToken;\r\n                        //get image name, append to formdata and send form data to laravel to add location\r\n                        image = response.data.media.name;\r\n                        data.set('image', image);\r\n                        axios.post('locations/new', data).then(response => {\r\n                            location.reload(true);\r\n                        });\r\n                    });\r\n                } else {\r\n                    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = window.Laravel.csrfToken;\r\n                    //send form data to laravel without image\r\n                    axios.post('locations/new', data).then(response => {\r\n                        location.reload(true);\r\n                    });\r\n                }\r\n\r\n            },\r\n            //set selected item and open edit item section\r\n            openEdit(item)\r\n            {\r\n                this.selected_item = item;\r\n                this.edit_item = true;\r\n            },\r\n            addItem() {\r\n                var self = this;\r\n                this.isDisabled = true;\r\n                var form = $('#item_form')[0];\r\n                var data = new FormData(form);\r\n                data.append('location', this.selected_location._id);\r\n                //Check if image is selected the upload image first\r\n                if ($("#item_form .media").val() !== '')\r\n                {\r\n                    //delete X-csrf-token default header as it is not allowed by cosmic api and post\r\n                    delete axios.defaults.headers.common["X-CSRF-TOKEN"];\r\n                    axios.post('https://api.cosmicjs.com/v1/' + this.slug + '/media', data).then(function (response)\r\n                    {\r\n                        //set x-csrf-token again\r\n                        window.axios.defaults.headers.common['X-CSRF-TOKEN'] = window.Laravel.csrfToken;\r\n                        //get image name, append to formdata and send form data to laravel to add location\r\n                        var image = response.data.media.name;\r\n                        data.set('image', image);\r\n                        axios.post('items/new', data).then(response => {\r\n                            //refresh page BUT pass location_slug, which then makes the app load into the passed location\r\n                            window.location.href = "./" + self.selected_location.slug;\r\n                        });\r\n                    });\r\n                } else {\r\n                    //add header back after post\r\n                    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = window.Laravel.csrfToken;\r\n                    //send form data to laravel without image\r\n                    axios.post('items/new', data).then(response => {\r\n                        window.location.href = "./" + self.selected_location.slug;\r\n                    });\r\n                }\r\n            },\r\n            editItem()\r\n            {\r\n                //edit item, by sending data to IndexController's editItem() function\r\n                var self = this;\r\n                var form = $("#edit_item")[0];\r\n                var data = new FormData(form);\r\n                this.isDisabled = true;\r\n                data.append('slug', this.selected_item.slug);\r\n                if(this.selected_item.metadata.hasOwnProperty('picture')){\r\n                    data.append('image',this.selected_item.metafields[0].value);\r\n                }\r\n                \r\n                data.append('location_id', this.selected_location._id);\r\n                axios.post('items/edit', data).then(response => {\r\n                    //refresh page BUT pass location_slug, which then makes the app load into the passed location\r\n                    window.location.href = "./" + self.selected_location.slug;\r\n                });\r\n            },\r\n            deleteItem(item)\r\n            {\r\n                var self = this;\r\n                swal({\r\n                    title: 'Are you sure?',\r\n                    text: 'You will not be able to recover this item!',\r\n                    type: 'warning',\r\n                    showCancelButton: true,\r\n                    confirmButtonText: 'Yes, delete it!',\r\n                    cancelButtonText: 'Nope, still need it'\r\n                }).then(function(){\r\n                    axios.get('item/' + item.slug + '/delete').then(response => {\r\n                    window.location.href = "./" + self.selected_location.slug;\r\n                });\r\n                })\r\n                \r\n            }\r\n\r\n        }\r\n    }\r\n</script>

The big question, what is going on here (A Lot)?

A lot is going on in our vue components as that is where majority of the frontend is, to keep the tutorial simple, the main goal of sections and variables will be stated out, also the comments in the code explain what that section of the code is meant\r\nto accomplish

  1. We begin by setting up a few boolean (edit_item, add_item, add_location, unselected), these help in switching thw views of our app wheenever a variable has been changed, e.g when edit_item is true, the view is switched to the edit item form
  2. isDisable and list_disable are used to disable some ui elements sucha s buttons by binding their values to "disabled" class of bootstrap buttons
  3. Code in the mounted function, simply checks if a location slug was passed and if so switch the view to the location's items
  4. The methods created perform calls when actions have been taken, their main logic is stated in comments
  5. We used axios to make all our calls to laravel backend
  6. For image uploads, we first check if a file is selected, the upload the selected file first, before creating a new item with its picture metadata set as the returned picture name.

Note

  1. Make sure the assets were successfully compiled after the changes were made, and if you want to manually compile it simply run npm run production to compile into productin mode.
  2. We create a self variable and set it to this at the start of most functions because, if we use this in some nested function calls, we begin to loose context for the this variable. More info can be found on this stack overflow post

Setting the bucket slug

Now we want to set our bucket slug. We want to be able to set it by running an artisan comman so run php artisan make:command SetSlug. Now navigate to app/console/Commands/SetSlug and copy and paste this into it:

<?php\r\n\r\nnamespace App\\Console\\Commands;\r\n\r\nuse Illuminate\\Console\\Command;\r\n\r\nclass SetSlug extends Command {\r\n\r\n    /**\r\n     * The name and signature of the console command.\r\n     *\r\n     * @var string\r\n     */\r\n    protected $signature = 'bucket {slug} {read?} {write?}';\r\n\r\n    /**\r\n     * The console command description.\r\n     *\r\n     * @var string\r\n     */\r\n    protected $description = 'Set the bucket slug';\r\n\r\n    /**\r\n     * Create a new command instance.\r\n     *\r\n     * @return void\r\n     */\r\n    protected $files;\r\n    protected $read;\r\n    protected $write;\r\n\r\n    public function __construct(\\Illuminate\\Filesystem\\Filesystem $files) {\r\n        parent::__construct();\r\n        $this->files = $files;\r\n        \r\n    }\r\n\r\n    /**\r\n     * Execute the console command.\r\n     *\r\n     * @return mixed\r\n     */\r\n    public function handle() {\r\n        $this->read = $this->argument('slug');\r\n        $this->write = $this->argument('slug');\r\n        $config_path = base_path() . "/config/cosmic.php";\r\n        $content = "<?php\\n\\treturn [\\n\\t\\t'slug' => '" . $this->argument('slug') . "',\\n\\t\\t"\r\n                . "'read' => '" . $this->argument('read')."',\\n\\t\\t"\r\n                ."'write' => '" . $this->argument('write')."',\\n\\t];";\r\n        $this->files->put($config_path, $content);\r\n        echo "Bucket variables set";\r\n    }\r\n\r\n}

What we are doing is opening/creating a configuration file at config/cosmic.php and saving our variables from the command, now the bucket slug can be set with php artisan bucket bucket_slug read_key write_key. Now register it in your app/console/kernel.php\r\non the commands section with

protected $commands = [\r\n        Commands\\SetSlug::class\r\n    ];

Conclusion

We were able to create and update items using vue, the Cosmic php library, a bit of guzzle, and a lot of axios. You can feel free to tinker with the code and make your own modifications, a way to delete items, move to new locations, you name it, remember\r\nwe only scratched the surface of the amazing use of Cosmic with Laravel. So go on and create something amazing.

","metafields":[{"children":null,"type":"object","title":"Author","key":"author","id":"wZVBYMSjSE","value":"5919aa2ee5e17073690057b6","object_type":"authors","object":{"_id":"5919aa2ee5e17073690057b6","slug":"kofo-okesola","title":"Kofo Okesola","content":"","metafields":[{"value":"b3fecc70-3970-11e7-8b8c-299270efeba9-kofo.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/b3fecc70-3970-11e7-8b8c-299270efeba9-kofo.jpg","imgix_url":"https://imgix.cosmicjs.com/b3fecc70-3970-11e7-8b8c-299270efeba9-kofo.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-05-15T13:16:29.985Z","created_by":"5357ef811693be2118000001","created":"2017-05-15T13:16:29.985Z","status":"published"}},{"children":null,"type":"html-textarea","title":"Teaser","key":"teaser","id":"yd18ZUZBXY","value":"

In this tutorial, we are going to be creating a simple inventory management application with Laravel and Vue.js as our frontend.

"},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"CPCK6XLT6G","value":"a7b78780-3971-11e7-8b8c-299270efeba9-inventory-app-main.png","url":"https://cdn.cosmicjs.com/a7b78780-3971-11e7-8b8c-299270efeba9-inventory-app-main.png","imgix_url":"https://imgix.cosmicjs.com/a7b78780-3971-11e7-8b8c-299270efeba9-inventory-app-main.png"},{"children":null,"type":"textarea","title":"SEO Meta Description","key":"seo_meta_description","id":"fPwf0lIVF8","value":""},{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"XVscCXAtKv","value":""}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-05-15T13:20:47.823Z","created_by":"5357ef811693be2118000001","created":"2017-05-15T13:20:47.823Z","status":"published","modified_at":"2020-10-02T02:08:33.459Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-10-02T02:08:33.459Z","unpublish_at":null,"metadata":{"author":{"_id":"5919aa2ee5e17073690057b6","slug":"kofo-okesola","title":"Kofo Okesola","content":"","metafields":[{"value":"b3fecc70-3970-11e7-8b8c-299270efeba9-kofo.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/b3fecc70-3970-11e7-8b8c-299270efeba9-kofo.jpg","imgix_url":"https://imgix.cosmicjs.com/b3fecc70-3970-11e7-8b8c-299270efeba9-kofo.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-05-15T13:16:29.985Z","created_by":"5357ef811693be2118000001","created":"2017-05-15T13:16:29.985Z","status":"published","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/b3fecc70-3970-11e7-8b8c-299270efeba9-kofo.jpg","imgix_url":"https://imgix.cosmicjs.com/b3fecc70-3970-11e7-8b8c-299270efeba9-kofo.jpg"}}},"teaser":"

In this tutorial, we are going to be creating a simple inventory management application with Laravel and Vue.js as our frontend.

","featured_image":{"url":"https://cdn.cosmicjs.com/a7b78780-3971-11e7-8b8c-299270efeba9-inventory-app-main.png","imgix_url":"https://imgix.cosmicjs.com/a7b78780-3971-11e7-8b8c-299270efeba9-inventory-app-main.png"},"seo_meta_description":"","published_date":""}},{"_id":"591498a3a57d9d4b390034a3","order":133,"slug":"how-to-build-an-angularjs-events-app","title":"How to Build an AngularJS Events App","content":"

In this tutorial I'm going to show you how to create an "Events" app using a little bit of Node, Angular JS and Cosmic. For the sake of understanding how to consume Restful API’s, this tutorial will show how to make simple AJAX requests to\r\nthe Cosmic API in order to retrieve, update, and delete data in our Cosmic Bucket. Let's get started.

TL;DR

Download the GitHub repo.
Check out the demo.

Getting Started:

First, let’s make a new directory to build our project in and lets also make a package.json file.

mkdir events-app
events-app$ touch package.json

Now, in your package.json, copy and paste the code below:

//events-app/package.json\r\n{\r\n  "name": "events-app",\r\n  "version": "1.0.0",\r\n  "main": "app-server.js",\r\n  "engines": {\r\n    "node": "4.1.2",\r\n    "npm": "3.5.2"\r\n  },\r\n  "description": "",\r\n  "dependencies": {\r\n    "bower": "^1.7.7",\r\n    "http-server": "^0.9.0",\r\n    "gulp": "^3.9.1",\r\n    "gulp-autoprefixer": "^3.1.0",\r\n    "gulp-concat": "^2.6.0",\r\n    "gulp-concat-css": "^2.2.0",\r\n    "gulp-minify-css": "^1.2.4",\r\n    "gulp-webserver": "^0.9.1",\r\n    "wiredep": "^3.0.0",\r\n    "express": "^4.13.3"\r\n  },\r\n  "scripts": {\r\n    "postinstall": "bower install",\r\n    "start": "npm run production",\r\n    "production": "node app-server.js"\r\n  },\r\n  "author": "",\r\n  "license": "ISC"\r\n}\r\n

Second, let’s make a bower.json file.

events-app$ touch bower.json

Now, in your bower.json, copy and paste the code below:

//events-app/bower.json\r\n{\r\n  "name": "events-app",\r\n  "description": "Events App",\r\n  "version": "0.0.0",\r\n  "homepage": "https://github.com/cosmicjs/events-app",\r\n  "license": "MIT",\r\n  "private": true,\r\n  "dependencies": {\r\n    "angular": "~1.4.x",\r\n    "angular-mocks": "~1.4.x",\r\n    "angular-bootstrap": "~1.1.x",\r\n    "angular-cookies": "~1.4.x",\r\n    "angular-route": "~1.4.x",\r\n    "angular-ui-router": "0.2.x",\r\n    "angular-resource": "1.4.x",\r\n    "angular-animate": "~1.4.x",\r\n    "ng-dialog": "0.6.1",\r\n    "bootstrap": "3.3.x",\r\n    "cr-acl": "",\r\n    "angular-chosen-localytics": "*",\r\n    "bootstrap-chosen": "*",\r\n    "ng-flow": "^2.7.4",\r\n    "angular-mask": "*",\r\n    "checklist-model": "0.9.0",\r\n    "angular-ui-notification": "^0.2.0",\r\n    "angular-ui-calendar": "^1.0.2",\r\n    "angular-ui-switch": "^0.1.1",\r\n    "ng-scrollbars": "^0.0.11",\r\n    "jquery.scrollbar": "*",\r\n    "angular-nvd3": "*",\r\n    "infinity-angular-chosen": "^0.2.0",\r\n    "angular-flash-alert": "^2.4.0",\r\n    "components-font-awesome": "^4.7.0",\r\n    "textAngular": "^1.5.16",\r\n    "angular-loading-bar": "^0.9.0"\r\n  },\r\n  "resolutions": {\r\n    "angular": "~1.4.x"\r\n  },\r\n  "devDependencies": {\r\n    "cr-acl": "^0.5.0"\r\n  }\r\n}\r\n

Config app server:

events-app$ touch app-server.js
//events-app/app-server.js\r\nvar express = require('express')\r\nvar app = express()\r\napp.set('port', process.env.PORT || 3000)\r\napp.use(express.static(__dirname))\r\nvar http = require('http').Server(app)\r\n// Route\r\napp.get('/', (req, res) => {\r\n  res.sendFile(__dirname + '/index.html')\r\n})\r\nhttp.listen(app.get('port'), () => {\r\n  console.log('Wedding Site listening on ' + app.get('port'))\r\n})\r\n

What we're installing and why:

  1. We're going to use the AngularJS framework to a build single-page application.
  2. We're installing angular-ui-router for create multi views.
  3. We are going to use gulp for build all js and css files into one file.

Building our app:

Now we're going to build out our file structure a bit more so that we can organize our angular modules and js files. This is what our events-app directory should look like:

events-app\r\n|----app\r\n|       |----auth\r\n|                 |----auth.ctrl.js\r\n|                 |----auth.service.js\r\n|       |----config\r\n|                 |----config.js\r\n|       |----event\r\n|                 |----add\r\n|                           |----event.add.ctrl.js\r\n|                           |----event.add.mdl.js\r\n|                 |----feed\r\n|                           |----event.feed.ctrl.js\r\n|                           |----event.feed.mdl.js\r\n|                 |----profile\r\n|                           |----event.profile.ctrl.js\r\n|                           |----event.profile.mdl.js\r\n|                 |----event.ctrl.js\r\n|                 |----event.mdl.js\r\n|                 |----event.service.js\r\n|       |----user\r\n|                 |----profile\r\n|                           |----user.profile.ctrl.js\r\n|                           |----user.profile.mdl.js\r\n|                 |----settings\r\n|                           |----user.settings.ctrl.js\r\n|                           |----user.settings.mdl.js\r\n|                 |----user.ctrl.js\r\n|                 |----user.mdl.js\r\n|                 |----user.service.js\r\n|       |----main.mdl.js\r\n|----dist\r\n|       |----css\r\n|       |----img\r\n|       |----js\r\n|----css\r\n|----views\r\n|----gulpfile.js\r\n|----app-server.js\r\n|----bower.json\r\n|----package.json\r\n

Now we we will set up our index.html. Copy and paste the following code into your index.html file:

<!DOCTYPE html>\r\n<html lang="en" ng-app="main">\r\n<head>\r\n    <meta charset="utf-8">\r\n    <meta http-equiv="X-UA-Compatible" content="IE=edge">\r\n    <meta name="viewport" content="width=device-width, initial-scale=1">\r\n    <meta name="description" content="">\r\n    <meta name="author" content="">\r\n\r\n    <title>Events App</title>\r\n\r\n    <!-- bower:css -->\r\n    <!-- endbower -->\r\n\r\n    <!-- Bootstrap Core CSS -->\r\n    <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">\r\n\r\n    <!-- Custom CSS -->\r\n\r\n    <link href="dist/css/main.min.css" rel="stylesheet">\r\n\r\n\r\n    \r\n    \r\n    <!--[if lt IE 9]>\r\n    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>\r\n    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>\r\n    <![endif]-->\r\n\r\n</head>\r\n<body>\r\n\r\n<div ui-view></div>\r\n\r\n<!-- bower:js -->\r\n<!-- endbower -->\r\n\r\n<script src="dist/js/main.js"></script>\r\n</body>\r\n</html>\r\n

Here, we are going to target our "root" view to place our angular modules in later. The main.js file located in our dist directory is what our gulpfile.js file will spit out after bundling all of our angular modules.  Now, set up our gulpfile.js file to bundle all of our js files and export that bundle file to our dist directory. Copy the following code into your gulpfile.js file:

//events-app/gulpfile.js\r\n'use strict';\r\n\r\nvar gulp = require('gulp'),\r\n    webserver = require('gulp-webserver'),\r\n    minifyCSS = require('gulp-minify-css'),\r\n    concatCss = require('gulp-concat-css'),\r\n    concat = require('gulp-concat'),\r\n    wiredep = require('wiredep').stream,\r\n    autoprefixer = require('gulp-autoprefixer');\r\n\r\ngulp.task('css', function () {\r\n  return gulp.src('css/**/*.css')\r\n    .pipe(minifyCSS())\r\n    .pipe(concat('main.min.css'))\r\n    .pipe(autoprefixer())\r\n    .pipe(gulp.dest('dist/css'));\r\n});\r\n\r\ngulp.task('js', function() {\r\n  return gulp.src('app/**/**/*.js')\r\n    .pipe(concat('main.js'))\r\n    .pipe(gulp.dest('dist/js/'));\r\n});\r\n\r\ngulp.task('default', function () {\r\n  gulp.watch('css/**/*.css', ['css']);\r\n  gulp.watch('app/**/**/*.js', ['js']);\r\n  gulp.watch('bower.json', ['bower']);\r\n});\r\n\r\ngulp.task('bower', function () {\r\n  gulp.src('index.html')\r\n    .pipe(wiredep({\r\n      directory: 'bower_components'\r\n    }))\r\n    .pipe(gulp.dest(''));\r\n});\r\n

After that we can create config.js. Copy and paste the following code into your app/config/config.js file:

(function () {\r\n    'use strict';\r\n\r\n    var app = angular\r\n                .module('main');\r\n\r\n    app.constant('BUCKET_SLUG', 'your-bucket-slug');\r\n    app.constant('URL', 'https://api.cosmicjs.com/v1/');\r\n    app.constant('MEDIA_URL', 'https://api.cosmicjs.com/v1/your-bucket-slug/media');\r\n    app.constant('READ_KEY', 'your-read-key');\r\n    app.constant('WRITE_KEY', 'your-write-key');\r\n    app.constant('DEFAULT_EVENT_IMAGE', 'url-image');\r\n\r\n})();\r\n

After that we can create our main module. Copy and paste the following code into the app/main.mdl.js file:

(function () {\r\n    'use strict';\r\n\r\n    angular\r\n        .module('main', [\r\n            'ui.router',\r\n            'ui.bootstrap',\r\n            'ngMask',\r\n            'ngCookies',\r\n            'ngRoute',\r\n            'ngDialog',\r\n            'cr.acl',\r\n            'ui-notification',\r\n            'ngFlash',\r\n            'textAngular',\r\n            'flow',\r\n            'angular-loading-bar',\r\n\r\n            'event',\r\n            'user'\r\n        ])\r\n        .config(config)\r\n        .run(run);\r\n\r\n    config.$inject = ['$stateProvider', '$urlRouterProvider', 'cfpLoadingBarProvider', 'WRITE_KEY'];\r\n    function config($stateProvider, $urlRouterProvider, cfpLoadingBarProvider, WRITE_KEY) {\r\n        cfpLoadingBarProvider.includeSpinner = false;\r\n\r\n        $urlRouterProvider.otherwise(function ($injector) {\r\n            var $state = $injector.get("$state");\r\n            var $location = $injector.get("$location");\r\n            var crAcl = $injector.get("crAcl");\r\n\r\n            var state = "";\r\n\r\n            switch (crAcl.getRole()) {\r\n                case 'ROLE_USER':\r\n                    state = 'main.event.feed';\r\n                    break;\r\n            }\r\n\r\n            if (state) $state.go(state);\r\n            else $location.path('/login');\r\n        });\r\n\r\n        $stateProvider\r\n            .state('main', {\r\n                url: '/',\r\n                abstract: true,\r\n                templateUrl: '../views/main.html',\r\n                controller: 'UserCtrl as global',\r\n                data: {\r\n                    is_granted: ['ROLE_USER']\r\n                }\r\n            })\r\n            .state('auth', {\r\n                url: '/login',\r\n                templateUrl: '../views/auth/login.html',\r\n                controller: 'AuthCtrl as auth',\r\n                onEnter: ['AuthService', function(AuthService) {\r\n                    AuthService.clearCredentials();\r\n                }],\r\n                data: {\r\n                    is_granted: ['ROLE_GUEST']\r\n                }\r\n            });\r\n    }\r\n\r\n    run.$inject = ['$rootScope', '$cookieStore', '$http', 'crAcl', 'AuthService'];\r\n    function run($rootScope, $cookieStore, $http, crAcl, AuthService) {\r\n\r\n        $rootScope.globals = $cookieStore.get('globals') || {};\r\n        $http.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';\r\n\r\n        crAcl\r\n            .setInheritanceRoles({\r\n                'ROLE_SUPER_ADMIN': ['ROLE_SUPER_ADMIN', 'ROLE_GUEST'],\r\n                'ROLE_USER': ['ROLE_USER', 'ROLE_GUEST'],\r\n                'ROLE_GUEST': ['ROLE_GUEST']\r\n            });\r\n\r\n        crAcl\r\n            .setRedirect('auth');\r\n\r\n        if ($rootScope.globals.currentUser) {\r\n\r\n            crAcl.setRole($rootScope.globals.currentUser.metadata.role);\r\n        }\r\n        else {\r\n            crAcl.setRole();\r\n        }\r\n\r\n    }\r\n\r\n})();\r\n

Now we we will set up our Auth Controller. Copy and paste the following code into your auth.ctrl.js file:

(function () {\r\n    'use strict';\r\n\r\n    angular\r\n        .module('main')\r\n        .controller('AuthCtrl', AuthCtrl);\r\n\r\n    function AuthCtrl(crAcl, $state, AuthService, Flash, $log) {\r\n        var vm = this;\r\n\r\n        vm.login = login;\r\n        vm.register = register;\r\n\r\n        vm.showRegisterForm = false;\r\n\r\n        vm.loginForm = null;\r\n        vm.registerForm = null;\r\n\r\n        vm.credentials = {};\r\n        vm.user = {};\r\n\r\n        function login(credentials) {\r\n            function success(response) {\r\n                function success(response) {\r\n                    if (response.data.status !== 'empty') {\r\n                        var currentUser = response.data.objects[0];\r\n\r\n                        crAcl.setRole(currentUser.metadata.role);\r\n                        AuthService.setCredentials(currentUser);\r\n                        $state.go('main.event.feed');\r\n                    }\r\n                    else\r\n                        Flash.create('danger', 'Incorrect username or password');\r\n                }\r\n\r\n                function failed(response) {\r\n                    $log.error(response);\r\n                }\r\n\r\n                if (response.data.status !== 'empty')\r\n                    AuthService\r\n                        .checkPassword(credentials)\r\n                        .then(success, failed);\r\n                else\r\n                    Flash.create('danger', 'Incorrect username or password');\r\n\r\n                $log.info(response);\r\n            }\r\n\r\n            function failed(response) {\r\n                $log.error(response);\r\n            }\r\n\r\n            if (vm.loginForm.$valid)\r\n                AuthService\r\n                    .checkUsername(credentials)\r\n                    .then(success, failed);\r\n        }\r\n\r\n        function register(credentials) {\r\n            function success(response) {\r\n                $log.info(response);\r\n\r\n                var currentUser = response.data.object.metafields;\r\n\r\n                Flash.create('success', 'You have successfully signed up!');\r\n                vm.credentials = {\r\n                    username: currentUser[0].value,\r\n                    password: currentUser[3].value\r\n                };\r\n                vm.showRegisterForm = false;\r\n            }\r\n\r\n            function failed(response) {\r\n                $log.error(response);\r\n            }\r\n\r\n            if (vm.registerForm.$valid)\r\n                AuthService\r\n                    .register(credentials)\r\n                    .then(success, failed);\r\n        }\r\n\r\n    }\r\n})();\r\n

Now we will create our Auth Service in app/auth/auth.service.js:

(function () {\r\n    'use strict';\r\n\r\n    angular\r\n        .module('main')\r\n        .service('AuthService', function ($http,\r\n                                          $cookieStore,\r\n                                          $q,\r\n                                          $rootScope,\r\n                                          URL, BUCKET_SLUG, READ_KEY, WRITE_KEY) {\r\n            var authService = this;\r\n            $http.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';\r\n\r\n            authService.checkUsername = function (credentials) {\r\n                return $http.get(URL + BUCKET_SLUG + '/object-type/users/search', {\r\n                    params: {\r\n                        metafield_key: 'username',\r\n                        metafield_value_has: credentials.username,\r\n                        limit: 1,\r\n                        read_key: READ_KEY\r\n                    }\r\n                });\r\n            };\r\n            authService.checkPassword = function (credentials) {\r\n                return $http.get(URL + BUCKET_SLUG + '/object-type/users/search', {\r\n                    ignoreLoadingBar: true,\r\n                    params: {\r\n                        metafield_key: 'password',\r\n                        metafield_value: credentials.password,\r\n                        limit: 1,\r\n                        read_key: READ_KEY\r\n                    }\r\n                });\r\n            };\r\n            authService.register = function (user) {\r\n\r\n                return $http.post(URL + BUCKET_SLUG + '/add-object', {\r\n                    title: user.full_name,\r\n                    type_slug: 'users',\r\n                    slug: user.username,\r\n                    metafields: [\r\n                        {\r\n                            key: "username",\r\n                            type: "text",\r\n                            value: user.username\r\n                        },\r\n                        {\r\n                            key: "email",\r\n                            type: "text",\r\n                            value: user.email\r\n                        },\r\n                        {\r\n                            key: "full_name",\r\n                            type: "text",\r\n                            value: user.full_name\r\n                        },\r\n                        {\r\n                            key: "password",\r\n                            type: "text",\r\n                            value: user.password\r\n                        },\r\n                        {\r\n                            key: "image",\r\n                            type: "file",\r\n                            value: "3b2180f0-2c40-11e7-85ac-e98751218524-1493421969_male.png"\r\n                        },\r\n                        {\r\n                            key: "role",\r\n                            type: "radio-buttons",\r\n                            options: [\r\n                                {\r\n                                    value: "ROLE_USER"\r\n                                },\r\n                                {\r\n                                    value: "ROLE_SUPER_ADMIN"\r\n                                }\r\n                            ],\r\n                            value: "ROLE_USER"\r\n                        }\r\n                    ],\r\n\r\n                    write_key: WRITE_KEY\r\n                });\r\n            };\r\n            authService.setCredentials = function (user) {\r\n                $rootScope.globals = {\r\n                    currentUser: user\r\n                };\r\n\r\n                $cookieStore.put('globals', $rootScope.globals);\r\n            };\r\n            authService.clearCredentials = function () {\r\n                var deferred = $q.defer();\r\n                $cookieStore.remove('globals');\r\n\r\n                if (!$cookieStore.get('globals')) {\r\n                    $rootScope.globals = {};\r\n                    deferred.resolve('Credentials clear success');\r\n                } else {\r\n                    deferred.reject('Can\\'t clear credentials');\r\n                }\r\n\r\n                return deferred.promise;\r\n            };\r\n        });\r\n})();\r\n

What's going on here:

  1. We are using the ui-router for config routes.
  2. We created Auth Service for our asynchronous calls to our Cosmic API.
  3. We created Auth Controller for checking credentials.

Create User Service for get and update User, copy and paste the code below:

(function () {\r\n    'use strict';\r\n\r\n    angular\r\n        .module('main')\r\n        .service('UserService', function ($http,\r\n                                          $cookieStore,\r\n                                          $q,\r\n                                          $rootScope,\r\n                                          URL, BUCKET_SLUG, READ_KEY, WRITE_KEY) {\r\n            $http.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';\r\n\r\n            this.getCurrentUser = function (ignoreLoadingBar) {\r\n                return $http.get(URL + BUCKET_SLUG + '/object/' + $rootScope.globals.currentUser.slug, {\r\n                    ignoreLoadingBar: ignoreLoadingBar,\r\n                    params: {\r\n                        read_key: READ_KEY\r\n                    }\r\n                });\r\n            };\r\n            this.getUser = function (slug, ignoreLoadingBar) {\r\n                return $http.get(URL + BUCKET_SLUG + '/object/' + slug, {\r\n                    ignoreLoadingBar: ignoreLoadingBar,\r\n                    params: {\r\n                        read_key: READ_KEY\r\n                    }\r\n                });\r\n            };\r\n            this.updateUser = function (user) {\r\n                user.write_key = WRITE_KEY;\r\n\r\n                return $http.put(URL + BUCKET_SLUG + '/edit-object', user, {\r\n                    ignoreLoadingBar: false\r\n                });\r\n            };\r\n\r\n        });\r\n})();\r\n

Create User Controller for get current user and log out, copy and paste the code below:

(function () {\r\n    'use strict';\r\n\r\n    angular\r\n        .module('main')\r\n        .controller('UserCtrl', UserCtrl);\r\n\r\n    function UserCtrl($rootScope, $scope, $state, AuthService, Flash, $log) {\r\n        var vm = this;\r\n\r\n        vm.currentUser = $rootScope.globals.currentUser.metadata;\r\n\r\n        vm.logout = logout;\r\n\r\n        function logout() {\r\n            function success(response) {\r\n                $state.go('auth');\r\n\r\n                $log.info(response);\r\n            }\r\n\r\n            function failed(response) {\r\n                $log.error(response);\r\n            }\r\n\r\n            AuthService\r\n                .clearCredentials()\r\n                .then(success, failed);\r\n        }\r\n\r\n        $scope.state = $state;\r\n\r\n    }\r\n})();\r\n

Next we will create our Create User Module:

(function () {\r\n    'use strict';\r\n\r\n    angular\r\n        .module('user', [\r\n            'user.profile',\r\n            'user.settings'\r\n        ])\r\n        .config(config);\r\n\r\n    config.$inject = ['$stateProvider', '$urlRouterProvider'];\r\n    function config($stateProvider, $urlRouterProvider) {\r\n\r\n        $stateProvider\r\n            .state('main.user', {\r\n                url: 'user',\r\n                abstract: true,\r\n                data: {\r\n                    is_granted: ['ROLE_USER']\r\n                }\r\n            });\r\n    }\r\n})();\r\n

What's going on here:

  1. We created User Service for our asynchronous calls to our Cosmic API.
  2. We created User Controller for getting current user and logout.

Next we will create our Event Service to get, update, add delete Events from the Cosmic API:

(function () {\r\n    'use strict';\r\n\r\n    angular\r\n        .module('main')\r\n        .service('EventService', function ($http,\r\n                                          $cookieStore,\r\n                                          $q,\r\n                                          $rootScope,\r\n                                          URL, BUCKET_SLUG, READ_KEY, WRITE_KEY, MEDIA_URL) {\r\n\r\n            $http.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';\r\n\r\n            this.getEvents = function () {\r\n                return $http.get(URL + BUCKET_SLUG + '/object-type/events', {\r\n                    params: {\r\n                        limit: 100,\r\n                        read_key: READ_KEY\r\n                    }\r\n                });\r\n            };\r\n            this.getEventsByUsername = function (username, ignoreLoadingBar) {\r\n                return $http.get(URL + BUCKET_SLUG + '/object-type/events/search',\r\n                    {\r\n                        ignoreLoadingBar: ignoreLoadingBar,\r\n                        params: {\r\n                            metafield_key: 'user',\r\n                            metafield_object_slug: username,\r\n                            limit: 10,\r\n                            read_key: READ_KEY\r\n                        }\r\n                    }\r\n                );\r\n            };\r\n            this.getEventById = function (slug) {\r\n                return $http.get(URL + BUCKET_SLUG + '/object/' + slug, {\r\n                    params: {\r\n                        read_key: READ_KEY\r\n                    }\r\n                });\r\n            };\r\n            this.updateEvent = function (event) {\r\n                event.write_key = WRITE_KEY;\r\n\r\n                return $http.put(URL + BUCKET_SLUG + '/edit-object', event);\r\n            };\r\n            this.removeEvent = function (slug) {\r\n                return $http.delete(URL + BUCKET_SLUG + '/' + slug, {\r\n                    ignoreLoadingBar: true,\r\n                    headers:{\r\n                        'Content-Type': 'application/json'\r\n                    },\r\n                    data: {\r\n                        write_key: WRITE_KEY\r\n                    }\r\n                });\r\n            };\r\n            this.createEvent = function (event) {\r\n                event.write_key = WRITE_KEY;\r\n\r\n                var beginDate = new Date(event.metafields[1].value);\r\n                var endDate = new Date(event.metafields[2].value);\r\n\r\n                event.metafields[1].value = beginDate.getFullYear() + '-' + (beginDate.getMonth() + 1) + '-' + beginDate.getDate();\r\n                event.metafields[2].value = endDate.getFullYear() + '-' + (beginDate.getMonth() + 1) + '-' + endDate.getDate();\r\n\r\n                event.slug = event.title;\r\n                event.type_slug = 'events';\r\n\r\n                event.metafields[4] = {\r\n                    key: "user",\r\n                    type: "object",\r\n                    object_type: "users",\r\n                    value: $rootScope.globals.currentUser._id\r\n                };\r\n                return $http.post(URL + BUCKET_SLUG + '/add-object', event);\r\n            };\r\n            this.upload = function (file) {\r\n                var fd = new FormData();\r\n                fd.append('media', file);\r\n                fd.append('write_key', WRITE_KEY);\r\n\r\n                var defer = $q.defer();\r\n\r\n                var xhttp = new XMLHttpRequest();\r\n\r\n                xhttp.upload.addEventListener("progress",function (e) {\r\n                    defer.notify(parseInt(e.loaded * 100 / e.total));\r\n                });\r\n                xhttp.upload.addEventListener("error",function (e) {\r\n                    defer.reject(e);\r\n                });\r\n\r\n                xhttp.onreadystatechange = function() {\r\n                    if (xhttp.readyState === 4) {\r\n                        defer.resolve(JSON.parse(xhttp.response)); //Outputs a DOMString by default\r\n                    }\r\n                };\r\n\r\n                xhttp.open("post", MEDIA_URL, true);\r\n\r\n                xhttp.send(fd);\r\n\r\n                return defer.promise;\r\n            }\r\n        });\r\n})();\r\n

Our Event Controller will get all events and remove events:

(function () {\r\n    'use strict';\r\n\r\n    angular\r\n        .module('main')\r\n        .controller('EventCtrl', EventCtrl);\r\n\r\n    function EventCtrl(EventService, Notification, $log, $rootScope, DEFAULT_EVENT_IMAGE) {\r\n        var vm = this;\r\n\r\n        vm.getEvents = getEvents;\r\n        vm.removeEvent = removeEvent;\r\n        vm.DEFAULT_EVENT_IMAGE = DEFAULT_EVENT_IMAGE;\r\n\r\n        function getEvents(username) {\r\n            function success(response) {\r\n                $log.info(response);\r\n\r\n                vm.events = response.data.objects;\r\n            }\r\n\r\n            function failed(response) {\r\n                $log.error(response);\r\n            }\r\n            console.log(username);\r\n\r\n            EventService\r\n                .getEventsByUsername(username)\r\n                .then(success, failed);\r\n        }\r\n\r\n        function removeEvent(slug) {\r\n            function success(response) {\r\n                $log.info(response);\r\n\r\n                getEvents($rootScope.globals.currentUser.metadata.username);\r\n\r\n                Notification.success('Deleted');\r\n            }\r\n\r\n            function failed(response) {\r\n                Notification.error(response.data.message);\r\n\r\n                $log.error(response);\r\n            }\r\n\r\n            EventService\r\n                .removeEvent(slug)\r\n                .then(success, failed);\r\n        }\r\n    }\r\n})();\r\n

Our Event Module will render our events view:

(function () {\r\n    'use strict';\r\n\r\n    angular\r\n        .module('event', [\r\n            'event.profile',\r\n            'event.feed',\r\n            'event.add'\r\n        ])\r\n        .config(config);\r\n\r\n    config.$inject = ['$stateProvider', '$urlRouterProvider'];\r\n    function config($stateProvider, $urlRouterProvider) {\r\n\r\n        $stateProvider\r\n            .state('main.event', {\r\n                url: 'events',\r\n                views: {\r\n                    '': {\r\n                        templateUrl: '../views/event/events.html',\r\n                        controller: 'EventCtrl as vm'\r\n                    }\r\n                },\r\n                data: {\r\n                    is_granted: ['ROLE_USER']\r\n                }\r\n            });\r\n    }\r\n\r\n})();\r\n

What's going on here:

  1. We created Event Service for our asynchronous calls to our Cosmic API. We can create, update, remove and getting Events.
  2. We created Event Controller for getting all events and removing events.
  3. We created an Event Module to render our views.

Now let's create our Event Add Controller for adding events:

(function () {\r\n    'use strict';\r\n\r\n    angular\r\n        .module('main')\r\n        .controller('EventAddCtrl', EventAddCtrl);\r\n\r\n    function EventAddCtrl(EventService, Notification, $state, $log, $scope, MEDIA_URL, DEFAULT_EVENT_IMAGE, $timeout) {\r\n        var vm = this;\r\n\r\n        vm.createEvent = createEvent;\r\n        vm.cancelUpload = cancelUpload;\r\n        vm.upload = upload;\r\n\r\n        vm.dateBeginPicker = false;\r\n        vm.dateEndPicker = false;\r\n        vm.contentEditor = true;\r\n        vm.uploadProgress = 0;\r\n\r\n        vm.event = {\r\n            title: null,\r\n            slug: null,\r\n            content: null,\r\n            metafields: [\r\n                {\r\n                    key: "image",\r\n                    type: "file",\r\n                    value: null\r\n                },\r\n                {\r\n                    key: "date_begin",\r\n                    type: "date",\r\n                    value: null\r\n                },\r\n                {\r\n                    key: "date_end",\r\n                    type: "date",\r\n                    value: null\r\n                },\r\n                {\r\n                    key: "type",\r\n                    type: "select-dropdown",\r\n                    options: [\r\n                        {\r\n                            key: "social",\r\n                            value: "Social"\r\n                        },\r\n                        {\r\n                            key: "fun",\r\n                            value: "Fun"\r\n                        }\r\n                    ],\r\n                    value: "Social"\r\n                }\r\n            ]\r\n        };\r\n\r\n        $timeout(function() {\r\n            vm.event.metafields[1].value = new Date();\r\n            vm.event.metafields[2].value = new Date();\r\n        }, 100);\r\n\r\n        vm.flow = {};\r\n        vm.background = {\r\n            'background-image': 'url(' + DEFAULT_EVENT_IMAGE + ')'\r\n        };\r\n\r\n        vm.flowConfig = {\r\n            target: MEDIA_URL,\r\n            singleFile: true\r\n        };\r\n\r\n        function createEvent() {\r\n            if (vm.flow.files[0])\r\n                upload();\r\n            else\r\n                _createEvent(vm.event);\r\n        }\r\n\r\n        function _createEvent(event) {\r\n            function success(response) {\r\n                $log.info(response);\r\n\r\n                Notification.success(\r\n                    {\r\n                        message: 'Created',\r\n                        delay: 800,\r\n                        replaceMessage: true\r\n                    }\r\n                );\r\n\r\n                $state.go('main.event');\r\n            }\r\n\r\n            function failed(response) {\r\n                Notification.error(\r\n                    {\r\n                        message: response.data.error,\r\n                        delay: 4000,\r\n                        replaceMessage: true\r\n                    }\r\n                );\r\n\r\n                $log.error(response);\r\n            }\r\n\r\n            EventService\r\n                .createEvent(event)\r\n                .then(success, failed);\r\n        }\r\n\r\n        function cancelUpload() {\r\n            vm.flow.cancel();\r\n            vm.background = {\r\n                'background-image': 'url(' + DEFAULT_EVENT_IMAGE.url + ')'\r\n            };\r\n        }\r\n\r\n        $scope.$watch('vm.flow.files[0].file.name', function () {\r\n            if (!vm.flow.files[0]) {\r\n                return ;\r\n            }\r\n            var fileReader = new FileReader();\r\n            fileReader.readAsDataURL(vm.flow.files[0].file);\r\n            fileReader.onload = function (event) {\r\n                $scope.$apply(function () {\r\n                    vm.background = {\r\n                        'background-image': 'url(' + event.target.result + ')'\r\n                    };\r\n                });\r\n            };\r\n        });\r\n\r\n        function upload() {\r\n            EventService\r\n                .upload(vm.flow.files[0].file)\r\n                .then(function(response){\r\n\r\n                    vm.event.metafields[0].value = response.media.name;\r\n\r\n                    createEvent(vm.event);\r\n\r\n                    vm.flow.cancel();\r\n                    vm.uploadProgress = 0;\r\n\r\n                }, function(){\r\n                    console.log('failed :(');\r\n                }, function(progress){\r\n                    vm.uploadProgress = progress;\r\n                });\r\n\r\n        }\r\n\r\n    }\r\n})();\r\n

Next we create the Event Module:

(function () {\r\n    'use strict';\r\n\r\n    angular\r\n        .module('event.add', [])\r\n        .config(config);\r\n\r\n    config.$inject = ['$stateProvider', '$urlRouterProvider'];\r\n    function config($stateProvider, $urlRouterProvider) {\r\n\r\n        $stateProvider\r\n            .state('main.event.add', {\r\n                url: '/add',\r\n                views: {\r\n                    '@main': {\r\n                        templateUrl: '../views/event/event.profile.html',\r\n                        controller: 'EventAddCtrl as vm'\r\n                    }\r\n                },\r\n                data: {\r\n                    is_granted: ['ROLE_USER']\r\n                }\r\n            });\r\n    }\r\n\r\n})();\r\n

What's going on here:

  1. We can add events.
  2. We can upload images.

Conclusion:

We were able to create a pretty complicated app to manage users, sessions, adding / editing events all through the Cosmic API. I hope you enjoyed this tutorial as much as I did, if you have any questions reach out to us on Twitter and join our community on Slack.


","metafields":[{"object_type":"authors","value":"5914999aa57d9d4b390034d5","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5914999aa57d9d4b390034d5","slug":"dmytro-kutsaniuk","title":"Dmytro Kutsaniuk","content":"","metafields":[{"value":"e265ea60-366b-11e7-9161-61cd2f0acd2a-kutsaniuk.jpeg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e265ea60-366b-11e7-9161-61cd2f0acd2a-kutsaniuk.jpeg","imgix_url":"https://imgix.cosmicjs.com/e265ea60-366b-11e7-9161-61cd2f0acd2a-kutsaniuk.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-05-11T17:04:26.061Z","created_by":"5357ef811693be2118000001","created":"2017-05-11T17:04:26.061Z","status":"published"}},{"value":"

In this tutorial I'm going to show you how to create an "Events" app using a little bit of Node, Angular JS and Cosmic. For the sake of understanding how to consume Restful API’s, this tutorial will show how to make simple AJAX requests to the Cosmic API in order to retrieve, update, and delete data in our Cosmic Buckets.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"6ce43dc0-36b4-11e7-8843-0d734648413f-angular-events-app.png","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/6ce43dc0-36b4-11e7-8843-0d734648413f-angular-events-app.png","imgix_url":"https://imgix.cosmicjs.com/6ce43dc0-36b4-11e7-8843-0d734648413f-angular-events-app.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-05-11T17:00:19.616Z","created_by":"5357ef811693be2118000001","created":"2017-05-11T17:00:19.616Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"5914999aa57d9d4b390034d5","slug":"dmytro-kutsaniuk","title":"Dmytro Kutsaniuk","content":"","metafields":[{"value":"e265ea60-366b-11e7-9161-61cd2f0acd2a-kutsaniuk.jpeg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e265ea60-366b-11e7-9161-61cd2f0acd2a-kutsaniuk.jpeg","imgix_url":"https://imgix.cosmicjs.com/e265ea60-366b-11e7-9161-61cd2f0acd2a-kutsaniuk.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-05-11T17:04:26.061Z","created_by":"5357ef811693be2118000001","created":"2017-05-11T17:04:26.061Z","status":"published","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e265ea60-366b-11e7-9161-61cd2f0acd2a-kutsaniuk.jpeg","imgix_url":"https://imgix.cosmicjs.com/e265ea60-366b-11e7-9161-61cd2f0acd2a-kutsaniuk.jpeg"}}},"teaser":"

In this tutorial I'm going to show you how to create an "Events" app using a little bit of Node, Angular JS and Cosmic. For the sake of understanding how to consume Restful API’s, this tutorial will show how to make simple AJAX requests to the Cosmic API in order to retrieve, update, and delete data in our Cosmic Buckets.

","featured_image":{"url":"https://cdn.cosmicjs.com/6ce43dc0-36b4-11e7-8843-0d734648413f-angular-events-app.png","imgix_url":"https://imgix.cosmicjs.com/6ce43dc0-36b4-11e7-8843-0d734648413f-angular-events-app.png"}}},{"_id":"590b73e7200ca2723f002cfc","order":134,"slug":"how-to-build-a-react-graphql-static-site-served-from-aws-cloudfront","title":"How To Build a React GraphQL Static Site Served From AWS CloudFront","content":"

So you've read all the great reasons to go API-first, and you've produced a great looking single page app to display your content. But how do you serve it to the user?

You COULD set up a full Node server to host, route and serve your site. Or you could just host your website statically using AWS S3 and CloudFront! This means you simply put your website source files online, and they're served immediately to the user,\r\nno server processing needed.

There are several big advantages to static hosting with client-side rendering: + Blazing Fast (no server preprocessing) + Really simply (no server architecture to maintain) + Crazy Available (your server can't break if there isn't one) + Instant\r\nUpdates (don't have to wait for the site to rebuild to see your changes)

Setting up a static site is easier than you might think, and this tutorial walks you through how to set up a static website that gets its data from Cosmic and renders on the client in under 10 minutes!

We'll also cover some tips and tricks on getting the most out of your static site that you might not have known, which will be useful, even if you're not building a purely static site.

TL;DR

View the demo here

Check out the React GraphQL Static Site codebase

The site we'll be hosting

Our example website is a static single page app, in our case using webpack and react, with react-router handling routing, and Cosmic's GraphQL API to fetch data (tutorial coming soon).

If you'd like to follow along at home, you can download our demo code here.

Our demo site is structured as follows:

.\r\n├── asset-manifest.json\r\n├── favicon.ico\r\n├── index.html\r\n└── static\r\n    └── js\r\n        ├── main.3c8c3c1e.js\r\n        ├── manifest.4a707e54.js\r\n        ├── vendor.94287fcf.js\r\n        ├── vendorConstant.0e34bc16.js\r\n        └── vendorReactApollo.c8e28b23.js

We've broken our js into several different files so that they can be cached independently; if vendorReactApollo is the only file that changes, it's the only file that our clients will have to re-get when they revisit our site.

index.html is the only HTML file we need to deploy, and it's minimal:

<!DOCTYPE html>\r\n<html lang="en">\r\n   <head>\r\n      <meta charset="utf-8">\r\n      <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">\r\n      <link rel="shortcut icon" href="/favicon.ico">\r\n      <title>React App</title>\r\n   </head>\r\n   <body>\r\n      <div id="root"> </div>\r\n      <script type="text/javascript" src="/static/js/manifest.4a707e54.js"> </script>\r\n      <script type="text/javascript" src="/static/js/vendorConstant.0e34bc16.js"></script>\r\n      <script type="text/javascript" src="/static/js/vendorReactApollo.c8e28b23.js"></script>\r\n      <script type="text/javascript" src="/static/js/vendor.94287fcf.js"></script>\r\n      <script type="text/javascript" src="/static/js/main.3c8c3c1e.js"></script>\r\n   </body>\r\n</html>

With this single page app structure, we're ready to start serving it as a static site using AWS S3!

S3 setup

AWS S3 buckets can serve their contents as static web pages with little setup. This provides a hassle free solution for serving static files, like our website, quickly and simply.

Enabling website hosting on S3 requires a few steps:

1. Bucket Policy

\"Enable

First, you need to set permissions for all files in your S3 bucket so they can be read by anyone. You can copy-paste the code we've used, and replace our bucket name (codogo-cosmic-js-demo-blog) with your own:

{\r\n    "Version": "2012-10-17",\r\n    "Statement": [\r\n        {\r\n            "Sid": "AddPerm",\r\n            "Effect": "Allow",\r\n            "Principal": "*",\r\n            "Action": "s3:GetObject",\r\n            "Resource": "arn:aws:s3:::codogo-cosmic-js-demo-blog/*"\r\n        }\r\n    ]\r\n}

2. Website Hosting

\"Enable

Click on Static website hosting, and fill in the details as below.

\"Enable

The Index Document is required, and tells the S3 bucket which file to serve if we navigate to the root of our website.

The Error Document is the file that's served whenever a client navigates to a file that doesn't exist in the bucket. This is the most important setting for this tutorial, as it means no matter which path the user navigates to, they are still served our index.html file.

3. Upload your files

\"Show

Upload your site to the root of your S3 bucket and your site will be ready to serve.

Testing the hosting out

Navigate to the Endpoint URL shown in the Static Website Hosting box, and you should see your web app! You can check out our demo here.

Try navigating to other pages and refreshing the page - you should see that your web app loads as if the pages you're navigating to actually exist on the server.

Next steps

For a small site with low, unimportant traffic - for example, a company internal website - this hosting would be sufficient. However, there are two main issues with this hosting solution:

  1. Served from one region: The website will only be served from the AWS region where your bucket lives, so people in other parts of the world will see poor performance.
  2. HTTP 404 Response code: If you open your browser network inspector and navigate to a page, you'll see that the server is responding with a 404code, instead of the 200/302that we want.

Having every page of our site return a 404 code is terrible for SEO as any web-crawler that checks the HTTP response code will think every link on our site is broken! In the next section we'll look at how we can use AWS CloudFront to cache our site, handle our traffic, and fix our error code issue.

CloudFront Config

1. Create A CloudFront Distribution

\"Create

We need to create a CloudFront web distribution through which all our web traffic will flow. This will handle the world wide distribution of our S3 website, and can intercept and correct our 404codes.

\"Point

In the Origin Domain Name field you'll be given the option to pick your S3 bucket. Do Not Do This!Instead, set the Origin Domain Name to be your S3 website URL. For example, for our demo it would be codogo-cosmic-js-demo-blog.s3-website-eu-west-1.amazonaws.com, not codogo-cosmic-js-demo-blog.s3.amazonaws.com.

2. Cache long term files

\"Create

Now we're going to tell CloudFront how to cache our static files. To do this we need to create a new Behaviour.

\"Cache

We want our Path Pattern to match everything in our static folder. The Object Settingsshould be left as they are.

3. Correct Response Code

\"Create

Now we create a new error page to intercept the errors from S3.

\"Custom

Fill out the custom response as above.

You'll need to give your CloudFront distribution around 15 minutes to fully deploy, but then it should be accessible at it's domain name, ours looks like this: d2hqptkles3gsg.cloudfront.net.

Conclusion

And there you have it: A simple client-side rendered static site to display content from Cosmic that's super fast and super simple.

If you're making a static site, or anything else, with Cosmic get in touch on out Slack or Twitter; we'd love to see what you're making. This post was written by Codogo, a fresh new digital agency with a passion for creating amazing digital experiences. Keep an eye out for our next post, on best practice for making a Cosmic site using React and\r\nGraphQL.

","metafields":[{"object_type":"authors","value":"590b73ff200ca2723f002d01","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"590b73ff200ca2723f002d01","slug":"freddie-ridell","title":"Freddie Ridell","content":"","metafields":[{"value":"2d96a700-30f8-11e7-8b84-cbc54315248d-freddie.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/2d96a700-30f8-11e7-8b84-cbc54315248d-freddie.jpg","imgix_url":"https://imgix.cosmicjs.com/2d96a700-30f8-11e7-8b84-cbc54315248d-freddie.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-05-04T18:33:35.138Z","created_by":"5357ef811693be2118000001","created":"2017-05-04T18:33:35.138Z","status":"published"}},{"value":"

So you've read all the great reasons to go API-first, and you've produced a great looking single page app to display your content. But how do you serve it to the user?

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"f96bc850-314e-11e7-8b84-cbc54315248d-react-graphql-aws-static-site.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/f96bc850-314e-11e7-8b84-cbc54315248d-react-graphql-aws-static-site.jpg","imgix_url":"https://imgix.cosmicjs.com/f96bc850-314e-11e7-8b84-cbc54315248d-react-graphql-aws-static-site.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-05-04T18:33:11.092Z","created_by":"5357ef811693be2118000001","created":"2017-05-04T18:33:11.092Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"590b73ff200ca2723f002d01","slug":"freddie-ridell","title":"Freddie Ridell","content":"","metafields":[{"value":"2d96a700-30f8-11e7-8b84-cbc54315248d-freddie.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/2d96a700-30f8-11e7-8b84-cbc54315248d-freddie.jpg","imgix_url":"https://imgix.cosmicjs.com/2d96a700-30f8-11e7-8b84-cbc54315248d-freddie.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-05-04T18:33:35.138Z","created_by":"5357ef811693be2118000001","created":"2017-05-04T18:33:35.138Z","status":"published","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/2d96a700-30f8-11e7-8b84-cbc54315248d-freddie.jpg","imgix_url":"https://imgix.cosmicjs.com/2d96a700-30f8-11e7-8b84-cbc54315248d-freddie.jpg"}}},"teaser":"

So you've read all the great reasons to go API-first, and you've produced a great looking single page app to display your content. But how do you serve it to the user?

","featured_image":{"url":"https://cdn.cosmicjs.com/f96bc850-314e-11e7-8b84-cbc54315248d-react-graphql-aws-static-site.jpg","imgix_url":"https://imgix.cosmicjs.com/f96bc850-314e-11e7-8b84-cbc54315248d-react-graphql-aws-static-site.jpg"}}},{"_id":"590929bd1d2b961e2c00051c","order":135,"slug":"how-to-build-a-todo-app-using-react-redux-and-webpack","title":"How to Build a ToDo App Using React, Redux, and Webpack","content":"

In this tutorial I'm going to show you how to create a simple “ToDo” app using React, Redux, a little bit of Node, and Cosmic. For the sake of understanding how to consume Restful API’s, this tutorial will show how to make simple\r\nAJAX requests to the Cosmic API in order to retrieve, update, and delete data in our Cosmic buckets. Let's get started.

TL;DR

Download the GitHub repo.
Check out the demo.

Getting Started:

First, let’s make a new directory to build our project in and lets also make a package.json file.

mkdir cool-cosmic-todo-app
cool-cosmic-todo-app$ touch package.json

Now, in your package.json, copy and paste the code below and then run npm install or yarn (if you're a super cool yarn user):

//cool-cosmic-todo-app/package.json\r\n{\r\n  "name": "cosmicToDo",\r\n  "version": "1.0.0",\r\n  "description": "A simple todo app thet uses the Cosmic API",\r\n  "main": "index.js",\r\n  "scripts": {\r\n    "start": "nodemon server/index.js",\r\n    "build": "webpack -w",\r\n    "test": "echo \\"Error: no test specified\\" && exit 1"\r\n  },\r\n  "author": "",\r\n  "license": "ISC",\r\n  "dependencies": {\r\n    "axios": "^0.16.1",\r\n    "react": "^15.5.4",\r\n    "react-dom": "^15.5.4",\r\n    "react-redux": "^5.0.4",\r\n    "redux": "^3.6.0",\r\n    "redux-logger": "^3.0.1",\r\n    "redux-thunk": "^2.2.0",\r\n    "css-loader": "^0.28.0"\r\n  },\r\n  "devDependencies": {\r\n    "babel": "^6.5.2",\r\n    "babel-core": "^6.18.0",\r\n    "babel-loader": "^6.2.7",\r\n    "babel-preset-es2015": "^6.18.0",\r\n    "babel-preset-react": "^6.16.0",\r\n    "cross-env": "^3.1.4",\r\n    "nodemon": "^1.11.0",\r\n    "volleyball": "^1.4.1",\r\n    "webpack": "^2.2.1",\r\n    "webpack-livereload-plugin": "^0.10.0",\r\n    "sass-loader": "^6.0.3",\r\n    "style-loader": "^0.16.1"\r\n  }\r\n}

What we're installing and why:

  1. We're going to use the axios library to handle our requests to our Cosmic bucket.
  2. We're installing react and react-dom to build our react components.
  3. We are going to use redux, react-redux, redux-logger, and redux-thunk to help us implement what is called the Flux architecture.
  4. The only thing worth mentioning in the dev dependencies is webpack and volleyball. Webpack will help us bundle all of our react and redux files into one large "bundle" file that will be used in our index.html. Volleyball is a cool little library\r\nthat allows us to see in our console incoming and outgoing HTTP requests.

Building our app:

Now we're going to build out our file structure a bit more so that we can organize our react components and redux files. This is what our cool-cosmic-todo-app directory should look like:

cool-cosmic-todo-app\r\n|----client\r\n|       |----components\r\n|                 |----Home.js\r\n|                 |----Section.js\r\n|                 |----Task.js\r\n|       |----index.html\r\n|       |----dist\r\n|----redux\r\n|       |----store.js\r\n|       |----reducer.js\r\n|----server\r\n|       |----index.js\r\n|----webpack.config.js\r\n|----package.json

Now we we will set up our index.html in our client directory. Copy and paste the following code into your index.html file:

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <meta charset="UTF-8" />\r\n    <meta name="viewport" content="width=device-width, initial-scale=1" />\r\n    <title>Cosmic Todo App!</title>\r\n    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">\r\n    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>\r\n    <link rel="stylesheet" href="./styles/mainSheet/main.css">\r\n    <link rel="stylesheet" href="./styles/mainSheet/font-awesome.min.css">\r\n    <script src="https://code.jquery.com/jquery-3.2.1.min.js"\r\n            integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="\r\n            crossorigin="anonymous"></script>\r\n    <script src="/dist/bundle.js" defer></script>\r\n</head>\r\n<body>\r\n<div id="root"></div>\r\n</body>\r\n</html>

Here, we are going to target our "root" div to place our react components in later. The bundle.js file located in our dist directory is what our webpack.config file will spit out after bundling all of our react components Now, set up our webpack.config file to bundle all of our react files and export that bundle file to our dist directory. Copy the following code into your webpack.config.js file:

let path = require('path');\r\nlet LiveReloadPlugin = require('webpack-livereload-plugin');\r\n\r\nmodule.exports = {\r\n  entry: './client/index.js',\r\n  output: {\r\n    filename: 'bundle.js',\r\n    path: path.resolve(__dirname, 'client/dist')\r\n  },\r\n  context: __dirname,\r\n  resolve: {\r\n    extensions: ['.js', '.jsx', '.json', '*']\r\n  },\r\n  module: {\r\n    rules: [{\r\n      test: /\\.jsx?$/,\r\n      exclude: /(node_modules|bower_components)/,\r\n      loader: 'babel-loader',\r\n      options: {\r\n        presets: ['react', 'es2015']\r\n      }\r\n    },\r\n      {\r\n        test: /\\.scss$/,\r\n        use: [\r\n          'style-loader',\r\n          'css-loader',\r\n          'sass-loader'\r\n        ]\r\n      }]\r\n  },\r\n  plugins: [\r\n    new webpack.DefinePlugin({\r\n      'process.env.COSMIC_BUCKET': JSON.stringify(process.env.COSMIC_BUCKET),\r\n      'process.env.COSMIC_READ_KEY': JSON.stringify(process.env.COSMIC_READ_KEY),\r\n      'process.env.COSMIC_WRITE_KEY': JSON.stringify(process.env.COSMIC_WRITE_KEY)\r\n    }),\r\n    new LiveReloadPlugin({appendScriptTag: true})\r\n  ]\r\n};

Here, we are simply telling webpack to output a bundle.js file into our dist folder with all of our react components bundled in there as well. The babel-loader is simply transpiling JavaScript files using babel and webpack. The live reload plugin allows us to make changes to our files and automatically have webpack watch and "re-bundle" with our updated changes. Next, we're going to us a little bit of node with express to serve up our index.html file as well as our bundle.js file. Realistically, we aren't really making requests to our own node backend, but it's good to use node as a method to serve us static files. Copy and paste the code below into our index.jsfile\r\nlocated in our server directory.

const express = require('express');\r\nconst app = express();\r\nconst path = require('path');\r\nconst volleyball = require('volleyball');\r\n\r\napp.use(volleyball);\r\n\r\n//serve up static files\r\napp.use(express.static(path.resolve(__dirname, '..', 'client')));\r\napp.use(express.static(path.resolve(__dirname, '..', 'node_modules')));\r\n\r\napp.use(function (err, req, res, next) {\r\n  console.error(err);\r\n  console.error(err.stack);\r\n  res.status(err.status || 500).send(err.message || 'Internal server error.');\r\n});\r\n\r\n\r\n// handle every other route with index.html, which will contain\r\n// a script tag to our application's JavaScript file(s).\r\napp.get('*', function (request, response) {\r\n  response.sendFile(path.resolve(__dirname, '..', 'client', 'index.html'))\r\n});\r\n\r\n//listen on port 3000\r\napp.listen(process.env.PORT || 3000, function () {\r\n  console.log("Rockin' out on port 3000 homie");\r\n});

Here, we are simply telling our server to serve up static files out of our node_modules and client directories. The '*' route is basically telling express to serve up our index.html on any route requested within our app. Finally, we are telling express to listen on port 3000. Feel free to try it out! Run npm start or yarn start and see our "Rockin' out on port 3000 homie" message log put to the console! Next, let's set up our redux store.js file, located in our client/redux folder. Copy and paste the following code into the store.js file located in our client/redux folder:

import { createStore, applyMiddleware } from 'redux';\r\nimport reducer from './reducer';\r\nimport thunkMiddleware from 'redux-thunk';\r\nimport {createLogger} from 'redux-logger';\r\n\r\nconst store = createStore(\r\n  reducer,\r\n  applyMiddleware(\r\n    createLogger(),\r\n    thunkMiddleware\r\n  )\r\n);\r\n\r\nexport default store;

What's going on here:

  1. We are setting up our redux "store" so that we can pass data down through "props" into whatever components we want (I am going to assume you have some working knowledge of how the flux architecture functions, if you do not understand\r\nthis it is OK, just check the flux architecture link above).
  2. We are using the redux-thunk middleware to handle all of our asynchronous calls to our Cosmic API. This middleware is used whenever we dispatch a function instead of an action.
  3. We are also using "createlogger" middleware to visually see every logged action that we dispatch. Next, we are going to set up the index.js file, located in our client directory. Copy and paste the following code:
import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport Home from './components/Home';\r\nimport {Provider} from 'react-redux';\r\nimport store from './redux/store';\r\n\r\nReactDOM.render(\r\n  <Provider store={store}>\r\n    <Home />\r\n  </Provider>,\r\n  document.getElementById('root')\r\n);

What's going on here:

  1. We are telling ReactDOM to target our "root" div from our index.html file and pop in our <Home/> react component (which we will build out in our next step).
  2. Our  react component is being served up data from our store through that tag. It is "providing" its children with data (hence, why it's called "Provider"). Next, we will build out our Homecomponent. In our Home.jsfile\r\nlocated in out client/components directory, copy and paste the following code:
import React, {Component} from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { getAllTasks, postNewTask } from '../redux/reducer';\r\nimport Task from './Task';\r\n\r\nclass Home extends Component {\r\n  constructor(props){\r\n    super(props);\r\n  }\r\n  componentDidMount(){\r\n    getAllTasks();\r\n  }\r\n  render() {\r\n    return (\r\n      <div>\r\n      <div className="container">\r\n        <div className="row">\r\n          <div className="col-xs-12">\r\n           <h1>Cosmic To-Do App!!</h1>\r\n            <form onSubmit={evt => {\r\n               evt.preventDefault();\r\n               this.props.postNewTask(evt.target.taskName.value);\r\n               evt.target.taskName.value = "";\r\n              }\r\n             }>\r\n              <div className="form-group">\r\n              <label for="exampleInputEmail1">Add New To-Do</label>\r\n              <input name="taskName" placeholder="Enter new task" />\r\n              </div>\r\n              <button type="submit">Add</button>\r\n            </form>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div className="container">\r\n        <div className="row">\r\n          <div className="col-xs-12">\r\n            <h3>Let's get some work done!</h3>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div className="container">\r\n        {\r\n          this.props.tasks && this.props.tasks.map((task) => {\r\n            return (\r\n              <Task key={task._id} Obj={task} isComplete={task.metafields[0].value} Name={task.title}/>\r\n            )\r\n          })\r\n        }\r\n      </div>\r\n      </div>\r\n    )\r\n  }\r\n}\r\n\r\nconst mapState = ({tasks}) => ({tasks});\r\nconst mapDispatch = {getAllTasks, postNewTask};\r\nexport default connect(mapState, mapDispatch)(Home);

What's going on (a lot!):

  1. We are creating a react component and fetching all of our data when our Home component mounts (which will be tasks form our Cosmic bucket).
  2. We are rendering "HTML" to our virtual DOM.
  3. We are creating a form that will dispatch a function (that will go through our redux-thunk middleware) that adds tasks to our list of tasks to do whenever our users click the submit <button>.
  4. We are doing a hacky check so that our app does not break by doing what is called a "short-circuit". We are first checking if we have gotten back "tasks" from our asynchronous call to our Cosmic bucket and if we do then we are going\r\nto map over each of them and render a <Task /> component (which we will build in the nex step).
  5. Finally, we are wrapping our Home component inside of the connect function that the react-redux library gives us. We are getting the {tasks} from our store as well as our {getAllTasks, postNewTask} functions from our store. Next, we are going to build out our  component to render every task that we are getting from our store. In our Task.js file, located in our client/components directory, copy and paste the following code:
import React from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { putChangeStatus, deleteTask } from '../redux/reducers/reducer';\r\n\r\nconst Task = (props) => {\r\n  return (\r\n      <div className="row">\r\n        <div className="btn-group" role="group" aria-label="Basic example">\r\n          <button type="button" onClick={() => {\r\n            props.putChangeStatus(props.Obj, props.isComplete)}} className="btn">{props.isComplete ? "Undo" : "Complete" }</button>\r\n          <button type="button" onClick={() => props.deleteTask(props.Obj.slug)} className="btn">Delete</button>\r\n        </div>\r\n        <h3 style={{textDecoration: props.isComplete ? "line-through" : "none"}}>{props.Name}</h3>\r\n      </div>\r\n  );\r\n};\r\n\r\nconst mapDispatch = {putChangeStatus, deleteTask};\r\nexport default connect(null, mapDispatch)(Task);

What's going on:

  1. We are creating what is called a "dumb" react component and, again, wrapping it in our connect function.
  2. We are pulling in putChangeStatus and deleteTask from our reducer (which we will finally make in te next step) and hookingit up to our store.
  3. We are hooking up our "Complete" and "Delete" buttons to dispatch asynchronous functions onClick so that we actually update our Cosmic bucket as well. Next, we will FINALLY make our reducer and set up all of our asynchronous "redux-thunk" functions. In our reducer.js file, located in our client/redux directory, copy and paste the following code:
import axios from "axios";\r\n/////////////////CONSTANTS/////////////////////\r\nconst GET_ALL_TASKS = "GET_ALL_TASKS";\r\nconst POST_TASK = "POST_TASK";\r\nconst CHANGE_STATUS = "CHANGE_STATUS";\r\nconst DELETE_TASK = "DELETE_TASK";\r\n/////////////////ACTIONS//////////////\r\nconst getTasks = (tasks) => ({type: GET_ALL_TASKS, tasks});\r\nconst addTask = (task) => ({type: POST_TASK, task});\r\nconst changeStatus = (task) => ({type: CHANGE_STATUS, task});\r\nconst taskDelete = (slug) => ({type: DELETE_TASK, slug});\r\n/////////////////REDUCER/////////////////////\r\n//initiate your starting state\r\nlet initial = {\r\n  tasks: []\r\n};\r\nconst reducer = (state = initial, action) => {\r\n  switch (action.type) {\r\n    case GET_ALL_TASKS:\r\n      return Object.assign({}, state, {tasks: action.tasks.objects});\r\n    case POST_TASK:\r\n      let updatedTasks = [action.task].concat(state.tasks);\r\n      return Object.assign({}, state, {tasks: updatedTasks});\r\n    case CHANGE_STATUS:\r\n      let newArr = state.tasks.map((task) => {\r\n        if(task.slug === action.task.slug) task.metafields[0].value = !task.metafields[0].value;\r\n        return task;\r\n      });\r\n      return Object.assign({}, state, {tasks: newArr});\r\n    case DELETE_TASK:\r\n      let arr = state.tasks.filter((task) => {\r\n        return !(task.slug === action.slug);\r\n      });\r\n      return Object.assign({}, state, {tasks: arr});\r\n    default:\r\n      return state;\r\n  }\r\n\r\n};\r\n\r\nexport default reducer;\r\n\r\n\r\n/////////////// ACTION DISPATCHER FUNCTIONS///////////////////\r\n\r\nexport const getAllTasks = () => dispatch => {\r\n  axios.get(`https://api.cosmicjs.com/v1/your-bucket-slug-name/object-type/tasks`)\r\n    .then((response) => {\r\n      return response.data;\r\n    })\r\n    .then((tasks) => {\r\n      dispatch(getTasks(tasks))\r\n    })\r\n    .catch((err) => {\r\n      console.error.bind(err);\r\n    })\r\n};\r\n\r\nexport const postNewTask = (task) => dispatch => {\r\n  dispatch(addTask({title: task, metafields: [{value: false}], slug: formatSlug(task)}));\r\n  axios.post(`https://api.cosmicjs.com/v1/your-bucket-slug-name/add-object`, {type_slug: "tasks", title: task, content: "New Task",\r\n    metafields: [\r\n      {\r\n        title: "Is Complete",\r\n        key: "is_complete",\r\n        value: false,\r\n        type: "text"\r\n      }\r\n    ]})\r\n    .then((response) => {\r\n      console.log(response.data);\r\n    })\r\n    .catch((err) => {\r\n      console.error.bind(err);\r\n    })\r\n};\r\n\r\nexport const putChangeStatus = (task, bool) => (dispatch) => {\r\n  dispatch(changeStatus(task));\r\n  axios.put(`https://api.cosmicjs.com/v1/your-bucket-slug-name/edit-object`, {slug: task.slug,\r\n    metafields: [\r\n      {\r\n        title: "Is Complete",\r\n        key: "is_complete",\r\n        value: !bool,\r\n        type: "text"\r\n      }\r\n    ]})\r\n    .then((response) => {\r\n      console.log(response.data);\r\n    })\r\n    .catch((err) => {\r\n      console.error.bind(err);\r\n    })\r\n};\r\n\r\nexport const deleteTask = (slug) => (dispatch) => {\r\n  dispatch(taskDelete(slug));\r\n  axios.delete(`https://api.cosmicjs.com/v1/your-bucket-slug-name/${slug}`)\r\n    .then((response) => {\r\n    console.log(response.data)\r\n    })\r\n    .catch((err) => {\r\n      console.error.bind(err);\r\n    })\r\n};\r\n\r\nconst formatSlug = (title) => {\r\n  let lower = title.toLowerCase();\r\n  return lower.split(" ").join("-");\r\n};

What is going on?!

Side note -> I personally like to store all of my constants, actions, and action dispatcher functions inside of one file for every reducer that I have just so I'm not contantly jumping from file to file. It's totally common and cool to break\r\nthese up into seperate files.

  1. We are puling in axios (our library that will be making the HTTP requests for us).
  2. We are defining our constants.
  3. We are setting up our actions to dispatch.
  4. We define our reducer function that our store uses and we are starting it out initially with an object that has a tasks key with an empty array as a value (this array will be filled with task objects retrieved from our Cosmic bucket).
  5. We define our action dispatcher functions that make our axios requests to the Cosmic API (specifically to our personal bucket). And we are done! Run npm run build or yarn build and in a different tab run npm start or yarn start and see what we made!\r\nIf you want to see my implementation of this (unnecessarily using react-router) to get a glimpse of how all this works together check out my github repo

Conclusion:

We were able to consume the Cosmic API with our actions and dispatcher functions. If you're a little iffy on how how all the files work in conjunction with our store check out this gif to get a better picture of how redux is passing data around the app. I hope you enjoyed this tutorial as much as I did, if you have any questions reach out to us on Twitter and join our community on Slack.

","metafields":[{"object_type":"authors","value":"59092a411d2b961e2c000524","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"59092a411d2b961e2c000524","slug":"ryan-skinner","title":"Ryan Skinner","content":"","metafields":[{"value":"0ca31460-2f9b-11e7-8a4c-11dbea3cc073-ryan.jpeg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/0ca31460-2f9b-11e7-8a4c-11dbea3cc073-ryan.jpeg","imgix_url":"https://imgix.cosmicjs.com/0ca31460-2f9b-11e7-8a4c-11dbea3cc073-ryan.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-05-03T00:54:25.186Z","created_by":"5357ef811693be2118000001","created":"2017-05-03T00:54:25.186Z","status":"published"}},{"value":"

In this tutorial I'm going to show you how to create a simple “ToDo” app using React, Redux, a little bit of Node, and Cosmic.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"89690aa0-2fb8-11e7-8a4c-11dbea3cc073-todo-app.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/89690aa0-2fb8-11e7-8a4c-11dbea3cc073-todo-app.jpg","imgix_url":"https://imgix.cosmicjs.com/89690aa0-2fb8-11e7-8a4c-11dbea3cc073-todo-app.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-05-03T00:52:13.656Z","created_by":"5357ef811693be2118000001","created":"2017-05-03T00:52:13.656Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"59092a411d2b961e2c000524","slug":"ryan-skinner","title":"Ryan Skinner","content":"","metafields":[{"value":"0ca31460-2f9b-11e7-8a4c-11dbea3cc073-ryan.jpeg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/0ca31460-2f9b-11e7-8a4c-11dbea3cc073-ryan.jpeg","imgix_url":"https://imgix.cosmicjs.com/0ca31460-2f9b-11e7-8a4c-11dbea3cc073-ryan.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-05-03T00:54:25.186Z","created_by":"5357ef811693be2118000001","created":"2017-05-03T00:54:25.186Z","status":"published","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/0ca31460-2f9b-11e7-8a4c-11dbea3cc073-ryan.jpeg","imgix_url":"https://imgix.cosmicjs.com/0ca31460-2f9b-11e7-8a4c-11dbea3cc073-ryan.jpeg"}}},"teaser":"

In this tutorial I'm going to show you how to create a simple “ToDo” app using React, Redux, a little bit of Node, and Cosmic.

","featured_image":{"url":"https://cdn.cosmicjs.com/89690aa0-2fb8-11e7-8a4c-11dbea3cc073-todo-app.jpg","imgix_url":"https://imgix.cosmicjs.com/89690aa0-2fb8-11e7-8a4c-11dbea3cc073-todo-app.jpg"}}},{"_id":"5905fe36710a2188470004a0","order":136,"slug":"how-to-build-a-command-line-note-taking-app","title":"How to Build a Command Line Note Taking App","content":"

In this tutorial I'm going to show you how to build a simple note taking app that can be used inside of your command line. We're going to use Cosmic which allows us to view these notes from anywhere on any device.

TL;DR

Download and install the app on GitHub

Setup

In an empty directory start a new npm project.

npm init

Next you'll need to add the following packages.

npm install --save cosmicjs meteor-random chalk inquirer

Now let's take a look at the package.json. If you did everything right so far it should look like this.

{\r\n  "name": "NoteToSelf",\r\n  "version": "1.0.0",\r\n  "description": "",\r\n  "main": "index.js",\r\n  "scripts": {\r\n    "test": "echo \\"Error: no test specified\\" && exit 1"\r\n  },\r\n  "keywords": [],\r\n  "author": "",\r\n  "license": "ISC",\r\n  "dependencies": {\r\n    "chalk": "^1.1.3",\r\n    "cosmicjs": "^2.39.0",\r\n    "inquirer": "^3.0.6",\r\n    "meteor-random": "^0.0.3"\r\n  }\r\n}

Now let's take a second to setup our index.js file. First thing we need to do is import our packages at the top of the page

const chalk = require('chalk');\r\nconst inquirer = require('inquirer');\r\nconst Random = require('meteor-random');\r\nconst Cosmic = require('cosmicjs');

When we have done that next we need to setup our buckets information to be used later.

var config = {};\r\nconfig.bucket = {\r\n  slug: '',\r\n  read_key: '',\r\n  write_key: ''\r\n}

You will need to fill in the above object with your buckets information. Now we need to setup the main menu this is what you'll see when you start the program.

Code Overview

const MainMenu = () => {\r\n  inquirer.prompt(\r\n    {\r\n      type: 'list',\r\n      name: 'mainMenu',\r\n      message: 'Main Menu',\r\n      choices: [\r\n        'New Note',\r\n        'View Notes',\r\n        new inquirer.Separator(),\r\n        'Exit'\r\n      ]\r\n    }\r\n  ).then((answers)=>{\r\n    if(answers.mainMenu === "New Note"){\r\n      NewNote()\r\n    } else if(answers.mainMenu === "View Notes"){\r\n      ViewNotes()\r\n    } else {\r\n      process.exit()\r\n    }\r\n  })\r\n}\r\nMainMenu()

Let's break this down so it's easier to understand.

  1. generates a cli interface with 3 options
  2. after you select an option it runs through a series of if statements directing you to the next interface

Now we are going to create the interface for adding a new note. Buckle in because this is where it gets slightly more confusing.

const NewNote = () => {\r\n  var question = {\r\n    type: 'input',\r\n    name: 'note_text',\r\n    message: 'Note'\r\n  } // 1\r\n  inquirer.prompt(question).then((answers) => { // 2\r\n    var params = {\r\n      write_key: config.bucket.write_key,\r\n      type_slug: 'notes',\r\n      slug: Random.id().toLowerCase(),\r\n      title: answers.note_text,\r\n      content: ''\r\n    } // 3\r\n    if(answers.note_text === ''){\r\n      console.log(chalk.red("You cannot add an empty note"))\r\n      MainMenu()\r\n      return;\r\n    }\r\n    Cosmic.addObject(config, params, (error, response) =>{ // 4\r\n      if(response.object){\r\n        console.log(chalk.green("\\u2713" + " Success"))\r\n      }\r\n      if(error){\r\n        console.log(error)\r\n      }\r\n      MainMenu() //5\r\n    })\r\n  })\r\n}

This isn't too confusing don't worry we'll walk through it together.

  1. we create the question type and declare it to a variable
  2. we then send it to a inquirer function to get user input for what the note text should be
  3. now we create an object with all the information we'll need for cosmic. It automatically pulls the input text from inquirer and builds a slug from the meteor random package.
  4. we now use the wonder of Cosmic and create a new object.
  5. return to the main menu

The next menu is a little more confusing so we're going to break it down into smaller chunks.

const ViewNotes = () => {\r\n  var params = {\r\n    type_slug: 'notes',\r\n    limit: 10,\r\n    skip: 0\r\n  };\r\n        \r\n  Cosmic.getObjectType(config, params, (error, response)=>{ //fetches all notes\r\n    var notes = []\r\n    var noteText = [chalk.yellow("Return")]\r\n    if(response.total === undefined){\r\n      console.log(chalk.red("No notes found."))\r\n      MainMenu()\r\n      return;\r\n    }\r\n    sortedresponse = response.objects.all.sort((a,b)=>{\r\n      return new Date(b.created) - new Date(a.created)\r\n    })\r\n    const amount = response.objects.all.length\r\n    sortedresponse.map((note)=>{\r\n      var newnote = {\r\n        name: note.title,\r\n        slug: note.slug\r\n      }\r\n      noteText.push(chalk.blue(note.title) + chalk.hidden('slug - '+note.slug + ' | ') )\r\n      notes.push(newnote)\r\n      if(notes.length === amount){\r\n        inquirer.prompt(\r\n          {\r\n            type: 'list',\r\n            name: 'allnotes',\r\n            message: 'All Notes:',\r\n            choices: noteText\r\n          }).then((answers)=>{\r\n            if(answers.allnotes === "\\u001b[33mReturn\\u001b[39m"){\r\n              MainMenu()\r\n              return;\r\n            }\r\n            var regexSearch = /(\\w{17})/\r\n            var newvalue = answers.allnotes.match(regexSearch)\r\n            Cosmic.getObject(config, {slug: newvalue[0]}, (error, response)=>{\r\n              inquirer.prompt({\r\n                type: 'expand',\r\n                message: chalk.blue(response.object.title),\r\n                name: 'morecontext',\r\n                choices: [\r\n                  {\r\n                    key: 'e',\r\n                    name: 'Edit',\r\n                    value: 'edit'\r\n                  },\r\n                  {\r\n                    key: 'd',\r\n                    name: 'Delete',\r\n                    value: 'delete'\r\n                  },\r\n                  {\r\n                    key: 'l',\r\n                    name: 'Leave',\r\n                    value: 'leave'\r\n                  }\r\n                ]}).then((answers)=>{\r\n                  if(answers.morecontext === 'edit'){\r\n                    inquirer.prompt(\r\n                      {\r\n                        type: 'input',\r\n                        name: 'newText',\r\n                        message: 'New Text:'\r\n                      }).then((answers)=>{\r\n                        var params = {\r\n                          write_key: config.bucket.write_key,\r\n                          slug: response.object.slug,\r\n                          type_slug: 'notes',\r\n                          title: answers.newText,\r\n                          content: ''\r\n                        }\r\n                        Cosmic.editObject(config, params, (error, response)=>{\r\n                          if(response.object){\r\n                            console.log(chalk.green("\\u2713" + " Success"))\r\n                          }\r\n                          MainMenu()\r\n                        })\r\n                      })\r\n                    \r\n                  } else if(answers.morecontext === 'delete'){\r\n                    var params = {\r\n                      write_key: config.bucket.write_key,\r\n                      slug: response.object.slug\r\n                    }\r\n                    Cosmic.deleteObject(config, params, (error, response)=>{\r\n                      if(error){\r\n                        console.log(error)\r\n                      }\r\n                      if(response.object){\r\n                        console.log(chalk.green("\\u2713" + " Success"))\r\n                      }\r\n                      MainMenu();\r\n                    });\r\n                  } else {\r\n                    MainMenu();\r\n                  }\r\n                })\r\n              })\r\n            })\r\n          }\r\n        })\r\n      })\r\n}

If this seem like absolutely gibberish that's okay we can take it one piece at a time. Let's start with the top half where we get all of your notes (up to ten) and display them in a list view.

var params = {\r\n    type_slug: 'notes',\r\n    limit: 10,\r\n    skip: 0\r\n  };\r\n        \r\n  Cosmic.getObjectType(config, params, (error, response)=>{ // 1\r\n    var notes = []\r\n    var noteText = [chalk.yellow("Return")]\r\n    if(response.total === undefined){\r\n      console.log(chalk.red("No notes found."))\r\n      MainMenu()\r\n      return;\r\n    }\r\n    sortedresponse = response.objects.all.sort((a,b)=>{\r\n      return new Date(b.created) - new Date(a.created)\r\n    }) // 2\r\n    const amount = response.objects.all.length\r\n    sortedresponse.map((note)=>{\r\n      var newnote = {\r\n        name: note.title,\r\n        slug: note.slug\r\n      }\r\n      noteText.push(chalk.blue(note.title) + chalk.hidden('slug - '+note.slug + ' | ') ) // 3\r\n      notes.push(newnote)\r\n      if(notes.length === amount){\r\n        inquirer.prompt(\r\n          {\r\n            type: 'list',\r\n            name: 'allnotes',\r\n            message: 'All Notes:',\r\n            choices: noteText\r\n          }).then((answers)=>{\r\n            if(answers.allnotes === "\\u001b[33mReturn\\u001b[39m"){\r\n              MainMenu()\r\n              return;\r\n            }\r\n            var regexSearch = /(\\w{17})/\r\n            var newvalue = answers.allnotes.match(regexSearch) // 4\r\n            Cosmic.getObject(config, {slug: newvalue[0]}, (error, response)=>{ // 5\r\n              inquirer.prompt({ // 6\r\n                type: 'expand',\r\n                message: chalk.blue(response.object.title),\r\n                name: 'morecontext',\r\n                choices: [\r\n                  {\r\n                    key: 'e',\r\n                    name: 'Edit',\r\n                    value: 'edit'\r\n                  },\r\n                  {\r\n                    key: 'd',\r\n                    name: 'Delete',\r\n                    value: 'delete'\r\n                  },\r\n                  {\r\n                    key: 'l',\r\n                    name: 'Leave',\r\n                    value: 'leave'\r\n                  }\r\n                ]})
  1. We use the Cosmic package to go ahead and grab all of the objects.
  2. We take the array of objects and sort them so the most recent are on the top.
  3. We create a string with two seperate parts. The first part is the text of the note styled to be blue using the chalk package. Next we take the slug of the item and pass it in but make it hidden. This is done so that we can fetch more information about\r\nthis note later on in the program.
  4. We take the string the user selected and match it agains a regex search that will find the slug and return it.
  5. We get the objects specific information this allows us to use it better later on.
  6. We generate the next prompt using the newly fetched data and place the note text in the message field.

That was the basics of fetching the data and manipulating the return in a manner that we can use it correctly in this instance. Now we're going to take a look at the second half of the view function. This is where we can edit and delete our selected\r\nnot from before.

]}).then((answers)=>{\r\n    if(answers.morecontext === 'edit'){\r\n      inquirer.prompt(\r\n        {\r\n          type: 'input',\r\n          name: 'newText',\r\n          message: 'New Text:'\r\n        }).then((answers)=>{ // 1\r\n          var params = {\r\n            write_key: config.bucket.write_key,\r\n            slug: response.object.slug,\r\n            type_slug: 'notes',\r\n            title: answers.newText,\r\n            content: ''\r\n          } // 2\r\n          Cosmic.editObject(config, params, (error, response) => { // 3\r\n            if(response.object){\r\n              console.log(chalk.green("\\u2713" + " Success"))\r\n            }\r\n            MainMenu()\r\n          })\r\n        })\r\n    } else if(answers.morecontext === 'delete'){\r\n      var params = {\r\n        write_key: config.bucket.write_key,\r\n        slug: response.object.slug\r\n      }\r\n      Cosmic.deleteObject(config, params, (error, response)=>{\r\n        if(error){\r\n          console.log(error)\r\n        }\r\n        if(response.object){\r\n          console.log(chalk.green("\\u2713" + " Success"))\r\n        }\r\n        MainMenu();\r\n      });\r\n    } else {\r\n      MainMenu();\r\n    }\r\n  })
  1. Creates a prompt and asks the user for the new note text
  2. Again we build an object with all the necessary parts you need.
  3. Once we have all the pieces this is where we put them all together and edit what the note says.

Final Steps

After all of that code it wasn't too bad in the end. After reading that overview you should have a pretty rough idea of what the program is doing. If your still having problems understanding what is going on I'm just an email away. There are still\r\na few more things that need to be done though. First things first we need to make some adjusts to the package.json file.

{\r\n  "name": "NoteToSelf",\r\n  "version": "1.0.0",\r\n  "description": "",\r\n  "main": "index.js",\r\n  "scripts": {\r\n    "test": "echo \\"Error: no test specified\\" && exit 1"\r\n  },\r\n  "bin": {\r\n    "notetoself": "./index.js"\r\n  },\r\n  "keywords": [],\r\n  "author": "",\r\n  "license": "ISC",\r\n  "dependencies": {\r\n    "chalk": "^1.1.3",\r\n    "cosmicjs": "^2.39.0",\r\n    "inquirer": "^3.0.6",\r\n    "meteor-random": "^0.0.3"\r\n  }\r\n}

This will make it so that the application is installable system wide and can be called by using 'notetoself'. All that's left to do is install the package to your system.

npm install -g

Once this is done simply run this command:

notetoself

and you'll have system wide notes available anytime you want.

If you have any questions about this installing and using this app join the Cosmic community on Slack, or follow and reach out on Twitter.

","metafields":[{"children":null,"type":"object","title":"Author","key":"author","id":"MaMKL9pcPx","value":"5905fe6a710a2188470004a5","object_type":"authors","object":{"_id":"5905fe6a710a2188470004a5","slug":"noah-vaillancourt","title":"Noah Vaillancourt","content":"","metafields":[{"value":"2664e120-2db7-11e7-826f-f34de0199ac5-noah-vaillancourt.jpeg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/2664e120-2db7-11e7-826f-f34de0199ac5-noah-vaillancourt.jpeg","imgix_url":"https://imgix.cosmicjs.com/2664e120-2db7-11e7-826f-f34de0199ac5-noah-vaillancourt.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-04-30T15:10:34.252Z","created_by":"5357ef811693be2118000001","created":"2017-04-30T15:10:34.252Z","status":"published"}},{"children":null,"type":"html-textarea","title":"Teaser","key":"teaser","id":"rukd6yWMs1","value":"

In this tutorial I'm going to show you how to build a simple note taking app that can be used inside of your command line. We're going to use Cosmic which allows us to view these notes from anywhere on any device.

"},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"X6yMzlTFEs","value":"f0322940-2e75-11e7-88fd-151e710b2934-note-to-self.jpg","url":"https://cdn.cosmicjs.com/f0322940-2e75-11e7-88fd-151e710b2934-note-to-self.jpg","imgix_url":"https://imgix.cosmicjs.com/f0322940-2e75-11e7-88fd-151e710b2934-note-to-self.jpg"},{"children":null,"type":"textarea","title":"SEO Meta Description","key":"seo_meta_description","id":"fPwf0lIVF8","value":""},{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"XVscCXAtKv","value":""}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-04-30T15:09:42.700Z","created_by":"5357ef811693be2118000001","created":"2017-04-30T15:09:42.700Z","status":"published","modified_at":"2020-10-02T02:08:48.172Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-10-02T02:08:48.172Z","unpublish_at":null,"metadata":{"author":{"_id":"5905fe6a710a2188470004a5","slug":"noah-vaillancourt","title":"Noah Vaillancourt","content":"","metafields":[{"value":"2664e120-2db7-11e7-826f-f34de0199ac5-noah-vaillancourt.jpeg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/2664e120-2db7-11e7-826f-f34de0199ac5-noah-vaillancourt.jpeg","imgix_url":"https://imgix.cosmicjs.com/2664e120-2db7-11e7-826f-f34de0199ac5-noah-vaillancourt.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created_at":"2017-04-30T15:10:34.252Z","created_by":"5357ef811693be2118000001","created":"2017-04-30T15:10:34.252Z","status":"published","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/2664e120-2db7-11e7-826f-f34de0199ac5-noah-vaillancourt.jpeg","imgix_url":"https://imgix.cosmicjs.com/2664e120-2db7-11e7-826f-f34de0199ac5-noah-vaillancourt.jpeg"}}},"teaser":"

In this tutorial I'm going to show you how to build a simple note taking app that can be used inside of your command line. We're going to use Cosmic which allows us to view these notes from anywhere on any device.

","featured_image":{"url":"https://cdn.cosmicjs.com/f0322940-2e75-11e7-88fd-151e710b2934-note-to-self.jpg","imgix_url":"https://imgix.cosmicjs.com/f0322940-2e75-11e7-88fd-151e710b2934-note-to-self.jpg"},"seo_meta_description":"","published_date":""}},{"_id":"58f68befeda3b0ce47001205","order":137,"slug":"how-to-build-a-simple-blog-using-nodejs","title":"How to Build a Simple Blog Using Node.js","content":"

In this tutorial I'm going to show you how to create a simple blog using Node.js and Cosmic.  This is going to be the fastest and most light-weight blog you have ever created.  Let's get started.

TL;DR

View the demo
Install the Simple Blog App on Cosmic
View the codebase on GitHub

Getting Started

Make sure that you have Node.js and NPM installed on your machine, if not, visit the Node.js website to install the latest version.

Make sure you have Yarn installed globally:

npm install yarn -g

Let's start by creating a folder for our app.  In your favorite terminal run the following commands:

mkdir simple-blog\r\ncd simple-blog

Now let's add a package.json file to import all of our dependencies for our app:

vim package.json

Add the following to our package.json file:

{\r\n  "dependencies": {\r\n    "cosmicjs": "^2.39.0",\r\n    "express": "^4.15.2",\r\n    "hogan-express": "^0.5.2",\r\n    "nodemon": "^1.11.0"\r\n  },\r\n  "scripts": {\r\n    "start": "node app.js",\r\n    "development": "nodemon app.js"\r\n  }\r\n}

 It's a pretty light dependency list for a pretty light app.  So what we will install is:

1. The Cosmic Node Module to get our content from our Cosmic Bucket.
2. Express for our web app framework
3. Hogan for our template views
4. Nodemon for development

Our scripts are necessary for starting our app in production and development.

Run the following command to install our dependencies:

yarn

Building Our Blog

Next, let's begin building our blog pages.  Create a file titled app.js:

vim app.js

and add the following to app.js:

const express = require('express')\r\nconst app = express()\r\nconst hogan = require('hogan-express')\r\nconst http_module = require('http')\r\nconst http = http_module.Server(app)\r\napp.engine('html', hogan)\r\napp.set('port', (process.env.PORT || 3000))\r\napp.use('/', express.static(__dirname + '/public/'))\r\nconst Cosmic = require('cosmicjs')\r\nconst helpers = require('./helpers')\r\nconst bucket_slug = process.env.COSMIC_BUCKET || 'simple-blog-website'\r\nconst read_key = process.env.COSMIC_READ_KEY\r\nconst partials = {\r\n  header: 'partials/header',\r\n  footer: 'partials/footer'\r\n}\r\napp.use('/', (req, res, next) => {\r\n  res.locals.year = new Date().getFullYear()\r\n  next()\r\n})\r\n// Home\r\napp.get('/', (req, res) => {\r\n  Cosmic.getObjects({ bucket: { slug: bucket_slug, read_key: read_key } }, (err, response) => {\r\n    const cosmic = response\r\n    if (cosmic.objects.type.posts) {\r\n      cosmic.objects.type.posts.forEach(post => {\r\n        const friendly_date = helpers.friendlyDate(new Date(post.created_at))\r\n        post.friendly_date = friendly_date.month + ' ' + friendly_date.date\r\n      })\r\n    } else {\r\n      cosmic.no_posts = true\r\n    }\r\n    res.locals.cosmic = cosmic\r\n    res.render('index.html', { partials })\r\n  })\r\n})\r\nhttp.listen(app.get('port'), () => {\r\n  console.info('==> 🌎  Go to http://localhost:%s', app.get('port'));\r\n})

There are a few things happening here:

1. We are importing our essential modules: Express, Cosmic, setting our PORT dynamically, etc.
2. We are pointing to some partials: header and footer, you can reference these partials from the codebase on GitHub.
3. We view our app home page ('/') and query our Cosmic Bucket for Post Objects, set the friendly date, then return the index.html template.
4. We are also adding our data to this page in the form of a global data store: cosmic.  This data structure makes our template implementation super intuitive.

Adding Our Home Page Template Variables

This part of the process is the most fun because it shows you the power of Cosmic combined with a declarative, logic-less template system like Mustache.  Let's\r\ncreate a folder called views and add our index.html file:

mkdir views\r\ncd views\r\nvim index.html

Add the following to index.html:

{{> header }}\r\n  <main class="container">\r\n    {{# cosmic.objects.type.posts }}\r\n      <div class="card" data-href="/{{ slug }}">\r\n        {{# metadata.hero.imgix_url }}\r\n          <div class="blog-post-hero blog-post-hero--short" style="background-image: url({{ metadata.hero.imgix_url }})"></div>\r\n        {{/ metadata.hero.imgix_url }}\r\n        <div class="card-padding">\r\n          <h2 class="blog__title blog__title--small">\r\n            <a href="/{{ slug }}">{{ title }}</a>\r\n          </h2>\r\n          <div class="blog__author">\r\n            <div class="blog__author-image" style="background-image: url({{ metadata.author.metadata.image.imgix_url }}?w=100)"></div>\r\n            <div class="blog__author-title">by <a href="/author/{{ metadata.author.slug }}">{{ metadata.author.title }}</a> on {{ friendly_date }}</div>\r\n            <div class="clearfix"></div>\r\n          </div>\r\n          <div class="blog__teaser droid">{{{ metadata.teaser }}}</div>\r\n          <div class="blog__read-more">\r\n            <a href="/{{ slug }}">Read more...</a>\r\n          </div>\r\n        </div>\r\n      </div>  \r\n    {{/ cosmic.objects.type.posts }}\r\n  </main>\r\n{{> footer }}

What's happening here?
1. We pull in our header file with the Mustache template variable.
2. We pull in our Cosmic data using the Mustache variable {{ cosmic }} which has everything we need to layout our page's dynamic data.
3. We are looping through our {{ cosmic.objects.type.posts }} and rolling out our blog posts.

What I like about this approach is that the template is completely logic-less aside from some boolean queries and array looping.  It really does a great job of keeping our logic separate from our presentation (thanks Chris Wanstrath!)

If you want to build out the rest of the application, clone the GitHub repo and follow the README instructions.

Conclusion

This is the abridged version of the Simple Blog app available for download in the Cosmic Apps page.  The full codebase includes a single post page view as\r\nwell as a page dedicated to each author's posts.  View the full codebase on GitHub and deploy this app in a few clicks from your Cosmic dashboard by installing the app to your Cosmic Bucket.

I hope you enjoyed this tutorial, if you have any questions reach out to us on Twitter and join our community on Slack.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"

In this tutorial I'm going to show you how to create a simple blog using Node.js and Cosmic.  This is going to be the fastest and most light-weight blog you have ever created.  Let's get started.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"12112ea0-24a1-11e7-995a-2b3b96eb2f07-paradise.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/12112ea0-24a1-11e7-995a-2b3b96eb2f07-paradise.jpg","imgix_url":"https://imgix.cosmicjs.com/12112ea0-24a1-11e7-995a-2b3b96eb2f07-paradise.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-04-18T21:58:07.568Z","created_by":"5357ef811693be2118000001","created":"2017-04-18T21:58:07.568Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

In this tutorial I'm going to show you how to create a simple blog using Node.js and Cosmic.  This is going to be the fastest and most light-weight blog you have ever created.  Let's get started.

","featured_image":{"url":"https://cdn.cosmicjs.com/12112ea0-24a1-11e7-995a-2b3b96eb2f07-paradise.jpg","imgix_url":"https://imgix.cosmicjs.com/12112ea0-24a1-11e7-995a-2b3b96eb2f07-paradise.jpg"}}},{"_id":"58f4efcd046dc6c8310012c4","order":138,"slug":"feature-update-add-existing-media-to-the-content-editor","title":"Feature Update: Add Existing Media to the Content Editor","content":"

We've got a new feature to make adding existing media to your Objects even easier.  Now when you click the image icon on any content editor, you will see a folder icon to browse existing media in your Bucket.

Let us know if you have any questions about how to use this new feature.  Reach out to us on Twitter and join our Slack community to learn more about how Cosmic will help you build apps faster by going API-first with our CMS API.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"

We've got a new feature to make adding existing media to your Objects even easier.  Now when you click the image icon on any content editor, you will see a folder icon to browse existing media in your Bucket.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"c987ca90-238d-11e7-b310-a1f15bdfff38-media-added.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/c987ca90-238d-11e7-b310-a1f15bdfff38-media-added.jpg","imgix_url":"https://imgix.cosmicjs.com/c987ca90-238d-11e7-b310-a1f15bdfff38-media-added.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-04-17T16:39:41.790Z","created_by":"5357ef811693be2118000001","created":"2017-04-17T16:39:41.790Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

We've got a new feature to make adding existing media to your Objects even easier.  Now when you click the image icon on any content editor, you will see a folder icon to browse existing media in your Bucket.

","featured_image":{"url":"https://cdn.cosmicjs.com/c987ca90-238d-11e7-b310-a1f15bdfff38-media-added.jpg","imgix_url":"https://imgix.cosmicjs.com/c987ca90-238d-11e7-b310-a1f15bdfff38-media-added.jpg"}}},{"_id":"58f4ed29046dc6c8310011cc","order":139,"slug":"cosmic-js-users-hit-3000000-api-requests","title":"Cosmic Users Hit 3,000,000 API Requests","content":"

We wrote just a short time ago about the Cosmic Community exceeding 2,000,000 API Requests, and are now proud to announce the Community's expanded usage of the API-first cloud-based Content Management Platform has exceeded 3,000,000 API requests to date. This means that users from 90+ countries all over the world have accessed their content in some way 3,000,000 times using the newest and most efficient way to distribute content, through the cloud. 

Cosmic is an API-first CMS that works by decoupling content and code, letting web developers build applications in any programming language while simultaneously giving content editors an intuitive content editing experience. Cosmic Users avoid technical debt by skipping the installation, configuration, maintenance and security usually associated with legacy installed content management systems. By going API-first now, you will see the immediate benefit of saved project hours, timelines and costs. Don't let another project become an installed headache that takes away resources from future projects.

If you have not already joined the cloud revolution with Cosmic, Sign Up Today!

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"value":"

We're excited to announce that the Cosmic Community has exceeded 3 Million API Requests. 

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"e035a300-238a-11e7-b310-a1f15bdfff38-4ef29830-238a-11e7-b310-a1f15bdfff38-3M-api-requests (1).jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e035a300-238a-11e7-b310-a1f15bdfff38-4ef29830-238a-11e7-b310-a1f15bdfff38-3M-api-requests (1).jpg","imgix_url":"https://imgix.cosmicjs.com/e035a300-238a-11e7-b310-a1f15bdfff38-4ef29830-238a-11e7-b310-a1f15bdfff38-3M-api-requests (1).jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-04-17T16:28:25.237Z","created_by":"5716b504e9c686d006000073","created":"2017-04-17T16:28:25.237Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5716b504e9c686d006000073","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

We're excited to announce that the Cosmic Community has exceeded 3 Million API Requests. 

","featured_image":{"url":"https://cdn.cosmicjs.com/e035a300-238a-11e7-b310-a1f15bdfff38-4ef29830-238a-11e7-b310-a1f15bdfff38-3M-api-requests (1).jpg","imgix_url":"https://imgix.cosmicjs.com/e035a300-238a-11e7-b310-a1f15bdfff38-4ef29830-238a-11e7-b310-a1f15bdfff38-3M-api-requests (1).jpg"}}},{"_id":"58dc1f88e46161036e002122","order":140,"slug":"developer-spotlight-micah-walter","title":"Developer Spotlight: Micah Walter","content":"

A new Developer Hero joins us in our latest installment of the Cosmic Developer Spotlight Series. We sat down with Micah Walter, a developer in Brooklyn, New York who helps lead the charge on innovative app development for large institutions in the not-for-profit space, predominantly for museums. Micah has degrees from the Rochester Institute of Technology and Maryland Institute College of Art. Most recently he served as the Director of Digital & Emerging Media at Cooper Hewitt, Smithsonian Design Museumin New York City. Check him out on Twitter, and enjoy the Q/A.

Cosmic: How long have you been building software?
Micah: I've been making digital things for as long as I can remember. There was an Apple in my fifth grade classroom and my father bought a Xerox CPM machine for his business\r\nin the 80's (with Supercalc!). So, I've been tinkering with computers for about 30 years. 

More recently I've been working in museums and have had the opportunity to start building scalable websites and interactive projects. That's been going on for the last seven years or so.

What is your preferred development stack?
I really love PHP. I know, boring, old, PHP. But it works, it's easy to make things quickly, and it's become pretty rock solid over the years. Python is also a friend. Lately I've\r\nbeen tinkering with Go, since that's what the cool kids are doing... I must confess, I know maybe two functions in JavaScript. I'm also still very much a MySQL nerd. I guess I like things I can depend on.

What past projects are you most proud of and why?
I'm really proud of the work I was involved in at Cooper Hewitt Labs. We built a serious infrastructure for a museum with a small team and on staff time. Those systems are there\r\nfor the next generation to come in and build on top of. It's a good feeling to know I was part of something that will eventually evolve into something else.

What projects are you currently working on?
Right now I'm gearing up to do a long term project with another museum. We are aiming to use the same techniques we used at Cooper Hewitt to build a sound infrastructure, but in a much\r\nmore open kind of a way. Museums are funny places. You're constantly teetering between building things for the visitor with things for the museum staff. There's a tension there, which is actually a lot of fun to be in the middle of.

We’ve seen you’ve done a lot of CMS work in the past. What drew you to Cosmic? What made you want to go API-first?
It's still very much an experiment for me, but I think the philosophy is sound. As I mentioned before,\r\nthere are backends you build for the staff to use, and I think we are at a point where this has evolved into bells and whistles... Then there is the public version, which needs to be considered differently. An API-first methodology might help separate\r\nthese concerns, and I'm a fan of anything that helps do that.

What are some technologies you are excited about that you are using today, or want to learn more about?
I think serverless architectures like Amazon's Lambda are really promising, but I'm concerned about the vendor lock-in\r\nissue, which may be quicksand for a place like a museum. Apart from that, AI and Data Science are clearly the next enourmous industries to be a part of. Coming to terms with your self driving car's sensibility is gonna be something we'll all have\r\nto deal with at some point. 

Seriously though, I'm really interested in any kind of technology that can help people in a profound way. I'm not talking about Uber or "moonshot" ideas like Google's Balloons.. but technology that is cheap, bullet proof, and useful\r\nto those who need it the most.. that's what's I want to be involved in.

Cosmic Developer Spotlight Series

Developer Spotlight: Joe Tuson
Developer Spotlight: Coding Dojo
Developer Spotlight: Simple Media
Developer Spotlight: Jon Kalfayan
Developer Spotlight: Jon Bloomer

Cosmic is an API-first cloud-based content management platform that makes it easy to manage applications and content. If you have questions about the Cosmic API, please reach out to us on Twitter or join the community on Slack.

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"value":"

A new Developer Hero joins us in our latest installment of the Cosmic Developer Spotlight Series. We sat down with Micah Walter, a developer in Brooklyn, New York who helps lead the charge on innovative app development for large institutions in the not-for-profit space, predominantly museums.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"33ec3ae0-14c2-11e7-a09a-17f2d7a11dad-shutterstock_609283322.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/33ec3ae0-14c2-11e7-a09a-17f2d7a11dad-shutterstock_609283322.jpg","imgix_url":"https://imgix.cosmicjs.com/33ec3ae0-14c2-11e7-a09a-17f2d7a11dad-shutterstock_609283322.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-03-29T20:56:40.389Z","created_by":"5716b504e9c686d006000073","created":"2017-03-29T20:56:40.389Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

A new Developer Hero joins us in our latest installment of the Cosmic Developer Spotlight Series. We sat down with Micah Walter, a developer in Brooklyn, New York who helps lead the charge on innovative app development for large institutions in the not-for-profit space, predominantly museums.

","featured_image":{"url":"https://cdn.cosmicjs.com/33ec3ae0-14c2-11e7-a09a-17f2d7a11dad-shutterstock_609283322.jpg","imgix_url":"https://imgix.cosmicjs.com/33ec3ae0-14c2-11e7-a09a-17f2d7a11dad-shutterstock_609283322.jpg"}}},{"_id":"58dd08a41864ab667d0000da","order":141,"slug":"new-multiple-objects-metafield","title":"New Multiple Objects Metafield","content":"

We just released a new Metafield to help you build content for your apps faster and easier.  Now available for all Buckets, the new Multiple Object Relationship allows you to connect multiple Objects to an Object.  This enables you to create a one-to-many relationship in addition to the one-to-one relationship still available with the Single Object Relationship Metafield.

Add, edit and remove your connected Objects easily and reorder them with a simple drag and drop.

I hope you enjoy this new functionality and find it useful for your projects.  If you have any questions, reach out to us in Slack or on Twitter.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"

We just released a new Metafield to help you build content for your apps faster and easier.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"007576e0-154e-11e7-afb6-c5dedaeafa6f-multiple-object-metafield.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/007576e0-154e-11e7-afb6-c5dedaeafa6f-multiple-object-metafield.jpg","imgix_url":"https://imgix.cosmicjs.com/007576e0-154e-11e7-afb6-c5dedaeafa6f-multiple-object-metafield.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-03-30T13:31:16.762Z","created_by":"5357ef811693be2118000001","created":"2017-03-30T13:31:16.762Z","status":"published","modified_at":"2020-08-10T14:04:22.001Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

We just released a new Metafield to help you build content for your apps faster and easier.

","featured_image":{"url":"https://cdn.cosmicjs.com/007576e0-154e-11e7-afb6-c5dedaeafa6f-multiple-object-metafield.jpg","imgix_url":"https://imgix.cosmicjs.com/007576e0-154e-11e7-afb6-c5dedaeafa6f-multiple-object-metafield.jpg"}}},{"_id":"58d140b97fdbb5dd5e004af4","order":142,"slug":"how-to-build-a-jamstack-website","title":"How to Build a Jamstack Website","content":"

Update

Check out the Jamstack CMS knowledge base page to learn how you can use Cosmic to build a Jamstack site using Gatsby, Nuxt.js, Gridsome, and more.


\r\n\r\n\r\n


Continue reading for an example using Metalsmith.


Introduction to Jamstack

There’s been a recent surge of interest in static websites because they offer benefits including fast page loads and security.  And a new term for this new way of building websites, coined by the folks at Netlify, is JAMstack(not to be confused with the most addicting way to play the electric guitar). If you are new to this concept,\r\nthe JAMstack is comprised of a JavaScript-powered frontend for page interactions (J), APIs to connect to various APIs to get 3rd party functionality (A) and plain old Markup (HTML) which gets deployed to your instance (M).

Smashing Magazine has recently raved about creating their new JAMstack website and is currently undergoing a massive renovation of their existing web properties.  They are drop-kicking their bloated, pain-point-prone WordPress monolith that they currently maintain in favor of a JAMStack-powered website with help from Netlify and the Netlify Open-Source CMS.

Cosmic Jamming

In this article, I will show you how you can use Cosmic to deploy your own JAMstack website in just a few clicks.  When you JAM with Cosmic, you not only get the benefit of a fast, optimized static website, but your content is also available in the Cosmic API.  This gives other applications easy access to your content which could include landing pages, microsites, or native iOS and Android applications.

TL;DR

1. Install the Cosmic Static Website.
2. View the code on GitHub to see how the app is built.
3. Deploy your app to the Cosmic App Server by going to Your Bucket > Deploy Web App.
4. Set up your Webhooks located in Your Bucket > Webhooks.

Getting Started

We’re going to install the Static Website App available in the Cosmic App Store.  As you do this, you should also fork the repo to your own repository on GitHub.  This way you can make all the customizations you need to JAM in your own way.

Let’s take a look at how this application is put together.  To follow along, go to the GitHub repo.  Here is the app.js file:

// app.js\r\nvar buildSite = require('./build-site')\r\nbuildSite()\r\nvar express = require('express')\r\nvar app = express()\r\napp.set('port', process.env.PORT || 3000)\r\napp.use(express.static('build'))\r\napp.get('/rebuild-site', (req, res) => {\r\n  buildSite()\r\n  res.end('Site rebuilt!')\r\n})\r\napp.post('/rebuild-site', (req, res) => {\r\n  buildSite()\r\n  res.end('Site rebuilt!')\r\n})\r\napp.get('*', (req, res) => {\r\n  res.redirect('/404')\r\n})\r\napp.listen(app.get('port') || 3000, () => {\r\n  console.info('==> 🌎  Go to http://localhost:%s', app.get('port'))\r\n})

First we start with a Node.js application that includes a few routes:

/rebuild-site (both a GET and POST for convenience)
/404
/build (to keep all of our static website build files)

Next let's take a look at how the site is built.

// build-site.js\r\nvar Metalsmith = require('metalsmith')\r\nvar markdown = require('metalsmith-markdown')\r\nvar layouts = require('metalsmith-layouts')\r\nvar permalinks = require('metalsmith-permalinks')\r\nvar sass = require('metalsmith-sass')\r\nvar metalsmithPrism = require('metalsmith-prism');\r\nvar Cosmic = require('cosmicjs')\r\nvar async = require('async')\r\nvar mkdirp = require('mkdirp')\r\nvar del = require('del')\r\nvar mv = require('mv')\r\nvar createPage = require('./create-page')\r\nvar config = require('./config')\r\nmodule.exports = () => {\r\n  async.series([\r\n    // Create build-new folder\r\n    callback => {\r\n      mkdirp(__dirname + '/build-new', err => {\r\n        callback()\r\n      })\r\n    },\r\n    callback => {\r\n      Cosmic.getObjects(config.cosmicjs, (err, res) => {\r\n        var pages = res.objects.type.pages\r\n        var cosmic = res\r\n        // Create dynamic static pages\r\n        async.eachSeries(pages, (page, callbackEach) => {\r\n          var args = {\r\n            page: page,\r\n            pages: pages,\r\n            cosmic: cosmic\r\n          }\r\n          createPage(args, callbackEach)\r\n        }, () => {\r\n          // Create markdown static pages\r\n          var year = (new Date()).getFullYear() // make your footer year dynamic ;) \r\n          Metalsmith(__dirname)\r\n            .metadata({\r\n              cosmic: cosmic,\r\n              year: year\r\n            })\r\n            .source('./src')\r\n            .destination('./build-new')\r\n            .clean(false)\r\n            .use(sass({\r\n              outputDir: 'css/',\r\n              sourceMap: true,\r\n              sourceMapContents: true\r\n            }))\r\n            .use(markdown( { langPrefix: 'language-' } ))\r\n            .use(metalsmithPrism())\r\n            .use(permalinks())\r\n            .use(layouts({\r\n              engine: 'handlebars',\r\n              partials: 'layouts/partials'\r\n            }))\r\n            .build((err, files) => {\r\n              if (err) { throw err }\r\n              callback()\r\n            })\r\n        })\r\n      })\r\n    },\r\n    // Delete build folder\r\n    callback => {\r\n      del([__dirname + '/build']).then(() => {\r\n        callback()\r\n      })\r\n    },\r\n    // Move build-new to build folder\r\n    callback => {\r\n      mv(__dirname + '/build-new', __dirname + '/build', { mkdirp: true }, () => {\r\n        callback()\r\n      })\r\n    },\r\n    // Delete build-new folder\r\n    callback => {\r\n      del([__dirname + '/build-new']).then(() => {\r\n        // done\r\n      })\r\n    }\r\n  ])\r\n}

 This file holds all the magic, let's unpack what's happening here:
1. We're using Metalsmith to build our website files.  There's other build tools for this, but this is the best one (IMO) for JavaScript-built static sites.
2. The build-new folder is created as a temporary place for our new build.  This is so we don't get any down-time from users currently on the website.
3. Next we will get all Objects in our Cosmic Bucket using the Cosmic NPM Module and method Cosmic.getObjects
4. Then we will parse from our response all Pages.  Then begin a loop to create a new static page for each Page Object.
5. Each Page Object will then be passed to Metalsmith to build our Page.
6. After Metalsmith is done Jamming out our Markup to the build-new folder, the build folder is deleted.
7. Without blinking an eye the new build folder is created with the fresh build.

And that's it!  Your Cosmic content is now available in static form in JAMstack generated HTML files.  PLUS you have access to all of your content via the Cosmic API.  Also if you need someone who's not versed in Markdown to edit content, they can easily edit content via the WYSIWYG editors in the Cosmic Dashboard.

Using Webhooks for Automatic Rebuilds

Cosmic offers a great way to automatically rebuild your JAMstack static website on every content edit with Webhooks.  Setting up webhooks is easy.  Just go to Your Bucket > Dashboard > Webhooks and set the POST to the endpoint and action of your choice. In this example, you can set your Webhook to POST to [your-app-hostname]/rebuild-site.

In Conclusion

In this article we talked about a recent rebrand of static websites (Jamming sounds a lot more fun than static website building).  We talked about how you can install a JAMstack-enabled website in a few clicks using the Cosmic Static Website App. And we showed you how to automatically rebuild your website whenever content is changed via Cosmic Webhooks.  If you have any questions, join our Slack channel and reach out on Twitter.

","metafields":[{"children":null,"type":"object","title":"Author","key":"author","id":"NvqlD1sYT2","value":"5768b253163172890e00002c","object_type":"authors","object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"children":null,"type":"html-textarea","title":"Teaser","key":"teaser","id":"qBi5gS3nl2","value":"

In this article, I will show you how you can use Cosmic to deploy your own JAMstack website in just a few clicks.  When you JAM with Cosmic, you not only get the benefit of a fast, optimized static website, but your content is also available in the Cosmic API.

"},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"ZlG1VKIIez","value":"81abdb40-0e47-11e7-90ce-318e88698e0e-jamstack.jpg","url":"https://cdn.cosmicjs.com/81abdb40-0e47-11e7-90ce-318e88698e0e-jamstack.jpg","imgix_url":"https://imgix.cosmicjs.com/81abdb40-0e47-11e7-90ce-318e88698e0e-jamstack.jpg"},{"children":null,"type":"textarea","title":"SEO Meta Description","key":"seo_meta_description","id":"fPwf0lIVF8","value":""},{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"XVscCXAtKv","value":""}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-03-21T15:03:21.312Z","created_by":"5357ef811693be2118000001","created":"2017-03-21T15:03:21.312Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-08-31T18:09:51.615Z","unpublish_at":null,"metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

In this article, I will show you how you can use Cosmic to deploy your own JAMstack website in just a few clicks.  When you JAM with Cosmic, you not only get the benefit of a fast, optimized static website, but your content is also available in the Cosmic API.

","featured_image":{"url":"https://cdn.cosmicjs.com/81abdb40-0e47-11e7-90ce-318e88698e0e-jamstack.jpg","imgix_url":"https://imgix.cosmicjs.com/81abdb40-0e47-11e7-90ce-318e88698e0e-jamstack.jpg"},"seo_meta_description":"","published_date":""}},{"_id":"58bcad3c0fd3c95135003cce","order":143,"slug":"how-to-build-a-medium-backup-app","title":"How To Build A Medium Backup App","content":"

Medium has become the de-facto platform for publishing online content.  With its friction-less UI and viral suggestion engine, it's not hard to understand why it's one of the most popular blogging services.  I personally enjoy using Medium to post content to the Cosmic Medium publication.  Even though I trust Medium to store all of my content, I wanted a way to save my Medium posts as a backup,\r\nor to use in any other future applications.  When I couldn't find an available backup application, I decided to build one.  In this article, I'm going to show you how to build a Medium backup application using Node.js and Cosmic.

TL;DR
Check out the full source code on GitHub.
Install the app in minutes on Cosmic.

Getting Started
First, we'll need to go over some limitations.  Medium makes an RSS feed available to retrieve posts from any personal account, publication or a custom domain but it only allows you to retrieve the last 10 posts. Read this help article from Medium to find out which URL structure to use. It can be https://medium.com/feed/@yourusername or if you have a custom domain https://customdomain.com/feed. If you find that you are only getting partial articles, you may need to go into your Medium account settings and make sure RSS Feed is set to "Full".

Planning the App
We want to be able to do a couple things with our Medium backup app:

1. Manually Import posts from any feed url to our Cosmic Bucket.
2. Add / Remove Cron Jobs which will automatically look for new posts and import them into our Cosmic Bucket.

Building the App
In your text editor of choice, start by adding a package.json file:

{\r\n  "dependencies": {\r\n    "async": "^2.1.4",\r\n    "body-parser": "^1.15.2",\r\n    "cosmicjs": "^2.35.0",\r\n    "express": "^4.14.0",\r\n    "hogan-express": "^0.5.2",\r\n    "nodemon": "^1.11.0",\r\n    "request": "^2.79.0",\r\n    "slug": "^0.9.1",\r\n    "xml2js": "^0.4.17"\r\n  },\r\n  "scripts": {\r\n    "start": "node app.js",\r\n    "development": "nodemon app.js -e js, views/html"\r\n  }\r\n}

Then run the following command:

npm install

Next create a new file titled app.js and add the following:

// app.js\r\nvar express = require('express')\r\nvar async = require('async')\r\nvar bodyParser = require('body-parser')\r\nvar app = express()\r\napp.use(bodyParser.json())\r\nvar hogan = require('hogan-express')\r\napp.engine('html', hogan)\r\napp.set('port', (process.env.PORT || 3000))\r\napp.use('/', express.static(__dirname + '/public/'))\r\n// Config\r\nvar bucket_slug = process.env.COSMIC_BUCKET || 'medium-backup'\r\nvar config = {\r\n  cron_interval: process.env.CRON_INTERVAL || 3600000,\r\n  bucket: {\r\n    slug: bucket_slug,\r\n    read_key: process.env.COSMIC_READ_KEY || '',\r\n    write_key: process.env.COSMIC_WRITE_KEY || ''\r\n  },\r\n  url: process.env.URL || 'http://localhost:' + app.get('port')\r\n}\r\n// Routes\r\nrequire('./routes/index.js')(app, config)\r\nrequire('./routes/import-posts.js')(app, config, async)\r\nrequire('./routes/add-crons.js')(app, config, async)\r\nrequire('./routes/delete-cron.js')(app, config)\r\napp.listen(app.get('port'))

Notice we are using Express for our web framework, we have set our configuration to point to our Cosmic Bucket and added a few routes to handle our home page (index.js), our post import route and our routes to handle the cron adding and deleting.

Our index.js file is pretty simple.  Just add the following:

// index.js\r\nmodule.exports = function(app, config) {\r\n  app.get('/', function(req, res) {\r\n    var Cosmic = require('cosmicjs')\r\n    Cosmic.getObjectType(config, { type_slug: 'crons' }, function(err, response) {\r\n      res.locals.crons = response.objects.all\r\n      res.locals.bucket_slug = config.bucket.slug\r\n      res.render('index.html')\r\n    })\r\n  })\r\n}

Basically we are calling the Cosmic API to see if we have any crons saved, then rendering our index.html file located in the views folder. 

Import Posts Manually
Next, let's build the import posts functionality.  Create a file titled import-posts.js and add the following:

// import-posts.js\r\nmodule.exports = function(app, config, async) {\r\n  app.post('/import-posts', function(req, res) {\r\n    var Cosmic = require('cosmicjs')\r\n    var request = require('request')\r\n    var slug = require('slug')\r\n    var parseString = require('xml2js').parseString\r\n    var feed_url = req.body.feed_url\r\n    var bucket_slug = req.body.bucket_slug\r\n    var cosmic_config = {\r\n      bucket: {\r\n        slug: bucket_slug,\r\n        read_key: process.env.COSMIC_READ_KEY || '',\r\n        write_key: process.env.COSMIC_WRITE_KEY || ''\r\n      }\r\n    }\r\n    request(feed_url, function (error, response, body) {\r\n      if (!error && response.statusCode == 200) {\r\n        parseString(body, function (err, result) {\r\n          var posts = result.rss.channel[0].item\r\n          var posts_imported = []\r\n          async.eachSeries(posts, (post, callback) => {\r\n            var title = 'Post'\r\n            if (post.title)\r\n              title = post.title[0]\r\n            var content, published_at, modified_at, categories, created_by, medium_link;\r\n            if (post.description)\r\n              content = post.description[0]\r\n            if (post['content:encoded'])\r\n              content = post['content:encoded'][0]\r\n            if (post['pubDate'])\r\n              published_at = post['pubDate'][0]\r\n            if (post['atom:updated'])\r\n              modified_at = post['atom:updated'][0]\r\n            if (post['category'])\r\n              categories = post['category']\r\n            if (post['dc:creator'])\r\n              created_by = post['dc:creator'][0]\r\n            if (post['link'])\r\n              medium_link = post['link'][0]\r\n            // Test if object available\r\n            Cosmic.getObject(cosmic_config, { slug: slug(title) }, function(err, response) {\r\n              if (response && response.object) {\r\n                // already added\r\n                return callback()\r\n              } else {\r\n                var params = {\r\n                  title: title,\r\n                  slug: slug(title),\r\n                  content: content,\r\n                  type_slug: 'posts',\r\n                  write_key: config.bucket.write_key,\r\n                  metafields: [\r\n                    {\r\n                      key: 'published_at',\r\n                      title: 'Published At',\r\n                      value: published_at\r\n                    },\r\n                    {\r\n                      key: 'modified_at',\r\n                      title: 'Modified At',\r\n                      value: modified_at\r\n                    },\r\n                    {\r\n                      key: 'created_by',\r\n                      title: 'Created By',\r\n                      value: created_by\r\n                    },\r\n                    {\r\n                      key: 'medium_link',\r\n                      title: 'Medium Link',\r\n                      value: medium_link\r\n                    }\r\n                  ]\r\n                }\r\n                if (categories) {\r\n                  var tags = ''\r\n                  categories.forEach(category => {\r\n                    tags += category + ', '\r\n                  })\r\n                  params.metafields.push({\r\n                    key: 'tags',\r\n                    title: 'Tags',\r\n                    value: tags\r\n                  })\r\n                }\r\n                Cosmic.addObject(cosmic_config, params, function(err, response) {\r\n                  if (response)\r\n                    posts_imported.push(post)\r\n                  callback()\r\n                })\r\n              }\r\n            })\r\n          }, () => {\r\n            if (!posts_imported.length) {\r\n              res.status(500).json({ error: 'There was an error with this request.' })\r\n            }\r\n            res.json({\r\n              bucket_slug: config.bucket.slug,\r\n              posts: posts_imported\r\n            })\r\n          })\r\n        })\r\n      } else {\r\n        res.status(500).json({ error: 'feed_url' })\r\n      }\r\n    })\r\n  })\r\n}

This file does most of the work in our Medium backup app.  What's happening here is:
1. First, we post feed_url and bucket_slug.
2. The RSS feed is accessed with the request module and the data is parsed and converted to JSON for easy management.
3. Then we loop through all of the posts and check if the post already exists in our Cosmic Bucket.  If it exists, do nothing.  It it doesn't exist:
4. Create the object in our Cosmic Bucket

This saves the title, content (HTML also!), published date / time, author, Medium link and even tags to your Cosmic Bucket.

Import Posts Automatically
This is great for our manual import, next let's create the ability to automatically import my latest articles automatically on a timer.  Create a couple files titled add-crons.js and delete-cron.jsto add / remove our cron jobs:

// add-cron.js\r\nmodule.exports = function(app, config, async) {\r\n  app.post('/add-crons', function(req, res) {\r\n    var Cosmic = require('cosmicjs')\r\n    var slug = require('slug')\r\n    var crons = req.body\r\n    async.eachSeries(crons, (cron, callback) => {\r\n      var params = {\r\n        title: cron.title,\r\n        slug: slug(cron.title),\r\n        type_slug: 'crons',\r\n        write_key: config.bucket.write_key,\r\n        metafields: [\r\n          {\r\n            key: 'feed_url',\r\n            title: 'Feed URL',\r\n            value: cron.feed_url\r\n          },\r\n          {\r\n            key: 'bucket_slug',\r\n            title: 'Bucket Slug',\r\n            value: cron.bucket_slug\r\n          }\r\n        ]\r\n      }\r\n      Cosmic.addObject(config, params, function(err, response) {\r\n        callback()\r\n      })\r\n    }, () => {\r\n      res.json({\r\n        status: "success"\r\n      })\r\n    })\r\n  })\r\n}
// delete-cron.js\r\nmodule.exports = function(app, config, async) {\r\n  app.post('/delete-cron', function(req, res) {\r\n    var Cosmic = require('cosmicjs')\r\n    var slug = req.body.slug\r\n    var params = {\r\n      write_key: config.bucket.write_key,\r\n      slug: slug\r\n    }\r\n    Cosmic.deleteObject(config, params, function(err, response) {\r\n      res.json({\r\n        status: "success"\r\n      })\r\n    })\r\n  })\r\n}

Next create a file titled crons.js and add the following:

// crons.js\r\nmodule.exports = function(app, config, async) {\r\n  var Cosmic = require('cosmicjs')\r\n  var request = require('request')\r\n  var locals = {}\r\n  async.series([\r\n    callback => {\r\n      Cosmic.getObjectType(config, { type_slug: 'crons' }, function(err, response) {\r\n        locals.crons = response.objects.all\r\n        callback()\r\n      })\r\n    },\r\n    callback => {\r\n      if (locals.crons) {\r\n        async.eachSeries(locals.crons, (cron, callbackEach) => {\r\n          var feed_url = cron.metadata.feed_url\r\n          var bucket_slug = cron.metadata.bucket_slug\r\n          var params = {\r\n            feed_url: feed_url,\r\n            bucket_slug: bucket_slug \r\n          }\r\n          var options = {\r\n            url: config.url + '/import-posts',\r\n            json: params\r\n          }\r\n          request.post(options, (err, httpResponse, body) => {\r\n            if (err) {\r\n              return console.error('upload failed:', err)\r\n            }\r\n            console.log('Successful!  Server responded with:', body)\r\n            callbackEach()\r\n          });\r\n        })\r\n      }\r\n    }\r\n  ])\r\n}

What's happening is we check our Bucket for any Objects in the "Crons" Object Type.  If any are found, we loop through all of these and POST to the import-posts endpoint in our app and import the latest posts.

Next we will want to set this to run on a timer, change our app.js to look like the following (added the cron at the bottom):

// app.js\r\nvar express = require('express')\r\nvar async = require('async')\r\nvar bodyParser = require('body-parser')\r\nvar app = express()\r\napp.use(bodyParser.json())\r\nvar hogan = require('hogan-express')\r\napp.engine('html', hogan)\r\napp.set('port', (process.env.PORT || 3000))\r\napp.use('/', express.static(__dirname + '/public/'))\r\n// Config\r\nvar bucket_slug = process.env.COSMIC_BUCKET || 'medium-backup'\r\nvar config = {\r\n  cron_interval: process.env.CRON_INTERVAL || 3600000,\r\n  bucket: {\r\n    slug: bucket_slug,\r\n    read_key: process.env.COSMIC_READ_KEY || '',\r\n    write_key: process.env.COSMIC_WRITE_KEY || ''\r\n  },\r\n  url: process.env.URL || 'http://localhost:' + app.get('port')\r\n}\r\n// Routes\r\nrequire('./routes/index.js')(app, config)\r\nrequire('./routes/import-posts.js')(app, config, async)\r\nrequire('./routes/add-crons.js')(app, config, async)\r\nrequire('./routes/delete-cron.js')(app, config)\r\n// Crons\r\nvar getCrons = require('./routes/crons.js')\r\nsetInterval(() => getCrons(app, config, async), config.cron_interval) // every 60 minutes\r\napp.listen(app.get('port'))

And that's pretty much it for our processing files.  For the display and simple jQuery frontend check out the index.html file.

Conclusion
I hope you enjoyed this article on how to build a Medium backup app.  To begin backing up your Medium posts automatically, install this app on Cosmic in minutes.  Let me know if you have any questions about this app or Cosmic reach out\r\nto us on Twitter or join us in the Cosmic Slack channel.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"

Medium has become the de-facto platform for publishing online content.  In this article, I'm going to show you how to build a Medium backup application using Node.js and Cosmic.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"c517c850-02f6-11e7-99fa-cfd1d1962461-medium.png","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/c517c850-02f6-11e7-99fa-cfd1d1962461-medium.png","imgix_url":"https://imgix.cosmicjs.com/c517c850-02f6-11e7-99fa-cfd1d1962461-medium.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-03-06T00:28:44.785Z","created_by":"5357ef811693be2118000001","created":"2017-03-07T00:28:44.785Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

Medium has become the de-facto platform for publishing online content.  In this article, I'm going to show you how to build a Medium backup application using Node.js and Cosmic.

","featured_image":{"url":"https://cdn.cosmicjs.com/c517c850-02f6-11e7-99fa-cfd1d1962461-medium.png","imgix_url":"https://imgix.cosmicjs.com/c517c850-02f6-11e7-99fa-cfd1d1962461-medium.png"}}},{"_id":"58b9afe796e2871b11004e12","order":144,"slug":"developer-spotlight-jon-kalfayan","title":"Developer Spotlight: Jon Kalfayan","content":"

The Developer Hero returns in this latest installment of the Cosmic Developer Spotlight Series. We sat down with Jon Kalfayan, a developer in Palo Alto, California who helps lead the charge on innovative app development for a product-driven company. Check him out on GitHub,\r\nand enjoy the Q/A.


1. How long have you been building software?
I've loved tinkering with computers my whole life, but it's only been about 6 years since my first "Hello World". At first I dabbled in a bit of iOS and frontend development, but since finishing my undergraduate degree in 2015 I've\r\nbeen doing a lot of Java backend development.


2. What is your preferred development stack?
IntelliJ is life, or at least it's where I live most of the time. It had a bit of a learning curve to start but now I'm not sure how I ever relied on emacs for Java projects in school! In the terminal, I prefer zsh (with oh-my-zsh) due to all\r\nthe cool integrated shortcuts and commands. I mostly use git from the terminal and have a slew of aliases to diff, commit, rebase, and accomplish other things. For my bash/python scripting needs, I usually hop in Vim or Sublime Text. Also I've recently\r\nbeen converted from vagrant to docker for my test environment setup. Been loving docker, and am curious to explore docker-compose and docker-swarm for some more complicated environment setups.


3. Can you talk a little about why you chose Cosmic as your CMS and how it fits into your development process?
Being mostly a java infrastructure developer, it was a bit daunting to step into the world of JS and web development. I've had the desire to create my own blog for a fairly long time, but one of my concerns was with how I could reasonably manage content for it. Cosmic fit the bill perfectly, and let me focus my time on learning the basics of React and Nodejs. Leveraging the Cosmic API was a breeze and I love the out-of-the-box management tools. It made adding and editing my blog posts stress free, allowing me to focus on the content and design of the site itself. I feel like I've barely scratched the surface with what Cosmic has to offer, but I'm excited to learn and use it more!


4. What past projects are you most proud of and why?
A project I was really happy to contribute to was the open source Instant Answers portion of DuckDuckGo. It's a search engine that is ad-free and has a very welcoming open source community. It was surprisingly straightforward to dive into the code\r\nbase and contribute simple PRs. Eventually, my Perl chops improved and I was improving and maintaining more complicated Instant Answers. All in all, it was refreshing to find an open source project with an encouraging community for new contributors.

Also, learning React along with Cosmic to make a blog has been awesome! Despite Java and React being VERY different tools, many of the good practices of quality Java\r\ncode have strong parallels with good React development. For example, the importance of separating a component’s state from its business logic. I definitely feel like understanding multiple development stacks is beneficial for any software developer.


5.  What are some technologies you are excited about that you are using today, or want to learn more about?
Recently, integrating much of the new Java 8 APIs into existing code has been fun. The streams API lets you more declaratively code solutions to problems, rather than the classic imperative Java style. I'm impressed the work done by the Java community\r\nto add new features, all while still maintaining backwards compatibility. Also very excited to learn more about web development in general, especially in regard to my web design skills which can definitely use some work :) As a side interest, I've\r\nrecently begun tinkering with a raspberry pi. The end goal is to set it up to programmatically play video games, maybe with some fancy AI logic? Cause come on that'd be pretty cool!

Cosmic is an API-first cloud-based content management platform that makes it easy to manage applications and content. If you have questions about the Cosmic API, please reach out to us on Twitter or join the community on Slack.


","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"value":"

The Developer Hero returns in this latest installment of the Cosmic Developer Spotlight Series.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"860f0050-003b-11e7-9a49-6975a5effa38-dev-hero.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/860f0050-003b-11e7-9a49-6975a5effa38-dev-hero.jpg","imgix_url":"https://imgix.cosmicjs.com/860f0050-003b-11e7-9a49-6975a5effa38-dev-hero.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-03-03T18:03:19.814Z","created_by":"5716b504e9c686d006000073","created":"2017-03-03T18:03:19.814Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

The Developer Hero returns in this latest installment of the Cosmic Developer Spotlight Series.

","featured_image":{"url":"https://cdn.cosmicjs.com/860f0050-003b-11e7-9a49-6975a5effa38-dev-hero.jpg","imgix_url":"https://imgix.cosmicjs.com/860f0050-003b-11e7-9a49-6975a5effa38-dev-hero.jpg"}}},{"_id":"58ade7a5d441604b56000037","order":145,"slug":"cosmic-js-referral-program","title":"Cosmic Referral Program","content":"

Today we're announcing our referral program which rewards you for spreading the word about Cosmic.  It's our way of showing our appreciation for you when you tell friends and colleagues about us.

How to participate
1. Go to your account settings page to get your referral link (screenshot below).
2. Use the share buttons to tell friends and followers on your social channels.
3. Add your referral link to your website or blog (hopefully it's powered by Cosmic 😉 ).

How it works
For every referral that signs up and upgrades a Bucket plan, you receive $10 towards any purchase on Cosmic.

We're very grateful to you for choosing Cosmic as your CMS API.  We know that not everyone is as forward-thinking with their application stack... yet.  With your help, we can help more people build apps faster, manage content easier and work together more enjoyably using Cosmic.

Click here to get your referral link.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"

Today we're announcing our referral program which rewards you for spreading the word about Cosmic.  It's our way of showing our appreciation for you when you tell friends and colleagues about us.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"1370e010-f93b-11e6-b967-f10a87cd789e-cosmicjs-referral.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/1370e010-f93b-11e6-b967-f10a87cd789e-cosmicjs-referral.jpg","imgix_url":"https://imgix.cosmicjs.com/1370e010-f93b-11e6-b967-f10a87cd789e-cosmicjs-referral.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-02-22T19:33:57.950Z","created_by":"5357ef811693be2118000001","created":"2017-02-22T19:33:57.950Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

Today we're announcing our referral program which rewards you for spreading the word about Cosmic.  It's our way of showing our appreciation for you when you tell friends and colleagues about us.

","featured_image":{"url":"https://cdn.cosmicjs.com/1370e010-f93b-11e6-b967-f10a87cd789e-cosmicjs-referral.jpg","imgix_url":"https://imgix.cosmicjs.com/1370e010-f93b-11e6-b967-f10a87cd789e-cosmicjs-referral.jpg"}}},{"_id":"58ac5b55cab58ae4360006d4","order":146,"slug":"get-more-with-the-updated-free-plan","title":"Get More With the Updated Free Plan","content":"

Cosmic is on a mission to make your job as a development team faster and easier.  With that in mind we're excited to give you more with the Free Bucket Plan.  The additional features will help you scale your projects and give you more right out of the box.  Now when you signup for Cosmic at the Free Plan level:

1. You have full access to Business Plan features including Webhooks and Localization.
2. Before you were limited to 2 users to each Free Bucket, now you can have as many as 3 users.
3. You used to be limited to one Free Bucket at a time, now you can have as many as 5 Free Buckets at a time.
4. You have 14 days to upgrade your Free Bucket to any paid plan.

We are happy to make it easier for you to get started building apps faster using Cosmic.  If you have any questions about our new pricing please join our Slack community and reach out to us on Twitter.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"

We're excited to give you more with the Free plan.  Our new Free Plan makes it easier to try out additional features and get more right from the start.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"9e842420-f849-11e6-a8b8-d11da76a56e1-free.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/9e842420-f849-11e6-a8b8-d11da76a56e1-free.jpg","imgix_url":"https://imgix.cosmicjs.com/9e842420-f849-11e6-a8b8-d11da76a56e1-free.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-02-21T15:23:01.924Z","created_by":"5357ef811693be2118000001","created":"2017-02-21T15:23:01.924Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

We're excited to give you more with the Free plan.  Our new Free Plan makes it easier to try out additional features and get more right from the start.

","featured_image":{"url":"https://cdn.cosmicjs.com/9e842420-f849-11e6-a8b8-d11da76a56e1-free.jpg","imgix_url":"https://imgix.cosmicjs.com/9e842420-f849-11e6-a8b8-d11da76a56e1-free.jpg"}}},{"_id":"58ab41df5f2d66b436000033","order":147,"slug":"new-search-feature","title":"New Search Feature","content":"

We've just added a new feature that makes it easier to find Objects in your Bucket.  This is especially useful if you have a lot of Objects and you need to find them fast.  Just look for the search icon in your Dashboard header.


If you have any questions for us, join our Slack community, or reach out to us on Twitter.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"

Happy Presidents Day (or Not My Presidents Day for some)!  We've just added a new feature that makes it easier to find Objects in your Bucket.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"3b29da20-f7a2-11e6-be51-9b681e64ce98-gw-search-feature.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/3b29da20-f7a2-11e6-be51-9b681e64ce98-gw-search-feature.jpg","imgix_url":"https://imgix.cosmicjs.com/3b29da20-f7a2-11e6-be51-9b681e64ce98-gw-search-feature.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-02-20T19:22:07.802Z","created_by":"5357ef811693be2118000001","created":"2017-02-20T19:22:07.802Z","status":"published","modified_at":"2020-08-10T14:04:22.001Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

Happy Presidents Day (or Not My Presidents Day for some)!  We've just added a new feature that makes it easier to find Objects in your Bucket.

","featured_image":{"url":"https://cdn.cosmicjs.com/3b29da20-f7a2-11e6-be51-9b681e64ce98-gw-search-feature.jpg","imgix_url":"https://imgix.cosmicjs.com/3b29da20-f7a2-11e6-be51-9b681e64ce98-gw-search-feature.jpg"}}},{"_id":"58a202e29f7b5f2d26001236","order":148,"slug":"introducing-the-graphql-api","title":"Introducing the GraphQL API","content":"

We are excited to announce the addition of our GraphQL API to help you build content-powered apps faster and more efficiently.  The Cosmic community has been very supportive of adding GraphQL as an alternative to our REST API and we are happy to now make this available.  Check out the new documentation to learn more about GraphQL methods to get your content.

What is GraphQL?
If you don’t know about GraphQL, it has been gaining popularity since Facebook open-sourced the project a couple of years ago.  It is an API alternative to the traditional REST-ful approach to fetching data from an endpoint.

Why is GraphQL so Special?
GraphQL gives you the power to be more efficient with your API calls by allowing clients to query only specific values, limiting the amount of data returned.  From the official website: it “gives clients the power to ask for exactly what they need and nothing more”.  For instance here is a response from our (still awesome) REST API:
https://api.cosmicjs.com/v1/creative-agency/object/about?hide_metafields=true&pretty=true

And here is the same response specifying which fields to return using GraphQL (if you just need to get title and content):



So you can see the difference in returned data.  This is more declarative and more empowering for every client accessing the API.  The new Cosmic GraphQL API gives you the ability to access just what you need from your Buckets and nothing\r\nyou don’t.  This is especially great for mobile when every saved network byte counts.

We hope you enjoy the addition of GraphQL to help you build apps faster, now with less unused data.  Learn more about the Cosmic GraphQL API in the documentation.  Let us know if you have any questions by joining the community on Slack or reaching out on Twitter.

","metafields":[{"children":null,"type":"object","title":"Author","key":"author","id":"fRi0GSLocl","value":"5768b253163172890e00002c","object_type":"authors","object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"children":null,"type":"html-textarea","title":"Teaser","key":"teaser","id":"nlpFl26U4v","value":"

We are excited to announce the addition of our GraphQL API to help you get content from your Cosmic Buckets faster and more efficiently.  The Cosmic community has been very supportive of adding GraphQL as an alternative to our REST API and we are happy to now make this available.

"},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"WvylSsZTtl","value":"7886dc10-f248-11e6-b422-43c28e5dfa6b-graphql.jpg","url":"https://cdn.cosmicjs.com/7886dc10-f248-11e6-b422-43c28e5dfa6b-graphql.jpg","imgix_url":"https://imgix.cosmicjs.com/7886dc10-f248-11e6-b422-43c28e5dfa6b-graphql.jpg"},{"children":null,"type":"textarea","title":"SEO Meta Description","key":"seo_meta_description","id":"X5ifkCg6xl","value":""},{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"Of8YRMON3c","value":""}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-02-14T19:02:58.122Z","created_by":"5357ef811693be2118000001","created":"2017-02-14T19:02:58.122Z","status":"published","modified_at":"2022-10-06T13:42:25.540Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-10-06T13:42:25.540Z","unpublish_at":null,"metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

We are excited to announce the addition of our GraphQL API to help you get content from your Cosmic Buckets faster and more efficiently.  The Cosmic community has been very supportive of adding GraphQL as an alternative to our REST API and we are happy to now make this available.

","featured_image":{"url":"https://cdn.cosmicjs.com/7886dc10-f248-11e6-b422-43c28e5dfa6b-graphql.jpg","imgix_url":"https://imgix.cosmicjs.com/7886dc10-f248-11e6-b422-43c28e5dfa6b-graphql.jpg"},"seo_meta_description":"","published_date":""}},{"_id":"589496a10b32dcfd64000302","order":149,"slug":"api-usage-passes-2000000","title":"API Usage Passes 2,000,000","content":"

Today is a happy day for us.  We have passed 2,000,000 total requests to the Cosmic API.  That means that people from all over the world have accessed their content in some way 2,000,000 times using the newest and most efficient way to distribute content, through the cloud.

We are on a mission to help every digital team be more efficient by providing a simple API to power content for their website or application.  And this milestone provides some validation for that goal.  We are grateful to all our users who are joining us on this journey.

If you have not already joined the cloud revolution with us, we would love to have you join!

Thank you!
Tony and Carson
Founders

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"

We have a mission to help every digital team be more efficient by providing a simple API to power content for their website or application.  And this milestone provides some validation for that goal.  We are grateful to all our users who are joining us on this journey.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"f5b7ca00-ea1e-11e6-a726-bfd644d07af4-cosmic-js-api-usage-2-mili.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/f5b7ca00-ea1e-11e6-a726-bfd644d07af4-cosmic-js-api-usage-2-mili.jpg","imgix_url":"https://imgix.cosmicjs.com/f5b7ca00-ea1e-11e6-a726-bfd644d07af4-cosmic-js-api-usage-2-mili.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-02-03T14:41:37.016Z","created_by":"5357ef811693be2118000001","created":"2017-02-03T14:41:37.016Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

We have a mission to help every digital team be more efficient by providing a simple API to power content for their website or application.  And this milestone provides some validation for that goal.  We are grateful to all our users who are joining us on this journey.

","featured_image":{"url":"https://cdn.cosmicjs.com/f5b7ca00-ea1e-11e6-a726-bfd644d07af4-cosmic-js-api-usage-2-mili.jpg","imgix_url":"https://imgix.cosmicjs.com/f5b7ca00-ea1e-11e6-a726-bfd644d07af4-cosmic-js-api-usage-2-mili.jpg"}}},{"_id":"589414e1264ff67b61000036","order":150,"slug":"now-add-your-bucket-thumbnail","title":"Now Add Your Bucket Thumbnail","content":"

We're always striving to make the job of the developer and content editor faster and easier.  With this in mind, we've just released the ability to add thumbnail images to your Bucket.

To add a thumbnail image to your Bucket simply go to your Bucket media area and select the settings button on your media row, then click Set as Bucket Thumbnail.

For our users with a growing list of Buckets, this small change really makes it easier to spot the Bucket that you want to edit.

If you have any questions, please reach out to us in our Slack channel, or on Twitter.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"

We're always striving to make the job of the developer and content editor faster and easier.  Now you can add thumbnails to your Buckets.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"4e103650-e9d5-11e6-a4a8-0721aa97d7ea-thumb.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/4e103650-e9d5-11e6-a4a8-0721aa97d7ea-thumb.jpg","imgix_url":"https://imgix.cosmicjs.com/4e103650-e9d5-11e6-a4a8-0721aa97d7ea-thumb.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-02-03T05:28:01.863Z","created_by":"5357ef811693be2118000001","created":"2017-02-03T05:28:01.863Z","status":"published","modified_at":"2020-08-10T14:04:22.001Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

We're always striving to make the job of the developer and content editor faster and easier.  Now you can add thumbnails to your Buckets.

","featured_image":{"url":"https://cdn.cosmicjs.com/4e103650-e9d5-11e6-a4a8-0721aa97d7ea-thumb.jpg","imgix_url":"https://imgix.cosmicjs.com/4e103650-e9d5-11e6-a4a8-0721aa97d7ea-thumb.jpg"}}},{"_id":"588f7df6386a2eb513000ee8","order":151,"slug":"developer-and-editor-toggle-views-now-available","title":"Developer and Editor Toggle Views Now Available","content":"

We've just rolled out a feature for Admins and Developers to be able to preview the Object editing experience for Editors. To use the new feature, simply navigate to your Cosmic Dashboard and click to edit any existing Object.  You will notice that you now have a toggle switch to switch between Developer and Editor views.

Simply toggle the switch from Developer to Editor to view the Object through the eyes of the Editor Role. You'll notice items such as the API endpoint and Metafields options disappear, allowing Editors to remain focused on content management. 

Toggling between Developer and Editor can help you visualize what your team members will see in the Cosmic Dashboard once they receive access to your bucket. You can easily set up User Roles within the Users Tab, and now you can even see User Roles Previews from the Object Toggle. 

Cosmic is an API-first cloud-based content management platform that makes it easy to manage applications and content. If you have questions about the Cosmic API, please reach out to the founders on Twitter or Slack.

Carson Gibbons is the Co-Founder & CMO of Cosmic, an API-first Cloud-based Content Management Platform that decouples content from code, allowing devs to build slick apps and websites in any programming language they want.

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"value":"

Introducing the Developer / Editor Toggle View to your Cosmic Dashboard. 

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"7c3079e0-e715-11e6-924f-1379d96c2b4d-shutterstock_542223019.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/7c3079e0-e715-11e6-924f-1379d96c2b4d-shutterstock_542223019.jpg","imgix_url":"https://imgix.cosmicjs.com/7c3079e0-e715-11e6-924f-1379d96c2b4d-shutterstock_542223019.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-01-30T17:55:02.727Z","created_by":"5716b504e9c686d006000073","created":"2017-01-30T17:55:02.727Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5716b504e9c686d006000073","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

Introducing the Developer / Editor Toggle View to your Cosmic Dashboard. 

","featured_image":{"url":"https://cdn.cosmicjs.com/7c3079e0-e715-11e6-924f-1379d96c2b4d-shutterstock_542223019.jpg","imgix_url":"https://imgix.cosmicjs.com/7c3079e0-e715-11e6-924f-1379d96c2b4d-shutterstock_542223019.jpg"}}},{"_id":"588929f6d837db4c46000a47","order":152,"slug":"introducing-cosmic-js-enterprise-built-for-business","title":"Introducing Cosmic Enterprise: Built for Business","content":"

Cosmic, an API-first cloud-based CMS API, is debuting its new pricing and service tiers for Enterprise teams. Built for the speed of business, the new tier combines all of the great features found on paid tiers within the platform plus enterprise-level features such as Automatic Backups, Dedicated Infrastructure and coverage by our Enterprise-class SLA.


Cosmic is debuting the new product tier at the request of corporations and government agencies looking to transition their content management stacks from legacy installed systems to cloud-based content delivery via CMS API. 

Enterprise plans remain flexible for a la carte additions to be scoped on an individual basis. Clients will have expanded use of the CMS API and data storage, plus premium support from the Cosmic Enterprise Team. For more information on Enterprise Plans with Cosmic, contact us today. 

Cosmic is an API-first cloud-based content management platform that makes it easy to manage applications and content. If you have questions about the Cosmic API, please reach out to the founders on Twitter or Slack.

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"value":"

Cosmic debutes its Enterprise Plans for Content Management and Application Development. 

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"9eb7b560-e34f-11e6-ab4d-a938dc04426d-08c6d9f0-e34f-11e6-ad4a-7bd78427fea1-cosmicjs-enterprise (1).jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/9eb7b560-e34f-11e6-ab4d-a938dc04426d-08c6d9f0-e34f-11e6-ad4a-7bd78427fea1-cosmicjs-enterprise (1).jpg","imgix_url":"https://imgix.cosmicjs.com/9eb7b560-e34f-11e6-ab4d-a938dc04426d-08c6d9f0-e34f-11e6-ad4a-7bd78427fea1-cosmicjs-enterprise (1).jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-01-25T22:43:02.497Z","created_by":"5716b504e9c686d006000073","created":"2017-01-25T22:43:02.497Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

Cosmic debutes its Enterprise Plans for Content Management and Application Development. 

","featured_image":{"url":"https://cdn.cosmicjs.com/9eb7b560-e34f-11e6-ab4d-a938dc04426d-08c6d9f0-e34f-11e6-ad4a-7bd78427fea1-cosmicjs-enterprise (1).jpg","imgix_url":"https://imgix.cosmicjs.com/9eb7b560-e34f-11e6-ab4d-a938dc04426d-08c6d9f0-e34f-11e6-ad4a-7bd78427fea1-cosmicjs-enterprise (1).jpg"}}},{"_id":"58766acff3dcb91553001816","order":153,"slug":"managing-users-who-manage-content","title":"Managing Users Who Manage Content","content":"

This week Cosmic debuted its 4th User Type: Contributor. We wrote about it in yesterday's blog and are now publishing this blog to detail all four role types within the Cosmic Dashboard: Admin | Developer | Editor | Contributor. 

User types is a crucial feature set for any cloud-based CMS, and we have accrued these role types based on our "Build | Measure | Learn" approach to our iterative feedback loop when talking to users who have signed up for the platform. We originally\r\npresented the platform with three options (Admin, Developer, Editor). We heard many use case scenarios in which an Admin or Editor would want to extend a Contributor role to someone simply for drafting purposes. 

Admin
You own it, you're probably paying for it, and you have the ultimate control. Add a Bucket, Delete a Bucket, Add Users, Download Buckets, you get the keys to the kingdom. This role type is generally an Agency Principal, Project Manager Lead, Lead\r\nDeveloper and similar role types that would oversee a web application build.

Adding an Admin

Admin CMS View

Developer
The keys to the API kingdom are yours. Build applications, upgrade buckets and track usage. The developer has access to everything that an Admin does, with the exception of access to Settings. 

Add a Developer

Developer CMS View

Editor
The Editor Role is similar to a Contributor Role in that you can add and draft content, but also have authorization to publish content, delete content and oversee the bucket's content as a whole. As a frame of reference, I am an Editor for Cosmic\r\nJS and can easily login, draft and publish blog posts without the confusion of Admin and Developer features being present.

Add an Editor

Editor CMS View

Contributor
Feel free to contribute, but that's about it. Once you've been granted access to a bucket, you can draft content for review by an Editor, Admin or Developer on your Bucket.

Add a Contributor

Contributor CMS View

Bucket Users Overview

Editing a Bucket User's Contributor Role

Cosmic makes it easy to clarify even which portions of your bucket are applicable for Contributor access and viewing. If I am a Bucket Admin and have a freelance writer on assignment for a blog, I can extend a Contributor Role to said person for the "Posts" within my Bucket so that he or she can draft blog posts for my review. 

Cosmic is an API-first cloud-based content management platform that makes it easy to manage applications and content. If you have questions about the Cosmic API, please reach out to the founders on Twitter or Slack. 

Carson Gibbons is the Co-Founder & CMO of Cosmic, an API-first Cloud-based Content Management Platform that decouples content from code, allowing devs to build slick apps and websites in any programming language they want.

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"value":"

This blog details all four role types within the Cosmic Dashboard: Admin | Developer | Editor | Contributor. 

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"14f5b200-d823-11e6-b078-535e435f4ad7-shutterstock_503352379.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/14f5b200-d823-11e6-b078-535e435f4ad7-shutterstock_503352379.jpg","imgix_url":"https://imgix.cosmicjs.com/14f5b200-d823-11e6-b078-535e435f4ad7-shutterstock_503352379.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-01-11T17:26:38.805Z","created_by":"5716b504e9c686d006000073","created":"2017-01-11T17:26:38.808Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

This blog details all four role types within the Cosmic Dashboard: Admin | Developer | Editor | Contributor. 

","featured_image":{"url":"https://cdn.cosmicjs.com/14f5b200-d823-11e6-b078-535e435f4ad7-shutterstock_503352379.jpg","imgix_url":"https://imgix.cosmicjs.com/14f5b200-d823-11e6-b078-535e435f4ad7-shutterstock_503352379.jpg"}}},{"_id":"5872bb6e587f351040000351","order":154,"slug":"contributor-role-now-available","title":"Contributor Role Now Available","content":"

Today we are announcing a new role, Contributor, which gives you the power to collaborate on content in an entirely new way.

An admin can invite contributors to do the following:

  1. Add content to a specific Object Type.
  2. Add and edit their own content within a specific Object Type.
  3. Save own content as Draft.

This allows admins the ability to create publications with featured authors and control what content gets published.  We’re really excited to announce this new feature and hope you enjoy the added collaboration power it offers.

Try it Out

1. Login to your Cosmic account
2. Select Your Bucket and go to Your Bucket > Users
3. Add a user with the Contributor role (You must have at least one Object Type added to your Bucket)


What the new contributor sees:

If you have any questions, please reach out to us on our Slack Channel or on Twitter.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"

Today we are announcing a new role, Contributor, which gives you the power to collaborate on content in an entirely new way.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"eb629400-d73a-11e6-b1e2-9d75e802ed6b-collaborators.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/eb629400-d73a-11e6-b1e2-9d75e802ed6b-collaborators.jpg","imgix_url":"https://imgix.cosmicjs.com/eb629400-d73a-11e6-b1e2-9d75e802ed6b-collaborators.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-01-10T22:21:34.011Z","created_by":"5357ef811693be2118000001","created":"2017-01-10T22:21:34.011Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

Today we are announcing a new role, Contributor, which gives you the power to collaborate on content in an entirely new way.

","featured_image":{"url":"https://cdn.cosmicjs.com/eb629400-d73a-11e6-b1e2-9d75e802ed6b-collaborators.jpg","imgix_url":"https://imgix.cosmicjs.com/eb629400-d73a-11e6-b1e2-9d75e802ed6b-collaborators.jpg"}}},{"_id":"5870a10cde496d581e0e9bf6","order":155,"slug":"three-reasons-why-agencies-should-be-using-a-cms-api","title":"Three Reasons Why Agencies Should be Using a CMS API","content":"

Age Old Issue: Speed | Quality | Cost

The golden triangle of project success or failure rests on the three angles of A) Speed B) Quality C) Cost. When it comes to interactive agencies, they may be promising (at best) two of the three triangle points, but how likely are they to fulfill that promise? Speed + Cost naturally rules out Quality, right? And Quality naturally rules out cost if speed is at all involved. In my former life of scoping projects for an interactive agency, clients who had hard deadlines for app launches would be charged more. Clients whose websites served as their brick and mortar needed extremely high-quality work, which affected speed and cost. This is true in at least the old working model of installed content management systems, but the Golden Triangle doesn’t take into account agencies that are managing websites and applications using a CMS API.

We wrote a blog awhile back titled The Cosmic Stack. The article details how developers bypass the installed Content Management System + Web Hosting process for the apps and websites they are building. When you use Cosmic as your CMS API, your application stack is simplified down to the Cosmic CMS API and a code repository.

Speed

By removing the client-side server from the application stack, speed is ‘sped up’ immensely simply from the dynamics of your new content management stack. Depending on how you decide to build your new application, speed has been seen to almost double in certain cases (according to PageSpeed Insights from\r\nGoogle Dev). Recently we measured a legacy WordPress website on its installed content management system. It ranked at a 50 on a scale of 100 when summoned from its content box and myriad of servers. That same website built on Cosmic ended up being\r\nranked at a 94.

Quality

Quality isn’t compromised! Because Cosmic works by decoupling content from code, you don’t sacrifice on either side. A CMS API simply saves time and bandwidth by delivering content seamlessly through the powerful Cosmic CMS API, which\r\ndelivers JSON particles to any web-connected device, regardless of your application’s programming language. Your pages are rendered with the original code and the updated content, but never compromises the quality of the interactive application\r\nyou have built.

Cost

Agencies typically bill out on either a project basis (total # of estimated hours X billable rate) or retainer basis (total # of agreed monthly hours X discounted billable rate). Because developers no longer have to build out a backend Content Management System on top of an antiquated installed legacy system, many devs report a time savings of up to 75% of their original project timeline estimates. That saves the client money, which saves the agency money. As far as the cost of using a CMS API, billing is largely a la carte. Cosmic costs on a usage basis, as well as a la carte add-on items that devs can use if needed. For a full view of Cosmic pricing, visit our Pricing Page.

Helpful Resources

Cosmic is an API-first cloud-based content management platform that makes it easy to manage applications and content. If you have questions about the Cosmic API, please reach out to the founders on Twitter or Slack.

To read more about how developers are using the Cosmic CMS API to build slicks apps and websites, read our Developer Spotlight Series with 1) Jon Bloomer 2) Simple Media.

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"value":"

The golden triangle of project success or failure rests on the three angles of A) Speed B) Quality C) Cost. When it comes to interactive agencies, they may be promising (at best) two of the three triangle points, but how likely are they to fulfill that promise?

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"e8d1fce0-d4af-11e6-8565-b915a510b0dd-api-cms-agencies.jpeg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e8d1fce0-d4af-11e6-8565-b915a510b0dd-api-cms-agencies.jpeg","imgix_url":"https://imgix.cosmicjs.com/e8d1fce0-d4af-11e6-8565-b915a510b0dd-api-cms-agencies.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-01-07T08:04:28.704Z","created_by":"5357ef811693be2118000001","created":"2017-01-07T08:04:28.704Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

The golden triangle of project success or failure rests on the three angles of A) Speed B) Quality C) Cost. When it comes to interactive agencies, they may be promising (at best) two of the three triangle points, but how likely are they to fulfill that promise?

","featured_image":{"url":"https://cdn.cosmicjs.com/e8d1fce0-d4af-11e6-8565-b915a510b0dd-api-cms-agencies.jpeg","imgix_url":"https://imgix.cosmicjs.com/e8d1fce0-d4af-11e6-8565-b915a510b0dd-api-cms-agencies.jpeg"}}},{"_id":"5870a095de496d581e0e9be9","order":156,"slug":"developer-spotlight-coding-dojo","title":"Developer Spotlight: Coding Dojo","content":"

We’ve recently been publishing articles in our Cosmic Developer Spotlight Series, the series that documents how developers are using the Cosmic CMS API all around the world. Cosmic has one main goal through the use of its JSON API: to make the developer Hero. In that effort, Cosmic is announcing its partnership with the Dallas branch of the developer bootcamp Coding Dojo, a 14-week program that educates a class of Dallas-based developers in three development stacks.



Coding Dojo provides curriculum, software, hardware, instructors, class sessions, conference rooms, thought-leadership and networking events as part of its added-value to its students and community. They also partner with organizations that would hire\r\nits students upon graduation. Coding Dojo boasts a 94% placement of its trained developers within 6 months of graduation, and feeds talent into programs like Amazon, Chase, Disney, Microsoft, Google and Expedia through its alumni partnerships.



Coding Dojo and Cosmic are partnering initially to present Cosmic co-founder & CEO Tony Spiro as a thought leader host at an upcoming Javascript in the Wild Meetup.\r\nCoding Dojo participants will get to network with Cosmic as well as other local thought leaders, and will then be invited to use a promo code to unlock Cosmic Credits as they start developing test buckets. Students will be encouraged to utilize\r\nthe Cosmic CMS API to satisfy coursework, as well as for personal use and exploration as individual and\r\ngroup projects take shape throughout the 14-week program. A month after the initial networking session, the Cosmic team will return to Coding Dojo to follow up on all students that have taken advantage of the promo code to further explore the Cosmic\r\nJS CMS API, provide an in-depth demo and facilitate a Q/A session. The event, promo code and subsequent demo is delivered to Coding Dojo students in the MEAN Stack section of their course.

We will continue to document this partnership in our Developer Spotlight Series, and are looking forward\r\nto providing real-world use-case scenarios faced by junior developers today.

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"value":"

Coding Dojo provides curriculum, software, hardware, instructors, class sessions, conference rooms, thought-leadership and networking events as part of its added-value to its students and community. They also partner with organizations that would hire its students upon graduation.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"9dc6b6f0-d4af-11e6-8565-b915a510b0dd-coding-dojo.png","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/9dc6b6f0-d4af-11e6-8565-b915a510b0dd-coding-dojo.png","imgix_url":"https://imgix.cosmicjs.com/9dc6b6f0-d4af-11e6-8565-b915a510b0dd-coding-dojo.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-01-05T08:02:29.593Z","created_by":"5357ef811693be2118000001","created":"2017-01-05T08:02:29.593Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

Coding Dojo provides curriculum, software, hardware, instructors, class sessions, conference rooms, thought-leadership and networking events as part of its added-value to its students and community. They also partner with organizations that would hire its students upon graduation.

","featured_image":{"url":"https://cdn.cosmicjs.com/9dc6b6f0-d4af-11e6-8565-b915a510b0dd-coding-dojo.png","imgix_url":"https://imgix.cosmicjs.com/9dc6b6f0-d4af-11e6-8565-b915a510b0dd-coding-dojo.png"}}},{"_id":"5870a04dde496d581e0e9bdb","order":157,"slug":"developer-spotlight-joe-tuson","title":"Developer Spotlight: Joe Tuson","content":"

Developers are the star of the show when it comes to building great apps using Cosmic. Like every great musician, each developer is different in their approach and style. In our Developer Spotlight Series we shine a light on the creative process of a developer using\r\nCosmic to create content-powered apps. This spotlight features Joe Tuson, a front-end web developer out of the UK.

Cosmic: How long have you been building software?
Joe: Around 5 and a half years. I took a leap of faith and transitioned into web-dev/software from Architecture/Design Engineering in 2011. I learned to code on the job pulling my weight as a graphic designer until I could take on client projects with a LAMP stack.

What is your preferred development stack?
Nooo! Don’t make me pick one…! :P I love different stacks for different reasons, and I just get a deep visceral satisfaction when matching projects with the most appropriate stack. Fundamentally, I do tend to gravitate towards Ruby on\r\nRails for the heavier, more complex projects, and Node.js for the punchier, lightweight ones. However, common threads will always be:

If I were ninja enough I would probably add React/Redux to this list, as I love how it works and what it can do, but as yet I have not cut my teeth using them on any real projects to include it among my core skills.

Tony’s noticed that a lot of software developers are musicians (like him). You are musician as well, correct? What do you think the correlation is between music and software?
How do you know?? Have you been following me? It’s an interesting one, because having asked other musician/devs I get a different answer every time. Both pursuits are fundamentally creative, therefore I think for me it’s having the power to\r\ncreate something from nothing, and always having something to work towards. If there is one thing I’m sure about, with development I will never be satisfied, and will always be inspired to learn something new. The feeling of overcoming a problem or mastering a riff — that moment of realisation when it clicks is addictive as heck.

Can you talk a little about why you chose Cosmic as your CMS and how it fits into your development process?
Cosmic really is a breath of fresh air — both for me and my clients. One thing I hate most is opinionated tools; ones that refuse to let you work how you want. Developers themselves are inherently opinionated creatures anyway, so I don’t want\r\nto have to butt-heads with a CMS that promises the world… but only if you know *this* funky language, and conform to *that* framework, and oh, your app is failing because the CMS can’t find some illegible config file in some deep dark directory — —\r\noh but guess what — not the one you’re thinking, that would be way too easy. By the way, you just broke something else because you updated your DB software… *sigh. Ok — but surely it will be worth it in the end because although\r\nthe learning curve is steep, there will be performance gains..?? Erm… not always.

I found Cosmic removes those, and many other headaches by *just working*, right out the box. Plus, it is blazingly fast. The sheer relief I felt when I realised I could just get on with coding my clients’ app the way I wanted to, without making\r\ncompromises, with a bespoke stack tailored to the use case — — pure catharsis. I was like a kid in a sweet shop (or a guitarist in a guitar shop ;) )

How could it not fit into my development process? — it’s a simple API-driven content delivery service that is as powerful and flexible as you need it to be. Sure — when you begin a project you’re probably not going to end up using\r\nit exactly the way you initially intended, but what project *ever* doesn’t evolve and grow to fit the clients’ changing needs? I found that every time the goal posts changed, Cosmic was able to respond gracefully in a way that didn’t\r\ncompromise best-practice, while still having satisfied my client.

Can you talk a little about how you think Cosmic helps your team and your clients?
As a freelancer, my team is just me. However, using Cosmic helps me by providing the muscle power of a full-stack team covering all bases; databasing, hosting, content/asset delivery, as well as the CMS. This allows me to focus on front-end, spending\r\nmore time polishing my speciality and less time scratching my head while chewing up budget with config, backend, and working out how the heck I’m going to reliably deliver complex asset resources for todays multi-platform web.

From a client’s point of view it has a very intuitive UI with all the familiarity of most common CMS tools, but without the huge learning curve or set up cost. When there was confusion, I found I never had to explain anything twice. Plus — Tony\r\nand the Cosmic team provide absolutely *sterling* technical help. Furthermore, it’s incredibly priced, so it’s a no-brainer and an easy sell when pitching to the client.

What are some technologies you are excited about that you are using today, or want to learn more about?
Gosh — I suppose I ought to say WebGL, virtual reality, machine learning, and some sort of big data web-universe. But to be honest I’m not, as clever as they are. I still get most excited about clever tools that solve simple problems well.\r\nI believe React.js and its peripheral technologies have some serious legs and I’m looking forward to mastering them. I’ve also heard whispers about terms like “Universal Apps” where a single code base, probably HTML5, serves all\r\nplatforms and can take advantage of native services & hardware acceleration; build something once and watch it flourish on any & every device. Unfortunately I don’t see this gaining real traction for a while yet. I also get excited about\r\nthe Internet of Things and would love to spend some real time getting to grips with the crossover between mechatronics, UI and real-time. More simply — I am excited to see what the advent of HTTP/2 brings, and how that will further catalyse the\r\nsingle-page app movement.

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"value":"

In our Developer Spotlight Series we shine a light on the creative process of a developer using Cosmic to create content-powered apps. This spotlight features Joe Tuson, a front-end web developer out of the UK.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"75ceef00-d4af-11e6-8565-b915a510b0dd-joe-tuson.jpeg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/75ceef00-d4af-11e6-8565-b915a510b0dd-joe-tuson.jpeg","imgix_url":"https://imgix.cosmicjs.com/75ceef00-d4af-11e6-8565-b915a510b0dd-joe-tuson.jpeg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2017-01-04T08:01:17.424Z","created_by":"5357ef811693be2118000001","created":"2017-01-04T08:01:17.424Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

In our Developer Spotlight Series we shine a light on the creative process of a developer using Cosmic to create content-powered apps. This spotlight features Joe Tuson, a front-end web developer out of the UK.

","featured_image":{"url":"https://cdn.cosmicjs.com/75ceef00-d4af-11e6-8565-b915a510b0dd-joe-tuson.jpeg","imgix_url":"https://imgix.cosmicjs.com/75ceef00-d4af-11e6-8565-b915a510b0dd-joe-tuson.jpeg"}}},{"_id":"5857fe1eb431084c0a0000aa","order":158,"slug":"introducing-metadata","title":"Introducing Metadata","content":"

Extendible Objects is one of the most powerful features of Cosmic.  And this powerful feature just became more intuitive with a new property added to all endpoint responses: Metadata.

The new Metadata property provides you with the quickest way to get the value from your Metafields.  It gives you the key / value pair for the extended data on your Object.  For example, before you had to go into Metafields to get values, and this required you to sort through the array of Metafields. Now you would simply go into Metadata to get the value.

Metafields = Form Building, Metadata = Value Fetching

Metafields is the way the form is rendered in the Cosmic Dashboard and includes title, key and type.  Metadata extracts only the value of the data that you need.  Metafields are still available on every endpoint, but now you can hide them by adding hide_metafields=true to the end of your endpoint URL.  This will be the default behavior for future major API releases.

Benefits

With Metadata available on all Cosmic API endpoints, building and extending your content is faster and easier than ever before. Plus each endpoint has a much smaller data payload with Metafields hidden. If you have any questions, please reach out to us on our Slack Channel or on Twitter.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"

Extendible Objects is one of the most powerful features of Cosmic.  And this powerful feature just became more intuitive with a new property added to all endpoint responses: Metadata.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"80680100-c603-11e6-90d5-47a447a38682-meta-laptop.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/80680100-c603-11e6-90d5-47a447a38682-meta-laptop.jpg","imgix_url":"https://imgix.cosmicjs.com/80680100-c603-11e6-90d5-47a447a38682-meta-laptop.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2016-12-19T15:34:54.308Z","created_by":"5357ef811693be2118000001","created":"2016-12-19T15:34:54.308Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

Extendible Objects is one of the most powerful features of Cosmic.  And this powerful feature just became more intuitive with a new property added to all endpoint responses: Metadata.

","featured_image":{"url":"https://cdn.cosmicjs.com/80680100-c603-11e6-90d5-47a447a38682-meta-laptop.jpg","imgix_url":"https://imgix.cosmicjs.com/80680100-c603-11e6-90d5-47a447a38682-meta-laptop.jpg"}}},{"_id":"584f68e1161a4a6a2500001b","order":159,"slug":"introducing-the-new-content-editor","title":"Introducing the New Content Editor","content":"

We are excited to introduce the all-new Cosmic content editor.  We think you'll agree it's a huge improvement over our old editor and makes adding API-powered content to your websites and apps easier and more enjoyable.  Some of the new functionality includes:

1. Sticky Toolbar

The new Cosmic editor comes with a sticky toolbar that travels with you as you build your content.  No longer do you have to scroll back up to the top of the page to add enhancements like rich text, links, images, video and more.

2. Better Code Editing

Most WYSIWYG (What You See is What You Get) editors leave much to be desired with their HTML editor.  But our new editor makes adding HTML more developer-friendly.  Code mode features including multi-cursor select and easy-to-read\r\nhighlighting make editing code a breeze.

3. Emojis 😀 !

The new Cosmic content editor comes with emoji support for when you just can't express yourself through words alone.

These are just the highlights of the new Cosmic content editor.  It's overall a much better editor making for a delightful content editing experience.  Sign up or log in to your Cosmic account to experience all of the features of the new editor.  And if you have any questions, feel free to reach out to us in our Slack community or on Twitter.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"

We are excited to introduce the all-new Cosmic content editor which is a huge improvement over our old editor.  We think you'll agree it makes adding API-powered content to your websites and apps easier and more enjoyable.  Here’s a list of some of the new functionality...

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"7a02a770-c144-11e6-bbef-4d03d1f79d49-new-content-editor.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/7a02a770-c144-11e6-bbef-4d03d1f79d49-new-content-editor.jpg","imgix_url":"https://imgix.cosmicjs.com/7a02a770-c144-11e6-bbef-4d03d1f79d49-new-content-editor.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2016-12-13T03:20:01.495Z","created_by":"5357ef811693be2118000001","created":"2016-12-13T03:20:01.495Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

We are excited to introduce the all-new Cosmic content editor which is a huge improvement over our old editor.  We think you'll agree it makes adding API-powered content to your websites and apps easier and more enjoyable.  Here’s a list of some of the new functionality...

","featured_image":{"url":"https://cdn.cosmicjs.com/7a02a770-c144-11e6-bbef-4d03d1f79d49-new-content-editor.jpg","imgix_url":"https://imgix.cosmicjs.com/7a02a770-c144-11e6-bbef-4d03d1f79d49-new-content-editor.jpg"}}},{"_id":"5849af9b499c64a05a000e9f","order":160,"slug":"developer-spotlight-simple-media","title":"Developer Spotlight: Simple Media ","content":"


An API without a developer ecosystem is just an acronym. The developers in the Cosmic Community bring life to the platform, powering content through the Cosmic API to build and manage websites and applications. In keeping with the mantra, Cosmic introduces its second installment of its Developer Spotlight Blog series, sitting down with Nick Bonanno, Founder & CEO of Simple Media, a boutique digital micro-services agency focused on bringing the future of application development to businesses that wouldn't otherwise have access to these resources through typical agency relationships.

Cosmic: When did Simple Media start?
Nick: Founded in 2007.

Are you still doing what you started doing? What does the agency currently offer / do?
Amy (my business partner and wife) and I were freelancing web design (WordPress), Search Engine Optimization and Pay Per Click when we first started Simple Media in 2007.  We currently offer brand strategy, creative, UI/UX design, results-oriented marketing and advertising.

Can you talk a little about your creative and development process as it relates to your digital projects?
What sets us apart is the simplicity in our approach, which results in nimble, cost-effective and on-time project execution.  We always lead with strategy, and follow with execution.  Clients find it very easy to work with us, as we walk them through each phase of the project, and help them connect the dots in their digital strategy.

How did Cosmic (as your API CMS) fit into that development process?
Cosmic doesn’t just fit into our dev process, but our overall philosophy.  It’s simple to deploy, it’s completely customizable, it allows our clients to have a custom CMS for a small monthly hosting fee, plus it’s secure and blazing fast.

Does Cosmic help your team and your clients? Does it help one of those parties more than the other?
I would say it’s equally beneficial.  It allows us as the agency to have a seamless process between the design phase and the back end development phase, and it allows our clients to choose what portions of their website they want to make dynamic vs. static, based on their content update requirements.


What do you like about managing content in the Cosmic dashboard? Part II: Vs. other legacy installed systems?
Cosmic provides the essentials for clients to easily manage their content, without the clutter that’s typically found in most installed Content Management Systems.  The User Interface is very clean and easily navigable.

There’s been a lot of push back on installed content management systems recently in favor of API-based approaches to building digital products.  How do you think the way agencies are developing software is changing and how does it affect you as an agency owner?
We have experienced this firsthand.  The biggest challenge with deploying web applications is the time of execution, which translates into higher development costs.  Having a solution like Cosmic allows us – the agency -  to be much more versatile and nimble.


Check Simple Media out through its website to see how Nick and his team are building micro-service digital applications at scale through the Cosmic API.  Cosmic is an API-first cloud-based content management platform that makes it easy to manage applications and content. If you have questions about the Cosmic API, please reach out to the founders on Twitter or Slack.

Carson Gibbons is the Co-Founder & CMO of Cosmic, an API-first Cloud-based Content Management Platform that decouples content from code, allowing devs to build slick apps and websites in any programming language they want.

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"value":"

Nick Bonanno, Founder & CEO of Simple Media, a boutique digital micro-services agency, sits down with Carson from Cosmic. 

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"7e939600-bd7a-11e6-95d9-69995ea5288b-Screen Shot 2016-12-08 at 1.13.36 PM.png","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/7e939600-bd7a-11e6-95d9-69995ea5288b-Screen Shot 2016-12-08 at 1.13.36 PM.png","imgix_url":"https://imgix.cosmicjs.com/7e939600-bd7a-11e6-95d9-69995ea5288b-Screen Shot 2016-12-08 at 1.13.36 PM.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2016-12-08T19:08:11.803Z","created_by":"5357ef811693be2118000001","created":"2016-12-08T19:08:11.803Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

Nick Bonanno, Founder & CEO of Simple Media, a boutique digital micro-services agency, sits down with Carson from Cosmic. 

","featured_image":{"url":"https://cdn.cosmicjs.com/7e939600-bd7a-11e6-95d9-69995ea5288b-Screen Shot 2016-12-08 at 1.13.36 PM.png","imgix_url":"https://imgix.cosmicjs.com/7e939600-bd7a-11e6-95d9-69995ea5288b-Screen Shot 2016-12-08 at 1.13.36 PM.png"}}},{"_id":"58462942b3d3a42929000da5","order":161,"slug":"how-to-build-a-nextjs-react-universal-app","title":"How to Build a Next.js React Universal App","content":"


Next.js is an amazing new addition to the React open-source ecosystem.  It is “a minimalistic framework for universal server-rendered React applications” that makes the process of building these types of applications much faster and easier.  Recently I demoed a new app on the Cosmic Apps page that is built using the Next.js framework.  I’ve built a few React Universal apps from scratch before and I found taking the Next.js route to speed things along quite a bit.  And adding content management capability from Cosmic to the Next.js structure was very intuitive.

In this tutorial I’m going to show you how I built the Next.js application and integrated content powered by Cosmic.  This full app is available on the Cosmic Apps page for you to download, hack, install and deploy live.

Getting Started

Let’s get started by creating our app and installing next:

mkdir next.js-website
cd next.js-website
yarn add next

Creating Pages

Now lets create a new folder to hold our pages.

mkdir pages

With Next.js, any page that we add to our pages folder will be available at its corresponding url.  So index.js will be available at / and about.js will be found at /about and so on.  Let’s first create our index.js file.  Add the following to index.js:

import React from 'react'\r\nexport default class Home extends React.Component {\r\n  render () {\r\n    return <div>Hello World</div>\r\n  }\r\n}

Now let’s start our next server to see our page:

next

Navigate to http://localhost:3000 to see our Hello World example.  Next let’s add another page to show our about page content.  In a file titled about.js add:

import React from 'react'\r\nexport default class Home extends React.Component {\r\n  render () {\r\n    return <div>About me</div>\r\n  }\r\n}

Then run next again.  Now go to http://localhost:3000/about to see this page.

We could hard code the content for all of our pages, but for our purposes, let’s hook up the Cosmic API so we can let our team add and edit content using the Cosmic CMS API.  For each page we want to be able to pull that specific page from the Cosmic API and serve the content to our Next.js application.

Adding Cosmic-Powered Content

First install the Cosmic NPM module:

yarn add cosmicjs

Then create a new folder titled models and add the following to a file titled cosmic.js:

const config = {
  bucket: {
    slug: 'nextjs-website' // add your bucket slug here
  }
}
import Cosmic from 'cosmicjs'
export default {
  getPage(slug) {
    const data = new Promise(resolve => {
      Cosmic.getObject(config, { slug }, (err, res) => {
        resolve(res)
      })
    })
    return data
  }
}

So the purpose of this piece of code is to take whatever slug is supplied to the \"getPage\" function and render the Cosmic Object.

Dynamic Pages

Let’s create a basic page structure for all of our pages.  Create a folder titled \"templates\" and addd the following file titled basic-page.js:

import React from 'react'\r\nexport default class BasicPage extends React.Component {\r\n  render() {\r\n    const page = this.props.page\r\n    return (\r\n      <div>\r\n        <main>\r\n          <h1>{page.title}</h1>\r\n          <div dangerouslySetInnerHTML={{__html: page.content}}/>\r\n        </main>\r\n      </div>\r\n    )\r\n  }\r\n}\r\n\r\n

Next let’s edit our index.js file to include the following:

import React from 'react'\r\nimport BasicPage from '../templates/basic-page'\r\nimport Cosmic from '../models/cosmic'\r\nexport default class Home extends React.Component {\r\n  static async getInitialProps () {\r\n    return await Cosmic.getPage('home')\r\n  }\r\n  render () {\r\n    const page = this.props.object\r\n    return <BasicPage page={page}/>\r\n  }\r\n}


Now we have created a basic page template that will render the page title and content.  And in our index.js file, before rendering, the getInitialProps function will fetch the page content from the Cosmic API.  Now for our about page, all we need to do is change the slug.  about.js now looks like this:

import React from 'react'
import BasicPage from '../templates/basic-page'
import Cosmic from '../models/cosmic'
export default class Home extends React.Component {
  static async getInitialProps () {
    return await Cosmic.getPage('about')
  }
  render () {
    const page = this.props.object
    return <BasicPage page={page}/>
  }
}

Now run the application:

next

Navigate to / and /about and notice that the Cosmic content comes through not only when you view source (server side) but it also renders on the client as a React Universal Application.  

In Conclusion

So when creating a React universal application using the Next.js framework there was a lot of stuff I didn’t have to do:  I didn’t have to set up react-router.  I didn’t have to set up Flux or Redux to manage state.  I didn’t have to do any server-side node.js coding.  I didn't have to do a lot (or any!) webpack configuration for hot-reloading and bundle routing.  So yea, I saved a TON of time on boilerplate setup and config using the Next.js framework to accomplish my universal React needs.  It really is a remarkable piece of tech and I’m looking forward to see where it will go next (no pun intended).

I hope you enjoyed this tutorial.  If you have any questions about setting up your Cosmic-powered Next.js Universal App reach our to us in our Slack community or on Twitter.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"

Next.js is an amazing new addition to the React open-source ecosystem.  It is “a minimalistic framework for universal server-rendered React applications” that makes the process of building these types of applications much faster and easier.  Recently I demoed a new app on the Cosmic app page that is built using the Next.js framework.  I’ve built a few React Universal apps from scratch before and I found taking the Next.js route to speed things along quite a bit.  And adding content management capability from Cosmic was very intuitive.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"c15305f0-bb6a-11e6-a321-e16ddb4fbbcc-cosmicjs-react-nextjs.jpeg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/c15305f0-bb6a-11e6-a321-e16ddb4fbbcc-cosmicjs-react-nextjs.jpeg","imgix_url":"https://imgix.cosmicjs.com/c15305f0-bb6a-11e6-a321-e16ddb4fbbcc-cosmicjs-react-nextjs.jpeg"},{"value":"import React from 'react'\nexport default class Home extends React.Component {\n render () {\n return <div>Hello World</div>\n }\n}","key":"home","title":"home","type":"textarea","children":null},{"value":"import React from 'react'\nexport default class Home extends React.Component {\n render () {\n return <div>About me</div>\n }\n}","key":"about","title":"about","type":"textarea","children":null},{"value":"import React from 'react'\nexport default class BasicPage extends React.Component {\n render() {\n const page = this.props.page\n return (\n <div>\n <main>\n <h1>{page.title}</h1>\n <div dangerouslySetInnerHTML={{__html: page.content}}/>\n </main>\n </div>\n )\n }\n}\n","key":"pages","title":"pages","type":"textarea","children":null},{"value":"import React from 'react'\nimport BasicPage from '../templates/basic-page'\nimport Cosmic from '../models/cosmic'\nexport default class Home extends React.Component {\n static async getInitialProps () {\n return await Cosmic.getPage('home')\n }\n render () {\n const page = this.props.object\n return <BasicPage page={page}/>\n }\n}","key":"basic_page","title":"basic page","type":"textarea","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2016-12-06T02:58:10.878Z","created_by":"5357ef811693be2118000001","created":"2016-12-06T02:58:10.878Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

Next.js is an amazing new addition to the React open-source ecosystem.  It is “a minimalistic framework for universal server-rendered React applications” that makes the process of building these types of applications much faster and easier.  Recently I demoed a new app on the Cosmic app page that is built using the Next.js framework.  I’ve built a few React Universal apps from scratch before and I found taking the Next.js route to speed things along quite a bit.  And adding content management capability from Cosmic was very intuitive.

","featured_image":{"url":"https://cdn.cosmicjs.com/c15305f0-bb6a-11e6-a321-e16ddb4fbbcc-cosmicjs-react-nextjs.jpeg","imgix_url":"https://imgix.cosmicjs.com/c15305f0-bb6a-11e6-a321-e16ddb4fbbcc-cosmicjs-react-nextjs.jpeg"},"home":"import React from 'react'\nexport default class Home extends React.Component {\n render () {\n return <div>Hello World</div>\n }\n}","about":"import React from 'react'\nexport default class Home extends React.Component {\n render () {\n return <div>About me</div>\n }\n}","pages":"import React from 'react'\nexport default class BasicPage extends React.Component {\n render() {\n const page = this.props.page\n return (\n <div>\n <main>\n <h1>{page.title}</h1>\n <div dangerouslySetInnerHTML={{__html: page.content}}/>\n </main>\n </div>\n )\n }\n}\n","basic_page":"import React from 'react'\nimport BasicPage from '../templates/basic-page'\nimport Cosmic from '../models/cosmic'\nexport default class Home extends React.Component {\n static async getInitialProps () {\n return await Cosmic.getPage('home')\n }\n render () {\n const page = this.props.object\n return <BasicPage page={page}/>\n }\n}"}},{"_id":"58424704250da4e17b001c8b","order":162,"slug":"how-to-upload-media-to-your-bucket-using-the-cosmic-js-api","title":"How to Upload Media to Your Bucket Using the Cosmic API","content":"


In this short tutorial I’m going to show you how to:

1. Upload an image to your Cosmic Bucket via the Cosmic API.
2. Alter your image using the powerful Imgix processing service (free with every Cosmic Bucket)
3. Add the uploaded image as a Metafield to an Object in your Bucket

Getting Started

Sign up for Cosmic to create your own Bucket or just follow along with the examples.  

To start, let's create a simple HTML form to upload our media.

<html>\r\n  <body>\r\n    <form action=\"https://api.cosmicjs.com/v1/bucket-slug/media\" method=\"post\" enctype=\"multipart/form-data\">\r\n      <input type=\"file\" name=\"media\" />\r\n      <input type=\"submit\" value=\"Upload!\" />\r\n    </form>   \r\n  </body>\r\n</html>
Next let's add a file and let it rip.  Notice we now have data to use for data fetching / storing:
{\r\n  \"media\": {\r\n    \"name\": \"57319310-b914-11e6-acef-b1b7e94fa195-earth.png\",\r\n    \"original_name\": \"earth.png\",\r\n    \"size\": 1024912,\r\n    \"type\": \"image/png\",\r\n    \"bucket\": \"5839c67f0d3201c114000004\",\r\n    \"created\": \"2016-12-03T04:52:49.516Z\",\r\n    \"location\": \"https://www.cosmicjs.com/uploads\",\r\n    \"url\": \"https://www.cosmicjs.com/uploads/57319310-b914-11e6-acef-b1b7e94fa195-earth.png\",\r\n    \"imgix_url\": \"https://cosmicjs.imgix.net/57319310-b914-11e6-acef-b1b7e94fa195-earth.png\",\r\n  }\r\n}

The Power of Imgix

After we POST our media to our Cosmic Bucket, one of the pieces of data returned is an Imgix URL.  Imgix gives us powerful image processing capability on the fly.  By simply adding query parameters to the end of the Imgix url, we have the power to resize, crop, add filters and more to our uploaded images.  For example, to resize this image to 2X mobile size just add \"?w=640\" at the end of the url:

https://cosmicjs.imgix.net/57319310-b914-11e6-acef-b1b7e94fa195-earth.png?w=640

This makes creating light-weight responsive websites much easier because now we don't have to upload multiple images for different devices.  All we do now is program the url to serve the size we want.  Browse the Imgix docs to see all the capabilities at your fingertips.  Imgix is included free with every Cosmic account.

Adding the Uploaded Image to an Object

After adding our image to our Cosmic Bucket we may want to add it to an Object.  To do this we'll simply take the \"name\" value returned after we POST our media and add it as a file Metafield value and POST this to our Add Object API endpoint:

POST /v1/:your-bucket-slug/add-object
{\r\n  \"title\": \"New Object\",\r\n  \"slug\": \"new-object\",\r\n  \"type_slug\": \"tests\",\r\n  \"content\": \"\",\r\n  \"metafields\": [{\r\n    \"type\": \"file\",\r\n    \"title\": \"Image\",\r\n    \"key\": \"image\",\r\n    \"value\": \"57319310-b914-11e6-acef-b1b7e94fa195-earth.png\"\r\n  }]\r\n}

Now when we go into our Cosmic Bucket we'll notice that the \"Tests\" Object Type has a new Object titled \"New Object\" with our newly uploaded file as a file Metafield.

Conclusion

Cosmic makes it really easy to add dynamic content to any website or application.  In this tutorial I showed you how you can use the Cosmic API to add media, process images using the available Imgix processing URL then save that image to an Object in our Bucket for easy editing later.  To learn more about how Cosmic makes it easy to store media and power content for your websites and apps, check out the Documentation page.

I hope you enjoyed this tutorial.  If you have any questions or would like to learn more about how Cosmic can help you build content-powered apps faster and easier join Cosmic on Slack and reach out to us on Twitter.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"

In this short tutorial I’m going to show you how to:

1. Upload an image to your Cosmic Bucket via the Cosmic API.
2. Alter your image using the powerful Imgix processing service (free with every Cosmic Bucket)
3. Add the uploaded image as a Metafield to an Object in your Bucket

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"ca1a5c50-ba3f-11e6-9cad-31c6a87e340f-upload-devices.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/ca1a5c50-ba3f-11e6-9cad-31c6a87e340f-upload-devices.jpg","imgix_url":"https://imgix.cosmicjs.com/ca1a5c50-ba3f-11e6-9cad-31c6a87e340f-upload-devices.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2016-12-03T04:16:04.901Z","created_by":"5357ef811693be2118000001","created":"2016-12-03T04:16:04.901Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

In this short tutorial I’m going to show you how to:

1. Upload an image to your Cosmic Bucket via the Cosmic API.
2. Alter your image using the powerful Imgix processing service (free with every Cosmic Bucket)
3. Add the uploaded image as a Metafield to an Object in your Bucket

","featured_image":{"url":"https://cdn.cosmicjs.com/ca1a5c50-ba3f-11e6-9cad-31c6a87e340f-upload-devices.jpg","imgix_url":"https://imgix.cosmicjs.com/ca1a5c50-ba3f-11e6-9cad-31c6a87e340f-upload-devices.jpg"}}},{"_id":"5833b0cfd5c3216a39002b6b","order":163,"slug":"how-to-build-a-nodejs-user-management-app","title":"How to Build a Node.js User Management App","content":"

\"Managing

In this tutorial I’m going to show you how to build a user management app using Node.js and Cosmic as a Node.js CMS.

TL;DR

View the full source code on GitHub
View the Demo
Why Use Cosmic as Your Node.js CMS?

The app will include the following pages:

Getting Started

Create a file titled app-server.js file and add the following:

\">

This is the entry point of our app and serves to initialize everything we need for our user management app.  We’re using Express for the Node.js framework, Hogan Express for view rendering from Mustache templates.  Express Session is used to initialize and save sessions.

We are going to have a couple partials available in our templates, header and footer as all of our pages will share these.

Know Your Routes

Next let’s take a look at index.js in our routes folder.

\">

Here we have all of our routes.

Logging In

Let’s take a look at home.js which is the login page for our app:

\">

There is not much going on here, just loading our dynamic content from Cosmic, as well as the HTML login form.

Looking at the auth.js file, you’ll see this is where the login form will send the data to log the user in.

\">

When the data is sent to /auth the Cosmic NPM module searches for the email first then, if found tries to match the submitted password to the password saved in the Cosmic API (using bcrypt).\r\nIf both email and password are matched with a user, the session is created and the user is redirected from the login page to the users page.  Let’s take a look at the users list page.

Access Exclusive Content

After the user has logged in successfully, they are redirected to the users list page.  This is how it looks:

\">

If the user session is not set, they are immediately redirected to the login page with an unauthorized message. If they have a user session, they will be able to see a list of all registered users (from the Users Object Type). This gives you the idea\r\nof how to limit user access in our app. By checking for req.session.user on any page, you can restrict access to logged in users only.

Signing Up

Let’s take a look at what happens for new users when they post their info to /users:

\">

There’s a few things happening here. First, the email is checked against the current list of users.  If a match is not found, the user object is created with each data point of the user: First Name, Last Name, Email and Password stored as metafields\r\nin the Cosmic API.

Taking this a step further, after you log into your Cosmic bucket and go to your Users Object Type you will be able to add more Metafields to the users in your system.  This makes adding dynamic, extended data very easy.  For example, let’s\r\nsay you needed to add a profile image, address, GitHub username, etc.  All of these can be added as Metafields to the User Object.  See screenshot below:


See Ya Next Time

Now let’s see what happens when a user accesses the /logout route:

\">

The session is simply destroyed and the user is redirected back to the login page.

Where's the HTML?

I'm not going to go into too much detail on the HTML, but basically both login and signup forms have JQuery validation and submit AJAX requests to the route endpoints.  Check out the main.js file on GitHub to see how JQuery is used for this and other UI and UX things.

Conclusion

And that’s it.  Cosmic is a powerful platform for content creation and app data management.  With your Cosmic-powered User Management App you can now extend your user data using the Cosmic API or from your Cosmic Bucket Dashboard.

 I hope you found this tutorial helpful.   If you have any questions or feedback you can reach out to us on Twitter or chat with us in the Slack community.

","metafields":[{"children":null,"type":"object","title":"Author","key":"author","id":"6FQO4yBsJH","value":"5768b253163172890e00002c","object_type":"authors","object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"children":null,"type":"html-textarea","title":"Teaser","key":"teaser","id":"7h7u7j11sO","value":"

In this tutorial I’m going to show you how to build a user management app using Node.js and the Cosmic JS CMS API.

"},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"ljA9LcN2WO","value":"e9d968e0-b05f-11e6-95e2-27fd9e24a1eb-users.jpg","url":"https://cdn.cosmicjs.com/e9d968e0-b05f-11e6-95e2-27fd9e24a1eb-users.jpg","imgix_url":"https://imgix.cosmicjs.com/e9d968e0-b05f-11e6-95e2-27fd9e24a1eb-users.jpg"},{"children":null,"type":"textarea","title":"SEO Meta Description","key":"seo_meta_description","id":"HshRGz6Jax","value":"We're going to learn how to quickly and easily manage using Node.js and the Cosmic CMS API. Ready? "},{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"ic2OAGtQ3o","value":""}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2016-11-22T02:43:27.624Z","created_by":"55767c3ffbcf5cbb13000001","created":"2016-11-22T02:43:27.624Z","status":"published","modified_at":"2020-08-10T14:04:22.001Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-08-08T22:07:07.641Z","unpublish_at":null,"metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

In this tutorial I’m going to show you how to build a user management app using Node.js and the Cosmic JS CMS API.

","featured_image":{"url":"https://cdn.cosmicjs.com/e9d968e0-b05f-11e6-95e2-27fd9e24a1eb-users.jpg","imgix_url":"https://imgix.cosmicjs.com/e9d968e0-b05f-11e6-95e2-27fd9e24a1eb-users.jpg"},"seo_meta_description":"We're going to learn how to quickly and easily manage using Node.js and the Cosmic CMS API. Ready? ","published_date":""}},{"_id":"582a1c5c9d2f74bf430008c3","order":164,"slug":"new-responsive-app-demo-experience","title":"New Responsive App Demo Experience","content":"


Cosmic is on a mission to bring API-first content management to the world.  Along with providing an intuitive API and content editing experience, our goal is to provide excellent examples of how you can quickly get started building the future of the web using Cosmic.

Today we’re rolling out a new app demo experience that allows you to demo any of our web apps across different device screen resolutions.  Easily switch between Desktop, Tablet and Mobile viewing experiences.

Click here to check out the new responsive demo page.


Browsing our apps is a great way to give you ideas of how to build your next website.  Click through any of our apps and click \"View Demo\" to enter the responsive demo experience.  Click \"View Code\" to see how our apps use Cosmic to power content using different programming languages including Node.js, React, PHP and Angular.  While in the responsive demo experience, click on the gallery icon in the top left corner to quickly navigate to another app.

Sign up for Cosmic to install any one of our apps for easy customization.  If you have any questions about the benefits of going API-first, reach out to us on Twitter and join us the community on Slack.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"

Cosmic is on a mission to bring API-first content management to the world.  Along with providing an intuitive API and content editing experience, our goal is to provide excellent examples of how you can quickly get started building the future of the web using Cosmic.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"b071d2a0-aab9-11e6-b60f-ff2536816c1a-responsive.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/b071d2a0-aab9-11e6-b60f-ff2536816c1a-responsive.jpg","imgix_url":"https://imgix.cosmicjs.com/b071d2a0-aab9-11e6-b60f-ff2536816c1a-responsive.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2016-11-15T20:19:40.385Z","created_by":"5357ef811693be2118000001","created":"2016-11-15T20:19:40.385Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"55767c3ffbcf5cbb13000001","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

Cosmic is on a mission to bring API-first content management to the world.  Along with providing an intuitive API and content editing experience, our goal is to provide excellent examples of how you can quickly get started building the future of the web using Cosmic.

","featured_image":{"url":"https://cdn.cosmicjs.com/b071d2a0-aab9-11e6-b60f-ff2536816c1a-responsive.jpg","imgix_url":"https://imgix.cosmicjs.com/b071d2a0-aab9-11e6-b60f-ff2536816c1a-responsive.jpg"}}},{"_id":"5820b8d29f0b5b995a00143b","order":165,"slug":"creating-extendable-content-objects-served-via-api","title":"Creating Extendable Content Objects Served via API ","content":"

In this blog I will show you how to create an extendable content object in 4 Steps using the Cosmic Content Management Platform. Once my object is created, it is available via API endpoint. The following 4 steps are an easy way to create new extendable objects for your web-connected application, so I would encourage you to Sign Up for Cosmic and begin the demo. If you're just starting out with Cosmic, I'd recommend reviewing the Getting Started and Documentation Pages. I'll be using the Cosmic CMS Web Application as I walk through the 4 steps. 

Once you've signed up, you will be prompted to Create a New Bucket, which you can think of as your project: your new website, your new iOS application or your new Android application. I created my bucket and created an Object Type called \"Page\". Below you can see how I created a page of content that can be delivered via API to any web-connected device. 

1.1 Adding an Object - Object Title

1.2 Adding an Object - Auto-Generated Slug

2. Adding an Object's Content

3. Adding Metafields To Your Object

4. Saving Object Draft | Publishing Object

Cosmic is an API-first cloud-based content management platform that makes it easy to manage applications and content. If you have questions about the Cosmic API, please reach out to the founders on Twitter or Slack. 

Read More

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"value":"

In this blog I'll show you how to create extendable content objects in 4 steps. 

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"af5942e0-a578-11e6-9bc4-ef863055e768-drawers.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/af5942e0-a578-11e6-9bc4-ef863055e768-drawers.jpg","imgix_url":"https://imgix.cosmicjs.com/af5942e0-a578-11e6-9bc4-ef863055e768-drawers.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2016-11-07T17:24:34.641Z","created_by":"5716b504e9c686d006000073","created":"2016-11-07T17:24:34.641Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"55767c3ffbcf5cbb13000001","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

In this blog I'll show you how to create extendable content objects in 4 steps. 

","featured_image":{"url":"https://cdn.cosmicjs.com/af5942e0-a578-11e6-9bc4-ef863055e768-drawers.jpg","imgix_url":"https://imgix.cosmicjs.com/af5942e0-a578-11e6-9bc4-ef863055e768-drawers.jpg"}}},{"_id":"581902a0de1cc19576003984","order":166,"slug":"app-deployment-monitoring-now-available","title":"App Deployment Monitoring Now Available","content":"


Cosmic makes it easy to deploy your application from GitHub to your own instance on the Cosmic App Server.  And starting today, you can now view the status of every deployment attempt in an easy-to-use table.  

This means that if there is an error on your deploy, you will be able to see exactly the error output to address any issues with your application.  When the deploy is a success, you will see the entire build process indicated clearly.   This gives you the ability to keep track of all of your deployments in a running history.

Simply go to Your Bucket > Web Hosting after logging into your Cosmic account.  When you click the \"View Log\" button, you will see the detail of the log.  

Application deployment monitoring is another way that Cosmic is making it easier for you to build (and deploy!) your apps faster and easier.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"

Now you can view the status of your deployment attempts.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"55996480-a076-11e6-b933-0f0f2f10a696-deploy-logs.gif","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/55996480-a076-11e6-b933-0f0f2f10a696-deploy-logs.gif","imgix_url":"https://imgix.cosmicjs.com/55996480-a076-11e6-b933-0f0f2f10a696-deploy-logs.gif"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2016-11-02T21:01:20.355Z","created_by":"5357ef811693be2118000001","created":"2016-11-02T21:01:20.355Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

Now you can view the status of your deployment attempts.

","featured_image":{"url":"https://cdn.cosmicjs.com/55996480-a076-11e6-b933-0f0f2f10a696-deploy-logs.gif","imgix_url":"https://imgix.cosmicjs.com/55996480-a076-11e6-b933-0f0f2f10a696-deploy-logs.gif"}}},{"_id":"58111654dae70f540e00672f","order":167,"slug":"one-million-requests-one-million-thanks","title":"One Million Requests - One Million Thanks","content":"

Cosmic is on a mission to help teams build content-powered websites and apps faster and easier.  Today, we’re happy to announce an exciting milestone: users have passed one million total requests to the Cosmic API. This means that more than one million times someone has used Cosmic to view a website page, create a static website build, send a chat message, vote for their preferred presidential candidate or view a blog post using an iOS or Android device. This increase in requests comes shortly after announcing our 500,000th API request last month.

While this milestone is an indication of continued traction, it's just the start.  Cosmic is dedicated to enabling faster and easier product development for teams all over the world.  So far users in 67 countries are using Cosmic to develop a variety of content-powered applications.

We're seeing widespread adoption in industries including politics, telecom, retail goods, career placement, digital services and more. This reaffirms the painpoints that we aimed to solve with Cosmic.  And shows the need for an intuitive content and application development solution are truly universal.

Special thanks to you, the earlyvangelists, the supporters and the partners who have joined us on this exciting journey.  Here's to the next 99 million requests!

Cheers,
Tony Spiro
Co-founder, CEO

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"

At Cosmic our mission is to help teams build websites and apps faster and easier.  Today, we’re happy to announce an exciting milestone: we have passed 1,000,000 API requests.  This comes shortly after announcing our 500,000th API request last month.  This means that over 1 Million times someone has used Cosmic to view a web page, create a static website build, send a chat message, vote for their preferred presidential candidate or view a blog post using an iOS or Android device.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2016-10-27T20:47:16.982Z","created_by":"5357ef811693be2118000001","created":"2016-10-27T20:47:16.982Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

At Cosmic our mission is to help teams build websites and apps faster and easier.  Today, we’re happy to announce an exciting milestone: we have passed 1,000,000 API requests.  This comes shortly after announcing our 500,000th API request last month.  This means that over 1 Million times someone has used Cosmic to view a web page, create a static website build, send a chat message, vote for their preferred presidential candidate or view a blog post using an iOS or Android device.

"}},{"_id":"580a2d560250d77943005011","order":168,"slug":"how-to-build-an-api-powered-static-website-the-best-of-both-worlds","title":"How to Build an API-Powered, Static Website: The Best of Both Worlds","content":"


Update

Check out the Jamstack CMS knowledge base page to learn how you can use Cosmic to build a static websites site using Gatsby, Nuxt.js, Gridsome, and more.

\r\n\r\n\r\n

Continue reading for an example using Metalsmith.


Static websites have been around for awhile, like since the beginning of the internet (the web used to be all static websites). Now we’re seeing a trend that is bringing these HTML-centric websites back, why?  Because HTML renders really fast\r\nwhen you don’t have a database or a server-side language slowing things down.  That’s not to say that programming languages should be done away with, because pretty much every major website you visit has some sort of server-side language\r\nand database attached to it.  But for smaller websites that don’t involve things like user session management or time-sensitive dynamic data, a static site will do, and actually may be more ideal.


In this article I’m going to show you how to build a static website that gives you the best of both worlds:  A website that is both dynamically powered by the Cosmic API and also a static website that can be edited using Markdown files.  As a bonus, you can also setup automatic builds using Webhooks.

TL;DR

View the Static Website demo here.
View the Static Website codebase on GitHub here.
View the Static Website App page on Cosmic.

The Problem With Markdown

A lot of static website processes involve translating Markdown to HTML.  And developers love Markdown, for good reason:  Markdown allows developers to save time by using a shorthand language that translates into HTML.

But most non-technical people would rather not have to learn Markdown to edit content.  Most content editors would rather use an intuitive content management system.\r\nThat’s where Cosmic comes in.


API-Powered, Static Website

In building our Cosmic-powered static website, our goal is to make it easy for developers to build the website and easy for non-developers to edit and deploy content.  For editors, adding new content will be as easy as going into the Cosmic Dashboard, adding a new Page, editing the different content areas and clicking Save.  For developers, they will still have the benefit of using Markdown.  By building our website this way, we can get the whole team involved.  Our static website will have the best of both worlds: A fast, static website that is easily managed by a developer using Markdown files, or content editor using the Cosmic CMS API.

Getting Started

To build our API-powered static website, we will need a few things:

1. A build process that converts the API response into static pages.

2. A rebuild process that makes it easy to rebuild our app after content edits.

3. The ability to create pages using Markdown.

To follow along with the steps download the Static Website on GitHub.


The Build Process

To handle our static website's files and rebuild process we’ll use Node.js, specifically the Express framework for our light-weight server.  In our app.js file we have the following:

var buildSite = require('./build-site')\r\nbuildSite()\r\nvar express = require('express')\r\nvar app = express()\r\napp.set('port', process.env.PORT || 3000)\r\napp.use(express.static('build'))\r\napp.get('/rebuild-site', (req, res) => {\r\n  buildSite()\r\n  res.end('Site rebuilt!')\r\n})\r\napp.post('/rebuild-site', (req, res) => {\r\n  buildSite()\r\n  res.end('Site rebuilt!')\r\n})\r\napp.get('*', (req, res) => {\r\n  res.redirect('/404')\r\n})\r\napp.listen(app.get('port') || 3000, () => {\r\n  console.info('==> 🌎  Go to http://localhost:%s', app.get('port'))\r\n})

There’s a few things happening.  First we’re initiating the build process right on app startup.  Our static files will be served from the /build folder which will also be the root of our application.


Other Routes

GET /rebuild-site will rebuild the website.

POST /rebuild-site is used for our Cosmic Webhooks.

GET /* When a route is not found and "falls through" our designated routes, it will redirect to the 404 page located at /404.


Building HTML Pages from the API

Next let’s look at the build process.  Here's what's in the build-site.js file:

var Metalsmith = require('metalsmith')\r\nvar markdown = require('metalsmith-markdown')\r\nvar layouts = require('metalsmith-layouts')\r\nvar permalinks = require('metalsmith-permalinks')\r\nvar sass = require('metalsmith-sass')\r\nvar metalsmithPrism = require('metalsmith-prism');\r\nvar Cosmic = require('cosmicjs')\r\nvar async = require('async')\r\nvar mkdirp = require('mkdirp')\r\nvar del = require('del')\r\nvar mv = require('mv')\r\nvar createPage = require('./create-page')\r\nvar config = require('./config')\r\nmodule.exports = () => {\r\n  async.series([\r\n    // Create build-new folder\r\n    callback => {\r\n      mkdirp(__dirname + '/build-new', err => {\r\n        callback()\r\n      })\r\n    },\r\n    callback => {\r\n      Cosmic.getObjects(config.cosmicjs, (err, res) => {\r\n        var pages = res.objects.type.pages\r\n        var cosmic = res\r\n        // Create dynamic static pages\r\n        async.eachSeries(pages, (page, callbackEach) => {\r\n          var args = {\r\n            page: page,\r\n            pages: pages,\r\n            cosmic: cosmic\r\n          }\r\n          createPage(args, callbackEach)\r\n        }, () => {\r\n          // Create markdown static pages\r\n          var year = (new Date()).getFullYear() // make your footer year dynamic ;) \r\n          Metalsmith(__dirname)\r\n            .metadata({\r\n              cosmic: cosmic,\r\n              year: year\r\n            })\r\n            .source('./src')\r\n            .destination('./build-new')\r\n            .clean(false)\r\n            .use(sass({\r\n              outputDir: 'css/',\r\n              sourceMap: true,\r\n              sourceMapContents: true\r\n            }))\r\n            .use(markdown( { langPrefix: 'language-' } ))\r\n            .use(metalsmithPrism())\r\n            .use(permalinks())\r\n            .use(layouts({\r\n              engine: 'handlebars',\r\n              partials: 'layouts/partials'\r\n            }))\r\n            .build((err, files) => {\r\n              if (err) { throw err }\r\n              callback()\r\n            })\r\n        })\r\n      })\r\n    },\r\n    // Delete build folder\r\n    callback => {\r\n      del([__dirname + '/build']).then(() => {\r\n        callback()\r\n      })\r\n    },\r\n    // Move build-new to build folder\r\n    callback => {\r\n      mv(__dirname + '/build-new', __dirname + '/build', { mkdirp: true }, () => {\r\n        callback()\r\n      })\r\n    },\r\n    // Delete build-new folder\r\n    callback => {\r\n      del([__dirname + '/build-new']).then(() => {\r\n        // done\r\n      })\r\n    }\r\n  ])\r\n}


We're using the async module to make sure everything is happening in the correct order.  Here's what's happening:

1. The new build folder is created.
2. The Cosmic API is called to get the Pages from our Cosmic bucket.
3. The createPage function is called next (we’ll get to this in a moment).
4. Finally Metalsmith takes care of our frontend: preprocessing SASS files into CSS or concatenating and minifying JavaScript, etc.  Along with these frontend processes, Metalsmith will also convert any Markdown files that we have in our src folder\r\ninto HTML pages in our build folder.

After all static HTML files from the API and from Markdown are added to the build-new folder our build-new folder is renamed to build for a zero-downtime update to our static website.

With Cosmic serving content from the CMS API and Metalsmith powering the frontend and Markdown files, you have the ability to let a non-dev manage content in the static site as well as giving the developer the freedom to still use Markdown.

Next let’s look at how the pages are rendered from the API to HTML pages.  In create-page.js we have the following:

var fs = require('fs')\r\nvar async = require('async')\r\nvar mkdirp = require('mkdirp')\r\nvar Handlebars = require('handlebars')\r\nmodule.exports = (args, done) => {\r\n  var page = args.page\r\n  var pages = args.pages\r\n  var cosmic = args.cosmic\r\n  var locals = {}\r\n  async.series([\r\n    // Register partials\r\n    callback => {\r\n      fs.readFile(__dirname + '/layouts/partials/header.html', 'utf8', (err, data) => {\r\n        if (err) {\r\n          return console.log(err)\r\n        }\r\n        Handlebars.registerPartial('header', data)\r\n        callback()\r\n      })\r\n    },\r\n    callback => {\r\n      fs.readFile(__dirname + '/layouts/partials/footer.html', 'utf8', (err, data) => {\r\n        if (err) {\r\n          return console.log(err)\r\n        }\r\n        Handlebars.registerPartial('footer', data)\r\n        callback()\r\n      })\r\n    },\r\n    callback => {\r\n      fs.readFile(__dirname + '/layouts/page.html', 'utf8', (err, data) => {\r\n        if (err) {\r\n          return console.log(err)\r\n        }\r\n        var template = Handlebars.compile(data)\r\n        locals.template = template\r\n        callback()\r\n      })\r\n    },\r\n    () => {\r\n      // Set variables\r\n      var year = (new Date()).getFullYear() // make your footer year dynamic ;) \r\n      var title = page.title\r\n      var markup = locals.template({ page, pages, cosmic, year, title })\r\n      // If Home page found\r\n      if (page.slug === 'home') {\r\n        fs.writeFile(__dirname + '/build-new/index.html', markup, err => {\r\n          if(err) {\r\n            return console.log(err)\r\n          }\r\n          done()\r\n        })\r\n      } else {\r\n        mkdirp(__dirname + '/build-new/' + page.slug, err => {\r\n          fs.writeFile(__dirname + '/build-new/' + page.slug + '/index.html', markup, err => {\r\n            if(err) {\r\n              return console.log(err)\r\n            }\r\n            done()\r\n          })\r\n        })\r\n      }\r\n    }\r\n  ])\r\n}


Notice we are reading the contents of page.html from our layouts folder and creating a template using Handlebars.  You can use other template languages, but I prefer Mustache, or Handlebars for\r\nits logic-less simplicity.  Next we are passing in our variables from the API to translate the template variables into rendered output.  Next a file write happens to /build/:page.slug:/index.html for all pages in our Cosmic bucket.  And\r\na special page is built for our home page at /build/index.html.

As you can see this is a pretty simple process of taking the output of our Cosmic bucket and translating it into HTML using Handlebars and the Node.js fs.writeFile function.

Building Pages from Markdown

In our src folder there is a file docs/index.md that will be rendered to HTML to /build/docs/index.html at the route /docs.  Here's the markdown in src/docs/index.md:

---\r\ntitle: Documentation\r\nlayout: markdown.html\r\n---\r\nThis documentation page is powered by Markdown.\r\nHere's a block of code:\r\n```bash\r\n$ cd awesome\r\n$ yarn\r\n```\r\nHere's another block of code:\r\n```javascript\r\nvar fs = require('fs')\r\nvar async = require('async')\r\nvar mkdirp = require('mkdirp')\r\nvar Handlebars = require('handlebars')\r\nmodule.exports = (args, done) => {\r\n  var page = args.page\r\n  var pages = args.pages\r\n  var cosmic = args.cosmic\r\n  var locals = {}\r\n  async.series([\r\n    callback => {\r\n      fs.readFile(__dirname + '/layouts/page.html', 'utf8', (err, data) => {\r\n        if (err) {\r\n          return console.log(err)\r\n        }\r\n        var template = Handlebars.compile(data)\r\n        locals.template = template\r\n        callback()\r\n      })\r\n    },\r\n    () => {\r\n      // Set variables\r\n      var year = (new Date()).getFullYear() // make your footer year dynamic ;) \r\n      var markup = locals.template({ page, pages, cosmic, year })\r\n      // If Home page found\r\n      if (page.slug === 'home') {\r\n        fs.writeFile(__dirname + '/build-new/index.html', markup, err => {\r\n          if(err) {\r\n            return console.log(err)\r\n          }\r\n          done()\r\n        })\r\n      } else {\r\n        mkdirp(__dirname + '/build-new/' + page.slug, err => {\r\n          fs.writeFile(__dirname + '/build-new/' + page.slug + '/index.html', markup, err => {\r\n            if(err) {\r\n              return console.log(err)\r\n            }\r\n            done()\r\n          })\r\n        })\r\n      }\r\n    }\r\n  ])\r\n}\r\n```

Any new folder that you add to src with an index.md Markdown file will create a new route at /your-new-folder.

Starting Our Static Website

If you haven't already, download the GitHub repository for the Static Website by running the following commands:

git clone https://github.com/cosmicjs/static-website\r\ncd static-website\r\nyarn install\r\nyarn start

Now go to http://localhost:3000 to see your freshly built website.  Go to http://localhost:3000/rebuild-sitewhenever you would like to rebuild your website.

Automatic Builds Using Webhooks

Next, to make things even easier for your content editor you can add Webhooks to your Cosmic bucket to trigger a rebuild every time content is published in your bucket.

Check out the tutorial to learn how to add Webhooks.

Conclusion

By using Cosmic as your CMS API you can have a static website with the best of both worlds: A dynamic website that can be managed using an intuitive content editing experience as well as the ability to add developer-friendly Markdown pages.

I hope you've enjoyed this tutorial on creating an API-powered static website.  If you want to deploy the static website in just a few clicks, sign up for Cosmic, create a bucket and look for the Static Website App in the Apps tab of your bucket.  For any questions or help getting started, reach out to us in the Cosmic Slack channel, or reach out to us on Twitter.

","metafields":[{"children":null,"type":"object","title":"Author","key":"author","id":"DkGd6HxDyg","value":"5768b253163172890e00002c","object_type":"authors","object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"children":null,"type":"html-textarea","title":"Teaser","key":"teaser","id":"Y6iCgHegMS","value":"

In this article I’m going to show you how to get the best of both worlds:  A website that is both dynamic, has content powered by the Cosmic API that is also a static website.  Our static website will be easily managed by a content editor using the Cosmic CMS and the developer will also be able to use Markdown files.

"},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"bFeRNBJb87","value":"d510d080-98cf-11e6-8afd-2319bb61fbf1-html.jpg","url":"https://cdn.cosmicjs.com/d510d080-98cf-11e6-8afd-2319bb61fbf1-html.jpg","imgix_url":"https://imgix.cosmicjs.com/d510d080-98cf-11e6-8afd-2319bb61fbf1-html.jpg"},{"children":null,"type":"textarea","title":"SEO Meta Description","key":"seo_meta_description","id":"fPwf0lIVF8","value":""},{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"XVscCXAtKv","value":""}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2016-10-25T14:59:34.405Z","created_by":"5357ef811693be2118000001","created":"2016-10-25T14:59:34.405Z","status":"published","modified_at":"2020-10-02T14:06:42.595Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-10-02T14:06:42.595Z","thumbnail":"https://imgix.cosmicjs.com/d510d080-98cf-11e6-8afd-2319bb61fbf1-html.jpg","unpublish_at":null,"metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

In this article I’m going to show you how to get the best of both worlds:  A website that is both dynamic, has content powered by the Cosmic API that is also a static website.  Our static website will be easily managed by a content editor using the Cosmic CMS and the developer will also be able to use Markdown files.

","featured_image":{"url":"https://cdn.cosmicjs.com/d510d080-98cf-11e6-8afd-2319bb61fbf1-html.jpg","imgix_url":"https://imgix.cosmicjs.com/d510d080-98cf-11e6-8afd-2319bb61fbf1-html.jpg"},"seo_meta_description":"","published_date":""}},{"_id":"580e1492dae70f540e0000f7","order":169,"slug":"version-iteration-portable-json-buckets","title":"Version Iteration - Portable JSON Buckets","content":"

One of the principal benefits of using a CMS API over an installed content management system is the portability and scalability of the buckets of content you create. I hear this question at least several times a week: \"How can I back up my bucket of content or duplicate that bucket's content to another web application?\" 

Using a CMS API like the Cosmic API allows developers to build web applications in any programming language they want. Version iterations, backups and duplicating buckets for the next stage in development is intuitive and easy. In this blog I will show you how simple the process is. 

I'm using Cosmic as the example Content Management API for this blog. Sign Up with Cosmic to get started.

Export bucket.json file 

I've navigated to the Import / Export tab of my Cosmic Dashboard and can see the option to Export my data and files into a bucket.json file. By clicking Export, the bucket is immediately downloaded onto my computer for use. 

Downloaded bucket.json File

Add New Bucket


Create New Bucket - Version II

Because I'd like to keep Version I as a comparison of my web application, I'll Create a New Bucket to import my downloaded bucket.json file to deploy and make changes to. 

App Installation Prompt

Once I've created my new bucket, the standard App Installation Prompt will pop up to see if I'd like to see any content-ready applications. Since I've already got an application in my bucket.json file, I'll click \"No Thanks\".

Import Bucket.json file 

Now that I'm in my bucket's dashboard, I'll simply click Import / Export again to import my bucket.json file from Version I. 

Importing bucket.json file

Click \"Yes, Import\" - don't worry about deleting current data and files as this is a brand new bucket in which we hadn't yet added any Objects or Object Types. 

Use Case

I can easily manage all Versions of my bucket from the Cosmic Dashboard. I've just duplicated buckets of content, as well as provided myself a bucket.json backup of my web application. Developers and content editors can easily create new buckets of content while using best practices surrounding Version Control and Version Iteration.

Cosmic is an API-first cloud-based content management platform that makes it easy to manage applications and content. If you have questions about the Cosmic API, please reach out to us on Twitter or Slack. 

Read More


","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"value":"

Version iterations, backups and duplicating buckets for the next stage in development is intuitive and easy. 

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"8901c9f0-99f2-11e6-8103-8117827beac1-Screen Shot 2016-10-24 at 8.46.43 AM.png","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/8901c9f0-99f2-11e6-8103-8117827beac1-Screen Shot 2016-10-24 at 8.46.43 AM.png","imgix_url":"https://imgix.cosmicjs.com/8901c9f0-99f2-11e6-8103-8117827beac1-Screen Shot 2016-10-24 at 8.46.43 AM.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2016-10-24T14:02:58.854Z","created_by":"5716b504e9c686d006000073","created":"2016-10-24T14:02:58.855Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

Version iterations, backups and duplicating buckets for the next stage in development is intuitive and easy. 

","featured_image":{"url":"https://cdn.cosmicjs.com/8901c9f0-99f2-11e6-8103-8117827beac1-Screen Shot 2016-10-24 at 8.46.43 AM.png","imgix_url":"https://imgix.cosmicjs.com/8901c9f0-99f2-11e6-8103-8117827beac1-Screen Shot 2016-10-24 at 8.46.43 AM.png"}}},{"_id":"5806e64efc1225e216006331","order":170,"slug":"developer-spotlight-jon-bloomer","title":"Developer Spotlight: Jon Bloomer","content":"


Our mission at Cosmic is to help teams build great websites and apps, and we love it when developers show us the awesome work they've done using the platform.  In this spirit, we're introducing a new Spotlight series where we'll focus on a particular team or developer that is building something cool using Cosmic.

In this Spotlight we are focusing on Jon Bloomer, who recently launched the Cosmic-powered website for his business Tone Temple.  Jon took some time to answer a few questions about his business, his development process and some of his favorite non-dev rockstars.  And we totally glossed over the irony that his new website that showcases headless guitars is built using a headless CMS.

Cosmic: Can you talk a little about ToneTemple the business?
Jon: Tone Temple is an Australian guitar store with a small selection of boutique brands that we truly believe in. We only stock unique and high end products such as Strandberg Guitars and Evil Angel custom pickups and we will be expanding our range of brands over the coming months. Our business is based on great customer service and a thorough knowledge and understanding of our products.


You have a beautiful brand new website which you mentioned is built using React and Redux.  Can you talk about your choice to use these technologies?
I have been using React and Redux to build web applications for the past 10 months for 2 different corporations and enjoy the ability to build components in ES6/7 and have a simple way to save and retrieve the state of the application from a centralised store. I also like how easy it is to test React components using Expect and Enzyme.


Can you talk about why you decided to use an API to host your content instead of an installed CMS?
I have built many CMS based websites for clients over the past 6 years using Wordpress as I am proficient with PHP however I couldn't manage to build the solutions my clients wanted without installing additional plugins for custom fields, SEO, caching etc. When I saw Cosmic I realised I could think in terms of exactly what data I wanted to save rather than having to work out which already complex template objects I had to extend with additional fields. Removing the page and assets based architecture that traditional CMS's are built on really lets you focus on how to organise content to make it manageable to content editors and deliver it efficiently for app consumption.

Can you talk a little about your development and content management process and how Cosmic fits in?
With Tone Temple the data architecture was pretty simple, I decided I only really needed 2 Objects, Globals and Brands. Globals contains elements such as the site logo, footer text, and then some data for the homepage such as the main content and the videos at the bottom of the page which uses the new Repeater field. Brands is setup with a set of metafields that allow me to upload 2 different size brand page header images (I may create a 3rd for mobile), optional header images for the homepage carousel which is coupled with a check box to set whether to display on homepage and finally the main content and another Repeater field for Videos. The Videos Repeater has just two fields, one for the video title and another for the YouTube ID. I then launch the YouTube player in an overlay on click using a custom React component that I built. Cosmic makes it very simple for me to add new brands with the ability to save as draft if the final content is not quite ready to show on the live site. 

I fetch the global and brand objects asynchronously on load and populate the Redux store which happens very fast. The content is usually rendering in under a second and the large images for the homepage carousel render by the time you hit 1.5s. I use Cosmic's built in Imgix integration to easily create srcsets for images so that I can serve up smaller images depending on media queries which helps with the page load. The Imgix CDN ensures that the images are returned and rendered very quickly. 

What app development technologies are you excited about using now or in the future?
I am excited about the possibility of using GraphQL & Relay in the near future and might be something I will start learning soon and update Tone Temple to use.

Who are some of your favorite guitarists?  Are you a musician yourself?
I am indeed a musician, I studied at Birmingham Conservatoire in the UK and have BMus(hons) degree. I also ran GuitarNoize.com for 9 years until very recently where I have teamed up with an amazing business partner to launch Tone Temple. I have too many favourite guitar players to mention, I have very varied musical tastes from Blues to Metal. Joe Satriani has always been my absolute favourite guitar player but one of my current favourite guitarists and composers is David Maxim Micic.


Check out the Tone Temple website, you can follow Jon on Twitter and check out more of his development work on his GitHub page.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"

In this Spotlight we are focusing on Jon Bloomer, who recently launched the Cosmic-powered website for his business Tone Temple.  Jon took some time to answer a few questions about his business, his development process and some of his favorite non-dev rockstars.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"fe55b380-95fe-11e6-b567-5deeb87c2285-tone-temple.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/fe55b380-95fe-11e6-b567-5deeb87c2285-tone-temple.jpg","imgix_url":"https://imgix.cosmicjs.com/fe55b380-95fe-11e6-b567-5deeb87c2285-tone-temple.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2016-10-19T03:19:42.237Z","created_by":"5357ef811693be2118000001","created":"2016-10-19T03:19:42.237Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

In this Spotlight we are focusing on Jon Bloomer, who recently launched the Cosmic-powered website for his business Tone Temple.  Jon took some time to answer a few questions about his business, his development process and some of his favorite non-dev rockstars.

","featured_image":{"url":"https://cdn.cosmicjs.com/fe55b380-95fe-11e6-b567-5deeb87c2285-tone-temple.jpg","imgix_url":"https://imgix.cosmicjs.com/fe55b380-95fe-11e6-b567-5deeb87c2285-tone-temple.jpg"}}},{"_id":"58061ecdfc1225e2160049c9","order":171,"slug":"sharing-resources-with-a-content-management-api","title":"Sharing Resources With a Content Management API","content":"


The Problem

I worked at a digital agency for several years with my co-founder of Cosmic. We built numerous web applications for a range of clients, usually starting with static PSD's that we would hand off to a front end developer for HTML / CSS application as well as responsiveness on desktop, laptop, tablet and mobile. 

At this stage in the process we were typically using stock photography or images pulled from Google or Pinterest, dependent on whether or not we had created mood boards prior to the development phase. At this point, the client would have finished the monumental \"DropBox Website Folder.\" This folder would systematically lay out the format for the website based on sitemap or existing comps, coupled with the media, images and content the client would want to see present on launch day. 

Far too often the digital team was unclear on which media file to place where, either due to client mislabeling, agency miscommunication or a simple lack of updates to the media files within the DropBox account. All too often all content and images would be accounted for, only to realize that the sitemap had grown because someone forgot (insert page title here).

The Situation

Legacy systems like WordPress make uploading media and images difficult and easy to mess up for a junior content editor. The curation and migration of content from a DropBox to a WordPress usually makes a lengthy stop on the agency and / or client's internal servers for additional review, editing and organization. 

In today's digital age where teams are working on real-time applications that require publishing content at a moment's notice, this system is obviously bloated and flawed. What is stopping agencies from combining DropBox with their CMS? What prevents them from extending a link to a shared media folder within the actual Content Management System itself, rather than employing a third-party storage system to store files until they are ready to be mislabeled, mishandled and stored + published within another system? 

The Solution 

The answer is letting the same API that delivers your content to all web-connected devices also store the media you need to publish. Cosmic is an API-first content management platform that is powered by its JSON API, which delivers content globally to any web-connected device. This gives you the freedom to build your application using any programming language and allows for easier scaling within your development team. Read more about how The Cosmic Stack is simplifying the content management process through a content management API.


To begin storing and categorizing resources and media, set up a new bucket for your new web application and invite users to your bucket for content storage and curation. Here's how...

Create Your Free Account 

Login


Add a New Bucket

Add a New User

Adding a New User to Your Bucket

Unlocking editor access to the new user (which could be a client or the content team) is sufficient as that user can add and group media and shared resources within media folders for eventual publishing through the Cosmic API.

Adding Media Folders

Click \"Add media folder\"


Save your new media folder and begin adding files and media to your media folder so that your clients and team can access it later. 

I created an example web application so I can demonstrate how I cataloged my example media within the Cosmic Dashboard. In my Global Media view, I can see all of the example images I have uploaded.

I have separated my media into three folders: Brand Standards | Marketing Banners | Internal Resources. I can filter between media folders at my leisure, using them as separate client content folders, internal team documents, shared resources, etc. 

This is a quick example of a down and dirty trick with an API-first cloud-based Content Management Platform. When your team is ready to start development, assets have already been added to your bucket and you can immediately begin prototyping your application with the uploaded resources.

Cosmic is an API-first cloud-based content management platform that makes it easy to manage applications and content. If you have questions about the Cosmic API, please reach out to us on Twitter or Slack. 

Read More

Team Member Role Management in Cosmic

How to Build a Cross-Platform Blog Using React Native and Node.js

Cosmic Product Tour

How to Create an Intuitive Website Navigation Menu

Repeater Metafields Now Available 

Adding Webhooks in 4 Easy Steps

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"value":"

The same API that delivers your content to all web-connected devices can also store the media you need to publish.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"e06d50b0-9533-11e6-b575-65f510fd43cc-shutterstock_117629761.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e06d50b0-9533-11e6-b575-65f510fd43cc-shutterstock_117629761.jpg","imgix_url":"https://imgix.cosmicjs.com/e06d50b0-9533-11e6-b575-65f510fd43cc-shutterstock_117629761.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2016-10-18T13:08:29.025Z","created_by":"5716b504e9c686d006000073","created":"2016-10-18T13:08:29.025Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

The same API that delivers your content to all web-connected devices can also store the media you need to publish.

","featured_image":{"url":"https://cdn.cosmicjs.com/e06d50b0-9533-11e6-b575-65f510fd43cc-shutterstock_117629761.jpg","imgix_url":"https://imgix.cosmicjs.com/e06d50b0-9533-11e6-b575-65f510fd43cc-shutterstock_117629761.jpg"}}},{"_id":"5800f0417f9a5a0b69002471","order":172,"slug":"team-member-role-management-in-cosmic-js","title":"Team Member Role Management in Cosmic","content":"

Building websites and applications with the Cosmic API is simple and intuitive for teams through role permissions. Cosmic makes it easy to add users and clarify their roles in the system. Teams can assign three role types within the Cosmic CMS Dashboard: Admin, Developer, Editor. In this blog we will cover the following User Role items:


  1. How to Add a User to Your App 
  2. How to Edit a User Role
  3. Invite Users to Your Team's Bucket
  4. Getting Access to Your Team's Bucket 
  5. Admin User Dashboard
  6. Developer User Dashboard
  7. Editor User Dashboard
  8. Dashboard Analytics - Team
  9. Adding | Editing Objects


Add a User  


Edit a User's Role 


Invite Users to Your Team's Bucket 


Getting Access to Your Team's Bucket 


Cosmic delivers the tools needed for each user role and nothing more. I manage my own app on Cosmic and went through the process of inviting myself in 3 different role types to my own bucket of content. I've provided screencaptures of the Cosmic Dashboard in each User Role's View. 


Admin User View



The admin has access to settings, users and developer features. 


Developer User View 



The developer has access to developer features and editor features. 


Editor User View

The editor can add, edit and delete content with developer features hidden.


Team Dashboard Analytics


Track all of your team's apps with a simple Dashboard that provides information like \"Last Modified\", users, app owners as well as quick links over to each app's Dashboard.


Adding | Editing Object 



When drafting a new object or object type, users are provided handy information on last modified, timestamp and draft or published status. 


Teams are free to build slick apps and websites while creating content for them simultaneously. Developers can program code that is decoupled from the content that other team members put together, allowing the team to work content-first. 


If you have any questions about managing content in Cosmic with your team, feel free to reach out to us on Twitter or in our Slack Community.


Read More

How to Build a Cross-Platform Blog Using React Native and Node.js

Cosmic Product Tour

Repeater Metafields Now Available 

Adding Webhooks in 4 Easy Steps


","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"value":"

Building websites and applications with the Cosmic API is simple and intuitive for teams through role permissions.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"c166c2d0-960c-11e6-8afd-2319bb61fbf1-users.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/c166c2d0-960c-11e6-8afd-2319bb61fbf1-users.jpg","imgix_url":"https://imgix.cosmicjs.com/c166c2d0-960c-11e6-8afd-2319bb61fbf1-users.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2016-10-14T14:48:33.514Z","created_by":"5716b504e9c686d006000073","created":"2016-10-14T14:48:33.514Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

Building websites and applications with the Cosmic API is simple and intuitive for teams through role permissions.

","featured_image":{"url":"https://cdn.cosmicjs.com/c166c2d0-960c-11e6-8afd-2319bb61fbf1-users.jpg","imgix_url":"https://imgix.cosmicjs.com/c166c2d0-960c-11e6-8afd-2319bb61fbf1-users.jpg"}}},{"_id":"57ff960b59d898cf62000d89","order":173,"slug":"build-industry-tailored-apps-using-nodejs-reactjs-angularjs-bootstrap","title":"Build Industry-Tailored Apps using Node.js, ReactJS, AngularJS & Bootstrap","content":"

Cosmic makes it easy to build slick apps and websites for any vertical or industry. Cosmic has stored existing codebases on GitHub for everything from a standard Node.js boilerplate to cross-platform iOS & Android React Native codebases. Below I detail 5 professional app templates that document their programming language, general layout, a demo & the ability to view the code base. 

Real Estate App


Bootstrap | Node.js | Multi-page App Template


This real estate website satisfies some common website requirements including dynamic pages, listing management, blog articles, author management, SEO ability, contact form and website search.


View demo here. 

View codebase on GitHub.

Photography App


Bootstrap | Node.js | Multi-Page App Template


This slick photography website is built using Node.js on the server and Bootstrap on the frontend.  It is fully responsive down to mobile, includes a contact form and a gallery section powered by Photoswipe.


View demo here. 

View codebase on GitHub.

Healthcare App


Node.js | Bootstrap | Multi-Page App Template


Website built using the Node.js Website Boilerplate.  Fully responsive down to mobile, SEO ready, includes a contact form and full site search.


View demo here. 

View codebase on GitHub.

Roofing App


Node.js | Bootstrap | Multi-page App Template


Website built using the Node.js Website Boilerplate.  Fully responsive down to mobile, SEO ready, includes a contact form and full site search.


View demo here. 

View codebase on GitHub.

Wedding App

AngularJS | Single-Page App Template


This Angular JS single page wedding website makes it easy to edit content, update photos and plan for the big day.


View demo here. 

View codebase on GitHub.


If you have any questions about building industry-tailored apps, feel free to reach out to us on Twitter or in our Slack Community.


Read More

How to Build a Cross-Platform Blog Using React Native and Node.js

Cosmic Product Tour

Repeater Metafields Now Available 

Adding Webhooks in 4 Easy Steps


","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"value":"

Cosmic makes it easy to build slick apps and websites for any vertical or industry.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"26ef48d0-d5bd-11e6-9871-5f155e0fcae7-1*XpYzOtlHYkuawHTexYFyug.png","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/26ef48d0-d5bd-11e6-9871-5f155e0fcae7-1*XpYzOtlHYkuawHTexYFyug.png","imgix_url":"https://imgix.cosmicjs.com/26ef48d0-d5bd-11e6-9871-5f155e0fcae7-1*XpYzOtlHYkuawHTexYFyug.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2016-10-13T14:11:23.207Z","created_by":"5716b504e9c686d006000073","created":"2016-10-13T14:11:23.207Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5716b504e9c686d006000073","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

Cosmic makes it easy to build slick apps and websites for any vertical or industry.

","featured_image":{"url":"https://cdn.cosmicjs.com/26ef48d0-d5bd-11e6-9871-5f155e0fcae7-1*XpYzOtlHYkuawHTexYFyug.png","imgix_url":"https://imgix.cosmicjs.com/26ef48d0-d5bd-11e6-9871-5f155e0fcae7-1*XpYzOtlHYkuawHTexYFyug.png"}}},{"_id":"57fc0e1f94661f8a3b0002a3","order":174,"slug":"repeater-metafields-now-available","title":"Repeater Metafields Now Available","content":"

We're excited to announce a new tool that makes it even easier to build content for your websites and apps using Cosmic.  The Repeater Metafield allows you to create groups of Metafields with the ability to “repeat” the group.  This makes it easy to manage blocks of content in an intuitive and scalable way.  Here's how they work...

Let's say for example we would like the ability to add multiple testimonials to a page.  This is a pretty common use-case and usually involves a few content pieces: Quote, Cite and maybe an Image.  To create our Repeater Metafield follow these steps:

1. Go to the object where the Repeater will be added and click "Add Metafield"


2. Click the Repeater icon


3. Add a title and key, then click "Add Repeater Metafield"


4. Add the Quote Metafield (Text Area), Cite Metafield (Text) and Image Metafield (Image) and click Save.

Now add your first Repeater by adding content to the fields:


Now you are ready to add repeating Metafields.  To add another group of Metafields, just click "Add Repeating Item" and another block of Quote, Cite and Image will be available.

Repeater Metafields is another way that we are making content creation intuitive and highly scalable for your websites and applications.  If you have any questions about Repeater Metafields, feel free to reach out to us on Twitter or in our Slack Community.

Read More

How to Build a Cross-Platform Blog Using React Native and Node.js

Cosmic Product Tour

Adding Webhooks in 4 Easy Steps

Cosmic User Roles and Permissions

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"

The Repeater Metafield allows you to group Metafields into groups with the ability to “repeat” the group.  This makes building blocks of content on a page really intuitive.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"fda7a850-d5bc-11e6-a761-f9f9f94a6894-repeater-wide.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/fda7a850-d5bc-11e6-a761-f9f9f94a6894-repeater-wide.jpg","imgix_url":"https://imgix.cosmicjs.com/fda7a850-d5bc-11e6-a761-f9f9f94a6894-repeater-wide.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2016-10-10T21:54:39.021Z","created_by":"5357ef811693be2118000001","created":"2016-10-11T21:54:39.022Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5716b504e9c686d006000073","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

The Repeater Metafield allows you to group Metafields into groups with the ability to “repeat” the group.  This makes building blocks of content on a page really intuitive.

","featured_image":{"url":"https://cdn.cosmicjs.com/fda7a850-d5bc-11e6-a761-f9f9f94a6894-repeater-wide.jpg","imgix_url":"https://imgix.cosmicjs.com/fda7a850-d5bc-11e6-a761-f9f9f94a6894-repeater-wide.jpg"}}},{"_id":"57f2b459baf16e8537006038","order":175,"slug":"how-to-build-a-cross-platform-blog-using-react-native-and-nodejs","title":"How to Build a Cross-Platform Blog Using React Native and Node.js","content":"

We live in a world of inter-connected devices, each powered by their own software, built with their own circuits and protected by their own casing.  The best way to deliver information to these seemingly closed-off systems is with an API.  Cosmic is an API-first cloud-based content platform that makes it not only easy to add dynamic content to any existing or new website, but makes it possible to seamlessly deliver content across devices and platforms.

In this article I’m going to show you how to quickly and easily create a cross-platform blog that will connect your content across Web, iOS and Android.  With content powered by Cosmic, you will be able to edit your content once and deliver the updates simultaneously across all devices and platforms.  Let’s get started.

TL;DR

Check out the demo.


Website


To get started, download the Cross-Platform Blog on GitHub which is based on the Node.js Website Boilerplate.  This comes with everything you need to get started with a basic website as well as the codebase for the native applications running React Native for iOS and Android.

git clone https://github.com/cosmicjs/cross-platform-blog\r\ncd cross-platform-blog/web\r\nnpm install\r\nnpm run development

The root of our application runs at app-server.js.  Looking at this file, you'll see how routes are set up and how views are rendered to the routes.

Now that we have our website running, let’s open up another terminal window and get our iOS and Android apps built.

React Native Bridges the Gap

React Native is a very powerful way to build applications for both iOS and Android.  Because most, if not all, of the codebase can be shared between the two platforms, by using React Native you can build your apps in half the time.  If you haven’t gotten your local environment setup for React Native development, go to the React Native website and follow the steps.  Honestly I found setting up the iOS development environment to be super easy, but setting up the Android, not so much.  Mainly because I had to search more to figure it all out.  In short, you need to download Android Studio and make sure you have the correct version of the Java SDK installed and make sure you have all of the developer tools installed.

iOS

To install and run the iOS React Native application run the following commands:

cd cross-platform-blog/ios\r\nnpm install\r\nreact-native run-ios


Android

Run the following commands to run the Android application (make sure you have your Android device emulator open):

cd cross-platform-blog/android\r\nnpm install\r\nreact-native android

Looking at index.ios.js and index.android.js you will notice that the root of our application for both iOS and Android runs at App.js.   And all other components LandingPage.js, BlogList.js and BlogPost.js are shared between the two platforms as well.

When we run our react-native commands, our React Native code base is translated to both Objective-C and Java languages.  It is not a “hybrid app” or web-based at all.  It basically just translates your JavaScript (React) building blocks together into the native language of each platform.

Connect to the CMS API

If you don't have an account yet, sign up for Cosmic to set up your bucket.  Your bucket is the place to add and edit content for your cross-platform blog.  To upload the demo content from the Cross-Platform Blog on GitHub, go to Your Bucket > Import / Export.  Then upload the bucket.json file located in the root folder of the Cross-Platform Blog repository.  This will upload all of the demo data and files from the Cross-Platform Blog demo application.   To configure your local application to point to your bucket, simply edit your config files in both web and native folders to point to "your-bucket-slug".

// config.js\r\nexport default {\r\n  COSMIC_BUCKET: 'your-bucket-slug'\r\n}

Now when you edit content in your Cosmic bucket, you will see that the content automatically updates across Web, iOS and Android applications.  By connecting your applications to Cosmic, you are using a powerful tool that breaks down the barriers between devices and programming languages.

I hope you found this tutorial helpful.  If you have any questions about how Cosmic can help your team build websites and applications faster and easier, reach out to us on Twitter and join our community on Slack.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"

In this article I’m going to show you how to quickly and easily create a cross-platform blog that will connect your content across Web, iOS and Android.  With content powered but Cosmic, you will be able to edit your content once and deliver the update simultaneously across all devices and platforms.  This is powerful stuff.  Let’s get started.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"c64a39e0-d5bc-11e6-bed5-5b88b5b5f7e4-14480e80-89a3-11e6-bed6-65a0e6114816-cross-platform-blog (1).gif","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/c64a39e0-d5bc-11e6-bed5-5b88b5b5f7e4-14480e80-89a3-11e6-bed6-65a0e6114816-cross-platform-blog (1).gif","imgix_url":"https://imgix.cosmicjs.com/c64a39e0-d5bc-11e6-bed5-5b88b5b5f7e4-14480e80-89a3-11e6-bed6-65a0e6114816-cross-platform-blog (1).gif"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2016-10-04T19:41:13.281Z","created_by":"5357ef811693be2118000001","created":"2016-10-04T19:41:13.281Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5716b504e9c686d006000073","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

In this article I’m going to show you how to quickly and easily create a cross-platform blog that will connect your content across Web, iOS and Android.  With content powered but Cosmic, you will be able to edit your content once and deliver the update simultaneously across all devices and platforms.  This is powerful stuff.  Let’s get started.

","featured_image":{"url":"https://cdn.cosmicjs.com/c64a39e0-d5bc-11e6-bed5-5b88b5b5f7e4-14480e80-89a3-11e6-bed6-65a0e6114816-cross-platform-blog (1).gif","imgix_url":"https://imgix.cosmicjs.com/c64a39e0-d5bc-11e6-bed5-5b88b5b5f7e4-14480e80-89a3-11e6-bed6-65a0e6114816-cross-platform-blog (1).gif"}}},{"_id":"57ee818533463628310009c3","order":176,"slug":"cosmic-js-partner-profile","title":"Cosmic: Partner Profile","content":"

Cosmic offers partnership opportunities to designers, developers & agencies for app contributions, bucket management as well as Affiliate referral programs. Of the agencies taking advantage of the Cosmic Partners Program thus far, Simple Media is leveraging the tool in the most formidable way. Simple Media is a boutique interactive branding & inbound marketing agency in the Design District neighborhood of Dallas. Hobbled by installed systems, Simple Media was looking for an easier way to launch digital properties on behalf of their clients, as well as integrate a new hosting solution into the mix that knocks out several disparate tech partners in their content management stack. 

Simple Media is actively building new websites and apps on the Cosmic system, leveraging their team of developers for an initial hours scope on time-to-launch for each individual client, optimizing thereafter. Watch Simple Media CEO & Founder Nick Bonanno discuss their integration with Cosmic. 


","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"value":"

Hobbled by installed systems, Simple Media was looking for an easier way to launch digital properties on behalf of their clients.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"f499fc00-bd7e-11e6-95d9-69995ea5288b-Screen Shot 2016-12-08 at 1.13.36 PM.png","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/f499fc00-bd7e-11e6-95d9-69995ea5288b-Screen Shot 2016-12-08 at 1.13.36 PM.png","imgix_url":"https://imgix.cosmicjs.com/f499fc00-bd7e-11e6-95d9-69995ea5288b-Screen Shot 2016-12-08 at 1.13.36 PM.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2016-09-30T15:15:17.722Z","created_by":"5716b504e9c686d006000073","created":"2016-09-30T15:15:17.722Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5716b504e9c686d006000073","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

Hobbled by installed systems, Simple Media was looking for an easier way to launch digital properties on behalf of their clients.

","featured_image":{"url":"https://cdn.cosmicjs.com/f499fc00-bd7e-11e6-95d9-69995ea5288b-Screen Shot 2016-12-08 at 1.13.36 PM.png","imgix_url":"https://imgix.cosmicjs.com/f499fc00-bd7e-11e6-95d9-69995ea5288b-Screen Shot 2016-12-08 at 1.13.36 PM.png"}}},{"_id":"57ed185fd12b1858040066c8","order":177,"slug":"cosmic-js-product-tour","title":"Cosmic Product Tour","content":"

Cosmic is an API-first cloud-based content management platform that makes it easy for developers and content editors to build websites and apps faster and more efficiently. Building API-first means that content is prioritized first, decoupling code from content, so you're able to build slick apps and websites in your preferred programming language. Links to guide you through the signup and on boarding process are documented below.

You can Create a Free Account for Cosmic and browse Content-Ready Apps & Websites. Refer to the Cosmic Tutorials & Guides for help with items such as Localization, Webhooks, one-click SSL, custom domains, web app deployment & more. 

Browse information about the Cosmic Partner Program.

Read More:

  1. New: Track Your API Requests
  2. Build a Blog in 4 Steps
  3. The Cosmic Stack
  4. Three Ways to use The Cosmic Stack
  5. How to Create an Intuitive Website Navigation Menu
","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"value":"

Cosmic is an API-first cloud-based content management platform that makes it easy for teams of developers and content editors to collaborate for projects and clients.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"1e7f2e20-d5bf-11e6-9871-5f155e0fcae7-Screen Shot 2017-01-08 at 10.25.28 AM.png","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/1e7f2e20-d5bf-11e6-9871-5f155e0fcae7-Screen Shot 2017-01-08 at 10.25.28 AM.png","imgix_url":"https://imgix.cosmicjs.com/1e7f2e20-d5bf-11e6-9871-5f155e0fcae7-Screen Shot 2017-01-08 at 10.25.28 AM.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2016-09-29T13:34:23.164Z","created_by":"5716b504e9c686d006000073","created":"2016-09-29T13:34:23.164Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5716b504e9c686d006000073","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

Cosmic is an API-first cloud-based content management platform that makes it easy for teams of developers and content editors to collaborate for projects and clients.

","featured_image":{"url":"https://cdn.cosmicjs.com/1e7f2e20-d5bf-11e6-9871-5f155e0fcae7-Screen Shot 2017-01-08 at 10.25.28 AM.png","imgix_url":"https://imgix.cosmicjs.com/1e7f2e20-d5bf-11e6-9871-5f155e0fcae7-Screen Shot 2017-01-08 at 10.25.28 AM.png"}}},{"_id":"57e932e641fcd13576001c1c","order":178,"slug":"adding-webhooks-in-4-steps","title":"Adding Webhooks in 4 Steps ","content":"

At Cosmic, we get questions every day about adding Webhooks to an application for better team & product management. Cosmic is an API-first cloud-based content management platform that allows you to easily integrate a CMS to your deployed or emerging application for content updates. Cosmic works by decoupling content from code, allowing you to build applications in your desired language since Cosmic can be integrated with any application, regardless of its programming language.

Cosmic makes it easy to add Webhooks that trigger a POST request to the endpoint of your choice when there is activity on your bucket. 


Let's insert Webhooks into your web application:


1. Go to your Bucket Dashboard



2. Go to the Webhooks tab



3. Add the Webhooks bucket upgrade - refer to Cosmic Pricing for bucket breakdowns




4. Use the Webhooks table to select an event and trigger a POST request to the API endpoint



Now this will post to the endpoint of your choice whenever the event signified occurs. This is great for static websites & great for the build process whenever content is changed. You can send a message on Slack to your team whenever you’ve added a new piece of content for draft review. Cosmic builds collaboration between developers & content editors in everything we do, because we work content-first.


Watch the Webhooks Tutorial: 

 


Read More:

  1. New: Track Your API Requests
  2. Build a Blog in 4 Steps
  3. The Cosmic Stack
  4. Three Ways to use The Cosmic Stack
  5. How to Create an Intuitive Website Navigation Menu


","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"value":"

The Webhooks add-on allows you to communicate with any third-party endpoint whenever content is edited within your bucket. This is great for static site rebuilds, or communicating with your team through the Slack API whenever content is changed in your Cosmic bucket.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"df2a8cc0-83f6-11e6-aef3-cf64de08ea65-hook.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/df2a8cc0-83f6-11e6-aef3-cf64de08ea65-hook.jpg","imgix_url":"https://imgix.cosmicjs.com/df2a8cc0-83f6-11e6-aef3-cf64de08ea65-hook.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2016-09-26T14:38:30.850Z","created_by":"5716b504e9c686d006000073","created":"2016-09-26T14:38:30.850Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5716b504e9c686d006000073","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

The Webhooks add-on allows you to communicate with any third-party endpoint whenever content is edited within your bucket. This is great for static site rebuilds, or communicating with your team through the Slack API whenever content is changed in your Cosmic bucket.

","featured_image":{"url":"https://cdn.cosmicjs.com/df2a8cc0-83f6-11e6-aef3-cf64de08ea65-hook.jpg","imgix_url":"https://imgix.cosmicjs.com/df2a8cc0-83f6-11e6-aef3-cf64de08ea65-hook.jpg"}}},{"_id":"57dff26abf12fa171c000121","order":179,"slug":"cosmic-js-user-roles-and-permissions","title":"Cosmic User Roles and Permissions","content":"

Cosmic is an API-first cloud-based content management platform that makes it easy for teams of developers and content editors to build, deploy & update web applications, regardless of the application's programming language. Cosmic implements a natural flow from developer access to content editor access. Since the content management platform was built by a developer / content editor team who's worked together for years building web applications, the platform is geared for developers and content editors to collaborate more freely. User permissions are intuitive and compliment one another in the project workflow process. I'll take a brief look at the different access views within the Cosmic Dashboard. 

Cosmic provides three different user roles: Admin, Developer, Editor.

Adminaccess to settings, users & developer features
Developeraccess to developer & editor features
Editorcan add, edit & delete content with developer features hidden

My Global Dashboard View

In the screen capture above, you can see all of the buckets of content that I have been added to as a User. 

The simple breakdown to review account access & usage is as follows:

Bucket NamePlan TierMedia UsageLast Modified History# of Bucket UsersBucket OwnerJump to Dashboard

We'll use Carson Gibbons & Cosmic as the two sample buckets to dive into to display user management & user permissions. 

Carson Gibbons Bucket

In this bucket I am set up as the Bucket Admin, which automatically gives me Developer & Editor permission to control my content. I have access to items such as Web Hosting, Import / Export, Webhooks, User Management, Usage & Settings. 

Cosmic Bucket


In this bucket I am set up as the Bucket Editor, which gives me permission to create & contribute my content. I have access to publish new posts, control the author metafield within the post itself & draft or publish content. I do not have access to items such as Usage & Users. 

The decision for certain features not only being unavailable, but being hidden for a role such as an Editor, is to limit options & guide workflow. For instance, to control Metafields, the developer has access to manage the Titles and Keys, while the editor just sees the Value field.  Web Hosting and Usage are also hidden from editors to limit confusion.

If the websites and applications that we visit everyday are tailored to us as consumer segments, why aren't the tools that we use to publish content also tailored to our particular contributor types?

Read More:

New: Track Your API Requests

Build a Blog in 4 Steps

The Cosmic Stack


Three Ways to use The Cosmic Stack


How to Create an Intuitive Website Navigation Menu

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"value":"




If the websites and applications that we visit everyday are tailored to us as consumer segments, why aren't the tools that we use to publish content also tailored to our particular contributor types?
","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"c166c2d0-960c-11e6-8afd-2319bb61fbf1-users.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/c166c2d0-960c-11e6-8afd-2319bb61fbf1-users.jpg","imgix_url":"https://imgix.cosmicjs.com/c166c2d0-960c-11e6-8afd-2319bb61fbf1-users.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2016-09-19T14:12:58.051Z","created_by":"5716b504e9c686d006000073","created":"2016-09-19T14:12:58.052Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5716b504e9c686d006000073","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"




If the websites and applications that we visit everyday are tailored to us as consumer segments, why aren't the tools that we use to publish content also tailored to our particular contributor types?
","featured_image":{"url":"https://cdn.cosmicjs.com/c166c2d0-960c-11e6-8afd-2319bb61fbf1-users.jpg","imgix_url":"https://imgix.cosmicjs.com/c166c2d0-960c-11e6-8afd-2319bb61fbf1-users.jpg"}}},{"_id":"57d89d8d663e845a460032b3","order":181,"slug":"how-to-create-an-intuitive-website-navigation-menu","title":"How to Create an Intuitive Website Navigation Menu","content":"

In my previous post, Building with the Content Editor in Mind, I talked about how to best split up the content of a web page to be easily managed by a content editor.  In this article, I’m going to show you how to create an easy-to-manage website navigation menu using the powerful Cosmic Metafields.

Cosmic Metafields were designed partly with navigation in mind because navigation needs to be both flexible and nestable.  Cosmic Metafields allows you to create nestable data structures with parent / child relationships easily with a simple drag and drop in the CMS.  And the output from the Cosmic API makes building and managing a navigation menu for your website easier than ever.

Real (Estate) World Example

You can see we have two levels of navigation, a main level: Home, About, Property Types, Listings and a nested nav level: Residential and Commercial, child elements that belong to the Property Types main nav menu item.  If you've ever had to build a navigation menu like this and make it easily managed for a content editor in a CMS, you know that it is challenging.  But Cosmic has made this once challenging, time-consuming task easy to implement in any website codebase and intuitive to manage in the Cosmic CMS API.

Metafields to the Rescue

Let's now go step-by-step to create an easily managed, nested navigation menu, like the Real Estate Website navigation.  Login to follow along.

First we will create a new bucket (or use an existing bucket) then add an Object Type to store our navigation and other global elements which we will call Globals.


Next let's create a new object within our Global object type titled appropriately: Nav.

Since we will only be using the Metfields in this object, let's remove the Content editor in Nav by editing the Object Settings > Visibility Settings.

Now let's begin building our navigation.  First let's create a new Metafield for each Nav item on the first level.  This includes: Home, About, Property Types, Listings, etc.  Each Metafield value field will be the link that we want to navigate to.  (Home will go to \"/\", About to \"/about\" etc...)


Now the fun part, let's create our nested navigation beneath our Property Types main nav item.  To do this, create a new Metafield and drag it under the Property Types nav item.  You can nest the secondary nav item beneath any main nav item creating the parent / child relationship which we will use later when we retrieve our content from the API.

Our new navigation menu now looks like the following:

To see how easy it will be to add the navigation to our codebase,  let's look at the API endpoint of our nav object.

Notice that the nav object includes our menu items as a simple array of Metafields.  And Property Types has an additional array of children which store our sub navigation items.  For a developer, this is huge because it takes this once complex task of nested, managed navigation items and breaks it down into a simple parent / child relationship.  This makes implementation much easier.


Also, notice that the visual structure of the Metafields in the editor and the visual data structure in the JSON API are practically identical!

I hope you have enjoyed this article on how to easily build a website navigation using Cosmic Metafields.  If you have any comments or questions, please reach out to Cosmic on Twitter and join our Slack Community.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"

In this article, I’m going to show you how to create an easy-to-manage website navigation menu using the powerful Cosmic Metafields.  Because navigation needs to be both flexible and nestable Cosmic Metafields allows you to create nestable data structures with parent / child relationships easily with a simple drag and drop in the CMS.  Cosmic has made this once time-consuming task easy to implement in any website codebase and intuitive to manage in the Cosmic CMS API.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2016-09-14T00:45:01.211Z","created_by":"55767c3ffbcf5cbb13000001","created":"2016-09-14T00:45:01.211Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

In this article, I’m going to show you how to create an easy-to-manage website navigation menu using the powerful Cosmic Metafields.  Because navigation needs to be both flexible and nestable Cosmic Metafields allows you to create nestable data structures with parent / child relationships easily with a simple drag and drop in the CMS.  Cosmic has made this once time-consuming task easy to implement in any website codebase and intuitive to manage in the Cosmic CMS API.

"}},{"_id":"57d7ff8d663e845a46001c6c","order":182,"slug":"new-feature-track-your-api-requests","title":"New Feature: Track Your API Requests","content":"

We're excited to announce a new feature that allows you to easily monitor API usage and activity for your Cosmic-powered applications.  The new Usage section of your bucket provides an easy way to filter API requests by date and monitor spikes and dips in activity (screenshot below).



Click here to log in to your Cosmic account.

It is our hope that the new API Usage tool will help you and your team be more efficient as you build and host your Cosmic-powered applications. Only Admin users of each bucket will have access to the API Usage report within the Dashboard.

To access the API Usage report, navigate to:

Buckets > Your Bucket > Usage > Filter Date Range = API Usage Report


Read More:

Build a Blog in 4 Steps

Build a Sales Presentation App in 4 Steps

The Cosmic Stack

Three Ways to use The Cosmic Stack

Building With the Content Editor in Mind

Breaking the Mold: Taking Charge of Your Development Process



","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"

We're excited to announce a new feature that allows you to easily monitor API usage and activity for your Cosmic-powered applications.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"5ea47b80-79b8-11e6-9f50-c1e138141f9f-Screen Shot 2016-09-12 at 3.53.38 PM.png","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/5ea47b80-79b8-11e6-9f50-c1e138141f9f-Screen Shot 2016-09-12 at 3.53.38 PM.png","imgix_url":"https://imgix.cosmicjs.com/5ea47b80-79b8-11e6-9f50-c1e138141f9f-Screen Shot 2016-09-12 at 3.53.38 PM.png"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2016-09-13T13:30:53.872Z","created_by":"5716b504e9c686d006000073","created":"2016-09-13T13:30:53.872Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5716b504e9c686d006000073","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

We're excited to announce a new feature that allows you to easily monitor API usage and activity for your Cosmic-powered applications.

","featured_image":{"url":"https://cdn.cosmicjs.com/5ea47b80-79b8-11e6-9f50-c1e138141f9f-Screen Shot 2016-09-12 at 3.53.38 PM.png","imgix_url":"https://imgix.cosmicjs.com/5ea47b80-79b8-11e6-9f50-c1e138141f9f-Screen Shot 2016-09-12 at 3.53.38 PM.png"}}},{"_id":"57cd7a378315c7ab30000002","order":183,"slug":"cosmic-js-users-hit-500000-api-requests","title":"Cosmic Users Hit 500,000 API Requests","content":"

Cosmic, an API-first cloud-based content management platform, and its user base continues to grow in Public Beta, having hit 500,000 API requests a mere 6 weeks into Public Beta Launch. Cosmic entered Public Beta on July 19 of this year, and since has brokered multiple agency partner agreements, augmented 40% growth of its user base, onboarded paying customers and is now on pace to hit 1,000,000 API requests by late October. Cosmic currently has over 1,500 global users that represent 126 countries that have used the platform. Cosmic users represent a variety of industries, from interactive agencies and development shops to travel, healthcare, FinTech, banking, analytics, professional services & more. Cosmic Founders Tony Spiro and Carson Gibbons project exceeding 2,000 global users by mid to late October, coupled with the 1 Million API requests mark.

Cosmic Founder Tony Spiro attributes the recent growth of Cosmic to several items:

1. Developer Outreach in Public Beta

The new Cosmic Community allows users to easily sign up for the Cosmic Slack Channel, follow and engage with social channels and resources such as GitHub, Twitter & Facebook.

2. Content Creation / Curation

The Cosmic Founders actively contribute to the Cosmic Blog, and recently have received requests from agency partners to be able to contribute to the blog eco-system. 

3. Websites & Apps

In addition to displaying apps that represent various programming languages, Cosmic continues to push out vertical-specific Websites & Applications such as Medical Professional, Roofing Professional & Real Estate. 

4. Emerging Partner Program

Cosmic is rolling out its Partner Programs, which promote collaboration between Cosmic & agencies for content management and hosting on the Cosmic App Server, as well as designers & developers who want to contribute apps to the Cosmic App Store for a revenue share. 

RoadMap

Cosmic Founders Tony Spiro and Carson Gibbons say they plan to continue the iterative feedback loop that has grown the Cosmic user base, and will be seeking a seed fundraising round in Q4 of this year.

Cosmic is an API-first cloud-based content management platform that meets the demand for portable, scalable & flexible content management through web applications & websites. For more information about Cosmic, or to schedule a demo to learn more about the product, visit CosmicJS.com, or get in touch by contacting support@cosmicjs.com.

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"value":"

Cosmic, an API-first cloud-based content management platform, and its user base continues to grow in Public Beta, having hit 500,000 API requests a mere 6 weeks into Public Beta Launch.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2016-09-05T13:59:19.585Z","created_by":"5716b504e9c686d006000073","created":"2016-09-05T13:59:19.586Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5716b504e9c686d006000073","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

Cosmic, an API-first cloud-based content management platform, and its user base continues to grow in Public Beta, having hit 500,000 API requests a mere 6 weeks into Public Beta Launch.

"}},{"_id":"57bb08f6375171d87a002bd9","order":184,"slug":"building-with-the-content-editor-in-mind","title":"Building with the Content Editor in Mind","content":"

When building websites connected to a CMS, it is important that the content is structured as simply as possible for the end user to edit.  I call this user-first content development.   It benefits everyone – the content editor, the developer and the agency when the content editor is empowered with the easiest and most intuitive way to manage content.  This seems obvious, but this oversight happens all too often and results in confusion and ultimately a bad experience for the content editor.  When you build user-first, you are empowering everyone on your team to build the best possible product.

In this article I'm going to show you some basic ways to structure content for your websites that make content very easy to manage on the backend.   When you start with an easy-to-use CMS and structure your content intuitively, your content editor will be able to quickly and easily navigate through the CMS to edit content and will ultimately sing your praises.

Let's first look at a standard website layout.  For 99% of all websites you have the standard structure of Header, Main Content and Footer and it looks something like this:



When I look at the page layout above and consider how it will be managed in the CMS, I immediately translate this into two different object types: Global (items on all pages like the Header and Footer) and Page (Main Content).  In the Cosmic backend it will look something like this:



This is set up in a way that allows for easy communication with your content editor on how to edit the content on the pages of the website.  If they are looking to edit a page, they go into Pages. If they need to edit anything that is repeated across the entire website, they go into Globals.  For the developer, there's an easy way to scale Global items that will be reused across the site like logo, navigation, social links, etc.

Now let's say we want to add a hero image on the top of each page on the website.


Cosmic makes this really easy to do by using metafields.  To add a new metafield to all of our new and existing pages, we will go into our Object Type settings for our Pages and add an image metafield for hero.


Now each Page will have the image metafield hero available:


Let's say we also wanted to add the company's social links to Facebook, Twitter and LinkedIn.  This is really easy.  All we need to do is add a new Socials object in Globals and each social link will have its own text metafield.  It would look something like this:



As you can see, Cosmic makes it really easy to give your content editor the easiest and most intuitive content editing experience.  I hope you found these basic examples useful in getting started with user-first content development using Cosmic.  If you have any questions about how to further structure your content for easy handoff to content editors, please join our Slack channel, or reach out to us on Twitter.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"

When building websites connected to a CMS, it is important that the content is structured as simply as possible for the end user to edit.  I call this user-first content development.   It benefits everyone – the content editor, the developer and the agency when the developer makes sure the content editor is empowered with the easiest and most intuitive way to manage content.  This seems obvious, but this oversight happens all too often and results in confusion and ultimately a bad experience which is bad for everyone – the developer, the content editor and the agency.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created_at":"2016-08-23T14:15:18.627Z","created_by":"5357ef811693be2118000001","created":"2016-08-23T14:15:18.627Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

When building websites connected to a CMS, it is important that the content is structured as simply as possible for the end user to edit.  I call this user-first content development.   It benefits everyone – the content editor, the developer and the agency when the developer makes sure the content editor is empowered with the easiest and most intuitive way to manage content.  This seems obvious, but this oversight happens all too often and results in confusion and ultimately a bad experience which is bad for everyone – the developer, the content editor and the agency.

"}},{"_id":"57b4727e58574f4823003ba5","order":185,"slug":"three-easy-steps-for-rapid-prototyping","title":"Three Easy Steps for Rapid Prototyping","content":"


What is rapid prototyping?

Rapid prototyping is the process of quickly building a scale model for display to a client or partner, knowing that the prototype can be changed at a moment's notice. For a builder this could be an actual model, for a product it could be a mold model, and for an agency or development shop it could be a number of things. Many agencies will build rapid prototypes not just to display creative, websites & apps for clients, but to win the business in the first place by demonstrating a certain level of commitment to and understanding of the product or service at hand. Rapid prototyping allows the development team to participate in a faster feedback loop to get the best possible product while allowing the client to participate in the process. The constraints are usually time, money & technology infrastructure in terms of how that rapid prototype can be reviewed, and where. 


How are agencies currently handling rapid prototyping? 

In the creative agency world, there are numerous ways in which agencies will display creative work for their clients. Some have built proprietary galleries online that display comps pixel for pixel, some still print creative on 11" x 17" PDFs & others display a website example on a local server, hence forcing the clients of the agency to meet at the agency's offices for any type of digital presentation. There's nothing like displaying actual apps for clients to start planting vision seeds for how the creative will actually look and function in the wild.


Why use a web-based CMS? 

Cosmic is the ideal tool for rapid prototyping. Rather than displaying an idea for an application or website on your local server with the clients in your office for a brief meeting, or having printed screenshots of an app for display, simply build your app and quickly deploy on the Cosmic App Server, making it available for review on any device that has an internet connection. The client(s) having access anywhere allows them to provide feedback in real-time while also allowing the agency to quickly iterate on a design, content piece or structural component. The app can then be edited according to the client's direction and re-deployed with a custom domain for actual usage by the client once the rapid prototyping phase is over. 


Here are the three easy steps for agencies using Cosmic for rapid prototyping:

1. Integrate your GitHub repo with Cosmic 

2. Set up as many buckets as you would need for your rapid prototyping projects

3. Deploy buckets as the rapid prototype becomes ready for review 


Here are the three reasons Cosmic is best-suited for rapid prototyping projects:

1. No local server / stack set up to push to for display

2. Edit content in real time to adjust design accordingly (no lorem ipsum copy)

3. Once the rapid prototype is complete and approved, deploy on the Cosmic App Server with a custom domain

For more information on why Cosmic is the best solution for your rapid prototyping needs, read The Cosmic Stack to see the simplest content management stack on the market.

Cosmic is an API-first cloud-based CMS that gives developers and agencies portable, scalable & flexible content management solutions through its API that converts all content into JSON objects for consumption on any internet-connected device. 

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"value":"

Rapid prototyping is the process of quickly building a scale model for display to a client or partner, knowing that the prototype can be changed at a moment's notice. For a builder this could be an actual model, for a product it could be a mold model, and for an agency or development shop it could be a number of things. Many agencies will build rapid prototypes not just to display creative, websites & apps for clients, but to win the business in the first place by demonstrating a certain level of commitment to and understanding of the product or service at hand. Rapid prototyping allows the development team to participate in a faster feedback loop to get the best possible product while allowing the client to participate in the process. The constraints are usually time, money & technology infrastructure in terms of how that rapid prototype can be reviewed, and where.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"6ae9e010-648c-11e6-807e-57b9ff6a6d02-cosmicjs-prototyping.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/6ae9e010-648c-11e6-807e-57b9ff6a6d02-cosmicjs-prototyping.jpg","imgix_url":"https://imgix.cosmicjs.com/6ae9e010-648c-11e6-807e-57b9ff6a6d02-cosmicjs-prototyping.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created":"2016-08-17T14:19:42.623Z","status":"published","modified":"2016-08-21T03:50:34.367Z","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5716b504e9c686d006000073","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

Rapid prototyping is the process of quickly building a scale model for display to a client or partner, knowing that the prototype can be changed at a moment's notice. For a builder this could be an actual model, for a product it could be a mold model, and for an agency or development shop it could be a number of things. Many agencies will build rapid prototypes not just to display creative, websites & apps for clients, but to win the business in the first place by demonstrating a certain level of commitment to and understanding of the product or service at hand. Rapid prototyping allows the development team to participate in a faster feedback loop to get the best possible product while allowing the client to participate in the process. The constraints are usually time, money & technology infrastructure in terms of how that rapid prototype can be reviewed, and where.

","featured_image":{"url":"https://cdn.cosmicjs.com/6ae9e010-648c-11e6-807e-57b9ff6a6d02-cosmicjs-prototyping.jpg","imgix_url":"https://imgix.cosmicjs.com/6ae9e010-648c-11e6-807e-57b9ff6a6d02-cosmicjs-prototyping.jpg"}}},{"_id":"57a9edeb34d05c0c23000fe6","order":186,"slug":"three-ways-to-use-the-cosmic-stack","title":"Three Ways to Use The Cosmic Stack ","content":"


In last week's article, Tony told us about the ingredients in The Cosmic Stack, why it is so powerful and what its benefits are. Now that we've seen what The Cosmic Stack looks like, let's look at how we can customize our use of it. 

From a high level, you have three basic ways to use The Cosmic Stack. You have flexibility to use just the CMS API, the CMS API and your own app hosted on the Cosmic app server, or the CMS API with a pre-built content-ready app hosted on the Cosmic App Server.


1. Manage Content 

Stack: 

GitHub Repo
Hosting Server
Cosmic CMS API

See how Datalyze Solutions uses Cosmic to power their blog. 

This scenario will require a developer to sync the Cosmic API to your website or application. From then on, content managers can syndicate content to their heart's content. We've provided Client libraries to help you easily manage content for your website or app. 


2. Build, Deploy, Host & Manage Content 
Stack:
GitHub repo
Cosmic CMS API
Cosmic App Server

See how Ops Conf uses Cosmic to power their conference community app.

This scenario will require a developer to integrate your GitHub account with Cosmic & deploy the app. Content managers can get a head start in their dashboard while the dev team polishes the app's code in GitHub. Read more on app deployment and hosting through Cosmic. 


3. Deploy & Manage Pre-Built Apps 
Stack: 
Cosmic CMS API
Cosmic App Server

This scenario only requires anyone who likes an app and wants to see it online for their business, association or portfolio. Browse our content-ready apps.

The Cosmic Stack is flexible for teams & companies. Build, deploy, host, update, or simply customize your Cosmic Stack to fit your team's needs. We built Cosmic for one reason: to simplify the content management stack while making developers and content editors happy by putting content first. Read their testimonials here. 
","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}},{"value":"

In last week's article, Tony told us about the ingredients in The Cosmic Stack, why it is so powerful and what its benefits are. Now that we've seen what The Cosmic Stack looks like, let's look at how we can customize our use of it. 

From a high level, you have three basic ways to use The Cosmic Stack. You have flexibility to use just the CMS API, the CMS API and your own app hosted on the Cosmic app server, or the CMS API with a pre-built content-ready app hosted on the Cosmic App Server.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created":"2016-08-09T14:51:23.219Z","status":"published","modified":"2016-08-21T03:53:05.215Z","modified_at":"2020-10-02T02:07:53.246Z","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}},"teaser":"

In last week's article, Tony told us about the ingredients in The Cosmic Stack, why it is so powerful and what its benefits are. Now that we've seen what The Cosmic Stack looks like, let's look at how we can customize our use of it. 

From a high level, you have three basic ways to use The Cosmic Stack. You have flexibility to use just the CMS API, the CMS API and your own app hosted on the Cosmic app server, or the CMS API with a pre-built content-ready app hosted on the Cosmic App Server.

"}},{"_id":"57a241d13cbfe3912400061f","order":187,"slug":"the-cosmic-stack","title":"The Cosmic Stack","content":"

There is a powerful trend happening in technology.  It is a shift from confined, installed systems into a more free, micro-services economy.  This can be seen in the consumer space from people choosing to stream music instead of downloading MP3s, choosing to Uber to work rather than drive their personal car and people choosing to order groceries to their door from Amazon instead of going to the grocery store.

Cosmic is taking this empowering concept to web development.

We no longer need nor should we be putting our content in a box.  There is a vast array of devices from desktop to mobile to watches to cars that need flexible and easily accessible content.  The only way to provide content to these destinations is to start our content in the place it will eventually need to go: the API.  Cosmic provides you with a powerful CMS API that will scale your digital properties and your business.

What does the Cosmic Stack look like?

Since we have seen enormous benefits by removing the installed CMS, we decided to remove web hosting as well.  Now your application stack only needs the Cosmic CMS API and a code repository.  What was once a mess of connections between various applications and servers is now boiled down to simply:

1. GitHub repo
2. Cosmic CMS API
3. Cosmic app server

Why is this so powerful?

The Cosmic Stack is big because you no longer need to maintain or configure infrastructure for your website or app.  You now only have two places to review work, Cosmic and GitHub.  No longer do you have to worry about code being deployed improperly or someone pushing up the wrong branch to your hosted server.  Everything is set to be put into a process of checks and balances within your team.  No longer do you have to worry about files or data being out of sync between testing, staging and live instances.  All content, data and files are synced to the Cosmic API.

What’s the benefit?

The benefit is in development hours saved and sanity.  No installation.  No configuration.  Just content and code.  Your content is hosted in Cosmic and your code is pushed from your GitHub repo to the Cosmic app server.

Some folks using the Cosmic Stack have reported a 75% reduction in dev time spent and an overall faster, less complicated and more streamlined development process.

The Cosmic Stack helps teams be more efficient and can dramatically increase your project's bottom line.  Try the Cosmic Stack out and let us know what you think.  Join us on our Slack channel or reach out to me on twitter.  I look forward to seeing what you build!

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":null,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"value":"

There is a powerful trend happening in technology.  It is a shift from confined, installed systems into a more free, micro-services economy.  This can be seen in the consumer space from people choosing to stream music instead of downloading MP3s, choosing to Uber to work rather than drive their personal car and people choosing to order groceries to their door from Amazon instead of going to the grocery store.

","key":"teaser","title":"Teaser","type":"html-textarea","children":null},{"value":"deefe380-5e40-11e6-89ef-3ff7807a5a96-db.jpg","key":"featured_image","title":"Featured Image","type":"file","children":null,"url":"https://cdn.cosmicjs.com/deefe380-5e40-11e6-89ef-3ff7807a5a96-db.jpg","imgix_url":"https://imgix.cosmicjs.com/deefe380-5e40-11e6-89ef-3ff7807a5a96-db.jpg"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created":"2016-08-04T19:11:13.127Z","status":"published","modified":"2016-08-21T03:53:24.254Z","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5716b504e9c686d006000073","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

There is a powerful trend happening in technology.  It is a shift from confined, installed systems into a more free, micro-services economy.  This can be seen in the consumer space from people choosing to stream music instead of downloading MP3s, choosing to Uber to work rather than drive their personal car and people choosing to order groceries to their door from Amazon instead of going to the grocery store.

","featured_image":{"url":"https://cdn.cosmicjs.com/deefe380-5e40-11e6-89ef-3ff7807a5a96-db.jpg","imgix_url":"https://imgix.cosmicjs.com/deefe380-5e40-11e6-89ef-3ff7807a5a96-db.jpg"}}},{"_id":"578e1fc465ca0db05c000b40","order":188,"slug":"were-live-on-product-hunt","title":"We're Live on Product Hunt!","content":"


The big day has arrived, we are now on Product Hunt announcing our Public Beta!  We would love for you to show your support and go to https://www.producthunt.com/tech/cosmic-js and upvote!  Also, after you vote, click \"Get It\" for $20 credit towards your Cosmic account.  Just a little something to say thank you for all of the generous support and feedback!


Cheers,
Tony Spiro | Carson Gibbons
Cosmic Founders

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":false,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created":"2016-07-19T12:40:36.935Z","status":"published","modified":"2016-07-19T12:44:26.597Z","modified_at":"2020-10-02T02:07:53.246Z","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}}}},{"_id":"578585b41621de245c0002d2","order":189,"slug":"cosmic-js-founders-featured-on-the-next-level-show","title":"Cosmic Founders Featured on The Next Level Show","content":"


Cosmic Founders Tony Spiro and Carson Gibbons were featured on The Next Level Show, a Dallas-based business talk show that features Founders and CEOs. The founders discussed their historical pain points with installed content management systems, as well as their partnership, private beta updates, and the frontier of cloud-based CMS APIs that both speed up the development cycle and add to the bottom line. Stream the audio file or watch the interview here.

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":false,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created":"2016-07-13T00:05:08.405Z","status":"published","modified":"2016-07-13T14:35:26.208Z","modified_at":"2020-10-02T02:07:53.246Z","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}}}},{"_id":"577f9cf75182ae8134000a15","order":190,"slug":"video-tutorial-one-click-ssl","title":"Video Tutorial: One-Click SSL","content":"

Adding SSL to your website couldn't be easier with Cosmic.  Simply go to your bucket > Settings > Deploy Web App > Add SSL to Domains and click the \"Add SSL\" button (upgrade if necessary).  In a few seconds, all of your domains and subdomains on your deployed application will have the security of SSL from Let's Encrypt.  Plus the certs will automatically renew, so you will never have to update your SSL again!  Here is a short tutorial to show you how easy it is:


","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":false,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created":"2016-07-08T12:30:47.224Z","status":"published","modified":"2016-07-08T14:03:57.696Z","modified_at":"2020-10-02T02:07:53.246Z","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}}}},{"_id":"577ac40a187f34166b00000b","order":191,"slug":"video-tutorial-localization","title":"Video Tutorial: Localization","content":"

In this video I walk you through adding localization to your Cosmic object types.  This allows you to add versions of your content in different languages and locales.

There is also a Localization Example App available on the  Cosmic Apps page.


","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":false,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created":"2016-07-06T20:16:10.011Z","status":"published","modified":"2016-07-06T14:04:49.881Z","modified_at":"2020-10-02T02:07:53.246Z","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}}}},{"_id":"577ac48c187f34166b00000c","order":192,"slug":"video-tutorial-webhooks","title":"Video Tutorial: Webhooks","content":"

In this video tutorial, I show you how to add webhooks to your Cosmic bucket.  Cosmic makes it easy for you to add webhooks, allowing you to send data to the endpoints of your choice whenever content is changed.  This is useful for triggering static site builds, posting a message on Slack, or communicating with any 3rd party API whenever content has changed in your bucket.


","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":false,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created":"2016-07-05T20:18:20.450Z","status":"published","modified":"2016-07-05T13:39:31.820Z","modified_at":"2020-10-02T02:07:53.246Z","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}}}},{"_id":"576838e4163172890e000029","order":194,"slug":"cms-woes-how-a-brand-manager-found-a-cloud-based-solution","title":"CMS Woes? How A Brand Manager Found a Cloud-Based Solution ","content":"

Brand Managers manage, well, brands.  Seems simple enough right?  It does in title and theory alone.  Managing a brand means managing the brand’s tone, voice, messaging, consumer segmentation, price points, marketing, advertising and all of the subsequent elements and assets that fall out of such an engagement.  Having managed brands for years myself, I can attest to the magnitude of the job at hand.  Once the client has agreed upon a general direction, it becomes the brand manager’s responsibility to ignite passion and results from the internal agency team that services the account.  As my workload would increase month over month as business heated up or an account was grown, I went through the whole Automation | Delegation | Elimination routine to see what I could cut out of my schedule as busy work.  The problem?  I was only one person.  I could only affect hours tallies on my end, but had little to no influence over design, development, copywriting & production. 


The area that always seemed to be the weak link in terms of staying on budget was in development.  Boutique agencies struggle to attract qualified talent with their long work hours and subpar compensation, and then after taking a gamble on a more junior talent that is developed over time, retention is a beating.  Companies line up with development jobs that pay 2X, sometimes 3X what a boutique agency is willing to part with for that developer’s compensation package.  This is all before taking into account staging servers, hosting servers, CMS logins, local installations of CMS systems and all of the red tape and bureaucracy associated that can bog down a productive workflow.  As a result, my quotes back to clients for websites, microsite, landing pages and applications were always a bit higher than they were expecting.  I started searching for a cloud-based solution to my CMS woes to cut out some of the middle men and see if there was an easier way to 'get this digital property live'. 

I found Cosmic.  Had I been told as a Brand Manager that I could eliminate the local CMS, the hosting server and the shared logins of content editing, I would have seen the value immediately.  No longer having to build APIs on a per-CMS / per-client basis, no longer having to build out a proprietary backend, yet still attaining the same custom-value would have been a lifesaver and a half for a brand manager focused on the bottom line.  It would have easily cut my back end developers’ hours estimates by 40%, eliminated costly hosting servers and would have streamlined content-centric employees within the agency to not have to deal with the red tape of updating content within a traditional CMS. 

Whether we picked out a content-ready application or plugged GitHub into Cosmic, I’m seeing time and cost savings at every turn.  Music to a brand manager’s ears, and music to a boutique agency’s margin and bottom line.  As it turns out, it also benefits the client as their content is put first, their content is pushed live more quickly and is devourable globally on any device.

","metafields":[{"object_type":"authors","value":"5768b27f163172890e00002e","key":"author","title":"Author","type":"object","children":false,"object":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z"}}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created":"2016-06-20T18:41:40.761Z","status":"published","modified":"2016-06-21T15:57:52.964Z","modified_at":"2020-10-02T02:07:53.246Z","metadata":{"author":{"_id":"5768b27f163172890e00002e","slug":"carson-gibbons","title":"Carson Gibbons","content":"","metafields":[{"value":"e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","key":"profile_picture","title":"Profile Picture","type":"file","children":null,"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},{"value":"carsongibbons","key":"username","title":"Username","type":"text","children":null}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:20:31.394Z","status":"published","modified_at":"2019-06-05T14:20:53.314Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2019-06-05T14:20:53.314Z","metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg","imgix_url":"https://imgix.cosmicjs.com/e1ff6690-231f-11e8-a5ff-2f0fc8889184-7yVDmZBl_400x400.jpg"},"username":"carsongibbons"}}}},{"_id":"575dd542cfc2ed6e1200001f","order":195,"slug":"how-to-deploy-a-website-with-a-custom-domain-using-cosmic-js","title":"How to Deploy a Website with a Custom Domain Using Cosmic","content":"

Update

This article goes over features (web deployment, custom domains) that are now deprecated. We now recommend that you deploy your websites and apps to your preferred hosting providers.


Cosmic is a powerful CMS API that allows you to manage content for your websites and applications faster and easier.  But did you know that you can also use Cosmic to deploy code to your website (in any language) from any GitHub repository?  In addition to deploying content and code, starting today you can also add unlimited domains to your deployed application.  This is revolutionary because it means that moving forward all you need to launch your website is a git repository, a domain name provider and Cosmic!  No more hosting server necessary!  I’ve added a couple of screencasts for your viewing.  Let’s get started.

Create a Bucket

After logging in to your Cosmic account, create a new bucket.  After creating your new bucket, you will be prompted to install an app.

Install an App

Let's go ahead and install an app, but you could just as easily skip this step and deploy your own application pointed to your Cosmic bucket.  After installing your app, you will be prompted to deploy the application.

Deploy the App

Next click "Deploy Web App" to launch the web application to http://[your-bucket-slug].cosmicapp.co.  Once you do this it will take about a minute for the application to deploy on a custom instance of the Cosmic app server.  While this is working its magic, let's add our custom domains…

Add Custom Domains

The Cosmic app server subdomain is great for development and staging, but when you go live, you're going to want to add our own custom domains.  Cosmic makes this incredibly easy by providing the option to add custom domains to your deployed application.  Here are the 4 easy steps:

1. Go to Settings > Deploy Web App > Add Custom Domains (upgrade your account if needed)
2. Add your custom domains
3. Click "Set Domains"
4. Go to your domain name registrar's website and point your A Name Records to the Cosmic app server located at 162.243.13.186

Now navigate to your domain and notice that you now have your application hosted at your custom domain!  Add as many domains / subdomains as you need!  Whenever you need to deploy changes to the app, just push the changes up to your GitHub repository and click "Redeploy Web App".

Cosmic now gives you the power to deploy a website faster and more nimbly than any other system.  And all you need is a git repository, a domain name provider and Cosmic!
","metafields":[{"children":null,"type":"object","title":"Author","key":"author","id":"b5LDPUHcqL","value":"5768b253163172890e00002c","object_type":"authors","object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"children":null,"type":"html-textarea","title":"Teaser","key":"teaser","id":"18jc7zAuU0","value":""},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"lVqS2ZMBCT","value":"","url":null,"imgix_url":null},{"children":null,"type":"textarea","title":"SEO Meta Description","key":"seo_meta_description","id":"fPwf0lIVF8","value":""},{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"XVscCXAtKv","value":""}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created":"2016-06-14T21:33:54.237Z","status":"published","modified":"2016-06-21T03:22:05.064Z","modified_at":"2020-10-02T02:07:53.246Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2020-09-26T21:29:20.160Z","unpublish_at":null,"metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"","featured_image":{"url":null,"imgix_url":null},"seo_meta_description":"","published_date":""}},{"_id":"573dcc4a174961562c000015","order":196,"slug":"imgix-image-processing-now-available-on-cosmic-js","title":"Imgix Image Processing Now Available on Cosmic","content":"

Imgix is an image processing service that gives you some serious power when it comes to handling images for your websites and apps.  Their dynamic image processing API lets you crop, scale, rotate, watermark, add style and more to your images\r\nby simply adding a query string to the image url.

I'm happy to say that Imgix processing is now available for all your images uploaded to Cosmic!  Just look for the additional property (imgix_url\r\n) in your bucket's API endpoints and you can begin using this powerful image processing service.


Here's an example:

Let's say you have a very large image:

https://imgix.cosmicjs.com/14f4f800-48c1-11ed-a07b-05c6717a9348-sebastian-unrau-sp-p7uuT0tw-unsplash-1.jpg

And you need the same image in a different size to accommodate mobile devices with lower bandwidth.  With the power of Cosmic and Imgix all you need to do is add ?w=500 to the end of the imgix_url and you now have a 500 pixel wide image, perfect for mobile devices!

https://imgix.cosmicjs.com/14f4f800-48c1-11ed-a07b-05c6717a9348-sebastian-unrau-sp-p7uuT0tw-unsplash-1.jpg?w=500

Imgix is normally a paid service, but we are giving it to you for free for all free and paid Cosmic plans.  

Log in or sign up for Cosmic to manage content for your\r\nwebsites and apps faster and easier, now with the dynamic power of Imgix!

","metafields":[{"children":null,"type":"object","title":"Author","key":"author","id":"ZLYbf8OssP","value":"5768b253163172890e00002c","object_type":"authors","object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}},{"children":null,"type":"html-textarea","title":"Teaser","key":"teaser","id":"DqptQdclui","value":"

I'm happy to say that Imgix processing is now available for all your images uploaded to Cosmic!

"},{"children":null,"type":"file","title":"Featured Image","key":"featured_image","id":"wpUvMCZnUj","value":"14f4f800-48c1-11ed-a07b-05c6717a9348-sebastian-unrau-sp-p7uuT0tw-unsplash-1.jpg","url":"https://cdn.cosmicjs.com/14f4f800-48c1-11ed-a07b-05c6717a9348-sebastian-unrau-sp-p7uuT0tw-unsplash-1.jpg","imgix_url":"https://imgix.cosmicjs.com/14f4f800-48c1-11ed-a07b-05c6717a9348-sebastian-unrau-sp-p7uuT0tw-unsplash-1.jpg"},{"children":null,"type":"textarea","title":"SEO Meta Description","key":"seo_meta_description","id":"u1fZZGXNKu","value":"I'm happy to say that Imgix processing is now available for all your images uploaded to Cosmic!"},{"children":null,"type":"date","title":"Published Date","key":"published_date","id":"UBq4P4WgtW","value":"2016-05-24"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created":"2016-05-24T14:23:06.823Z","status":"published","modified":"2016-06-21T03:22:15.699Z","modified_at":"2022-10-11T14:18:17.786Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-10-11T14:18:17.786Z","unpublish_at":null,"metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}},"teaser":"

I'm happy to say that Imgix processing is now available for all your images uploaded to Cosmic!

","featured_image":{"url":"https://cdn.cosmicjs.com/14f4f800-48c1-11ed-a07b-05c6717a9348-sebastian-unrau-sp-p7uuT0tw-unsplash-1.jpg","imgix_url":"https://imgix.cosmicjs.com/14f4f800-48c1-11ed-a07b-05c6717a9348-sebastian-unrau-sp-p7uuT0tw-unsplash-1.jpg"},"seo_meta_description":"I'm happy to say that Imgix processing is now available for all your images uploaded to Cosmic!","published_date":"2016-05-24"}},{"_id":"57262d88c6a2d0a20a000001","order":197,"slug":"new-feature-deploy-private-github-repos-to-the-web","title":"New Feature: Deploy Private GitHub Repos to the Web","content":"

You can now use Cosmic to deploy your GitHub private repos to the web.  All you have to do is sign up or sign in using your GitHub account and authorize access to your private repos. (Don't worry, we only access your private repos when you are ready to deploy them to the web).


After you authorize access the process is super easy.  Just go to Your Bucket > Settings > Deploy Web App and choose which private (or public) GitHub repo you would like to deploy. You can also deploy an app from any public Git repo url (make sure your app follows the Heroku deployment guidelines).


Click Deploy Web App and your private repo will be deployed to the world!

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":false,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created":"2016-05-01T16:23:36.041Z","status":"published","modified":"2016-06-21T03:31:23.380Z","modified_at":"2020-10-02T02:07:53.246Z","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}}}},{"_id":"56f0ca24b3c813ae11000026","order":199,"slug":"how-to-add-an-editable-news-feed-widget-to-your-website","title":"How to add an editable news feed widget to your website","content":"

Cosmic is great for hosting content for an entire website or application, but can also be used to add quick, dynamic content elements to any existing website.  In this short tutorial, I'll show you how you can add a news feed widget to your website in a few short steps.  Let's get to it:

1. Sign in to your Cosmic account.

2. After signing in, select \"Add object type\" in the left side nav of your bucket's dashboard and create a \"News\" object type.  Call the object type \"News\" (plural) and \"Article\" (singular).  Then add your articles (you can add content or metafields later, they're not required for this example).


3. In your HTML file add a div that will receive the news feed then add the Cosmic browser client to get your bucket's content.  You can download the Cosmic Browser Client on GitHub.  Next, in only a few lines of code, you can get the articles from your bucket.  Here is a quick JS Fiddle of everything you will need:

You can see how powerful this is.  A developer can add these dynamic areas to any portion of an existing site and enjoy the benefits of a CMS API.  Any non-dev team member can be invited to edit this content in the Cosmic admin dashboard quickly and easily with no database or server-side installation necessary!


","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":false,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created":"2016-03-22T04:29:24.271Z","status":"published","modified":"2016-06-21T03:31:45.888Z","modified_at":"2020-10-02T02:07:53.246Z","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}}}},{"_id":"56e0fdbab28b6a1a28000001","slug":"4-reasons-to-choose-a-cms-api-over-an-installed-cms","title":"4 Reasons to Choose a CMS API Over an Installed CMS","content":"

Choosing a content management system for a project is a very important decision.  Here are four reasons why you should choose a CMS API over a traditional installed CMS.  Doing so will benefit yourself, your developers and your organization.



Freedom

When your content comes from an API, you free your developers up to build applications using whatever programming language they want.  This is huge for developers.  Unlike a traditional installed CMS that locks the developer into a certain programming language, by using a CMS API, a developer on your team can build the web application in React, Rails, Node.js, PHP, etc.  When you want to bring a Swift and Java developer onto the team they can easily serve the same content from the CMS API to the iOS and Android applications.  This leads to faster development cycles and increased company productivity.


Speed

When you build your applications around a CMS API you gain an amazing speed advantage over traditional installed CMSs.  Let's say you have a new web project and need to install three environments: development, staging and production.  By deciding to use a CMS API, you've now divided the time it takes to setup a CMS by three.  By choosing to go with a CMS API you can now serve the content to all three instances from the same CMS API and not worry about configuration and data migrations between three different instances.


Low Overhead

By not having to maintain a database and file system to handle content, you can keep your server light-weight.  All you need on your server is your application and all you need to worry about is the performance of your application.  This saves money on server overhead as well as development turnaround.


Money Savings

There are obviously higher server costs when you use an traditional installed CMS which demands more RAM and file storage on your server.  But the real cost savings when you choose a CMS API is in the development time saved.  When you outsource your content needs to a dedicated CMS API you allow your team to spend less time on all of the headaches that come with an installed CMS.  Developer time is extremely valuable and when you remove the task of configuring and managing an installed CMS, their time can be better focused on other tasks that provide a higher return. 


CMS APIs are the future of content management.  By switching to a CMS API now, you will increase the freedom, speed and cost efficiency of your projects, increase company productivity and will make it easier for developers and content creators to make better application experiences.

It is the mission of Cosmic to be the most intuitive CMS API available.  Sign up now and see how you and your team can greatly benefit from using a CMS API to power your applications.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":false,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created":"2016-03-10T04:53:14.077Z","status":"published","modified":"2016-06-21T03:31:55.428Z","order":200,"modified_at":"2020-10-02T02:07:53.246Z","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}}}},{"_id":"56d396c41d92fee665000003","slug":"update-easier-metafields","title":"Update: Easier Metafields","content":"

It's now even easier to add metafields to your objects.  Available metafields include: plain text, plain textarea, html textarea, select dropdown, object select (for object connections), image / file and date.

Sign in and check out the available metafield options that make it so easy to add dynamic content to your websites and apps.


","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":false,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created":"2016-02-29T00:54:28.660Z","status":"published","modified":"2016-06-21T03:32:10.529Z","order":201,"modified_at":"2020-08-10T14:04:22.001Z","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}}}},{"_id":"56c9fb03c0958c285a000030","slug":"install-and-deploy-content-ready-apps","title":"Install and Deploy Content-Ready Apps","content":"

In an effort to make it easier to create content-ready applications as well as manage content, you can now install and deploy applications using Cosmic.  It's the fastest and easiest way to go from 0 to content-ready web app (about 2 minutes!) without any server or configuration hassle.  It's really cool and only requires a few steps:

1. Sign in to your Cosmic account
2. Choose a bucket then navigate on the left sidenav to Settings > Apps
3. Select your app and click \"Install\"
4. Go to Settings > Deploy Web App and click \"Deploy Web App\"



In about 2 minutes your application will be deployed and connected to your Cosmic bucket.  Add and edit content easily and review from the deployed location.  Choose from one of the provided apps or add the link to the public git repo to clone your own app into deployment.

You can deploy your applications from any GitHub, BitBucket or any other public repo. Your application will be deployed to it's own isolated Docker container using Dokku, a Docker-powered mini-Heroku. This means that you can build your app in any language and easily deploy it from Cosmic!  You can find out more about how to make apps Dokku compatible by reading Heroku documentation. 

If you would like to contribute apps to be available on Cosmic, please contact support@cosmicjs.com.  Happy building!

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":false,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created":"2016-02-21T17:59:31.599Z","status":"published","modified":"2016-06-21T03:32:51.486Z","order":202,"modified_at":"2020-10-02T02:07:53.246Z","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}}}},{"_id":"56c0e57617ae3b4447000003","slug":"new-feature-save-objects-as-draft","title":"New Feature: Save Objects As Draft","content":"

Cosmic is on a mission to be the easiest way to manage content for your websites and applications, the latest update includes the ability to save your Cosmic objects as a draft.  This means you can continue to perfect your content privately and when it's ready to publish, simply click \"Save\" and the object will then be published and available on your bucket's API endpoints.  

This is another feature we've added in response to feedback we're getting during the Cosmic private beta release.  We'll keep rolling out updates in response to feedback, so please keep the feedback coming!

If you have not signed up, sign up now for Cosmic and join us during the private beta release as we continue to build out the best content management platform to handle needs for your websites and applications.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":false,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created":"2016-02-14T20:37:10.799Z","status":"published","modified":"2016-06-21T03:33:00.784Z","order":203,"modified_at":"2020-10-02T02:07:53.246Z","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}}}},{"_id":"568acdf86cfdd5ce3e000043","slug":"easy-cosmic-js-browser-example","title":"Easy Cosmic Browser Example","content":"

It's now faster and easier to make the content on your webpages dynamic.  The Official Cosmic JavaScript Client now comes with a minified browser version that allows you to add the power of Cosmic cloud-hosted content into your HTML page with a single file.  Download the Cosmic browser file then copy and paste this real-working browser example into an html file to check it out:

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <title>Cosmic Easy Browser Example</title>\r\n</head>\r\n<body>\r\n<h1 id=\"title\">If you see this, something isn't working...</h1>\r\n<div id=\"content\"></div>\r\n<div id=\"metafields\"></div>\r\n<script src=\"cosmicjs.browser.min.js\"></script>\r\n<script>\r\nvar config = {\r\n  bucket: {\r\n    slug: 'easy-browser-example'\r\n  },\r\n  object: {\r\n    slug: 'home'\r\n  }\r\n};\r\nCosmic.getObject(config, config.object, function(err, res) {\r\n  var object = res.object;\r\n  document.getElementById('title').innerHTML = object.title;\r\n  document.getElementById('content').innerHTML = object.content;\r\n  var metafields = object.metafields;\r\n  var images = '';\r\n  metafields.forEach(function(metafield){\r\n    images += '<h2>' + metafield.title + '</h2>';\r\n    images += '<img width=\"300\" src=\"https://www.cosmicjs.com/uploads/' + metafield.value + '\"/>';\r\n    images += '<br><br>';\r\n  })\r\n  document.getElementById('metafields').innerHTML = images;\r\n});\r\n</script>\r\n</body>\r\n</html>

Sign in to your Cosmic account and connect this example to one of your buckets to see how easy it is to create powerful CMS-powered websites and app with Cosmic.


","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":false,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created":"2016-01-04T19:54:32.580Z","modified":"2016-06-21T03:33:11.067Z","status":"published","order":204,"modified_at":"2020-10-02T02:07:53.246Z","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}}}},{"_id":"568a94306cfdd5ce3e000041","slug":"new-add-user-roles-to-your-cosmic-js-bucket","title":"New! Add User Roles to Your Cosmic Bucket","content":"


Cosmic now gives you the ability to add different user roles to your bucket.  The different roles available are:

Admin
Has access to settings, users and developer features.

Developer
Has access to developer features and editor features.

Editor
Can add, edit and delete content with developer features hidden.

As an Admin or Developer, this makes it easier to share Cosmic with the Editor on your team.  For the Editor role, the powerful developer features are hidden and allows them to focus on their job of managing content.  Sign in to your Cosmic account to add your team and collaborate on building something great, now even easier.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":false,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created":"2016-01-04T15:48:00.083Z","order":205,"modified":"2016-06-21T03:33:59.930Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}}}},{"_id":"56820f43ddcf72c93b000019","slug":"building-a-cms-powered-app-in-the-browser-in-2-minutes","title":"Building a CMS-Powered Browser App in 2 Minutes","content":"

In this short tutorial I'll show you how easy it is to add a CMS to a simple browser app using the Cosmic API.   It will literally take you 2 minutes to build.  Our app will consist of just 3 files:

1. index.html
2. app.js
2. package.json

Let's get started shall we?  In your terminal of choice run the following commands:

mkdir easy-browser-example
cd easy-browser-example
npm install cosmicjs
npm install browserify -g

Now let's build our index.html file.  Run the following command in your terminal:

vim index.html

Add the following to our index.html file:

<!DOCTYPE html>
<html>
<head>
  <title>Cosmic Easy Browser Example</title>
</head>
<body>
  <h1 id=\"title\">If you see this, something isn't working...</h1>
  <div id=\"content\"></div>
  <div id=\"metafields\"></div>
  <script src=\"app.browser.js\"></script>
</body>
</html>

We could just as easily use jQuery and Ajax to render our content, but for this example we will use the official Cosmic Node.js package. Now create a file called app.js:

vim app.js

And add the following to app.js:

// app.js
var Cosmic = require('cosmicjs')
const bucket = { slug: 'easy-browser-example' }
const object = { slug: 'home' }
Cosmic.getObject({ bucket }, object, (err, res) => {\r\n  var object = res.object
  document.getElementById('title').innerHTML = object.title
  document.getElementById('content').innerHTML = object.content
  document.getElementById('metafields').innerHTML = '<pre>' + JSON.stringify(object.metafields, null, 2) + '</pre>'
})

Notice that in our app.js file we are returning content from the Cosmic API, and then attaching our content to the DOM elements at \"title\",\"content\" and \"metafields\".

Next we'll add a package.json file that will allow us to add some simple scripts to \"browserify\" our app.js file:

vim package.json

Add the following to a new file titled package.json:

{
  \"name\": \"easy-browser-example\",
  \"main\": \"app.js\",
  \"scripts\": {
    \"browserify\": \"browserify app.js -o app.browser.js\"
  }
}

Now let's run our our scripts to bundle our code into the browser.  Run the following script which will bundle the new file to app.browser.js:

npm run browserify

Now view the index.html file in your browser and you will see that the content from our example bucket \"easy-browser-example\" can be seen and the metafields data is rendered to a string to show you what data is available.  Taking this a step further, you can see how powerful this can be if you add React or Angular into the mix.

I hope you enjoyed this short tutorial.  If you have not already, you can sign up for a Cosmic account, and begin playing with this example using content from your own bucket.  Thanks and happy building!


","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":false,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created":"2015-12-29T04:42:43.159Z","modified":"2016-06-21T03:34:16.729Z","order":206,"status":"published","modified_at":"2020-10-02T02:07:53.246Z","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}}}},{"_id":"5640c5ddadbc98b75b00004c","slug":"new-starter-buckets","title":"New Starter Buckets!","content":"

It's now easier to get started using Cosmic as your content platform.  After signing in, click \"Add new bucket\" and you will see that you now have the option to install a starter bucket.  

After you click \"Install\", your starter bucket will be imported to a new bucket and your app zip file will be downloaded to your machine.  At that point you can extract the files and configure your new app to connect to your new Cosmic bucket.  

This is meant to help familiarize you with how to set up your bucket to best manage content for your websites and apps.  Sign in and enjoy!

Screenshot:

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":false,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created":"2015-11-09T16:12:13.924Z","order":207,"modified":"2016-06-21T03:33:29.281Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}}}},{"_id":"5625cf1a2047fbdf4500001f","slug":"helpful-resources-and-examples","title":"Helpful Resources and Examples","content":"

Did you know that we have some great resources available over on our GitHub page?  Use these packages, examples and clients to help you build your next big project or contribute to an existing one.

Tools

1. Cosmic Node Package

- This is a great package for your Node.js app.  
Easily add this to your JS setup with npm install cosmicjs

2. Cosmic Browser Package

- This is a great package for your your browser-based apps.  
Easily add this to your JS setup with npm install cosmicjs-browser

3. Cosmic PHP Client

- This is the official PHP client that makes adding a CMS to your PHP app a breeze.

Example Websites

1. Astral (PHP)

- This is a really cool PHP single page application built using the PHP client on an html5up.net frontend.

2. Blog (React)
- This is a single page React app that uses React Router and the Flux pattern.  The pages load fast!

I hope you find that these links and resources help you learn more about building with the Cosmic content API.  If you have any questions about the API, you can learn more in the Cosmic API Documentation.
","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":false,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created":"2015-10-20T05:20:26.705Z","modified":"2016-06-21T03:33:46.584Z","order":208,"status":"published","modified_at":"2020-10-02T02:07:53.246Z","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}}}},{"_id":"56029e6229d514902f000001","slug":"official-private-beta-release","title":"Official Private Beta Release","content":"

Hello World!   We are officially in private beta mode.  Lots of work has been done up until this point to make Cosmic the best cloud-hosted content platform.  Sign up for an account and please send us some feedback.  Here is a copy of my blog post on the release:

Cosmic is a cloud-hosted content platform that makes it easy to manage content for websites and applications.

I built Cosmic because I saw a problem with scaling content across platforms and devices.  After years of building applications using installed content management systems, I became tired of rebuilding APIs to handle content distribution from a website to microsites, landing pages and applications.  I decided to build one API to handle all content outlets for easier and faster distribution, and Cosmic was born.

Cosmic allows for easy content management and distribution by giving you the power to store content as JSON objects in an API that can be delivered anywhere.


Cosmic is API-first, meaning your content can be distributed across all devices and platforms from your website, to microsites and landing pages, to native mobile applications which allows for faster development cycles.   And when you use Cosmic to serve data and files, application servers can be kept light-weight which saves on server costs.

Get started

Click here to sign up for a Cosmic account, it’s completely free to sign up.

Cosmic is currently in private beta but you will be notified when your account has been activated.

Start building

Click here to check out the available clients for JavaScript and PHP on GitHub.

Currently there are available clients for JavaScript and PHP to help you get started building scalable, content-ready applications.

View examples

Click here to view code for websites built using Cosmic.

I’ll post some tutorials on this blog soon to show you how easy it is to use Cosmic to manage content for your next project, so stay tuned.  If you have any questions, please post them below, or reach out to me on twitter or email me.

Thanks,
Tony Spiro

Click here to go to Cosmic
Click here to go to Cosmic on GitHub

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":false,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created":"2015-09-23T12:43:14.512Z","order":209,"modified":"2016-06-21T03:34:41.205Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}}}},{"_id":"558215424642b40c59000004","slug":"content-management-process-frontend-or-backend-first","title":"Content Management Process: Frontend or Backend First?","content":"
A very interesting article was published to one of my favorite web dev blogs today. Where Content Management Systems Fit Into the Process goes into a discussion which I think is seldom in the limelight in the development community, what is the best process in connecting your site to a CMS?  The author Geoff Graham presents three options in building a dynamic, CMS-powered website:

Option 1: The CMS Comes First Method


Option 2: The All-At-Once Method


Option 3: The CMS Comes Last Method


Previously, when building sites using other CMS platforms I would prefer to use the \"CMS Comes Last Method\" because I would be able to work out a lot of bugs, change my mind and add new features in the static HTML/CSS build phase before pouring in the more time-consuming programming / CMS phase.  

But with Cosmic I can use any one of these methods and feel confident that I can easily make edits, change my mind and add new features to a CMS-powered website.  There's power and reassurance in flexibility and Cosmic offers the most flexible way to add content to your website.

Sign up to get a private beta invite to begin checking out how easy it is to add dynamic content to your website or app.
","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":false,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created":"2015-06-18T00:48:02.985Z","modified":"2016-06-21T03:34:56.648Z","order":210,"status":"published","modified_at":"2020-10-02T02:07:53.246Z","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}}}},{"_id":"5528d48499c6a6f75a000001","slug":"relational-vs-on-the-fly-content-management","title":"Relational VS On the Fly Content Management","content":"

Variety is the spice of life and it is essential to flexible content management.  Currently I'm seeing the trend of data storage move from relational to on-the-fly structures.  Relational databases like MSSQL and MySQL are being less favored and more developers are choosing to move to NoSQL databases like MongoDB.  By more developers I include myself because this is a very flexible and intuitive way to store data.  Key / Value, or as I like to call on-the-fly, content storage is the next stage of content management.  Relational structures bind where on-the-fly sets free.  This is the theory behind Cosmic metafields.

Content items are like people in that they come in all shapes, sizes and colors.  Cosmic objects allow you to create metafields which give you the power to add on-the-fly key / value pairs.  Create infinite metafields and drag and drop them into parent / child relationships. 

I find it so much easier to keep track of my key / value pairs per object rather than managing a relational schema.  I believe this is the new way of on-the-fly content management that will allow for flexibility and scalability of future content.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":false,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created":"2015-04-11T08:00:04.121Z","order":211,"modified":"2016-06-21T03:35:07.000Z","status":"published","modified_at":"2020-10-02T02:07:53.246Z","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}}}},{"_id":"54d31299d1e78c203f000002","slug":"content-managment-without-a-site","title":"Content Managment Without A Site","content":"

Cosmic has an understandable hierarchy for content management and can be used as a stand-alone content organizer while a website is being built. Buckets, Object Types, Metafields and Files can act as a sitemap or content portal for a team wanting to organize information more effectively during the development process.  And when the site is ready for development and launch, the API is ready to begin delivering the pre-populated content saving time and money.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":false,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created":"2015-02-05T06:50:01.448Z","modified":"2016-06-21T03:35:14.990Z","order":212,"status":"published","modified_at":"2020-10-02T02:07:53.246Z","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}}}},{"_id":"5426f3912b18c42924000001","slug":"the-rise-of-the-modular-product-era","title":"The Rise of the Modular Product Era","content":"

After reading a very well done article on TechCrunch \"Don't Dismiss Developers\", a thought came to mind about our current developer technology ecosystem.  The most successful products don't try to build every bit of functionality in-house.  Instead, great companies find ways to build their technology upon a stack of specially designed services that offload complex tasks.  This is something that I call the \"Modular Product Era\".

Currently this is happening at the server level with cloud computing, file storage and database offloading to service companies like Amazon and Digital Ocean.  But there is also the application layer that is now being outsourced to different companies to leverage specially crafted and designed products that integrate easily into an application stack.  Much like in a community if you want the best bread, the best meat and the best cheese, you don't go to the supermarket and you obviously don't try to make all of these complex foods yourself, instead you go the local baker, butcher and cheese store.  And these specialized modules are becoming easier to incorporate into existing technology.

Ethan Kurzweil illustrates this, \"For example, when you add your credit card to Uber by taking a picture of it, you’re actually using a cool piece of technology developed by card.io (now part of PayPal) to OCR the credit card number and expiration date and then after every ride, Uber makes an API call to Braintree Payments to process your transaction.\"

In this new Modular Product Era, we will continue to see companies becoming more specialized and providing a more focused service at a lower price point.  This is very exciting because this lowers the barrier to entry even further for growing technology startups.

Cosmic is being built with these principals in mind.  We want to build the best product for developers to easily integrate content management into any application.  We will do this through using a technology stack that leverages the Modular Product ecosystem.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":false,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created":"2014-09-27T17:27:45.788Z","order":213,"modified":"2016-06-21T03:35:23.485Z","files":"","status":"published","modified_at":"2020-10-02T02:07:53.246Z","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}}}},{"_id":"53b8d54d86269e930a000001","slug":"happy-independence-weekend","title":"Happy Independence Weekend","content":"

Here I am again, writing late at night with more thoughts on Cosmic and what it could do for developers and content creators.  For some reason I keep thinking about Doogie Houser and that theme song...

So here's what I'm thinking: Everything is going the way of subscription services.  Music, movies, tv, enterprise software, you name it there is a company out there that will offer it to you without you having to download software, install an app, populate a database.  Everything is moving toward a service economy.

This is going to continue because the trend of human nature has always been toward better customer service, the less a customer has to do, the better the service.

With this in mind, comes the idea that your website's content doesn't need to be locked into a database.  It doesn't need to be something that has to be installed.  Your content can live freely as a service and can be accessed anywhere a device is needing to connect.  This means your website, your app, your business is allowed to be accessed anywhere and it's content is easily transported to wherever it needs to go.  This is huge.

APIs are now the DNA of the internet.  They connect everything from your favorite blogs to your tv to your facebook news feed to your twitter stream to everything you access on the web and any content in any smart device, period.  APIs are content.  

So here's the question: If APIs are our content platforms, why aren't we managing our content in the APIs?  Well now you can.

You can now manage the content of your website or app in Cosmic on a fast and secure content framework independently of any downloaded software or managed system.  

Welcome to the 21st century.  Your content is still king and it is now delivered everywhere... 

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":false,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created":"2014-07-06T04:49:17.679Z","order":214,"modified":"2016-06-21T03:35:32.709Z","files":"","status":"published","modified_at":"2020-10-02T02:07:53.246Z","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}}}},{"_id":"539a752fae7280e55b000001","slug":"two-words-that-describe-a-great-product","title":"Two Words That Describe a Great Product","content":"

I've been thinking a lot about what makes a great product / UI / feature set.  I've narrowed it down to two words: 

Beautifully easy.

I also keep coming back to the idea of user empathy.  Whenever I hit a road block in trying to do something with Cosmic, I make a note of it and try to tear down the road block.  I've noticed that when I come back to the place where the roadblock was and find a nice bridge, I'm a happier user.  And I think in software development that's the highest goal you can attain.


","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":false,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created":"2014-06-13T03:51:11.704Z","modified":"2016-06-21T03:35:41.097Z","files":"","order":215,"status":"published","modified_at":"2020-10-02T02:07:53.246Z","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}}}},{"_id":"5391442d5569d7fd68000001","slug":"build-philosophy","title":"Build Philosophy","content":"

Don’t project, just build it cool and easily usable.

Make it the best option available.

Make it the product YOU want to use.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":false,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created":"2014-06-06T04:31:41.892Z","order":216,"modified":"2016-06-21T03:36:01.023Z","files":"","status":"published","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}}}},{"_id":"538a1a7e1450dd9f7b000001","slug":"second-blog-post","title":"Second Blog Post","content":"

This is just a test to see how the content lays out...

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":false,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created":"2014-05-31T18:07:58.190Z","order":217,"modified":"2016-06-21T03:36:09.459Z","files":"","status":"published","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}}}},{"_id":"538a1181c7a1819e77000001","slug":"first-blog-post","title":"First Blog Post","content":"

This is blog number one on the new Cosmic blog page.  Hopefully this will help me find the best way to help developers and publishers use this platform easier and more efficiently.

","metafields":[{"object_type":"authors","value":"5768b253163172890e00002c","key":"author","title":"Author","type":"object","children":false,"object":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null}}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"articles","created":"2014-05-31T17:29:37.191Z","modified":"2016-06-21T03:36:19.678Z","files":"","order":218,"status":"published","modified_at":"2020-10-02T02:07:53.246Z","metadata":{"author":{"_id":"5768b253163172890e00002c","slug":"tony-spiro","title":"Tony Spiro","content":"","metafields":[{"children":null,"type":"file","title":"Profile Picture","key":"profile_picture","id":"PgnhhF3xDz","value":"48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},{"children":null,"type":"text","title":"Username","key":"username","id":"p3oj3wNRDy","value":"tony"}],"bucket":"538a0d0f8ceb85ee75000001","type_slug":"authors","created":"2016-06-21T03:19:47.683Z","status":"published","modified_at":"2022-05-01T15:56:40.885Z","modified_by":"5357ef811693be2118000001","publish_at":null,"published_at":"2022-05-01T15:56:40.885Z","thumbnail":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","unpublish_at":null,"metadata":{"profile_picture":{"url":"https://cdn.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg","imgix_url":"https://imgix.cosmicjs.com/48767520-c967-11ec-bea6-99436435ce05-96ea1870-b755-11ec-a642-7195085ee56f-tux-cropped.jpeg"},"username":"tony"}}}}],"total":448}