Could not connect to development server. Ensure node server is running

[lealife]

I run the 2048 example on Xcode and run the IOS simulator, an error occurs:

[amasad]

Did you try running npm start from react-native directory?

[tehfailsafe]

I get this error as well when I try to run on real ios device through xcode. Is that expected?

[meetwudi]

Run npm start on local machine to start the development server. React Native relies on a development server to communicate with the app running in the simulator.

[lealife]

Ok, I will try it, I see the AppDelegate.m :

 // Loading JavaScript code - uncomment the one you want.

  // OPTION 1
  // Load from development server. Start the server from the repository root:
  //
  // $ npm start
  //
  // To run on device, change `localhost` to the IP address of your computer, and make sure your computer and
  // iOS device are on the same Wi-Fi network.

Maybe you should write it in a wiki(How to run examples ?). It's easy to freshman.

[jaichandra]

I see this error even after running 'npm start'. Do I need to make any changes to AppDelegate.m file?

[jaichandra]

OK. fixed the issue. I had to change the port from 8081 to 8881 as the default port is used by another process on my mac. Modifying AppDelegate.m to point to the new port worked.

  // OPTION 1
  // Load from development server. Start the server from the repository root:
  //
  // $ npm start
  //
  // To run on device, change `localhost` to the IP address of your computer, and make sure your computer and
  // iOS device are on the same Wi-Fi network.
  jsCodeLocation = [NSURL URLWithString:@"http://localhost:8881/index.ios.bundle"];

[ikallen]

where is react-native directory?

[brownieboy]

@ikallen

The "react-native directory" refers to the folder where your own source-code is located.

[wongzigii]

I think "react-native root" within the error could be more clear which just as @brownieboy said, refers to the folder where the source code located.

[MilanPalSingh]

It worked for me -> open the APP folder in the terminal and running "react-native start". Here you can also check on which port it is running and set the same.

[jamesfzhang]

I can load this URL just fine in my browser: http://localhost:8081/index.ios.bundle?platform=ios&dev=true but I still get this error. My AppDelegate appears like so:

let jsCodeLocation = NSURL(string: "http://localhost:8081/index.ios.bundle?platform=ios&dev=true")
let rootView = RCTRootView(bundleURL: jsCodeLocation, moduleName: "App", initialProperties: nil, launchOptions: launchOptions)
let rootViewController = ViewController()
rootViewController.view = rootView
self.window = UIWindow(frame: UIScreen.mainScreen().bounds)
self.window?.rootViewController = rootViewController
self.window?.makeKeyAndVisible()
return true

[jamesfzhang]

In iOS 9.0+ Apple by default blocks non-secure (http) requests. I had to add this to my Info.plist

[adamsythe]

Jamesfzhang I am having the same error as you, what is the full name of the boolean you added at the end?

And does the app transport security settings dictionary live in the information list dictionary?

Thanks

[jamesfzhang]

@adamsythe The boolean is NSTemporaryExceptionAllowsInsecureHTTPLoads, and yes this is in the information list dictionary.

    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSExceptionDomains</key>
        <dict>
            <key>localhost</key>
            <dict>
                <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
                <true/>
            </dict>
        </dict>
    </dict>

[adamsythe]

Thanks my error disappeared when I updated my operating system :)

[Kim-Andersen]

I can also load the dev server resource in my browser, and also updated my info.plist as jamesfzhang suggested. But I'm still getting the red screen connection error message.

