Skip to content

Commit

Permalink
Lib upgrade oct24 (#13)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
nishkohli96 authored Oct 8, 2024
1 parent b3cf3be commit 0a8bbf2
Show file tree
Hide file tree
Showing 34 changed files with 2,283 additions and 2,152 deletions.
7 changes: 4 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
15 changes: 9 additions & 6 deletions apps/express-server/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
5 changes: 5 additions & 0 deletions apps/express-server/nodemon.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"watch": ["src/"],
"ext": "js,ts,json,yml,yaml",
"ignore": ["*.test.{js,ts}", "node_modules/"]
}
22 changes: 11 additions & 11 deletions apps/express-server/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
2 changes: 1 addition & 1 deletion apps/express-server/src/app-constants/env_vars.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
});
6 changes: 3 additions & 3 deletions apps/express-server/src/app.ts
Original file line number Diff line number Diff line change
@@ -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();

Expand Down
20 changes: 18 additions & 2 deletions apps/express-server/src/index.ts
Original file line number Diff line number Diff line change
@@ -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();
Expand Down
2 changes: 1 addition & 1 deletion apps/express-server/src/middleware/winston-logger.ts
Original file line number Diff line number Diff line change
@@ -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;

Expand Down
29 changes: 17 additions & 12 deletions apps/express-server/tsconfig.json
Original file line number Diff line number Diff line change
@@ -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"]
}
}
}
10 changes: 5 additions & 5 deletions apps/nestjs-server/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -24,8 +29,3 @@ $ yarn run test:e2e
# test coverage
$ yarn run test:cov
```

### Features

- Routes directory
- Dockerfile
29 changes: 14 additions & 15 deletions apps/nestjs-server/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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": [
Expand Down
6 changes: 4 additions & 2 deletions apps/next-client/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
4 changes: 0 additions & 4 deletions apps/next-client/next.config.js

This file was deleted.

19 changes: 19 additions & 0 deletions apps/next-client/next.config.mjs
Original file line number Diff line number Diff line change
@@ -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;
24 changes: 12 additions & 12 deletions apps/next-client/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
35 changes: 22 additions & 13 deletions apps/next-client/src/app/layout.tsx
Original file line number Diff line number Diff line change
@@ -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;
12 changes: 12 additions & 0 deletions apps/next-client/src/app/not-found.tsx
Original file line number Diff line number Diff line change
@@ -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;
Loading

0 comments on commit 0a8bbf2

Please sign in to comment.