Building Micro Frontends with React

• Experience with React
• Javascript programming experience

Audience

• Developers

React is an open source Javascript library used for building user interfaces for web applications. Micro Frontend is an architecture wherein semi-independent fragments of the web application UIs (front ends) are developed, tested, and deployed independently. It resembles the back-end architecture of microservices.

This instructor-led, live training (online or onsite) is aimed at developers who wish to use React to develop, test, and deploy micro-frontends for large web applications, making them highly-scalable, technology agnostic, and easier to maintain.

By the end of this training, participants will be able to:

• Set up the necessary development environment to start developing micro-frontends with React.
• Understand the architecture, core concepts, and advantages of micro-frontends.
• Learn how to build, integrate, test, and deploy micro-frontends with React.
• Implement micro-frontends with module federation.
• Apply the CI/CD pipeline production-grade workflow.
• Know the common issues with CSS in micro-frontends and how to fix them.
• Get insights on how to implement other frontend frameworks with React.

Format of the Course

• Interactive lecture and discussion.
• Lots of exercises and practice.
• Hands-on implementation in a live-lab environment.

Course Customization Options

• To request a customized training for this course, please contact us to arrange.

Introduction

• Overview of micro-frontend architecture and core concepts
• Fundamentals of React

Getting Started

• Setting up the development environment
• Basics of module federation
• Other frontend frameworks

Building Micro Frontends

• Creating a project structure using React
• Converting to micro-frontends
• Modifying micro-frontend apps
• Sharing dependencies and linking multiple apps

Integrating Host/Containers with Micro Frontends

• Build-time vs run-time integrations
• Assembling the app components

Working with CSS in Micro Frontends

• Modifying the header component
• Understanding CSS in JS libraries
• Common issues with CSS in Micro Frontends
• Debugging and fixing issues

Configuring Authentication in Micro Frontends

• Implementation approaches
• Communicating authentication changes
• Adding an auth deploy config

Deploying Micro Frontends

• Requirements for deployment
• Implementing the CI/CD pipeline
• Testing the pipeline
• Running the deployment
• Verifying the deployment

Troubleshooting

Summary and Next Steps