dalsoftdalsoft
81

Create React App Webpack 5 Module Federation Tailwind TypeScript

screenshot of Create React App Webpack 5 Module Federation Tailwind TypeScript
react
tailwind

Create React App boilerplate with React 17, Webpack 5, Tailwind 2, Module Federation, and TypeScript.

Github

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.

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.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

tailwind
Tailwind

Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.

webpack
Webpack

Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.