Nest JS and Angular deploy in cPanel

Viewed 232

I am working on a site with stack as Nest JS (for REST APIs) and Angular (for frontend). Problem is my Angular is deployed successfully and working fine but the nest js production build is not able to communicate whenever I hit the correct URL of an API the server redirects it to the frontend. Below is my main.ts code.

import { NestFactory } from '@nestjs/core';
import { ValidationPipe } from '@nestjs/common';
import { AppModule } from './app.module';
import * as cookieParser from 'cookie-parser';
import { ConfigService } from '@nestjs/config';

async function bootstrap() {
  const app = await NestFactory.create(AppModule, { logger: ['error', 'warn']});
  app.setGlobalPrefix('test/api')
  app.use(cookieParser());
  app.useGlobalPipes(new ValidationPipe({ whitelist: true }));
  const config = app.get(ConfigService);
  console.log()
  var whitelist = ['https://xyz.in', 'https://www.xyz.in', 'http://xyz.in', 'http://www.xyz.in'];
  app.enableCors(
    {
      credentials: true,
      origin: function (origin, callback) {
        if (whitelist.indexOf(origin) !== -1) {
          console.log("allowed cors for:", origin)
          callback(null, true)
        } else {
          console.log("blocked cors for:", origin)
          callback(new Error('Not allowed by CORS'))
        }
      },
      allowedHeaders: 'X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept, Observe',
      methods: "GET, PUT, POST, PATCH, DELETE, UPDATE, OPTIONS"
    }
  );
  app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET, PUT, POST, PATCH, DELETE, UPDATE, OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Accept');
    next();
  });
  await app.listen(process.env.PORT || 3000);
}
bootstrap();

The cPanel Node version is 12.22.3 and this is my package.json file which I kept in server.

{
  "name": "xyz",
  "version": "0.0.1",
  "description": "",
  "author": "",
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "start": "node main.js"
  },
  "dependencies": {
    "@nestjs/common": "^8.4.3",
    "@nestjs/config": "^2.0.0",
    "@nestjs/core": "^8.4.3",
    "@nestjs/jwt": "^8.0.0",
    "@nestjs/platform-express": "^8.4.3",
    "@nestjs/serve-static": "^2.2.2",
    "@nestjs/typeorm": "^8.0.3",
    "@types/cookie-session": "^2.0.44",
    "class-transformer": "^0.5.1",
    "class-validator": "^0.13.2",
    "cookie-parser": "^1.4.6",
    "cookie-session": "^2.0.0",
    "mysql2": "^2.3.3",
    "passport-jwt": "^4.0.0",
    "reflect-metadata": "^0.1.13",
    "rimraf": "^3.0.2",
    "rxjs": "^7.5.5",
    "typeorm": "^0.2.45"
  },
  "jest": {
    "moduleFileExtensions": ["js","json","ts"],
    "rootDir": "src",
    "testRegex": ".*\\.spec\\.ts$",
    "transform": {
      "^.+\\.(t|j)s$": "ts-jest"
    },
    "collectCoverageFrom": [
      "**/*.(t|j)s"
    ],
    "coverageDirectory": "../coverage",
    "testEnvironment": "node"
  }
}

Please let me know what's causing this issue.

1 Answers

As you have used @nestjs/serve-static, the default render path of the Static App is * (all paths), and the module will send "index.html" files in response. If you have the API in the same route then it might not be successfully resolved because paths, specified in your controllers will fall back to the server.

You can change this behavior by setting serveRoot, renderPath combining them with other options.

Here is the list of options available: https://github.com/nestjs/serve-static/blob/master/lib/interfaces/serve-static-options.interface.ts

Related