Building Micro Frontends with React 18

Building Micro Frontends with React 18

by Vinci J Rufus
Released October 2023
Publisher(s): Packt Publishing
ISBN: 9781804610961

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Become a full life cycle developer by not only learning how to build micro frontends but also deploying and managing them efficiently in a cloud-native environment

Key Features

  • Go through strategies for building and deploying production-grade micro frontends on the cloud
  • Explore the right choice and guiding principles to build different micro frontend patterns
  • Learn how to use React the right way to build and deploy micro frontends with this step-by-step guide
  • Purchase of the print or Kindle book includes a free PDF eBook

Book Description

Although deservedly popular and highly performant tools for building modern web applications, React and single-page applications (SPAs) become more and more sluggish as your applications and teams grow. To solve this problem, many large web apps have started to break down monolith SPAs into independently deployable smaller apps and components—a pattern called micro frontends. But micro frontends aren't a perfect solution, but rather a double-edged sword. This book teaches you how to architect and build them with the right principles to reap all the benefits without the pitfalls.

This book will take you through two patterns of building micro frontends, the multi-SPA pattern and the micro apps pattern. You’ll find out which patterns to use and when, as well as take a look at the nuances of deploying these micro frontends using cloud-native technologies such as Kubernetes and Firebase. With the help of this book, you’ll gain an in-depth understanding of state management, solving problems with routing, and deployment strategies between the different micro frontends.

By the end of this book, you’ll have learned how to design and build a React-based micro frontend application using module federation and deploy it to the cloud efficiently.

What you will learn

  • Discover two primary patterns for building micro frontends
  • Explore how to set up monorepos for efficient team collaboration
  • Deal with complexities such as routing and sharing state between different micro frontends
  • Understand how module federation works and use it to build micro frontends
  • Find out how to deploy micro frontends to cloud platforms
  • Figure out how to build the right development experience for teams

Who this book is for

This book is for intermediate- to advanced-level developers with a working knowledge of React and web application development with JavaScript and TypeScript. Knowledge of concepts like client-side and server-side rendering, React, NodeJS, Webpack, and the basics of Kubernetes and serverless computing is desirable, but not necessary.

