Nx Micro-Frontend Portfolio Assistant

This skill helps you work with an Nx monorepo-based micro-frontend portfolio application built with Module Federation, React 19, TypeScript, and deployed to AWS using Terraform.

Architecture Overview

The project uses:

Application Structure

Instructions

When Working with Development Tasks

1. **Starting Development Server**

- Use `pnpm dev` to start all micro-frontends together

- For specific micro-frontend: `nx serve <mfe-name>`

- For container with specific remotes: `nx serve container --dev-remotes="headerMfe,projectListMfe"`

- The development script automatically detects all micro-frontends

2. **Making Code Changes**

- Changes to micro-frontends are hot-reloaded at runtime through Module Federation

- Each micro-frontend can be developed independently

- Verify shared dependencies in `module-federation.config.ts` to avoid version conflicts

3. **Testing Changes**

- Run `pnpm test` for all unit tests

- Use `nx test <project-name>` for specific project tests

- Run `pnpm e2e` for end-to-end tests

- Use `pnpm e2e:dev` for E2E tests with UI

- Run `nx affected -t test` to test only affected projects

When Adding New Features

1. **Adding a New Micro-Frontend**

- Create new app using Nx generator

- Configure `module-federation.config.ts` to expose modules

- Create both `webpack.config.ts` (dev) and `webpack.config.prod.ts` (prod)

- Add remote to container's `module-federation.config.ts` remotes array

- Create corresponding E2E test project

2. **Adding Shared Libraries**

- Use Nx library generators to create new libs

- Add to shared dependencies in Module Federation configs using `createSharedConfig()`

- Ensure singleton configuration for libraries like React, Redux

3. **State Management**

- Add domain-specific slices to `libs/portfolio-store/`

- Configure store in `libs/store/`

- Share Redux dependencies as singletons via Module Federation

When Working with Infrastructure

1. **Deploying Changes**

- Full deployment: `pnpm run deploy` (build + infrastructure + upload)

- Infrastructure only: `pnpm run deploy:infra`

- Build only: `pnpm run deploy:build`

- Upload only: `pnpm run deploy:upload`

2. **Terraform Operations**

- Initialize: `pnpm run tf:init`

- Plan changes: `pnpm run tf:plan`

- Apply changes: `pnpm run tf:apply`

- Infrastructure modules located in `infra/terraform/modules/` (s3, cloudfront, iam)

3. **AWS Resources**

- S3 bucket with versioning and encryption for static hosting

- CloudFront CDN with OAC (Origin Access Control)

- Route 53 for DNS (optional)

- Tag-based access control (`Environment=frontend`)

- Least-privilege IAM policies

When Working with Build and Quality

1. **Building**

- Development build: `pnpm build`

- Production build: `pnpm build:prod` (excludes e2e tests)

- Specific project: `nx run <project>:build`

- Affected projects: `nx affected -t build`

2. **Code Quality**

- Lint: `pnpm lint` or `nx affected -t lint`

- Format: `pnpm format`

- Type check: `nx run-many --target=typecheck --all`

When Troubleshooting

1. **Module Federation Issues**

- Check `module-federation.config.ts` for exposed modules and remotes

- Verify shared dependencies have correct singleton configuration

- Check webpack configs (dev and prod) for each micro-frontend

- Ensure container's remotes array includes all micro-frontends

2. **Build/Deployment Issues**

- Verify all dependencies installed: `pnpm install`

- Check Terraform state and AWS credentials

- Review CloudFront cache behavior

- Verify S3 bucket permissions and OAC configuration

3. **Development Server Issues**

- Check if ports are available (container and all remotes need different ports)

- Verify `scripts/dev-with-mfe-tags.sh` can detect all micro-frontends

- Check Nx cache: `nx reset` to clear if needed

Key Files Reference

Best Practices

1. Always use `pnpm` as the package manager

2. Use Nx commands to run project-specific tasks

3. Leverage `nx affected` commands to optimize CI/CD

4. Keep shared dependencies as singletons in Module Federation

5. Test micro-frontends both independently and integrated

6. Follow least-privilege principle for AWS IAM policies

7. Use Terraform for all infrastructure changes

8. Maintain separate webpack configs for dev and production