Testing out the module federation in webpack 5.
This is an experimental project and it is not intended for production use.
Proof of concept of isolated application stitched together with webpack 5 module federation.
// Install deps
yarn
// Within root directory
yarn run start
// Visit http://localhost:4000
terraform plan
terraform apply -auto-approve
// Get the output vars and add to your github secrets for your actions Note: Remember to run terraform destroy -auto-approve after your finish to not incur any charges from AWS
These need to be set on the github secrets for your workflows to work. These will all be available and created via terraform.
| Name | Description |
|---|---|
| WEBSITE_HOST | Website domain or cloudfront domain |
| AWS_ACCESS_KEY_ID | Build AWS Access key id |
| AWS_SECRET_ACCESS_KEY | Build AWS Access key |
| AWS_S3_BUCKET_NAME | S3 bucket name where the assets are synced to |
| AWS_CF_DISTRIBUTION_ID | Cloudfront distribution id |
Kittygram. View and search for photos of cats, and manage your account.
Teams are divided are split up into respective functions.
- Marketing Team - Host application (home page, common, and tying everything together)
- Accounts Team - Account Flows (profiles, login, logout, favourites etc)
- Search Team - Search Flows (Search results, display)
Separate delivery pipeline which allows for independent releases in the holistic web application.
Even though the teams and projects are separate, the code base is shared via monorepo (lerna).
Included Lambda@Edge functions to randomly weight the page being served from two s3 buckets (original and experiment).
- View Request - Randomly adds cookie
source=toOrigin-Response - Origin Response - Handles the fetching data from the origin (s3 bucket), the lambda determines which page to be served based the cookie value
- Webpack Version ^5.4.0
- React Version ^17.0.1
- React DOM Version ^17.0.1
- React Router
- Material UI Version ^4.11.0
- AWS (cloudfront, s3)
- Terraform