TL;DRBuild a Cosmic React application by creating a new Cosmic App and cloning a repository.<ul><li><a href="https://cosmicjs.com/apps/react-blog" rel="noopener noreferrer" target="_blank">View and install the demo</a></li><li><a href="https://github.com/cosmicjs/react-blog">View the codebase</a></li></ul> IntroductionA 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. &nbsp;Cosmic gives front end developers more time to build client applications and spend less time setting up API&#39;s or Databases. A MongoDB instance would be one more part to what is a simple process. There is no need &nbsp;to update a static file, log into a server. The <a href="https://cosmicjs.com/">Cosmic&nbsp;</a>content editor powers your application. Cosmic provides a platform that lets developers focus on the code, and design. This means more time pushing code and less time thinking. &nbsp; Build a blog with CosmicLogging into to your Cosmic account is easy, sign in with Github! Check out the <a href="https://cosmicjs.com/apps">Cosmic Apps</a> and find <a href="https://cosmicjs.com/apps/simple-react-blog">Simple React Blog</a>. Click on the install Free button and build your new blog application.&nbsp;<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/abc699a0-f259-11e7-b948-afa0abf2fc70-install-simple-react-app.png" style="width: 503px;" class="fr-fic fr-dib"> Create your first postOn 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&#39;s create a new blog post! Click on the Posts object, in the left-side navigation bar, and select Add Post <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/e044e780-f25a-11e7-baec-63bfc6f514b4-Screen Shot 2018-01-04 at 4.18.59 PM.png" style="width: 300px;" class="fr-fic fr-dib"> 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 😀 . &nbsp;Content creators are not limited to the type of content they can create.&nbsp;To create a new author, check out Author and select add author. <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/cef751b0-f25b-11e7-8739-bd1a2fa1284e-author.png" style="width: 300px;" class="fr-fic fr-dib">&nbsp;&nbsp; Let&#39;s select an image to go along with our blog post.&nbsp; <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/4a254900-f25c-11e7-baec-63bfc6f514b4-blog-dropdown.png" style="width: 300px;" class="fr-fic fr-dib"> Hit the publish and push our blog post dynamically to our application. Notice the option of switching between developer and editor roles.&nbsp;Cosmic&nbsp;CredentialsIn the left-side navigation bar select Settings and Basic Settings. Create a new Read/Write Access key by selecting Generate new key for both.&nbsp;Let&#39;s keep this tap open for the remainder of the tutorial.&nbsp;<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/3b22b4a0-f25d-11e7-baec-63bfc6f514b4-cosmic-config.png" style="width: 506px;" class="fr-fic fr-dib"> Deploy Your Web AppYou can deploy your web app from from Cosmic Dashboard with the Git repo Url. Click settings -&gt; Deploy Web App. Make sure your Git Repo URL is set to <a href="https://github.com/cosmicjs/react-blog">https://github.com/cosmicjs/react-blog</a> <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/62a985a0-f3fa-11e7-b948-afa0abf2fc70-deploy-web-app.png" style="width: 750px;" class="fr-fic fr-dib"> 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 &nbsp;tab from the Cosmic Credentials section. <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/d1b3ac40-f400-11e7-b948-afa0abf2fc70-env-vars.png" style="width: 300px;" class="fr-fic fr-dib"> Press Deploy to the Web and visit your new blog!Development ModePrerequisites<ul><li>Node&nbsp;</li><li>NPM</li></ul>Terminal Commands<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/b-rays/af07d62b4c699ce67e4e2182cae9cf6d' class='embedly-card'></a>"><a href="https://gist.github.com/b-rays/af07d62b4c699ce67e4e2182cae9cf6d" class="embedly-card"></a></div>&nbsp;Start the application<a href="http://localhost:3000/"></a><pre>npm start</pre><a href="http://localhost:5000/">View your Cosmic Blog!</a>Building Blog applications with Cosmic 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 <a href="https://cosmicjs.com/apps">apps page</a>.I hope you enjoyed this tutorial, if you have any questions <a href="https://twitter.com/cosmic_js" rel="noopener noreferrer noopener" target="_blank">reach out to us on Twitter</a> and <a href="https://cosmicjs.com/community" rel="noopener" target="_blank">join our community on Slack</a>.

Blogs by Brian Ray

Start building today