In this short tutorial I'll show you how easy it is to add a CMS to a simple browser app using&nbsp;the&nbsp;Cosmic API. &nbsp; It will literally take you 2 minutes to build. &nbsp;Our app will consist of just 3 files: 1. index.html 2. app.js 2. package.jsonLet's get started shall we? &nbsp;In your terminal of choice run the following commands: <pre>mkdir easy-browser-example cd easy-browser-example npm install cosmicjs npm install browserify -g</pre>Now let's build our index.html file. &nbsp;Run the following command in your terminal: <pre>vim index.html</pre>Add the following to our index.html file:<pre class="prettyprint prettyprinted">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &nbsp; &lt;title&gt;Cosmic Easy Browser Example&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &nbsp; &lt;h1 id="title"&gt;If you see this, something isn't working...&lt;/h1&gt; &nbsp; &lt;div id="content"&gt;&lt;/div&gt; &nbsp; &lt;div id="metafields"&gt;&lt;/div&gt; &nbsp; &lt;script src="app.browser.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</pre>We could just as easily use jQuery and Ajax to render our content, but for this example we will use the <a href="https://www.npmjs.com/package/cosmicjs" target="_blank">official Cosmic Node.js package</a>. Now create a file called app.js:<pre>vim app.js</pre>And add the following to app.js: <pre class="prettyprint prettyprinted">// app.js var Cosmic = require('cosmicjs') const bucket = { slug: 'easy-browser-example' } const object = { slug: 'home' } Cosmic.getObject({ bucket }, object, (err, res) =&gt; {
 var object = res.object &nbsp; document.getElementById('title').innerHTML = object.title &nbsp;&nbsp;document.getElementById('content').innerHTML = object.content &nbsp; document.getElementById('metafields').innerHTML = '&lt;pre&gt;' + JSON.stringify(object.metafields, null, 2) + '&lt;/pre&gt;' })</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:<pre>vim package.json</pre>Add the following to a new file titled package.json:<pre class="prettyprint prettyprinted">{ &nbsp;&nbsp;"name": "easy-browser-example", &nbsp; "main": "app.js", &nbsp; "scripts": { &nbsp; &nbsp; "browserify": "browserify app.js -o app.browser.js" &nbsp; } }</pre>Now let's run our our scripts to bundle our code into the browser. &nbsp;Run the following script which will bundle the new file to app.browser.js: <pre>npm run browserify</pre>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. &nbsp;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. &nbsp;If you have not already, you can <a href="https://www.cosmicjs.com/signup" target="_blank" style="line-height: 1.42857; background-color: rgb(255, 255, 255);">sign up for a Cosmic account</a>, and begin playing with this example using content from your own bucket. &nbsp;Thanks and happy building!

Building a CMS-Powered Browser App in 2 Minutes

New! Add User Roles to Your Cosmic Bucket

It's now faster and easier to make the content on your webpages dynamic. &nbsp;The <a href="https://www.npmjs.com/package/cosmicjs" target="_blank">Official Cosmic JavaScript Client</a>&nbsp;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. &nbsp;<a href="https://raw.githubusercontent.com/cosmicjs/cosmicjs-node/master/cosmicjs.browser.min.js" target="_blank">Download the Cosmic browser file</a> then copy and paste this real-working browser example into an html file to check it out:<pre class="prettyprint prettyprinted" style="line-height: 1.42857;">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
 &lt;title&gt;Cosmic Easy Browser Example&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1 id="title"&gt;If you see this, something isn't working...&lt;/h1&gt;
&lt;div id="content"&gt;&lt;/div&gt;
&lt;div id="metafields"&gt;&lt;/div&gt;
&lt;script src="cosmicjs.browser.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
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 += '&lt;h2&gt;' + metafield.title + '&lt;/h2&gt;';
 images += '&lt;img width="300" src="https://www.cosmicjs.com/uploads/' + metafield.value + '"/&gt;';
 images += '&lt;br&gt;&lt;br&gt;';
 })
 document.getElementById('metafields').innerHTML = images;
});
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</pre><a href="https://www.cosmicjs.com/login" target="">Sign in to your Cosmic account</a> and connect this example to one of your buckets to see how easy it is to create powerful CMS-powered websites and app&nbsp;with Cosmic.

Easy Cosmic Browser Example

New Feature:  Save Objects As Draft

