<p><img src="https://www.cosmicjs.com/uploads/f2a66940-b060-11e6-95e2-27fd9e24a1eb-users.jpg" data-filename="https://www.cosmicjs.com/uploads/f2a66940-b060-11e6-95e2-27fd9e24a1eb-users.jpg" style="width: 100%;" class="fr-fic fr-dii" alt="Managing your users in a Node.js app is easiest when you use a Headless CMS like Cosmic"><br></p><p>In this tutorial I&rsquo;m going to show you how to build a user management app using <a href="https://nodejs.org/en/">Node.js</a> and Cosmic as a <a href="https://www.cosmicjs.com/knowledge-base/nodejs-cms">Node.js CMS</a>.</p><h3 open="" style="font-family: ;">TL;DR</h3><p><a href="https://github.com/cosmicjs/user-management" target="_blank">View the full source code on GitHub</a><br><a href="https://www.cosmicjs.com/apps/user-management/demo" target="_blank">View the Demo</a><br><a href="https://www.cosmicjs.com/knowledge-base/nodejs-cms">Why Use Cosmic as Your Node.js CMS?</a></p><p>The app will include the following pages:</p><ul><li>Login</li><li>Signup</li><li>Users list (logged in user access only)</li></ul><h3 open="" style="font-family: ;">Getting Started</h3><p>Create a file titled app-server.js file and add the following:</p><div class="fr-embedly            " data-original-embed="<a href='https://gist.github.com/tonyspiro/09c96eb3a1fa7328a6994623c50880d1' class='embedly-card'></a>"><a href="https://gist.github.com/tonyspiro/09c96eb3a1fa7328a6994623c50880d1" class="embedly-card"></a></div><p>This is the entry point of our app and serves to initialize everything we need for our user management app. &nbsp;We&rsquo;re using <a href="https://expressjs.com/">Express</a> for the Node.js framework, Hogan Express for view rendering from Mustache templates. &nbsp;Express Session is used to initialize and save sessions.</p><p>We are going to have a couple partials available in our templates, header and footer as all of our pages will share these.</p><h3 open="" style="font-family: ;">Know Your Routes</h3><p>Next let&rsquo;s take a look at index.js in our routes folder.</p><div class="fr-embedly            " data-original-embed="<a href='https://gist.github.com/tonyspiro/a37533e4341bc7f6e6bdec2f81ee66cc' class='embedly-card'></a>"><a href="https://gist.github.com/tonyspiro/a37533e4341bc7f6e6bdec2f81ee66cc" class="embedly-card"></a></div><p style="font-family: ;">Here we have all of our routes.</p><h3 open="" style="font-family: ;">Logging In</h3><p>Let&rsquo;s take a look at home.js which is the login page for our app:</p><div class="fr-embedly            " data-original-embed="<a href='https://gist.github.com/tonyspiro/36d4a91f4e835f1817dea0509513e519' class='embedly-card'></a>"><a href="https://gist.github.com/tonyspiro/36d4a91f4e835f1817dea0509513e519" class="embedly-card"></a></div><p>There is not much going on here, just loading our dynamic content from Cosmic, as well as the HTML login form.</p><p>Looking at the auth.js file, you&rsquo;ll see this is where the login form will send the data to log the user in.</p><div class="fr-embedly            " data-original-embed="<a href='https://gist.github.com/tonyspiro/6452d0201d498f26a57760564f4e529b' class='embedly-card'></a>"><a href="https://gist.github.com/tonyspiro/6452d0201d498f26a57760564f4e529b" class="embedly-card"></a></div><p>When the data is sent to /auth the Cosmic NPM module searches for the email first then, if found tries to match the submitted password to the password saved in the Cosmic API (using <a href="https://www.npmjs.com/package/bcrypt" target="_blank">bcrypt</a>).
If both email and password are matched with a user, the session is created and the user is redirected from the login page to the users page. &nbsp;Let&rsquo;s take a look at the users list page.</p><h3 open="" style="font-family: ;">Access Exclusive Content</h3><p>After the user has logged in successfully, they are redirected to the users list page. &nbsp;This is how it looks:</p><div class="fr-embedly            " data-original-embed="<a href='https://gist.github.com/tonyspiro/d2760fbde9250977663eed55ba1e90f6' class='embedly-card'></a>"><a href="https://gist.github.com/tonyspiro/d2760fbde9250977663eed55ba1e90f6" class="embedly-card"></a></div><p>If the user session is not set, they are immediately redirected to the login page with an unauthorized message. If they have a user session, they will be able to see a list of all registered users (from the Users Object Type). This gives you the idea
of how to limit user access in our app. By checking for req.session.user on any page, you can restrict access to logged in users only.</p><h3 open="" style="font-family: ;">Signing Up</h3><p>Let&rsquo;s take a look at what happens for new users when they post their info to /users:</p><div class="fr-embedly            " data-original-embed="<a href='https://gist.github.com/tonyspiro/5a102e418f371c2d771430b0c90acee0' class='embedly-card'></a>"><a href="https://gist.github.com/tonyspiro/5a102e418f371c2d771430b0c90acee0" class="embedly-card"></a></div><p>There&rsquo;s a few things happening here. First, the email is checked against the current list of users. &nbsp;If a match is not found, the user object is created with each data point of the user: First Name, Last Name, Email and Password stored as metafields
in the Cosmic API.</p><p>Taking this a step further, after you log into your Cosmic bucket and go to your Users Object Type you will be able to add more Metafields to the users in your system. &nbsp;This makes adding dynamic, extended data very easy. &nbsp;For example, let&rsquo;s
say you needed to add a profile image, address, GitHub username, etc. &nbsp;All of these can be added as Metafields to the User Object. &nbsp;See screenshot below:</p><p><img src="https://www.cosmicjs.com/uploads/7f8be320-b05d-11e6-95e2-27fd9e24a1eb-Screen Shot 2016-11-21 at 8.40.33 PM.png" data-filename="https://www.cosmicjs.com/uploads/7f8be320-b05d-11e6-95e2-27fd9e24a1eb-Screen Shot 2016-11-21 at 8.40.33 PM.png" style="width: 758px;" class="fr-fic fr-dii"><br></p><h3 open="" style="font-family: ;">See Ya Next Time</h3><p>Now let&rsquo;s see what happens when a user accesses the /logout route:</p><div class="fr-embedly           " data-original-embed="<a href='https://gist.github.com/tonyspiro/226bb2543fb5ad57901c4bf1a9480b0a' class='embedly-card'></a>"><a href="https://gist.github.com/tonyspiro/226bb2543fb5ad57901c4bf1a9480b0a" class="embedly-card"></a></div><p>The session is simply destroyed and the user is redirected back to the login page.</p><h3 open="" style="font-family: ;">Where&#39;s the HTML?</h3><p>I&#39;m not going to go into too much detail on the HTML, but basically both login and signup forms have JQuery validation and submit AJAX requests to the route endpoints. &nbsp;<a href="https://github.com/cosmicjs/user-management/blob/master/public/js/2-main.js" target="_blank">Check out the main.js file on GitHub</a> to see how JQuery is used for this and other UI and UX things.</p><h3 open="" style="font-family: ;">Conclusion</h3><p>And that&rsquo;s it. &nbsp;Cosmic is a powerful platform for content creation and app data management. &nbsp;With your Cosmic-powered User Management App you can now extend your user data using the Cosmic API or from your Cosmic Bucket Dashboard.</p><p>&nbsp;I hope you found this tutorial helpful. &nbsp; If you have any questions or feedback you can <a href="https://twitter.com/cosmicjs" rel="noopener noreferrer" target="_blank">reach out to us on Twitter</a> or <a href="https://www.cosmicjs.com/community">chat with us in the Slack community</a>.</p>

