docs(mf-tools): improve readme. add tutorial. add links to all used projects

Author: manfredsteyer

libs/mf-tools/README.md

@@ -16,10 +16,16 @@ This can help to **balance the trade-off** between bundle size and isolation of
 
 ## Examples
 
-- [Source Code (Shell, see branch multi-framework-version)](https://red-ocean-0fe4c4610.azurestaticapps.net)
+- [Live Example](https://red-ocean-0fe4c4610.azurestaticapps.net)
+- [Source Code Shell](https://github.com/manfredsteyer/multi-framework-version)
 - [Source Code for Micro Frontend](https://github.com/manfredsteyer/angular-app1)
 - [Source Code for Micro Frontend with Routing](https://github.com/manfredsteyer/angular3-app)
+- [Source Code for Micro Frontend with Vue](https://github.com/manfredsteyer/vue-js)
+- [Source Code for Micro Frontend with AngularJS](https://github.com/manfredsteyer/angularjs-app)
 
+## Tutorial
+
+Please find our [tutorial here](https://github.com/angular-architects/module-federation-plugin/blob/main/libs/mf-tools/tutorial/index.md).
 
 ## Providing a Web Component with Module Federation
 
@@ -94,10 +100,10 @@ export const APP_ROUTES: Routes = [
         path: 'angular1',
         component: WebComponentWrapper,
         data: {
-        remoteEntry: 'https://nice-grass-018f7d910.azurestaticapps.net/remoteEntry.js',
-        remoteName: 'angular1',
-        exposedModule: './web-components',
-        elementName: 'angular1-element'
+          remoteEntry: 'https://nice-grass-018f7d910.azurestaticapps.net/remoteEntry.js',
+          remoteName: 'angular1',
+          exposedModule: './web-components',
+          elementName: 'angular1-element'
         } as WebComponentWrapperOptions
     },
     [...]
@@ -116,10 +122,10 @@ export const APP_ROUTES: Routes = [
         matcher: startsWith('angular3'),
         component: WebComponentWrapper,
         data: {
-        remoteEntry: 'https://gray-river-0b8c23a10.azurestaticapps.net/remoteEntry.js',
-        remoteName: 'angular3',
-        exposedModule: './web-components',
-        elementName: 'angular3-element'
+          remoteEntry: 'https://gray-river-0b8c23a10.azurestaticapps.net/remoteEntry.js',
+          remoteName: 'angular3',
+          exposedModule: './web-components',
+          elementName: 'angular3-element'
         } as WebComponentWrapperOptions
     },
     [...]

libs/mf-tools/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular-architects/module-federation-tools",
-  "version": "12.2.0",
+  "version": "12.2.1",
   "license": "MIT",
   "peerDependencies": {
     "@angular/common": ">=11.0.0",

libs/mf-tools/tutorial/index.md

@@ -2,6 +2,17 @@
 
 This tutorial is an **extension** for the ``@angular-architects/module-federation`` tutorial [here](https://github.com/angular-architects/module-federation-plugin/blob/main/libs/mf/tutorial/tutorial.md) and shows, how to use the add-on lib ``@angular-architects/module-federation-tools`` to load web components exposed via module federation.
 
+## Getting Started
+
+### Option A: Start with the Upstream Tutorial
+
+Please find the upstream tutorial this tutorial extends [here](https://github.com/angular-architects/module-federation-plugin/blob/main/libs/mf/tutorial/tutorial.md).
+
+### Option B: Checkout the Starter Kit
+
+If you don't want to do the upstream tutorial first, you can use [this example](https://github.com/manfredsteyer/module-federation-plugin-example) (see main branch) as the starting point.
+
+
 ## Part 1: Routing to Web Components
 
 1. Install ``@angular-architects/module-federation-tools``: