Module Federation для UI KIT на Storybook 8
Проблема заключается в следующем, необходимо реализовать сервис (контейнеризированный в Docker), который будет предоставлять общий доступ к компонентам, написанным на React.
Также сервис должен визуализировать эти компоненты и отображать документацию по ним. Для этих целей, на мой взгляд, мог бы подойти Storybook.
Это позволило бы иметь общий UI KIT для всех микрофронтендов. Команды могли бы работать над законченной бизнес фичей (UI + API), не заботясь о дизайне компонентов.
Можно бы было использовать GIT модули, но в этом случае придется пересобирать каждый проект при изменении в дизайне. Хотелось бы иметь что-то похожее на общую тему визуального оформления для всех микрофронтендов.
Я пробовал получить примеры из репозитория с Module Federation examples
https://github.com/module-federation/module-federation-examples
Там есть пример react-storybook. Я его успешно запустил, он работает (хотя очень много deprecated зависимостей), но это отличается от того, что мне нужно.
Там, в качестве remote (источника, в котором прописыаается expose в webpack конфиге) используется react, а в качестве host (приемника, в котором прописывается remotes в webpack конфиге) используется storybook. Мне же необходима обратная ситуация, хотелось бы предоставлять общий доступ к компонентам из storybook и использовать его в качестве источника (remote).
Мне нужна поддержка Typescript. Я видел, что Module Federation 2.0 поддерживает типы при разработке, так ли это? Поддерживает ли VS Code это?
Я не понимаю, что я должен сделать, чтобы приложение Storybook 8, инициализированное стандартным образом, по их документации, заработало с Module Federation. Наверное, основная моя проблема заключается в том, что я не понимаю, как должен быть настроен Webpack.
Конфиг должен учитывать сам storybook, к тому же сейчас он работает на nextjs (с webpack) и конфигурация должна включать в себя это, плюс к этому нужно добавить правила для module federation, не сломав то, что есть.
Пробовал создавать проект через NX, но там все выглядит еще более сложно, на мой взгляд. Хотя это следующий шаг.
На данный момент, мне нужно, чтобы сервис использовал:
- Webpack 5.95.0 с Module Federation https://webpack.js.org/concepts/module-federation/
- Typescript 5 https://www.typescriptlang.org/
- Tailwindcss 3.4.14 https://tailwindcss.com/
- Storybook 8.3.5 https://storybook.js.org/
- React 18, возможно NextJs 14 https://nextjs.org/
Какие шаги я должен предпринять, чтобы эта связка заработала?
Если можете посоветовать алтернативный вариант решения проблемы, пожалуйста, поделитесь своими мыслями.
Все, чего мне удалось добиться на данный момент находится в этих репозиториях:
Remote (storybook)
https://github.com/orxtime/mf-remote-storybook
Host (nextjs)
https://github.com/orxtime/mf-host-nextjs