How to Build a Node.js User Management App

<p><img src="https://www.cosmicjs.com/uploads/b071d2a0-aab9-11e6-b60f-ff2536816c1a-responsive.jpg" style="width: 100%;"><br></p><p>Cosmic is on a mission to bring API-first content management to the world. &nbsp;Along with providing an intuitive API and content editing experience, our goal is to provide excellent examples of how you can quickly get started building the future of the web using Cosmic.</p><p>Today we’re rolling out a new app demo experience that allows you to demo any of <a href="https://www.cosmicjs.com/apps" data-cke-saved-href="https://www.cosmicjs.com/apps" target="_blank">our&nbsp;web apps</a> across different device screen resolutions. &nbsp;Easily switch between Desktop, Tablet and Mobile viewing experiences.<br></p><p><a href="https://www.cosmicjs.com/apps/static-website/demo" style="background-color: rgb(255, 255, 255);">Click here to check out the new responsive demo page.</a></p><p><img src="https://cosmicjs.imgix.net/37691a60-aabb-11e6-b60f-ff2536816c1a-Screen%20Shot%202016-11-14%20at%204.37.45%20PM.png?w=900" style="width: 50%;"><img src="https://www.cosmicjs.com/uploads/153b24f0-aabc-11e6-b60f-ff2536816c1a-Screen Shot 2016-11-14 at 4.44.46 PM.png" data-filename="https://cosmicjs.imgix.net/153b24f0-aabc-11e6-b60f-ff2536816c1a-Screen Shot 2016-11-14 at 4.44.46 PM.png?w=600" style="width: 25%;"><img src="https://www.cosmicjs.com/uploads/4c335e60-aabb-11e6-b60f-ff2536816c1a-Screen Shot 2016-11-14 at 4.38.54 PM.png" data-filename="https://cosmicjs.imgix.net/4c335e60-aabb-11e6-b60f-ff2536816c1a-Screen Shot 2016-11-14 at 4.38.54 PM.png?w=600" style="width: 25%;"><br></p><p>Browsing our apps&nbsp;is a great way to give you ideas of how to build your next website. &nbsp;Click through any of our apps and click "View Demo" to enter the responsive demo experience. &nbsp;Click "View Code" to see how our apps use Cosmic to power content using different programming languages including Node.js, React, PHP and Angular. &nbsp;While in the responsive demo experience, click on the gallery icon in the top left corner to quickly navigate to another app.</p><p><a href="https://www.cosmicjs.com/signup">Sign up for Cosmic</a> to install any one of our apps for easy customization. &nbsp;If you have any questions about the benefits of going API-first, <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 us the community on Slack</a>.</p>

