React, Webpack, Ts, Eslint, Docker, Nginx and Redux boilerplate

• This is a boilerplate that includes react setup with webpack from scratch and integration of typescript, eslint and redux with best practices, This boilerplate includes enviornment awareness with a support for both development spinup and production spinup
• ErrorBoundary component for tracking all the errors and sending to backend for maintaining a logger file (./src/ErrorLogger/ErrorLogger.tsx)
• Environment variable setup with best practice.
• Network layer is handled by react-query.
• There is no need to import React in files that uses JSX.

Commands:

1. npm run start ( spin up webpack server )
2. npm run build ( builds production build and run postbuild command )
3. npm run checkPackageUpdate ( runs npm-check -u for all possible updates in package.json )

Production build includes the following optimization :-

• cache busting ✅
• code obfuscation Plugin ✅
  • js minification ✅
• chunk spliting ✅ ( Two possible ways )
• Html optimization ✅
• Css optmization ✅
  • Extract css per chunk into its own file
  • Minify it
• Tree shaking ( dead code elemination )
• Gzipped, Furthur read ✅
• Brotlie Compression ✅

Development build includes the following :-

• More human readable webpack dev server ✅
• Better error representation ( Like create-react-app, Plugin)

Loaders used for webpack to work

babel-loader : bable-loader transpiles our js/ts code

babel presets that webpack uses for successfully parsing react(jsx), js and ts code presets (set of plugins) used are as follows, furthur read on presets ✅

• @babel/preset-env
• @babel/preset-react: Adds support for jsx, furthur read
• @babel/preset-typescript: There are several ways to compile your TypeScript projects nowadays. You can use a vanilla call to tsc to just convert everything to .js files, or you can use a build tool like webpack and use a TypeScript loader like ts-loader or Babels @babel/preset-typescript In this boilerplate we are using ts-loader as we need typechecks at build time which is not done by @bable/preset-typescript, furtur read

ts-loader : Used to compile Ts

css-loader

sass-loader

style-loader

url-loader & svg-url-loader : both convert jpg|png and svg into base64 respectively

Plugins used by webpack in development/production