How to open a local server using Node?

Question

I want to open a local server to test my project on Reactjs, but I want to see it both locally on my machine and on another computer.

I have to open some door?

Edit: Both using the same network.

Answer 1

Whenever you load a URL without specifying the port number, the browser default is 80, because 80 is the default port number for HTTP.

So if you carry http://stackoverflow.com/questions, the browser "converts" to http://stackoverflow.com:80/questions.

If you don’t want a port number to be specified to access your site, your app should be listening at the door 80, instead of 3000.

// app.js

const http = require('http');

// Crie uma instância do servidor http para manipular solicitações HTTP
let app = http.createServer((req, res) => {
    res.writeHead(200, {'Content-Type': 'text/plain'});

    res.end('Hello World!\n');
});

// Inicie o servidor na porta 80
app.listen(80, '127.0.0.1');

However, it is not recommended for Node applications to listen directly on the port 80 (although they may well).

Now if you want to access the site through another computer that is on the same network:

@Paulo Victor Just take your local ip (192.168...) and access from the other computer with the port configured on the main server. Remember to open the ports in your computer’s firewall. (If you use windows, temporarily disable it if you use linux, make an exception in iptables)

In many cases when trying to run the Nodejs at the door 80 it’s gonna make a mistake like Error: listen EACCES 127.0.0.1:80.

In the meantime, to overcome this issue you can use a proxy facing forward, as Nginx, which accepts connections with the port 80 host and then redirects the request to localhost: 3000, where your app is listening.

Answer 2

Another solution is to use the https://nextjs.org/ :)

With some commands you can serve your React project on a local static server.

It also has other cool features that you can use (Server-Side Rendering, Static Exporting, etc ...)

1. For starters:

npm install --save next react react-dom

2. Add to package.json

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

3. Create a file in the directory ./pages/index.js

function Home() {
  return <MeuComponenteReact></MeuComponenteReact>;
}

export default Home;

4. And run the project:

npm run dev

5. Then just access http://localhost:3000

Docs: https://nextjs.org/docs