migrate to angular 17, migrate to payloadcms v2

Author: Florin Mateescu

.gitignore

@@ -45,7 +45,8 @@ Thumbs.db
 .env
 env.json
 infrastructure.json
-.npmrc
 yarn-error*
 yarn-log*
-.pnpm-store
+.pnpm-store
+mongodata
+.nx

apps/express/.eslintrc.json

@@ -1,6 +1,7 @@
 {
   "extends": ["../../.eslintrc.json"],
   "ignorePatterns": ["!**/*"],
+  "rules": { "@typescript-eslint/no-var-requires": "off" },
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],

apps/express/payload.config.ts

@@ -9,15 +9,26 @@ import {
   ReturnToWebComponent,
   TagsCollection,
   UsersCollection,
-} from '@binarystarter-angular/backend-only/payloadcms';
-import dotenv from 'dotenv';
+} from 'apps/express/src/payloadcms/src';
+import { webpackBundler } from '@payloadcms/bundler-webpack';
+import { slateEditor } from '@payloadcms/richtext-slate';
+import { mongooseAdapter } from '@payloadcms/db-mongodb';
 
-dotenv.config({
+require('dotenv').config({
   path: '../../.env',
 });
 
 export default buildConfig({
   serverURL: process.env.api_url,
+  db: mongooseAdapter({
+    url: process.env.mongo_url,
+    connectOptions: {
+      user: process.env.mongo_username,
+      pass: process.env.mongo_password,
+      dbName: process.env.mongo_db,
+    },
+  }),
+  editor: slateEditor({}),
   collections: [
     UsersCollection,
     CategoriesCollection,
@@ -48,38 +59,43 @@ export default buildConfig({
       logout: {
         Button: RedirectToFrontendLogoutButton,
       },
-      routes: [
-        {
+      views: {
+        'redirect-to-frontend-login': {
           Component: RedirectToFrontendLogin,
           path: '/login',
         },
-      ],
+      },
     },
+    bundler: webpackBundler(),
     webpack: (config) => ({
       ...config,
       resolve: {
         ...config.resolve,
         alias: {
           ...config?.resolve?.alias,
-          '@binarystarter-angular/backend-only/crypto': [
-            path.resolve('../../libs/backend-only/crypto/src'),
-          ],
-          '@binarystarter-angular/backend-only/payloadcms': [
-            path.resolve('../../libs/backend-only/payloadcms/src'),
-          ],
-          '@binarystarter-angular/shared-types': [
-            path.resolve('../../libs/shared-types/src'),
-          ],
-          '@binarystarter-angular/backend-only/utils': [
-            path.resolve('../../libs/backend-only/utils/src'),
-          ],
+          // '@binarystarter-angular/backend-only/crypto': [
+          //   path.resolve('../../libs/backend-only/crypto/src'),
+          // ],
+          // '@binarystarter-angular/backend-only/payloadcms': [
+          //   path.resolve('../../libs/backend-only/payloadcms/src'),
+          // ],
+          // '@binarystarter-angular/shared-types': [
+          //   path.resolve('../../libs/shared-types/src'),
+          // ],
+          // '@binarystarter-angular/shared-constants': [
+          //   path.resolve('../../libs/shared-constants/src'),
+          // ],
+          // '@binarystarter-angular/backend-only/utils': [
+          //   path.resolve('../../libs/backend-only/utils/src'),
+          // ],
         },
       },
     }),
   },
   cors: [process.env.web_url, process.env.api_url],
   csrf: [process.env.web_url],
   typescript: {
+    declare: false,
     outputFile: path.resolve(
       '../',
       '../',

apps/express/project.json

@@ -50,7 +50,36 @@
           "codeCoverage": true
         }
       }
+    },
+    "payload": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "npx payload",
+        "cwd": "apps/express"
+      }
+    },
+    "payload:migrate": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "npx payload migrate",
+        "cwd": "apps/express"
+      }
+    },
+    "payload:build": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "npx payload build",
+        "cwd": "apps/express"
+      }
+    },
+    "payload:types": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "npx payload generate:types && npx payload generate:graphQLSchema",
+        "cwd": "apps/express"
+      }
     }
   },
+
   "tags": []
 }

apps/express/src/auth/register.ts

@@ -1,4 +1,4 @@
-import { UserRoles } from '@binarystarter-angular/backend-only/payloadcms';
+import { UserRoles } from 'apps/express/src/payloadcms/src';
 import { Request, Response } from 'express';
 import payload from 'payload';
 import { IUser } from '@binarystarter-angular/shared-types';

apps/express/src/main.ts

@@ -2,7 +2,6 @@
  * This is not a production server yet!
  * This is only a minimal backend to get started.
  */
-import dotenv from 'dotenv';
 import express from 'express';
 import payload from 'payload';
 import cors from 'cors';
