Create React App Webpack 5 Module Federation Tailwind TypeScript

Overview:

This product is a slightly opinionated React boilerplate that utilizes Create React App with React 18, Webpack 5, Tailwind 3, Module Federation, and TypeScript. It provides a basic Module Federation example with two apps, App1 and App2. The template aims to provide a customizable and efficient starting point for React projects.

Features:

• Create React App + Webpack 5 + Module Federation + Tailwind 3 + TypeScript: The template combines these frameworks and tools to create a powerful and efficient development environment.
• Module Federation Example: The template includes a basic Module Federation example with two apps, App1 and App2, where App2 exposes the Button component.
• CRACO Configuration Override: The template uses CRA + Create React App Configuration Override (CRACO) to customize CRA’s webpack configuration, allowing for easy support of Module Federation without needing to start from scratch.
• Opinionated Folder Structure: The template follows a slightly opinionated folder structure where all folders under the ‘src’ directory are pascal case to maintain consistency. This helps in easily finding and organizing components and related files.

Installation:

To use this template, follow the steps below:

1. Ensure that you have the following prerequisites installed:

   • Node 14.0.0 or later version
   • Yarn classic 1.22.5 or 2.x.x preferred
   • Webpack 5 / Module Federation

2. Clone the repository to your local machine.

3. In the terminal, navigate to the project directory and run the following command to install all dependencies:

   yarn install
   

4. To start both App1 and App2, run the following command:

   yarn start
   

   • App1 can be accessed at http://localhost:3000
   • App2 can be accessed at http://localhost:3002

5. Make changes to the code as needed. The page will automatically reload, and build errors and lint warnings will be shown in the console.

Additional available commands:

• yarn test: Runs the test watcher in interactive mode, running tests related to files changed since the last commit.
• yarn build: Builds the app for production, optimizing the build for performance. The production-ready files will be located in the ‘build’ folder.

Summary:

This React boilerplate template uses Create React App in combination with Webpack 5, Module Federation, and Tailwind 3 to provide an efficient and customizable starting point for React projects. It includes a basic Module Federation example with two apps and follows a slightly opinionated folder structure to maintain consistency. The template also utilizes CRACO to easily configure and support Module Federation without the need to start from scratch. With its focus on efficiency and ease of use, this template is a valuable resource for React developers.