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