How can I access my react app from another pc in local network?

Question

Background

I am hosting a react application website on my rasperrypi, and so far I have been able to access the application website when I used create-react-app: I could access the application both from the computer in the network, as well as the raspberry pi. On the raspberrypi, i used the localhost:3000 to access the website and from the computer i would access it from the 192.x.x.x:3000 and it would work fine. However since I realized that I can't run some raspberry native modules when using create-react-app, I decided to install and setup react manually, together with babel and webpack (in the hope that it would work).

The problem

Using the manual setup, I am able to see the web application while I am accessing it from the localhost on raspberrypi, but I can't access it on my computer (which is in the same LAN as the raspberry); I tried to switch the port to 3000 but the result was the same, can't access it from the computer... Anyone know anything that could help?

Thank you for the attention!

Solution

As you're using Webpack-Dev-Server, you can use either the allowedHosts option or define the host option to 0.0.0.0. Both following examples are from the Webpack Docs.

Allowed Hosts

module.exports = {
  //...
  devServer: {
    allowedHosts: [
      'host.com',
      'subdomain.host.com',
      'subdomain2.host.com',
      'host2.com'
    ]
  }
};

Host Definition

module.exports = {
  //...
  devServer: {
    host: '0.0.0.0'
  }
};

The last configuration can also be achieved by using the CLI:

webpack-dev-server --host 0.0.0.0

Production Mode

In production mode and with e.g. express, you can use one of the following implementations. You can read about it more on SuperUser.

listen(3000, '192.x.x.x', function() {}
listen(3000, '0.0.0.0', function() {}

The reason why you can't access it, is that the server is binding the loopback address (127.0.0.1).

Comments

[Roger Peixoto]

Thank you, it worked! I used the "host definition" approach!