<div class="loading">A very interesting article was published to one of my favorite web dev blogs today.&nbsp;<a href="https://css-tricks.com/where-content-management-systems-fit-into-the-process/" target="_blank">Where Content Management Systems Fit Into the Process</a>&nbsp;goes into a discussion which I think is seldom in the limelight in the development community, what is the best process in connecting your site to a CMS? &nbsp;The author&nbsp;Geoff Graham presents three options in building a dynamic, CMS-powered website: </div><h4 style="font-family: 'Open Sans', sans-serif; color: rgb(51, 51, 51);">Option 1: The CMS Comes First Method</h4><img class="" data-type="image/jpeg" data-title="cms-method-first.jpg" src="https://www.cosmicjs.com/uploads/b238da00-1552-11e5-b761-c732d76a78aa-cms-method-first.jpg"><div> <h4>Option 2:&nbsp;The All-At-Once Method</h4></div><div><img class="" data-type="image/jpeg" data-title="cms-method-venn.jpg" src="https://www.cosmicjs.com/uploads/e14d9dd0-1552-11e5-b761-c732d76a78aa-cms-method-venn.jpg" style="line-height: 1.42857143;"> </div><div><h4>Option 3:&nbsp;The CMS Comes Last Method</h4></div><img class="" data-type="image/jpeg" data-title="cms-method-last.jpg" src="https://www.cosmicjs.com/uploads/f933eee0-1552-11e5-b761-c732d76a78aa-cms-method-last.jpg"><div> </div><div>Previously, when building sites using other CMS platforms I would prefer to use the "CMS Comes Last Method" because I would be able to work out a lot of bugs, change my mind and add new features in the static HTML/CSS build phase before pouring in the more time-consuming programming / CMS phase. &nbsp;</div><div> </div><div>But with Cosmic I can use any one of these methods and feel confident that I can easily make edits, change my mind and add new features to a CMS-powered website. &nbsp;There's power and reassurance in flexibility and Cosmic offers the most flexible way to add content to your website.</div><div> </div><div><a href="https://www.cosmicjs.com/signup" target="_blank">Sign up to get a private beta invite</a> to begin checking out how easy it is to add dynamic content to your website or app.</div>

Content Management Process: Frontend or Backend First?

Official Private Beta Release

Helpful Resources and Examples

New Starter Buckets!

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!

Start building today