How can I send requests between different frontend and backend ports?

Frontend and Backend Development
1

I’m utilizing Angular-CLI on port 4200 for the frontend and Express on port 8080 for the backend. Here’s how my project structure appears:

Application
 ├─ backend
 │  └─ ...Express architecture
 └─ frontend
    └─ ...Angular2 architecture

I have both applications running independently using separate terminals. For the backend, I execute node server.js on port 8080, and for the frontend, I run ng serve on port 4200.

My backend includes a route returning a simple string:

app.get('/greetings', function(req, res) {
  res.send("Greetings!");
});

What is the proper way to make a request from the Angular frontend to the Express backend to receive that string? I am aware that utilizing Angular isn’t the issue; I’m more concerned about how to establish a connection between the two applications running on distinct ports. If I attempt to access it directly from the frontend, it results in an error as the /greetings endpoint can’t be found.

2

hey Liam, have u checked whether there’s a CORS issue? It’s quite common when dealing with frontend and backend on diff ports. Maybe consider enabling CORS on your server.js to see if that helps in connecting both ends? How are others managing? Curious to know!

3

To achieve communication between your Angular frontend and Express backend running on different ports, one effective method is to make use of environment configurations in Angular, ensuring that the frontend can address the backend correctly. When the backend API is hosted on a different port, the Angular service responsible for making HTTP requests should have the full URL of the backend endpoint, for example, http://localhost:8080/greetings. Additionally, when deploying, ensure that the frontend configuration matches the deployed backend URL to avoid connectivity issues.

4

oh Liam, just curious - have you tried make the requests using angular’s HttpClient service? It’s got a pretty sweet API for makin’ HTTP requests to a server. Maybe play around with it a bit! would love to hear if it works for ya and what steps you take next :smiley:

5

You can try using proxy config to route your frontend calls to the backend server internally. Create a proxy.conf.json file in your frontend directory with relevant target URLs. Then, run your frontend app with ng serve --proxy-config proxy.conf.json. This approach often deals with CORS too.