In this short tutorial I’ll show you how easy it is to add a CMS to a simple browser app using the . It will literally take you 2 minutes to build. Our app will consist of just 3 files: Cosmic JS API 1. index.html2. app.js2. package.json Let’s get started. In your terminal of choice run the following commands: mkdir easy-browser-examplecd easy-browser-examplenpm install cosmicjsnpm 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 _The official client module for Cosmic JS. This module helps you easily add dynamic content to your website or…_www.npmjs.com cosmicjs Now create a file called app.js: vim app.js And add the following to app.js: // app.jsvar Cosmic = require('cosmicjs')const bucket = { slug: 'easy-browser-example' }const object = { slug: 'home' }Cosmic.getObject({ bucket }, object, (err, res) => {var object = res.objectdocument.getElementById('title').innerHTML = object.titledocument.getElementById('content').innerHTML = object.contentdocument.getElementById('metafields').innerHTML = '<pre>' + JSON.stringify(object.metafields, null, 2) + '</pre>'}) Notice that in our app.js file we are returning content from the , and then attaching our content to the DOM elements at “title”,”content” and “metafields”. Cosmic JS API 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 or into the mix. React Angular I hope you enjoyed this short tutorial. If you have not already, you can , 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 . sign up for a Cosmic JS account the documentation This article was written by and originally appeared on the . Tony Spiro Cosmic JS Blog Recommended Reading: _In this tutorial I’m going to show you how to create a simple blog using React, GraphQL and Cosmic JS. This is going to…_hackernoon.com How to Build a Simple Blog Using React and GraphQL

Twitter

Life is Good Builds a React / Node.js Gratitude Wall on Cosmic JS

Build a CMS-Powered Browser App in 2 Minutes

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

5 Things to Know When Building a Content-Driven Application

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

10 Threats to an Open API Ecosystem

10 Indications That You Should Invest in Automation Via APIs

10 Best Practices for Securing Your API

The Noonification: Getting Your API Into Production (10/28/2022)

5 Things to Know When Building a Content-Driven Application

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

10 Threats to an Open API Ecosystem

10 Indications That You Should Invest in Automation Via APIs

10 Best Practices for Securing Your API

The Noonification: Getting Your API Into Production (10/28/2022)

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps