Run on devices

[pke]

Any chance to get this running on devices too?

[devgeeks]

The issue is knowing where to point to the server.

On the iOS sim, it's easy enough, as it's localhost. On the Android emulator there is a built in IP that magically points to the host machine.

With a device, the server is the IP of the serving machine, on the interface that happens to be available to the device trying to connect to it, and there could be more than one. It's an issue that plagues the PhoneGap developer app as well, but unlike the developer app, it's baked into config.xml at build time, not entered into a text field. So you can't just "try a couple till it works", heh.

I have some ideas on how to handle this, but haven't had a chance to really sit down and work out the issue yet. Feel free to ping me on Slack if you have any suggestions.

[FrenchTechLead]

Hello DevGeeks,

I found it cool to use React and PhoneGap to build an App until i saw this issue, is there any other way to combine PhoneGap and React to build production-ready Apps ? I Really think this would take PhoneGap to a whole new level !

[devgeeks]

You can always manually set the IP in config.xml to the IP of your machine.

What this template cannot do at present is automatically do that.

Keep in mind, it is only the hot reloading that is not currently easily available on devices. It is very possible to use this template to write a production app with PhoneGap and React. I have done so :)

On Fri, 21 Apr 2017 at 21:58, MECHERI Akram notifications@github.com wrote:

Hello DevGeeks,

I found it cool to use React and PhoneGap to build an App until i saw this issue, is there any other way to combine PhoneGap and React to build production-ready Apps ? I Really think this would take PhoneGap to a whole new level !

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/phonegap/phonegap-template-react-hot-loader/issues/10#issuecomment-296172016, or mute the thread https://github.com/notifications/unsubscribe-auth/AAh39zKWw0F3QARiWFdV8bxPf5yG_epaks5ryJnOgaJpZM4K9_RE .

[bevinhex]

Hi thank you for the template,today I managed to solve one problem with hot reloading on device

1. about auto IP, this is part of config.js:

   
   const ip = require('ip');

const ENV = require('./env'); const src = { android: (ENV === 'development' ? 'http://'+ip.address()+':8080/' : '') + 'index.html', ios: (ENV === 'development' ? 'http://'+ip.address()+':8080/' : '') + 'index.html', }; const config = path.resolve('./config.xml');

try { var configXML = new et.ElementTree( et.XML(

that takes care of the address in config.xml

2. Another point is we need to install "cordova whitelist plugin", or else in App browser refuse to connect to your host, giving "Application Error"

3. even after putting 0.0.0.0 for the HOST env, if I open my IP on 192.168.0.2:8080, it gives some error about header, so to overcome that, need to add "disableHostCheck: true" inside webpack.config.js
Here is partial code

if (ENV === 'development') { module.exports = merge(common, { devServer: { contentBase: PATHS.build,

  // Enable history API fallback so HTML5 History API based
  // routing works. This is a good default that will come
  // in handy in more complicated setups.
  historyApiFallback: true,
  hot: true,
  inline: true,
  progress: true,
  disableHostCheck: true,
  https: false,
  // Display only errors to reduce the amount of output.
  stats: 'errors-only',

  // Parse host and port from env so this is easy to customize.
  host: process.env.HOST||'0.0.0.0',
  port: process.env.PORT,
},
plugins: [
  new webpack.HotModuleReplacementPlugin(),
],

});

Due to time limit, could not fork and submit pull request, please add it to code base.

[toadeelali]

host: process.env.HOST||'0.0.0.0', port: process.env.PORT,

Awesome! You made my day