This is a template to start your own frontend platform with Next, Serverless, Module Federation, Tailwind
Platforms are meant to help Streamed Aligned teams deliver value to end users as quickly as possible with high quality technology. This mono-repository shows different tools set up together to enable streamed align teams.
Micro frontends helps team work on different domains while being on the same pages, SPA. Module federation is a tool to render those frontends together. In this templates, I have set up :
- a core app with Next, meant to put together and deploy the different micro-frontends
- a search app with Next as well, meant to create components and pages owned by the Search domain.
For this to work, I have added in Core's next config, the module federation plugin config that fetches the different micro-frontends. Then I have added in Search's Next config, a similar configuration that exposes Search components on a remote url. The component can then be imported in Core server side or client side.
The app is deployed on AWS with serverless services. I have used open-next and SST to deploy both the micro-service Search and the orchestrator Core app. Using environment file, I'm able to change the remote url for module federation to find Search micro service.
Todo
Types are shared between search and core to make sure developer have access to type checking when they are developing, running CI, building the code. To achieve this, I have used Typescript References. A build typescript configuration is defined inside frontend-search project. It allows me to emit type files when needed without overriding Next's typescript config. An empty reference is added Inside core typescript configuration, I have added:
- a reference to search ts build configuration
- a path to avoid relative and long path
Now Typescript can also resolve import from 'frontend-search' during transpilation, as well as module federation during build and runtime