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.

Npm Commands

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

# Prepare husky git hooks
npm run prepare

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

# to execute the testing process on test files
npm run test

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)

Module Federation Config

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

new ModuleFederationPlugin({
      name: "MicroFrontTemplate",
      remoteType: "var",
      filename: "templateEntry.js",
      exposes: {
        "./ExposedComponentKey":
          "./exposedComponentPath",
      },
      shared:[]

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/