I built a simple express api server on port 8080. In another port(3000) i am building the client side with react which fetch data from my express api endpoint. For this i will have to run both of these applications on separate port. How can i run both of these in same port eg. 8080?
I am pretty new at this. help would be really appreciated.
Add a comment
|
1 Answer
1/ If you need them to run on the same port because of CORS issues, it may be easier (and good practice) to set up CORS headers on your API server to allow requests from origin whatever:3000.
2/ To serve both the API and the static pages and scripts on the same port, you can either modify your API server to handle requests for the static content, or use a reverse proxy. I'd recommend nginx to set that up (and to serve the static content too, if you can).
Example nginx config:
location /api/ {
proxy_pass http://localhost:8080/;
}
location / {
proxy_pass http://localhost:3000/;
}
6 Comments
ShocKwav3_
I got the cors issue covered and also static pages is not what i am looking to here. I am using react for the front end
Touffy
I meant static from a server point of view. The React app is interpreted by the client. Unless you're doing server-side rendering? anyway, replace "static pages" with "front-end" if it makes more sense for you. You'll still want to use a reverse proxy to group both applications under the same origin.
ShocKwav3_
Thanks that's actually an interesting idea replacing static ones with front-end. but so far i haven't seen any examples of it anywhere. Does it mean i set the
view engine to jsx? could you kindly provide me with any examples or articles or videos?Touffy
I think there is a misunderstanding. I only meant that the words "front-end" instead of "static" may better reflect how you think of the React app, I wasn't thinking of changing your application. What I suggest (reverse proxying) is independent of how the applications work, you just have both apps running on different ports and then a proxy in front of them to dispatch requests to the correct app.
ShocKwav3_
Oh i m sorry. I have seen something like this but did not quite understand that it said add a key
proxy which value is the api server address. But could not get it quite. |