

The ds package is where the design system lives and is an example of a shared package that isn't a micro frontend, but a module, a typical library package from which you can statically import. The shell is always loaded, so it's bundling shared dependencies required by each application.

It a backbone that provides the root index.html file, loads micro frontends, and, in this example, also defines top-level routing. The shell package has a special role as an entrypoint for the entire application. Let's start with the basic structure of the monorepo, so you have a better understanding of where different pieces fall into place.Įach independent part of the application is a package that can be developed by an autonomous team. Use it as a reference for your own setup.
MONOREPO NPM WORKSPACES CODE
All this, while ripping the benefits of coherence that comes from working in a single repository, sharing configuration files, and keeping dependencies up-to-date and in sync.Ĭheckout the example on GitHub which contains all the code covered here that you can run and experiment with. The goal here is to create a setup in which multiple independent teams can develop a single application, test and deploy each package separately. Unfortunately, this is how sometimes micro frontends are portrayed, but this is not what this blog post is about.

Building one application using a dozen of different frameworks that your users have to download, and your organization has to maintain is still a bad idea. Independent doesn't mean that now teams can be collectively irresponsible. This is supposed to mitigate many of the challenges that come with large codebases. The core idea behind micro frontends is that each team can work independently of each other on a part of the application that they are responsible for. Right now, your time is better invested elsewhere. All that to say, you probably don't need to bother with a more complex setup if you're just starting your project and considering micro frontends. If that's your reality, you can pat yourself on the back because you're part of the team working on a successful product. Slowly but steadily, your CI/CD pipeline is getting longer, your development build is not as fast as it used to be, fans are spooling up when IDE starts indexing, and so on. Despite many of those challenges verge on project management, there's a set of intrinsic technical issues with the scale of the project. Read our angular tutorial and join our #DailyAngularChallenge where we learn to buildĬomponents, directives, services, pipes and complete web, mobile, and desktop applications with latest Angular version.ĭev Community 👈 to discuss anything related to Angular development.Large codes base and teams that work on them, face an additional set of challenges unknown or unidentified as an issue in smaller setups. ✋If you have any questions about this article, ask them in our GitHub Discussions 👈
MONOREPO NPM WORKSPACES HOW TO
In the next tutorial, we’ll learn how to streamline our angular library release with commit conventions and commitizen.
