express server not accessible in the app on production build

[ajaymore]

I am running express server using nodejs-mobile which works quite well during development as well as in production. I can access localhost on mobile's browser.

However http://localhost:3000 is not accessible in the app itself. Any help is appreciated.

[jaimecbernardo]

Hi @ajaymore ,

Given that it is accessible in the browser, the nodejs-mobile part seems to be working correctly. This might be an issue in the UI you are trying to use, possibly.

There's no information about whether you are running on Android/iOS and if you're on cordova/react-native or other UI platforms.

What sort of error are you getting?

[ajaymore]

Hi @jaimecbernardo

Thank you for your response. I am using nodejs-mobile-react-native

I am starting the server by running below code.

import nodejs from 'nodejs-mobile-react-native';

  componentWillMount()
  {
    nodejs.start('main.js');
    nodejs.channel.addListener(
      'message',
      (msg) => {
        alert('From node: ' + msg);
      },
      this 
    );
  }

My Server code below

// Rename this sample file to main.js to use on your project.
// The main.js file will be overwritten in updates/reinstalls.

var rn_bridge = require('rn-bridge');

// Echo every message received from react-native.
rn_bridge.channel.on('message', (msg) => {
  rn_bridge.channel.send(msg);
} );

const express = require('express');
const app = express();
app.use(express.static(path.join(__dirname, 'public')));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

// Our first route
app.get('/hello-world', function(req, res) {
  res.json({ message: 'Hello World!' });
});

app.listen(4000, function() {
  rn_bridge.channel.send('Dev app listening on port 3000!');
});

The server starts properly and I also receive the server started message back. When I launch localhost url in the chrome browser it also works well.

When I use fetch inside react-native the request fails. I have used http://localhost:3000, http://10.0.2.2:3000 and http://192.168.100.6:3000

None above seems to work from the react-native environment.

I won't be able to put up my code today, but can put up repo for your review.

Thanks.

[jaimecbernardo]

Hi @ajaymore ,

From the information posted, it looks like you're listening on port 4000 and then trying to access the content from port 3000. That might be part of the reason.

You also didn't mention whether this is on Android or iOS. In case it's Android, this was recently posted on gitter by https://github.com/cle5eland regarding a similar issue:

I found a fix via this stack overflow post: https://stackoverflow.com/questions/45940861/android-8-cleartext-http-traffic-not-permitted TL;DR Cleartext support is disabled by default in Android 9.0 (API 28). This will cause a failure for anyone using express who updates to API 28. It's a one line configuration change in AndroidManifest to fix.

[ajaymore]

Hi @jaimecbernardo

Thank you for this. I am building an Android app.

Putting android:usesCleartextTraffic="true" helped fix my problem.

Here is my repository for anybody who might be interested. https://github.com/parallellearning/bomdila