Skip to content

Commit f78a9ec

Browse files
Siksha KhareSiksha Khare
Siksha Khare
authored and
Siksha Khare
committed
Ramp Up Complete app
1 parent ccdca23 commit f78a9ec

File tree

9 files changed

+98
-88
lines changed

9 files changed

+98
-88
lines changed

‎.stylelintignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,5 @@ dist/*
33
src/assets/*
44
src/**/*.jsx
55
src/**/*.js
6+
coverage/*
7+
server-build/*

‎jest.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
module.exports = {
22
verbose: true,
3+
testEnvironment: 'jest-environment-jsdom',
34
moduleNameMapper: {
45
'\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|webp)$':
56
'<rootDir>/src/tests/__mocks__/FileMock.js',

‎package.json‎

Lines changed: 39 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
2-
"name": "reactscratch",
3-
"version": "1.0.0",
2+
"name": "react-boilerplate",
3+
"version": "2.0.0",
44
"description": "Awesome React Starter Kit that can scale for an enterprise application with the very easy maintainable codebase.",
55
"main": "index.jsx",
66
"scripts": {
@@ -43,7 +43,7 @@
4343
"build-dev-analyze": {
4444
"command": "webpack -w --progress --config ./webpack/client/webpack.dev.config.js",
4545
"env": {
46-
"NODE_ENV": "development",
46+
"NODE_ENV": "production",
4747
"PORT": 3000,
4848
"analyze": true
4949
}
@@ -81,16 +81,15 @@
8181
"author": "Anand (@aanandgupta193) & Shubham (@shubhamsWEB)",
8282
"license": "ISC",
8383
"dependencies": {
84-
"@babel/core": "^7.13.14",
85-
"@babel/node": "^7.13.13",
86-
"@storybook/react": "^6.5.10",
87-
"axios": "^0.27.2",
88-
"eslint-plugin-prettier": "^3.4.0",
84+
"@babel/core": "^7.21.4",
85+
"@babel/node": "^7.20.7",
86+
"@storybook/react": "^7.0.6",
87+
"axios": "^1.3.6",
8988
"prop-types": "^15.7.2",
9089
"react": "^18.2.0",
9190
"react-dom": "^18.2.0",
92-
"react-redux": "^7.2.4",
93-
"react-router-dom": "^5.2.0",
91+
"react-redux": "^8.0.5",
92+
"react-router-dom": "^6.10.0",
9493
"redux": "^4.0.5",
9594
"redux-devtools-extension": "^2.13.9",
9695
"redux-saga": "^1.1.3"
@@ -100,47 +99,52 @@
10099
"@babel/preset-env": "^7.10.3",
101100
"@babel/preset-react": "^7.10.1",
102101
"@testing-library/jest-dom": "^5.11.1",
103-
"@testing-library/react": "^10.4.7",
104-
"autoprefixer": "^9.0.0",
102+
"@testing-library/react": "^14.0.0",
103+
"autoprefixer": "^10.4.14",
105104
"babel-eslint": "^10.1.0",
106-
"babel-jest": "^26.1.0",
107-
"babel-loader": "^8.1.0",
105+
"babel-jest": "^29.5.0",
106+
"babel-loader": "^9.1.2",
108107
"better-npm-run": "^0.1.1",
109-
"clean-webpack-plugin": "^3.0.0",
110-
"compression-webpack-plugin": "^4.0.0",
111-
"copy-webpack-plugin": "^6.0.3",
112-
"eslint": "^7.3.1",
113-
"eslint-config-airbnb": "^18.2.0",
108+
"clean-webpack-plugin": "^4.0.0",
109+
"compression-webpack-plugin": "^10.0.0",
110+
"copy-webpack-plugin": "^11.0.0",
111+
"css-loader": "^6.7.3",
112+
"css-minimizer-webpack-plugin": "^5.0.0",
113+
"eslint": "^8.39.0",
114+
"eslint-config-airbnb": "^19.0.4",
114115
"eslint-plugin-import": "^2.22.0",
115116
"eslint-plugin-jsx-a11y": "^6.3.1",
116-
"eslint-plugin-prettier": "^3.4.0",
117+
"eslint-plugin-prettier": "^4.2.1",
117118
"eslint-plugin-react": "^7.20.1",
118119
"eslint-plugin-react-hooks": "^4.0.4",
119120
"extract-css-chunks-webpack-plugin": "^4.7.5",
120121
"file-loader": "^6.0.0",
121-
"html-webpack-plugin": "^4.3.0",
122-
"husky": "^4.2.5",
122+
"html-webpack-plugin": "^5.5.1",
123+
"husky": "^8.0.3",
123124
"identity-obj-proxy": "^3.0.0",
124125
"ignore-styles": "^5.0.1",
125-
"jest": "^26.1.0",
126-
"lint-staged": "^10.2.11",
126+
"jest": "^29.5.0",
127+
"jest-environment-jsdom": "^29.5.0",
128+
"lint-staged": "^13.2.1",
129+
"mini-css-extract-plugin": "^2.7.5",
127130
"nodemon": "^2.0.4",
128-
"optimize-css-assets-webpack-plugin": "^6.0.1",
129-
"postcss-loader": "^3.0.0",
131+
"postcss": "^8.4.23",
132+
"postcss-loader": "^7.2.4",
130133
"prettier": "^2.0.5",
131134
"react-test-renderer": "^18.2.0",
132-
"sass": "^1.26.10",
133-
"sass-loader": "^9.0.2",
134-
"stylelint": "^13.6.1",
135-
"stylelint-webpack-plugin": "^2.1.0",
136-
"webpack": "^4.43.0",
135+
"sass": "^1.62.0",
136+
"sass-loader": "^13.2.2",
137+
"style-loader": "^3.3.2",
138+
"stylelint": "^15.6.0",
139+
"stylelint-webpack-plugin": "^4.1.1",
140+
"webpack": "^5.80.0",
137141
"webpack-bundle-analyzer": "^4.6.1",
138-
"webpack-cli": "^4.10.0",
142+
"webpack-cli": "^5.0.2",
139143
"webpack-dev-server": "^4.11.0",
140-
"webpack-manifest-plugin": "^2.2.0",
144+
"webpack-manifest-plugin": "^5.0.0",
141145
"webpack-merge": "^5.0.9",
142-
"webpack-node-externals": "^2.5.0",
143-
"workbox-precaching": "^5.1.3",
146+
"webpack-node-externals": "^3.0.0",
147+
"workbox-precaching": "^6.5.4",
144148
"workbox-webpack-plugin": "^6.5.4"
145149
},
146150
"lint-staged": {

‎public/index.html‎ renamed to ‎public/template.html‎

File renamed without changes.

‎src/routes/Routes.jsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
import React, { Suspense } from 'react';
2-
import { BrowserRouter, Route, Switch } from 'react-router-dom';
2+
import { BrowserRouter, Routes, Route } from 'react-router-dom';
33
import Loader from '../components/loader/Loader';
44
import NotFound from './Routes.lazy';
55
import App from '../components/App';
66

7-
const Routes = () => (
7+
const RoutePaths = () => (
88
<>
99
<BrowserRouter>
1010
<Suspense fallback={<Loader />}>
11-
<Switch>
12-
<Route exact path="/" component={App} />
13-
<Route exact path="/notfound" component={NotFound} />
14-
</Switch>
11+
<Routes>
12+
<Route path="/" element={<App />} end />
13+
<Route path="/not-found" element={<NotFound />} end />
14+
</Routes>
1515
</Suspense>
1616
</BrowserRouter>
1717
</>
1818
);
19-
export default Routes;
19+
export default RoutePaths;

‎webpack/client/webpack.common.config.js‎

Lines changed: 35 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,28 @@
11
const path = require('path');
2-
const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');
3-
const ManifestPlugin = require('webpack-manifest-plugin');
2+
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
3+
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
44
const HtmlWebpackPlugin = require('html-webpack-plugin');
55
const CopyPlugin = require('copy-webpack-plugin');
66
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
7+
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
8+
const StylelintPlugin = require('stylelint-webpack-plugin');
79

8-
const env = process.env.NODE_ENV;
10+
const env = process?.env?.NODE_ENV || 'development';
11+
const isDevEnv = env === 'development'
912

1013
const plugins = [
14+
new StylelintPlugin(),
1115
new CleanWebpackPlugin(),
12-
new ManifestPlugin({
16+
new WebpackManifestPlugin({
1317
fileName: 'asset-manifest.json',
1418
}),
15-
new ExtractCssChunks({
16-
filename: env === 'development' ? '[name].css' : '[name].[hash].css',
17-
chunkFilename: 'css/[name].[hash].css',
18-
}),
19-
2019
new HtmlWebpackPlugin({
21-
template: path.resolve(__dirname, '../../public/index.html'),
20+
template: path.resolve(__dirname, '../../public/template.html'),
21+
filename: 'index.html'
22+
}),
23+
new MiniCssExtractPlugin({
24+
filename: isDevEnv ? 'css/[name].css' : 'css/[name].[contenthash].css',
25+
chunkFilename: isDevEnv ? 'css/[id].css' : 'css/[id].[contenthash].css',
2226
}),
2327
new CopyPlugin({
2428
patterns: [
@@ -43,38 +47,30 @@ module.exports = {
4347
},
4448
},
4549
{
46-
test: /\.(sa|sc|c)ss$/,
50+
test: /\.scss$/,
4751
use: [
48-
{
49-
loader: ExtractCssChunks.loader,
50-
options: {
51-
hmr: true,
52-
esModule: true,
53-
},
54-
},
52+
MiniCssExtractPlugin.loader,
5553
{
5654
loader: 'css-loader',
5755
options: {
58-
sourceMap: env === 'development',
56+
sourceMap: isDevEnv,
5957
modules: {
6058
mode: 'local',
6159
exportGlobals: true,
62-
localIdentName: env === 'development' ? '[name]__[local]__[hash:base64:5]' : '[hash:base64:5]',
63-
context: path.resolve(__dirname, '../../src'),
64-
hashPrefix: 'React Enterprice kit',
60+
localIdentName: isDevEnv ? '[name]__[local]' : '[hash:base64:5]',
6561
},
6662
},
6763
},
6864
{
6965
loader: 'postcss-loader',
7066
options: {
71-
sourceMap: env === 'development',
67+
sourceMap: isDevEnv,
7268
},
7369
},
7470
{
7571
loader: 'sass-loader',
7672
options: {
77-
sourceMap: env === 'development',
73+
sourceMap: isDevEnv,
7874
},
7975
},
8076
],
@@ -92,25 +88,36 @@ module.exports = {
9288
resolve: {
9389
extensions: ['.js', '.jsx'],
9490
},
95-
mode: process.env.NODE_ENV,
91+
mode: env,
9692
plugins,
9793
optimization: {
9894
splitChunks: {
9995
name: 'vendor',
10096
chunks: 'all',
97+
minSize: 20000,
98+
maxAsyncRequests: 30,
99+
maxInitialRequests: 30,
100+
automaticNameDelimiter: '~',
101+
enforceSizeThreshold: 50000,
102+
maxSize: 250000,
101103
minChunks: 1,
102104
cacheGroups: {
103105
defaultVendors: {
104106
test: /[\\/]node_modules[\\/]/,
107+
priority: -10,
108+
filename: '[name].[contenthash].js',
105109
},
106110
},
107111
},
108-
moduleIds: 'hashed',
112+
moduleIds: 'deterministic',
109113
runtimeChunk: 'single',
114+
minimizer: [
115+
new CssMinimizerPlugin()
116+
]
110117
},
111118
output: {
112-
filename: env === 'development' ? '[name].js' : '[name].[hash].js',
119+
filename: isDevEnv ? 'scripts/[name].js' : 'scripts/[name].[hash].js',
113120
path: path.resolve(__dirname, '../../dist'),
114-
chunkFilename: 'scripts/[name].[hash].js',
121+
chunkFilename: isDevEnv ? 'scripts/[name].js' : 'scripts/[name].[hash].js'
115122
},
116123
};

‎webpack/client/webpack.dev.config.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ const { merge } = require('webpack-merge');
22
const path = require('path');
33
const Webpack = require('webpack');
44
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
5-
const StylelintPlugin = require('stylelint-webpack-plugin');
65
const common = require('./webpack.common.config');
76

87
const plugins = [
@@ -12,7 +11,6 @@ const plugins = [
1211
__DEVELOPMENT__: true,
1312
__DEVTOOLS__: true,
1413
}),
15-
new StylelintPlugin(),
1614
];
1715

1816
if (process.env.analyze) {
@@ -32,7 +30,7 @@ module.exports = merge(common, {
3230
static: {
3331
directory: path.join(__dirname, '../../dist'),
3432
},
35-
port: 3000,
33+
port: process?.env?.PORT || 3000,
3634
hot: true,
3735
},
3836
plugins,

‎webpack/client/webpack.prod.config.js‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,16 @@ const path = require('path');
22
const { merge } = require('webpack-merge');
33
const Webpack = require('webpack');
44
const CompressionPlugin = require('compression-webpack-plugin');
5-
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
65
const { InjectManifest } = require('workbox-webpack-plugin');
76
const common = require('./webpack.common.config');
87

98
const plugins = [
109

1110
new CompressionPlugin({
11+
filename: '[path][base].gz',
1212
algorithm: 'gzip',
13-
filename: '[path].gz[query]',
1413
test: /\.(js|jsx)$|\.css$|\.html$/,
1514
}),
16-
new OptimizeCssAssetsPlugin({
17-
cssProcessorPluginOptions: {
18-
preset: ['default', { discardComments: { removeAll: true } }],
19-
},
20-
}),
2115
new Webpack.DefinePlugin({
2216
__CLIENT__: true,
2317
__SERVER__: false,

‎webpack/server/webpack.common.config.js‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
11
const path = require('path');
22
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
3+
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
34
const nodeExternals = require('webpack-node-externals');
45

56
const env = process.env.NODE_ENV;
7+
const isDevEnv = env === 'development';
68

79
const plugins = [
8-
10+
new MiniCssExtractPlugin({
11+
filename: isDevEnv ? 'css/[name].css' : 'css/[name].[contenthash].css',
12+
chunkFilename: isDevEnv ? 'css/[id].css' : 'css/[id].[contenthash].css',
13+
}),
914
new CleanWebpackPlugin(),
1015
];
1116

@@ -23,31 +28,30 @@ module.exports = {
2328
},
2429
},
2530
{
26-
test: /\.(sa|sc|c)ss$/,
31+
test: /\.scss$/,
2732
use: [
33+
MiniCssExtractPlugin.loader,
2834
{
2935
loader: 'css-loader',
3036
options: {
31-
sourceMap: env === 'development',
37+
sourceMap: isDevEnv,
3238
modules: {
3339
mode: 'local',
3440
exportGlobals: true,
35-
localIdentName: env === 'development' ? '[name]__[local]__[hash:base64:5]' : '[hash:base64:5]',
36-
context: path.resolve(__dirname, '../../src'),
37-
hashPrefix: 'React Enterprice kit',
41+
localIdentName: isDevEnv ? '[name]__[local]' : '[hash:base64:5]',
3842
},
3943
},
4044
},
4145
{
4246
loader: 'postcss-loader',
4347
options: {
44-
sourceMap: env === 'development',
48+
sourceMap: isDevEnv,
4549
},
4650
},
4751
{
4852
loader: 'sass-loader',
4953
options: {
50-
sourceMap: env === 'development',
54+
sourceMap: isDevEnv,
5155
},
5256
},
5357
],

0 commit comments

Comments
 (0)