I have a backed app written in typescript which has an express server running on port 5001. I have a front end app written using react. Both these apps are hosted on same machine.
The react app needs to fetch data from the backed app using the port 5001 being served by express server.
The machine has an IP of 10.250.1.4 for example. So from the host machine, I could use localhost:5001 or 10.250.1.4:5001 in the axios requests and both will work.
The react development server in this case is running at Port 3000 for the front end app.
When another client machine, running on 10.250.1.6 for example, tries to access 10.250.1.4:3000 from its browser, the react app is sent to the client. In this case the axios requests from the client to backed server will only run if the axios is looking at the 10.250.1.4 rather than localhost.
I wish to write the axios in front end app in a way that I don't have to specify the ip of the express server. Both the front end and backed app will always be hosted at same machine.
Is there a way?
Thanks.
Related
I have a full-stack application with Node and express for the back-end (with Postgres in a AWS RDS created already) and Angular for the front-end.
Now, when running locally in development I have the back-end listening to port 3000 and conected a Pool client with a Postgres DB in AWS RDS. Separately, I have my front-end listenting to port 4200.
When running the server and the angular in these two different ports and opening my browser everything works fine.
Now my questions are about how to deploy this same structure in AWS all together.
Shall I deploy in AWS the back-end and front-end listening to these two different ports (as deployment) or they should listen to the same one and add a proxy server like Ngnix like I have been reading?
In the last case, how?
If you have a simple setup, and you always deploy frontend and backend at the same time, one option would be: just let you express backend also serve your static Angular files.
This avoids any unnecessary complexity and components.
So, you have both frontend and backend exposed at the same port. Maybe all your backend APIs are listening under the /api route. Everything else is served statically, with a fallback to index.html for client-side routing.
By having frontend and backend on the same origin (host:port), you also avoid any CORS issues.
I have a hypothetical question about react and node. Let's say that I have a server where I want to host a react app and its backend application. That server has only port 3000 open to the public (anything open on port 3000 will be available through the URL). Could I run node.js (on let's say port 5000) and run react on port 3000, and make calls to the backend through the localhost:5000?
I'm not sure about this because the react code is hosted on the browser, so would it have access to the backend on that server?
On my main PC I have a react app running http://localhost:3000, aswell as a nodejs and express API http://localhost:3001, so my react app requests the data from the API that is running on the same machine and it works fine, it loads up the web app and succesfully makes the http requests. I now want to visit the react app from a different computer, so when I vist my react app, using my main computers internal IP, the react app loads up perfectly fine, but the API request fails. In console I get GET http://localhost:3001/today net::ERR_CONNECTION_REFUSED, when making my axios request I dont refer to the API as http://localhost:3001 I use the public IP of my computer instead of localhost, I also have went into my router and forwarded ports 3000 and 3001. So it looks to me like even when I'm on a different computer, the react app still thinks it is on localhost. How can I fix this ?
When I port forwarded ports 3000 and 3001, I forgot to change the protocols from tcp to tcp/udp. It works fine when I use both TCP and UDP to port forward
I think you are going CORS (cross-origin resource sharing ) issue. I mean you have this error because your server (NodeJS) an your App(React) are running on the same computer. So you need to enable CORS :
open your package.json file and add this property :
"proxy":"http://localhost:3001"
2)In your React App instead of making your requests to fetch("http://localhost:3001/users") you'll send your requests like this fetch("/users")
Click here to read more
I generated a react application using create-react-app, and I run it on port 3000 (localhost:3000) when I develop.
The React App calls APIs exposed by a Node.JS server running on port 8080 (localhost:8080). The Node.JS server exposes login APIs, and it sets some cookies.
If I build the React App, and I deploy it on the public folder of the Node.JS server everything works fine.
When I run the React App with:
npm start
I can't use the cookies coming from Node.JS server after performing the login since they're coming from a different url (different port).
Did someone experience this issue?
I have been developing a standalone app for an event exhibition. This comprised of a backbonejs frontend with a node express server backend for saving data. At the event this will run over localhost fine but how can I make the express server be accessed via normal http. I.e the backend responds when app is added to my webserver for client review
Any ideas.
G
Servers available at localhost should respond to http requests if your firewall is open. If you are behind a router, you need to configure it to forward requests to your machine. NAT is the simplest (and least safe) way.