Cosmic JS Blog Stay tuned for community news, company announcements and updates from the Cosmic JS team.

How to Build a Cross-Platform Blog Using React Native and Node.js


We live in a world of inter-connected devices, each powered by their own software, built with their own circuits and protected by their own casing.  The best way to deliver information to these seemingly closed-off systems is with an API.  Cosmic JS is an API-first cloud-based content platform that makes it not only easy to add dynamic content to any existing or new website, but makes it possible to seamlessly deliver content across devices and platforms.

In this article I’m going to show you how to quickly and easily create a cross-platform blog that will connect your content across Web, iOS and Android.  With content powered by Cosmic JS, you will be able to edit your content once and deliver the updates simultaneously across all devices and platforms.  Let’s get started.

TL;DR

Check out the demo.


Website


To get started, download the Cross-Platform Blog on GitHub which is based on the Node.js Website Boilerplate.  This comes with everything you need to get started with a basic website as well as the codebase for the native applications running React Native for iOS and Android.

git clone https://github.com/cosmicjs/cross-platform-blog
cd cross-platform-blog/web
npm install
npm run development

The root of our application runs at app-server.js.  Looking at this file, you'll see how routes are set up and how views are rendered to the routes.

Now that we have our website running, let’s open up another terminal window and get our iOS and Android apps built.

React Native Bridges the Gap

React Native is a very powerful way to build applications for both iOS and Android.  Because most, if not all, of the codebase can be shared between the two platforms, by using React Native you can build your apps in half the time.  If you haven’t gotten your local environment setup for React Native development, go to the React Native website and follow the steps.  Honestly I found setting up the iOS development environment to be super easy, but setting up the Android, not so much.  Mainly because I had to search more to figure it all out.  In short, you need to download Android Studio and make sure you have the correct version of the Java SDK installed and make sure you have all of the developer tools installed.

iOS

To install and run the iOS React Native application run the following commands:

cd cross-platform-blog/ios
npm install
react-native run-ios


Android

Run the following commands to run the Android application (make sure you have your Android device emulator open):

cd cross-platform-blog/android
npm install
react-native android

Looking at index.ios.js and index.android.js you will notice that the root of our application for both iOS and Android runs at App.js.   And all other components LandingPage.js, BlogList.js and BlogPost.js are shared between the two platforms as well.

When we run our react-native commands, our React Native code base is translated to both Objective-C and Java languages.  It is not a “hybrid app” or web-based at all.  It basically just translates your JavaScript (React) building blocks together into the native language of each platform.

Connect to the CMS API

If you don't have an account yet, sign up for Cosmic JS to set up your bucket.  Your bucket is the place to add and edit content for your cross-platform blog.  To upload the demo content from the Cross-Platform Blog on GitHub, go to Your Bucket > Import / Export.  Then upload the bucket.json file located in the root folder of the Cross-Platform Blog repository.  This will upload all of the demo data and files from the Cross-Platform Blog demo application.   To configure your local application to point to your bucket, simply edit your config files in both web and native folders to point to "your-bucket-slug".

// config.js
export default {
  COSMIC_BUCKET: 'your-bucket-slug'
}

Now when you edit content in your Cosmic JS bucket, you will see that the content automatically updates across Web, iOS and Android applications.  By connecting your applications to Cosmic JS, you are using a powerful tool that breaks down the barriers between devices and programming languages.

I hope you found this tutorial helpful.  If you have any questions about how Cosmic JS can help your team build websites and applications faster and easier, reach out to us on Twitter and join our community on Slack.

You may also like


In this latest installment of the Cosmic JS Developer Spotlight Series, we sat down with Aaron Vail, a Google Analytics Implementation Analyst and Software Developer at Main Event Entertainment's corporate headquarters in Plano, Texas. Check him out on Twitter and LinkedIn, and enjoy the Q/A.

We have a mission to help every digital team be more efficient by providing a simple API to power content for their website or application.  And this milestone provides some validation for that goal.  We are grateful to all our users who are joining us on this journey.

The same API that delivers your content to all web-connected devices can also store the media you need to publish.

We've rolled out a few updates that were requested by members of our community.

Here I am again, writing late at night with more thoughts on Cosmic JS and what it could do for developers and content creators.  For some reason I keep thinking about Doogie Houser and that theme song...

So here's what I'm thinking: Everything is going the way of subscription services.  Music, movies, tv, enterprise software, you name it there is a company out there that will offer it to you without you having to download software, install an app, populate a database.  Everything is moving toward a service economy.

This is going to continue because the trend of human nature has always been toward better customer service, the less a customer has to do, the better the service.

With this in mind, comes the idea that your website's content doesn't need to be locked into a database.  It doesn't need to be something that has to be installed.  Your content can live freely as a service and can be accessed anywhere a device is needing to connect.  This means your website, your app, your business is allowed to be accessed anywhere and it's content is easily transported to wherever it needs to go.  This is huge.

APIs are now the DNA of the internet.  They connect everything from your favorite blogs to your tv to your facebook news feed to your twitter stream to everything you access on the web and any content in any smart device, period.  APIs are content.  

So here's the question: If APIs are our content platforms, why aren't we managing our content in the APIs?  Well now you can.

You can now manage the content of your website or app in Cosmic JS on a fast and secure content framework independently of any downloaded software or managed system.  

Welcome to the 21st century.  Your content is still king and it is now delivered everywhere... 

Nick Bonanno, Founder & CEO of Simple Media, a boutique digital micro-services agency, sits down with Carson from Cosmic JS.