New Responsive App Demo Experience

<p>In this blog I will show you how to create an extendable content object in 4 Steps using the <a href="https://www.cosmicjs.com/" target="_blank">Cosmic</a> Content Management Platform. Once my object is created, it is available via API endpoint. The following 4 steps are an easy way to create new extendable objects for your web-connected application, so I would encourage you to <a href="https://www.cosmicjs.com/signup" target="_blank">Sign Up</a> for <a href="https://www.cosmicjs.com/" target="_blank">Cosmic</a> and begin the demo. If you're just starting out with Cosmic, I'd recommend reviewing the <a href="https://www.cosmicjs.com/getting-started" target="_blank">Getting Started </a>and <a href="https://www.cosmicjs.com/docs" target="_blank">Documentation</a> Pages. I'll be using the <a href="https://www.cosmicjs.com/" target="_blank">Cosmic CMS Web Application</a> as I walk through the 4 steps. </p><p>Once you've signed up, you will be prompted to Create a New Bucket, which you can think of as your project: your new website, your new iOS application or your new Android application. I created my bucket and created an Object Type called "Page". Below you can see how I created a page of content that can be delivered via API to any web-connected device. </p><h3 style="font-family: 'Open Sans', sans-serif; color: rgb(0, 0, 0);">1.1 Adding an Object - Object Title</h3><p><img src="https://www.cosmicjs.com/uploads/61cfed00-a459-11e6-9a23-c1e7e75636c2-Screen%20Shot%202016-11-06%20at%201.42.03%20PM.png" data-filename="https://www.cosmicjs.com/uploads/61cfed00-a459-11e6-9a23-c1e7e75636c2-Screen Shot 2016-11-06 at 1.42.03 PM.png" style="width: 763px;"></p><h3 style="font-family: 'Open Sans', sans-serif; color: rgb(0, 0, 0);">1.2 Adding an Object - Auto-Generated Slug</h3><p><img src="https://www.cosmicjs.com/uploads/655172a0-a459-11e6-9a23-c1e7e75636c2-Screen%20Shot%202016-11-06%20at%201.42.17%20PM.png" data-filename="https://www.cosmicjs.com/uploads/655172a0-a459-11e6-9a23-c1e7e75636c2-Screen Shot 2016-11-06 at 1.42.17 PM.png" style="width: 771px;"></p><h3 style="font-family: 'Open Sans', sans-serif; color: rgb(0, 0, 0);">2. Adding an Object's Content</h3><p><img src="https://www.cosmicjs.com/uploads/69c91810-a459-11e6-9a23-c1e7e75636c2-Screen%20Shot%202016-11-06%20at%201.42.33%20PM.png" data-filename="https://www.cosmicjs.com/uploads/69c91810-a459-11e6-9a23-c1e7e75636c2-Screen Shot 2016-11-06 at 1.42.33 PM.png" style="width: 793px;"></p><h3 style="font-family: 'Open Sans', sans-serif; color: rgb(0, 0, 0);">3. Adding Metafields To Your Object</h3><p><img src="https://www.cosmicjs.com/uploads/6dead550-a459-11e6-9a23-c1e7e75636c2-Screen%20Shot%202016-11-06%20at%201.43.02%20PM.png" data-filename="https://www.cosmicjs.com/uploads/6dead550-a459-11e6-9a23-c1e7e75636c2-Screen Shot 2016-11-06 at 1.43.02 PM.png" style="width: 595px;"></p><h3 style="font-family: 'Open Sans', sans-serif; color: rgb(0, 0, 0);">4. Saving Object Draft | Publishing Object</h3><p><img src="https://www.cosmicjs.com/uploads/753bb270-a459-11e6-9a23-c1e7e75636c2-Screen%20Shot%202016-11-06%20at%201.43.17%20PM.png" data-filename="https://www.cosmicjs.com/uploads/753bb270-a459-11e6-9a23-c1e7e75636c2-Screen Shot 2016-11-06 at 1.43.17 PM.png" style="width: 882px;"></p><p><a href="https://www.cosmicjs.com/" target="_blank">Cosmic </a>is an <a href="https://www.cosmicjs.com/" target="_blank">API-first cloud-based content management platform</a> that makes it easy to manage applications and content. If you have questions about the Cosmic API, please reach out to the founders on <a href="https://twitter.com/cosmic_js" target="_blank">Twitter</a> or <a href="https://www.cosmicjs.com/community" target="_blank">Slack</a>. </p><h2 style="font-family: 'Open Sans', sans-serif; color: rgb(0, 0, 0);">Read More</h2><ul><li><a href="https://carsongibbons.com/build-a-static-website-in-4-steps" target="_blank">Build a Static Website in 4 Steps</a> </li><li><a href="https://www.cosmicjs.com/blog/how-to-build-an-api-powered-static-website-the-best-of-both-worlds" target="_blank">How to Build an API-Powered, Static Website</a></li><li><a href="https://www.cosmicjs.com/blog/version-iteration-portable-json-buckets" target="_blank">Version Iteration - Portable JSON Buckets</a></li><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/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/how-to-create-an-intuitive-website-navigation-menu" target="_blank">How to Create an Intuitive Website Navigation Menu</a></li></ul>

