Quite a mixed week for my challenge, I've played around with GitHub Actions, read the Practical Module Federation book, added messaging in my shell and played around with the new Angular CLI v11.0.0-next.4 build.

Angular v11.0.0-next.4

The new version of Angular is on the horizon and included in some of the latest builds is Webpack 5 compatibility.  This enables the use of Webpack 5 with the Angular CLI and with that would enable Module Federation to be used to build Microfrontend's.  I downloaded a couple of the v11-next versions and managed to get v11-next.4 to build an application using Webpack 5.  I then used Manfred Stayer's ngx-build-plus to use a custom Webpack config and configured Module Federation.  Everything builds fine and the remoteEntry.js file is generated but for some reason the Public Path setting is not working, the shell is loading the remote Microfrontend but then when loading the chunks its trying to resolve them from the shell's base URL.  I also came across another problem where the Shared modules option in Module Federation was throwing an error during the build, I didn't spend too much time on this due to the Public Path issue, I'm not sure if it is a problem with the latest Webpack RC or the angular build.  Will spend some time next week to try and get this working as this will improve the development experience massively and also enable the use of the latest Angular version.

manfredsteyer/ngx-build-plus

Extend the Angular CLI’s default build behavior without ejecting, e. g. for Angular Elements - manfredsteyer/ngx-build-plus

GitHubmanfredsteyer

Currently I'm using a custom build of the Angular CLI v9 to enable Webpack 5 use, and although it works I can only build in Production mode and every time I make a change I have to rebuild the app using Webpack.  Also the sass styles within a component are not being built correctly, the Angular build must be doing something funky to compile these a scoped styles, I spent quite a bit of time trying to get this working and just couldn't, I had to resort to have multiple global SASS files for the styles.

Day 36

Today I setup a separate GitHub workflow to build and deploy my Azure Function Api.  This was needed as the existing Azure Static Web App functions can't be used by other websites due to CORS configuration.

I setup the workflow to only trigger on changes to the Api folder and now when pushing in changes the Api is built and deployed into my Function App.  All works great and the setup was pretty easy due to many provided GitHub Actions.

Day 37

Finished the Practical Module Federation book today.  The book has 2 parts with the first part covering the details of Module Federation and then the second part covers a number of different usage scenarios.  The second part was really good, and gives you plenty of ideas on when you can use Module Federation, everything from Microfrontend's to shared components between backend Admin apps and frontend consumer websites.

Day 38

Added a new events service to the Shell-Core library and worked on getting the Feature Browser Microfrontend publishing an install event when the user selected to install a new feature.  The shell listens for the event and processes it to dynamically load the Microfrontend into the shell.  So good to see this working and really gets your thinking of all the areas in Enterprise Applications where it can be used.

Below are some screenshots of the Feature details page, and then a screenshot of the menu with the new feature installed after clicking the install button.  The navigation is dynamically updated when the feature is installed.

Day 39

Angular CLI 11.0.0-next.4 was released today so I downloaded it and created a new Shell project and configured it to use Webpack 5 for the build.  I also added a custom Webpack config with Module Federation details and got the application building.  Great news is that the app is building fine with the ng build command and using Webpack 5.  Will spend some time on this over the next few days, will build a separate Microfrontend and try and load into the shell.

Day 40

Had another go at the Angular CLI v11-next builds, I created an additional Microfrontend project within the same Angular Workspace.  I setup separate builds and custom Webpack configs for the projects and added some of the dynamic Module Federation code into the shell to load the Microfrontend.  All is building fine and both projects are generating the RemoteEntry.js files and the shell is also loading the remote Microfrontend entry file.

The bad news is the Module Federation build is not using the Public Path configuration so when the shell is trying to load a remote Microfrontend its trying to resolve the chunks using the shell's base url.  Still its getting close and just being able to use the ng build commands will be a massive move forward for the development experience. I feel like its so close, so might wait for a v11-next.5 build and hopefully update my current shell and Microfrontend to use Angular 11 instead of the custom Angular 9 build I'm using

Day 41

Watching some of Manfred Steyer's videos on Domain Driven Design from NG Conf.  Thinking about how the domain driven aspect helps with how you might create vertical slices with microfrontends, microservices and a datastore.

Day 42

Attempted to get my Angular 11/Webpack 5 application working again today.  I created a microfrontend app last week but couldn't get it to load the remote modules due to it using the current browser location.  This was due to the public path setting within the webpack config not being applied.  Not sure if this is due to the RC of webpack so I modified the remoteEntry.js and hardcoded the remote URL in and got it working, although only partly as the shared options are not working so its not sharing the angular runtime :(

Good progress has been made this week, in summary I have created a feature browser microfrontend which is backed by an Azure Function API with a Azure CosmosDB for the data.  The microfrontend is hosted using Azure Static Web Apps and CosmosDB is deployed using the new serverless option so everything is running in a serverless manner.

Azure Static Web Apps

For quite a while people have been using Azure storage to host static websites which provides a very low cost serving option as storage is very cheap.  This year Azure announced a new static website offering which enhances the storage hosting options and provides some extra features such as Custom Domains, CI/CD integration with GitHub, global availability, integrated serverless APIs and authentication/authorisation.

The integrated deployment adds a GitHub action to your repository which builds and deploys your static website.  Also if there is a azure function in the same repo it will build, provision and deploy the function without any setup.  I initially went down this route and must say it worked seamlessly, I created a function API which retrieved a list of features from a cosmos database.  When I pushed the code in, it built and deployed both the frontend and the function.  All was looking great, however the built in functionality takes a lot of the configuration away from you and the major blocker for use with microfrontends was the CORS configuration.  You have no control over the function config and the default CORS configuration only allows the corresponding static website to communicate with it.  This meant I couldn't use the integrated deployment/provisioning for the microfrontend as when used within the shell which is a separate website the function could not be called due to CORS.

In the end I created a separate function application and deployed my API to that, configured CORS to allow the shell host to call it and all was good.

Overall I feel like its been a good week with both the shell and features microfrontends working and deployed to the cloud, below is a sneak peak of the shell with the features microfrontend remotely loaded into it.

