React-native-web: Support hot module reloading - Maybe use React Native Packager?

[ndbroadbent]

I've got my app running in the browser, and now the final piece is trying to set up hot module replacement for development. So far, I have just been using the webpack config that I copied from react-native-web-starter.

I think it would be nice to use the React Native packager to serve JS, because HMR support is always going to work when they release a new version, so I don't have to keep maintaining my own webpack config when stuff breaks. Also it's a lot faster than webpack, so that's a bonus.

The React Native packager already serves files from the project directory, so I'm loading the index.html page from: http://localhost:8081/web. Then I changed the script tag to /index.web.bundle. Now I just need to figure out how to do the react-native-web alias, but only for the web bundle. Something like this in webpack:

  resolve: {
    alias: {
      'react-native': 'react-native-web'
    }
  }

I'm going to keep working on this, but just wanted to post an issue to get some feedback first. Would you be interested if I made some pull requests for this, and also updated the react-native-web-starter project to support HMR?

P.S. I looked at react-native-webpack-server, but it isn't maintained anymore. There's also the react-hot-loader project, so I might try that if the RN packager is too difficult.

[ndbroadbent]

I played around with the react native packager to see if I could get something to work, but didn't have much luck. Here's what I got so far: https://github.com/ndbroadbent/react-native/commit/002193e9ac3b1943e4158a06a8fe7219f90fc2c1

I couldn't put both react-native and react-native-web in providesModuleNodeModules, because there are a lot of duplicate module definitions.

But I was wondering, how does the react-native-windows project do it? Could react-native-web just follow the same pattern as them?

While reading through the source code, I noticed that web is listed as a platform, but is that related to the react-native-web project? Or is that something different?

EDIT: AH! One of the first conflicts I ran into was when the packager couldn't find a DatePickerIOS library. Now I see that react-native-windows is adding dummy components for everything: https://github.com/ReactWindows/react-native-windows/tree/master/Libraries/Components/DatePicker

I might try to rename everything to *.web.js and add all the dummy components.

[ndbroadbent]

OK I gave up on this approach.

I got hot reloading to work using react-hot-loader (version v2.0.0-alpha-4, which has a fix for @autobind).

I'm really happy with this setup now. Thanks so much for working on react-native-web! It's amazing that I can have a single codebase for native apps, as well as a playable version of my game on a website.

I'll send a pull-request to the starter repo, because I think it would be great to have hot reloading by default.

[gianpaj]

any updates on this?
https://github.com/facebook/react/issues/16604

react-hot-loader seems to be deprecated