<img src="https://www.cosmicjs.com/uploads/d510d080-98cf-11e6-8afd-2319bb61fbf1-html.jpg" data-filename="https://www.cosmicjs.com/uploads/d510d080-98cf-11e6-8afd-2319bb61fbf1-html.jpg" style="width: 758px;" class="fr-fic fr-dii"> <h2>Update</h2>Check out the <a href="https://www.cosmicjs.com/knowledge-base/jamstack-cms">Jamstack CMS knowledge base</a> page to learn how you can use Cosmic to build a static websites site using <a href="https://www.cosmicjs.com/articles?q=gatsbyjs" rel="noopener noreferrer" target="_blank">Gatsby</a>, <a href="https://www.cosmicjs.com/articles?q=Nuxt.js">Nuxt.js</a>, <a href="https://www.cosmicjs.com/articles?q=gridsome">Gridsome</a>, and more.<a href="https://www.cosmicjs.com/articles?q=gatsbyjs"><img src="https://imgix.cosmicjs.com/1931bf40-8479-11e8-9cb3-a15ae07f1c62-Xuq8DypK_400x400.jpg" style="width: 100px; margin-right: 20px;" class="fr-fic fr-dii"></a>
<a href="https://www.cosmicjs.com/articles?q=gridsome"></a>
<a href="https://www.cosmicjs.com/articles?q=Nuxt.js"><img src="https://imgix.cosmicjs.com/2d15d4f0-9300-11ea-838a-0523b52a08cb-nuxt-square.svg" data-name="nuxt-square.svg" style="width: 100px;margin-right: 20px;" class="fr-fic fr-dii"></a>
<a href="https://www.cosmicjs.com/articles?q=Gridsome"><img src="https://cdn.cosmicjs.com/02c54f60-b24e-11ea-a522-15a7eafcdedf-gridsome-cms-icon.jpg" style="width: 100px;" class="fr-fic fr-dii"></a>Continue reading for an example using <a href="https://www.npmjs.com/package/metalsmith" rel="noopener noreferrer" target="_blank">Metalsmith</a>. <div style="text-align: left;">Static websites have been around for awhile, like since the beginning of the internet (the web used to be all static websites). Now we&rsquo;re seeing a trend that is bringing these HTML-centric websites back, why? &nbsp;Because HTML renders really fast
when you don&rsquo;t have a database or a server-side language slowing things down. &nbsp;That&rsquo;s not to say that programming languages should be done away with, because pretty much every major website you visit has some sort of server-side language
and database attached to it. &nbsp;But for smaller websites that don&rsquo;t involve things like user session management or time-sensitive dynamic data, a static site will do, and actually may be more ideal.</div> In this article I&rsquo;m going to show you how to build a static website that gives you the best of both worlds: &nbsp;A website that is both dynamically powered by the Cosmic API and also a static website that can be edited using Markdown files. &nbsp;As a bonus, you can also setup automatic builds using Webhooks. TL;DR<a href="http://static-website.cosmicapp.co/" target="_blank">View the Static Website demo here</a>. <a href="https://github.com/cosmicjs/static-website" target="_blank"></a> <a href="https://github.com/cosmicjs/static-website" target="_blank">View the Static Website codebase on GitHub here</a>. <a href="https://www.cosmicjs.com/apps/static-website"></a> <a href="https://www.cosmicjs.com/apps/static-website">View the Static Website App page on Cosmic</a>. The Problem With MarkdownA lot of static website processes involve translating Markdown to HTML. &nbsp;And developers love Markdown, for good reason: &nbsp;Markdown allows developers to save time by using a shorthand language that translates into HTML.But most non-technical people would rather not have to learn Markdown to edit content. &nbsp;Most content editors would rather use an <a href="https://www.cosmicjs.com/" style="background-color: rgb(255, 255, 255);">intuitive content management system</a>.
That&rsquo;s where Cosmic comes in. API-Powered, Static WebsiteIn building our Cosmic-powered static website, our goal is to make it easy for developers to build the website and easy for non-developers to edit and deploy content. &nbsp;For editors, adding new content will be as easy as going into the Cosmic Dashboard, adding a new Page, editing the different content areas and clicking Save. &nbsp;For developers, they will still have the benefit of using Markdown. &nbsp;By building our website this way, we can get the whole team involved. &nbsp;Our static website will have the best of both worlds: A fast, static website that is easily managed by a developer using Markdown files, or content editor using the Cosmic <a href="https://www.cosmicjs.com/">CMS API</a>. Getting StartedTo build our API-powered static website, we will need a few things:1. A build process that converts the API response into static pages.2. A rebuild process that makes it easy to rebuild our app after content edits.3. The ability to create pages using Markdown.To follow along with the steps <a href="https://github.com/cosmicjs/static-website" target="_blank">download the Static Website on GitHub</a>. The Build ProcessTo handle our static website&#39;s files and rebuild process we&rsquo;ll use Node.js, specifically the Express framework for our light-weight server. &nbsp;In our <code>app.js</code> file we have the following:<pre class="prism">var buildSite = require(&#39;./build-site&#39;)
buildSite()
var express = require(&#39;express&#39;)
var app = express()
app.set(&#39;port&#39;, process.env.PORT || 3000)
app.use(express.static(&#39;build&#39;))
app.get(&#39;/rebuild-site&#39;, (req, res) =&gt; {
 buildSite()
 res.end(&#39;Site rebuilt!&#39;)
})
app.post(&#39;/rebuild-site&#39;, (req, res) =&gt; {
 buildSite()
 res.end(&#39;Site rebuilt!&#39;)
})
app.get(&#39;*&#39;, (req, res) =&gt; {
 res.redirect(&#39;/404&#39;)
})
app.listen(app.get(&#39;port&#39;) || 3000, () =&gt; {
 console.info(&#39;==&gt; 🌎 Go to http://localhost:%s&#39;, app.get(&#39;port&#39;))
})</pre>There&rsquo;s a few things happening. &nbsp;First we&rsquo;re initiating the build process right on app startup. &nbsp;Our static files will be served from the /build folder which will also be the root of our application. Other RoutesGET /rebuild-site will rebuild the website.POST /rebuild-site is used for our <a href="https://www.cosmicjs.com/blog/adding-webhooks-in-4-steps" target="_blank">Cosmic Webhooks</a>.GET /* When a route is not found and &quot;falls through&quot; our designated routes, it will redirect to the 404 page located at /404.<h3 open="" style="font-family: ;"> Building HTML Pages from the API</h3>Next let&rsquo;s look at the build process. &nbsp;Here&#39;s what&#39;s in the <code>build-site.js</code> file:<pre class="prism">var Metalsmith = require(&#39;metalsmith&#39;)
var markdown = require(&#39;metalsmith-markdown&#39;)
var layouts = require(&#39;metalsmith-layouts&#39;)
var permalinks = require(&#39;metalsmith-permalinks&#39;)
var sass = require(&#39;metalsmith-sass&#39;)
var metalsmithPrism = require(&#39;metalsmith-prism&#39;);
var Cosmic = require(&#39;cosmicjs&#39;)
var async = require(&#39;async&#39;)
var mkdirp = require(&#39;mkdirp&#39;)
var del = require(&#39;del&#39;)
var mv = require(&#39;mv&#39;)
var createPage = require(&#39;./create-page&#39;)
var config = require(&#39;./config&#39;)
module.exports = () =&gt; {
 async.series([
 // Create build-new folder
 callback =&gt; {
 mkdirp(__dirname + &#39;/build-new&#39;, err =&gt; {
 callback()
 })
 },
 callback =&gt; {
 Cosmic.getObjects(config.cosmicjs, (err, res) =&gt; {
 var pages = res.objects.type.pages
 var cosmic = res
 // Create dynamic static pages
 async.eachSeries(pages, (page, callbackEach) =&gt; {
 var args = {
 page: page,
 pages: pages,
 cosmic: cosmic
 }
 createPage(args, callbackEach)
 }, () =&gt; {
 // Create markdown static pages
 var year = (new Date()).getFullYear() // make your footer year dynamic ;) 
 Metalsmith(__dirname)
 .metadata({
 cosmic: cosmic,
 year: year
 })
 .source(&#39;./src&#39;)
 .destination(&#39;./build-new&#39;)
 .clean(false)
 .use(sass({
 outputDir: &#39;css/&#39;,
 sourceMap: true,
 sourceMapContents: true
 }))
 .use(markdown( { langPrefix: &#39;language-&#39; } ))
 .use(metalsmithPrism())
 .use(permalinks())
 .use(layouts({
 engine: &#39;handlebars&#39;,
 partials: &#39;layouts/partials&#39;
 }))
 .build((err, files) =&gt; {
 if (err) { throw err }
 callback()
 })
 })
 })
 },
 // Delete build folder
 callback =&gt; {
 del([__dirname + &#39;/build&#39;]).then(() =&gt; {
 callback()
 })
 },
 // Move build-new to build folder
 callback =&gt; {
 mv(__dirname + &#39;/build-new&#39;, __dirname + &#39;/build&#39;, { mkdirp: true }, () =&gt; {
 callback()
 })
 },
 // Delete build-new folder
 callback =&gt; {
 del([__dirname + &#39;/build-new&#39;]).then(() =&gt; {
 // done
 })
 }
 ])
}</pre> We&#39;re using the async module to make sure everything is happening in the correct order. &nbsp;Here&#39;s what&#39;s happening:1. The new build folder is created. 2. The Cosmic API is called to get the Pages from our Cosmic bucket. 3. The createPage function is called next (we&rsquo;ll get to this in a moment). 4. Finally Metalsmith takes care of our frontend: preprocessing SASS files into CSS or concatenating and minifying JavaScript, etc. &nbsp;Along with these frontend processes, Metalsmith will also convert any Markdown files that we have in our src folder
into HTML pages in our build folder.After all static HTML files from the API and from Markdown are added to the build-new folder our build-new folder is renamed to build for a zero-downtime update to our static website.With Cosmic serving content from the CMS API and Metalsmith powering the frontend and Markdown files, you have the ability to let a non-dev manage content in the static site as well as giving the developer the freedom to still use Markdown.Next let&rsquo;s look at how the pages are rendered from the API to HTML pages. &nbsp;In <code>create-page.js</code> we have the following:<pre class="prism">var fs = require(&#39;fs&#39;)
var async = require(&#39;async&#39;)
var mkdirp = require(&#39;mkdirp&#39;)
var Handlebars = require(&#39;handlebars&#39;)
module.exports = (args, done) =&gt; {
 var page = args.page
 var pages = args.pages
 var cosmic = args.cosmic
 var locals = {}
 async.series([
 // Register partials
 callback =&gt; {
 fs.readFile(__dirname + &#39;/layouts/partials/header.html&#39;, &#39;utf8&#39;, (err, data) =&gt; {
 if (err) {
 return console.log(err)
 }
 Handlebars.registerPartial(&#39;header&#39;, data)
 callback()
 })
 },
 callback =&gt; {
 fs.readFile(__dirname + &#39;/layouts/partials/footer.html&#39;, &#39;utf8&#39;, (err, data) =&gt; {
 if (err) {
 return console.log(err)
 }
 Handlebars.registerPartial(&#39;footer&#39;, data)
 callback()
 })
 },
 callback =&gt; {
 fs.readFile(__dirname + &#39;/layouts/page.html&#39;, &#39;utf8&#39;, (err, data) =&gt; {
 if (err) {
 return console.log(err)
 }
 var template = Handlebars.compile(data)
 locals.template = template
 callback()
 })
 },
 () =&gt; {
 // Set variables
 var year = (new Date()).getFullYear() // make your footer year dynamic ;) 
 var title = page.title
 var markup = locals.template({ page, pages, cosmic, year, title })
 // If Home page found
 if (page.slug === &#39;home&#39;) {
 fs.writeFile(__dirname + &#39;/build-new/index.html&#39;, markup, err =&gt; {
 if(err) {
 return console.log(err)
 }
 done()
 })
 } else {
 mkdirp(__dirname + &#39;/build-new/&#39; + page.slug, err =&gt; {
 fs.writeFile(__dirname + &#39;/build-new/&#39; + page.slug + &#39;/index.html&#39;, markup, err =&gt; {
 if(err) {
 return console.log(err)
 }
 done()
 })
 })
 }
 }
 ])
}</pre> Notice we are reading the contents of page.html from our layouts folder and creating a template using <a href="http://handlebarsjs.com/" target="_blank">Handlebars</a>. &nbsp;You can use other template languages, but I prefer Mustache, or Handlebars for
its logic-less simplicity. &nbsp;Next we are passing in our variables from the API to translate the template variables into rendered output. &nbsp;Next a file write happens to /build/:page.slug:/index.html for all pages in our Cosmic bucket. &nbsp;And
a special page is built for our home page at /build/index.html.As you can see this is a pretty simple process of taking the output of our Cosmic bucket and translating it into HTML using Handlebars and the Node.js fs.writeFile function. <h3 open="" style="font-family: ;">Building Pages from Markdown</h3>In our src folder there is a file docs/index.md that will be rendered to HTML to /build/docs/index.html at the route /docs. &nbsp;Here&#39;s the markdown in src/docs/index.md:<pre class="language-markdown" style="line-height: 1.42857;">---
title: Documentation
layout: markdown.html
---
This documentation page is powered by Markdown.
Here&#39;s a block of code:
```bash
$ cd awesome
$ yarn
```
Here&#39;s another block of code:
```javascript
var fs = require(&#39;fs&#39;)
var async = require(&#39;async&#39;)
var mkdirp = require(&#39;mkdirp&#39;)
var Handlebars = require(&#39;handlebars&#39;)
module.exports = (args, done) =&gt; {
  var page = args.page
  var pages = args.pages
  var cosmic = args.cosmic
  var locals = {}
  async.series([
    callback =&gt; {
      fs.readFile(__dirname + &#39;/layouts/page.html&#39;, &#39;utf8&#39;, (err, data) =&gt; {
        if (err) {
          return console.log(err)
        }
        var template = Handlebars.compile(data)
        locals.template = template
        callback()
      })
    },
    () =&gt; {
      // Set variables
      var year = (new Date()).getFullYear() // make your footer year dynamic ;) 
      var markup = locals.template({ page, pages, cosmic, year })
      // If Home page found
      if (page.slug === &#39;home&#39;) {
        fs.writeFile(__dirname + &#39;/build-new/index.html&#39;, markup, err =&gt; {
          if(err) {
            return console.log(err)
          }
          done()
        })
      } else {
        mkdirp(__dirname + &#39;/build-new/&#39; + page.slug, err =&gt; {
          fs.writeFile(__dirname + &#39;/build-new/&#39; + page.slug + &#39;/index.html&#39;, markup, err =&gt; {
            if(err) {
              return console.log(err)
            }
            done()
          })
        })
      }
    }
  ])
}
```</pre>Any new folder that you add to src with an index.md Markdown file will create a new route at /your-new-folder. Starting Our Static WebsiteIf you haven&#39;t already, download the GitHub repository for the Static Website by running the following commands:<pre style="line-height: 1.42857;">git clone <a href="https://github.com/cosmicjs/static-website" target="_blank">https://github.com/cosmicjs/static-website</a>
cd static-website
yarn install
yarn start</pre>Now go to <a href="http://localhost:3000/" target="_blank">http://localhost:3000</a> to see your freshly built website. &nbsp;Go to <a href="http://localhost:3000/rebuild-site" target="_blank">http://localhost:3000</a><a href="http://localhost:3000/rebuild-site">/rebuild-site</a>whenever you would like to rebuild your website. Automatic Builds Using WebhooksNext, to make things even easier for your content editor you can add Webhooks to your Cosmic bucket to trigger a rebuild every time content is published in your bucket.<a href="https://www.cosmicjs.com/blog/adding-webhooks-in-4-steps" target="_blank">Check out the tutorial to learn how to add Webhooks</a>. ConclusionBy using Cosmic as your CMS API you can have a static website with the best of both worlds: A dynamic website that can be managed using an intuitive content editing experience as well as the ability to add developer-friendly&nbsp;Markdown&nbsp;pages.I hope you&#39;ve enjoyed this tutorial on creating an API-powered static website. &nbsp;If you want to deploy the static website in just a few clicks, <a href="https://app.cosmicjs.com/signup">sign up for Cosmic</a>, create a bucket and look for the Static Website App in the Apps tab of your bucket. &nbsp;For any questions or help getting started, reach out to us in the <a href="https://www.cosmicjs.com/community" target="_blank">Cosmic Slack channel</a>, or <a href="https://twitter.com/cosmicjs" rel="noopener noreferrer" target="_blank">reach out to us on Twitter</a>.

How to Build an API-Powered, Static Website: The Best of Both Worlds

One of the principal benefits of using a&nbsp;<a href="https://www.cosmicjs.com/" target="_blank">CMS API</a>&nbsp;over an installed content management system is the&nbsp;<a href="https://www.cosmicjs.com/features" target="_blank">portability and scalability</a>&nbsp;of the buckets of content you create. I hear this question at least several times a week: "How can I back up my bucket of content or duplicate that bucket's content to another web application?"&nbsp;Using a&nbsp;<a href="https://www.cosmicjs.com/" target="_blank">CMS API</a>&nbsp;like the&nbsp;<a href="https://www.cosmicjs.com/" target="_blank">Cosmic API</a>&nbsp;allows developers to build web applications in any programming language they want. Version iterations, backups and duplicating buckets for the next stage in development is intuitive and easy. In this blog I will show you how simple the process is.&nbsp;I'm using<a href="https://www.cosmicjs.com/" target="_blank">&nbsp;Cosmic</a>&nbsp;as the example&nbsp;<a href="https://www.cosmicjs.com/" target="_blank">Content Management API</a>&nbsp;for this blog.&nbsp;<a href="https://www.cosmicjs.com/signup" target="_blank">Sign Up</a>&nbsp;with Cosmic to get started.<ul><li><a href="https://www.cosmicjs.com/getting-started" target="_blank">Cosmic - Getting Started</a></li><li><a href="https://www.cosmicjs.com/docs" target="_blank">Cosmic - Documentation</a></li><li><a href="https://www.youtube.com/channel/UCDzCWWJLVWLpoHB5oGH0H-A" target="_blank">Cosmic - Tutorials</a></li></ul><h2 style="font-family: 'Open Sans', sans-serif; color: rgb(0, 0, 0);">Export bucket.json file&nbsp;</h2><img src="https://www.cosmicjs.com/uploads/d03e3c50-99ec-11e6-8356-67a307c4f589-Screen%20Shot%202016-10-24%20at%208.14.35%20AM.png" data-filename="https://www.cosmicjs.com/uploads/d03e3c50-99ec-11e6-8356-67a307c4f589-Screen Shot 2016-10-24 at 8.14.35 AM.png" style="width: 912px;">I've navigated to the Import / Export tab of my Cosmic Dashboard and can see the option to Export my data and files into a bucket.json file. By clicking Export, the bucket is immediately downloaded onto my computer for use.&nbsp;<h2 style="font-family: 'Open Sans', sans-serif; color: rgb(0, 0, 0);">Downloaded bucket.json File<img src="https://www.cosmicjs.com/uploads/d02e0fb1-99ec-11e6-8356-67a307c4f589-Screen%20Shot%202016-10-24%20at%208.15.07%20AM.png" data-filename="https://www.cosmicjs.com/uploads/d02e0fb1-99ec-11e6-8356-67a307c4f589-Screen Shot 2016-10-24 at 8.15.07 AM.png" style="font-size: 14px; width: 618px;"></h2><h2 style="font-family: 'Open Sans', sans-serif; color: rgb(0, 0, 0);">Add New Bucket</h2><img src="https://www.cosmicjs.com/uploads/3272b2f0-99ef-11e6-8356-67a307c4f589-Screen%20Shot%202016-10-24%20at%208.15.45%20AM.png" data-filename="https://www.cosmicjs.com/uploads/3272b2f0-99ef-11e6-8356-67a307c4f589-Screen Shot 2016-10-24 at 8.15.45 AM.png" style="width: 177px;"> <h2 style="font-family: 'Open Sans', sans-serif; color: rgb(0, 0, 0);">Create New Bucket - Version II</h2><img src="https://www.cosmicjs.com/uploads/d02dc191-99ec-11e6-8356-67a307c4f589-Screen%20Shot%202016-10-24%20at%208.16.00%20AM.png" data-filename="https://www.cosmicjs.com/uploads/d02dc191-99ec-11e6-8356-67a307c4f589-Screen Shot 2016-10-24 at 8.16.00 AM.png" style="width: 900.75px; height: 306.17598684210526px;">Because I'd like to keep Version I as a comparison of my web application, I'll Create a New Bucket to import my downloaded bucket.json file to deploy and make changes to.&nbsp;<h2 style="font-family: 'Open Sans', sans-serif; color: rgb(0, 0, 0);">App Installation Prompt</h2><img src="https://www.cosmicjs.com/uploads/d02dc190-99ec-11e6-8356-67a307c4f589-Screen%20Shot%202016-10-24%20at%208.16.12%20AM.png" data-filename="https://www.cosmicjs.com/uploads/d02dc190-99ec-11e6-8356-67a307c4f589-Screen Shot 2016-10-24 at 8.16.12 AM.png" style="width: 592px;">Once I've created my new bucket, the standard App Installation Prompt will pop up to see if I'd like to see any&nbsp;<a href="https://www.cosmicjs.com/apps" target="_blank">content-ready applications</a>. Since I've already got an application in my bucket.json file, I'll click "No Thanks".<h2 style="font-family: 'Open Sans', sans-serif; color: rgb(0, 0, 0);">Import Bucket.json file&nbsp;</h2><img src="https://www.cosmicjs.com/uploads/d02d2550-99ec-11e6-8356-67a307c4f589-Screen%20Shot%202016-10-24%20at%208.16.35%20AM.png" data-filename="https://www.cosmicjs.com/uploads/d02d2550-99ec-11e6-8356-67a307c4f589-Screen Shot 2016-10-24 at 8.16.35 AM.png" style="width: 912px;">Now that I'm in my bucket's dashboard, I'll simply click Import / Export again to import my bucket.json file from Version I.&nbsp;<h2 style="font-family: 'Open Sans', sans-serif; color: rgb(0, 0, 0);">Importing bucket.json file</h2><img src="https://www.cosmicjs.com/uploads/d02cb020-99ec-11e6-8356-67a307c4f589-Screen%20Shot%202016-10-24%20at%208.17.20%20AM.png" data-filename="https://www.cosmicjs.com/uploads/d02cb020-99ec-11e6-8356-67a307c4f589-Screen Shot 2016-10-24 at 8.17.20 AM.png" style="width: 592px;">Click "Yes, Import" - don't worry about deleting current data and files as this is a brand new bucket in which we hadn't yet added any Objects or Object Types.&nbsp;<h2 style="font-family: 'Open Sans', sans-serif; color: rgb(0, 0, 0);">Use Case</h2><img src="https://www.cosmicjs.com/uploads/970692d0-99f0-11e6-8103-8117827beac1-Screen%20Shot%202016-10-24%20at%208.47.45%20AM.png" data-filename="https://www.cosmicjs.com/uploads/970692d0-99f0-11e6-8103-8117827beac1-Screen Shot 2016-10-24 at 8.47.45 AM.png" style="width: 912px;"><img src="https://www.cosmicjs.com/uploads/b1948440-99f0-11e6-8103-8117827beac1-Screen%20Shot%202016-10-24%20at%208.47.56%20AM.png" data-filename="https://www.cosmicjs.com/uploads/b1948440-99f0-11e6-8103-8117827beac1-Screen Shot 2016-10-24 at 8.47.56 AM.png" style="width: 912px;">I can easily manage all Versions of my bucket from the Cosmic Dashboard. I've just duplicated buckets of content, as well as provided myself a bucket.json backup of my web application. Developers and content editors can easily create new buckets of content while using best practices surrounding Version Control and Version Iteration.<a href="https://www.cosmicjs.com/" target="_blank">Cosmic&nbsp;</a>is an&nbsp;<a href="https://www.cosmicjs.com/" target="_blank">API-first cloud-based content management platform</a>&nbsp;that makes it easy to manage applications and content. If you have questions about the Cosmic API, please reach out to us on&nbsp;<a href="https://twitter.com/cosmic_js" target="_blank">Twitter</a>&nbsp;or&nbsp;<a href="https://www.cosmicjs.com/community" target="_blank">Slack</a>.&nbsp;<h2 style="font-family: 'Open Sans', sans-serif; color: rgb(0, 0, 0);">Read More</h2><ul><li><a href="https://www.cosmicjs.com/blog/developer-spotlight-jon-bloomer" target="_blank">Developer Spotlight: Jon Bloomer</a></li><li><a href="https://www.cosmicjs.com/blog/sharing-resources-with-a-content-management-api" target="_blank">Sharing Resources With a Content Management API</a></li><li><a href="https://www.cosmicjs.com/blog/team-member-role-management-in-cosmic-js" target="_blank">Team Member Role Management in Cosmic</a></li><li><a href="https://www.cosmicjs.com/blog/how-to-build-a-cross-platform-blog-using-react-native-and-nodejs">How to Build a Cross-Platform Blog Using React Native and Node.js</a></li><li><a href="https://www.cosmicjs.com/blog/cosmic-js-product-tour">Cosmic Product Tour</a></li><li><a href="https://www.cosmicjs.com/blog/how-to-create-an-intuitive-website-navigation-menu" target="_blank">How to Create an Intuitive Website Navigation Menu</a></li><li><a href="https://www.cosmicjs.com/blog/repeater-metafields-now-available" target="_blank">Repeater Metafields Now Available</a>&nbsp;</li><li><a href="https://www.cosmicjs.com/blog/adding-webhooks-in-4-steps">Adding Webhooks in 4 Easy Steps</a></li></ul><div> </div>

Version Iteration - Portable JSON Buckets

<img src="https://cosmicjs.imgix.net/fe55b380-95fe-11e6-b567-5deeb87c2285-tone-temple.jpg" data-filename="https://www.cosmicjs.com/uploads/199eb0d0-95ad-11e6-b575-65f510fd43cc-Screen Shot 2016-10-18 at 10.35.08 PM.png" style="width: 100%;"> Our mission at Cosmic is to help teams build great websites and apps, and we love it when developers show us the awesome work they've done using the platform. &nbsp;In this spirit, we're introducing a new Spotlight series where we'll focus on a particular team or developer that is building something cool using Cosmic. In this Spotlight we are focusing on Jon Bloomer, who recently launched the Cosmic-powered website for his business <a href="http://tonetemple.com.au/" target="_blank">Tone Temple</a>. &nbsp;Jon took some time to answer a few questions about his business, his development process and some of his favorite non-dev rockstars. &nbsp;And we totally glossed over the irony that his new website that showcases headless guitars is built using a <a href="https://www.cosmicjs.com">headless CMS</a>. Cosmic: Can you talk a little about ToneTemple the business? Jon: Tone Temple is an Australian guitar store with a small selection of boutique brands that we truly believe in. We only stock unique and high end products such as Strandberg Guitars and Evil Angel custom pickups and we will be expanding our range of brands over the coming months. Our business is based on great customer service and a thorough knowledge and understanding of our products. You have a beautiful brand new website which you mentioned is built using React and Redux. &nbsp;Can you talk about your choice to use these technologies? I have been using React and Redux to build web applications for the past 10 months for 2 different corporations and enjoy the ability to build components in ES6/7 and have a simple way to save and retrieve the state of the application from a centralised store. I also like how easy it is to test React components using Expect and Enzyme. Can you talk about why you decided to use an API to host your content instead of an installed CMS? I have built many CMS based websites for clients over the past 6 years using Wordpress as I am proficient with PHP however I couldn't manage to build the solutions my clients wanted without installing additional plugins for custom fields, SEO, caching etc. When I saw Cosmic I realised I could think in terms of exactly what data I wanted to save rather than having to work out which already complex template objects I had to extend with additional fields. Removing the page and assets based architecture that traditional CMS's are built on really lets you focus on how to organise content to make it manageable to content editors&nbsp;and deliver it efficiently for app consumption. Can you talk a little about your development and content management process and how Cosmic fits in? With Tone Temple the data architecture was pretty simple, I decided I only really needed 2 Objects, Globals and Brands. Globals contains elements such as the site logo, footer text, and then some data for the homepage such as the main content and the videos at the bottom of the page which uses <a href="https://www.cosmicjs.com/blog/repeater-metafields-now-available" target="_blank">the new Repeater field</a>. Brands is setup with a set of metafields that allow me to upload 2 different size brand page header images (I may create a 3rd for mobile), optional header images for the homepage carousel which is coupled with a check box to set whether to display on homepage and finally the main content and another Repeater field for Videos. The Videos Repeater has just two fields, one for the video title and another for the YouTube ID. I then launch the YouTube player in an overlay on click using a custom React component that I built. Cosmic makes it very simple for me to add new brands with the ability to save as draft if the final content is not quite ready to show on the live site.&nbsp;I fetch the global and brand objects asynchronously on load and populate the Redux store which happens very fast. The content is usually rendering in under a second and the large images for the homepage carousel render by the time you hit 1.5s. I use Cosmic's built in <a href="https://www.cosmicjs.com/blog/imgix-image-processing-now-available-on-cosmic-js" target="_blank">Imgix integration</a> to easily create srcsets for images so that I can serve up smaller images depending on media queries which helps with the page load. The Imgix CDN ensures that the images are returned and rendered very quickly.&nbsp; What app development technologies are you excited about using now or in the future? I am excited about the possibility of using GraphQL &amp; Relay in the near future and might be something I will start learning soon and update Tone Temple to use. Who are some of your favorite guitarists? &nbsp;Are you a musician yourself? I am indeed a musician, I studied at Birmingham Conservatoire in the UK and have BMus(hons) degree. I also ran <a href="http://guitarnoize.com/" style="background-color: rgb(255, 255, 255);">GuitarNoize.com</a> for 9 years until very recently where I have teamed up with an amazing business partner to launch Tone Temple. I have too many favourite guitar players to mention, I have very varied musical tastes from Blues to Metal. Joe Satriani has always been my absolute favourite guitar player but one of my current favourite guitarists and composers is David Maxim Micic. Check out the&nbsp;<a href="http://tonetemple.com.au/" target="_blank" style="background-color: rgb(255, 255, 255);">Tone Temple&nbsp;website</a>,&nbsp;you can <a href="https://twitter.com/jonbloomer" target="_blank" style="background-color: rgb(255, 255, 255);">follow Jon on Twitter</a> and check out more of his development work on <a href="https://github.com/freaksauce" target="_blank" style="background-color: rgb(255, 255, 255);">his GitHub page</a>.

Developer Spotlight: Jon Bloomer

<img src="https://www.cosmicjs.com/uploads/e06d50b0-9533-11e6-b575-65f510fd43cc-shutterstock_117629761.jpg" data-filename="https://www.cosmicjs.com/uploads/e06d50b0-9533-11e6-b575-65f510fd43cc-shutterstock_117629761.jpg" style="width: 50%;"> <h3>The Problem</h3>I worked at a digital agency for several years with <a href="https://www.cosmicjs.com/about" target="_blank">my co-founder</a> of <a href="https://www.cosmicjs.com/" target="_blank">Cosmic</a>. We built numerous web applications for a range of clients, usually starting with static PSD's that we would hand off to a front end developer for HTML / CSS application as well as responsiveness on desktop, laptop, tablet and mobile. At this stage in the process we were typically using stock photography or images pulled from Google or Pinterest, dependent on whether or not we had created mood boards prior to the development phase. At this point, the client would have finished the monumental "DropBox Website Folder." This folder would systematically lay out the format for the website based on sitemap or existing comps, coupled with the media, images and content the client would want to see present on launch day. Far too often the digital team was unclear on which media file to place where, either due to client mislabeling, agency miscommunication or a simple lack of updates to the media files within the DropBox account. All too often all content and images would be accounted for, only to realize that the sitemap had grown because someone forgot (insert page title here).<h3>The Situation</h3>Legacy systems like WordPress make uploading media and images difficult and easy to mess up for a junior content editor. The curation and migration of content from a DropBox to a WordPress usually makes a lengthy stop on the agency and / or client's internal servers for additional review, editing and organization. In today's digital age where teams are working on real-time applications that require publishing content at a moment's notice, this system is obviously bloated and flawed. What is stopping agencies from combining DropBox with their CMS? What prevents them from extending a link to a shared media folder within the actual Content Management System itself, rather than employing a third-party storage system to store files until they are ready to be mislabeled, mishandled and stored + published within another system? <h3>The Solution </h3>The answer is letting the same API that delivers your content to all web-connected devices also store the media you need to publish. <a href="https://www.cosmicjs.com" target="_blank">Cosmic</a> is an <a href="https://www.cosmicjs.com" target="_blank">API-first content management platform</a> that is powered by its <a href="https://www.cosmicjs.com" target="_blank">JSON API,</a> which delivers content globally to any web-connected device. This gives you the freedom to build your application using any programming language and allows for easier scaling within your development team. Read more about how <a href="https://www.cosmicjs.com/blog/the-cosmic-stack" target="_blank">The Cosmic Stack</a> is simplifying the content management process through a <a href="https://www.cosmicjs.com" target="_blank">content management API.</a><img src="https://www.cosmicjs.com/uploads/14d0c390-9535-11e6-b575-65f510fd43cc-Cosmic Stack.jpg" data-filename="https://www.cosmicjs.com/uploads/14d0c390-9535-11e6-b575-65f510fd43cc-Cosmic Stack.jpg" style="width: 912px;"> To begin storing and categorizing resources and media, set up a new bucket for your new web application and invite users to your bucket for content storage and curation. Here's how...<h3 style="font-family: 'Open Sans', sans-serif; color: rgb(0, 0, 0);"><a href="https://www.cosmicjs.com/signup" target="_blank">Create Your Free Account </a></h3><h3 style="font-family: 'Open Sans', sans-serif; color: rgb(0, 0, 0);"><img src="https://www.cosmicjs.com/uploads/1857efc0-948b-11e6-b575-65f510fd43cc-Screen%20Shot%202016-10-17%20at%2011.59.14%20AM.png" data-filename="https://www.cosmicjs.com/uploads/1857efc0-948b-11e6-b575-65f510fd43cc-Screen Shot 2016-10-17 at 11.59.14 AM.png" style="width: 455.875px;"></h3><a href="https://www.cosmicjs.com/login" target="_blank">Login</a> <img src="https://www.cosmicjs.com/uploads/d44daab0-94b5-11e6-b575-65f510fd43cc-Screen%20Shot%202016-10-17%20at%205.05.17%20PM.png" data-filename="https://www.cosmicjs.com/uploads/d44daab0-94b5-11e6-b575-65f510fd43cc-Screen Shot 2016-10-17 at 5.05.17 PM.png" style="width: 424px;"> <h3 style="font-family: 'Open Sans', sans-serif; color: rgb(0, 0, 0);"><a href="https://www.cosmicjs.com/add-bucket" target="_blank">Add a New Bucket</a></h3><img src="https://www.cosmicjs.com/uploads/c38f3980-948a-11e6-b575-65f510fd43cc-Screen%20Shot%202016-10-17%20at%2011.56.56%20AM.png" data-filename="https://www.cosmicjs.com/uploads/c38f3980-948a-11e6-b575-65f510fd43cc-Screen Shot 2016-10-17 at 11.56.56 AM.png" style="width: 192.46753246753246px; height: 65px;"><h3 style="font-family: 'Open Sans', sans-serif; color: rgb(0, 0, 0);">Add a New User</h3><img src="https://www.cosmicjs.com/uploads/da770650-948a-11e6-b575-65f510fd43cc-Screen%20Shot%202016-10-17%20at%2011.57.42%20AM.png" data-filename="https://www.cosmicjs.com/uploads/da770650-948a-11e6-b575-65f510fd43cc-Screen Shot 2016-10-17 at 11.57.42 AM.png" style="width: 186.75px; height: 67.16447368421053px;"><h3 style="font-family: 'Open Sans', sans-serif; color: rgb(0, 0, 0);">Adding a New User to Your Bucket</h3><img src="https://www.cosmicjs.com/uploads/f7e70910-948a-11e6-b575-65f510fd43cc-Screen%20Shot%202016-10-17%20at%2011.52.27%20AM.png" data-filename="https://www.cosmicjs.com/uploads/f7e70910-948a-11e6-b575-65f510fd43cc-Screen Shot 2016-10-17 at 11.52.27 AM.png" style="width: 592px;">Unlocking editor access to the new user (which could be a client or the content team) is sufficient as that user can add and group media and shared resources within media folders for eventual publishing through the <a href="https://www.cosmicjs.com/" target="_blank">Cosmic API</a>.<h3 style="font-family: 'Open Sans', sans-serif; color: rgb(0, 0, 0);">Adding Media Folders</h3><img src="https://www.cosmicjs.com/uploads/14964550-94b6-11e6-b575-65f510fd43cc-Screen%20Shot%202016-10-17%20at%205.06.18%20PM.png" data-filename="https://www.cosmicjs.com/uploads/14964550-94b6-11e6-b575-65f510fd43cc-Screen Shot 2016-10-17 at 5.06.18 PM.png" style="width: 25%;">Click "Add media folder" <img src="https://www.cosmicjs.com/uploads/3bf353e0-94b6-11e6-b575-65f510fd43cc-Screen%20Shot%202016-10-17%20at%205.06.48%20PM.png" data-filename="https://www.cosmicjs.com/uploads/3bf353e0-94b6-11e6-b575-65f510fd43cc-Screen Shot 2016-10-17 at 5.06.48 PM.png" style="width: 587px;">Save your new media folder and begin adding files and media to your media folder so that your clients and team can access it later. <img src="https://www.cosmicjs.com/uploads/43ada130-94b6-11e6-b575-65f510fd43cc-Screen%20Shot%202016-10-17%20at%205.07.04%20PM.png" data-filename="https://www.cosmicjs.com/uploads/43ada130-94b6-11e6-b575-65f510fd43cc-Screen Shot 2016-10-17 at 5.07.04 PM.png" style="width: 912px;">I created an example web application so I can demonstrate how I cataloged my example media within the Cosmic Dashboard. In my Global Media view, I can see all of the example images I have uploaded.<img src="https://www.cosmicjs.com/uploads/135df6f0-94b7-11e6-b575-65f510fd43cc-Screen%20Shot%202016-10-17%20at%205.13.08%20PM.png" data-filename="https://www.cosmicjs.com/uploads/135df6f0-94b7-11e6-b575-65f510fd43cc-Screen Shot 2016-10-17 at 5.13.08 PM.png" style="width: 912px;">I have separated my media into three folders: Brand Standards | Marketing Banners | Internal Resources. I can filter between media folders at my leisure, using them as separate client content folders, internal team documents, shared resources, etc. <img src="https://www.cosmicjs.com/uploads/5fbc97e0-94b7-11e6-b575-65f510fd43cc-Screen%20Shot%202016-10-17%20at%205.15.01%20PM.png" data-filename="https://www.cosmicjs.com/uploads/5fbc97e0-94b7-11e6-b575-65f510fd43cc-Screen Shot 2016-10-17 at 5.15.01 PM.png" style="width: 912px;">This is a quick example of a down and dirty trick with an <a href="https://www.cosmicjs.com" target="_blank">API-first cloud-based Content Management Platform</a>. When your team is ready to start development, assets have already been added to your bucket and you can immediately begin prototyping your application with the uploaded resources.<a href="https://www.cosmicjs.com/" target="_blank">Cosmic </a>is an API-first cloud-based content management platform that makes it easy to manage applications and content. If you have questions about the Cosmic API, please reach out to us on <a href="https://twitter.com/cosmic_js" target="_blank">Twitter</a> or <a href="https://www.cosmicjs.com/community" target="_blank">Slack</a>. <h3 style="font-family: 'Open Sans', sans-serif; color: rgb(0, 0, 0);">Read More</h3><a href="https://www.cosmicjs.com/blog/team-member-role-management-in-cosmic-js" target="_blank">Team Member Role Management in Cosmic</a><a href="https://www.cosmicjs.com/blog/how-to-build-a-cross-platform-blog-using-react-native-and-nodejs">How to Build a Cross-Platform Blog Using React Native and Node.js</a><a href="https://www.cosmicjs.com/blog/cosmic-js-product-tour">Cosmic Product Tour</a><a href="https://www.cosmicjs.com/blog/how-to-create-an-intuitive-website-navigation-menu" target="_blank">How to Create an Intuitive Website Navigation Menu</a><a href="https://www.cosmicjs.com/blog/repeater-metafields-now-available" target="_blank">Repeater Metafields Now Available</a>  <a href="https://www.cosmicjs.com/blog/adding-webhooks-in-4-steps">Adding Webhooks in 4 Easy Steps</a>

Sharing Resources With a Content Management API

Building websites and applications with the Cosmic API is simple and intuitive for teams through role permissions. Cosmic makes it easy to add users and clarify their roles in the system. Teams can assign three role types within the Cosmic CMS Dashboard: Admin, Developer, Editor. In this blog we will cover the following User Role items: <ol><li style="margin-bottom: 0px; line-height: normal;">How to Add a User to Your App </li><li style="margin-bottom: 0px; line-height: normal;">How to Edit a User Role</li><li style="margin-bottom: 0px; line-height: normal;">Invite Users to Your Team's Bucket</li><li style="margin-bottom: 0px; line-height: normal;">Getting Access to Your Team's Bucket </li><li style="margin-bottom: 0px; line-height: normal;">Admin User Dashboard</li><li style="margin-bottom: 0px; line-height: normal;">Developer User Dashboard</li><li style="margin-bottom: 0px; line-height: normal;">Editor User Dashboard</li><li style="margin-bottom: 0px; line-height: normal;">Dashboard Analytics - Team</li><li style="margin-bottom: 0px; line-height: normal;">Adding | Editing Objects</li></ol> <h3>Add a User  </h3><img src="https://www.cosmicjs.com/uploads/30a2bc60-90c4-11e6-829c-87a057acd859-Screen%20Shot%202016-10-12%20at%204.37.57%20PM.png" data-filename="https://www.cosmicjs.com/uploads/30a2bc60-90c4-11e6-829c-87a057acd859-Screen Shot 2016-10-12 at 4.37.57 PM.png" style="width: 583px;"> <h3>Edit a User's Role </h3><img src="https://www.cosmicjs.com/uploads/b06e4d20-90c3-11e6-829c-87a057acd859-Screen%20Shot%202016-10-12%20at%204.13.37%20PM.png" data-filename="https://www.cosmicjs.com/uploads/b06e4d20-90c3-11e6-829c-87a057acd859-Screen Shot 2016-10-12 at 4.13.37 PM.png" style="width: 592px;"> <h3>Invite Users to Your Team's Bucket </h3><img src="https://www.cosmicjs.com/uploads/830cc220-90c4-11e6-829c-87a057acd859-Screen%20Shot%202016-10-12%20at%204.18.08%20PM.png" data-filename="https://www.cosmicjs.com/uploads/830cc220-90c4-11e6-829c-87a057acd859-Screen Shot 2016-10-12 at 4.18.08 PM.png" style="width: 576px;"> <h3>Getting Access to Your Team's Bucket </h3><h3><img src="https://www.cosmicjs.com/uploads/8b2ac860-90c6-11e6-829c-87a057acd859-Screen%20Shot%202016-10-12%20at%204.53.07%20PM.png" data-filename="https://www.cosmicjs.com/uploads/8b2ac860-90c6-11e6-829c-87a057acd859-Screen Shot 2016-10-12 at 4.53.07 PM.png" style="width: 516px;"></h3> Cosmic delivers the tools needed for each user role and nothing more. I manage my own app on Cosmic and went through the process of inviting myself in 3 different role types to my own bucket of content. I've provided screencaptures of the Cosmic Dashboard in each User Role's View.  <h3>Admin User View</h3><img src="https://www.cosmicjs.com/uploads/cbc90f00-90c4-11e6-829c-87a057acd859-Screen%20Shot%202016-10-12%20at%204.41.37%20PM.png" data-filename="https://www.cosmicjs.com/uploads/cbc90f00-90c4-11e6-829c-87a057acd859-Screen Shot 2016-10-12 at 4.41.37 PM.png" style="width: 912px;"> The admin has access to settings, users and developer features.  <h3>Developer User View </h3><img src="https://www.cosmicjs.com/uploads/5acc1f70-90c6-11e6-829c-87a057acd859-Screen%20Shot%202016-10-12%20at%204.53.29%20PM.png" data-filename="https://www.cosmicjs.com/uploads/5acc1f70-90c6-11e6-829c-87a057acd859-Screen Shot 2016-10-12 at 4.53.29 PM.png" style="width: 912px;"> The developer has access to developer features and editor features.  <h3>Editor User View</h3><img src="https://www.cosmicjs.com/uploads/21a7de40-90c7-11e6-829c-87a057acd859-Screen%20Shot%202016-10-12%20at%204.58.53%20PM.png" data-filename="https://www.cosmicjs.com/uploads/21a7de40-90c7-11e6-829c-87a057acd859-Screen Shot 2016-10-12 at 4.58.53 PM.png" style="width: 912px;">The editor can add, edit and delete content with developer features hidden. <h3>Team Dashboard Analytics</h3><img src="https://www.cosmicjs.com/uploads/ab19ca50-90c5-11e6-829c-87a057acd859-Screen%20Shot%202016-10-12%20at%204.48.06%20PM.png" data-filename="https://www.cosmicjs.com/uploads/ab19ca50-90c5-11e6-829c-87a057acd859-Screen Shot 2016-10-12 at 4.48.06 PM.png" style="width: 912px;"> Track all of your team's apps with a simple Dashboard that provides information like "Last Modified", users, app owners as well as quick links over to each app's Dashboard. <h3>Adding | Editing Object </h3><img src="https://www.cosmicjs.com/uploads/7c11d060-90c8-11e6-829c-87a057acd859-Screen%20Shot%202016-10-12%20at%205.05.54%20PM.png" data-filename="https://www.cosmicjs.com/uploads/7c11d060-90c8-11e6-829c-87a057acd859-Screen Shot 2016-10-12 at 5.05.54 PM.png" style="width: 286px;"> When drafting a new object or object type, users are provided handy information on last modified, timestamp and draft or published status.  Teams are free to build slick apps and websites while creating content for them simultaneously. Developers can program code that is decoupled from the content that other team members put together, allowing the team to work content-first.  If you have any questions about managing content in <a href="https://www.cosmicjs.com/" target="_blank">Cosmic</a> with your team, feel free to reach out to us on <a href="https://twitter.com/cosmic_js" target="_blank">Twitter</a> or in our <a href="https://www.cosmicjs.com/community">Slack Community</a>. <h3>Read More</h3><a href="https://www.cosmicjs.com/blog/how-to-build-a-cross-platform-blog-using-react-native-and-nodejs">How to Build a Cross-Platform Blog Using React Native and Node.js</a><a href="https://www.cosmicjs.com/blog/cosmic-js-product-tour">Cosmic Product Tour</a> <a href="https://www.cosmicjs.com/blog/repeater-metafields-now-available" target="_blank">Repeater Metafields Now Available</a> <a href="https://www.cosmicjs.com/blog/adding-webhooks-in-4-steps">Adding Webhooks in 4 Easy Steps</a>

Team Member Role Management in Cosmic

<a href="https://www.cosmicjs.com/" target="_blank">Cosmic</a> makes it easy to build slick apps and websites for any vertical or industry. Cosmic has stored existing codebases on <a href="https://github.com/cosmicjs" target="_blank">GitHub</a> for everything from a standard <a href="https://github.com/cosmicjs/nodejs-website-boilerplate" target="_blank">Node.js boilerplate</a> to <a href="https://github.com/cosmicjs/cross-platform-blog" target="_blank">cross-platform iOS &amp; Android React Native codebases</a>. Below I detail 5 professional app templates that document their programming language, general layout, a demo &amp; the ability to view the code base.&nbsp;<h3 style="font-family: 'Open Sans', sans-serif; color: rgb(0, 0, 0);">Real Estate App</h3><img src="https://www.cosmicjs.com/uploads/c90270c0-90cb-11e6-857a-cfd761bfe867-Real%20Estate.png" data-filename="https://www.cosmicjs.com/uploads/c90270c0-90cb-11e6-857a-cfd761bfe867-Real Estate.png" style="width: 912px;" class="fr-dii fr-draggable"> <h4 style="font-family: 'Open Sans', sans-serif; color: rgb(0, 0, 0);">Bootstrap | Node.js | Multi-page App Template</h4> This real estate website satisfies some common website requirements including dynamic pages, listing management, blog articles, author management, SEO ability, contact form and website search. View demo <a href="http://real-estate.cosmicapp.co/" target="_blank">here</a>.&nbsp;View codebase on <a href="https://github.com/cosmicjs/cosmicapp-real-estate" target="_blank">GitHub</a>.<h3 style="font-family: 'Open Sans', sans-serif; color: rgb(0, 0, 0);">Photography App</h3><img src="https://www.cosmicjs.com/uploads/d3969200-90cb-11e6-857a-cfd761bfe867-Photography.png" data-filename="https://www.cosmicjs.com/uploads/d3969200-90cb-11e6-857a-cfd761bfe867-Photography.png" style="width: 912px;" class="fr-dii fr-draggable"> <h4 style="font-family: 'Open Sans', sans-serif; color: rgb(0, 0, 0);">Bootstrap | Node.js | Multi-Page App Template</h4> This slick photography website is built using Node.js on the server and Bootstrap on the frontend. &nbsp;It is fully responsive down to mobile, includes a contact form and a gallery section powered by <a href="http://photoswipe.com/">Photoswipe</a>. View demo <a href="http://photography-website.cosmicapp.co/" target="_blank">here</a>.&nbsp;View codebase on <a href="https://github.com/cosmicjs/cosmicapp-photography-website" target="_blank">GitHub</a>.<h3 style="font-family: 'Open Sans', sans-serif; color: rgb(0, 0, 0);">Healthcare App</h3><img src="https://www.cosmicjs.com/uploads/dd366830-90cb-11e6-857a-cfd761bfe867-Healthcare.png" data-filename="https://www.cosmicjs.com/uploads/dd366830-90cb-11e6-857a-cfd761bfe867-Healthcare.png" style="width: 912px;" class="fr-dii fr-draggable"> <h4 style="font-family: 'Open Sans', sans-serif; color: rgb(0, 0, 0);">Node.js | Bootstrap | Multi-Page App Template</h4> Website built using the <a href="https://github.com/cosmicjs/nodejs-website-boilerplate">Node.js Website Boilerplate</a>. &nbsp;Fully responsive down to mobile, SEO ready, includes a contact form and full site search. View demo <a href="http://medical-professional.cosmicapp.co/" target="_blank">here</a>.&nbsp;View codebase on <a href="https://github.com/cosmicjs/nodejs-website-boilerplate" target="_blank">GitHub</a>.<h3 style="font-family: 'Open Sans', sans-serif; color: rgb(0, 0, 0);">Roofing App</h3><img src="https://www.cosmicjs.com/uploads/e65aa5c0-90cb-11e6-857a-cfd761bfe867-Roofing.png" data-filename="https://www.cosmicjs.com/uploads/e65aa5c0-90cb-11e6-857a-cfd761bfe867-Roofing.png" style="width: 912px;" class="fr-dii fr-draggable"> <h4 style="font-family: 'Open Sans', sans-serif; color: rgb(0, 0, 0);">Node.js | Bootstrap | Multi-page App Template</h4> Website built using the <a href="https://github.com/cosmicjs/nodejs-website-boilerplate">Node.js Website Boilerplate</a>. &nbsp;Fully responsive down to mobile, SEO ready, includes a contact form and full site search. View demo <a href="http://roofing-site.cosmicapp.co/" target="_blank">here</a>.&nbsp;View codebase on <a href="https://github.com/cosmicjs/cosmicapp-roofing-site" target="_blank">GitHub</a>.<h3 style="font-family: 'Open Sans', sans-serif; color: rgb(0, 0, 0);">Wedding App</h3><img src="https://www.cosmicjs.com/uploads/4a534c80-90cc-11e6-857a-cfd761bfe867-Wedding.png" data-filename="https://www.cosmicjs.com/uploads/4a534c80-90cc-11e6-857a-cfd761bfe867-Wedding.png" style="width: 912px;" class="fr-dii fr-draggable"><h4 style="font-family: 'Open Sans', sans-serif; color: rgb(0, 0, 0);">AngularJS | Single-Page App Template</h4> This Angular JS single page wedding website makes it easy to edit content, update photos and plan for the big day. View demo <a href="http://wedding-site.cosmicapp.co/" target="_blank">here</a>.&nbsp;View codebase on <a href="https://github.com/cosmicjs/cosmicapp-wedding-site" target="_blank">GitHub</a>. If you have any questions about building industry-tailored apps, feel free to reach out to us on <a href="https://twitter.com/cosmic_js" target="_blank">Twitter</a> or in our <a href="https://www.cosmicjs.com/community">Slack Community</a>. <h3 style="font-family: 'Open Sans', sans-serif; color: rgb(0, 0, 0);">Read More</h3><a href="https://www.cosmicjs.com/blog/how-to-build-a-cross-platform-blog-using-react-native-and-nodejs">How to Build a Cross-Platform Blog Using React Native and Node.js</a><a href="https://www.cosmicjs.com/blog/cosmic-js-product-tour">Cosmic Product Tour</a><a href="https://www.cosmicjs.com/blog/repeater-metafields-now-available" target="_blank">Repeater Metafields Now Available</a>&nbsp;<a href="https://www.cosmicjs.com/blog/adding-webhooks-in-4-steps">Adding Webhooks in 4 Easy Steps</a><div> </div>

Build Industry-Tailored Apps using Node.js, ReactJS, AngularJS & Bootstrap

We&#39;re excited to announce a new tool that makes it even easier to build content for your websites and apps using <a data-cke-saved-href="https://www.cosmicjs.com" href="https://www.cosmicjs.com" target="_blank">Cosmic</a>. &nbsp;The Repeater Metafield allows you to create groups of Metafields with the ability to &ldquo;repeat&rdquo; the group. &nbsp;This makes it easy to manage blocks of content in an intuitive and scalable way. &nbsp;Here&#39;s how they work...Let&#39;s say for example we would like the ability to add multiple testimonials to a page. &nbsp;This is a pretty common use-case and usually involves a few content pieces: Quote, Cite and maybe an Image. &nbsp;To create our Repeater Metafield follow these steps:1. Go to the object where the Repeater will be added and click &quot;Add Metafield&quot;<img src="https://www.cosmicjs.com/uploads/ba0a8be0-8f39-11e6-b735-357b44db1c2d-Screen Shot 2016-10-10 at 5.34.24 PM.png" data-filename="https://www.cosmicjs.com/uploads/ba0a8be0-8f39-11e6-b735-357b44db1c2d-Screen Shot 2016-10-10 at 5.34.24 PM.png" style="width: 1084px;" class="fr-dii fr-draggable"> 2. Click the Repeater icon<img src="https://www.cosmicjs.com/uploads/aa837020-8f38-11e6-b735-357b44db1c2d-Screen Shot 2016-10-10 at 5.26.48 PM.png" data-filename="https://www.cosmicjs.com/uploads/aa837020-8f38-11e6-b735-357b44db1c2d-Screen Shot 2016-10-10 at 5.26.48 PM.png" style="width: 280.798px; height: 230px;" class="fr-dii fr-draggable"> 3. Add a title and key, then click &quot;Add Repeater Metafield&quot;<img src="https://www.cosmicjs.com/uploads/1feb5060-8f36-11e6-b735-357b44db1c2d-Screen Shot 2016-10-10 at 5.08.21 PM.png" data-filename="https://www.cosmicjs.com/uploads/1feb5060-8f36-11e6-b735-357b44db1c2d-Screen Shot 2016-10-10 at 5.08.21 PM.png" style="width: 499.216px; height: 303px;" class="fr-dii fr-draggable"> 4. Add the Quote Metafield (Text Area), Cite Metafield (Text) and Image Metafield (Image) and click Save. <img src="https://www.cosmicjs.com/uploads/7a1b3c30-8f36-11e6-b735-357b44db1c2d-Screen Shot 2016-10-10 at 5.10.06 PM.png" data-filename="https://www.cosmicjs.com/uploads/7a1b3c30-8f36-11e6-b735-357b44db1c2d-Screen Shot 2016-10-10 at 5.10.06 PM.png" style="width: 491.096px; height: 1174px;" class="fr-dii fr-draggable">Now add your first Repeater by adding content to the fields:<img src="https://www.cosmicjs.com/uploads/efa77b10-8f38-11e6-b735-357b44db1c2d-Screen Shot 2016-10-10 at 5.28.38 PM.png" data-filename="https://www.cosmicjs.com/uploads/efa77b10-8f38-11e6-b735-357b44db1c2d-Screen Shot 2016-10-10 at 5.28.38 PM.png" style="width: 100%;" class="fr-dii fr-draggable"> Now you are ready to add repeating Metafields. &nbsp;To add another group of Metafields, just click &quot;Add Repeating Item&quot; and another block of Quote, Cite and Image will be available.Repeater Metafields is another way that we are making content creation intuitive and highly scalable for your websites and applications. &nbsp;If you have any questions about Repeater Metafields, feel free to reach out to us on <a href="https://twitter.com/cosmic_js" target="_blank">Twitter</a> or in our <a href="https://www.cosmicjs.com/community">Slack Community</a>.<h3>Read More</h3><a href="https://www.cosmicjs.com/blog/how-to-build-a-cross-platform-blog-using-react-native-and-nodejs">How to Build a Cross-Platform Blog Using React Native and Node.js</a><a href="https://www.cosmicjs.com/blog/cosmic-js-product-tour">Cosmic Product Tour</a><a href="https://www.cosmicjs.com/blog/adding-webhooks-in-4-steps">Adding Webhooks in 4 Easy Steps</a><a href="https://www.cosmicjs.com/blog/cosmic-js-user-roles-and-permissions">Cosmic User Roles and Permissions</a>

Repeater Metafields Now Available

<h3><img src="https://www.cosmicjs.com/uploads/14480e80-89a3-11e6-bed6-65a0e6114816-cross-platform-blog.gif" data-filename="https://www.cosmicjs.com/uploads/14480e80-89a3-11e6-bed6-65a0e6114816-cross-platform-blog.gif" style="width: 100%;" class="fr-dii fr-draggable"></h3>We live in a world of inter-connected devices, each powered by their own software, built with their own circuits and protected by their own casing. &nbsp;The best way to deliver information to these seemingly closed-off systems is with an API. &nbsp;Cosmic is an API-first cloud-based content platform that makes it not only easy to add dynamic content to any existing or new website, but makes it possible to seamlessly deliver content across devices and platforms.In this article I&rsquo;m going to show you how to quickly and easily create a cross-platform blog that will connect your content across Web, iOS and Android. &nbsp;With content powered by Cosmic, you will be able to edit your content once and deliver the updates simultaneously across all devices and platforms. &nbsp;Let&rsquo;s get started. <h3>TL;DR</h3><a href="https://www.cosmicjs.com/apps/cross-platform-blog" target="_blank">Check out the demo.</a> <h3>Website</h3> To get started, <a href="https://github.com/cosmicjs/cross-platform-blog" target="_blank">download the Cross-Platform Blog on GitHub</a> which is based on the <a href="https://github.com/cosmicjs/nodejs-website-boilerplate" target="_blank">Node.js Website Boilerplate</a>. &nbsp;This comes with everything you need to get started with a basic website as well as the codebase for the native applications running React Native for iOS and Android.<pre>git clone https://github.com/cosmicjs/cross-platform-blog
cd cross-platform-blog/web
npm install
npm run development</pre>The root of our application runs at app-server.js. &nbsp;Looking at this file, you&#39;ll see how routes are set up and how views are rendered to the routes.Now that we have our website running, let&rsquo;s open up another terminal window and get our iOS and Android apps built.<h3>React Native Bridges the Gap</h3>React Native is a very powerful way to build applications for both iOS and Android. &nbsp;Because most, if not all, of the codebase can be shared between the two platforms, by using React Native you can build your apps in half the time. &nbsp;If you haven&rsquo;t gotten your local environment setup for React Native development, go to the <a href="https://facebook.github.io/react-native/" target="_blank">React Native website</a> and follow the steps. &nbsp;Honestly I found setting up the iOS development environment to be super easy, but setting up the Android, not so much. &nbsp;Mainly because I had to search more to figure it all out. &nbsp;In short, you need to download Android Studio and make sure you have the correct version of the Java SDK installed and make sure you have all of the developer tools installed.<h4>iOS</h4>To install and run the iOS React Native application run the following commands:<pre>cd cross-platform-blog/ios
npm install
react-native run-ios</pre> <h4>Android</h4>Run the following commands to run the Android application (make sure you have your Android device emulator open): <pre>cd cross-platform-blog/android
npm install
react-native android</pre>Looking at index.ios.js and index.android.js you will notice that the root of our application for both iOS and Android runs at App.js. &nbsp; And all other components LandingPage.js, BlogList.js and BlogPost.js are shared between the two platforms as well.When we run our react-native commands, our React Native code base is translated to both Objective-C and Java languages. &nbsp;It is not a &ldquo;hybrid app&rdquo; or web-based at all. &nbsp;It basically just translates your JavaScript (React) building blocks together into the native language of each platform. <h3>Connect to the CMS API</h3>If you don&#39;t have an account yet, <a href="https://www.cosmicjs.com/" target="_blank">sign up for Cosmic to set up your bucket</a>. &nbsp;Your bucket is the place to add and edit content for your cross-platform blog. &nbsp;To upload the demo content from the Cross-Platform Blog on GitHub, go to Your Bucket &gt; Import / Export. &nbsp;Then upload the bucket.json file located in the root folder of the Cross-Platform Blog repository. &nbsp;This will upload all of the demo data and files from the Cross-Platform Blog demo application. &nbsp; To configure your local application to point to your bucket, simply edit your config files in both web and native folders to point to &quot;your-bucket-slug&quot;.<pre>// config.js
export default {
&nbsp; COSMIC_BUCKET: &#39;your-bucket-slug&#39;
}</pre>Now when you edit content in your Cosmic bucket, you will see that the content automatically updates across Web, iOS and Android applications. &nbsp;By connecting your applications to Cosmic, you are using a powerful tool that breaks down the barriers between devices and programming languages.I hope you found this tutorial helpful. &nbsp;If you have any questions about how Cosmic can help your team build websites and applications faster and easier, <a href="https://twitter.com/cosmic_js" target="_blank">reach out to us on Twitter</a> and <a href="https://www.cosmicjs.com/community">join our community on Slack</a>.

How to Build a Cross-Platform Blog Using React Native and Node.js

<a href="https://www.cosmicjs.com" target="_blank">Cosmic</a> offers <a href="https://www.cosmicjs.com/partners" target="_blank">partnership opportunities</a> to designers, developers &amp; agencies for app contributions, bucket management as well as Affiliate referral programs. Of the agencies taking advantage of the Cosmic Partners Program thus far, <a href="http://www.simplemedia.co" target="_blank">Simple Media</a> is leveraging the tool in the most formidable way. Simple Media is a boutique interactive branding &amp; inbound marketing agency in the Design District neighborhood of Dallas. Hobbled by installed systems, Simple Media was looking for an easier way to launch digital properties on behalf of their clients, as well as integrate a new hosting solution into the mix that knocks out several disparate tech partners in their <a href="https://www.cosmicjs.com/blog/the-cosmic-stack" target="_blank">content management stack</a>.&nbsp;Simple Media is actively building new websites and apps on the Cosmic system, leveraging their team of developers for an initial hours scope on time-to-launch for each individual client, optimizing thereafter. Watch Simple Media CEO &amp; Founder <a href="https://www.linkedin.com/in/nickbonanno" target="_blank">Nick Bonanno&nbsp;</a>discuss their integration with Cosmic.&nbsp;<iframe frameborder="0" src="https://www.youtube.com/embed/C4kSwh1N1t0" width="640" height="360" class="note-video-clip"></iframe>

Start building today