@@ -12,7 +11,7 @@ import { register, registerPath, verifyAccount, verifyPath } from './auth';
 
 const start = async () => {
   const app = express();
-  dotenv.config({
+  require('dotenv').config({
     path: '../../../.env',
   });
 
@@ -44,12 +43,6 @@ const start = async () => {
 
     await payload.init({
       secret: process.env.payload_secret,
-      mongoURL: process.env.mongo_url,
-      mongoOptions: {
-        user: process.env.mongo_username,
-        pass: process.env.mongo_password,
-        dbName: process.env.mongo_db,
-      },
       express: app,
       email: {
         fromName: 'binarystarter-angular',

apps/express/src/utils/tsconfig.lib.json

@@ -0,0 +1,16 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "outDir": "../../../dist/out-tsc",
+    "declaration": true,
+    "resolveJsonModule": true,
+    "types": ["node"]
+  },
+  "exclude": [
+    "../../../../libs/backend-only/utils/jest.config.ts",
+    "../../../../libs/backend-only/utils/src/**/*.spec.ts",
+    "../../../../libs/backend-only/utils/src/**/*.test.ts"
+  ],
+  "include": ["../../../../libs/backend-only/utils/src/**/*.ts"]
+}

apps/web/project.json

@@ -7,12 +7,12 @@
   "tags": [],
   "targets": {
     "build": {
-      "executor": "@angular-devkit/build-angular:browser-esbuild",
+      "executor": "@angular-devkit/build-angular:application",
       "outputs": ["{options.outputPath}"],
       "options": {
-        "outputPath": "dist/apps/web/browser/browser",
+        "outputPath": "dist/apps/web",
         "index": "apps/web/src/index.html",
-        "main": "apps/web/src/main.ts",
+        "browser": "apps/web/src/main.ts",
         "polyfills": ["zone.js"],
         "tsConfig": "apps/web/tsconfig.app.json",
         "assets": ["apps/web/src/favicon.ico", "apps/web/src/assets"],
@@ -21,7 +21,12 @@
           "apps/web/src/styles/variables.css",
           "apps/web/src/styles.css"
         ],
-        "scripts": []
+        "scripts": [],
+        "server": "apps/web/src/main.server.ts",
+        "prerender": true,
+        "ssr": {
+          "entry": "apps/web/server.ts"
+        }
       },
       "configurations": {
         "production": {
@@ -40,12 +45,9 @@
           "outputHashing": "all"
         },
         "development": {
-          "buildOptimizer": false,
           "optimization": false,
-          "vendorChunk": true,
           "extractLicenses": false,
-          "sourceMap": true,
-          "namedChunks": true
+          "sourceMap": true
         }
       },
       "defaultConfiguration": "production"
@@ -54,22 +56,22 @@
       "executor": "@angular-devkit/build-angular:dev-server",
       "configurations": {
         "production": {
-          "browserTarget": "web:build:production"
+          "buildTarget": "web:build:production"
         },
         "development": {
-          "browserTarget": "web:build:development"
+          "buildTarget": "web:build:development"
         }
       },
       "defaultConfiguration": "development"
     },
     "extract-i18n": {
       "executor": "@angular-devkit/build-angular:extract-i18n",
       "options": {
-        "browserTarget": "web:build"
+        "buildTarget": "web:build"
       }
     },
     "lint": {
-      "executor": "@nx/linter:eslint",
+      "executor": "@nx/eslint:lint",
       "outputs": ["{options.outputFile}"],
       "options": {
         "lintFilePatterns": ["apps/web/**/*.ts", "apps/web/**/*.html"]
@@ -79,68 +81,8 @@
       "executor": "@nx/jest:jest",
       "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
       "options": {
-        "jestConfig": "apps/web/jest.config.ts",
-        "passWithNoTests": true
-      },
-      "configurations": {
-        "ci": {
-          "ci": true,
-          "codeCoverage": true
-        }
+        "jestConfig": "apps/web/jest.config.ts"
       }
-    },
-    "server": {
-      "dependsOn": ["build"],
-      "executor": "@angular-devkit/build-angular:server",
-      "options": {
-        "outputPath": "dist/apps/web/browser/server",
-        "main": "apps/web/server.ts",
-        "tsConfig": "apps/web/tsconfig.server.json"
-      },
-      "configurations": {
-        "production": {
-          "outputHashing": "media"
-        },
-        "development": {
-          "buildOptimizer": false,
-          "optimization": false,
-          "sourceMap": true,
-          "extractLicenses": false,
-          "vendorChunk": true
-        }
-      },
-      "defaultConfiguration": "production"
-    },
-    "serve-ssr": {
-      "executor": "@nguniversal/builders:ssr-dev-server",
-      "configurations": {
-        "development": {
-          "browserTarget": "web:build:development",
-          "serverTarget": "web:server:development"
-        },
-        "production": {
-          "browserTarget": "web:build:production",
-          "serverTarget": "web:server:production"
-        }
-      },
-      "defaultConfiguration": "development"
-    },
-    "prerender": {
-      "executor": "@nguniversal/builders:prerender",
-      "options": {
-        "routes": ["/"]
-      },
-      "configurations": {
-        "development": {
-          "browserTarget": "web:build:development",
-          "serverTarget": "web:server:development"
-        },
-        "production": {
-          "browserTarget": "web:build:production",
-          "serverTarget": "web:server:production"
-        }
-      },
-      "defaultConfiguration": "production"
     }
   }
 }