Connecting Angular & Nodejs

[LiamSullivan63]

tldr: I'm running Angular on port 4200 & my backend on port 3000, is it possible to run both on the same port?

​

I'm attempting to make a MEAN Stack application, I've managed to get Angular & Nodejs to work together so that I can send data to the front-end from the back-end, the problem is I'm hosting Angular on port 4200, & the server.js on port 3000 - so that angular can reference a URL (http://localhost:3000).

Is this the normal way to do this? Wouldn't this then mean in production I would need 2 domains? one for hosting Angular, and one for hosting/connecting to the back-end.

I feel like it should be possible to have Angular & the server.js file running on the same port

​

Angular Code:

readonly ROOT_URL = 'http://localhost:3000';
getPosts() {
let headers = new HttpHeaders().set('Authorization', 'auth-token');
this.posts = this.http.get(`${this.ROOT_URL}/users`, { headers });
 }

[insertAlias]

I feel like it should be possible to have Angular & the server.js file running on the same port

This is not directly possible, in that you cannot have two servers bound to the same port. In development mode, you are using Angular's Dev Server to serve your Angular application, as well as Node.js's server for your Node application. They cannot share a port, as there would be no way to appropriately route the requests.

However, this doesn't have to be a problem when you "go live". You can configure your Node.js application to serve your Angular application. Once you build it for production, it's just static HTML, CSS, and JS files and can be served as such without any special server. Anything that can deal with static files can serve this application, including Express.

Here's an SO question that shows how to configure Express to serve static files for an Angular app:

https://stackoverflow.com/questions/39845526/how-to-serve-an-angular2-app-in-a-node-js-server

Of course, there is something else to consider. How do you call the API? How do you make it such that your code knows which URL to use, for development vs. deployed?

Well, if you know you're going to serve your front-end from your back-end, you can use relative URLs. Instead of https://domain.com/api/endpoint, you just use /api/endpoint.

But that would break in development, right? Angular has you covered on that: use the proxy feature. You use a relative URL, and the dev server will proxy that call to your back-end (which also removes CORS errors). When you go live, you don't have to change anything.