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


Next.js is an amazing new addition to the React open-source ecosystem.  It is “a minimalistic framework for universal server-rendered React applications” that makes the process of building these types of applications much faster and easier.  Recently I demoed a new app on the Cosmic JS app page that is built using the Next.js framework.  I’ve built a few React Universal apps from scratch before and I found taking the Next.js route to speed things along quite a bit.  And adding content management capability from Cosmic JS was very intuitive.

There is a powerful trend happening in technology.  It is a shift from confined, installed systems into a more free, micro-services economy.  This can be seen in the consumer space from people choosing to stream music instead of downloading MP3s, choosing to Uber to work rather than drive their personal car and people choosing to order groceries to their door from Amazon instead of going to the grocery store.

In this installment of the Cosmic JS Developer Spotlight Series, we sat down with Dallas-based Software Developer John Allen Hopper. In addition to having a degree in Anthropology, John is a graduate of Coding Dojo and has been building applications in agency environments, freelance gigs and as a contributor for years. Follow John on GitHub, LinkedIn and Twitter, and enjoy the Q/A. 

We are happy to announce that you can now add automatically backup your Buckets via the Automatic Daily Backups Add-on.  To add the peace of mind of daily Backups, go to Your Bucket Dashboard > Settings > Backups.

Brand Managers manage, well, brands.  Seems simple enough right?  It does in title and theory alone.  Managing a brand means managing the brand’s tone, voice, messaging, consumer segmentation, price points, marketing, advertising and all of the subsequent elements and assets that fall out of such an engagement.  Having managed brands for years myself, I can attest to the magnitude of the job at hand.  Once the client has agreed upon a general direction, it becomes the brand manager’s responsibility to ignite passion and results from the internal agency team that services the account.  As my workload would increase month over month as business heated up or an account was grown, I went through the whole Automation | Delegation | Elimination routine to see what I could cut out of my schedule as busy work.  The problem?  I was only one person.  I could only affect hours tallies on my end, but had little to no influence over design, development, copywriting & production. 


The area that always seemed to be the weak link in terms of staying on budget was in development.  Boutique agencies struggle to attract qualified talent with their long work hours and subpar compensation, and then after taking a gamble on a more junior talent that is developed over time, retention is a beating.  Companies line up with development jobs that pay 2X, sometimes 3X what a boutique agency is willing to part with for that developer’s compensation package.  This is all before taking into account staging servers, hosting servers, CMS logins, local installations of CMS systems and all of the red tape and bureaucracy associated that can bog down a productive workflow.  As a result, my quotes back to clients for websites, microsite, landing pages and applications were always a bit higher than they were expecting.  I started searching for a cloud-based solution to my CMS woes to cut out some of the middle men and see if there was an easier way to 'get this digital property live'. 

I found 
Cosmic JS.  Had I been told as a Brand Manager that I could eliminate the local CMS, the hosting server and the shared logins of content editing, I would have seen the value immediately.  No longer having to build APIs on a per-CMS / per-client basis, no longer having to build out a proprietary backend, yet still attaining the same custom-value would have been a lifesaver and a half for a brand manager focused on the bottom line.  It would have easily cut my back end developers’ hours estimates by 40%, eliminated costly hosting servers and would have streamlined content-centric employees within the agency to not have to deal with the red tape of updating content within a traditional CMS. 

Whether we picked out a
content-ready application or plugged GitHub into Cosmic JS, I’m seeing time and cost savings at every turn.  Music to a brand manager’s ears, and music to a boutique agency’s margin and bottom line.  As it turns out, it also benefits the client as their content is put first, their content is pushed live more quickly and is devourable globally on any device.

You can now use Cosmic JS to deploy your GitHub private repos to the web.  All you have to do is sign up or sign in using your GitHub account and authorize access to your private repos. (Don't worry, we only access your private repos when you are ready to deploy them to the web).


After you authorize access the process is super easy.  Just go to Your Bucket > Settings > Deploy Web App and choose which private (or public) GitHub repo you would like to deploy. You can also deploy an app from any public Git repo url (make sure your app follows the Heroku deployment guidelines).


Click Deploy Web App and your private repo will be deployed to the world!