📦 React Boiler plate that combines webpack5 and esbuild

A React boilerplate that combines the Webpack ecosystem and esbuild's fast build/transpilation speed.

Installation

Clone this repo and npm install.

npm i or yarn install

Usage

Development server

npm start or yarn start

You can view the development server at localhost:3000.

Production build

npm run build or yarn build

Project Features

1) Component Scaffolding: Plop - Easily create pages/components with consistency using the below command. Automatically creates Js, Scss and localization files at required directories. Templates can be modified by editing 'plopfile.js' file and 'plop-templates' directory.

npm generate or yarn generate

2) Module Aliases: Below are the list of aliases. These can be configured in webpack.config.js file

    "paths": {
      "@icons/*": ["src/assets/icons/*"],
      "@images/*": ["src/assets/images/*"],
      "@config/*": ["src/config/*"],
      "@constants/*": ["src/constants/*"],
      "@hooks/*": ["src/hooks/*"],
      "@hoc/*": ["src/hoc/*"],
      "@localization/*": ["src/localization/*"],
      "@sharedComponents/*": ["src/sharedComponents/*"],
      "@pages/*": ["src/app/pages/*"],
      "@utils/*": ["src/utils/*"],
      "@/*": ["src*"]
    };

  /*Usage*/
  import { Space } from '@sharedComponents';
  import { FaBeer } from '@icons';
  .
  .
  .
  <Space><p>Hello</p><p>World</p><Space>
  <FaBeer />

3) Styles: Both sass and styled components have been added along with global variables.

import styled from 'styled-components';

const Container = styled.div`
  display: flex;
  font-size: ${(props) => props.theme.fontLg2};
`;

4) Pre-configured route based splitting Loadable Components; Import and add your routes to Routes.config.js in base directory.

 import prerenderedLoadable from './preRenderedLoadable';

 const About = prerenderedLoadable(() => import('@pages/About'));

 export const ROUTES = [
   .
   .
   .
   .
  {
    path: '/about',
    key: 'About',
    isPrivate: false,
    exact: true,
    component: About
  }
];

5) Route Guards

 import prerenderedLoadable from './preRenderedLoadable';

 const Settings = prerenderedLoadable(() => import('@pages/Settings/Settings'));
 export const ROUTES = [
   .
   .
   .
   .
  {
    path: '/settings',
    key: 'settings',
    exact: true,
    // make isPrivate as true to enable route guard
    isPrivate: true,
    component: About
  }
];

// pass authenticated as true or false in PrivateRoute
<Switch>
  {(ROUTES || []).map((route) =>
    route.isPrivate ? (
      <PrivateRoute authenticated={isAuthenticated} redirectPath='/' key={route.key} path={route.path} exact={route.exact} component={route.component} />
    ) : (
      <Route key={route.key} path={route.path} exact={route.exact} component={route.component} />
    )
  )}
  <Route component={PageNotFound} />
</Switch>

6) Optimization:

• ImageMinimizerWebpackPlugin - Lossless compression of images using imagemin plugin
• compression-webpack-plugin - Pre-configured "brotli" compress to prepare compressed versions of assets to serve them with Content-Encoding.

7) SVG as React Components: @svgr/cli

/* 1) Place your svgs in assets/icons/svg folder*/
/* 2) run below command from cli */

yarn svgr or npm svgr

The above command will automatically create the React component in assets/icons folder;

usage:

import { SadIcon } from '@icons';

<SadIcon />;

8) Safe Commits:

• lint-staged - Run linters against staged git files and don't let 💩 slip into your code base!
• Husky - configured git hooks that runs "lint-staged" on committing your code and before push to repo.

9) Secure Locale Storage:

• secure-ls - Secure localStorage data with high level of encryption and data compression.

usage:

import { setLocalStorage, getLocalStorageKey } from '@utils/secureLocalStorage';

setLocalStorage('token', resp.accessToken);
const token = getLocalStorageKey('token');

10) Website pre-rendering to boost SEO

react-snap Pre-renders a web app into static HTML. Uses Headless Chrome to crawl all available links starting from the root.

