How using ngrok helped me
Problem:
I recently dove into React Native with Expo on my 8GB MacBook Air M1. Mobile dev usually means running heavy Android emulators, but a quick scroll through Reddit confirmed that doing so on an 8GB machine is a recipe for severe system lag.
To save my RAM, I opted to test directly on my physical phone using the Expo Go app.
But then I hit a second wall: my home Wi-Fi. Due to strict router security and AP isolation, my phone and laptop completely refused to talk to each other over the local network. I was stuck in developer limbo—my hardware couldn't handle an emulator, and my network wouldn't let me use a real device.
That’s when ngrok saved the day. By running a simple command to expose my local Expo port to a public HTTPS URL, I bypassed my router's restrictions entirely. My phone could just fetch the bundle over the internet, keeping my feedback loop instant and my M1 MacBook running cool.
The Setup:
Getting ngrok up and running on macOS is incredibly straightforward using Homebrew. Fire up your terminal and run:
brew install ngrok/ngrok/ngrok
For windows, check the instructions here
Connecting Your Account
Once the installation is done, you need to link your local ngrok agent to your account. Head over to your ngrok dashboard, grab your personal auth token, and run the following command in your terminal:
ngrok config add-authtoken <auth token>
This authentication step is a one-time process. It securely connects your machine to the ngrok cloud, unlocking the ability to generate public URLs.
Tunnelling the app
With everything configured, it was time to bridge the gap between my phone and my Mac. My local Expo development server was running on port 8080, so I opened a new terminal window and fired up the tunnel:
ngrok http 8080
Since my backend server was listening on port 8080, I needed to expose that exact port so my phone could make API requests to it.
Once the command is running, ngrok will hand you a randomly generated, secure HTTPS URL in the terminal. All you have to do is copy that link and paste it into the fetch() calls of your React Native code (or your .env file) as your new base API URL:
This is the output after running the above command:
NOTE: Everytime you restart ngrok a new url will be generated, so make sure to update your fetch() base URL accordingly when you start a new session!
Why I Was Fixing This: Introducing StitchDash
This entire troubleshooting process wasn't just a theoretical exercise, it was born out of necessity while building StitchDash.
StitchDash is a platform I'm working on designed to solve real, frustrating coordination issues in the custom clothing space. It bridges the gap between clients and local tailors, streamlining custom clothing orders, measurements, and alterations without the usual messy back-and-forth. Navigating hardware and network limitations to build it has been a journey, but keeping the development loop fast means getting features out to users sooner.
Check it out here
Conclusion
If you are dealing with a memory-constrained machine and a frustrating network setup, don't waste time fighting your router or forcing heavy emulators to run. Grab ngrok, tunnel your local port, and keep your focus exactly where it belongs: building features.
