React-native: 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?

[tjwudi]

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?

[Pungsnigel]

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?

[farzer]

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"];

:rocket: :rocket: :rocket:

[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.

[ghamaide]

Upgrading to RN 0.18 fixed this for me...

[jcsjohnson]

I am getting this error on only one of my projects. I loaded the project on to my phone yesterday and today I am getting the error for only this one project. My other projects do not get this error. The odd thing is that the power went out last night and my computer restarted while the project in question was running. Has anyone heard of anything like this happening?

React-native - 0.21.0
NPM 3.8.0

I've checked my info.plist and it is accurate and same as my other projects. It was working fine from last night and nothing changed from then until when I tried today..... so confusing.

**EDITED
I rebuilt my project only including source and required components in the new build and it fixed... until it hit midnight. Then the error is back. When I run the project I get a green bar at the top of the simulator that says "Loading from 192..." then after about a minute I get the error "Could not connect to development server..."

What could possibly be causing this?

[fakefish]

@jcsjohnson so am I !!

[jcsjohnson]

@fakefish are you running on iPhone or simulator?

[fakefish]

@jcsjohnson on simulator

[jcsjohnson]

@fakefish pressuming you have used iPhone at some point then the fix may have to do with the port you have set in appDelegate.m file. For me for some reason when the power went out the port changed.

[sritharIOS]

I had run npm start command on the 2048 directory.
Then enabled App Transport Security in info.plist. Now it is works.

[imarco]

Just shut your firewall or add an exception rule for tcp port 8080 (which is the default port setting in ./server/server.js) or for your terminal app.

My problem solved, you can just have a try.

[ghost]

If somebody else is running into this issue on a _device_, there are two places where you have to replace localhost with the IP packager is running on

1. in the ios//AppDelegate.m (which is documented)
   AND
2. in ios//Libraries/WebSocket/RCTWebSocketExecutor.m#L54

The error massage sucks, because its saying that 192.168.XX.XX is not reachable, but it is actually requesting localhost for some debugger stuff

connect with #883

[PhillippOhlandt]

Hey,

I have the same problem when using the emulator. Tried everything from this thread but still getting the stupid error.

[PhillippOhlandt]

I got it!

For everyone else, here is what I did:

Instead of allowing my specific IP address, I disabled the NSAppTransportSecurity feature.

<key>NSAppTransportSecurity</key>
<dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
</dict>

[ghost]

Thanks @PhillippOhlandt now I am able to test on simulator and device at the same time!

[rickycpadilla]

@PhillippOhlandt I am new to xcode, where should I put that code? Thanks!

[momenator]

@rickycpadilla you put that in your_project_name/ios/your_project_name/info.plist. I also got this problem, but what I did to solve the issue was run npm start on root directory of my project and then run react-native run-ios on a separate tab.

[robert-spurrier]

I had the same error as @jcsjohnson, and unfortunately none of the suggestions in this thread did anything for me. I completely wiped my machine's npm/node installation and every module folder I could find. After I reinstalled the necessary react-native dependencies, the skeleton app booted up in the iOS simulator with no other modifications necessary.

OSX 10.11.2
Xcode 7.3.1
npm 2.14.12
node v4.3.0

[PepperYan]

Same problem here, um, I've checked every solutions mentioned before, but none of them work for me. What I have done is init a project with react-native and react-native run-ios, that's all! I've already upgraded my node from 5.6.0 to 6.2.2. Have any other solutions?

OSX 10.11.1
Xcode 7.3.1
npm v3.9.5
node v6.2.2

[PepperYan]

@robert-spurrier seemed to be the same problem to yours

[PepperYan]

@robert-spurrier everything works fine after I update my system to 10.11.5

[pto4]

"Could not connect to development server", Android, 4.2.2 + Windows 7 or 10
Server is running, http://localhost:8081/index.android.bundle?platform=android returns a bundle, a device (not an emulator) is online and is visible for my computer when I type in command line "adb devices".

Have any solutions?

[pto4]

At this time I found the solution here: http://stackoverflow.com/a/37188827/5149064
ngrok allows to run an application, but still I have not found the normal solution. The question is still opened.

[Surreal9]

After having success launching my AwesomeProject in the simulator, it was annoying seeing this red error when trying to launch on iPad. I tried adding my MBP's IP to the info.plist under NSExceptionDomains however had no success. The only thing that appears to work for me is https://github.com/facebook/react-native/issues/304#issuecomment-222639207

[pto4]

What is an analogue for NSAppTransportSecurity on Windows? How I can disable such security on it?

[afeiship]

Check your hosts file:
127.0.0.1 localhost

[jvvinoth]

I fixed this with using npm start in my project directory

[fud]

Is anyone getting this again with Xcode 8.0 + iOS 10.0? I've modified RTWebsocketExecutor.m with something like,

- (void)setUp
{
  if (!_url) {
    NSUserDefaults *standardDefaults = [NSUserDefaults standardUserDefaults];
    NSInteger port = [standardDefaults integerForKey:@"websocket-executor-port"] ?: 8081;
    NSString *host = [[_bridge bundleURL] host];

#if TARGET_IPHONE_SIMULATOR
    host = @"localhost";
#else
    host = @"10.0.0.29";
#endif

    NSLog(@"Setting host to: %@", host);
    NSString *URLString = [NSString stringWithFormat:@"http://%@:%zd/debugger-proxy?role=client", host, port];
    _url = [RCTConvert NSURL:URLString];

    NSLog(@"url is %@", _url);
  }

I've also set exceptions in my Info.plist

  <key>NSAppTransportSecurity</key>
        <dict>
                <key>NSAllowsArbitraryLoads</key>
                <true/>
                <key>NSExceptionDomains</key>
                <dict>
                        <key>10.0.0.29</key>
                        <dict>
                                <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
                                <true/>
                        </dict>
                        <key>10.0.0.60</key>
                        <dict>
                                <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
                                <true/>
                        </dict>
                        <key>localhost</key>
                        <dict>
                                <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
                                <true/>
                        </dict>
                </dict>
        </dict>

But on my phone I _never_ hit my package server. I know it responds at that ip:port as I can hit my machine in a chrome browser on the phone and it responds and I can see that it hits in the log on the package server.

[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.

[Arshiamidos]

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