Creating Extendable Content Objects Served via API 

<p><img src="https://www.cosmicjs.com/uploads/ab768870-a0ac-11e6-9e57-19df6f62c66a-deploy-logs.gif" data-filename="https://www.cosmicjs.com/uploads/ab768870-a0ac-11e6-9e57-19df6f62c66a-deploy-logs.gif" style="width: 1009px;" class="fr-fil fr-dib"><br></p><p>Cosmic makes it easy to deploy your application from GitHub to your own instance on the Cosmic App Server. &nbsp;And starting today, you can now view the status of every deployment attempt in an easy-to-use table. &nbsp;</p><p>This means that if there is an error on your deploy, you will be able to see exactly the error output to address any issues with your application. &nbsp;When the deploy is a success, you will see the entire build process indicated clearly. &nbsp; This gives you the ability to keep track of all of your deployments in a running history.</p><p>Simply go to Your Bucket &gt; Web Hosting after <a href="https://www.cosmicjs.com/login" target="_blank">logging into your Cosmic account</a>. &nbsp;When you click the &quot;View Log&quot; button, you will see the detail of the log. &nbsp;</p><p>Application deployment monitoring is another way that Cosmic is making it easier for you to build (and deploy!) your apps faster and easier.</p>

App Deployment Monitoring Now Available