Now I tried to to access the dev server resource (http://[my ip]:8081/index.ios.bundle?platform=ios&dev=true ) through a browser on my device, and that page doesn't load. I'm sure my workstation and device is on the same network. Could this be a closed port issue?

[jlugner]

Getting the exact same error. No problem loading from browser, can't fetch from simulator. tried @jamesfzhang solution, but still having same error. Anyone found a solution?

[Kim-Andersen]

I had to change the address of the dev server in the following file as well:

Libraries/RTCWebSocket.xcodeproj/RTCWebSocketExecutor.m

Pungsnigel, can you load the dev server resource from a browser in your device?

[silent-tan]

I fixed this with using npm start in my project directory and hit the run button

[jamesfzhang]

Have you tried adding your IP to list of NSExceptionDomains?

[tkfeng]

@jamesfzhang Following your instruction, I was finally able to resolve the "Could not connect to development server" issue on the simulator. Thanks!

[jamesfzhang]

@tkfeng Great, no problem!

[phoenixbox]

I had two problems, solutions below:

1: Could not Connect to development Server
2: Could not start server due to missing dependencies

Problem 1:

Could not Connect to development Server

Solution

Adding this to your xcode project plist.

<key>NSAppTransportSecurity</key>
    <dict>
        <key>NSExceptionDomains</key>
        <dict>
            <key>localhost</key>
            <dict>
                <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
                <true/>
            </dict>
        </dict>
    </dict>

Problem 2:

Could not start server due to missing dependencies

Solution

For some reason npm install was not installing the submodule dependencies for the react native package. So I ran npm install from the root of the react-native package which was inside my node_modules dir

$ cd node_modules/react-native
$ npm install

Then when running npm start from the root of my new react native project directory I got the following output:

===============================================================
 |  Running packager on port 8081.
 |  Keep this packager running while developing on any JS
 |  projects. Feel free to close this tab and run your own
 |  packager instance if you prefer.
 |
 |     https://github.com/facebook/react-native
 |
 ===============================================================

Looking for JS files in
   /Users/user/Dev/examples/react-native/new-react-project


React packager ready.

Note: make sure the the port from this line:
Running packager on port 8081.
matches the port referenced in your app delegate
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];

🚀 🚀 🚀

[ghamaide]

@jamesfzhang I added localhost to my list of exceptions and it runs well on the simulator. I also added my local IP address 192.168.XXX.XXX but I can't get it to work on my device. Any thoughts ?

[liyang1988]

I also had this problem ,but I had more question ,

anyone can help me?

[tdugger]

I also had this problem (where I could access the URL from the browser on the device fine, but the app could not). I tried adding the solution 1 mentioned in @phoenixbox (originally suggested by @jamesfzhang) but that didn't work. Then I instead of using localhost as jamesfzhang suggested, I entered my IP address and put my IP in the jsCodeLocation line in AppDelegate.m and then it worked.

[dazziola]

Thank you so much @PhillippOhlandt! Why I need to do this on one computer and not the other baffles me, but it works!

[PhillippOhlandt]

@dazziola yeah, after some time, it worked even without that.

[fud]

Putting this here for others.

If you're debugging on a physical phone and trying to connect to the local network the xip.io domain must be DNS resolvable. Turns out my modem, a Fritzbox, blocks such DNS lookups for local domain ip addresses and I had to add an exception in my modem settings. Now I can reach my dev server on my laptop.

To test if you have such a problem - dig .xio.ip if it time's out you have an issue.

More information in this script, https://github.com/facebook/react-native/blob/master/packager/react-native-xcode.sh#L83

Also if you're running on a phone, you'll see in that script that NSTemporaryExceptionAllowsInsecureHTTPLoads are added for your test domain also - so you don't need to manually add them.

[Hkmu]

check your hosts file if it lost a line 127.0.0.1 localhost

[JamesTheHacker]

I have had this problem all day using the simulator. Can not find a solution. I've tried every recommendation in this thread and it's still happening. I've even checked out what's going on with Wireshark and I'm stumped!

I can navigate in the browser, but the simulator can't connect. The host, and port are the same. I've modified AppDelegate with the correct information. I've modified the plist file. No firewall.

Absolutely stumped here.

[JamesTheHacker]

Fixed. In AppDelegate.m find:

jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];

And replace with:

jsCodeLocation = [NSURL URLWithString:@"http://127.0.0.1:8006/index.ios.bundle"];

Note the 127.0.0.1 instead of localhost.

I'm not sure if this is the correct way to do this, but it's the only way to solve my issue. No idea why because the locahost issue is a bug from an older XCode, but I'm using 8.0.

[kadzier]

Getting same error as @jamesfzhang on the simulator too; RN 0.39 and Xcode 8.1. Tried everything here but nothing seems to be working. The packager is running but when I try to start the app through Xcode or react-native run-ios I still end up with the error. @JamesTheHacker I tried your method with both port 8081 (my default) and 8006 but not working either. Been stuck on this all day; any other options?

