chore: Development - Communicate with backend through proxy by frontend (ng serve)

http://localhost:4200/ -> Frontend (Angular app)
http://localhost:4200/api -> Backend (NestJS app)

Author: mugifly

client/.proxy.conf.json

@@ -0,0 +1,7 @@
+{
+  "/api": {
+    "target": "http://localhost:3000/",
+    "secure": false,
+    "logLevel": "debug"
+  }
+}

client/package.json

@@ -4,6 +4,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
+    "start:dev": "ng serve --proxy-config .proxy.conf.json",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "test": "ng test"

package-lock.json

@@ -2,9 +2,11 @@
   "name": "angular-nest",
   "private": true,
   "scripts": {
+    "start:dev": "concurrently --names ng,nest --kill-others \"npm run start:dev --workspace=client\" \"npm run start:dev --workspace=server\"",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "devDependencies": {
+    "concurrently": "^7.1.0",
     "prettier": "^2.3.2"
   },
   "workspaces": [

package.json

@@ -3,6 +3,7 @@ import { AppModule } from './app.module';
 
 async function bootstrap() {
   const app = await NestFactory.create(AppModule);
+  app.setGlobalPrefix('api'); // Change the URL prefix to `/api` on backend
   await app.listen(3000);
 }
 bootstrap();