Debugging React applications in Mobile Devices
While developing a web application there might be cases where we want to expose our local webserver to the internet so that people can access it from anywhere. Cases might be demoing for a client, testing on mobile devices, sending previews to clients, building webhook integrations, and so on.
But the questions arise here.
Is there any tool that exposes local servers and provides a public URL?
Yes, it’s possible, there are tools like Ngrok, Localtunnel, Teleconsole which make this possible. Let’s have a look at Ngrok.
ngrok exposes local servers behind NATs and firewalls to the public internet over secure tunnels — ngrok
It offers both a free and paid version. Free versions have limited but rich functionalities such as secure tunnels, request inspection, password protection, and many more. While paid plans have features like custom subdomains, reserved domains, End-to-End TLS Tunnels, and many more.
Let’s download and install the application.
The setup and installation are pretty neat and straightforward.
Imagine we have a react application running in port 3000 and we want to expose it to the public for testing purposes on mobile devices.
Let’s run the command.
./ngrok http 3000
It maps our application and assigns a public URL for our application. Let’s open the URL.
It shows us an error.
This application is built using Create React App(CRA)
which uses some kind of security mechanism. In order to make it work you need to assign a development URL to host-header.
./ngrok http 3000 -host-header="localhost:3000"
It works fine. Let’s open the URL on our mobile.
If we make any changes in our development and then it reflects the public URL. Isn’t it cool?
How about debugging an API call? Is there a way to debug it?
Yes, there’s a way to debug the API call. You need to open localhost:4040
In this way, we can expose our local development environment to the public internet and make it accessible to people. We can debug the API calls and also see the changes on the fly. These are most helpful for developers who are focused on applications supporting mobile devices.
Thanks for reading!
