Connect Expo dev builds remotely

Ever since I started using React Native nearly 10 years ago, I have been searching for the best way to develop and debug. I have most commonly used the iOS simulator, but over the years it has been incredibly buggy. It always breaks after macOS upgrades and there is still a bug where you need to force quit it every time just to restart your computer.

As an Android user I shifted to using my own device and using adb reverse to connect to my local development server via USB. This sort of works but is annoying to set up and takes up a valuable USB slot. You also need to reverse the ports of any local APIs you are developing against.

I started searching for solutions, and found that Expo is supposed to work over LAN by default. However if you are on a work computer chances are you don't have access to your firewall to allow this traffic. Beyond this there aren't many documented solutions.

I then had the thought that Tailscale could be a good option to allow secure connection between your device and your local development server.

Here's how it works:

• Install Tailscale on both your computer running Expo and the device(s) you want to use
• Create a Tailscale account and create a new tailnet
• Connect both devices to the same tailnet
• Install your expo development build app on your device
• Run the development server on your computer using the usual expo start command
• Run tailscale serve --http=8081 localhost:8081 and copy the url output
• Open the expo development build app on your device and paste the url to connect

Originally I ran serve using https as iOS doesn't support http by default. However I was seeing errors running Android where it was attempting to fetch assets from http. You need to add the following to your app.config.ts to support http on iOS so you can use both platforms at once. You can exclude this setting from non-development builds.

{
...
  ios: {
    ...
    infoPlist: {
      ...
      NSLocalNetworkUsageDescription: "Needed for Expo Dev Client",
      NSAppTransportSecurity: {
        NSAllowsArbitraryLoads: true,
      },
    },
  },
...
}

If you also have a local backend API you can expose these via the same serve command as well. You can then change the environment variables in your expo app to point to your tailscale url instead of localhost.

You can add these commands to your package.json scripts to make it easier to run them.

This method is also useful for connecting to local web servers from a real device.

That's it! You should now be loading the code from your development server on your device.