https://github.com/gispada/ts-microfrontends-demo

Project to experiment with microfrontends using Webpack Module Federation and TypeScript
https://github.com/gispada/ts-microfrontends-demo

aws-cdk microfrontends typescript vue webpack-module-federation

Last synced: 17 days ago
JSON representation

Project to experiment with microfrontends using Webpack Module Federation and TypeScript

• Host: GitHub
• URL: https://github.com/gispada/ts-microfrontends-demo
• Owner: gispada
• Created: 2021-12-30T12:06:24.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2023-03-06T18:02:55.000Z (almost 2 years ago)
• Last Synced: 2023-03-06T19:17:41.516Z (almost 2 years ago)
• Topics: aws-cdk, microfrontends, typescript, vue, webpack-module-federation
• Language: TypeScript
• Homepage: https://d1ficz68tdlptx.cloudfront.net
• Size: 536 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# TypeScript microfrontends with Webpack Module Federation

A monorepo project to experiment with microfrontends, using TypeScript and Webpack Module Federation. Final result [here](https://d1ficz68tdlptx.cloudfront.net/).

The application is made up of five modules:

- **Container** - The shell with the header and the side panel; it handles the top level routes.

- **Account** - A basic account section, written in React; it has two subroutes.

- **Dashboard** - A section to display random data using charts and a table; it is written in React and has three subroutes, one of which is another microfrontend.

- **Product** - A Vue 3 simple application that shows details on the items listed in the Dashboard table.

- **Shared** - Shared components and utils; it exposes both React and Vue components that are consumed by the previous frontends.

Remotes' urls are not set at build time, but retrieved at runtime from a `json` map, currently hosted in the same location as the container ([here](https://d1ficz68tdlptx.cloudfront.net/remotesMap.json)), but it could be put anywhere.

## Deployment

Each microfrontend is deployed to a separate Amazon S3 Bucket, with a CloudFront distribution in front of it.

The initial setup of AWS resources is done through **AWS CDK**, installed globally.

The first time CDK must be installed and bootstrapped:

1. `npm install -g aws-cdk`

2. `export CDK_NEW_BOOTSTRAP=1 && cdk bootstrap aws://{AWS_ACCOUNT}/{AWS_REGION}`

Then, to create the infrastucture: `cdk deploy`; to destroy it: `cdk destroy`.

Pushing on `main`, a GitHub Action will build and deploy the modified microfrontend(s) to the appropriate AWS resource(s).