Article originally written by Tony Spiro for the Cosmic JS Blog. Thanks to GitConnected for sharing.

In this tutorial we’re going to create a simple blog using React, GraphQL and Cosmic JS. 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 JS

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

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 light dependency list for a light app. So what we will install is:

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

The “scripts” are used to our app in development and production.

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:

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

GraphQL Explanation

At the top of the file you’ll notice a query variable. This is our GraphQL query written as a string which we send to the API using axios. The query specifies the keys that we want to retrieve from the Cosmic JS API. The API finds the correct data by matching the bucket_slug . Then the keys of the object string are given the associated values, allowing us to get exactly the data we need. This is the core principle of GraphQL — simply matching keys with values and fetching only the data that’s needed for the page.

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 JS 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 JS dashboard by installing the app to your Cosmic JS Bucket.

I hope you enjoyed this tutorial, if you have any questions reach out to us on Twitter and join our community on Slack. Cosmic JS provides Quickstart Apps in React, Node.js and Vue.js.

Headless CMS Resources