Cosmic JS makes it easy to manage content for your React applications. Cosmic enables developers to build modern, content-powered applications without the hassle of maintaining installed CMS infrastructure. The Cosmic Dashboard gives the content creator an unmatched, delightful experience to create content.
In this tutorial I’ll demonstrate using the Cosmic JS CLI to install a new Cosmic-powered React app recently debuted by the Cosmic JS Community. The Book App was built using React and Redux with content powered by Cosmic JS. Content creators can manage books including images, titles, content, authors, and book genre/category. Search functionality is included by typing author name or book title. Sort by book categories and publish a book card from the custom admin dashboard.
You can install, deploy and manage content for every section of this React Book App, all from your Cosmic JS Bucket Dashboard. Let’s get started. 🔥
TL;DR:
React Book AppReact Book App DemoReact Book App CodebaseBrowse Cosmic-powered React Apps
Install and Deploy a React Book App in 3 Steps
Step 1: Create an Account
Sign up for Cosmic JS + Install the Cosmic CLI + Create a New Bucket
Step 2: Installation 🛠️
Install via the Cosmic CLI:
Cosmic JS provides options to Install via the Bucket Dashboard or via the Cosmic CLI. I set up my example using the Cosmic JS CLI:
Run cosmic -h for a list of all commands. Run cosmic [command] -h for details on options for a specific command. You're now up and running with your React Book App that can be managed entirely from your Cosmic JS Bucket Dashboard and Command Line Terminal tool of choice.
Step 3: Deploy 🚀
Cosmic JS provides deployment options to:
✅ Cosmic JS App Server (testing purposes only)✅ Deploy to Zeit✅ Deploy to Heroku✅ Deploy to Netlify
By selecting the code repository I want to deploy and selecting “Deploy to Cosmic”, I can deploy my React Book App to the Cosmic JS App Server to test my live edits I’ll make via the Cosmic JS Dashboard.
Conclusion
When ditching the installed content management system and going API-first isn’t quick enough, check out the Starter Apps from Cosmic JS to get a project up and running in seconds. 🔥
Learn more about contributing your own project to the Cosmic JS Community. 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.