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

Building a CMS-Powered Browser App in 2 Minutes


In this short tutorial I'll show you how easy it is to add a CMS to a simple browser app using the Cosmic JS 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 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="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 JS 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) => { 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 JS 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 JS account, and begin playing with this example using content from your own bucket.  Thanks and happy building!


You may also like


Cosmic JS 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 JS 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 JS browser client to get your bucket's content.  You can download the Cosmic JS 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 JS admin dashboard quickly and easily with no database or server-side installation necessary!


In this installment of the Cosmic JS 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.

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.

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.

Introducing the Developer / Editor Toggle View to your Cosmic JS Dashboard. 

We’re excited to announce Extensions, a powerful new way to create custom experiences using Cosmic JS.  With Cosmic JS 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 JS.