What's the best way to plug React-Native with Django in Android Emulator?

Question

This question is to know in general what's the workflow while developing Android apps in React-Native with Django in backend. So, far I got to know that the device emulates in Android Studio so the localhost of Linux Machine and Android Device differ. Want to know from the community what's the best way to develop apps in that scenario? How to connect Backend and Frontend in general then?

score 3 · Answer 1 · answered Dec 27 '19 at 15:35

3

In addition to the excellent answer posted by KrazyMax in terms of the general code structuring, there are 2 more things I want to add:

1) While he recommends Django Rest Framework, I would recommend you also explore GraphQL as it greatly simplifies queries from front-end (react native) to back-end (Django) and has some advantages over using rest API - like single endpoint to manage and exercising selectivity in querying. There is some initial learning curve with GraphQL but once you get a hang of it, it shines. Also good thing is you do no need to learn any GraphQl framework in the beginning as plain vanilla GraphQl works great too.

2) You can try expo framework to run the Android as your emulator. Expo works out of box with react app and offers many advantages like managing dependency issues for your, help with publishing etc. See the documentation on how to get started. For communication between expo and your localhost back-end server you might have to use something like ngrok.

answered Dec 27 '19 at 15:35

bhaskarc

9,269
10
65
86

Thanks for that answer @bhaskarc ! Regarding the use of `GraphQL`, do you keep using `django-rest-framework` as you have to expose your endpoints somehow? Is `GraphQL` just to make easier the write of urls to fetch? `GraphQL` is the next thing I want to master because it's kind of trendy and a lot of people say it makes one's life easier, before I start browsing google and Medium, would you have any source to recommend? – KrazyMax Dec 27 '19 at 15:46
1

GraphQL is a replacement for django rest framework - a newer way to query and more efficient in many ways. I learnt GraphQl with this excellent link that shows how to connect Django and GraphQL https://www.howtographql.com/graphql-python/4-authentication/ – bhaskarc Dec 27 '19 at 15:51
Further several frameworks have been built on top of GraphQL.I used plain vanilla GRaphQl (without using frameworks like say Apollo) as the learning curve with Apollo was kind of too much for me and even plain vanilla GraphQL worked great for me in a moderately large project. – bhaskarc Dec 27 '19 at 15:56
Just like one would use say Postman to test APIs, GraphQl has something called GraphQLi - interactive clients to play and test queries. I for one used a Chrome extension called Altair GraphQL Client, which was awesome – bhaskarc Dec 27 '19 at 15:59
@bhaskarc thanks for the clarification, things are clearer now. But my actual intention is to find out how frontend and backend communicate in case of emulation of Android device. There are tutorials which say to run backend on some say Azure/AWS to access publicly, since localhost ain't available but I guess that's a lot to do for debugging, no? So, is there a way to communicate, used generally? – Himanshu Khandelwal Dec 27 '19 at 18:19
@HimanshuKhandelwal - that is precisely where you can use a free service like ngrok and similar other tunneling services.. ngrok provides a tunnel - replaces your local url say 127.0.0.01:8080 (Django) with a ngrok url (something like xx.xx.xx.ngrok.io) which you can query from within react native and that will inturn be tunneled back to your django development server. – bhaskarc Dec 27 '19 at 18:27

score 1 · Answer 2 · answered Dec 27 '19 at 15:19

May I suggest you to have a look on a question I previously answered, also regarding the association between Django for the backend and React.js for the frontend?

Recommendation on deploying a heavy Django + React.js web-application

I think your question is not only relevant for Android development.

score 0 · Accepted Answer · answered Jan 05 '20 at 17:59

So, I get an awesome way to connect the ends. If your development machine has Chrome installed, then it is very handy to connect the localhosts in one go. In Chrome Dev Tools, there is a feature called Port Forwarding.

Host a site on a development machine web server, then access the content from an Android device.

With a USB cable and Chrome DevTools, you can run a site from a development machine and then view the site on an Android device.

In here, I need to make a new rule mapping my localhost:8000 of Django server to 8000 port (localhost) of Android emulated device. Great tool, with just inclusion of one rule, all the the third-party dependencies are cleared in the context. No issues, with constantly changing links too!

What's the best way to plug React-Native with Django in Android Emulator?

3 Answers3