cra-template-react-microfrontend-starter-kit

Generate a React Micro-Frontend scaffolding project

To generate a project run following command:

npx create-react-app my-app --template react-microfrontend-starter-kit

Neudesic React Micro-Frontend Starter Kit

React Micro-Frontend Starter Kit is a custom template for Create React App (CRA) that provides a solid foundation for building micro-frontend applications using React. It includes several preconfigured features and tools to enhance your development experience. This README.md file provides an overview of the features, guides you on getting started with the template, and provides information about available npm scripts.

Features

• Authentication: Easily integrate Azure Active Directory (Azure AD) authentication into your micro-frontend application using the react-msal library. This feature allows you to implement secure authentication and authorization workflows for your users.

• Routing: The template includes react-router-dom, a popular routing library for React applications. It provides a flexible and declarative way to define routes and enables you to create protected routes that require authentication before accessing specific pages.

• Prettier, ESLint & Husky: Code formatting and linting are essential for maintaining a clean and consistent codebase. The template comes preconfigured with Prettier and ESLint, which enforce code style guidelines and catch potential errors. Husky is also set up to automatically run these tools before committing code changes.

• Error handling: Handling errors gracefully is crucial for providing a smooth user experience. The template integrates react-error-boundary, a React error boundary component that catches errors in the component tree and displays a fallback UI, preventing crashes and providing helpful error messages.

• Webpack Module Federation: The template leverages Webpack's module federation feature to enable the composition of multiple micro frontends into a single application. This allows you to break your application into smaller, independent modules that can be developed and deployed separately, promoting code reuse and scalability.

• Folder Structure: The template follows a well-organized folder structure that promotes maintainability and scalability. It encourages the separation of concerns and follows best practices for structuring React applications, making it easier to navigate and understand the codebase.

• State Management: Zustand, a lightweight state management library for React, is integrated into the template. Zustand provides a simple yet powerful API for managing application state, making it easier to share data and manage complex interactions between components.

• TypeScript: The template is set up with TypeScript, a statically-typed superset of JavaScript. TypeScript brings type safety and improved tooling support to your development workflow, helping catch errors early and providing better code documentation and autocompletion.

• Styling: The template includes Bootstrap v5, a popular CSS framework, to streamline the development of responsive and visually appealing user interfaces. Bootstrap provides a wide range of reusable components and utility classes that can be easily customized to match your application's design.

Getting Started

To use the React Micro-Frontend Starter Kit, follow these steps:

• Ensure that you have Node.js and npm (Node Package Manager) installed on your machine.

• Create a new React application using Create React App (CRA) with the custom template:

  npx create-react-app my-app --template react-microfrontend-starter-kit
  

• Navigate to the newly created my-app directory:

  cd my-app
  

• Install the project dependencies:

  npm install
  

• Configure Azure AD authentication by following the instructions provided in the README.md file of the react-msal library.

• Start the development server:

  npm start
  

  This will launch your application in development mode and open it in your default web browser. You can now start building your micro-frontend application using the provided features and tools.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in development mode. Open http://localhost:3000 to view it in the browser.

npm run build

Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

npm test

Launches the test runner in the interactive watch mode. It runs all the test files in your application and provides feedback on test results.

npm run lint

Runs ESLint to analyze your code and check for potential errors and code style violations.

npm run lint:fix

Runs ESLint and automatically fixes fixable errors and code style violations.

npm run format

Check formatting for your code using Prettier to ensure consistent code style across the project.

npm run format:fix

Formats your code using Prettier and automatically fixes any fixable formatting issues.

Contributing

If you encounter any issues or have suggestions for improvements, please feel free to open an issue or submit a pull request on the GitHub repository.

License

This project is licensed under the MIT License.

Thank you for choosing the Neudesic React Micro-Frontend Starter Kit! We hope this template accelerates your development process and helps you build scalable and maintainable micro-frontend applications with ease. If you have any questions or need further assistance, please refer to the documentation or reach out to the community for support. Happy coding!