[JamesTheHacker]

@kadzier did you change localhost to 127.0.0.1 in AppDelegate.m. That's what fixed it for me.

[kadzier]

@JamesTheHacker no dice, still got the exact same error. I finally was able to resolve the issue, however: I ended up completely uninstalling the react native cli and watchman, as well as also uninstalling npm AND node, deleting the references everywhere I could find them as per http://stackoverflow.com/questions/11177954/how-do-i-completely-uninstall-node-js-and-reinstall-from-beginning-mac-os-x. After reinstalling everything fresh I'm no longer getting this issue and everything runs as intended. I cannot even fathom what was going wrong but my guess was some sort of weird unintended dependency I created was messing things up.

[toanfet]

@dvabolta How to you fix isssue by ngrok? Could you please guide me step by step?

[flybayer]

@toanfet I just got dev bundles loading over ngrok at a coffee shop by temporarily modifying this line in AppDelegate.m like so:

  //jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
  jsCodeLocation = [NSURL URLWithString:@"https://4af8888.ngrok.io/index.ios.bundle"];

[yunmenggyy]

thanks everyone

[Kaberi-Basu]

@lealife your solution saved me from night stay at office 💃 . Thankx a lot.
It worked for me after hours of unsuccessful attempts.

[PARAGJYOTI]

Here's the simple command
go tho the directory ~/android/sdk/platform-tools and run
adb reverse tcp:8081 tcp:8081

[lenhathuy]

@PhillippOhlandt
I had a error when i using the real device. :(
Could not connect to development server ! Tried everything from this thread but still getting the stupid error. Can you help me solved my problem?

[shanshah-ali]

Thank

[bighitbiker3]

I got this error when trying to run on my device. Fought it for 6+ hours and tried EVERYTHING. Turns out the wifi on my phone was off. Feel like a huge idiot but MAKE SURE YOUR WIFI IS ON ON YOUR DEVICE!!

[rajathithan]

This can be resolved by the dev settings inside the android emulator , please visit my site for more information,

http://gadoth.com/react-native-series-post-1-installation-setup/

[mohammed1955]

@bighitbiker3
in AppDelegate.m file find this code line:

jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];

change the **localhost ** to your ip address ,if you have mac run Network Utility App and find your IP Address .
Be Sure your Computer And Device Use same Network .

[berkansahin]

Device is not connect to 8081 port server.

How can be fix ?

[PARAGJYOTI]

Go to android/sdk/platform-tools and try running
adb reverse tcp:8081 tcp:8081 . If it works , set your platform-tools directory in environment variables so that you can run adb command from anywhere.

[Pranit-Harekar]

iOS : If you are trying to run on a device, then change the URL from localhost to your computer's IP address, like this http://xxx.xxx.xxx.xxx:8081/index.bundle?platform=ios inside AppDelegate.swift.
On mac find IP by running command ifconfig | grep "inet " | grep -v 127.0.0.1 or find manually in network preferences. Hope that helps!

[ramsunvtech]

We faced this issue, In order to fix this, solution is dead simple is below.

1. Cancel the current process of“react-native run-android” by CTRL + C
   or CMD + C
2. Close metro bundler window command line which opened
   automatically.
3. Run the command again, “react-native run-android”.

Basically this error tells that your current build got failed due to reasons like Code issue or dependency issue.

Click here for more details

[Young-Je]

yes, you should change 127.0.0.1 to your real computer ip like 192.168.1.121. this will work as a magic on your real device, 127.0.0.1 works on your simulator only.

[arash-hacker]

it depends on some point
1- kill terminal and simulator and react-native run-ios again
if error again
2-

if error like that just check out app.json may be you mistakly copy your source code and forgot to change name ,display name instade app.json and it show this error
if error show again
3-may be your reacyt native confused !!! BTW download this packages remove rm -rf ~/.rncache and unzip to ~/.rncache
if error again :|
4-some times is i face restart my computer works :) because if your computer runs day after days this may RN make dumb to process
if error exist
5- create new project , npm install all pakckages ,relink all dependecies , copy source code be ware off app.json

[tuannguyen192]

Restart mac worked for me