[Android][Windows] Support Running RN for Android on Windows #2780

BerndWessels · 2015-09-16T22:25:57Z

Hello

I believe masses of people are very excited about React Native now finally supporting Android too.

BUT there will be a huge disappointment that it does not support developing on Windows machines - which in many cases will prevent the uptake of React Native in bigger companies which can't just change their main OS.

I digged a bit and it seems not to hard to get it running on Windows anyway.

Change from spawn to requirejs.exec in react-native-cli index.js like this:

    spawn.exec(cmd + ' ' + args.join(' '), function(code, output){
      if (code !== 0) {
        cb(new Error('Command exited with a non-zero status ' + code + '\n' + cmd + ' ' + args.replace(',', ' ')));
      } else {
        cb(null);
      }
    });
    //var proc = spawn(cmd, args, {stdio: 'inherit'});
    //proc.on('close', function(code) {
    //  if (code !== 0) {
    //    cb(new Error('Command exited with a non-zero status'));
    //  } else {
    //    cb(null);
    //  }
    //});

This change enables me to run react-native run-android without any visible errors. It starts the emulator and the app.

The only last missing piece to get it running on Windows is:
Why does the development server not work - or why can't the app connect to it?

I get "Unable to download JS Bundle..." red screen of death. It seems that react-native run-android failed to start it, even though it prints Starting JS server.... See the complete output at the bottom.

So please please, this is such an important issue to have a working Windows version for the uptake of React and should really not be to difficult to fix for you guys.

Please fix it and help us become a huge community.

Cheers
Bernd

    Y:\Mobile>react-native run-android
    Starting JS server...
        Building and installing the app on the device (cd android && gradlew.bat installDebug)...
    :app:preBuild UP-TO-DATE
    :app:preDebugBuild UP-TO-DATE
    :app:checkDebugManifest
        :app:preReleaseBuild UP-TO-DATE
    :app:prepareComAndroidSupportAppcompatV72300Library UP-TO-DATE
    :app:prepareComAndroidSupportSupportV42300Library UP-TO-DATE
    :app:prepareComFacebookFrescoDrawee061Library UP-TO-DATE
    :app:prepareComFacebookFrescoFbcore061Library UP-TO-DATE
    :app:prepareComFacebookFrescoFresco061Library UP-TO-DATE
    :app:prepareComFacebookFrescoImagepipeline061Library UP-TO-DATE
    :app:prepareComFacebookFrescoImagepipelineOkhttp061Library UP-TO-DATE
    :app:prepareComFacebookReactReactNative0110Library UP-TO-DATE
    :app:prepareOrgWebkitAndroidJscR174650Library UP-TO-DATE
    :app:prepareDebugDependencies
        :app:compileDebugAidl UP-TO-DATE
    :app:compileDebugRenderscript UP-TO-DATE
    :app:generateDebugBuildConfig UP-TO-DATE
    :app:generateDebugAssets UP-TO-DATE
    :app:mergeDebugAssets UP-TO-DATE
    :app:generateDebugResValues UP-TO-DATE
    :app:generateDebugResources UP-TO-DATE
    :app:mergeDebugResources UP-TO-DATE
    :app:processDebugManifest UP-TO-DATE
    :app:processDebugResources UP-TO-DATE
    :app:generateDebugSources UP-TO-DATE
    :app:processDebugJavaRes UP-TO-DATE
    :app:compileDebugJavaWithJavac UP-TO-DATE
    :app:compileDebugNdk UP-TO-DATE
    :app:compileDebugSources UP-TO-DATE
    :app:preDexDebug UP-TO-DATE
    :app:dexDebug UP-TO-DATE
    :app:validateDebugSigning
        :app:packageDebug UP-TO-DATE
    :app:zipalignDebug UP-TO-DATE
    :app:assembleDebug UP-TO-DATE
    :app:installDebug
    Installing APK 'app-debug.apk' on 'reactnative(AVD) - 6.0'
    Installed on 1 device.

        BUILD SUCCESSFUL

    Total time: 20.332 secs
    Starting the app (adb shell am start -n com.mobile/.MainActivity)...
    Starting: Intent { cmp=com.mobile/.MainActivity }

The text was updated successfully, but these errors were encountered:

mkonicek · 2015-09-16T22:30:19Z

See also #2693.

