provides an excellent backend for blogs. It is a fully-featured content management system (CMS) with an intuitive user interface that a non-technical client can use to manage their site content. TLDR; Cosmic JS Follow the links below for code and demo: TL;DR: React + Next.js Blog App React + Next.js Blog Demo React + Next.js Blog Codebase Intro Every blog needs a solid CMS. This allows content owners to control their content without having to hire a developer to make every single change to their site. Many developers immediately think WordPress when considering a CMS. I’d like to suggest as an alternative, though. It’s extremely simple to integrate from the developer’s viewpoint and to manage from the client’s. In this how-to article, we’ll connect a + app to and go over some of the features. Cosmic JS React Next.js Cosmic JS Getting Started Fist you’ll need to create a free account with . Navigate to . Click the ‘Create Free Account’ button in the header. Cosmic JS https://cosmicjs.com Then fill in your information or simply click ‘Sign up using GitHub’. The first step in creating a backend with is to create a . A can be thought of as a container of . are any piece of data that you want to store. An could be a blog post, an image, any kind of metadata, or really any kind of anything. We’ll discuss more in the next section. For now, just know that you need a to hold all of your project data. You should now be at . Click ‘Add New Bucket’. Type in a name for your project and click ‘Save Bucket’. Cosmic JS Bucket Bucket Objects Objects Object Objects Bucket https://cosmicjs.com/buckets The Dashboard and Setup You should now be at **** being a unique string of characters that identifies your bucket (also called a ). All of your site’s data can be managed in the Dashboard. The first thing we’re going to do is define an . An defines a data structure. For this tutorial, we’re going to define 4 different , , , and . Let’s start with . will hold all of the information needed to display a blog post on our site. Click the ‘Add Object Type’ button. https://cosmicjs.com/****/dashboard, slug Object Type Object Type Object Types: Globals Posts Authors Social Links Posts Post Objects Type ‘Post’ in the ‘Singular Name’ field. The ‘Plural Name’ and ‘API Endpoint’ fields should auto-populate. Then click the ‘Metafields Template’ tab. Click ‘Add Metafield’. Choose ‘Image / File’. Type ‘Hero’ in the ‘Title’ field. The ‘Key’ field should auto-populate with ‘hero’. Let’s add one more metafield. Click ‘Add Metafield’ again. This time select ‘HTML Text Area’. Give it the title ‘Teaser’. Then click ‘Save Object Type’. Awesome! you’ve created your first . Let’s do it three more times! Object Type Create an , . This represents a blog post author. Add an ‘Image / File’ metafield and call it ‘Image’. Object Type Author Create an , . This is how we’ll store meta data about our blog, like it’s title, tag, and logo. Don’t add any metafields. Object Type Global Create an , . We’ll use this to store data about external social links. Add a ‘Plain Text Input’ metafield and call it ‘Url’. Add an ‘Image / File’ metafield and call it ‘Icon’. Object Type Social Link We’re almost done with the setup. Let’s go back to our and add one more metafield. We just defined another , . Wouldn’t it be great if we could connect each to it’s ? Click ‘Add Metafield’ again. This time choose ‘Single Object Relationship’. In the dialog that appears, type ‘Author’ for the ‘Title’. Then select ‘Limit Search By Object Type’ and choose ‘Authors’. Then click ‘Save’. Post Object Type Object Type Author Post Author Setup complete! You’ve just created an entire backend for your project. No configuring databases or servers required! 😀 🎉 Add some content Before we move on to connecting to our app, let’s add some data first. Click ‘Globals’ in the Dashboard menu. Then click ‘Add Global’. Cosmic JS In the ‘Title’ field, type ‘Header’. We’ll then add 3 metafields. Add a ‘Plain Text Input’ metafield. Type ‘Site Title’ for the ‘Title’ and ‘My Cosmic Blog’ for the ‘Value’. Check the ‘Required’ checkbox. Add another ‘Plain Text Input’ metafield. Type ‘Site Tag’ for the ‘Title’ and ‘A clean, minimalist, content-first blog powered by Cosmic JS’ for the ‘Value’. Add an ‘Image / File’ metafield. Type ‘Site Logo’ for the ‘Title’ and then select an image from your computer. Click ‘Publish’. Now, lets add an . Click ‘Authors’, then ‘Add Author’. Enter your name for the ‘Title’. Add a brief bio for yourself in the ‘Content’ section. Select an image. Then click ‘Publish’. Author Then, we’ll add a . Click ‘Posts’, then ‘Add Post’. Enter a Title, some Content, a Teaser, add a Hero image, then select your name from the Author dropdown menu. Post Hopefully, you’re getting the hang of using the Dashboard now. It’s pretty intuitive. The last thing we’ll do is add some . Repeat the same process as with the other . Add at least two Social Links. Social Links Object Types Content ✔️, Let’s write some code Now we can get to the code! Clone, download, or just check out the source code at . https://github.com/chrisoverstreet/cosmic-blog This isn’t a or tutorial, so I’m just going to focus on the file. allows you to implement your own server by creating a file in the root directory of your project. We’re going to create an . React Next.js /server.js Next.js server.js express server The simplest way to connect to your backend is with the . To install the client, in your terminal, type: Cosmic JS offical Cosmic JS JavaScript client npm -S cosmicjs i Back in , import and initialize cosmicjs: server.js Cosmic = ( ); const require 'cosmicjs' const api = Cosmic(); < > br Now we’re going to implement our own API to connect to . We’re doing this to create a layer between our App and our data. We could use the cosmicjs client whenever we wanted to fetch data in our app, but then our sensitive bucket data would be exposed to the client (like an API Write Access Key). Find your bucket slug by going back to the Dashboard. Under the Settings menu, choose ‘Basic Settings’. Your ‘Bucket slug’ should be visible. Copy it. Cosmic JS Cosmic JS Back in , we’ll create a bucket object that our API can use. server.js bucket = api.bucket({ slug: b7536d0 8 -e7a8aba9942d }); const 5 -59f -11e8 -8958 With that bucket object, we can fetch and return our data in the following way: server.get( , (req, res) => bucket.getObject({ : }) .then( res.send(object)) .catch( res.status( ).json({ : , : err, }))); // API endpoint for site metadata (i.e. title, tag, logo) '/api/meta' slug 'header' => object => err 404 message 'Error fetching header data' error The slug in is the slug used to define your Object. You can also fetch a list of Objects. bucket.getObject() server.get( , (req, res) => { params = { : , }; bucket.getObjects(params) .then( res.send(objects)) .catch( res.status( ).json({ : , : err, })); }); // API endpoint for social links '/api/social-links' const type 'social-links' return => objects => err 404 message 'Error fetching social links' error Here’s the complete code: server.js ( ).config({ : }); express = ( ); next = ( ); routes = ( ); Cosmic = ( ); port = (process.env.PORT, ) || ; dev = process.env.NODE_ENV !== ; app = next({ dev }); handler = routes.getRequestHandler(app); api = Cosmic(); bucket = api.bucket({ : process.env.BUCKET_SLUG }); app.prepare() .then( { server = express(); server.get( , (req, res) => bucket.getObject({ : }) .then( res.send(object)) .catch( res.status( ).json({ : , : err, }))); server.get( , (req, res) => { params = { : , }; bucket.getObjects(params) .then( res.send(objects)) .catch( res.status( ).json({ : , : err, })); }); server.get( , (req, res) => { validatedPage = ! .isNaN(req.params.page) && (req.params.page, ) >= ? (req.params.page, ) : ; postsPerPage = ; params = { : postsPerPage, : (validatedPage - ) * postsPerPage, : , : , : , }; bucket.getObjects(params) .then( res.send(objects)) .catch( res.status( ).json({ : , : err, })); }); server.get( , (req, res) => bucket.getObject({ : req.params.slug }) .then( res.send(object)) .catch( res.status( ).json({ : , : err, }))); server.get( , (req, res) => handler(req, res)); server .listen(port, (err) => { (err) err; .log( ); }); }); /* eslint-disable no-console */ require 'dotenv' path './.env.production' const require 'express' const require 'next' const require './routes' const require 'cosmicjs' const parseInt 10 3000 const 'production' const const const const slug => () const // API endpoint for site metadata (i.e. title, tag, logo) '/api/meta' slug 'header' => object => err 404 message 'Error fetching header data' error // API endpoint for social links '/api/social-links' const type 'social-links' return => objects => err 404 message 'Error fetching social links' error // API endpoint for a list of posts (by page) '/api/posts/page/:page' const Number parseInt 10 0 parseInt 10 1 const 10 const limit skip 1 sort '+created_at' status 'published' type 'posts' return => objects => err 404 message `Error fetching posts for page ` ${validatedPage} error // API endpoint for an individual post '/api/post/:slug' slug => object => err 404 message `Error fetching post with slug, ` ${req.params.slug} error // Our regular NextJS pages '*' if throw console `> Ready on http://localhost: ` ${port} Now we can hit our API endpoint inside our App to retrieve our data. For example, to retrieve a single post, we can use the following code: fetchPost = fetch( ) .then( res.json()) .then( .log(json)); const => slug ` /post/ ` ${API_URL} ${slug} => res => json console It’s that simple! Outro This was just a high level overview of using with + . If you’re like me, the best way to learn something is to jump right in and experiment with things. I invite you to download the source code for this project and tinker with it. has much more to offer than what was mentioned in this post. Check out the articles and other information available on their site under the ‘Developers’ tab. Cosmic JS React Next.js Cosmic JS Thanks for reading! Happy coding! This article originally appeared as a . Cosmic JS Article
