React starter (Webpack + Typescript + Css modules + Jest)

npm i —save -D webpack webpack-cli webpack-dev-server

npm i --save -D mini-css-extract-plugin html-webpack-plugin favicons-webpack-plugin @pmmmwh/react-refresh-webpack-plugin filemanager-webpack-plugin

const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const FaviconsWebpackPlugin = require("favicons-webpack-plugin"); const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin"); const FileManagerPlugin = require("filemanager-webpack-plugin");  const plugins = [   new FileManagerPlugin({     events: {       // Remove build dir       onStart: {         delete: [BUILD_DIR],       },       onEnd: {         // Copy static files         copy: [           {             source: STATIC_DIR,             destination: BUILD_DIR,           },         ],       },     },   }),   new HtmlWebpackPlugin({     template: path.join(PUBLIC_DIR, "index.html"),     filename: "index.html",   }),   //   new FaviconsWebpackPlugin({     logo: path.resolve(PUBLIC_DIR, "favicon.svg"),     prefix: "/favicons/",     outputPath: path.resolve(BUILD_DIR, "favicons"),     mode: "webapp",     // Injecting into all HTML Files or separately (for an every instance of HtmlWebpackPlugin)     // inject: true,     inject: (htmlPlugin) =>       path.basename(htmlPlugin.options.filename) === "index.html",     favicons: {       icons: {         appleIcon: false, // Apple touch icons.         appleStartup: false, // Apple startup images.         android: false, // Android homescreen icon.         favicons: true, // Regular favicons.         coast: false, // Opera Coast icon.         firefox: false, // Firefox OS icons.         windows: false, // Windows 8 tile icons.         yandex: false, // Yandex browser icon.       },     },     cache: false, // Disallow caching the assets across webpack builds.   }),   new webpack.HotModuleReplacementPlugin(), // For page reloading ];  if (process.env.SERVE) {   plugins.push(new ReactRefreshWebpackPlugin()); }