It's awesome you got the CLI to work! Can you try starting the packager manually?

Y:\Mobile>npm start

mkonicek · 2015-09-16T22:32:03Z

You should see:

Y:\Mobile>npm start
node_modules/react-native/packager/packager.sh
...
Running packager on port 8081. 
... 
Looking for JS files in
   Y:\Mobile

React packager ready.

[23:29:34] <START> Building Dependency Graph
[23:29:34] <START> Crawling File System
[23:30:00] <END>   Crawling File System (26093ms)
[23:30:00] <START> Building in-memory fs for JavaScript
[23:30:01] <END>   Building in-memory fs for JavaScript (569ms)
[23:30:01] <START> Building in-memory fs for Assets
[23:30:02] <END>   Building in-memory fs for Assets (543ms)
[23:30:02] <START> Building Haste Map
[23:30:02] <START> Building (deprecated) Asset Map
[23:30:02] <END>   Building (deprecated) Asset Map (205ms)
[23:30:08] <END>   Building Haste Map (5909ms)
[23:30:08] <END>   Building Dependency Graph (33117ms)

BerndWessels · 2015-09-16T22:50:30Z

@mkonicek Hi
I tried that - but `npm start' fails with:

    Y:\Mobile>npm start

    > Mobile@0.0.1 start Y:\Mobile
    > node_modules/react-native/packager/packager.sh

    'node_modules' is not recognized as an internal or external command,
    operable program or batch file.

    npm ERR! Windows_NT 6.3.9600
    npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
    npm ERR! node v4.0.0
    npm ERR! npm  v2.14.2
    npm ERR! code ELIFECYCLE
    npm ERR! Mobile@0.0.1 start: `node_modules/react-native/packager/packager.sh`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the Mobile@0.0.1 start script 'node_modules/react-native/packager/packager.sh'.
    npm ERR! This is most likely a problem with the Mobile package,
    npm ERR! not with npm itself.
    npm ERR! Tell the author that this fails on your system:
    npm ERR!     node_modules/react-native/packager/packager.sh
    npm ERR! You can get their info via:
    npm ERR!     npm owner ls Mobile
    npm ERR! There is likely additional logging output above.

    npm ERR! Please include the following file with any support request:
    npm ERR!     Y:\Mobile\npm-debug.log

Then I tried react-native start which failed like this:

    Y:\Mobile>react-native start
    module.js:338
        throw err;
        ^

    Error: Cannot find module 'Y:\Mobile\packager.js'
        at Function.Module._resolveFilename (module.js:336:15)
        at Function.Module._load (module.js:286:25)
        at Function.Module.runMain (module.js:475:10)
        at startup (node.js:117:18)
        at node.js:951:3

Then I tried node node_modules/react-native/packager/packager.js which actually works somehow like this:

    Y:\Mobile>node node_modules/react-native/packager/packager.js
     ┌────────────────────────────────────────────────────────────────────────────┐
     │  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
       Y:\Mobile


    React packager ready.

    [10:43:07 AM] <START> Building Dependency Graph
    [10:43:07 AM] <START> Crawling File System
    [10:43:17 AM] <END>   Crawling File System (10513ms)
    [10:43:17 AM] <START> Building in-memory fs for JavaScript
    [10:43:18 AM] <END>   Building in-memory fs for JavaScript (1116ms)
    [10:43:18 AM] <START> Building in-memory fs for Assets
    [10:43:19 AM] <END>   Building in-memory fs for Assets (1090ms)
    [10:43:19 AM] <START> Building Haste Map
    [10:43:20 AM] <START> Building (deprecated) Asset Map
    [10:43:20 AM] <END>   Building (deprecated) Asset Map (221ms)
    [10:43:20 AM] <END>   Building Haste Map (639ms)
    [10:43:20 AM] <END>   Building Dependency Graph (13360ms)

But then I press Reload JS in the red screen of death and after about 30seconds or so it fails again and the development server console prints that and then exits the development server:

    <--- Last few GCs --->

      172210 ms: Scavenge 1402.5 (1455.6) -> 1402.5 (1455.6) MB, 9.6 / 0 ms (+ 2.0 ms in 1 steps since last GC) [allocation failure] [incremental marking delaying mark-sweep].
      173083 ms: Mark-sweep 1402.5 (1455.6) -> 1402.5 (1455.6) MB, 872.5 / 0 ms (+ 3.0 ms in 2 steps since start of marking, biggest step 2.0 ms) [last resort gc].
      173954 ms: Mark-sweep 1402.5 (1455.6) -> 1402.4 (1455.6) MB, 871.1 / 0 ms [last resort gc].


    <--- JS stacktrace --->

    ==== JS stack trace =========================================

    Security context: 0000018472E37349 <JS Object>
        1: join [path.js:~217] [pc=0000039512658044] (this=0000006899C67369 <an Object with map 0000008FE2423E19>)
        2: arguments adaptor frame: 3->0
        3: /* anonymous */(aka /* anonymous */) [Y:\Mobile\node_modules\react-native\packager\react-packager\src\DependencyResolver\DependencyGraph\ResolutionRequest.js:~226] [pc=00000395137E2AFA] (this=0000018472E04131 <undefined>,realModuleN...

    FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - process out of memory

I think we are soooo close to get it running on Windows, I only need a bit of help with the last pieces here.

Please help, cheers
Bernd

mkonicek · 2015-09-16T23:17:01Z

Oh OK of course, the problem is npm start runs a shell script:

node_modules/react-native/packager/packager.sh

You'll need to replace the code in the CLI that calls npm start or packager.sh:

node node_modules/react-native/packager/packager.js

Can you try accessing the packager from your browser?

http://localhost:8081/status should say "packager-status:running".
http://localhost:8081/debug should give you two links.
http://localhost:8081/index.android.js should return the contents of your index.android.js file.
http://localhost:8081/index.android.bundle?platform=android is what the device requests when you do 'Reload JS'. It's all the recursively-required code needed to run your app.

The "process out of memory" crash is strange. What do you see in the Task Manager? Do you see a lot of node processes? Does their memory consumption keep growing?

mkonicek · 2015-09-16T23:18:00Z

The 'start' command is defined in package.json, you can change it there:

"scripts": {
  "start": "node_modules/react-native/packager/packager.sh"
},

BerndWessels · 2015-09-16T23:48:16Z

@mkonicek The server seems to be working fine until the app request the code, that breaks the server:

http://localhost:8081/status

packager-status:running

http://localhost:8081/debug

Cached Bundles
Dependency Graph

http://localhost:8081/index.android.js

    /**
     * Sample React Native App
     * https://github.com/facebook/react-native
     */
    'use strict';

    var React = require('react-native');
    var {
      AppRegistry,
      StyleSheet,
      Text,
      View,
    } = React;

    var Mobile = React.createClass({
      render: function() {
        return (
          <View style={styles.container}>
            <Text style={styles.welcome}>
              Welcome to React Native!
            </Text>
            <Text style={styles.instructions}>
              To get started, edit index.android.js
            </Text>
            <Text style={styles.instructions}>
              Shake or press menu button for dev menu
            </Text>
          </View>
        );
      }
    });

    var styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
      },
      welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
      },
      instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
      },
    });

    AppRegistry.registerComponent('Mobile', () => Mobile);

http://localhost:8081/index.android.bundle?platform=android

This break the development server with this console print:

    <--- Last few GCs --->

      299789 ms: Scavenge 1401.1 (1455.6) -> 1401.1 (1455.6) MB, 7.4 / 0 ms (+ 2.0 ms in 1 steps since last GC) [allocation failure] [incremental marking delaying mark-sweep].
      300662 ms: Mark-sweep 1401.1 (1455.6) -> 1401.0 (1455.6) MB, 872.8 / 1 ms (+ 3.0 ms in 2 steps since start of marking, biggest step 2.0 ms) [last resort gc].
      301517 ms: Mark-sweep 1401.0 (1455.6) -> 1401.0 (1455.6) MB, 855.0 / 0 ms [last resort gc].


    <--- JS stacktrace --->

    ==== JS stack trace =========================================

    Security context: 00000394AB737349 <JS Object>
        1: join [path.js:~217] [pc=000000C79FE49004] (this=000003690CB64909 <an Object with map 000003B796023E19>)
        2: arguments adaptor frame: 3->0
        3: /* anonymous */(aka /* anonymous */) [Y:\Mobile\node_modules\react-native\packager\react-packager\src\DependencyResolver\DependencyGraph\ResolutionRequest.js:~226] [pc=000000C7A12131DA] (this=00000394AB704131 <undefined>,realModuleN...

    FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - process out of memory

Any ideas?

BerndWessels · 2015-09-17T04:09:22Z

Hey, we are almost there.

The development server bug was identified and the details are here.

The android app now receives the JS Bundle just fine.

The only remaining problem is that the app shows a blank white screen.

Please help to identify the problem, thank you.

jozn · 2015-09-17T04:15:52Z

Guys i have an eye on your progress!

mqli · 2015-09-17T06:58:09Z

Done it,
https://gist.github.com/mqli/e1e6576e9838d885a43a

BerndWessels · 2015-09-20T20:33:37Z

Thank you so much @mqli.

@mkonicek can you please let us know when all these fixes have made it into master?

I think it is important that Windows Support works right away without people have to dig through Git Issues to get it running. And since we have a working solution now, it would be great if you could get it into master soon.

Thanks guys
Bernd

davidgilbertson · 2015-09-27T00:42:16Z

I've collated all the work from others into a set of instructions over here. I'd like to keep this updated so if anyone has a problem + fix please comment on the gist and I'll update it.

https://gist.github.com/davidgilbertson/9bee68548037fe00f2a8

abdelouahabb · 2015-09-30T18:20:34Z

Guys, that works! thanks to the wonderful gist made by @davidgilbertson https://gist.github.com/davidgilbertson/9bee68548037fe00f2a8

here are two screenshots:

jsierles · 2016-03-20T16:40:53Z

@BerndWessels Hey, do you know if this is still an issue? Thanks!

BerndWessels · 2016-03-20T18:31:42Z

Hi @jsierles . Sorry I can't tell at the moment since I am too busy with some Relay issues.

I will give it another try as soon as possible but trust the guys here if they say its working.

Thanks

jsierles · 2016-03-20T18:42:33Z

OK, thanks! Closing this out for now. Feel free to reopen if you're still having issues.

BerndWessels mentioned this issue Sep 17, 2015

[Android][Windows] The Android App only shows a blank white screen. #2790

Closed

mkonicek added the Android label Sep 18, 2015

BerndWessels mentioned this issue Sep 20, 2015

Replace applescript with browser-launcher2 #2406

Closed

satya164 mentioned this issue Oct 1, 2015

Can not setup environment to run react android on window #3162

Closed

satya164 added Community Responsibility Platform: Windows Building on Windows. Good first issue Interested in collaborating? Take a stab at fixing one of these issues. Help Wanted Issues ideal for external contributors. labels Dec 24, 2015

jsierles closed this as completed Mar 20, 2016

facebook locked as resolved and limited conversation to collaborators Jul 21, 2018

react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jul 21, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Android][Windows] Support Running RN for Android on Windows #2780

[Android][Windows] Support Running RN for Android on Windows #2780

BerndWessels commented Sep 16, 2015

mkonicek commented Sep 16, 2015

mkonicek commented Sep 16, 2015

BerndWessels commented Sep 16, 2015

mkonicek commented Sep 16, 2015

mkonicek commented Sep 16, 2015

BerndWessels commented Sep 16, 2015

BerndWessels commented Sep 17, 2015

jozn commented Sep 17, 2015

mqli commented Sep 17, 2015

BerndWessels commented Sep 20, 2015

davidgilbertson commented Sep 27, 2015

abdelouahabb commented Sep 30, 2015

jsierles commented Mar 20, 2016

BerndWessels commented Mar 20, 2016

jsierles commented Mar 20, 2016

[Android][Windows] Support Running RN for Android on Windows #2780

[Android][Windows] Support Running RN for Android on Windows #2780

Comments

BerndWessels commented Sep 16, 2015

mkonicek commented Sep 16, 2015

mkonicek commented Sep 16, 2015

BerndWessels commented Sep 16, 2015

mkonicek commented Sep 16, 2015

mkonicek commented Sep 16, 2015

BerndWessels commented Sep 16, 2015

BerndWessels commented Sep 17, 2015

jozn commented Sep 17, 2015

mqli commented Sep 17, 2015

BerndWessels commented Sep 20, 2015

davidgilbertson commented Sep 27, 2015

abdelouahabb commented Sep 30, 2015

jsierles commented Mar 20, 2016

BerndWessels commented Mar 20, 2016

jsierles commented Mar 20, 2016