Debugging React Native or React.js application in Mobile (On same wifi)

Have you ever tried to debug React Native application or React.js application on Mobile devices?

It might not work because, Everything might be working on local setup. But when it comes to mobile it might start throwing errors. It is because the http://127.0.0.1:8000/ in desktop is not same in mobile.

To solve it we access the local server using the IP address of the device if i connected in the same wifi. To make this more dynamic we save this IP address in .env.development file to make sure this works only in local development.

Go the Project Directory

cd project_dir/
touch .env.development

Create the Python script

#envConfigs.py
import subprocess

# Define the shell command
command = "ipconfig getifaddr en0" # for Mac
# command = "hostname -I" # for Linux


# Execute the command and capture the output
IPaddress = subprocess.check_output(command, shell=True, text=True)
IPaddress="http://"+IPaddress.strip()+":8000/\n"
print("IPaddress - " + IPaddress)

file_path = '.env.development'

# Read the file
with open(file_path, 'r') as file:
    lines = file.readlines()

# Find the line containing AXIOS_URL and update it
updated_lines = []
for line in lines:
    if line.startswith('AXIOS_URL='):
        line = f'AXIOS_URL={IPaddress}'
    updated_lines.append(line)

# Write the updated content back to the file
with open(file_path, 'w') as file:
    file.writelines(updated_lines)

print('Env Configs updated.')

Set Default Axios URL

Based on the application logic implement axios.defaults.baseURL only once

import { AXIOS_URL } from "@env"
import axios from 'axios';

axios.defaults.baseURL = AXIOS_URL;

Now this will frontend like React.js or React Native all API will call IP address based API

Access the application on Local device

By using the local IP address access the device in the mobile like - x.x.x.x:8000