Angular root-config

What is this?

This is an example microfrontend repo demonstrating how to use single-spa. You can see the code running at https://angular.microfrontends.app.

How does it work?

Full article

This repository is a javascript project that creates a javascript bundle that is an in-browser javascript module (explanation on youtube / bilibili). The currently deployed version of the in-browser module can be seen at https://angular.microfrontends.app/importmap.json.

This project uses Angular and was created with the create-single-spa CLI. It uses webpack and babel.

Whenever a pull request is merged to master, CircleCI builds and deploys the project. The "workflows" view (pictured below) can be seen if you are logged into CircleCI. Deployments for this in-browser module are completely independent of deployments for any other module.

Local development

Full documentation

Tutorial video: youtube / bilibili

There are two ways to do local development. It is preferred to do one module at a time, whenever possible.

One module at a time

cd root-config
pnpm install
pnpm start -- --https

Go to https://localhost:9000/angular-microfrontends-root-config.js and verify that you are able to load the file without any SSL problems. To solve SSL problems, see these instructions.

Now, go to https://angular.microfrontends.app. In the browser console, run the following:

localStorage.setItem("devtools", true);

Refresh the page. Click on the tan / beige rectangle:

Set an import map override to 9000.

Refresh the page. Your local code for this module will now be running on https://angular.microfrontends.app. You may make changes locally and refresh the page to see them.

All modules together

Run the root-config project locally:

cd root-config
pnpm install
pnpm start

Now follow the steps above for "One module at a time" for each of the modules you wish to work on.

Explaining modules, in order they should be started:

root-config: single-spa root, bootstrap and loads each SPA.
```
pnpm install
pnpm start
```
shared-dependencies: Import map configuration outside of root project.
```
pnpm install
pnpm start
```
navbar: Angular 10 example navbar always on screen to display coexisting versions. Don't forget to override it's location.
```
pnpm install
pnpm serve:single-spa:navbar
```

shared-angular: Library projects. Component sharing.

pnpm install
pnpm build core
pnpm build single-spa-angular
pnpm start

play: Angular 11 using shared components.
```
pnpm install
pnpm serve:single-spa:play
```
stats: Angular 11 using shared components.
```
pnpm install
pnpm serve:single-spa:stats
```
Overrides
1. Override "@angular-microfrontends/core" with "http://localhost:9002/angular-microfrontends-core/bundles/angular-microfrontends-core.umd.js".
2. Override "@angular-microfrontends/navbar" with "http://localhost:4201/main.js".
3. Override "@angular-microfrontends/play" with "http://localhost:4202/main.js".
4. Override "@angular-microfrontends/stats" with "http://localhost:4203/main.js".
5. Override "single-spa-angular" with "http://localhost:9002/single-spa-angular/single-spa-angular.js".

Adapting for your organization

Feel free to fork and modify any files you would like when doing a proof of concept for your organization. When it's time to actually create / adapt your organization's projects, consider using create-single-spa instead of forking this repository.

angular-microfrontends / root-config

readme