Skip to content

Commit 0a8bbf2

Browse files
nishkohli96nishkohli96
authored
Lib upgrade oct24 (#13)
* alias imports fix * fix build issues of express-server * express app upgrade pkgs * upgrade nestjs server * upgrade nextjs dependencies except MUI * update express-server readme * upgrade to mui v6 in next-client * update next-client mui * upgrade react dependencies * upgrade web-vitals, fix test cases failing to run
1 parent b3cf3be commit 0a8bbf2

34 files changed

+2283
-2152
lines changed

‎README.md

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,16 @@
22

33
**The ideal repository for full-stack web development with ReactJS, NextJS as the frontend and ExpressJS, NestJS-fastify server as the backend**
44

5+
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.
6+
57
## Features
68

79
- [Turborepo](https://turborepo.org/)
810
- [React](https://reactjs.org/), [NestJs](https://nestjs.com/), [ExpressJS](https://expressjs.com/), [NestJS](https://nestjs.com/)
911
- 100% [Typescript](https://www.typescriptlang.org/)
10-
- [Prettier](https://prettier.io/) and Eslint setup alongside `pre-commit` hook.
11-
- [Mui](https://mui.com/) and [Redux](https://redux.js.org/) preconfigured.
12+
- [Prettier](https://prettier.io/) and [Eslint](https://eslint.org/) setup alongside `pre-commit` hook.
13+
- [Mui v6](https://mui.com/) alongside theme change preconfigured.
1214
- [Dockerize](https://docs.docker.com/) images
13-
- Easy to customise
1415
- Github Actions to build apps and publish their docker images
1516

1617
## Get Started

‎apps/express-server/README.md

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,19 @@ Express JS Application with Typescript
44

55
## Running the app
66

7+
In dev mode,
78
```bash
8-
# development
9-
$ yarn dev
9+
yarn dev
10+
```
1011

11-
# build & run production code
12-
$ yarn prod
12+
Build the app and run production code
13+
```bash
14+
yarn prod
1315
```
1416

1517
### Features
1618

1719
- Express app configured
18-
- Preconfigured logger - [winston](https://www.npmjs.com/package/winston) for logging request and errors
19-
- Producion Dockerfile
20+
- Handled loading of environment variables
21+
- Styled logging using [chalk](https://www.npmjs.com/package/chalk)
22+
- Preconfigured logger middleware - [winston](https://www.npmjs.com/package/winston) for logging request details and errors

‎apps/express-server/nodemon.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"watch": ["src/"],
3+
"ext": "js,ts,json,yml,yaml",
4+
"ignore": ["*.test.{js,ts}", "node_modules/"]
5+
}

‎apps/express-server/package.json

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,27 +4,27 @@
44
"author": "Nishant Kohli",
55
"private": true,
66
"scripts": {
7-
"dev": "nodemon src/index.ts",
8-
"build": "rimraf dist && tsc",
9-
"start": "ts-node dist/index.js",
7+
"dev": "nodemon --exec 'ts-node -r tsconfig-paths/register src/index.ts'",
8+
"build": "rimraf dist && tsc && tsc-alias",
9+
"start": "node dist/index.js",
1010
"prod": "yarn build && yarn start",
1111
"lint": "eslint --fix ."
1212
},
1313
"dependencies": {
1414
"cors": "^2.8.5",
1515
"dotenv": "^16.4.5",
16-
"express": "^4.19.2",
17-
"winston": "3.13.0"
16+
"express": "^4.21.0",
17+
"winston": "3.15.0"
1818
},
1919
"devDependencies": {
20+
"@nish1896/eslint-config": "^2.0.5",
2021
"@types/cors": "^2.8.17",
21-
"@types/express": "^4.17.21",
22-
"@types/node": "^20.14.9",
22+
"@types/node": "^22.7.4",
2323
"eslint": "^8.57.0",
24-
"nodemon": "^3.1.4",
25-
"rimraf": "^5.0.7",
26-
"ts-node": "^10.9.2",
24+
"nodemon": "^3.1.7",
25+
"rimraf": "^6.0.1",
26+
"tsc-alias": "^1.8.10",
2727
"tsconfig-paths": "^4.2.0",
28-
"typescript": "^5.3.3"
28+
"typescript": "^5.6.2"
2929
}
3030
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,5 @@ const env = process.env;
77

88
export const ENV_VARS = Object.freeze({
99
env: env.NODE_ENV ?? 'development',
10-
port: env.PORT ?? 5000
10+
port: env.PORT ?? 8000
1111
});

‎apps/express-server/src/app.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import express, { Express, Request, Response } from 'express';
22
import cors from 'cors';
3-
import { ENV_VARS } from 'app-constants';
4-
import { requestLogger } from 'middleware';
5-
import * as Routes from 'routes';
3+
import { ENV_VARS } from '@/app-constants';
4+
import { requestLogger } from '@/middleware';
5+
import * as Routes from '@/routes';
66

77
const app: Express = express();
88

‎apps/express-server/src/index.ts

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,24 @@
1+
/**
2+
* In dev env ts-node will be using tsconfig-paths to
3+
* resolve alias imports.
4+
*
5+
* However when generating the build and running it,
6+
* tsc-alias will replace the alias imports with the
7+
* actual import path relative to each file.
8+
*
9+
* Sadly "node -r tsconfig-paths/register dist/index.js" is
10+
* not resolving the paths when running the build.
11+
*
12+
* "node -r ts-node/register/transpile-only -r tsconfig-paths/register dist/main.js"
13+
* works but not recommended to be used in production because
14+
* of the lack of type safety.
15+
*/
16+
117
import 'dotenv/config';
218
import os from 'os';
319
import { createServer } from 'node:http';
4-
import { ENV_VARS } from 'app-constants';
5-
import { winstonLogger } from 'middleware';
20+
import { ENV_VARS } from '@/app-constants';
21+
import { winstonLogger } from '@/middleware';
622
import app from './app';
723

824
const hostName = os.hostname();

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { createLogger, addColors, format, transports } from 'winston';
2-
import { ENV_VARS } from 'app-constants';
2+
import { ENV_VARS } from '@/app-constants';
33

44
const { combine, timestamp, printf } = format;
55

‎apps/express-server/tsconfig.json

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,22 @@
11
{
2-
"extends": "../../tsconfig.json",
32
"compilerOptions": {
4-
"baseUrl": "src",
5-
"rootDir": "src",
6-
"module": "commonjs",
7-
"resolveJsonModule": false,
8-
"outDir": "dist",
3+
"baseUrl": "./",
4+
"outDir": "dist",
5+
"rootDir": "src",
6+
"paths": {
7+
"@/*": ["src/*"]
8+
},
99
"esModuleInterop": true,
10-
"incremental": false
10+
"moduleResolution": "node"
1111
},
12-
"ts-node": {
13-
"require": ["tsconfig-paths/register"]
14-
},
15-
"include": ["src"],
16-
"exclude": ["node_modules", "**/__tests__/*", "dist"]
12+
"include": ["src/**/*.ts"],
13+
"exclude": ["node_modules", "dist"],
14+
"tsc-alias": {
15+
"verbose": false,
16+
"resolveFullPaths": true,
17+
"fileExtensions": {
18+
"inputGlob": "{js,mjs,ts}",
19+
"outputCheck": ["js", "ts", "json", "jsx", "mjs"]
20+
}
21+
}
1722
}

‎apps/nestjs-server/README.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,11 @@
22
<a href="http://nestjs.com/" target="blank"><img src="https://nestjs.com/img/logo-small.svg" width="200" alt="Nest Logo" /></a>
33
</p>
44

5+
6+
### Features
7+
- Routes directory
8+
- Code snippet to switch to `platform-express` or `platform-fastify` (remove the unused platform from package.json)
9+
510
## Running the app
611

712
```bash
@@ -24,8 +29,3 @@ $ yarn run test:e2e
2429
# test coverage
2530
$ yarn run test:cov
2631
```
27-
28-
### Features
29-
30-
- Routes directory
31-
- Dockerfile

‎apps/nestjs-server/package.json

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
"author": "Nishant Kohli",
55
"private": true,
66
"scripts": {
7-
"build": "nest build",
87
"dev": "nest start --watch",
8+
"build": "nest build",
99
"start": "NODE_ENV=production node dist/main",
1010
"start:debug": "nest start --debug --watch",
1111
"prod": "yarn run build && yarn run start",
@@ -17,31 +17,30 @@
1717
"test:e2e": "jest --config ./test/jest-e2e.json"
1818
},
1919
"dependencies": {
20-
"@nestjs/common": "^10.3.10",
21-
"@nestjs/core": "^10.3.10",
22-
"@nestjs/platform-express": "^10.3.10",
23-
"@nestjs/platform-fastify": "^10.3.10",
20+
"@nestjs/common": "^10.4.4",
21+
"@nestjs/core": "^10.4.4",
22+
"@nestjs/platform-express": "^10.4.4",
23+
"@nestjs/platform-fastify": "^10.4.4",
2424
"reflect-metadata": "^0.2.2",
2525
"rxjs": "^7.8.1"
2626
},
2727
"devDependencies": {
28-
"@nestjs/cli": "^10.4.1",
29-
"@nestjs/schematics": "^10.1.2",
30-
"@nestjs/testing": "^10.3.10",
31-
"@nish1896/eslint-config": "^2.0.4",
32-
"@types/express": "^4.17.21",
33-
"@types/jest": "^29.5.12",
34-
"@types/node": "^20.14.9",
28+
"@nestjs/cli": "^10.4.5",
29+
"@nestjs/schematics": "^10.1.4",
30+
"@nestjs/testing": "^10.4.4",
31+
"@nish1896/eslint-config": "^2.0.5",
32+
"@types/jest": "^29.5.13",
33+
"@types/node": "^22.7.4",
3534
"@types/supertest": "^6.0.2",
3635
"eslint": "^8.57.0",
3736
"jest": "^29.7.0",
3837
"source-map-support": "^0.5.21",
39-
"supertest": "^6.3.4",
40-
"ts-jest": "^29.1.5",
38+
"supertest": "^7.0.0",
39+
"ts-jest": "^29.2.5",
4140
"ts-loader": "^9.5.1",
4241
"ts-node": "^10.9.2",
4342
"tsconfig-paths": "^4.2.0",
44-
"typescript": "^5.3.3"
43+
"typescript": "^5.6.2"
4544
},
4645
"jest": {
4746
"moduleFileExtensions": [

‎apps/next-client/README.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,7 @@
22

33
### Features
44

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

‎apps/next-client/next.config.js

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎apps/next-client/next.config.mjs

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
const nextConfig = {
2+
images: {
3+
dangerouslyAllowSVG: true,
4+
contentDispositionType: 'attachment',
5+
contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
6+
remotePatterns: [
7+
{
8+
protocol: 'https',
9+
hostname: 'img.icons8.com'
10+
},
11+
{
12+
protocol: 'https',
13+
hostname: 'img.shields.io'
14+
}
15+
]
16+
}
17+
};
18+
19+
export default nextConfig;

‎apps/next-client/package.json

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -11,23 +11,23 @@
1111
"lint": "next lint --fix ."
1212
},
1313
"dependencies": {
14-
"@emotion/cache": "^11.11.0",
15-
"@emotion/react": "^11.11.4",
16-
"@emotion/styled": "^11.11.5",
17-
"@mui/icons-material": "^5.15.21",
18-
"@mui/material": "^5.15.21",
19-
"@mui/material-nextjs": "^5.15.11",
20-
"next": "14.2.4",
14+
"@emotion/cache": "^11.13.1",
15+
"@emotion/react": "^11.13.3",
16+
"@emotion/styled": "^11.13.0",
17+
"@mui/icons-material": "^6.1.2",
18+
"@mui/material": "^6.1.2",
19+
"@mui/material-nextjs": "^6.1.2",
20+
"next": "14.2.14",
2121
"react": "^18.3.1",
2222
"react-dom": "^18.3.1"
2323
},
2424
"devDependencies": {
25-
"@nish1896/eslint-config": "^2.0.4",
26-
"@types/node": "^20.14.9",
27-
"@types/react": "^18.3.3",
25+
"@nish1896/eslint-config": "^2.0.5",
26+
"@types/node": "^22.7.4",
27+
"@types/react": "^18.3.11",
2828
"@types/react-dom": "^18.3.0",
2929
"eslint": "^8.57.0",
30-
"eslint-config-next": "14.2.4",
31-
"typescript": "^5.3.3"
30+
"eslint-config-next": "14.2.14",
31+
"typescript": "^5.6.2"
3232
}
3333
}

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

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,38 @@
11
import type { Metadata } from 'next';
2-
import { Inter } from 'next/font/google';
2+
import { Roboto } from 'next/font/google';
33
import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
4-
import { ThemeProvider } from '@mui/material/styles';
5-
import theme from '@/assets/styles/theme';
4+
import { AppThemeProvider } from '@/theme';
5+
import { LayoutProps } from '@/types';
66
import './globals.css';
77

8-
const inter = Inter({ subsets: ['latin'] });
8+
const roboto = Roboto({
9+
weight: ['300', '400', '500', '700'],
10+
subsets: ['latin'],
11+
display: 'swap',
12+
variable: '--my-font-family',
13+
});
14+
const defaultTitle = 'NextJs App';
915

1016
export const metadata: Metadata = {
11-
title: 'Create Next App',
12-
description: 'Generated by create next app'
17+
title: {
18+
template: `%s | ${defaultTitle}`,
19+
default: defaultTitle,
20+
},
21+
description: 'NextJS Template App'
1322
};
1423

15-
export default function RootLayout({ children }: {
16-
children: React.ReactNode;
17-
}) {
24+
const RootLayout = ({ children }: LayoutProps) => {
1825
return (
1926
<html lang="en">
20-
<body className={inter.className}>
27+
<body className={roboto.variable}>
2128
<AppRouterCacheProvider options={{ key: 'mui' }}>
22-
<ThemeProvider theme={theme}>
29+
<AppThemeProvider>
2330
{children}
24-
</ThemeProvider>
31+
</AppThemeProvider>
2532
</AppRouterCacheProvider>
2633
</body>
2734
</html>
2835
);
29-
}
36+
};
37+
38+
export default RootLayout;

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/**
2+
* Stylize this page to handle the routes not existing inside your application.
3+
* Delete this file, if you want to render the default 404 Page for NextJS.
4+
*/
5+
6+
const Page404 = () => {
7+
return (
8+
<p>not found</p>
9+
);
10+
};
11+
12+
export default Page404;

0 commit comments

Comments
 (0)