Easily Connect React Native to a Meteor Server
This post is now outdated as the technology has changed. If you want to learn the latest please check out my profile or sign up for my email list, where I’ll send you the most up to date information about React Native + Meteor.
With Parse recently announcing that they will be shutting down, many companies are looking into the next steps to take. This shut down may lead many away from BaaS products and towards an in-house backend — such as Meteor.
Let’s walk through what it’s like to connect a React Native app to a Meteor app (serving as the backend). This tutorial assumes you already have React Native and Meteor installed and working on your system.
You can access the finished app (Meteor and React Native) on Github.
Create the Meteor App
meteor create meteor-app
Then we’re going to remove autopublish and insecure, generally a best practice.
cd meteor-app && meteor remove autopublish insecure
And add the Random package.
meteor add random
We’re also going to change the file structure up a bit. Go ahead and delete meteor-app.html, meteor-app.js, and meteor-app.css.
Then add the following files (and folders):
We’ll go over what goes into each of those files in a moment.
Add Functionality to the Meteor App
This is going to be an extremely simple app. The point is just to show how to make the connection, subscribe, and make method calls. All we’re doing is creating a Posts collection, seeding it with some data, and setting up a publication. Then on the client we’re making a subscription and displaying a count of posts returned from the database. The user can then add or delete a post. That’s the functionality we’ll mimic on the React Native app. With that, here’s the code…
You’ve now got a functioning Meteor app! Type meteor into your terminal window and try adding/removing posts.
Create the React Native App
In a new terminal window run
react-native init RNApp && cd RNApp
Setting up the React Native App
We’ll have just a few files to work within the React Native App — creating 2 and modifying 2.
You should now have a working React Native app! Though it won’t do much…
Connecting React Native App to Meteor
Now the fun part. Lets actually get the two apps talking to each other. We’ll be using the ddp-client package, simply because I’m most familiar with it.
I’m going to be using version 0.1.1 because that’s what the docs on the master branch’s README reference.
Install it via:
npm install email@example.com --save
First we’ll import the ddp client library and instantiate it. We’re just going to use the default options since this is only development. The ddb-client README outlines other options you can use in the ddp configuration.
Next up let’s actually connect to the server.
We should now be connected! You can do more with this but in the most basic sense, this is all you need to get started.
Making a Subscription from React Native
In app/index.js make your subscription. We’ll just update the state when the subscription has completed, for now.
That’s cool but what about the real time stuff? We’ll take care of that in the most basic way possible (this is just a starter guide after all).
Making a Method Call from React Native
What about adding and deleting posts from the RN app?
You’ve now got a fully functioning, albeit very basic, React Native app backed by a Meteor app. I hope this gets you started down the pathway of developing Meteor and React Native apps together. You can (and should) take advantage of some of the frameworks out there to manage application state (Redux) and use React principles in developing you component hierarchy.
Challenge Question: How would you handle Optimistic UI?
One of the great things that comes out of the box with Meteor is the optimistic UI. At this time we don’t have that, out of the box, when using React Native. How would you go about implementing it in your application?
Checkout my followup post on how on how to authenticate a Meteor user from React Native: http://blog.differential.com/meteor-authentication-from-react-native/
Want to learn more about React Native and Meteor? Let me send you the latest post as soon as it comes out: www.handlebarlabs.com/email-list/