Update Next15/React 19 Preparation/Implement T3 Stack

.vscode/launch.json

@@ -0,0 +1,34 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+      {
+        "name": "Next.js: debug server-side",
+        "cwd": "${workspaceFolder}/apps/dashboard",
+        "type": "node-terminal",
+        "request": "launch",
+        "command": "npm run dev"
+      },
+      {
+        "name": "Next.js: debug client-side",
+        "type": "msedge",
+        "request": "launch",
+        "url": "http://localhost:3000"
+      },
+      {
+        "name": "Next.js: debug full stack",
+        "cwd": "${workspaceFolder}/apps/dashboard",
+        "type": "node",
+        "request": "launch",
+        "program": "${workspaceFolder}/node_modules/.bin/next",
+        "runtimeArgs": ["--inspect"],
+        "skipFiles": ["<node_internals>/**"],
+        "serverReadyAction": {
+          "action": "debugWithEdge",
+          "killOnServerStop": true,
+          "pattern": "- Local:.+(https?://.+)",
+          "uriFormat": "%s",
+          "webRoot": "${workspaceFolder}"
+        }
+      }
+    ]
+  }

.vscode/settings.json

@@ -1,4 +1,18 @@
 {
-  "cssvar.files": ["apps/dashboard/node_modules/@mantine/core/styles.css"],
-  "cssvar.extensions": ["css", "scss", "tsx", "jsx"]
+  "[typescript]": {
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascript]": {
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[json]": {
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
 }

apps/backend/README.md

@@ -4,7 +4,7 @@ The Backend is a simple Node.js application that uses the pm2 BUS API to communi
 
 ## Prerequisites
 
-- Node.js v18
+- Node.js >= v20
 - MongoDB Cluster
 - PM2 (installed globally)
 

apps/backend/eslint.config.js

@@ -0,0 +1,4 @@
+import { config } from "@pm2.web/eslint-config/base";
+
+/** @type {import("eslint").Linter.Config} */
+export default config;

apps/backend/handlers/captureLogs.ts → apps/backend/handlers/capture-logs.ts

@@ -1,15 +1,17 @@
+import EventEmitter from "node:events";
+
 import pm2 from "pm2";
 
 import { Packet, QueuedLog } from "../types/handler.js";
