React front end connected to node.js backend with only 1 port open - node.js

I am having a pretty big problem at work and would like some help. Basically I have a react front end and a node.js backend to connect to the database. The problem is that the company I am buildign this for will only open 1 port (443) for the webpage. And since react is generating on the clients side I cant use a localhost url to call the backend to get info from the database. They said they might open another port if we make it HTTPS. So I tried using express and https with a self assigned ssl certificate, which worked on my side. On the clients end the webpage's http call doesnt make it to the express server.
I have also started to build this with webpack and express, so the server will render the react code. This should work but I am suspecting a problem with webpack (have not had a good experience with it in the past).... Anyways, is there anything one of yall can think about that will allow my client rendered react app to connect to the database? How do other companies handle something like this? Really any help would be great. I have been under so much stress from this.
If you think you have any information that could help point me in the right direction, I would greatly appreciate it!

I dont think you need to open any other port to access the database, since the code that will access it will run server-side. I mean, yes the database port will need to be open locally, but it does not need to be open to the Internet.
In other words, you will need to have your react code access an API on your server (https end-point on port 443) in order to retrieve data. Your solution with Express should work. I guess you have a Node server listening on port 443, and that you are using Express as framework server-side. It is this server side code what should access the database and provide the data to https requests made by your React client-side code. Your browser might not like your self-signed certificate, and you will probably need to tell it to trust the certificate.
UPDATE:
If you want to block all ports from the server except port 443, you can use a firewall to achieve that, and make the ports look inactive, except for request coming from localhost, the server itself. If that's not an option, you could also choose to connect to the database using a socket path instead of a TCP port.

Related

How to retrieve Nodejs/Express web server port number from a loaded-in-browser Javascript file

My situation is the following:
I have a Node/Express server.js file which gets run by Node.js. This backend is for my website, which I deploy to Heroku. The webserver serves two endpoints, from either const PORT = process.env.PORT || 8000:
'/', or root (this responds by sending file index.html)
'/transcription'
When a request is made to /transcription, an Axios post request is made to a third-party API to get a temporary token. This token is passed into the response from /transcription as res.json(data). No problems so far.
The trickiness enters here. I have JavaScript file, asr.js, which is loaded when I visit page asr.html (different from index.html). In asr.js, I fetch http://localhost:8000/transcription. Now, this works locally for me; I get my temporary token and continue with my transcription. However, when I push this to an environment like Heroku, where I don't know what the port number is going to be, I cannot successfully make that fetch request to neither http://localhost:8000/transcription nor http://localhost:${PORT}/transcription because process is not defined in my asr.js file; it's not being executed by node.
So, the question I have is how can I determine what my Node/Express server port is when I deploy my app to Heroku such that I can use it in asr.js when I visit asr.html?
Or maybe that's not the right question to be asking? Community, please help!
Here is a snapshot of my folder hierarchy, for more context. Let me know if more information is required or if my initial explanation is not enough.
To be clear, I use middleware to statically serve the public folder.
Unless I'm missing something here, why would you need the port in production?
Very rarely is node run as the webserver, typically you will have NGINX proxy the request to the backend server so that port is only valid to the NGINX server to proxy those request back to node, otherwise your app would not work with a TLD without the port.
Long story short, your frontend JS should not need the port number and be able to just use the TLD running on port 80 / 443

Having issues running Nodejs and React side with IIS running HTTPS

