Any one used Meteor backend + react + react native

Hello Folks,
Im about to start an App in meteor which has server, client(web and mobile).

About the App

This app is an normal CRUD application, where master-data like plans, pricing, city, state etc will be created in the react web application. All the data will be stored in mongo-db.

On the other side, authorised representatives of the app will utilize the master-data and create new tickets(text, images) via mobile app developed using React-Native. Which shall be viewed/updated/deleted in the react web app.

Which means both web and mobile users shall access same db, API, user authentication etc.

Has any one tried this approach? Is it good to use meteor for this project?
Can any one guide me the best practices?

Thanks in advance
Ananth S

3 things to consider:

  1. If you don’t need Push notifications on IOS you can do everything with React(and Meteor indeed) and run mobile in an PWA and this is a huge difference when you consider time to market.
  2. If all those media files have to be secured properly you will need to use https://github.com/VeliovGroup/Meteor-Files. I would personally keep media in any cloud but not in Mongo.
  3. If you need those representatives to be able to operate in basements, elevators (I mean areas without coverage) you will need to use a mobile DB and implement a sync strategy possibly with a REST API. Best suited for this would probably be Realm https://realm.io/ (for React-Native) and you keep your images as base64 strings. However if coverage is not an issue and there are only few concurrent users, you can probably go all reactive and I don’t see any limitations with Cordova either.

I did something similar in React Native with Salesforce and Netsuite as backend. The client already had the backend but if I had to start from 0, Meteor would be my first choice for sure.

Meteor would be very good for this, there is nothing missing.

1 Like

Thank you very much for your quick reply @paulishca .

  1. Currenly all the representatives will be using only android, so iOS push notification may not be required.
  2. Since the app will be deployed in any cloud storage like AWS, GCM or heruko etc is this ok for storing images securly?
  3. Since there may be 15-20 images per ticket which needs to be stored locally on the android device when no internet connectivity and to be synced in the background when there is connectivity. Is this not possible via local mongoDB storage?
    Kindly advice.

Once again many thanks,
Ananth S

  1. In your view, in order to show an image, you need to reference it as a background of a div or with an img tag. The source of the image would be … a public URL. If I copy that URL and give it to John, can John paste the URL in the browser and see that image? The problem is not storage but how you access the images. You need to create a system so that only a signed URL can access the image. Basically only if I am in the App, I am logged in and I am authorized to view the image. This is what Meteor-Files does.

  2. “mongoDB storage” is not a local DB in case you refer to the mini Mongo on the client. You have no control of it and you cannot rely on so much optimism. If you are not reactive (pub/sub with tracker), you don’t even have a mini Mongo. And if you say No in your mini Mongo offline and a user at the office says Yes for the same record … who is right, what do you want to keep?! 15-20 images in/of a webpage would be stored in your browser for offline viewing with some cacheing. But taking 15 images and uploading to your webpage offline and syncing when online … is not going to work.

  1. Thanks for your wonderful clarification. I will use Meteor-files.
  2. I would like to implement a localstorage for mobile app development in React native. 15-20 images will be synced part by part as it is a multi-step form. Suggest me if any thing I could use for this usecase:
    a. Representative will be displayed with multi-step form(say 5 forms). Each form will have text and image(2,3 images taken via mobile camera or file browser). When representative submits, each form will be submitted to the offline first. Once all the forms has been completed fully. Syncing of images has to be started on form basis.
    b. Will react-pwa with service workers work for this usecase? or redux-offline ?

Kindly advice how to proceed with the functionalities.

Regards,
Ananth S

I really don’t know any bullet-proof way to storing images offline other than a local mobile DB. With a PWA, you would rather need to upload the images as they are taken and the form saved. Or have the images on the phone photo storage and pick up from there with something like https://uppy.io/ or Meteor-Files. Perhaps in Android you could save the photos taken to a memory card and so have a backup for a while. If you need to work offline, I think there is no other way to completing forms + images without a local mobile DB. There could be but I personally don’t know. So, for React-Native I would do Realm and for PWA…not sure of the possibilities. Check this out: https://developers.google.com/web/fundamentals/instant-and-offline/web-storage/offline-for-pwa

Some packages that might be of interest for you. The cloudinary package is available for both React Native and Meteor as are most of the packages under the @socialize (npm) / socialize (atmosphere) namespace.

https://atmospherejs.com/socialize/cloudinary

1 Like

Thanks @copleykj, will check out the packages.

Already gone through this link @paulishca. PWA uses indexedDB for local store. If im using mongoDB at the server again syncing between different DB will work smoothly?

Thanks,
Ananth S

Sincerely, PWA would not do the job if you need to do work offline. It would be useful if you need to cache things for offline viewing/use but I am not really sure it would work ok for processing offline and the upload/sync.

To answer your initial question yes. That’s the only stack we use for Web & Mobile development. We believe it’s the best.

Thanks for your reply @diaconutheodor, are you sure about the features Im looking to develop will be feasible via react + react native + meteor like offline to online sync?

@paulishca, I saw a tutorial where images and text captured in offline form has been stored in indexedDB when offline and later synced to firebase datastore with plain html/css/pwa/javascript.

Yes we built the offline sync with apollo in-house. So yes its doable.

Thats great @diaconutheodor.
Can you guide me on the stack?
What is the localdb you were using? What is the remote db?
Do you mean react + react native + meteor + apollo right ah?
Would be glad to hear your advice.

I can’t guide you more than leaving some answers here when time permits.

The remote db is MongoDB, Yes we’re using exactly that. And currently we can’t share the code for Offline Sync for Apollo as it’s not ready for open-sourcing.

Thanks anyways.
Can you throw some light on how do you manage local db storage? Rest I will explore.

Via Apollo’s Client Cache (InMemoryCache which persists to AsyncStorage on React Native)

Thanks for your reply.