<p>Cosmic is on a mission to help teams build content-powered websites and apps faster and easier.  Today, we’re happy to announce an exciting milestone: users have passed one million total requests to the Cosmic API. This means that more than one million times someone has used Cosmic to <a href="https://www.cosmicjs.com/apps/photography-website" target="_blank">view a website page</a>, <a href="https://www.cosmicjs.com/apps/static-website" target="_blank">create a static website build</a>, <a href="https://www.cosmicjs.com/apps/react-chat-app" target="_blank">send a chat message</a>, <a href="https://www.cosmicjs.com/apps/voting-app" target="_blank">vote for their preferred presidential candidate</a> or <a href="https://www.cosmicjs.com/apps/cross-platform-blog" target="_blank">view a blog post using an iOS or Android device</a>. This increase in requests comes shortly after <a href="https://www.cosmicjs.com/blog/cosmic-js-users-hit-500000-api-requests" target="_blank" style="background-color: rgb(255, 255, 255);">announcing our 500,000th API request last month</a>.<br><br>While this milestone is an indication of continued traction, it's just the start.  Cosmic is dedicated to enabling faster and easier product development for teams all over the world.  So far users in 67 countries are using Cosmic to develop a variety of content-powered applications.<br><br>We're seeing widespread adoption in industries including politics, telecom, retail goods, career placement, digital services and more. This reaffirms the painpoints that we aimed to solve with Cosmic.  And shows the need for an intuitive content and application development solution are truly universal.<br><br>Special thanks to you, the <a href="https://en.wikipedia.org/wiki/Earlyvangelist" target="_blank" style="background-color: rgb(255, 255, 255);">earlyvangelists</a>, the supporters and the partners who have joined us on this exciting journey.  Here's to the next 99 million requests!<br><br>Cheers,<br>Tony Spiro<br>Co-founder, CEO</p>

One Million Requests - One Million Thanks

<p style="text-align: center;"><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"><br></p><h2><strong>Update</strong></h2><p>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.</p><p style="text-align: center;"><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></p><p>Continue reading for an example using <a href="https://www.npmjs.com/package/metalsmith" rel="noopener noreferrer" target="_blank">Metalsmith</a>.</p><p><br></p><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><p><br></p><p>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.<br><span style="color: inherit; font-family: inherit;"><br><span style="font-size: 24px;">TL;DR</span></span></p><p><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><br><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><br><a href="https://www.cosmicjs.com/apps/static-website">View the Static Website App page on Cosmic</a>.<br><span style="color: inherit; font-family: inherit;"><br><span style="font-size: 24px;">The Problem With Markdown</span></span></p><p>A 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.</p><p>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.</p><p><span style="color: inherit; font-family: inherit;"><br><span style="font-size: 24px;">API-Powered, Static Website</span></span></p><p>In 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>.<br><span style="color: inherit; font-family: inherit; font-size: 24px;"><br>Getting Started</span></p><p>To build our API-powered static website, we will need a few things:</p><p>1. A build process that converts the API response into static pages.</p><p>2. A rebuild process that makes it easy to rebuild our app after content edits.</p><p>3. The ability to create pages using Markdown.</p><p>To follow along with the steps <a href="https://github.com/cosmicjs/static-website" target="_blank">download the Static Website on GitHub</a>.</p><p><span style="color: inherit; font-family: inherit;"><br><span style="font-size: 24px;">The Build Process</span></span></p><p>To 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:</p><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><p>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.</p><p><br><span style="font-size: 24px;">Other Routes</span></p><p>GET /rebuild-site will rebuild the website.</p><p>POST /rebuild-site is used for our <a href="https://www.cosmicjs.com/blog/adding-webhooks-in-4-steps" target="_blank">Cosmic Webhooks</a>.</p><p>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.</p><h3 open="" style="font-family: ;"><br>Building HTML Pages from the API</h3><p>Next let&rsquo;s look at the build process. &nbsp;Here&#39;s what&#39;s in the <code>build-site.js</code> file:</p><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><p><br></p><p>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:</p><p>1. The new build folder is created.<br>2. The Cosmic API is called to get the Pages from our Cosmic bucket.<br>3. The createPage function is called next (we&rsquo;ll get to this in a moment).<br>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.</p><p>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 <span style="font-weight: 700;">zero-downtime</span> update to our static website.</p><p>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.</p><p>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:</p><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><p><br></p><p>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.</p><p>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.<br><br></p><h3 open="" style="font-family: ;">Building Pages from Markdown</h3><p>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:</p><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><p>Any new folder that you add to src with an index.md Markdown file will create a new route at /your-new-folder.<br><span style="font-size: 24px; color: inherit; font-family: inherit;"><br>Starting Our Static Website</span></p><p>If you haven&#39;t already, download the GitHub repository for the Static Website by running the following commands:</p><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><p>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.<br><span style="color: inherit; font-family: inherit;"><br><span style="font-size: 24px;">Automatic Builds Using Webhooks</span></span></p><p>Next, 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.</p><p><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>.<br><span style="color: inherit; font-family: inherit;"><br><span style="font-size: 24px;">Conclusion</span></span></p><p>By 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.</p><p>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>.</p>

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