I am having issues with running NodeJS as a backend for a React application (website) when utilizing HTTPS. The NodeJS runs on port 3001 waiting for requests. When React is running on IIS on HTTP and queries NodeJS (http://localhost:3001) everything is fine. However if I deploy SSL on the React application then the communication between React and NodeJS fails. I believe it is the security restriction of HTTPS and HTTP interacting.
The question then is, how do I run node on port 3001 but on HTTPS to deal with HTTPS origin requests?
I have looked at Reverse Proxy (https://dev.to/petereysermans/hosting-a-node-js-application-on-windows-with-iis-as-reverse-proxy-397b), looked at IISnode which doesn't seem to be supported anymore and read up on running NodeJS on HTTPS (which doesn't seem to be a viable solution).
Looking for any guidance and direction.
Much appreciated.
Ok, typical that 10 minutes after you ask, you figure it out.
This is how I resolved the issue and someone more knowledgeable might correct me.
On IIS you have your HTTPS React website
Create a second Website on IIS (that also has SSL installed so can be accessed through Https).
On this second website you install the reverse proxy solution (https://dev.to/petereysermans/hosting-a-node-js-application-on-windows-with-iis-as-reverse-proxy-397b) and route the requests to port 3001 on NodeJS application.
Effectively this means that the React application running on Https can now call NodeJS on Https (e.g. https://mynode.mysite.com) and the reverse proxy forwards the request to the NodeJS application on port 3001 (or the port that you are running NodeJs).
If I am wrong (this worked for me) or have gone the long route, please feel free to correct.
Thank you.

Is it safe to open the Nodejs server port to the world?

A React app and Nodejs server which is used to retrieve and manipulate the data are running on the same server. When accessing the app locally it workes fine, but when accessed externally the app is visible but without data. The reason behind this is that the port on which the application is running is open but the port on which the Nodejs server is running is not.
My question is this, what is the best way to solve this issue? The simplest solution would be to open up the other port, but I am assuming that is not the most secure solution.
Any suggestions would be appreciated.
Open to port for the outside world and implement a token-based request verification system.
You can implement CSRF token verification. It always checks that request comes from a trusted source only.
Do this using a reverse proxy server, like nginx, to listen to the open https port. The reverse proxy will handle the https encryption, rather than burdening your nodejs code with it. nginx is multithreaded and can do https efficiently.
The reverse proxy passes along requests to your http://localhost:3000 nodejs. In my experience, this arrangement works very well at large scale.
Explaining how to do this is too much for a stack overflow answer. But you'll find plenty of online advice.

How can I access Heroku NodeJS server externally?

I have a websocket server running via NodeJS, and have deployed it to Heroku. There are two separate web applications I wrote that communicate with the websocket server. On localhost, I simply run the node server, load up the applications in a web browser, and all works fine. In Heroku, however, I can't seem to get anything to connect to the url ws://url:port - it just returns an err request timeout.
I don't want to deploy my html using Express per their example. Maybe I could, but this is a test case where some web applications get to be pretty huge.
Is my issue that I have to use wss instead of ws?
Or backing up further, is this a good use case for Heroku or is there something else I should use?
The easiest description of what I'm trying to do: Two websites hosted somewhere that isn't Heroku both communicating with a NodeJS-based websocket server hosted on Heroku.
Thanks for your help!
Alright, I feel pretty dumb because this is about as easy an answer as it gets. For anyone else trying to do the same thing, you don't need to specify the port (Heroku port is for internal use only, and the heroku url you are provided is on port 80). Simply connect using wss (e.g. wss://your-app.herokuapp.com)

How to make outgoing localhost traffic use Windows proxy?

I am using this app https://github.com/nice-table/bitmex-scaled-orders to connect to testnet.bitmex.com through the api to place orders. I am running the app on Windows in node.js. It looks like the app starts a websocket on port 1337 and a bitmex proxy on port 8000. The app uses a GUI through the browser that you connect to through localhost:3006.
I have a proxy server set in Windows settings. I am unable to access localhost:3006 without the bypass proxy checkbox checked which makes sense. However, when I check the box, it seems as though outgoing traffic to bitmex is also bypassing my proxy. I am able to know because when I put wrong proxy info, the app still connects. Shouldn't this checkbox only apply to local traffic? Is there any way I can make this app use my proxy?
This can be used for testing, make sure the testnet is selected in the app
key ID: 9I0Ez-z-a8wAgM-IB03OMLg0
key secret: OzanemIvHP368THbeGjT6by5bABmYWIXQvAXILX6oumQpipY
I am illiterate when it comes to this stuff please let me know if theres more info I can provide. I tried contacting the author on github but no answer.

Resources