Skip to content

Latest commit

 

History

History
274 lines (206 loc) · 11.5 KB

README.md

File metadata and controls

274 lines (206 loc) · 11.5 KB
Raw

📦 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:

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 Plugins

Babel

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
  • 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

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.