Day 29

Setup the backend for my features microfrontend, using Azure Functions and the new serverless version of CosmosDB for the data storage.  The microfrontend is also hosted on Azure Static Web Apps so its all serverless

Day 30

Spent some more time on the backend today.  Azure Static Web Apps enables you to deploy a function while deploying the site and it works seamlessly and really easy to setup, however unfortunately it wont work with my microfrontends as it defaults the CORS configuration to only allow calls from the Static Web App.  The microfrontends get loaded into a shell and executed within the shell, so any calls to apis made from the microfrontend happen within the shell's context and url so the api gets blocked by CORS.

In the end I had to deploy a separate function app and now its all working good.

Day 31

Added another function to enable the creation of new features in the CosmosDB. Added a create feature component to the features app and hooked it all up.  Also had a play around with the Monaco editor but couldn't get the compilation working with Angular.

Day 32

Today added functionality to the Features App and microfrontend, I can now add features with Markdown descriptions and view the details of a feature from within the feature browser microfrontend.

In other news Webpack 5 is now in RC and the angular CLI team recently committed some changes for supporting Webpack 5.  Hopefully this means Angular CLI 11 will support Webpack 5 which will mean a more integrated development experience.

Day 33

Worked on some of the styling today to get the Markdown descriptions rendering within the feature details page.  The page is looking good and tested loading the feature browser within the shell and all looks good.

Angular CLI also releases v11-next.3 today, some more Webpack 5 commits so it doesn't look like its far off at all.  I did download it and had a little play around, updated it to Webpack 5 but unfortunately was getting errors with some of the Webpack plugins.  I don't think full support is there yet so didn't too much time looking into the build issues

Day 34

Not much code today, instead I spent some time reading a new book I got from Zack Jackson and Jack Herrington: Practical Webpack Module Federation.  The books gives you the details of Module Federation works under the covers.  So far very good read.

Day 35

More reading again today, I've almost finished the Practical Module Federation book.  Really liking the second part of the book which goes through some usage scenarios.

One scenario went into the details of how to build reliable web applications which use Module Federation.  It goes into the details of how versioning works when resolving dependencies, and then presents an idea of providing the microfrontend as both a remote dependency and also as a local NPM dependency.  This enables the web application to fall back to the local NPM version if the remote is not available for any reason.  This is an awesome feature, you can develop locally against your microfrontend and even get type safety using shared services/components, but then at runtime you can load the dependency from a remote.  This enables you to push out patch releases to the microfrontend and all apps consuming it are then using the new version without having to re-compile and re-deploy.  Obviously the versioning needs to be strict so that you don't push out any breaking changes and Module Federation allows you to set semantic version demands on the remote dependencies, so if you reference ^1.1.6 and push out a new ^1.1.7 version it will load fine, however if you push out v2.0.0 it wont load the remote and then you can fall-back to your local version.

I plan on doing some blog posts around this, however I want to wait until the new Angular CLI supports Webpack 5 as the setup a build is a little fragile at the moment.  I want to create some blog posts which guide the developer through the process of setting up and creating an Enterprise Microfrontend application.

Its been a busy week again this week, mainly focused on getting a second microfrontend project created which is then dynamically loaded into the shell.

The project is created and there is a separate GitHub repo for it so it can be built and deployed independent of the shell.  Below is a sneak peak of how the shell looks with the features micorfrontend loaded.  The features navigation item at the top is dynamically added from a microfronted array and when clicked the route is lazy loaded from a remote URL using Webpack's Module Federation.

Day 22

Created my second microfrontend today, a feature browser to view a list of features available to load into the shell.  Each feature is a microfrontend and selecting to add a feature will add it to the Shell configuration and load it remotely into the application.

Had some Webpack issues again which is no surprise, everything was compiling ok but when loading it into the shell it was throwing chunk loading errors.

Day 23

Good day today, fixed the Webpack config issue I had after sleeping on it :) I now have a separate microfrontend project which is dynamically and remotely loaded into the shell.  Plan is to work more on some shared services provided by the shell to enable the microfrontends to integrate with the shell.

Day 24

Another great day today, got some shared libraries in order using the Module Federation configuration and now my second microfrontend is sharing the already loaded Angular Material libraries instead of redownloading.  Original size of the microfrontend been loaded was 485kb, after marking the Angular Material libraries as shared the loading size went down to 35kb.

I did hit another issues today with my dev container and the network.  I have been using a local NPM server to serve up a package for the Shell-Core library but because I'm using a dev container it cannot access other containers on the network.  After a bit of digging I found the issue and updated my dev containers to connect to the bridge network which then allowed them to access other containers running on the local machine.

Day 25

Playing around with styles again today. Yesterday I got the angular material libraries shared between the shell and microfrontend, however my style overrides for the material card were not been applied. I noticed looking through dev tools that there were some material styles loaded after my own style sheets. Did some digging and found out the material components dynamically add the base styles when loading. Spent some time looking at how to customise this and found a solution which involved configuring Webpack to include my styles in the body rather than the head, this ensured that my styles would override the injected material styles

Day 26

Setup some GitHub actions today to build and deploy my microfrontends to azure static web apps. So now whenever I push into master it will automatically be deployed to azure static web apps, and best of all its free ATM as it’s in preview.

Checkout my GitHub repo below to see the microfrontend code along with the deployment actions.

mellondev/microfrontend-features

Contribute to mellondev/microfrontend-features development by creating an account on GitHub.

GitHubmellondev

Day 27

Separated the dev and prod Webpack configs today along with a common base config and then used merge for the specifics. Got the apps deploying using prod mode and running local in dev mode.

All code is available on my GitHub page, there are 2 repos for the microfrontend work I’m doing, the shell and a features microfrontend

mellondev - Overview

mellondev has 4 repositories available. Follow their code on GitHub.

GitHub

Day 28

More Webpack config today, I created separate dev/prod configs yesterday but the AotCompiler options were not replacing the environment.ts file. In the end had to create separate main.ts and bootstrap.ts to manually set it to production mode

Last week I created a list of tasks I would like to do as the first week was a bit all over the place, I managed to complete most of the tasks and was planning on doing this same this week but never got around to creating a list.