-import censorMessage from "../utils/censorMessage.js";
+import censorMessage from "../utils/censor-message.js";
 
 class LogCapture {
   private queuedLogs: QueuedLog[] = [];
 
   constructor() {}
 
   capture(): void {
-    pm2.launchBus((err, bus) => {
+    pm2.launchBus((_err, bus: EventEmitter) => {
       bus.on("log:err", (packet: Packet) => {
         this.queuedLogs.push({
           id: packet.process.pm_id,

apps/backend/handlers/onChange.ts → apps/backend/handlers/on-change.ts

@@ -1,11 +1,14 @@
-// mongoose changestream
+/* eslint-disable @typescript-eslint/no-misused-promises */
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 import { processModel } from "@pm2.web/mongoose-models";
 import mongoose from "mongoose";
 import pm2 from "pm2";
 
-import processInfo from "../utils/processInfo.js";
+import processInfo from "../utils/process-info.js";
 
-const onChange = async (serverId: string) => {
+const onChange = (serverId: string) => {
   console.log(`[STREAM] Listening for changes on server ${serverId}`);
   const filter = [
     {

apps/backend/handlers/updateData.ts → apps/backend/handlers/update-data.ts

@@ -2,8 +2,8 @@ import { processModel, serverModel, statModel } from "@pm2.web/mongoose-models";
 import { ISettingModel } from "@pm2.web/typings";
 
 import { QueuedLog, UpdateDataResponse } from "../types/handler.js";
-import processInfo from "../utils/processInfo.js";
-import serverInfo from "../utils/serverInfo.js";
+import processInfo from "../utils/process-info.js";
+import serverInfo from "../utils/server-info.js";
 
 export default async function updateData(
   queuedLogs: QueuedLog[],
@@ -17,7 +17,7 @@ export default async function updateData(
   if (currentServer) {
     currentServer.name = server.name;
     currentServer.heartbeat = Date.now();
-    currentServer.save();
+    await currentServer.save();
   } else {
     // create server
     const newServer = new serverModel({

apps/backend/index.ts

@@ -1,10 +1,10 @@
 import * as dotenv from "dotenv";
 
-import LogCapture from "./handlers/captureLogs.js";
-import connectDb from "./handlers/connectDb.js";
-import onChange from "./handlers/onChange.js";
-import updateData from "./handlers/updateData.js";
-import { getCachedSettings } from "./utils/cachedSettings.js";
+import LogCapture from "./handlers/capture-logs.js";
+import connectDb from "./handlers/connect-db.js";
+import onChange from "./handlers/on-change.js";
+import updateData from "./handlers/update-data.js";
+import { getCachedSettings } from "./utils/cached-settings.js";
 
 dotenv.config();
 
@@ -13,9 +13,10 @@ const logCapture = new LogCapture();
 
 async function createInterval() {
   const { polling } = await getCachedSettings();
+  // eslint-disable-next-line @typescript-eslint/no-misused-promises
   const interval = setInterval(async () => {
-    await updateData(logCapture.clear(), await getCachedSettings());
     const settings = await getCachedSettings();
+    await updateData(logCapture.clear(), settings);
     // if polling changed clear interval and create new one
     if (settings.polling.backend !== polling.backend) {
       clearInterval(interval);
@@ -32,6 +33,6 @@ async function main() {
 }
 
 // eslint-disable-next-line unicorn/prefer-top-level-await
-(async () => {
+void (async () => {
   await main();
 })();

apps/backend/package.json

@@ -7,6 +7,7 @@
     "name": "oxdev03"
   },
   "private": true,
+  "type": "module",
   "repository": {
     "type": "git",
     "url": "https://github.com/oxdev03/pm2.web"
@@ -32,15 +33,14 @@
     "@pm2.web/typings": "*",
     "bcrypt": "^5.1.1",
     "bytes-iec": "^3.1.1",
-    "dotenv": "^16.4.5",
-    "pm2": "^5.4.2",
-    "systeminformation": "^5.23.5"
+    "dotenv": "^16.4.7",
+    "pm2": "^5.4.3",
+    "systeminformation": "^5.23.14"
   },
   "devDependencies": {
     "@pm2.web/eslint-config": "*",
     "@pm2.web/typescript-config": "*",
     "@types/bcrypt": "^5.0.2",
-    "eslint": "^8.57.1",
     "typescript": "^5.6.2"
   }
 }

apps/backend/types/handler.ts

@@ -1,6 +1,6 @@
 import { IServerModel } from "@pm2.web/typings";
 
-import { IProcessInfo } from "./info";
+import type { IProcessInfo } from "./info.ts";
 
 interface QueuedLog {
   id: number;

apps/backend/utils/processInfo.ts → apps/backend/utils/process-info.ts

@@ -2,8 +2,8 @@ import { IProcessType, PROCESS_TYPES } from "@pm2.web/typings";
 import bytes from "bytes-iec";
 import pm2 from "pm2";
 
-import { IProcessInfo } from "../types/info";
-import { Pm2ProcessDescription } from "../types/pm2";
+import type { IProcessInfo } from "../types/info.js";
+import type { Pm2ProcessDescription } from "../types/pm2.js";
 
 const getProcessInfo = async (): Promise<IProcessInfo[]> => {
   const pm2List = await new Promise<Pm2ProcessDescription[]>(

apps/backend/utils/serverInfo.ts → apps/backend/utils/server-info.ts

@@ -1,7 +1,7 @@
 /* eslint-disable unicorn/no-await-expression-member */
 import si from "systeminformation";
 
-import { IServerInfo } from "../types/info";
+import type { IServerInfo } from "../types/info.js";
 
 export default async function getServerInfo(): Promise<IServerInfo> {
   const mem = await si.mem();
@@ -12,7 +12,7 @@ export default async function getServerInfo(): Promise<IServerInfo> {
       cpu: (await si.currentLoad())?.currentLoad ?? 0,
       memory: mem?.used ?? 0,
       memoryMax: mem?.total ?? 0,
-      uptime: ((await si.time())?.uptime || 0) * 1000,
+      uptime: si.time().uptime * 1000,
     },
     heartbeatAt: Date.now(),
   };

apps/dashboard/.env.example

@@ -1,3 +1,3 @@
-NEXTAUTH_SECRET=Generate using openssl rand -base64 32 or https://generate-secret.vercel.app/32
+AUTH_SECRET=Generate using openssl rand -base64 32 or https://generate-secret.vercel.app/32
 DB_URI=mongodb+srv://connecturi
 NEXTAUTH_URL=http://localhost:3000

apps/dashboard/.env.production

@@ -1,3 +1,3 @@
-NEXTAUTH_SECRET=6ed05dbc1250ca97807099afd120dabe
+AUTH_SECRET=6ed05dbc1250ca97807099afd120dabe
 DB_URI=mongodb://127.0.0.1:20583/test
 NEXTAUTH_URL=http://localhost:3000

apps/dashboard/.env.test

@@ -1,3 +1,3 @@
-NEXTAUTH_SECRET=6ed05dbc1250ca97807099afd120dabe
+AUTH_SECRET=6ed05dbc1250ca97807099afd120dabe
 DB_URI=mongodb://127.0.0.1:20583/test
 NEXTAUTH_URL=http://localhost:3000

apps/dashboard/README.md

@@ -6,7 +6,7 @@ The Dashboard is a Next.js application built on the t3 stack, utilizing trpc for
 
 ### Prerequisites
 
-- Node v18
+- Node >= v20
 - MongoDB Cluster (required for Restart/Shutdown/Delete functionality) / MongoDB Atlas
 - Open Port 3000 or 80,443 (if you use a reverse proxy)