How to merge togheter Angular frontend with NestJS backend

I’m following a tutorial on Sololearn on how to create an application with NestJS and Angular and it says that i need to run Angular server and NestJS server separately, is there a way to run them in the same server? I used to code in PHP and there you have different routes and you sand back the HTML pages based on them but now I have a single page that changes based on the url. So, after all of this the question still the same: Is there a way to run Angular and NestJS as the same server?

>Solution :

short answer: yes.
To do that:
frontend (angular):

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

backend (Nestjs):

• install npm install --save @nestjs/serve-static to server static files

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

• import the ServerStaticModule to the Appmodule

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

then you can access to your website from http://localhost:port

for more details :

Server Static nestjs doc

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