Home > Software design >  How to merge togheter Angular frontend with NestJS backend
How to merge togheter Angular frontend with NestJS backend

Time:12-09

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?

CodePudding user response:

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

CodePudding user response:

You can run them on the same "physical" server. But they need to get started seperatley (for dev purpose) ng serve for angular and nest start for the nest backend.

There is absolutely no need to do them on different "physical" servers :).

  • Related