Lib upgrade oct24

README.md

@@ -2,15 +2,16 @@
 
 **The ideal repository for full-stack web development with ReactJS, NextJS as the frontend and ExpressJS, NestJS-fastify server as the backend**
 
+You can clone the full repo and keep only the packages you need in your monorepo, or just retain the source code of a single app, say [express-server](./apps/express-server/) to get started. I'll try my level best to keep all the dependencies in these repos upto date, while also adhering to the industry best practices.  
+
 ## Features
 
 - [Turborepo](https://turborepo.org/)
 - [React](https://reactjs.org/), [NestJs](https://nestjs.com/), [ExpressJS](https://expressjs.com/), [NestJS](https://nestjs.com/)
 - 100% [Typescript](https://www.typescriptlang.org/)
-- [Prettier](https://prettier.io/) and Eslint setup alongside `pre-commit` hook.
-- [Mui](https://mui.com/) and [Redux](https://redux.js.org/) preconfigured.
+- [Prettier](https://prettier.io/) and [Eslint](https://eslint.org/) setup alongside `pre-commit` hook.
+- [Mui v6](https://mui.com/) alongside theme change preconfigured.
 - [Dockerize](https://docs.docker.com/) images
-- Easy to customise
 - Github Actions to build apps and publish their docker images
 
 ## Get Started

apps/express-server/README.md

@@ -4,16 +4,19 @@ Express JS Application with Typescript
 
 ## Running the app
 
+In dev mode,
 ```bash
-# development
-$ yarn dev
+yarn dev
+```
 
-# build & run production code
-$ yarn prod
+Build the app and run production code
+```bash
+yarn prod
 ```
 
 ### Features
 
 - Express app configured
-- Preconfigured logger - [winston](https://www.npmjs.com/package/winston) for logging request and errors 
-- Producion Dockerfile
+- Handled loading of environment variables
+- Styled logging using [chalk](https://www.npmjs.com/package/chalk)
+- Preconfigured logger middleware - [winston](https://www.npmjs.com/package/winston) for logging request details and errors 

apps/express-server/nodemon.json

@@ -0,0 +1,5 @@
+{
+  "watch": ["src/"],
+  "ext": "js,ts,json,yml,yaml",
+  "ignore": ["*.test.{js,ts}", "node_modules/"]
+}

apps/express-server/package.json

@@ -4,27 +4,27 @@
   "author": "Nishant Kohli",
   "private": true,
   "scripts": {
-    "dev": "nodemon src/index.ts",
-    "build": "rimraf dist && tsc",
-    "start": "ts-node dist/index.js",
+    "dev": "nodemon --exec 'ts-node -r tsconfig-paths/register src/index.ts'",
+    "build": "rimraf dist && tsc && tsc-alias",
+    "start": "node dist/index.js",
     "prod": "yarn build && yarn start",
     "lint": "eslint --fix ."
   },
   "dependencies": {
     "cors": "^2.8.5",
     "dotenv": "^16.4.5",
-    "express": "^4.19.2",
-    "winston": "3.13.0"
+    "express": "^4.21.0",
+    "winston": "3.15.0"
   },
   "devDependencies": {
+    "@nish1896/eslint-config": "^2.0.5",
     "@types/cors": "^2.8.17",
-    "@types/express": "^4.17.21",
-    "@types/node": "^20.14.9",
+    "@types/node": "^22.7.4",
     "eslint": "^8.57.0",
-    "nodemon": "^3.1.4",
-    "rimraf": "^5.0.7",
-    "ts-node": "^10.9.2",
+    "nodemon": "^3.1.7",
+    "rimraf": "^6.0.1",
+    "tsc-alias": "^1.8.10",
     "tsconfig-paths": "^4.2.0",
-    "typescript": "^5.3.3"
+    "typescript": "^5.6.2"
   }
 }

apps/express-server/src/app-constants/env_vars.ts

@@ -7,5 +7,5 @@ const env = process.env;
 
 export const ENV_VARS = Object.freeze({
   env: env.NODE_ENV ?? 'development',
-  port: env.PORT ?? 5000
+  port: env.PORT ?? 8000
 });

apps/express-server/src/app.ts

@@ -1,8 +1,8 @@
 import express, { Express, Request, Response } from 'express';
 import cors from 'cors';
-import { ENV_VARS } from 'app-constants';
-import { requestLogger } from 'middleware';
-import * as Routes from 'routes';
+import { ENV_VARS } from '@/app-constants';
+import { requestLogger } from '@/middleware';
+import * as Routes from '@/routes';
 
 const app: Express = express();
 

apps/express-server/src/index.ts

@@ -1,8 +1,24 @@
+/**
+ * In dev env ts-node will be using tsconfig-paths to
+ * resolve alias imports.
+ *
+ * However when generating the build and running it,
+ * tsc-alias will replace the alias imports with the
+ * actual import path relative to each file.
+ *
+ * Sadly "node -r tsconfig-paths/register dist/index.js" is
+ * not resolving the paths when running the build.
+ *
+ * "node -r ts-node/register/transpile-only -r tsconfig-paths/register dist/main.js"
+ * works but not recommended to be used in production because
+ * of the lack of type safety.
+ */
+
 import 'dotenv/config';
 import os from 'os';
 import { createServer } from 'node:http';
-import { ENV_VARS } from 'app-constants';
-import { winstonLogger } from 'middleware';
+import { ENV_VARS } from '@/app-constants';
+import { winstonLogger } from '@/middleware';
 import app from './app';
 
 const hostName = os.hostname();

apps/express-server/src/middleware/winston-logger.ts

@@ -1,5 +1,5 @@
 import { createLogger, addColors, format, transports } from 'winston';
-import { ENV_VARS } from 'app-constants';
+import { ENV_VARS } from '@/app-constants';
 
 const { combine, timestamp, printf } = format;
 

apps/express-server/tsconfig.json

@@ -1,17 +1,22 @@
 {
-  "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "baseUrl": "src",
-    "rootDir": "src",
-    "module": "commonjs",
-    "resolveJsonModule": false,
-    "outDir": "dist",
+    "baseUrl": "./",
+    "outDir": "dist", 
+    "rootDir": "src", 
+    "paths": {
+      "@/*": ["src/*"]
+    },
     "esModuleInterop": true,
-    "incremental": false
+    "moduleResolution": "node"
   },
-  "ts-node": {
-    "require": ["tsconfig-paths/register"]
-  },
-  "include": ["src"],
-  "exclude": ["node_modules", "**/__tests__/*", "dist"]
+  "include": ["src/**/*.ts"],
+  "exclude": ["node_modules", "dist"],
+	"tsc-alias": {
+    "verbose": false,
+    "resolveFullPaths": true,
+    "fileExtensions": {
+      "inputGlob": "{js,mjs,ts}",
+      "outputCheck": ["js", "ts", "json", "jsx", "mjs"]
+    }
+	}
 }

apps/nestjs-server/README.md

@@ -2,6 +2,11 @@
   <a href="http://nestjs.com/" target="blank"><img src="https://nestjs.com/img/logo-small.svg" width="200" alt="Nest Logo" /></a>
 </p>
 
+
+### Features
+- Routes directory
+- Code snippet to switch to `platform-express` or `platform-fastify` (remove the unused platform from package.json)
+
 ## Running the app
 
 ```bash
@@ -24,8 +29,3 @@ $ yarn run test:e2e
 # test coverage
 $ yarn run test:cov
 ```
-
-### Features
-
-- Routes directory
-- Dockerfile

apps/nestjs-server/package.json

@@ -4,8 +4,8 @@
   "author": "Nishant Kohli",
   "private": true,
   "scripts": {
-    "build": "nest build",
     "dev": "nest start --watch",
+    "build": "nest build",
     "start": "NODE_ENV=production node dist/main",
     "start:debug": "nest start --debug --watch",
     "prod": "yarn run build && yarn run start",
@@ -17,31 +17,30 @@
     "test:e2e": "jest --config ./test/jest-e2e.json"
   },
   "dependencies": {
-    "@nestjs/common": "^10.3.10",
-    "@nestjs/core": "^10.3.10",
-    "@nestjs/platform-express": "^10.3.10",
-    "@nestjs/platform-fastify": "^10.3.10",
+    "@nestjs/common": "^10.4.4",
+    "@nestjs/core": "^10.4.4",
+    "@nestjs/platform-express": "^10.4.4",
+    "@nestjs/platform-fastify": "^10.4.4",
     "reflect-metadata": "^0.2.2",
     "rxjs": "^7.8.1"
   },
   "devDependencies": {
-    "@nestjs/cli": "^10.4.1",
-    "@nestjs/schematics": "^10.1.2",
-    "@nestjs/testing": "^10.3.10",
-    "@nish1896/eslint-config": "^2.0.4",
-    "@types/express": "^4.17.21",
-    "@types/jest": "^29.5.12",
-    "@types/node": "^20.14.9",
+    "@nestjs/cli": "^10.4.5",
+    "@nestjs/schematics": "^10.1.4",
+    "@nestjs/testing": "^10.4.4",
+    "@nish1896/eslint-config": "^2.0.5",
+    "@types/jest": "^29.5.13",
+    "@types/node": "^22.7.4",
     "@types/supertest": "^6.0.2",
     "eslint": "^8.57.0",
     "jest": "^29.7.0",
     "source-map-support": "^0.5.21",
-    "supertest": "^6.3.4",
-    "ts-jest": "^29.1.5",
+    "supertest": "^7.0.0",
+    "ts-jest": "^29.2.5",
     "ts-loader": "^9.5.1",
     "ts-node": "^10.9.2",
     "tsconfig-paths": "^4.2.0",
-    "typescript": "^5.3.3"
+    "typescript": "^5.6.2"
   },
   "jest": {
     "moduleFileExtensions": [

apps/next-client/README.md

@@ -2,5 +2,7 @@
 
 ### Features
 
-- Integrated Mui with theme
-- Dockerfile
+- [Mui v6](https://mui.com/material-ui/)
+- Button to toggle light and dark mode by changing MUI theme.
+
+**TODO** - [MUI - Migrating to Pigment CSS](https://mui.com/material-ui/migration/migrating-to-pigment-css/#migrating-custom-theme)

apps/next-client/next.config.mjs

@@ -0,0 +1,19 @@
+const nextConfig = {
+  images: {
+    dangerouslyAllowSVG: true,
+    contentDispositionType: 'attachment',
+    contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'img.icons8.com'
+      },
+      {
+        protocol: 'https',
+        hostname: 'img.shields.io'
+      }
+    ]
+  }
+};
+
+export default nextConfig;

apps/next-client/package.json

@@ -11,23 +11,23 @@
     "lint": "next lint --fix ."
   },
   "dependencies": {
-    "@emotion/cache": "^11.11.0",
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
-    "@mui/icons-material": "^5.15.21",
-    "@mui/material": "^5.15.21",
-    "@mui/material-nextjs": "^5.15.11",
-    "next": "14.2.4",
+    "@emotion/cache": "^11.13.1",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mui/icons-material": "^6.1.2",
+    "@mui/material": "^6.1.2",
+    "@mui/material-nextjs": "^6.1.2",
+    "next": "14.2.14",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@nish1896/eslint-config": "^2.0.4",
-    "@types/node": "^20.14.9",
-    "@types/react": "^18.3.3",
+    "@nish1896/eslint-config": "^2.0.5",
+    "@types/node": "^22.7.4",
+    "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.0",
     "eslint": "^8.57.0",
-    "eslint-config-next": "14.2.4",
-    "typescript": "^5.3.3"
+    "eslint-config-next": "14.2.14",
+    "typescript": "^5.6.2"
   }
 }

apps/next-client/src/app/layout.tsx

@@ -1,29 +1,38 @@
 import type { Metadata } from 'next';
-import { Inter } from 'next/font/google';
+import { Roboto } from 'next/font/google';
 import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
-import { ThemeProvider } from '@mui/material/styles';
-import theme from '@/assets/styles/theme';
+import { AppThemeProvider } from '@/theme';
+import { LayoutProps } from '@/types';
 import './globals.css';
 
-const inter = Inter({ subsets: ['latin'] });
+const roboto = Roboto({
+  weight: ['300', '400', '500', '700'],
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--my-font-family',
+});
+const defaultTitle = 'NextJs App';
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app'
+  title: {
+    template: `%s | ${defaultTitle}`,
+    default: defaultTitle,
+  },
+  description: 'NextJS Template App'
 };
 
-export default function RootLayout({ children }: {
-  children: React.ReactNode;
-}) {
+const RootLayout = ({ children }: LayoutProps) => {
   return (
     <html lang="en">
-      <body className={inter.className}>
+      <body className={roboto.variable}>
         <AppRouterCacheProvider options={{ key: 'mui' }}>
-          <ThemeProvider theme={theme}>
+          <AppThemeProvider>
             {children}
-          </ThemeProvider>
+          </AppThemeProvider>
         </AppRouterCacheProvider>
       </body>
     </html>
   );
-}
+};
+
+export default RootLayout;

apps/next-client/src/app/not-found.tsx

@@ -0,0 +1,12 @@
+/**
+ * Stylize this page to handle the routes not existing inside your application.
+ * Delete this file, if you want to render the default 404 Page for NextJS.
+ */
+
+const Page404 = () => {
+  return (
+    <p>not found</p>
+  );
+};
+
+export default Page404;