React-native-windows: Unable to Download JS bundle (Red screen)

[ballySingh]

Environment

1. react-native -v: 0.47.0
2. npm ls rnpm-plugin-windows: 0.47.0-RC5
3. npm ls react-native-windows: yes
4. node -v:8.2.1
5. npm -v:5.3.0
6. yarn --version:n/a

Then, specify:

• Target Platform: UWP (developer mode enabled)

• Target Platform Version(s):
  10.0.10586
  .NET 4.6.1, .NET 4.5
  
• Target Device(s):
  Mobile ARM
  
• Development Operating System:
  Windows 10 Desktop
  
• Visual Studio Version:
  Visual Studio 2015
  Visual Studio 2017

Steps to Reproduce

initialize new react-native project (react-native init project_name)

(Write your steps here:)

1. cd into project_name
2. npm install rnpm-plugin-windows
3. react-native windows
4. open visual studio
5. open .sln file in visual studio
6. connect device to machine
7. change deviceServerHelper,cs to point to ip address of machine
8. run project in debug mode pointing to device and ARM architecture
9. app launches on phone with error message
10. in command prompt in project root directory run react-native start to start packager
11. reload javascript error message displayed

Expected Behavior

(Write what you thought would happen.)

App should load on the screen showing the contents of index.windows.js page

Actual Behavior

(Write what happened. Add screenshots!)

Error message stating unable to download JS Bundle.

Reproducible Demo

(Paste the link to an example project and exact instructions to reproduce the issue.)
https://github.com/ballySingh/repo2.git

Download the zip and run npm install. Please follow step 4 from the reproduction section, above.

[josephchang]

Did you run react-native start?

[ballySingh]

Yes I had, I've mentioned it in step 10.

[josephchang]

Ah right, you did, sorry I missed it.
I've only recently set this up, and I ran into this issue as well - only worked after trying a couple of different things.
Did the packager log anything out?
Another thing I did was running react-native run-windows and then opening the project up in VS.

[shera40]

Packager does'nt show any error. Or the index.window.js loading.

[rozele]

@ballySingh did you modify the URL of the packager server in the native code before deploying to your device? The dev options is configured to try and reach the packager at localhost:8081, but if you're on an ARM device, you'll need to specify the reachable IP address of your dev machine here: https://github.com/Microsoft/react-native-windows/blob/master/ReactWindows/ReactNative.Shared/DevSupport/DevServerHelper.cs#L22

We have an open issue to make this configurable: https://github.com/Microsoft/react-native-windows/issues/358

[ballySingh]

@rozele yes I did, you will see in step 7.

change deviceServerHelper,cs to point to ip address of machine

[ballySingh]

Let me apologize but I was misinformed by our support team. I told that the Ethernet and Wifi internet was using the same internet connection, which I found out was not the case. Once I connected to the same connection it worked.