Build eshop template with MEAN stack and typescript - dev and prod build

When env variables are set, we can start the project, for that we need to take a look to package.json for the scripts

 "scripts": {
    "prebuild": "rimraf dist",
    "build": "NODE_ENV=production nest build --config ./server/nest-cli.json --path ./server/tsconfig.build.json",
    "format": "prettier --write \"server/**/*.ts\"",
    "start": "NODE_ENV=production nest start config ./server/nest-cli.json --path ./server/tsconfig.json",
    "start:dev": "NODE_ENV=development nest start --watch config ./server/nest-cli.json --path ./server/tsconfig.json",
    "start:debug": "nest start --debug --watch",
    "start:prod": "node server/dist/main",
    "lint": "eslint \"{server,apps}/**/*.ts\" --fix",
    "ng": "ng ",
    "start:client": "ng serve",
    "build:client": "ng build",
    "test:client": "ng test",
    "lint:client": "ng lint",
    "dev:ssr": "ng run eshop:serve-ssr",
    "serve:ssr": "node dist/eshop/server/main.js",
    "prebuild:ssr": "ngcc",
    "build:ssr": "NODE_ENV=production ng build --prod && ng run eshop:server:production",
    "prerender": "ng run eshop:prerender",
    "release": "standard-version"
}

There is one package.json for both frontend and backend. Install everything with npm i

First we can start backend server - npm run start , this one will run on the SERVER_PORT which we set in .env. We are using Nest cli for basic settings and tsconfig. When there is not problem with BE (most important is to connect with MongoDB database, which has to be set in .env), the api will run from this SERVER_PORT, e.g. http://localhost:4000

For the frontend part we will use npm run start:client, we are using here settings from angular.json with Angular CLI, which will start on port 3000 (that can be changed in angular.json - but change then also ORIGIN in .env to allow CORS).

App now should run on the http://localhost:3000 in the dev version.

So we can start Angular app and Nest.js but for the production we want to use server-rendering and we will use one port for FE and BE.

We are using library nestjs/ng-universal, which allow us to set up server-rendering for Angular Universal in Nest.js. There is also easier way - to just use ServeStaticModule in Nest.js appModule to serve FE builded FE, but to get the best of it we are using server-rendering in Angular way.

There is npm run dev:ssr to watch changes in server-rendering, but since the project is bigger, it doesn't work well, so for the dev I recommend to serve FE and BE separately

So we will run npm run build and if build is successful, we have in dist folder production version of app. To start it, we will use npm run serve:ssr and when we use port 4000, there should be served both FE and BE on this port. Project is in dist/eshop - the name - "eshop" is also set in angular.json