4

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!

Roger Peixoto
  • 348
  • 2
  • 5
  • 18
  • If you're using webpack-dev-server you could set the `host` to `0.0.0.0` to make it accessible in your network as mentioned [here](https://stackoverflow.com/questions/35412137/how-to-get-access-to-webpack-dev-server-from-devices-in-local-network). Or do you serve your app with a Node.js server? – AWolf Jul 02 '19 at 20:21
  • Don't forget you need to check if your firewall actually allows the connection, regardless of what settings you may have with your react app. – ionizer Jul 02 '19 at 20:34
  • @AWolf I do serve it with a nodejs server! – Roger Peixoto Jul 02 '19 at 21:10
  • @ionizer it does allow since I was able to connect before, while using create-react-app; however I am gonna check it anyway! – Roger Peixoto Jul 02 '19 at 21:12

1 Answers1

3

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).

Felix
  • 2,531
  • 14
  • 25