How to build a blog with Cosmic JS and React


TL;DR

Build a Cosmic JS React application by creating a new Cosmic JS App and cloning a repository.


Introduction

A CMS API gives more power to content creators and developers to build their type of front end web applications. React will continue to receive lots of attention in 2018 as a top Javascript framework.  Cosmic JS gives front end developers more time to build client applications and spend less time setting up API's or Databases. A MongoDB instance would be one more part to what is a simple process. There is no need  to update a static file, log into a server. The Cosmic JS content editor powers your application.


Cosmic JS provides a platform that lets developers focus on the code, and design. This means more time pushing code and less time thinking.  


Build a blog with Cosmic JS

Logging into to your Cosmic JS account is easy, sign in with Github! Check out the Cosmic Apps and find Simple React Blog. Click on the install Free button and build your new blog application. 


Create your first post

On app install, you will be directed to your new app dashboard. In this example, there are 4 Objects - Posts, Author, Categories, and Globals. Your blog content lives in the Posts Object, so let's create a new blog post! Click on the Posts object, in the left-side navigation bar, and select Add Post



Create a blog post and be sure to inspect the functionality of the editor. Insert an image, write some code, add a link, and of course a 😀 .  Content creators are not limited to the type of content they can create. 

To create a new author, check out Author and select add author.


  


Let's select an image to go along with our blog post. 



Hit the publish and push our blog post dynamically to our application. Notice the option of switching between developer and editor roles. 

Cosmic JS Credentials

In the left-side navigation bar select Settings and Basic Settings. Create a new Read/Write Access key by selecting Generate new key for both. 

Let's keep this tap open for the remainder of the tutorial.

 




Deploy Your Web App

You can deploy your web app from from Cosmic JS Dashboard with the Git repo Url. Click settings -> Deploy Web App. Make sure your Git Repo URL is set to https://github.com/cosmicjs/react-blog



Another important step is to set your environment variables. Copy and paste the API Read Access Key, API Write Access Key, and Bucket Slug into your Set Environment Variables  tab from the Cosmic JS Credentials section.



Press Deploy to the Web and visit your new blog!

Development Mode

Prerequisites

  • Node 
  • NPM

Terminal Commands

 Start the application

npm start

View your Cosmic JS Blog!

Building Blog applications with Cosmic JS is this simple. Be sure to check out the OG GraqhQL and React version of our Blog App on Github. If you would like to see other demos and source code, check out the apps page.

I hope you enjoyed this tutorial, if you have any questions reach out to us on Twitter and join our community 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


Digital Ocean, a hosting provider beloved by developers, provides a highly intuitive interface for deploying and managing application infrastructure. In this tutorial I'm going to show you how to install and deploy a Cosmic-powered Nuxt.js app on Digital Ocean.
In this tutorial, we're going to build a digital shrine to the great musical artists of our time and to listening to music by album - the way great artists meant it to be listened to! In the process, you'll learn a little bit about Cosmic JS, React, CSS Grid, Flexbox, Material UI and Spotify's aweso
You have the ability to add Quick Links to Your Cosmic JS Bucket Dashboard. Quick Links are a great way to easily navigate to other websites, shared resource documents, CRMs, task management software or team collaboration tools directly from your Cosmic JS Bucket Dashboard.
The beauty of using a static site generator is that your backend can be completely separate. In this video, I switch from markdown files to Cosmic JS!
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.
Cosmic JS 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.