How to get backend server dynamically in Angular if frontend and backend are on the same server

Question

I have a web application deployed on a local server

1. The problem is when I change The IP of the server I have to rebuild the angular application to assign the new IP.
   I solved it by making a JSON file and reading it to get the server IP but I still have to change the IP manually inside the JSON config file every time I change the server IP

2. When I publish the server from my local server to the internet I have the same issue because I have to use the public IP Of the Backend Server instead of the local IP

Can anyone help me to solve it?

Answer 1

You can merge the frontend into the server:

first change the url of the api in your angular project to /api build your angular project
ng build // or ng build --prod // for poduction

for the backend (Nestjs): install npm install --save @nestjs/serve-static to serve static files

Finally move the angular build output dist folder to the nestjs project with a different name like frontend

import the ServerStaticModule to the Appmodule

imports: [
ServeStaticModule.forRoot({
  rootPath: join(__dirname, '..', 'frontend'),
}),
], 

then you can access to your application from the serve IP

for more details :

Server Static nestjs doc

Use nest as your server-side application with an Angular frontend