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

[BerndWessels]

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 }

[mkonicek]

See also #2693.

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

Y:\Mobile>npm start

[mkonicek]

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]

@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]

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]

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

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

[BerndWessels]

@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]

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.

[tmp251]

Guys i have an eye on your progress!

[mqli]

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

[BerndWessels]

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]

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]

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

here are two screenshots: