Sign In Start Free Trial
Account

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Building Micro Frontends with React 18
  • Table Of Contents Toc
Building Micro Frontends with React 18

Building Micro Frontends with React 18

By : Vinci J Rufus
4.9 (18)
close
close
Building Micro Frontends with React 18

Building Micro Frontends with React 18

4.9 (18)
By: Vinci J Rufus

Overview of this book

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.
Table of Contents (19 chapters)
close
close
1
Part 1: Introduction to Microfrontends
5
Part 2: Architecting Microfrontends
9
Part 3: Deploying Microfrontends
12
Part 4: Managing Microfrontends
15
Part 5: Emerging Trends

Building our Multi-SPA Microfrontend

Building a multi-SPA microfrontend essentially consists of three broad areas: breaking down the app into logical mini-apps, then we need to set up the routing between these mini-apps, and finally, we set up a global state the different mini-apps can read and write data to. Let us look at each of them in the subsequent sections.

Setting up our mini-apps

We will start with where we left off in the previous chapter.

In case you skipped the previous chapter and are directly jumping in here, you can start by cloning the repo from https://github.com/PacktPublishing/Building-Micro-Frontends-with-React/tree/main/ch3/my-mfe.

Let us quickly run pnpm install (if you haven’t already done so) and serve the respective apps to make sure that they are running properly.

Since we are going to build an e-commerce application, let us call our app eBuy. Feel free to rename your app folder to ebuy.

During active development, we would ideally...

CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
Building Micro Frontends with React 18
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist download Download options font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected

Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon