[Packager] Steps to get packager working on Windows

[joewood]

I made a few changes to the packager so that it runs on Windows. So, I can now develop react-native apps running from the packager server on Windows (after an initial deploy from OSX). Rather than sending a PR, I've listed the changes below:

FileWatcher

Do not install watchman (or uninstall it). The FileWatcher uses sane which delegates to nodeWatcher if watchman isn't installed. Note that watchman doesn't work on windows. Note, also I had to increase the MAX_WAIT_TIME in FileWatcher/index.js to avoid that timeout error (I guess nodeWatcher is slower on start-up).

Blacklist

The blacklistRE is a regular expression list of file paths that should be ignored by the packager. The regex uses forward slashes in the file paths. The discovered file paths returned by node have backslash on Windows, so the test was failing - essentially ignoring the blacklist. To fix this I added a step in the escapeRegExp function in packager/blacklist.js to substitute all \s with path.sep:

function escapeRegExp(str) {
  var escaped = str.replace(/[\-\[\]\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
  return escaped.replace(/\//g,"\\"+path.sep);
}

I also added ".git" to the shared blacklist, as the nodeWatcher doesn't seem to automatically ignore these directories.

Module Names Correct Path

In packager/react-packager/src/DependencyResolver/haste/index.js I modified the code to ensure that module names that contain the backslash were replaced with a forward slash. I did this with a local in-place regex replace in the expression:

  var relativizedCode =
    code.replace(REL_REQUIRE_STMT, function(codeMatch, depName) {
      var depId = resolvedDeps[depName];
      if (depId != null) {
        return 'require(\'' + depId.replace(/\\/g,'/') + '\')';
      } else {
        return codeMatch;
      }
    });

return DEFINE_MODULE_CODE.replace(DEFINE_MODULE_REPLACE_RE, function(key) {
    return {
      '_moduleName_': module.id.replace(/\\/g, '/'),
      '_code_': relativizedCode,
      '_deps_': JSON.stringify(resolvedDepsArr.map( function(i) { return i.replace(/\\/g,'/'); })),
    }[key];

The same change also needs to be applied for the runModule in the finally emitted require. This is in the packager/react-packager/src/Packager/Package.js file:

Package.prototype.finalize = function(options) {
  options = options || {};
  if (options.runMainModule) {
    var runCode = ';require("' + this._mainModuleId.replace(/\\/g,"/") + '");';
    this.addModule(
      runCode,
      runCode,
      'RunMainModule.js'
    );
  }

Default Project Root

Last minor change is for when the packager is run from node_modules. There's some code in packager.js that tests for this and sets the project root to ../../. The file path check uses \, so I use regex to use either path separator, packager.js:50:

  if (__dirname.match(/node_modules[\/\\]react-native[\/\\]packager$/)) {
    // packager is running from node_modules of another project
    options.projectRoots = [path.resolve(__dirname, '../../..')];
  } else {
    options.projectRoots = [path.resolve(__dirname, '..')];
  }

[dalinaum]

👍

[amasad]

Thanks for the write up. Happy to take PR, but it'd be great if we split them into multiple PRs.
We're definitely interested in making it work on windows, especially as we support more platforms. But I'm curious how are you able to do iOS development on windows?

[joewood]

You have to kick this off with the initial build and deploy to the device using a Mac. But once the app is on there the packager can be running on the PC. I'll put together some PRs, maybe clean up the code a little.

[joewood]

Thanks @amasad I split the changes into two PRs - #807 and #893. Should have no impact on OSX.

[ghost]

Thank you for reporting this issue and appreciate your patience. We've notified the core team for an update on this issue. We're looking for a response within the next 30 days or the issue may be closed.

[brentvatne]

I believe the packager works on Windows now? If not, let me know and I'll reopen