Table of contents

  1. Building Micro Frontends with React 18
  2. Contributors
  3. About the author
    1. Acknowledgments
  4. About the reviewers
  5. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
    4. Download the example code files
    5. Conventions used
    6. Get in touch
    7. Share Your Thoughts
    8. Download a free PDF copy of this book
  6. Part 1: Introduction to Microfrontends
  7. Chapter 1: Introducing Microfrontends
    1. Technical requirements
    2. Defining Microfrontends
      1. Understanding the Microfrontend Premium
      2. Exploring the benefits of Microfrontends
    3. Understanding Microfrontend patterns
      1. The Multi-SPA Pattern
      2. The Micro Apps Pattern
    4. Choosing a suitable pattern
      1. Team Composition
      2. Frequency of Deployments
    5. Hello World with Microfrontends
    6. Summary
  8. Chapter 2: Key Principles and Components of Microfrontends
    1. Understanding the Key Principles
      1. Domain Driven Teams
      2. Isolating Failure
      3. Deploying Independently
      4. Preferring Runtime Integrations
      5. Avoiding the “Distributed Monolith” trap
      6. Technology agnostic
      7. Granular Scaling
      8. Culture of Automation and DevOps
    2. The key Components of a Microfrontend Architecture
      1. Routing Engine
      2. A global state and a Communication Channel
      3. Source code Version Control
      4. A Component Library
    3. Summary
  9. Chapter 3: Monorepos versus Polyrepos for Microfrontends
    1. Technical requirements
    2. Repo types and their nuances
      1. Monorepos
      2. Polyrepos
      3. Differences between Polyrepos and Monorepos
    3. Choosing Monorepos for Microfrontends
      1. Popular Monorepo tools
    4. Setting up our Monorepo
      1. Running the app locally
      2. Creating a new app with Nx Console
      3. Setting permissions in your Monorepo
    5. Summary
  10. Part 2: Architecting Microfrontends
  11. Chapter 4: Implementing the Multi-SPA Pattern for Microfrontends
    1. Technical requirements
    2. Understanding the multi-SPA architecture
    3. Building our Multi-SPA Microfrontend
      1. Setting up our mini-apps
      2. Using a shared component library
      3. Setting up Routing
      4. Setting up a mocked product list
      5. Adding the product grid and checkout components
      6. Setting up a Global Shared State
    4. Summary
  12. Chapter 5: Implementing the Micro-Apps Pattern for Microfrontends
    1. Technical requirements
    2. Why do we need Module Federation for Microfrontends?
    3. What is Module Federation?
      1. ModuleFederationPlugin
      2. Host apps
      3. Remote Apps
      4. remoteEntry.js
    4. Setting up Microfrontends with a Host and Remote app
      1. Clean up
      2. Setting up the App-shell host app
      3. Setting up our Remote apps
    5. Extending Module Federation to a true Micro-apps Pattern
      1. Creating the Recommendations Remote Micro app
      2. Adding Recommendations as a Remote app to Catalog
    6. State management with Module Federation
      1. Adding the Like button to the host app
      2. Avoiding Unnecessary Re-rendering
    7. Summary
  13. Chapter 6: Server-Rendered Microfrontends
    1. Technical requirements
    2. How do Client Rendered and Server Rendered Apps differ?
      1. Client Side Rendered Apps (CSR)
      2. Server Side Rendered Apps (SSR)
    3. Building out our Server Rendered Microfrontend
      1. Getting started with Turborepo and Next.js
      2. Setting up our Micro Apps
    4. Summary
  14. Part 3: Deploying Microfrontends
  15. Chapter 7: Deploying Microfrontends to Static Storage
    1. Technical requirements
    2. What is Static Storage?
    3. Setting up Firebase
      1. Setting up a project with multiple sites
      2. Installing and configuring the Firebase CLI
    4. Creating the Microfrontend Production build
    5. Deploying our Apps to Firebase
      1. Fixing CORS issues
      2. Deploying only the selected target
    6. Deploying only Micro Apps that changed
      1. NX Affected
      2. Creating an Nx custom command executor to deploy
    7. Summary
  16. Chapter 8: Deploying Microfrontends to Kubernetes
    1. Technical requirements
    2. Introduction to Kubernetes
      1. What is Kubernetes?
      2. Key concepts of Kubernetes
      3. Kubernetes architecture for microfrontends
    3. Containerizing our micro-apps with Docker
      1. Installing Docker
      2. Creating standalone app builds
      3. Creating a Dockerfile
      4. Setting up Docker Hub to store Docker images
    4. Creating a Kubernetes configuration file
      1. The structure of a Kubernetes spec file
      2. Creating spec files to deploy our microfrontends
    5. Setting up a managed Kubernetes Cluster on Azure
      1. Logging into the Azure portal and setting up a subscription key
      2. Accessing your Kubernetes cluster via the Azure CLI
      3. Generating credentials for your DevOps pipelines
    6. Setting up CI/CD with GitHub Actions
      1. Setting up GitHub secrets
      2. Getting started with GitHub Actions
    7. Updating the remotes
    8. Summary
  17. Part 4: Managing Microfrontends
  18. Chapter 9: Managing Microfrontends in Production
    1. Foundational components for a strong software delivery model
      1. Branching strategies
      2. Versioning micro apps
    2. Rolling back a micro app
    3. Deploying micro apps with feature toggles
    4. Summary
  19. Chapter 10: Common Pitfalls to avoid when Building Microfrontends
    1. Don’t make your micro apps too small
    2. Avoiding the overuse of Shared Component Code
    3. Avoiding using multiple frameworks in your microfrontend
    4. An inability to deploy an individual micro app
    5. Excessively relying on state
    6. Avoiding build-time compilation to assemble Microfrontends
    7. Avoiding packing your micro apps into NPM packages
    8. Summary
  20. Part 5: Emerging Trends
  21. Chapter 11: Latest Trends in Microfrontends
    1. Microfrontends – decoupled modular frontends
    2. The island pattern
    3. Beyond Webpack with ES Modules
    4. Using WebAssembly Modules
    5. Edge Functions or Cloud functions
    6. Generative AI and Microfrontends
    7. Summary
  22. Index
    1. Why subscribe?
  23. Other Books You May Enjoy
    1. Packt is searching for authors like you
    2. Share Your Thoughts
    3. Download a free PDF copy of this book

Product information

  • Title: Building Micro Frontends with React 18
  • Author(s): Vinci J Rufus
  • Release date: October 2023
  • Publisher(s): Packt Publishing
  • ISBN: 9781804610961