just add the routes you want to pre-render in package.json

  "reactSnap": {
    "include": [
      "/settings"
    ],
    "inlineCss": true,
    "headless": true
  },

React based dependencies

• react-helmet-async - A fork of "React Helmet" that manages all of your changes to the document head
• loadable-components - React code splitting made easy. Recommended by the React Team
• react-router-dom - A collection of navigational components that compose declaratively with your application
• react-localization - Simple module to localize the React interface using the same syntax used in the ReactNativeLocalization module.
• styled-components - A CSS in JS solution which utilizes tagged template literals (a recent addition to JavaScript) and the power of CSS, to write actual CSS code to style your components.
• classnames - A simple JavaScript utility for conditionally joining classNames together.
• axios - Promise based HTTP client for the browser and node.js
• secure-ls - Secure localStorage data with high level of encryption and data compression.
• react-icons - Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using.

Development Dependencies

Webpack

• webpack - Module and asset bundler.
• webpack-cli - Command line interface for webpack
• webpack-dev-server - Development server
• webpack-bundle-analyze - Visualize size of webpack output files with an interactive zoomable treemap.

Webpack Plugins

• html-webpack-plugin - Generate HTML files from template
• webpack-subresource-integrity - Webpack plugin for enabling Subresource Integrity.
• html-webpack-plugin - Generate HTML files from template
• mini-css-extract-plugin - Extract CSS into separate files
• compression-webpack-plugin - Prepare compressed versions of assets to serve them with Content-Encoding.
• image-minimizer-webpack-plugin - Plugin and Loader for webpack to optimize (compress) all images using imagemin.

Babel

• @babel/core - Transpile ES6+ to backwards compatible JavaScript
• @babel/plugin-proposal-class-properties - Use properties directly on a class (an example Babel config)
• @babel/preset-env - Smart defaults for Babel
• @babel/eslint-parser - allows you to lint ALL valid Babel code with the fantastic ESLint.
• @babel/eslint-plugin - Companion rules for @babel/eslint-parser
• babel-plugin-styled-components - For easier debugging of styled components

Loaders

• esbuild-loader - lets you harness the speed of esbuild in your Webpack build by offering faster alternatives for transpilation (eg. babel-loader/ts-loader) and minification (eg. Terser)!
• sass-loader - Load SCSS and compile to CSS
  • dart-sass - Dart Sass
• postcss-loader - Process CSS with PostCSS
  • postcss-preset-env - Sensible defaults for PostCSS
  • autoprefixer - PostCSS plugin to parse CSS and add vendor prefixes to CSS rules
  • postcss-flexbugs-fixes - PostCSS plugin This project tries to fix all of flexbug's issues.
  • postcss-momentum-scrolling - PostCSS plugin for adding momentum style scrolling behavior (-webkit-overflow-scrolling:touch) for elements with overflow (scroll, auto) on iOS.
• css-loader - Resolve CSS imports
• style-loader - Inject CSS into the DOM

Linters

• @babel/eslint-parser - allows you to lint ALL valid Babel code with the fantastic ESLint.
• @babel/eslint-plugin - Companion rules for @babel/eslint-parser
• eslint - ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code
• eslint-config-airbnb - Base styleguide to enforce rules
• eslint-config-prettier - Implement prettier rules
• eslint-plugin-import - Implement import rules
• eslint-plugin-prettier - Dependency for prettier usage with ESLint
• eslint-import-resolver-webpack - Throw exceptions for import/export in webpack
• eslint-webpack-plugin - ESLint configuration for webpack
• prettier - Dependency for prettier-webpack-plugin plugin

Other Tools

• pmmmwh/react-refresh-webpack-plugin - An EXPERIMENTAL Webpack plugin to enable "Fast Refresh" (also previously known as Hot Reloading) for React components.
• plop - Plop is a little tool that saves you time and helps your team build new files with consistency.
• @svgr/cli - A SVG to React transformer

Author

• Ashwin Bordoloi

License

This project is open source and available under the MIT License.