1

I created an hapi.js backend app on heroku. After a bunch of problems all works well. Now, I want to create a frontend app with react.js, but I have a problem:

const server = Hapi.server({
        port: process.env.PORT,
        host: '0.0.0.0'
    });

To define the port of the backend I've the enviroment variable, so I don't really know its value. So how can the react app knows the correct port of the server where to connect?

Stoic Lion
  • 470
  • 2
  • 14
  • You don't have to provide a port in react app to connect to backend. Just provide the app url of heroku. Heroku expose your service automatically at port 80 and 443 and map the proxy behind itself. – fazlu Jul 05 '20 at 11:43
  • your backend app url must be something like https://your-app-name.herokuapp.com – fazlu Jul 05 '20 at 11:44

2 Answers2

0

You actually don't need to know the port number. You can use the default port which is 80 for HTTP and 443 for HTTPS.

According to the heroku docs:

The contract with Heroku is for the process to bind to a port to serve requests. Heroku’s routers are then responsible for directing HTTP requests to the process on the right port.

Which means heroku listens to port 80 for HTTP and port 443 for HTTPS by itself.

References:

  1. https://devcenter.heroku.com/articles/runtime-principles#web-servers
  2. https://stackoverflow.com/a/51572239/5045878
  3. https://stackoverflow.com/a/54200996/5045878
logdev
  • 292
  • 6
  • 22
0

I would say you don't need to know the port because all your requests will be done to https://hapi.yourdomain.com, and your front will be served to https://yourdomain.com

Edit:

In heroku this is how you define the port:

const port = process.env.PORT || 8000

Heroku will provide the environment variable you need (that changes every time you deploy your app)

Then your react app don't need to connect to a specific port, just access your endpoints like this :

https://back.domain.com/your/endpoint
jinwar
  • 366
  • 2
  • 8
  • not really: my front is on https://front.domain.com while my back is on https://back.domain.com – Stoic Lion Jul 06 '20 at 14:12
  • I edited the answer, does it help ? Your react app doesn't need to know the port, because port 80 is openned by default (and mapped to whatever port is actually listening in process.env.PORT) – jinwar Jul 06 '20 at 21:09