This week has mostly been spent on adding some style to the shell, I don't know why but when I'm prototyping I feel like I progress more when it looks better.  

One of the big issues I have yet to figure out with the custom webpack builds is getting the scoped component sass files to compile.  For some reason when they are referenced in the component it wont compile them, throwing a document type error.  It works fine when using an app wide sass file, but not with the scoped component level files.  I spent a good few hours on this and in the end decided to give up, and took the approach of using global styles and will break them up and reference them into the main sass file.

Towards the end of this week I created a separate repo for a microfrontend, I wanted to see how working on the microfrontend in isolation would work out.  I got a new project setup, building and loading into the shell, so overall its been a pretty decent week.

Day 15

I played around with the new pre-release of Angular 11 today, hoping that the new webpack 5 type support would enable me to use the build in custom web pack builders with webpack 5.  Unfortunately I was hitting some new errors so quickly decided to leave it and wait until more webpack 5 support is added.  I have it working in Angular 9 and will continue down this path to experiment with microfrontends.

I also began adding authentication to my shell application, I created a free Auth0 account and then tried the angular-oauth2-oidc library created by Manfred Stayer.  This library looks promising, but for some reason just wasn't working correctly with Auth0, it was constantly refreshing the screen.  I was version 9 of the library and after reading through the docs more I saw that Auth0 was not supported until v10 :(.

Day 16

I continued trying to add authentication to the shell and decided to use Auth0's SPA library which worked great.  Just added the NPM package, injected the service and setup the config and it all worked first time.

Day 17

Mainly been playing around with the styles again, I dont know why I just can't leave them alone, I've spent so many hours messing about I really need to let it go :).

Spent a bit of time in Photoshop today, been a while since I last touched Photoshop.  I wanted to play around with the look and feel of the shell app and with the custom builds and sass issues it was too much effort to play around in css.  The design I did included the MellonDev logo faded into the background of the shell, looked good in Photoshop so then tried to apply it using css.

I added the image to the sass file using background-image css and then when compiling it wasn't working.  The compiled sass was trying to reference the image as an object.  I didn't spend too much time on it, I decided to do some more reading about webpack builds and style-sheets.

Day 18

Not so much coding today, my MSDN Azure account ran out of credits so the MellonDev blog was down.  I spent some time looking at alternatives, I've always liked the idea of static site generators but never had time to try them out, so today was a great opportunity to give it a try.

I spent a few hours reading up on some tools and decided to give Hugo a go.  They have some great docs and also quite a few different themes that can be used.  My thoughts were to create a new blog using Hugo and then publish it using Azure Static Web Apps which are free at the moment.  Azure Static Web Apps is built on top of Azure Storage so I think they will be pretty cheap when out of preview.

I downloaded Hugo, created a few pages and applied a theme, all seems to work great and with a bit more effort I could get the blog building when pushing changed into github.  I'm just playing around locally at the moment but can see the benefits of using this going forward.  

Rather than lose focus on the microfrontend project I'm working on I decided to leave Hugo for another day, I don't want to spend my free time sorting my blog out when I can be working on this project.

Day 19

Webpack config again today, I decided I'd tackle the background-image issue.  Although the background-image is not a show stopper I believe these little issues help with learning, I know more about webpack configs than ever before, Angular does a good job of hiding all the details for you so I've never had a need to learn it before.

Reading through the docs and reading quite a few stack-overflow articles I finally fixed the issue.  I needed to configure webpack with a file-loader plugin which can be configured to handle the file references.

Day 20

Coding today rather than config.  I started creating a new shared library that encapsulated the authentication services.  The idea with this is to enable the microfrontends to use this service to get access to the authenticated user details.

Day 21

I've made it to the end of week 3.  The microfrontend project is coming along nicely.

Created a new repo with a separate microfrontend project for managing the features (microfrontends) within the shell.  This microfrontend will provide a UI to the shell to enable the user to browse through all the available microfrontends and click to add one into the shell dynamically.

The shell will load and show the microfrontend to browse the features and then when the user selects to add a feature the microfrontend will interact with the shell's shared service to add the feature and load it into the shell

So the first week was a little all over the place, I watched and read a lot of material on microfrontends, Webpack, nrwl nx and devcontainers.  My main goal for this #100daysofcode is to investigate developing microfrontends with angular and to see how the workflow would work in an enterprise application.

So far I have managed to get a shell application loading remote microfrontends and sharing a service between the microfrontends to enable communication and access to shell functionality such as authentication, user profile and notifications.

To try and stay more focused this week below is a list of what I was aiming to complete:

1. Create a new Shell Application which looks less like a prototype
2. Add authentication to the shell
3. Create a shared shell library and provide access to the authenticated user details such as tokens for calling backend services
4. Create a microfrontend which displays the logged in user, calls a dummy backend with the users auth token and adds a notification to the shell

Day 8

Trying to build a shared library within the shell/microfrontend workspace.  Created a new library project and built but for some reason could not reference it within the shell project.  Also the build output seems different to the usual Angular library output, which I suspect is down to the custom Webpack config and build.  I was trying to build the library with the Shell so I could use tsconfig paths and not have to keep rebuilding the library when I make changes.

Spent a few hours on this and gave up, not sure I fully understand what the custom Webpack build is doing, so need to understand that more.

So I created a new library project within a new workspace and published an npm package to a local npm server (Verdaccio).  Installed this into my microfrontend shell and it still couldn't see the module :(. Decided that was enough for today, come back to it tomorrow with a clear head.

Verdaccio is great for local development, runs within a docker container, one line and it's up and running.  Great to test publishing of an npm package

Verdaccio · A lightweight open source private npm proxy registry

A lightweight open source private npm proxy registry

Gatsby

Day 9

So I finally got to the bottom of why my library wasn't been found in my shell project.  I was building the library and then npm publishing it from the source folder instead of the dist folder  🤦‍♂️

After fixing why my shell wasn't seeing the module I got on with trying to use and share a service from the library, all looking good in the ide but when building it blew up :(.  Because I created the library in a new workspace it created it using Angular 10, and importing an Angular 10 library into an Angular 9 app doesn't work.  So downgraded the library to Angular 9 and all working now.