<p>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;</p><p>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;</p><p>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.</p><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><p><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;"></p><p>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;</p><h2 style="font-family: 'Open Sans', sans-serif; color: rgb(0, 0, 0);"><span style="color: inherit; font-family: inherit; font-size: 24px;">Downloaded bucket.json File</span><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><p><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;"><br></p><h2 style="font-family: 'Open Sans', sans-serif; color: rgb(0, 0, 0);">Create New Bucket - Version II</h2><p><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;"></p><p>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;</p><h2 style="font-family: 'Open Sans', sans-serif; color: rgb(0, 0, 0);"><span style="color: inherit; font-family: inherit; font-size: 24px;">App Installation Prompt</span></h2><p><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;"></p><p>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".</p><h2 style="font-family: 'Open Sans', sans-serif; color: rgb(0, 0, 0);">Import Bucket.json file&nbsp;</h2><p><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;"></p><p>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;</p><h2 style="font-family: 'Open Sans', sans-serif; color: rgb(0, 0, 0);"><span style="font-size: 24px;">Importing bucket.json file</span></h2><p><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;"></p><p>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;</p><h2 style="font-family: 'Open Sans', sans-serif; color: rgb(0, 0, 0);">Use Case</h2><p><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;"></p><p>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.</p><p><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;</p><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><br></div>

Version Iteration - Portable JSON Buckets

<p><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%;"><br></p><p>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.<br><br>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>.<br><br><b>Cosmic: Can you talk a little about ToneTemple the business?<br></b>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.</p><p><br><b>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?<br></b>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.</p><p class="p2"><br><b>Can you talk about why you decided to use an API to host your content instead of an installed CMS?<br></b>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.<br><br><b>Can you talk a little about your development and content management process and how Cosmic fits in?<br></b>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;</p><p class="p2"><span class="s1">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;<br></span><br><b>What app development technologies are you excited about using now or in the future?<br></b>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.<br><br><b>Who are some of your favorite guitarists? &nbsp;Are you a musician yourself?<br></b>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);"><span class="s2">GuitarNoize.com</span></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.</p><p class="p2"><br></p><p class="p2">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>.</p><p class="p1"><span class="s1"></span></p>

Developer Spotlight: Jon Bloomer

<p style="text-align: center; "><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%;"><br></p><h3>The Problem</h3><p>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. </p><p>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. </p><p>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).</p><h3>The Situation</h3><p>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. </p><p>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? </p><h3>The Solution </h3><p>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></p><p><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;"><br></p><p>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...</p><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><p><span style="color: inherit; font-family: inherit; font-size: 24px;"><a href="https://www.cosmicjs.com/login" target="_blank">Login</a></span><br></p><p><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;"><br></p><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><p><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;"></p><h3 style="font-family: 'Open Sans', sans-serif; color: rgb(0, 0, 0);">Add a New User</h3><p><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;"></p><h3 style="font-family: 'Open Sans', sans-serif; color: rgb(0, 0, 0);">Adding a New User to Your Bucket</h3><p><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;"></p><p>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>.</p><h3 style="font-family: 'Open Sans', sans-serif; color: rgb(0, 0, 0);">Adding Media Folders</h3><p><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%;"></p><p>Click "Add media folder"</p><p><br></p><p><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;"></p><p>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. </p><p><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;"></p><p>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.</p><p><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;"></p><p>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. </p><p><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;"></p><p>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.</p><p><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>. </p><h3 style="font-family: 'Open Sans', sans-serif; color: rgb(0, 0, 0);">Read More</h3><p><a href="https://www.cosmicjs.com/blog/team-member-role-management-in-cosmic-js" target="_blank">Team Member Role Management in Cosmic</a></p><p><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></p><p><a href="https://www.cosmicjs.com/blog/cosmic-js-product-tour">Cosmic Product Tour</a></p><p><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></p><p><a href="https://www.cosmicjs.com/blog/repeater-metafields-now-available" target="_blank">Repeater Metafields Now Available</a> <br></p><p><a href="https://www.cosmicjs.com/blog/adding-webhooks-in-4-steps">Adding Webhooks in 4 Easy Steps</a></p>

Start building today