Routing is a simpler way to implement micro-frontend architectures using Blazor. To do this, you create a new project for each URL in the main menu of your application. Every module is accessible by a different route in the URL, and they are each independent project in the code.
We will explore another method that uses shared components later in the article.
Example of a micro-frontend architecture using Blazor as a component, with blazorComponent and blazorComponent2 as Blazor projects.
In the example below, from Lautaro Carro
, you will see a React application consuming a Blazor project that provides a component to compile C# code in the browser.
Check out the code for this example in this repository
Method 4 - Use shared components or a Razor class library
In Blazor projects, you can add a folder with the name Shared (you can find it within the base project); you can add shared components to this folder that you can reuse across the project in other components or pages. This is a very good and simple way to implement micro-frontend architectures, splitting the UI into small and reusable pieces with only one responsibility.
You can also create a Razor class library in order to share components across different projects, or create a NuGet package to share them with all the community here
Example project type of shared components for Blazor.
A shared component is a simple piece of code that is a combination of C# and HTML. Share components don’t need to specify a route. Shared components are referenced by the file’s name and will need the decorator [parameter] to specify which properties will be arguments when a module or component uses or calls it.
Example of a micro-frontend project that incorporates two shared components inside its pages or modules.
Check out this repository to see the entire code of this simple demo
How to get started with micro-frontend architectures with Blazor
That being said, the simplest way to get started or just explore how you might use them is to create shared components and then reuse small pieces of UI code. Shared components are almost mandatory in medium-to-large-sized applications; and, depending on your scenario, you might use shared components with another micro-frontend approach like routing. Whatever the approach that best suits your needs, I encourage you to explore using a micro-frontend approach with Blazor.