What we’ll be building TL;DR View the demo View the full codebase on GitHub Install and deploy the website in a few clicks When you’re laser focused on writing songs, getting the most out of your studio time, and finding gigs, you can’t be bothered with setting up a static site for your band or dealing with abstruse CMS systems. When you want easy access to your data, want to know where everything is, and want to be able to write a simple, predictable app for yourself, Cosmic JS should be the most obvious choice. Cosmic JS is an API-first CMS, meaning it is language independent, database independent, and practically everything-else independent. This is great for a small project like this one because we can extend it quickly with any language or framework in the future and we can define data structures that are only as complex as we need them to be. Our band site needs to have the following features: Tour dates, so our fans know where they can see us A photo gallery, because looking cool is just as important as sounding good A video gallery, because photos get boring A biography, so new fans can learn what we’re about A mailing list signup form, so we can market to our fans Our site will be built as an Express app, integrate with Mailchimp to handle email signups, and will have all of its data served entirely from Cosmic JS. It will be deployed through Cosmic as well. Part 0: Setting Up Cosmic JS We’ll use three Object types in Cosmic to structure our data. Tour Dates — for storing gig information Galleries — for storing photo albums Videos — for storing links to Youtube videos Settings — for storing site settings We’ll set up each Object type with predefined metafields like so: **Tour DatesMetafields**Location (text)Venue (text)Date (date)Ticket Link (text) **GalleriesMetafields**Photos (repeater) - Photo (file) - Date (date) **VideosMetafields**Embed Code (text) (The Settings type won’t have predefiend metafields — we’ll set those as we need them) Part 1. Boilerplate Setup To save time on boilerplate, we’ll use Yeoman and the Express Generator (which builds on Express’ official generator) to get started. If you don’t have Yeoman installed, run . Then install the generator with and run it with . Follow the instructions to set up your project under a new directory (say ), install the version, and use Handlebars for your view engine. npm i -g yo npm i -g generator-express yo express CosmicUserBlog Basic Your directory structure is now this: Part 2. Installations We’ll be using the following packages: Async — A powerful async utilities library Axios — Simple, promise based http requests Cors — Standard cors middleware Cosmic JS — The official client Moment — to format dates TruncateHTML — for HTML safe text shortening Lodash — for its various utilities You could install these with npm, but I advocate for Yarn. It’s significantly faster and we have no time to waste. So install Yarn (on macOS we’ll do a ) then run . brew install yarn yarn add async axios cors cosmicjs moment truncate-html lodash Part 3. Configure the App Within , import the packages we just installed and declare a object to be used with the Cosmic JS client: app.js config We assign it to to use it in our routes. app.locals Site Settings We want to be able to display certain data globally throughout the site and we’ll store it in a Cosmic JS object to make it easy to edit, rather than having to redeploy our site everytime something needs changed. In your Cosmic dashboard, make a object called . Settings `Site Settings` The Main Layout The last step before we get building is to make a few tweaks to the main Handlebars layout, in which we need to link to Font Awesome, Normalize.css, and change the title. Post-changes, will look like this: main.handlebars Part 4. Build the Header and Footer Every page on the site will have a header, so we’ll build that first. For the same reason, we’ll make it a partial. It will feature links to our social media, a signup form for our mailing list, our logo, and the main navigation. Add this to : partials/header.handlebars This gives us a responsive header with a mobile dropdown menu where we need to build out , , and as their own partials. Again, (and other data) will be passed from the route through . nav-links signup-form social-links settings.logo req.locals Nav Links Partial For the sake of not repeating ourselves, we create a partial with all of our navigation links in . partials/nav-links.handlebars Social Links Partial The same goes for our social media links, except the way we pass the data will make the construction slighly more interesting. Because the link element is the same for each account, save for the , text, and , we'll use the Handlebars helper to iterate over all of our accounts. title href each Signup Form Partial Finally, we need a form to handle adding new subscribers to our Mailchimp list. We’ll simply gather their email address and process it later in a POST request to . /signup With all of the Header partials complete, the header itself is complete, and we essentially get the Footer for free: Notice the helper. We'll define this later in and us it to return the current year as a string. #getYear app.js Part 5. Build the Home Page The home page will be a glimpse into what’s on the rest of the site. In the top half we’ll show our header and a big CTA section with buttons linking to our Tour Dates and photo gallery. In the bottom half we’ll show three upcoming shows, a blurb of our bio, and a footer. This article is an abbreviated version of the by Matt Cain original article posted on Cosmic JS Part 9. Deploy Before deploying — which is just pushing to a Github repo and following the instructions on the Cosmic dashboard — make sure you compile the Sass styles with gulp sass Part 10. Conclusion Using Cosmic JS, Express, and Mailchimp, we’ve built an accessible, functional website for our band that lets us update information, tour dates, photo galleries, and videos on the fly, all without having to redploy the site with every change. Cosmic’s API first approch let us do this simply, without a database, and with a great dashboard to manage our data whenever, wherever. With how quickly we’ve been able to build our app and with the simplicity of deploying and maintaining it, it’s clear that Cosmic JS is one of a kind in its API first approach to content management. Clearly, CosmisJS is a money maker. . Matt Cain builds smart web applications and writes about the tech used to build them. You can learn more about him on his portfolio
