micro-frontends

Inspiration

Micro-frontends approach gives a lot of autonomy to development teams, extending microservices into the world of frontend. With different parts, moving at different paces, maintaining a predictable test environment that integrates all of these services, becomes a challenge.

What it does

The template contains a deployment of two sample microservices: Payments and Orders. Each of them uses a different tech stack and has it's own UI component. The components are composed together in a SPA application.

The application demonstrates a simple workflow, in which an order is placed, then paid and processed. Each services takes its part in the processing and the steps are decoupled by using service bus.

How I built it

I wanted to explore the possibilities of utilising bunnyshell with OpenComponents. I started with standing up a registry and publishing a simple component. This required running a storage container as well. Having that, I added backend services. I specifically wanted to have at least two services, using different tech stacks (node and dotnet). Then, I added terraform modules for Azure Service Bus. Finally, everything was put together into a SPA, with signalR for pushing updates to the client.

Challenges I ran into

OpenComponents technology reqiures a registry to host the components. Each component has to be published to the registry. Publishing requires the registry to be running, which in turn depends on the storage availability. This process cannot be a part of the build step and has to run after starting the container. Eventually, I made it a part of entrypoint script. This means that components might not be available immediately after starting the environment.

Accomplishments that we're proud of

• integrating terraform with bunnyshell
• integrating SignalR into the solution
• being able to run the whole app in bunnyshell, locally using docker-compose and locally using development toolchains (running "bare-metal")

What I learned

• how to create bunnyshell environments
• what bunnyshell is good for

What's next for micro-frontends

Whe preparing the solution, I focused on making all the parts work nicely together. The next steps would be:

• improve the UI part and extend the sample workflow
• split the app code into two repositories - to better mimic how multiple teams would work
• create a sample build pipeline (i.e. Azure DevOps) that would spin up bunnyshell environment and run tests against it

Built With

• azure
• dotnet
• node.js
• open-components
• react
• typescript
• vite