Hot Reload Over the Wire: Metro Internals for Remote Development

Hot reload is the superpower that makes React Native development feel instant. But it carries an unspoken assumption: the device running your app is sitting on the same network as your laptop. The moment you need a simulator or emulator in the cloud, for OS coverage, screen sizes, or CI, that feedback cycle breaks. You're back to slow, full rebuilds. At Revyl, we needed hot reload to work on cloud-hosted simulators and emulators. Getting there meant going deep into Metro and Expo internals that most RN developers never touch. This talk walks through what we found and what we had to build. We'll cover how Metro's URL resolution is hardwired around localhost, from bundle URLs in the manifest to HMR WebSocket hostnames, and what it takes to rewrite that for a remote target. We'll trace the HMR protocol end to end and show how we proxy it through a secure tunnel without breaking the update handshake. We'll dig into Expo's dev client deep-linking flow, the mechanism that wires your dev build to the right dev server, and how we redirect it to a simulator hundreds of miles away. And we'll get into the edge cases that surface only when there's real network distance in the loop: a WebSocket parser that silently chokes on default HTTPS ports, environment variables that quietly kill Fast Refresh, localhost references that leak through URL rewrites, and process lifecycle bugs that leave zombie bundlers blocking your port. You'll walk away understanding how Metro, the dev server, and HMR actually work under the hood, and see it all running live in a demo connecting a local dev environment to a cloud-hosted simulator in real time.