module.exports = {   devServer,   plugins,   entry: path.join(__dirname, "..", "src", "index.tsx"),   output: {     path: BUILD_DIR,     /**      * Helps to avoid of MIME type ('text/html') is not a supported stylesheet      * And sets address in html imports      */     publicPath: "/",   },   // Checking the maximum weight of the bundle is disabled   performance: {     hints: false,   },   // Modules resolved   resolve: {     extensions: [".tsx", ".ts", ".js"],   },   module: {     strictExportPresence: true, // Strict mod to avoid of importing non-existent objects     rules: [       // --- JS | TS USING BABEL       {         test: /\.[jt]sx?$/,         exclude: /node_modules/,         use: {           loader: "babel-loader",           options: {             cacheDirectory: true, // Using a cache to avoid of recompilation           },         },       },       // --- HTML       { test: /\.(html)$/, use: ["html-loader"] },       // --- S/A/C/SS       {         test: /\.(s[ac]|c)ss$/i,         use: [           MiniCssExtractPlugin.loader,           {             loader: "css-loader", // translates css into CommonJS             options: {               esModule: true,               // css modules               modules: {                 localIdentName: "[name]__[local]__[hash:base64:5]", // format of output                 namedExport: true, // named exports instead of default               },             },           },           {             // autoprefixer             loader: "postcss-loader",             options: {               postcssOptions: {                 plugins: [                   [                     "postcss-preset-env",                     {                       // Options                     },                   ],                 ],               },             },           },         ],       },       // --- S/A/SS       {         test: /\.(s[ac])ss$/i,         use: ["sass-loader"],       },       // --- IMG       {         test: /\.(png|jpe?g|gif|svg|webp|ico)$/i,         type: "asset/resource",         generator: {           filename: "assets/img/[hash][ext]",         },       },       // --- FONTS       {         test: /\.(woff2?|eot|ttf|otf)$/i,         exclude: /node_modules/,         type: "asset/resource",         generator: {           filename: "assets/fonts/[hash][ext]",         },       },     ],   }, };

npm i --save -D babel-loader html-loader css-loader postcss-loader postcss-preset-env sass-loader

const { merge } = require("webpack-merge"); const common = require("./common.config.js"); const MiniCssExtractPlugin = require("mini-css-extract-plugin");  const plugins = [   new MiniCssExtractPlugin({     filename: "[name].[contenthash].css",   }), ];  module.exports = merge(common, {   mode: "development",   target: "web",   plugins,   devtool: "inline-source-map",   output: {     filename: "[name].[contenthash].js",   }, });

const { merge } = require("webpack-merge"); const common = require("./common.config.js"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin"); const TerserPlugin = require("terser-webpack-plugin");  const plugins = [   new MiniCssExtractPlugin({     filename: "[contenthash].css",   }),   // Compress images   new ImageMinimizerPlugin({     minimizer: {       implementation: ImageMinimizerPlugin.imageminMinify,       options: {         plugins: [           ["gifsicle", { interlaced: true }],           ["jpegtran", { progressive: true }],           ["optipng", { optimizationLevel: 8 }],           [             "svgo",             {               plugins: [                 {                   name: "preset-default",                   params: {                     overrides: {                       removeViewBox: false,                       addAttributesToSVGElement: {                         params: {                           attributes: [{ xmlns: "http://www.w3.org/2000/svg" }],                         },                       },                     },                   },                 },               ],             },           ],         ],       },     },   }), ];  module.exports = merge(common, {   mode: "production",   target: "browserslist",   plugins,   devtool: false,   output: {     filename: "[fullhash].js",   },   optimization: {     usedExports: false,     minimize: true, // Affects Terser Plugin     minimizer: [       new TerserPlugin({         terserOptions: {           mangle: false,           compress: true,           output: {             beautify: true,             comments: false,           },         },         extractComments: false,       }),     ],   }, }); 

npm i --save -D image-minimizer-webpack-plugin imagemin imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo

"config": {     "dev": "--config __webpack__/dev.config.js",     "prod": "--config __webpack__/prod.config.js"   }, "scripts": {     "webpack-config-dev": "nodemon --watch \"./__webpack__/*\" --exec npm run start-dev",     "webpack-config-prod": "nodemon --watch \"./__webpack__/*\" --exec npm run start-prod",     "start-dev": "cross-env-shell webpack serve ${npm_package_config_dev}",     "start-prod": "cross-env-shell webpack serve ${npm_package_config_prod}",     "build-dev": "cross-env-shell webpack ${npm_package_config_dev}",     "build-prod": "cross-env-shell webpack ${npm_package_config_prod} --stats-children",     "clean": "rd /s /q build",     "lint": "eslint src --ext .js --ext .ts",     "lint-fix": "eslint src --ext .js --ext .ts --fix",     "test": "cross-env jest --config __jest__/jest.config.js",     "test-watch": "jest --watch --config __jest__/jest.config.js",     "test-coverage": "jest --coverage --config __jest__/jest.config.js"   },

npm i --save -D nodemon cross-env eslint jest

npm i react react-dom react-redux react-router-dom @reduxjs/toolkit @emotion/react @emotion/styled @mui/icons-material @mui/material

npm i --save -D redux-logger @types/redux-logger

{     "root": true,     "extends": [         "plugin:react/recommended",         "plugin:@typescript-eslint/recommended"     ],     "parser": "@typescript-eslint/parser",     "parserOptions": {         "sourceType": "module",         "ecmaVersion": 2015,         "ecmaFeatures": {             "jsx": true // JSX-compatible         }     },     "env": {         "es6": true,         "browser": true,         "node": true     },     "plugins": [         "@typescript-eslint",         "react"     ],     "rules": {         "@typescript-eslint/no-var-requires": "off", // To avoid of error: "Require statement not part of import statement", if ES modules are used          "semi": [             "error",             "always"         ],         "quotes": [             "error",             "double"         ],         "indent": "off",         "no-fallthrough": "off", // disallow fallthrough of case statements         "no-multiple-empty-lines": [             1,             {                 "max": 2             }         ], // disallow multiple empty lines (off by default)         "no-nested-ternary": 1, // disallow nested ternary expressions (off by default)         "eqeqeq": 2, // require the use of === and !==         "react/prop-types": "off" // Prevent missing props validation in a React component definition     },     "settings": {         "react": {             "version": "detect" // Tell eslint-plugin-react to automatically detect the latest version of react.         }     } }

npm i --save -D eslint-plugin-react @typescript-eslint/eslint-plugin @typescript-eslint/parser

const plugins = [];  module.exports = {   presets: [     "@babel/preset-env",     "@babel/preset-react",     "@babel/preset-typescript",   ],   plugins, };

npm i --save -D @babel/preset-env @babel/preset-react @babel/preset-typescript

{     "compilerOptions": {         "rootDirs": [             "src",             "__jest__"         ],         "outDir": "build",         "lib": [             "dom",             "esnext"         ],         // This will include all packages from array only         // node_modules/@types - is default path. Required, otherwise it will be ignored.         "typeRoots": [             "node_modules/@types",             "src/types"         ],         "target": "es5",         "skipLibCheck": true, // Skip type checking of declaration files (.d.ts)         "esModuleInterop": true, // Creates __importStar and __importDefault helpers for compatibility with the Babel         "allowSyntheticDefaultImports": true, // allows import w/o default prop         "strict": true, // Еnabling all of the strict mode family options         "forceConsistentCasingInFileNames": true, // Force consistent casing in file names         "noFallthroughCasesInSwitch": true, // Report errors for fallthrough cases in switch statements         "module": "esnext", // Sets the module system for the program. Also it's required when use outFile option.          "moduleResolution": "node", // Specify the module resolution strategy         "resolveJsonModule": true, // Allows importing modules with a ‘.json’ extension, which is a common practice in node projects         "isolatedModules": true, // all implementation files must be modules (which means it has some form of import/export)         "noImplicitAny": true, // Raise error if the type "any" is specified somewhere         "noImplicitThis": true, // Raise error on "this" expressions with an implied "any" type         "noUnusedLocals": true, // Raise errors on unused local variables         "noEmit": true, // Do not emit compiler output files like JavaScript source code, source-maps or declarations         "jsx": "react",         "plugins": [             {                 "name": "typescript-plugin-css-modules", // auto-genertes virtual .d.ts for an every css file                 "options": {                     "customTemplate": "./customTemplate.js"                 }             }         ]     },     "exclude": [         "node_modules",         "build",         "coverage",         "webpack.*.js",         "*.config.js",         "**/*.test.ts*"     ] }

npm i --save -D typescript typescript-plugin-css-modules

module.exports = (dts, { classes }) => {   return Object.keys(classes)     .map((key) => `export const ${key}: string`)     .join("\n"); };

module.exports = {   roots: ["../__tests__", "../src"],   setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"], // Modules are meant for code which is repeating in each test file   moduleFileExtensions: ["js", "jsx", "ts", "tsx"],   moduleNameMapper: {     "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":       "<rootDir>/filesMock.js",   },   transform: {     "^.+\\.jsx?$": "babel-jest",     "^.+\\.tsx?$": "ts-jest",     ".+\\.(css|styl|less|sass|scss)$": "jest-css-modules-transform",   },   testMatch: ["**/?(*.)(spec|test).[jt]s?(x)"], // Finds test files named like abc.test|spec.ts?tsx|js|jsx in roots:[] prop.   testEnvironment: "jsdom", // To avoid of js DOM errors };

import "@testing-library/jest-dom";

import React, { PropsWithChildren } from "react"; import { render } from "@testing-library/react"; import type { RenderOptions } from "@testing-library/react"; import { configureStore } from "@reduxjs/toolkit"; import type { PreloadedState } from "@reduxjs/toolkit"; import { Provider } from "react-redux";  import type { store, RootState } from "../../src/core/redux/store"; // As a basic setup, import your same slice reducers import { postSlice } from "../../src/core/redux/slices/postSlice"; import { thunkSlice } from "../../src/core/redux/slices/thunkSlice";  // This type interface extends the default options for render from RTL, as well // as allows the user to specify other things such as initialState, store. interface ExtendedRenderOptions extends Omit<RenderOptions, "queries"> {   preloadedState?: PreloadedState<RootState>;   // store?: AppStore;   store?: typeof store; }  export function renderWithProviders(   ui: React.ReactElement,   {     preloadedState = {},     // Automatically create a store instance if no store was passed in     store = configureStore({       reducer: {         postReducer: postSlice.reducer,         thunkReducer: thunkSlice.reducer,       },       preloadedState,     }),     ...renderOptions   }: ExtendedRenderOptions = {} ) {   function Wrapper({ children }: PropsWithChildren<object>): JSX.Element {     return <Provider store={store}>{children}</Provider>;   }    // Return an object with the store and all of RTL's query functions   return { store, ...render(ui, { wrapper: Wrapper, ...renderOptions }) }; } 

npm i --save -D ts-jest jest-environment-jsdom jest-css-modules-transform babel-jest @types/jest @testing-library/react @testing-library/jest-dom

{     "editor.formatOnSave": true,     "[typescriptreact]": {         "editor.defaultFormatter": "esbenp.prettier-vscode"     },     "[json]": {         "editor.defaultFormatter": "esbenp.prettier-vscode"     },     "typescript.updateImportsOnFileMove.enabled": "always",     "[javascript]": {         "editor.defaultFormatter": "esbenp.prettier-vscode"     },     "editor.codeActionsOnSave": {         "source.fixAll.eslint": true     },     "eslint.validate": [         "javascript",         "typescript"     ],     "typescript.tsdk": "node_modules\\typescript\\lib", // Use Workspace Version for using plugins from tsconfig     "typescript.enablePromptUseWorkspaceTsdk": true }