Build a CMS-Powered Browser App in 2 Minutes

Published Dec 12, 2017
Build 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
  3. package.json

Let’s get started. In your terminal of choice run the following commands:
Screen Shot 2017-12-12 at 4.37.23 PM.png

Now let’s build our index.html file. Run the following command in your terminal:
Screen Shot 2017-12-12 at 4.29.22 PM.png

Add the following to our index.html file:
Screen Shot 2017-12-12 at 4.29.48 PM.png

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:
Screen Shot 2017-12-12 at 4.31.06 PM.png

And add the following to app.js:
Screen Shot 2017-12-12 at 4.31.35 PM.png

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:
Screen Shot 2017-12-12 at 4.32.25 PM.png

Add the following to a new file titled package.json:
Screen Shot 2017-12-12 at 4.32.46 PM.png

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:
Screen Shot 2017-12-12 at 4.32.53 PM.png

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.

Cosmic JS offers an intuitive API that can deliver content to any website or application. This gives you the freedom to build your application using any programming language and allows for easier scaling within your development team. Get started by reading the documentation.

This article was written by Tony Spiro and originally appeared on the
Cosmic JS Blog.

Discover and read more posts from Carson Gibbons
get started