In an effort to make it easier to&nbsp;create <a href="https://www.cosmicjs.com/apps" target="">content-ready applications</a> as well as&nbsp;manage content, you can now install and deploy applications using Cosmic. &nbsp;It&#39;s the fastest and easiest way to go from 0 to content-ready web app (about 2 minutes!) without any server or configuration hassle. &nbsp;It&#39;s really cool and only requires a few steps:1.&nbsp;<a href="https://www.cosmicjs.com/login" target="">Sign in to your Cosmic account</a> 2. Choose a bucket then navigate on the left sidenav to Settings &gt; Apps 3. Select your app and click &quot;Install&quot; 4. Go to Settings &gt; Deploy Web App and click &quot;Deploy Web App&quot; <img src="https://www.cosmicjs.com/uploads/fffcf1c0-d97b-11e5-b608-d73fce26bef8-apps.png" style="width: 100%; max-width: 600px; height: 405px;" class="fr-fil fr-dib"> In about 2 minutes your application will be deployed and connected to your Cosmic bucket. &nbsp;Add and edit content easily and review from the deployed location.&nbsp;<a href="https://www.cosmicjs.com/apps" target="">&nbsp;Choose from one of the provided apps</a> 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&#39;s own isolated Docker container using&nbsp;<a href="http://dokku.viewdocs.io/dokku/" target="_blank">Dokku</a>, a Docker-powered mini-Heroku.&nbsp;This means that you can build your app in any language and easily deploy it from Cosmic! &nbsp;You can find out more about how to make apps Dokku compatible by reading&nbsp;<a href="https://devcenter.heroku.com/start" style="line-height: 1.42857; background-color: rgb(255, 255, 255);" target="_blank">Heroku documentation</a>.&nbsp;If you would like to contribute apps to be available on Cosmic, please contact&nbsp;<a href="http://mailto:support@cosmicjs.com" style="line-height: 1.42857; background-color: rgb(255, 255, 255);" target="_blank">support@cosmicjs.com</a>. &nbsp;Happy building!

Install and Deploy Content-Ready Apps

Update: Easier Metafields

Choosing a content management system for a project is a very important decision. &nbsp;Here are four reasons why you should&nbsp;choose a <a href="https://www.cosmicjs.com" target="">CMS API</a> over a traditional installed CMS. &nbsp;Doing so will benefit&nbsp;yourself, your&nbsp;developers and your organization.<img src="https://www.cosmicjs.com/uploads/678df770-e6e3-11e5-9c05-b17f70344e7b-vShYrVhsZw.gif" style="width: 1058px;"> <h4> </h4><h4>Freedom</h4>When your content comes from an API, you free your developers up to build applications using whatever programming language they want. &nbsp;This is huge for developers. &nbsp;Unlike a traditional installed CMS that locks the developer into a certain programming language, by using a CMS API, a&nbsp;developer on your team can build the web application in React, Rails, Node.js, PHP, etc. &nbsp;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. &nbsp;This leads to faster development cycles and increased company productivity.<h4> </h4><h4>Speed</h4><div>When you build your applications around a CMS API you gain an amazing speed advantage over traditional installed CMSs. &nbsp;Let's say you have a new web project and need to install three&nbsp;environments:&nbsp;development, staging and production. &nbsp;By deciding to use a CMS API, you've now divided the time it takes to setup a CMS by three. &nbsp;By choosing to go with a&nbsp;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.</div><h4> </h4><h4>Low Overhead</h4>By not having to maintain a database and file system to handle content, you can keep your server light-weight. &nbsp;All you need on your server is your application and all you need to worry about is the performance of your application. &nbsp;This saves money on server overhead as well as development turnaround.<h4> </h4><h4>Money Savings</h4>There are obviously higher server costs when you use an traditional installed CMS which demands more RAM and file storage on your server. &nbsp;But&nbsp;the real cost savings&nbsp;when you choose a CMS API is in the development time saved. &nbsp;When you outsource your content needs to a dedicated CMS API you allow your team&nbsp;to spend less time on all of the headaches that come with an installed CMS. &nbsp;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.&nbsp; CMS APIs are the future of content management. &nbsp;By switching to a CMS API now, you will&nbsp;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. &nbsp;<a href="https://www.cosmicjs.com/signup" target="_blank">Sign up now</a> and see how you and your team can greatly benefit from using a CMS API to power your applications.

4 Reasons to Choose a CMS API Over an Installed CMS

How to add an editable news feed widget to your website

You can now use&nbsp;Cosmic to&nbsp;deploy your&nbsp;GitHub&nbsp;private repos&nbsp;to the web. &nbsp;All you have to do is&nbsp;<a href="https://www.cosmicjs.com/signup" style="line-height: 1.42857; background-color: rgb(255, 255, 255);" target="_blank">sign up&nbsp;</a>or&nbsp;<a href="https://www.cosmicjs.com/login" style="line-height: 1.42857; background-color: rgb(255, 255, 255);" target="_blank">sign in</a>&nbsp;using your GitHub account and authorize access to your private repos. (Don&#39;t worry, we only access your private repos when you are ready to deploy them to the web).<img src="https://www.cosmicjs.com/uploads/e8ecb620-0fc5-11e6-8705-db68e8821ac0-github-access.png" style="width: 100%; max-width: 622px;" class="fr-fil fr-dib"> After you authorize access the process is super easy. &nbsp;Just go to Your Bucket &gt; Settings &gt; Deploy Web App and choose which private (or public) GitHub repo you would like to deploy.&nbsp;You can also deploy an app from any public Git repo url&nbsp;(make sure your app follows the&nbsp;<a href="https://devcenter.heroku.com/" style="line-height: 1.42857; background-color: rgb(255, 255, 255);" target="_blank">Heroku deployment guidelines</a>).<img src="https://www.cosmicjs.com/uploads/3c08c440-0fba-11e6-8705-db68e8821ac0-deploy.png" style="width: 100%; max-width: 569px;" class="fr-fil fr-dib"> Click Deploy Web App and your private repo will be deployed to the world!

Start building today