Overview

This React boilerplate combines the Webpack ecosystem and esbuild’s fast build/transpilation speed. It provides a streamlined development environment for React projects.

Features

• Component Scaffolding: Easily create pages/components with consistency using the Plop command.
• Module Aliases: Configure aliases in the webpack.config.js file for easier import paths.
• Styles: Supports both Sass and styled components, along with global variables.
• Pre-configured route-based splitting: Loadable Components makes code splitting for routes simple. Add routes to Routes.config.js.
• Route Guards: Secure routes by adding route guards.
• Optimization: ImageMinimizerWebpackPlugin for lossless image compression. compression-webpack-plugin for preparing compressed versions of assets.
• SVG as React Components: Use @svgr/cli to automatically create React components from SVG files.
• Safe Commits: lint-staged and Husky for running linters on commit to maintain code quality.
• Secure Locale Storage: Use secure-ls to secure localStorage data with encryption and compression.
• Website Pre-rendering: Use react-snap to pre-render a web app into static HTML for SEO optimization.

Installation

1. Clone this repo: git clone [repo_url]
2. Install dependencies: npm install

Summary

This React boilerplate combines the benefits of the Webpack ecosystem and esbuild’s fast build/transpilation speed. It offers features such as component scaffolding, module aliases, styles support, route-based splitting, route guards, optimization plugins, SVG as React components, safe commits, secure locale storage, and website pre-rendering. It provides a comprehensive development environment for React projects.