New Frontend boilerplate

This template is designed to accelerate the start of new npm package or custom MicroFrontend package.

To start using it you have to clone or fork this repo make an fresh install of packages and run the npm start command.

How to use it?

Features

Dependency check

After cloning this repository please review/remove the safe to remove devDependencies/peerDependencies. You can check the needs of each in the readme_dependencies.md

Aliases configuration

This template provides an aliases configuration for Webpack/Jest/Babel, to add new aliases paths you have to go to the alias_cfg.js file and add the new alias in the aliasRelPath object.

Included types, type check and mocks

• window.userInfo
• i18n.t as type TranslationFunction
• User info types src/types/userType.d.ts
• User info mocked data src/mocks/mockedUser.ts

ESLint and Prettier configuration

Review the ESLint config file to check the rules and adjust them to your needs

i18n configuration enabled at src/lang

• App currently beign wrapped by i18n provider in src/Providers.tsx file

Default Config

The project is serve using a Webpack Dev Server and have a Webpack configuration with the following settings:

• JS, TS, TSX, CSS and SVG loaders
• Dotenv webpack plugin to include .env variables
• TerserPlugin webpack plugin to minify files
• Module Federation webpack plugin (not enabled by default)
• BundleAnalyzerPlugin (not enabled by default)
• Enabled Polyfills:
  • stream
  • buffer
  • path
  • zlib
  • fs
  • process/browser
  • buffer

Available commands

Refer to the scripts configuration on the package.json file for the available commands To use the build:local please provide full path of the library name in the clean/copy:web scripts

# to initialize the webpack dev server in local development
npm run start

# to make a babel production ready build of the project
npm run build:babel

Others

Bundle analizer and Webpack Module Federation

Refer to bottom of the webpack.config.js

Module Federation Config

To enable Module Federation you have to go to the Webpack Config File and uncomment these lines

After that you have de decide which components you want to expose an add them into the config, the same thing apply with the shared deps.

To know more about Module Federation config please visit: https://webpack.js.org/concepts/module-federation/

Husky pre push hook

If you wish to enable the pre push hook please uncomment the commented lines in .husky/pre-push file

Before build

Please fill the key repository in the package.json file refering to the correct repository URL to avoid having mismatch in repo<>library name