How to Build a Blog using React Static and Cosmic JS


In this tutorial, I'm going to show you how to create a simple but blazing fast blog using React,  React Static, and Cosmic JS. Grab some coffee & let's build a cool app!

TL;DR

Demo
Download Source Code


Prerequisites

You need to have installed the latest stable version of Node JS and NPM. Let's get started with our technology stack. 


What is React Static?

React Static is a very fast and powerful progressive static site generator implemented based on React and its ecosystem. It's extremely lightweight, very fast, SEO-ready, and is the most React-friendly static-site library on the planet.


What about Cosmic JS?

Cosmic JS is a headless CMS which is used to build apps faster, together. It is very easy to store and retrieve data and is perfect for building apps like this.


Create React Static app

It is very easy to create React Static app. Just follow these steps:

Install the CLI tool:

$ npm i -g react-static
# or
$ yarn global add react-static

Create a new project!

react-static create


It will ask for name of project then give it as coffee-blog. After that it will ask for selecting template so you have to select basic.


Create new bucket in Cosmic JS

To create a blog app we will require data. For this we will be using the power of Cosmic JS. Create a free account on  Cosmic JS and create new empty bucket & name it as coffee-blog. For every blog it will have three object types:

  • Title
  • Content
  • Image

So add this property in bucket along with some data.  Follow this steps to create bucket in Cosmic JS.


Integrate Cosmic JS into React Static App

Create new file in coffee-blog project called config.js which will store the Cosmic JS Bucket, read_key & write_key.

Now we have to fetch data from Cosmic JS bucket, we are using graphql to do this. By default react static app will call jsonplaceholder api. So remove this code and replace below code into static.config.js.

We are not going to learn CSS in this tutorial so add below code inside the src/app.css file.


Inside the src/App.js file add below jsx code into the return function which will show the navigation bar.

For creating landing page where we are showing list of blog posts, change the src/pages/index.js with the below code. Here we are getting posts data that we have fetch using withRouteData HOC.

Create new file under src/pages called post.js which will have individual post. So when we click on any post from homepage then this component will render to show post details. Add below code in it.


Now we have created homepage and a post component & also fetch data from Cosmic JS using Graphql query.  So now run the below command to see the amazing coffee-blog.

$ npm run start

Open http://localhost:3000 to see your blog.

To build application in production mode you just need to run

$ npm run build

To test the production build before publishing, run below command

$ npm run serve


Deploy it

We can now deploy our application on any hosting platform. I recommend deploying it on Netlify because it supports project structures like this and can quickly create deployments.


Conclusion

In this article I have demonstrated you how to create a blogging application using React Static and Cosmic JS. The Cosmic JS Community has a lot of examples on how to handle integration with email functions, download functions, and third party platforms.

I really hope that you enjoyed this little app, and please do not hesitate to send me your thoughts or comments about what could I have done better.

If you have any comments or questions about building apps with Cosmic JS, reach out to us on Twitter and join the conversation on Slack.


Was this article helpful?

Thank you! Your input helps us improve our articles and resources. If you have any other questions or comments, please contact support.

You may also like


Cosmic JS makes it easy to deploy your websites and applications to the web. You can deploy an app from any git repository to the Cosmic App Server from any Bucket. Cosmic JS uses Dokku (Docker + Heroku-like deployment) to deploy your app from any GitHub, BitBucket or any other public repo.
Using Cosmic JS's Webhooks we can sync Algolia with Cosmic JS to provide search to our projects.
Build a fully functioning messenger that can send SMS messages to application users. We will discuss Server side rendering of a React front, and leveraging a simple api in order to make protected requests to Cosmic JS cloud services.
To demonstrate how easy it is to get started with Cosmic JS, we'll utilize the Cosmic JS CLI to quickstart a Vue.js Music App. This Music website was built using Vue, Nuxt and Cosmic JS. Users can upload and play tracks, upload and manage album art plus leave comments.
To demonstrate how easy it is to get started with Cosmic JS, we'll utilize the Cosmic JS CLI to quickstart an Angular Ecommerce App. This Angular ecommerce app allows you to process orders from customers and accept Stripe payments for goods and services. Manage inventory in the Cosmic JS Dashboard.
Creating a static React App without worrying about language boundaries