Cosmic JS Blog Stay tuned for community news, company announcements and updates from the Cosmic JS team.

Introducing Gatsby Preview for Cosmic JS


by Tony Spiro on November 26, 2019

This article was originally published on the Gatsby Blog.

We’re excited to announce the official release of Gatsby Preview for Cosmic JS. This new integration enables you to add powerful content preview functionality to your Cosmic JS Gatsby website.


Getting Started

  1. First go to the Gatsby Getting Started Page and follow the links for Cosmic JS.
  2. Select the Cosmic JS-powered Gatsby Blog
  3. You will then be asked for your GitHub and Cosmic JS authentication, so make sure you have both accounts set up (sign up for Cosmic JS here).
  4. After onboarding, go to any Post in your Cosmic JS Bucket and find the big, beautiful, purple button to preview your content. 


Cosmic JS Gatsby Preview Screenshot


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 content-creation workflow.

Cosmic JS Gatsby Preview Screenshot


How did this integration happen?

The Cosmic JS / 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 from 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 JS 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 features 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 JS 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 JS + Gatsby stack combo. So if you have any suggestions on ways we can improve, please let us know in the Cosmic JS Slack channel or on our Twitter.


Happy building!

— Tony and the Cosmic Team

You may also like


In this tutorial I'm going to show you how to create a simple blog using Node.js and Cosmic JS.  This is going to be the fastest and most light-weight blog you have ever created.  Let's get started.

In this article, I will show you how you can use Cosmic JS 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 JS API.

Cosmic JS 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. 

We're excited to ship an enhancement to Media Management within Cosmic JS. 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. 

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

It's now faster and easier to make the content on your webpages dynamic.  The Official Cosmic JS JavaScript Client now comes with a minified browser version that allows you to add the power of Cosmic JS cloud-hosted content into your HTML page with a single file.  Download the Cosmic JS browser file then copy and paste this real-working browser example into an html file to check it out:

<!DOCTYPE html>
<html>
<head>
  <title>Cosmic JS 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="cosmicjs.browser.min.js"></script>
<script>
var config = {
  bucket: {
    slug: 'easy-browser-example'
  },
  object: {
    slug: 'home'
  }
};
Cosmic.getObject(config, config.object, function(err, res) {
  var object = res.object;
  document.getElementById('title').innerHTML = object.title;
  document.getElementById('content').innerHTML = object.content;
  var metafields = object.metafields;
  var images = '';
  metafields.forEach(function(metafield){
    images += '<h2>' + metafield.title + '</h2>';
    images += '<img width="300" src="https://cosmicjs.com/uploads/' + metafield.value + '"/>';
    images += '<br><br>';
  })
  document.getElementById('metafields').innerHTML = images;
});
</script>
</body>
</html>

Sign in to your Cosmic JS 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 JS.