Run a JSS React Native app in connected tunnel mode

Version: 19.x

To retrieve layout data and network images from a Sitecore instance on your local machine or on a machine that is otherwise unavailable on public DNS, you must run your JSS React Native application in connected tunnel mode.

For example, a common scenario for local Sitecore development is where you have a Sitecore instance on your development machine. The instance is configured with a site that uses the hostname jssbasicapp. The hostname bindings are set to jssbasicapp for an IIS site, and your hosts file contains the hostname jssbasicapp. Attempting to test a native application in a simulator or a physical device means that the application has to request data from http://jssbasicapp, a host that the simulator/device cannot resolve because the simulator/device does not use your local machine for DNS resolution.

In the sample application, you can inspect the implementation in the /src/dataService/dataService.connected-tunnel.js file. When running the application in connected tunnel mode, the application uses an instance of ngrok to create a tunnel between your simulator/device and your local development machine. Layout Service and media requests from your application are modified to use the ngrok tunnel, which tunnels response data from Sitecore back to your app without changing any host bindings on your development machine.

To run your JSS React Native application, run one of the following scripts in a terminal, depending on your target operating system:

  • For Android:

    RequestResponse
    jss start-android:connected-tunnel
  • For iOS:

    RequestResponse
    jss start-ios:connected-tunnel

Do you have some feedback for us?

If you have suggestions for improving this article,