Day 10

I have my library installed and working in my shell, so today I tried adding it to one of the microfrontends.  The service I created is a simple notification service with a createNotification method and a list of notifications.  The idea is for the shell and microfrontend to share the same instance and both be able to add notifications to it.

My first attempt failed :( for some reason the microfrontend was getting its own instance.  Did some reading and updated the library to expose a module and use the forRoot static method to provide the service, but again still didn't work :(.

I finally got this working after a couple of hours, I forgot to update my shell and microfrontends Webpack config to mark the library as shared.  Once I did that it worked!.

A great day today, finally have the barebones of an Angular shell loading external microfrontends which are using some core shell services to communicate and interact with the shell.

Day 11

After a really good day yesterday, today has not been too good.  I've spent hours trying to get the sass styles to compile with the custom webpack builds and cannot get it working.

I guess these are the sort of issues I'm going to come across when using unreleased frameworks.

Day 12

Still stuck on my webpack 5 config with custom angular builds.  My apps and html templates are building fine, but when adding the style sheets in it just fails :(.  I've tried so many different combinations of sass loaders and config that I'm starting to forget what I've already tried.

I did feel like I was getting closer though, found an old repo with a custom webpack config for an angular 8 app and noticed it was using a different loader for the .ts files, it was using an AngularTemplate loader.  Gave that a try and the app and html still build fine, but the sass still doesn't

Day 13

Had another attempt with the sass/css compilation, got a little further but still no luck.

Angular released their v11-next version of the cli and looking through the commit logs webpack 5 support is not far off, there is a couple of commits adjusting types for webpack 5.  Hopefully they will update to use webpack 5 soon and I may revisit it then.

Added a bit of style to the app with a toolbar/content/footer layout using flex.  For now I have added a root sass style sheet now compiling this as part of the app.

Day 14

Not so much coding today, thought I would have a break from the webpack config and do some reading.  I've read a great article on feature flags within angular and been thinking about how feature flags along with microfrontends could work together.  Could be quite interesting within an enterprise application

Rather than do a post everyday of my progress I thought it best to do a weekly post so I can keep a log of what I've been doing.

So how did the first week go

So far its gone pretty well, I usually get up quite early so I have a couple of hours every morning to do my #100daysofcode challenge before work.  The weekends are a bit more challenging with two toddlers and the wife working, although I do usually get a couple of hours when my youngest goes for her nap.

This first week has mostly been research and playing around with stuff.  I have spent a lot of time reading and watching talks on Microfrontends and also Nrwl Nx.  I have a mono repo setup using Nx workspaces and have been exploring the additional tools Nx gives you.

Nx uses cypress and jest for tests which is new to me, I'm really liking cypress for the e2e tests.  Nx also has a great dependency graph tool which shows graphically what your dependencies are, this is great as most dependency graphs are created manually and quickly go out of date, this tool uses your projects and gives you a live dependency graph.

Day 1

Created an Angular Workspace with some library projects to see how they work together.  I like the workspace idea for managing multiple projects, I've been a long time c# .net developer so I'm used to this style with Visual Studio Solutions.

Started reading the Nrwl Nx documentation and watched the intro videos.

Day 2

Setup a new mono repo with an Nx Workspace.  Just followed the Nx tutorial and got an app, library and node api set up.  

Explored the e2e tests with Nx which uses cypress, so just playing around with the project for now.

Day 3

VS Code Dev Containers

Exploring VS Code dev containers.  Setup a dev container config file and added a custom docker image to do the development in based on a cypress/node image.

Really loving the idea of dev containers, from within VS Code you can select to open a folder or GitHub repo in a dev container.  If the repo has a dev container settings file it will use that to build a local docker image based on the settings.  This means you have a docker container all setup with the tools required for the repo you are about to clone/open.  Also the dev container can specify which VS Code extensions to use for the project, so you can ensure you have all the tooling required without having to spend hours setting everything up.

This allows me to have all the tools isolated in a container and not polluting my computer, working in a large development team I can see this bringing massive benefits.

My dev container is tailored for Angular, Nx and Cypress.  The container pre-installs the Angular cli , Nx cli and also pre-installs cypress all ready for browser testing.

Visual Studio Codespaces

As well as dev containers I've been looking at Code Spaces, these are virtual environments which run in Azure Cloud, I can have an environment all setup and running remotely, which I can then connect to using VS Code, a browser or Visual Studio.

This is similar to dev containers but all running remotely.  The benefits I can see from Codespaces is the performance, it would allow you to code on a more powerful machine, so you could say have a low powered laptop with VS Code installed and remotely develop on your more powerful remote environment.  Also the VS Code in browser editor is pretty neat, I can connect to my environment from the browser, this could potentially allow development from say a chrome book and could be great to quickly jump onto a bug or review a pull request even if you haven't got your dev machine to hand.

Day 4

Today I finally had a play around with my main goal of the #100daysofcode challenge, microfrontends.

I pulled a couple of example repos, explored the code and then added a new microfrontend app to a shell.  This was based on a standard Angular shell with webpack 5 module federation.  It was pretty straightforward to add a new one, although I need to spend some more time understanding how it really works.

After creating a new app I begun exploring how they could communicate to the shell, I wanted to have a notification area in the shell and then for each microfrontend to post notifications to the shell.  I played around with a shared service but couldn't quite get it working, so the next few days will be working on that and trying out a couple of different ideas such as a message-bus, events or the shared service approach.

My initial thoughts are to have a shared core shell library that each microfrontend references which include some shared types and some shared services.  These services will enable the different microfrontends to have some interaction with the shell.  Examples I thought about where the notifications, user/auth service etc..

Overall a good day, but left feeling I have a lot more questions and research to do.

Day 5

Started to spend some time trying to understand webpack a lot more.  I decided to complete a Udemy course on it and have almost completed it.  The course covers webpack 5 and the configuration, so provides a good intro to how to set it up.  There is also a new module on the course covering Module Federation.

Webpack 5: Getting Started 2020

<p>Webpack 5 Course For Beginner/Intermediate Developers</p><p> </p><p>This course is <strong>UP-TODATE</strong> with the latest Webpack version 5 (@NEXT version)</p><p>Webpack 5 still not officially released</p><p>It is available as webpack@next on npm</p><p><br></p><p><em>At the end of the course …

Udemy

Day 6

Finished the Udemy course on webpack and understand how the plugins work and how to use multiple configs together.  Also did a bit of coding today playing around with building a library that will be shared between the microfrontends to provide some basic interactions with the shell.

Day 7

Spent a coupe of hours again today trying to get the Angular library to build along with the microfrontends, just can't seem to get it work.  The microfrontends build fine, and the library does build but not in the usual Angular Library format, which I suspect is due to the custom builder.

What I'm hoping to get is a shell angular app which also has a shell library application with some shared services.  The idea then is each microfrontend will reference the shell library (via an npm package) which will then give it access to some shell functionality, like authentication, user, notifications.

Version hell

The one issue with using a shared library is that the microfrontends could all end up with different versions of the said library.  If we are using a monorepo for all the microfrontends then this will be fine as they will all share the same dependencies, but if they are developed in separate repos then there is potential for version mismatch.

I read through a great article from Manfred Steyer which goes into the details of how shared libraries and versioning works when using webpack Module Federation. There is a great example showing how webpack handles the version mismatch and it all comes down to Semantic Versioning, so as long as the versioning strategy is correct then we should be good.

Microfrontends: Escaping Version Hell with Module Federation - ANGULARarchitects

Semantic Versioning, Fallbacks, and Singletons

ANGULARarchitects

Why

I read and watch a lot development content and recently have been watching Manfred Steyer's angular enterprise architecture talks.  Years ago while at the Angular Connect conference in London there was a demo of the new lazy loading features available.  After the demos there was a Q&A and I asked "would it be possible to lazy load from a different URL with the idea of providing a microfrontend along with a microservice".  The response I got was it may be possible but why would you want to do that.  

The new lazy loading features and the thought of microfrontends got my brain flowing with ideas.  In my day job we develop enterprise applications and have quite a few angular applications.  Most of these applications have very similar functionality which has led to the development of some shared micro-services which multiple application use.  This is all good for sharing the backend services but what I noticed was a lot of the applications had developed very similar UI's which used the microservices.

So I always have plenty of ideas flowing around in my head but never seem to get the time to explore these ideas.  Watching Manfred Steyer's talks about enterprise angular architecture has sparked my interest in exploring this idea again, so to make sure I actually follow through with this I have set myself the #100daysofcode challenge to ensure I make time to explore these ideas.

I've put together a list of things I want to explore during my #100daysofcode and also put a final goal statement for something to aim for.

What i'd like to do

• Investigate structure of enterprise applications with Angular

  • Mono-repos
  • Nx Workspaces

• Create an application shell

• Create a micro-frontend that can be loaded into the shell as libraries

  • Potentially enabling a micro-frontend to be installed using an NPM package

• Themeing, Microfrontend to take on the application shell theme

• Integration with the shell

  • Navigation Menu integration
  • Notifications
  • Authentication
  • Security Roles/Permissions
    • Microfrontend should be able to provide permissions to application which can be managed in the user management areas of the shell

• Investigate ability to dynamically add features which would dynamically load microfrontends into the shell

  • VSCode market place, admins can browse and select features
  • Investigate a feature been a microservice with a microfrontend

Final goal

The final goal I would like to achieve at the end of my #100daysofcode is

Angular application shell for hosting multiple microfrontends which can be used to build up an enterprise application. The microfrontends can be developed within a mono-repo which includes the shell or can be developed in isolation to the main application, this would enable development of new features which can be easily added to a new project via npm or even dynamically from a market place. Each feature would provide the frontend and will integrate with the shells core features such as navigation and authentication. The ultimate goal would be an application where microfrontends can be added from a marketplace similar to how VSCode extensions are managed

I've been wanting to play around with the Cosmos DB provider for a while, so when EF Core 3 was released I decided its time to take a look.

I use Azure Cosmos DB for a few projects and have always found the SDK to feel clunky, although the new version 3 SDK looks much better.  I also use Entity Framework Core in many of my projects and really like the simplicity of using it, so i'm excited & hopeful about the new provider.

The Cosmos DB provider will help remove a lot of that boiler plate code we have to implement when using the SDK.  The provider will enable us to use the Entity Framework and all the good things it provides along with Cosmos DB for persistence.

For this post I'm assuming you have some knowledge of Cosmos DB and Entity Framework.  Microsoft docs are great for an introduction to Cosmos DB and Entity Framework if not
Entity Framework Core Docs
Cosmos DB Docs

So lets get started and have a play around with it...

Cosmos DB

I'm going to use a Cosmos instance that I've already created in Azure, if you don't have an Azure account you can create one for free to give Cosmos a try or alternatively you can install and use the Cosmos DB Emulator

NOTE: The emulator currently only works on Windows

Project setup

You can view this posts sample at the following github repo
CraigMellon/efcore-cosmosdb no-readme

You will need to download and install the .NET Core 3.0 SDK which can found here: https://dotnet.microsoft.com/download/dotnet-core/3.0

Lets create a new empty console app using the dotnet CLI and add Entity Framework Core and the Cosmos provider nuget packages.

dotnet new console

Install Microsoft.EntityFrameworkCore.Cosmos Nuget Package

dotnet add package Microsoft.EntityFrameworkCore.Cosmos

Adding the Cosmos nuget package will also add Entity Framework Core package as a dependency

Lets get started

For the first experiment we will use a simple Job model with an embedded Address type:

    public class Job
    {
        public Guid Id { get; set; }
        public Address Address { get; set; }
    }

    public class Address
    {
        public string Line1 { get; set; }
        public string Line2 { get; set; }
        public string Line3 { get; set; }
        public string Town { get; set; }
        public string PostCode { get; set; }
    }

We need to create a DbContext and configure it to use the Cosmos provider, add a new JobContext file with the following code

    public class JobContext : DbContext
    {
        public DbSet<Job> Jobs { get; set; }

        protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder) {
            optionsBuilder.UseCosmos(
               "*YOUR-COSMOSDB-ENPOINT*",
                "*YOUR-KEY*",
                "EFCoreTest"
            );
        }

        protected override void OnModelCreating(ModelBuilder modelBuilder)
        {
            modelBuilder.Entity<Job>().OwnsOne(j => j.Address);
        }
    }

For simplicity we have hard-coded the endpoint and key into the DbContext, I wouldn't recommend doing this in a real application

We are overriding the OnModelCreating method to configure the Address as an owned entity of Job, this will ensure that the Address entity is embedded into the Job document when saved

Now that we have the DbContext and models setup lets update the Program.cs to create a Job and save it into our Cosmos database using EF Core

        Console.WriteLine("Welcome to the EFCore Cosmos DB Provider...");

        var job = new Job
        {
            Id = Guid.NewGuid(),
            Address = new Address
            {
                Line1 = "21 Some Street",
                Line2 = "Somewhere",
                Town = "Birmingham",
                PostCode = "B90 4SS",
            }
        };

        using (var context = new JobContext())
        {
            context.Database.EnsureCreated();

            context.Add(job);

            context.SaveChanges();
        }

        using (var context = new JobContext())
        {
            var loadedJob = context.Jobs.First();
            Console.WriteLine($"Job created and retreived with address: {job.Address.Line1}, {job.Address.PostCode}");
            }

The context.Database.EnsureCreated() will create a collection in your Cosmos DB if it doesn't already exist

If we run this code it will add a document into our Cosmos DB, and if we take a look in the Azure Portal we can see that a new collection named JobContext has been created and a new document has been added.

By default the cosmos provider will use the name of your context as the collection name.  This can be overridden in the OnModelCreating method of your DbContext.

Lets set the default name of the collection to Jobs, re-run our app and take a look at our database again in the portal.  Add the following line to the top of the OnModelCreating method in our JobContext.cs

modelBuilder.HasDefaultContainer("Jobs");

Embedded collections

As well as embedding entities within your document you can also embed collections which will embed the entities as an array in your document.  To test this out we will add a new Contact entity and add a collection of contacts to our Job.

    public class Job
    {
        public Guid Id { get; set; }
        public Address Address { get; set; }

        public List<Contact> Contacts { get; set; }
    }

    public class Contact
    {
        public string Title { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string TelephoneNumber { get; set; }
    }

Also update the JobContext OnModelCreating method to configure the Contacts on Job as an owned collection using the OwnsMany method

        modelBuilder.Entity<Job>().OwnsMany(j => j.Contacts);

Now update the Program.js to add a list of contacts to our job.

We now have multiple documents in our collection so the call context.Jobs.First() will no longer guarantee to retrieve our new job, instead we will update it to fetch the Job with the Id we just created

Console.WriteLine("Welcome to the EFCore Cosmos DB Provider...");

var job = new Job
{
    Id = Guid.NewGuid(),
    Address = new Address
    {
        Line1 = "21 Some Street",
        Line2 = "Somewhere",
        Town = "Birmingham",
        PostCode = "B90 4SS",
    },
    Contacts = new List<Contact>()
    {
        new Contact { Title = "Mr", FirstName = "Craig", LastName = "Mellon", TelephoneNumber = "34441234" },
        new Contact { Title = "Mrs", FirstName = "Cara", LastName = "Mellon", TelephoneNumber = "53665554" }
    }
};

using (var context = new JobContext())
{
    context.Database.EnsureCreated();

    context.Add(job);

    context.SaveChanges();
}

using (var context = new JobContext())
{
    var loadedJob = context.Jobs.First(x => x.Id == job.Id);
    Console.WriteLine($"Job created and retreived with address: {job.Address.Line1}, {job.Address.PostCode}");
    Console.WriteLine($"  Contacts ({job.Contacts.Count()})");
    job.Contacts.ForEach(x =>
    {
        Console.WriteLine($"    Name: {x.FirstName} {x.LastName}");
    });
}

If we now have a look on the portal we can see the Contacts have been embedded into our Job as an array

Multiple models in one collection

The Cosmos provider supports storing multiple entity types in the same collection.  To do this EF Core adds a field named Discriminator to our documents. If we take a look at the last document in the database we can see the objects each have a Discriminator field.

Also notice the id column which is unique for each item in the Cosmos collection/partition, EF Core generates the value by concatenating the discriminator and the primary key values, using '|' as a delimiter

Linked Entities/Documents

As mentioned above EF Core can store multiple entities within the same collection. To see how this works lets create a new entity called Resource and add it as a linked entity to our Job.

First create a new model for our Resource and add a new property to our Job named AssignedResource with a type of Resource, we will also add AssignedResourceId which will give us access to the Id of the resource linked to the Job.  If we don'd add this field EF Core will automatically add it under the covers but we wont have easy access to it without this property.

public class Job
{
    public Guid Id { get; set; }
    public Address Address { get; set; }

    public List<Contact> Contacts { get; set; }

    public Guid AssignedResourceId { get; set; }
    public Resource AssignedResource { get; set; }
}

public class Resource
{
    public Guid Id { get; set; }
    public string Title { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string TelephoneNumber { get; set; }
}

Now we need to update our JobContext to configure the Resource as a linked entity using the HasOne method on the model builder.

protected override void OnModelCreating(ModelBuilder modelBuilder)
{
    ...

    modelBuilder.Entity<Job>().HasOne(j => j.AssignedResource);
}

Update the Program.cs to now create a resource with the job

Console.WriteLine("Welcome to the EFCore Cosmos DB Provider...");

var job = new Job
{
    Id = Guid.NewGuid(),
    Address = new Address
    {
        Line1 = "21 Some Street",
        Line2 = "Somewhere",
        Town = "Birmingham",
        PostCode = "B90 4SS",
    },
    Contacts = new List<Contact>()
    {
        new Contact { Title = "Mr", FirstName = "Craig", LastName = "Mellon", TelephoneNumber = "34441234" },
        new Contact { Title = "Mrs", FirstName = "Cara", LastName = "Mellon", TelephoneNumber = "53665554" }
    },
    AssignedResource = new Resource
    {
        Id = Guid.NewGuid(),
        Title = "Mr",
        FirstName = "Bob",
        LastName = "Builder",
        TelephoneNumber = "0800 1234567"
    }
};

using (var context = new JobContext())
{
    context.Database.EnsureCreated();

    context.Add(job);

    context.SaveChanges();
}

If we run this code and take a look in the portal we can see that two documents have been created.  One for our Job and one for our Resource, also notice that EF Core has set the AssignedResourceId field in our Job to the id of the new Resource document:

Loading linked entities

Normally to fetch our Resource along with the Job we would use the Include() method when fetching the Job, in the relational world EF Core would translate this to a join on the backend and return the Job with the Resource populated.  If we try to do this with the Cosmos provider EF Core throws an exception informing us that joins are not yet supported.

The current version of the Cosmos provider does not support joining entities so we can't retrieve a Job with the Resource in one go. This feature is on the road map and hopefully it will drop into the 3.1 release

So how can we get the Resource populated on the Job when fetching from the database?

We could load the Job first and then load the Resource after as we have the AssignedResourceId on the Job.  Lets try that out and see how it would work.

First we need to add a DbSet for the Resource to our DbContext:

    public DbSet<Resource> Resources { get; set; }

Next lets update the loading portion of our code in Program.cs to fetch the resource and assign it to the job, then finally lets output the resource name to the console:

using (var context = new JobContext())
{
    var loadedJob = context.Jobs.First(x => x.Id == job.Id);

    // now load the resource and assign it to the Job
    var resource = context.Resources.First(x => x.Id == loadedJob.AssignedResourceId);
    loadedJob.AssignedResource = resource;

    Console.WriteLine($"Job created and retreived with address: {job.Address.Line1}, {job.Address.PostCode}");
    Console.WriteLine($"  Contacts ({job.Contacts.Count()})");
    job.Contacts.ForEach(x =>
    {
        Console.WriteLine($"    Name: {x.FirstName} {x.LastName}");
    });

    Console.WriteLine($"  Assigned Resource: {loadedJob.AssignedResource?.FirstName} {loadedJob.AssignedResource?.LastName}");
}

If your code ran successfully you should see output similar to below:

Job created and retreived with address: 21 Some Street, B90 4SS
  Contacts (2)
    Name: Craig Mellon
    Name: Cara Mellon
  Assigned Resource: Bob Builder

Although this works its not the cleanest code, hopefully we will be able to include linked resources in the next version of the Cosmos provider.

Loading multiple linked entities

Another scenario I thought about is when we have multiple jobs all linked to the same Resource.  How could we load them efficiently?

When we fetch an entity with EF Core it begins tracking that entity in the DbContext.  If we know the Resource before hand maybe we could pre-load the resource into the DbContext and then when loading a Job which is linked to the Resource hopefully EF Core will automatically reference the AssignedResource to the entity already in the DbContext.

To test this option I will perform the following steps:

• Create a Resource entity
• Create 2 Job entities
• Assign the Resource to the 2 jobs
• Save to the database
• Create a new DbContext instance (this will ensure we have a clean DbContext with no tracked entities)
• Load the Resource
• Load the 2 Job entities
• Check to see if the AssignedResource has automatically been set by EF Core using the pre-fetched Resource

Great news is this seems to work, so if the linked entity is already been tracked by EF Core then when you fetch your entities which link to it EF Core will automatically reconstruct your entities

var resourceId = Guid.NewGuid();

var resource = new Resource
{
    Id = resourceId,
    Title = "Mr",
    FirstName = "Bob",
    LastName = "Builder",
    TelephoneNumber = "0800 1234567"
};

var job1 = new Job
{
    Id = Guid.NewGuid(),
    Address = new Address
    {
        Line1 = "Job 1 Address"
    },
    AssignedResource = resource
};

var job2 = new Job
{
    Id = Guid.NewGuid(),
    Address = new Address
    {
        Line1 = "Job 2 Address"
    },
    AssignedResource = resource
};

using (var context = new JobContext())
{
    context.Database.EnsureCreated();

    context.Add(job1);
    context.Add(job2);

    context.SaveChanges();
}

using (var context = new JobContext())
{
    var loadedResource = context.Resources.First(x => x.Id == resourceId);

    // Load all jobs with the same assigned resource id
    var jobs = context.Jobs.Where(x => x.AssignedResourceId == resourceId).ToList();

    jobs.ForEach(job =>
    {
        Console.WriteLine($"Job: {job.Id} - Resource: {job.AssignedResource?.FirstName} {job.AssignedResource?.FirstName}");
    });
}

Summary

Overall I'm liking the the new Cosmos provider for EF Core, It simplifies the creation and querying of your documents with Cosmos significantly.

Granted the scenarios above are simple, I still have many more advanced scenarios I'd like to try. (Maybe another post):

The current limitations of the Cosmos provider are documented here:
Cosmos Provider limitations
Cosmos provider feature backlog

When I moved into my new house there was an office shed out back that was previously used as a home gym.  It was a great size, insulated and would make the perfect home office, so I set about creating my own space away from the house to do my coding.

This post will be picture heavy and contain numerous photos of the office as it is.  I still have a few tweaks I want to make so expect a future post when the new additions arrive.

The office was quite a distance from where my WiFi router was so to start with I had to run a cat6 cable all around the house which ended up been just under 50m in length. Below is some pictures of how the office started and my network cable run.

The Desk

I spent many hours looking for the right desk, I really liked the all white setups but at the same time thought they looked a bit cold and not very relaxing.  I saw a great picture on Pinterest which featured a dark brown desktop with dark grey walls, as soon as I saw it I had decided that was the look I want.  The dark wood with grey drawers and walls looked calming and relaxing.

To build the desk I used 2 x Ikea Karlby worktops and 3 grey Alex Drawers and under counter beer fridge for my soft drinks and snacks.  The reason for 2 worktops was the back wall was over 3 meters long and I wanted it to rung all along the back wall and the largest worktop available was 2.4 meters.

• Ikea Karlby Worktop
• Grey Alex Drawer (Grey colour no longer available)
• Inventor Beer Fridge

Lighting & Accessories

To enhance the experience while coding I wanted some accent lighting around the desk.  I fitted some wooden planks around the wall and fitted the worktop with a 2 cm gap away from the wall to allow for an led strip to be fitted sunken behind the worktop.  This gave a nice glow effect around the desk in both the day and night.

All LED lighting is Wifi enabled so can be adjusted using my phone and Alexa. Plan to code up some alexa skills to manage the lighting at some point

No wires!

One of my main goals was to create a clean setup, I didn't want to see any wires anywhere.  To achieve this I cutout some socket sized squares in the walls and ran the monitor and PC cables through the wall down under the desk.  I got some nice chrome brush covers for the cutouts which look great.

As well as hiding the monitor and PC cables I also wanted all the accessory and extension cables hidden. The plug socket was too low so I couldn't hide the plugs or wires for the extensions.  To improve the look of this I installed a black glass double socket and purchased two 6 socket extensions with nylon braided cables and screwed them to the underneath of the desk.  So all you can see when looking under the desk is two cables running up the wall, very minimal and saved having to get an electrician in to move the socket.

Parts List

• Brush steel wallplate cover
• Govee 5 meter LED strip
• Goove TV LED strips (monitors)
• 5m HDMI cable
• Nylon braided extension plug
• Livolo black glass socket

Office Essentials

Other essentials for the office included a decent chair and a whiteboard.  The chair is a SecretLabs Titan and although quite expensive at around £350 its well worth it.

The whiteboard is a 1m x 1.5m magnetic glass board in grey which goes with the room and looks really good, especially with the chalk based pens.

• SecretLabs Titan Black
• Grey Magnetic Glassboard

As well as my work space I also wanted a place to step away from the computer and watch some videos or read a book. I had a spare sofa and a spare 42" TV so created a separate space on the other side of the office.  The TV is wall mounted and cables run through the walls again, ignore the cables on the floor I haven't got a TV unit yet :)  I also got some large Displate metal posters featuring Doc and Marty from one of my favourite films Back To The Future.

• Marty metal poster
• Doc metal poster

Monitors

At work I have 3 monitors and they are great, but for my home office I wanted something different so went for dual 34" ultra-wide curved.  They are huge monitors and great for coding, vs code and visual studio look awesome full screen with plenty of space for all those panels. I can have the explorer, code and the terminal open and still have plenty of free space.

The monitors are both wall mounted on adjustable monitor arms and with all cables hidden in the wall cavity.  The PC is quite far from the monitors so I had to get some 5m HDMI cables so I could run the cables through the walls and under the desk.

The adjustable arms are excellent, very sturdy and there's plenty of adjustment for positioning the monitors just right.  I did have some trouble with the VESA mount and the LG monitors.  The fixing plate that comes with the arms covers the ports on the monitor and I ended up having to cut some of the metal plate away so I could plug in my HDMI and power.

To power the monitors I needed some extra long power cables, the cables that came with the monitor were quite long but just not quite long enough to feed through the wall and under the desk.

• LG 34" Ultrawide Curved monitor
• Adjustable tilt/swivel wall mount arms
• 3m Clover leaf power cable for monitors
• 5m HDMI cable

The Computer

This office build all started out when I decided to build my own custom watercooled PC.  I always loved the look of the Thermaltake Core P5 open case which could be wall mounted.

My previous PC was a standard dell workstation which I had for 7 years.  I have built PC's in the past and wanted to custom build this one and give myself a challenge.  A challenge it was too, I ended up using around 3m of tubing while learning how to do the bends.  I wont be going into too much detail on the PC build as i'm hoping to create a follow on post with full details of the build.

Hard line tube bending is difficult, if its your first time get some spare tubing your going to need it :)

Below are some pics of the PC build in its various stages, including my leak testing which amazingly went very well, not a single leak

Wall mounted PC

Wall mounting the PC was one of my main goals when I set out on this journey and was all part of the clean desk setup vision.  The cables needed to be hidden and I wanted the PC to look like it was floating above the desk.  

Peripherals

After spending so much effort hiding the cables for the monitors and PC I had to go with a wireless keyboard and mouse.  The MX Master 3 mouse was a no brainer for me and the new Logitech G915 keyboard looked good but very expensive, but I thought it will be used every day so the cost is justified.

I used to spend most nights coding listening to music through my headphones due to my home office been within the main house, but now I have a separate office I can get some decent speakers.  After lots of research I decided on the Audioengine A2+ wireless with an Audioengine S8 subwoofer.  The speakers sound and look great.

I really enjoy watching tutorial videos online and have always wanted to at some point share my knowledge and create my own videos.  So as this is my ultimate home office I decided to get equipped ready to start producing some videos. For this I needed a decent mic, camera and webcam.  For the mic I went for the Rode NT-USB mic along with the Rode boom arm.  For the camera I chose the Cannon EOS 200D camera with a rode compact mic and a Joby gorilla tripod which is excellent.  The tripod legs can be wrapped around anything and can also be arranged to be used as a selfie stick.  I also needed a webcam to use for video conferencing and streaming going forward so chose the Logitech C920 HD Pro.

Build Specs

• Aorus Ultra motherboard
• Intel i9-9900k
• Samsung 970 Evo Plus 1TB
• 64gb Corsair Vengeance RGB Pro
• Aorus GeForce RTX 2080 Super Waterforce
• Thermaltake Core P5 Tempered Glass Case
• Thermaltake RGB watercooling (pump, CPU block, radiator, flow indicator)

Peripherals

• Logitech G915 wireless RGB keyboard
• Logitech MX master 3 mouse
• AudioEngine A2+ wireless speakers
• AudioEngine S8 subwoofer
• Rode NT-USB mic
• Rode swivel mount boom arm
• Logitech C920 HD Pro webcam
• Cannon EOS 200D
• Rode VideoMicro compact on camera mic
• Joby gorilla tripod

Checkout my Instagram for more photos and progress on the setup

@mellondev • Instagram photos and videos

Follow mellondev’s Instagram account to see all 27 of their photos and videos.

Instagram

Final pics