The new Cosmic dashboard is now available in private beta 🎉
Get it now →

How to Build a Simple Blog Using React and GraphQL

Community Articles
Community Articles How to Build a Simple Blog Using React and GraphQL

In this tutorial I’m going to show you how to create a simple blog using React, GraphQL and Cosmic. This is going to be the fastest and most light-weight blog built on a modern technology stack.  Let’s get started.

TL;DR

View the demo
Install the Simple React Blog on Cosmic
View the codebase on GitHub

Getting Started

Make sure that you have Node.js and NPM installed on your machine, if not, visit the Node.js website to install the latest version.

Let’s start by creating a folder for our app. In your favorite terminal run the following commands:

mkdir simple-react-blog
cd simple-react-blog

Now let’s add a package.json file to import all of our dependencies for our app:

vim package.json

Add the following to our package.json file:


It’s a pretty light dependency list for a pretty light app. So what we will install is:

1. Axios for our promise-based HTTP client to get content from to the Cosmic GraphQL API.
2. Next.js as our React Universal framework.
3. Next routes for dynamic routes.
4. Express for our server-side web app framework.
5. React to handle our user interface.

Our scripts are necessary for starting our app in production and development.

Run the following command to install our dependencies:

npm i

Building Our Blog

Next, let’s begin building our blog pages. Create a pages folder and add the index.js file:

vim index.js

and add the following to index.js:

There are a few things happening here:

1. We are importing our essential modules: Axios, Lodash, and other helpers and components.
2. We are pulling in some partials: Header
and Footer, you can reference these partials from the codebase on GitHub.
3. We query the Cosmic GraphQL API to only return the stuff we need: _id, type_slug, slug, title, metadata and created_at.
4. We set the main props in our component to the `cosmic` object.  And use lodash to parse through Posts and Global Object types.
5. We return our posts array data and image URLs into our main blog feed.

Single Post Query

For our single post, we add a `post` property to our props.  Post is found by matching the query.slug to the Object slug:

Check out the full file on GitHub.

Conclusion

This is the abridged version of the Simple React Blog available for download in the Cosmic Apps page. The full codebase includes a single post page view as well as a page dedicated to each author’s posts. View the full codebase on GitHub and deploy this app in a few clicks from your Cosmic dashboard by installing the app to your Cosmic Bucket.

I hope you enjoyed this tutorial, if you have any questions reach out to us on Twitter and join our community on Slack.

You may also like


Why should you migrate your CMS? What's the big deal about Cosmic? This article should answer some questions you have about cosmicJS and what the pros and cons are of using an API-driven Content Management System
Cosmic makes it easy to manage content for your Bootstrap applications. In this blog we'll quickstart a Bootstrap Landing Page using the Cosmic CLI. This single page website landing page is built using Node.js and a minimal theme from Start Bootstrap.
Filtering data is one of the most common feature of any data facing application, wheather it's a fron-end app or a back-end application. The Filter function is used to find records in a table or a dataset that meets certain criteria.
This is a quick example to show some of the powerful things you can do with the Cosmic NPM Module. This script will, add a Bucket to your Cosmic account, add an Object Type (Pages) and add a few Pages.
See how easy it is to create a browser based video game when using Cosmic to manage all of your data.
Tony Spiro, co-founder and CEO of Cosmic, presented "Building for Team Success with Content-Powered Apps" to illustrate the build vs. buy concept of software development in the API-first microservices movement. The full video is embedded below and runs approximately 45 minutes.

Get started with Cosmic

Personal projects are free. Scale up as you grow.
Start building Talk to sales