The mysteries of Express.js and React Native

I am sure you have all heard the expression that sometimes it is better to step away from a problem and come back to it later with a fresh perspective! Well, this is what I tried to do during week 6 in my CS 467 class and it worked!

But let me start from the beginning! This semester in CS 467, my team and I have been working on a crowd sourced shopping app built with React Native in the frontend, and MongoDB with Express.js in the backend. This is truly the first app I am building in React Native, since my first attempt with a personal project during the summer of 2023 end up in a failure. Back then I had focused on building the frontend of the application without any true backend integration, but in this project things are different, since we aim on building a fully functioning app.

So, along with a full scale app, also came new challenges, and in my case Express.js.

Things didn’t start well from the beginning, where I had troubles making my emulator work smoothly with the code my teammates had added, however, after several failed attempts, software updates and a lot of Google research, I made everything work well, naively thinking that my biggest hurtle was in the past.

Little did I know that my biggest challenge will come during week 6, where I tried to start integrating our frontend with the backend. In particular, at the beginning of that week I focused on transitioning from using sample data that I had prepared for testing purposes to using data that I would retrieve from making calls to the backend. However, no matter if I used the Axios library, or making a simple fetch() call to Express, every single request to the backend ended up with a network error. Things didn’t get any better when halfway through my efforts my emulator decided to stop connecting to the internet, where I ended up uninstalling and reinstalling Android studio again.

Things were looking tough and there was no shortage of work to do, so I decided instead of looking for a solution on my connectivity troubles now, to focus on building the barcode scanning functionality, the live feeds and fixing the bugs I had discovered, while I am also searching on the side for a solution.

My big breakthrough came at the end of that week! You see, there are several tutorials that explain Express.js with React Native, however, many of them have weaknesses, such as:

• Some tutorials use older versions of the software with outdated libraries.
• The instructors have structured their code in a totally different way than what our team had done, leading to other errors in the process.

What did finally work for me was a combination of YouTube and particularly a video by Geeky Shows along with StackOverflow. Combining the information from these two sources, I realized that my problem was due to two issues:

• First, the url to which I was making my requests was wrong. You see, 99% of tutorials explain that when you make a request to Express/MongoDB, you should either use localhost:port_number or the actual endpoint to your API in MongoDB. However, this can lead to some issues and the solution to my problem was to switch localhost in my backend requests with the IP address of Express, 10.0.2.2:port_number.
• Secondly, your firewall can cause problems, and in my case it did. Once I fixed the issue with the IP address, I noticed I could make requests to the backend from helper methods, but never directly through a React Native component. My solution was simple. Turn off my anti virus while working in the app. That was a solution, I came across in StackOverflow and it filled the last pieces of the puzzle.

Finding a solution to my integration challenges was a great satisfaction to me, since it was a crucial step for the completion of our project, but also because it made me more self-confident in my abilities to find technical solutions, while it also helped me better understand Express.js.

My previous experience with Express and MongoDB was limited and it was never in combination with a React Native project, however, what I realized is that many of the principles that I was taught in CS 290, where I was working on Express.js with React.js, are also applicable to React Native. Some crucial changes still exist and working with emulators adds its own complexities, however, the overall approach is very similar.