diff --git a/README.md b/README.md
index e69de29b..d2c4da20 100644
--- a/README.md
+++ b/README.md
@@ -0,0 +1,124 @@
+# Оглавление
+1. [Задание 1](#task_1)
+2. [Задание 2](#task_2)
+
+# Задание 1
+
+Для решения необходимо провести анализ приложения и определить бизнес-функции приложения, руководствуясь принципами Domain-Driven-Design.
+
+## Анализ приложения
+
+Проект Mesto - фронтенд-приложение на React с простым функционалом загрузки фотографий, их отображения и возможностью реакций от зарегистрированных пользователей, таким образом мы имеем следующи фукнции приложения:
+* профиль пользователя
+* галерея фотографий
+* авторизация и аутентификация
+
+Так же стоит отдельно отметить, что выделена функция авторизации и аутентификации, чтобы была возможность развивать профиль как самостоятельную функцию.
+
+## Метод реализации
+
+В качестве метода реализации будет выбрана run time с клиентской компновкой, так у нас будет возможность разрабатывать микрофронты отдельно, а так же осуществлять динамическую lazy-загрузку компонентов.
+
+## Инструмент реализации
+
+В качестве инструмента выбран `Webpack Module Federation`, так как есть опыт работы с данным фреймворком и все части у нас написаны на React. `Single SPA` так же отлично подойдет для решения задачи, в случае наличия опыта у команды и наличия компонентов, реализованных не на React.
+
+## Приложение (Уровень 2)
+
+Структура приложения в папке [microfrontend](frontend/microfrontend)
+
+```text
+/auth
+/gallery
+/profile
+/src
+.babelrc
+.gitignore
+package.json
+webpack.config.js
+```
+
+### auth
+Модуль авторизации и аутентификации пользователя. Отображает страницы регистрации и авторизации, а так же показывает всплывающее окно об успешной авторизации на сайте. Его структура:
+```text
+/auth
+├── /src
+│ ├── /blocks
+│ │ └── /auth-form # стили формы авторизации
+│ ├── /components
+│ │ ├── InfoTooltip.js # компонент всплывающего окна об успешной регистрации
+│ │ ├── Login.js # компонент формы авторизации
+│ │ ├── ProtectedRoute.js # компонент роута проверки авторизации
+│ │ └── Register.js # компонент формы регистрации
+│ │── /utils
+│ │ └── auth.js # утилитарный класс для работы с апи авторизации
+│ └── index.js # точка входа для root приложения
+├── package.json # описание приложения и его зависимостей
+└── webpack.config.js # настройка webpack module federation
+```
+
+### gallery
+Модуль работы с фотографиями - позволяет загружать фотографии, удалять их, а так же ставить и учитывать лайки под ними.
+```text
+/gallery
+├── /src
+│ ├── /blocks
+│ │ ├── /card # стили карточек фотографий и лайков
+│ │ ├── /places # стили мест
+│ │ └── /popup # стили всплывающих окон
+│ ├── /components
+│ │ ├── AddPlacePopup.js # компонент добавления места с указанием фото
+│ │ ├── Card.js # компонент отображения фото и лайков
+│ │ ├── ImagePopup.js # компонент просмотра отдельного фото
+│ │ ├── Main.js # компонент отображения плитки с фото
+│ │ └── PopupWithForm.js # компонент всплывающего окна (используется в AddPlacePopup)
+│ │── /utils
+│ │ └── api.js # утилитарный класс для работы с апи фото
+│ └── index.js # точка входа для root приложения
+├── package.json # описание приложения и его зависимостей
+└── webpack.config.js # настройка webpack module federation
+```
+
+### profile
+Модуль отвечает за профиль пользователя.
+```text
+/gallery
+├── /src
+│ ├── /blocks
+│ │ ├── /popup # стили всплывающих окон
+│ │ └── /profile # стили профиля
+│ ├── /components
+│ │ ├── EditAvatarPopup.js # компонент формы редактирования аватра
+│ │ ├── EditProfilePopup.js # компонент формы редактирования профиля
+│ │ └── PopupWithForm.js # компонент всплывающего окна
+│ │── /utils
+│ │ └── api.js # утилитарный класс для работы с апи фото
+│ └── index.js # точка входа для root приложения
+├── package.json # описание приложения и его зависимостей
+└── webpack.config.js # настройка webpack module federation
+```
+
+### root (каталог src)
+Корневой модуль хост-приложения, который объединяет все микрофронты в один.
+```text
+/
+├── /src
+│ ├── /blocks
+│ │ ├── /content # основной стиль
+│ │ ├── /footer # стиль подвала страницы
+│ │ ├── /header # стиль шапки страницы
+│ │ └── /popup # стили всплывающих окон
+│ ├── /components
+│ │ ├── App.js # компонент основного приложения, собирающего все вместе
+│ │ ├── Footer.js # компонент подвала страницы
+│ │ └── Header.js # компонент шапки страницы
+│ └── index.js # точка входа при запуске и сборки основного фронта
+├── package.json # описание хост приложения и его зависимостей
+└── webpack.config.js # настройка сборки всего фронта
+```
+
+Уровень 3 (запуск готового кода) не выполнялся
+
+# Задание 2
+
+Итоговая диаграмма в файле [arch_template_task2.drawio](arch_template_task2.drawio), вкладка Solution
\ No newline at end of file
diff --git a/arch_template_task2.drawio b/arch_template_task2.drawio
new file mode 100644
index 00000000..2620dfd0
--- /dev/null
+++ b/arch_template_task2.drawio
@@ -0,0 +1,2451 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/microfrontend/.babelrc b/frontend/microfrontend/.babelrc
new file mode 100644
index 00000000..ea5702fa
--- /dev/null
+++ b/frontend/microfrontend/.babelrc
@@ -0,0 +1,7 @@
+{
+ "presets": [
+ ["@babel/preset-react", { "runtime": "automatic" }],
+ "@babel/preset-env"
+ ],
+ "plugins": [["@babel/transform-runtime"]]
+}
diff --git a/frontend/microfrontend/.gitignore b/frontend/microfrontend/.gitignore
new file mode 100644
index 00000000..1f22b9c2
--- /dev/null
+++ b/frontend/microfrontend/.gitignore
@@ -0,0 +1,116 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
diff --git a/frontend/microfrontend/auth/.babelrc b/frontend/microfrontend/auth/.babelrc
new file mode 100644
index 00000000..ea5702fa
--- /dev/null
+++ b/frontend/microfrontend/auth/.babelrc
@@ -0,0 +1,7 @@
+{
+ "presets": [
+ ["@babel/preset-react", { "runtime": "automatic" }],
+ "@babel/preset-env"
+ ],
+ "plugins": [["@babel/transform-runtime"]]
+}
diff --git a/frontend/microfrontend/auth/.gitignore b/frontend/microfrontend/auth/.gitignore
new file mode 100644
index 00000000..1f22b9c2
--- /dev/null
+++ b/frontend/microfrontend/auth/.gitignore
@@ -0,0 +1,116 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
diff --git a/frontend/microfrontend/auth/compilation.config.js b/frontend/microfrontend/auth/compilation.config.js
new file mode 100644
index 00000000..505f191b
--- /dev/null
+++ b/frontend/microfrontend/auth/compilation.config.js
@@ -0,0 +1,31 @@
+const printCompilationMessage = (status, port) => {
+ let messageColor, messageType, browserMessage;
+
+ switch (status) {
+ case "success":
+ messageColor = "\x1b[32m";
+ messageType = "Compiled successfully!";
+ browserMessage = "You can now view";
+ break;
+ case "failure":
+ messageColor = "\x1b[31m";
+ messageType = "Compilation Failed!";
+ browserMessage = "You can't now view";
+ break;
+ case "compiling":
+ messageColor = "\x1b[94m";
+ messageType = "Compiling...";
+ browserMessage = "Compiling the";
+ break;
+ }
+
+ console.log(`\n\n
+ ${messageColor}${messageType}\x1b[0m\n
+ ${browserMessage} \x1b[1mRemote\x1b[0m in the browser.
+ ${messageColor}${messageType}\x1b[0m\n
+ \x1b[1mLocal\x1b[0m: http://localhost:\x1b[1m${port}\x1b[0m
+ \x1b[1mLocal\x1b[0m: http://localhost:\x1b[1m${port}\x1b[0m\n\n
+ `);
+};
+
+module.exports = printCompilationMessage;
\ No newline at end of file
diff --git a/frontend/microfrontend/auth/package.json b/frontend/microfrontend/auth/package.json
new file mode 100644
index 00000000..26b94e67
--- /dev/null
+++ b/frontend/microfrontend/auth/package.json
@@ -0,0 +1,38 @@
+{
+ "name": "auth-micro-front",
+ "version": "1.0.0",
+ "scripts": {
+ "build": "webpack --mode production",
+ "build:dev": "webpack --mode development",
+ "build:start": "cd dist && PORT=8082 npx serve",
+ "start": "webpack serve --mode development",
+ "start:live": "webpack serve --mode development --live-reload --hot"
+ },
+ "license": "MIT",
+ "author": {
+ "name": "Ayrat Belyaev",
+ "email": "email@email.com"
+ },
+ "devDependencies": {
+ "@babel/core": "^7.15.8",
+ "@babel/plugin-transform-runtime": "^7.15.8",
+ "@babel/preset-env": "^7.15.8",
+ "@babel/preset-react": "^7.14.5",
+ "autoprefixer": "^10.1.0",
+ "babel-loader": "^8.2.2",
+ "css-loader": "^6.3.0",
+ "html-webpack-plugin": "^5.3.2",
+ "postcss": "^8.2.1",
+ "postcss-loader": "^4.1.0",
+ "style-loader": "^3.3.0",
+ "webpack": "^5.57.1",
+ "webpack-cli": "^4.10.0",
+ "webpack-dev-server": "^4.3.1",
+ "dotenv-webpack": "^8.0.1"
+ },
+ "dependencies": {
+ "@babel/runtime": "^7.13.10",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0"
+ }
+}
\ No newline at end of file
diff --git a/frontend/microfrontend/auth/src/App.jsx b/frontend/microfrontend/auth/src/App.jsx
new file mode 100644
index 00000000..82d5ddb4
--- /dev/null
+++ b/frontend/microfrontend/auth/src/App.jsx
@@ -0,0 +1,19 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+
+import "./index.css";
+
+const App = () => (
+
+
Name: gallery-micro-front
+
Framework: react
+
Language: JavaScript
+
CSS: Empty CSS
+
+
Name: auth-micro-front
+
Framework: react
+
Language: JavaScript
+
CSS: Empty CSS
+
+
+
+
+
+ {card.name}
+
+
+
+
{card.likes.length}
+
+
+
+
+
+
{card ? card.name : ''}
+
+
+
{currentUser.name}
+
+
{currentUser.about}
+
+ {cards.map((card) => (
+
+ ))}
+
+
+
+ );
+}
+
+export default Main;
diff --git a/frontend/microfrontend/gallery/src/components/PopupWithForm.js b/frontend/microfrontend/gallery/src/components/PopupWithForm.js
new file mode 100644
index 00000000..418bd0cf
--- /dev/null
+++ b/frontend/microfrontend/gallery/src/components/PopupWithForm.js
@@ -0,0 +1,26 @@
+import React from 'react';
+
+function PopupWithForm({
+ title,
+ name,
+ isOpen,
+ buttonText = 'Сохранить',
+ onSubmit,
+ onClose,
+ children,
+}) {
+ return (
+
+ );
+}
+
+export default PopupWithForm;
diff --git a/frontend/microfrontend/gallery/src/index.css b/frontend/microfrontend/gallery/src/index.css
new file mode 100644
index 00000000..20e225c5
--- /dev/null
+++ b/frontend/microfrontend/gallery/src/index.css
@@ -0,0 +1,10 @@
+body {
+ font-family: Arial, Helvetica, sans-serif;
+}
+
+.container {
+ font-size: 3rem;
+ margin: auto;
+ max-width: 800px;
+ margin-top: 20px;
+}
\ No newline at end of file
diff --git a/frontend/microfrontend/gallery/src/index.html b/frontend/microfrontend/gallery/src/index.html
new file mode 100644
index 00000000..a207b28d
--- /dev/null
+++ b/frontend/microfrontend/gallery/src/index.html
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+ gallery-micro-front
+
+
+
+
+
+
+
diff --git a/frontend/microfrontend/gallery/src/index.js b/frontend/microfrontend/gallery/src/index.js
new file mode 100644
index 00000000..fc3cee10
--- /dev/null
+++ b/frontend/microfrontend/gallery/src/index.js
@@ -0,0 +1 @@
+import("./App");
diff --git a/frontend/microfrontend/gallery/src/utils/api.js b/frontend/microfrontend/gallery/src/utils/api.js
new file mode 100644
index 00000000..8667b9e9
--- /dev/null
+++ b/frontend/microfrontend/gallery/src/utils/api.js
@@ -0,0 +1,64 @@
+class Api {
+ constructor({ address, token, groupId }) {
+ // стандартная реализация -- объект options
+ this._token = token;
+ this._groupId = groupId;
+ this._address = address;
+
+ // Запросы в примере работы выполняются к старому Api, в новом URL изменены.
+ }
+
+
+ getCardList() {
+ return fetch(`${this._address}/${this._groupId}/cards`, {
+ headers: {
+ authorization: this._token,
+ },
+ })
+ .then(res => res.ok ? res.json() : Promise.reject(`Ошибка: ${res.status}`));
+ }
+
+ addCard({ name, link }) {
+ return fetch(`${this._address}/${this._groupId}/cards`, {
+ method: 'POST',
+ headers: {
+ authorization: this._token,
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ name,
+ link,
+ }),
+ })
+ .then(res => res.ok ? res.json() : Promise.reject(`Ошибка: ${res.status}`));
+ }
+
+ removeCard(cardID) {
+ return fetch(`${this._address}/${this._groupId}/cards/${cardID}`, {
+ method: 'DELETE',
+ headers: {
+ authorization: this._token,
+ },
+ })
+ .then(res => res.ok ? res.json() : Promise.reject(`Ошибка: ${res.status}`));
+ }
+ changeLikeCardStatus(cardID, like) {
+ // Обычная реализация: 2 разных метода для удаления и постановки лайка.
+ return fetch(`${this._address}/${this._groupId}/cards/like/${cardID}`, {
+ method: like ? 'PUT' : 'DELETE',
+ headers: {
+ authorization: this._token,
+ 'Content-Type': 'application/json',
+ },
+ })
+ .then(res => res.ok ? res.json() : Promise.reject(`Ошибка: ${res.status}`));
+ }
+}
+
+const api = new Api({
+ address: 'https://nomoreparties.co',
+ groupId: `cohort0`,
+ token: `80a75492-21c5-4330-a02f-308029e94b63`,
+});
+
+export default api;
diff --git a/frontend/microfrontend/gallery/webpack.config.js b/frontend/microfrontend/gallery/webpack.config.js
new file mode 100644
index 00000000..88fa9371
--- /dev/null
+++ b/frontend/microfrontend/gallery/webpack.config.js
@@ -0,0 +1,92 @@
+const HtmlWebPackPlugin = require("html-webpack-plugin");
+const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
+const path = require('path');
+const Dotenv = require('dotenv-webpack');
+
+const deps = require("./package.json").dependencies;
+
+const printCompilationMessage = require('./compilation.config.js');
+
+module.exports = (_, argv) => ({
+ output: {
+ publicPath: "http://localhost:8082/",
+ },
+
+ resolve: {
+ extensions: [".tsx", ".ts", ".jsx", ".js", ".json"],
+ },
+
+ devServer: {
+ port: 8082,
+ historyApiFallback: true,
+ watchFiles: [path.resolve(__dirname, 'src')],
+ onListening: function (devServer) {
+ const port = devServer.server.address().port
+
+ printCompilationMessage('compiling', port)
+
+ devServer.compiler.hooks.done.tap('OutputMessagePlugin', (stats) => {
+ setImmediate(() => {
+ if (stats.hasErrors()) {
+ printCompilationMessage('failure', port)
+ } else {
+ printCompilationMessage('success', port)
+ }
+ })
+ })
+ }
+ },
+
+ module: {
+ rules: [
+ {
+ test: /\.m?js/,
+ type: "javascript/auto",
+ resolve: {
+ fullySpecified: false,
+ },
+ },
+ {
+ test: /\.(css|s[ac]ss)$/i,
+ use: ["style-loader", "css-loader", "postcss-loader"],
+ },
+ {
+ test: /\.(ts|tsx|js|jsx)$/,
+ exclude: /node_modules/,
+ use: {
+ loader: "babel-loader",
+ },
+ },
+ ],
+ },
+
+ plugins: [
+ new ModuleFederationPlugin({
+ name: "gallery_micro_front",
+ filename: "remoteEntry.js",
+ remotes: {},
+ exposes: {
+ './AddPlacePopup': './src/components/AddPlacePopup.js',
+ './Card': './src/components/Card.js',
+ './ImagePopup': './src/components/ImagePopup.js',
+ './Main': './src/components/Main.js',
+ './PopupWithForm': './src/components/PopupWithForm.js'
+ },
+ shared: {
+ ...deps,
+ react: {
+ singleton: true,
+ requiredVersion: deps.react,
+ },
+ "react-dom": {
+ singleton: true,
+ requiredVersion: deps["react-dom"],
+ },
+ },
+ }),
+ new HtmlWebPackPlugin({
+ template: "./src/index.html",
+ }),
+ new Dotenv()
+ ],
+});
diff --git a/frontend/microfrontend/package.json b/frontend/microfrontend/package.json
new file mode 100644
index 00000000..33f4849e
--- /dev/null
+++ b/frontend/microfrontend/package.json
@@ -0,0 +1,38 @@
+{
+ "name": "root-micro-front",
+ "version": "1.0.0",
+ "scripts": {
+ "build": "webpack --mode production",
+ "build:dev": "webpack --mode development",
+ "build:start": "cd dist && PORT=8082 npx serve",
+ "start": "webpack serve --mode development",
+ "start:live": "webpack serve --mode development --live-reload --hot"
+ },
+ "license": "MIT",
+ "author": {
+ "name": "Ayrat Belyaev",
+ "email": "email@email.com"
+ },
+ "devDependencies": {
+ "@babel/core": "^7.15.8",
+ "@babel/plugin-transform-runtime": "^7.15.8",
+ "@babel/preset-env": "^7.15.8",
+ "@babel/preset-react": "^7.14.5",
+ "autoprefixer": "^10.1.0",
+ "babel-loader": "^8.2.2",
+ "css-loader": "^6.3.0",
+ "html-webpack-plugin": "^5.3.2",
+ "postcss": "^8.2.1",
+ "postcss-loader": "^4.1.0",
+ "style-loader": "^3.3.0",
+ "webpack": "^5.57.1",
+ "webpack-cli": "^4.10.0",
+ "webpack-dev-server": "^4.3.1",
+ "dotenv-webpack": "^8.0.1"
+ },
+ "dependencies": {
+ "@babel/runtime": "^7.13.10",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0"
+ }
+}
\ No newline at end of file
diff --git a/frontend/microfrontend/profile/.babelrc b/frontend/microfrontend/profile/.babelrc
new file mode 100644
index 00000000..ea5702fa
--- /dev/null
+++ b/frontend/microfrontend/profile/.babelrc
@@ -0,0 +1,7 @@
+{
+ "presets": [
+ ["@babel/preset-react", { "runtime": "automatic" }],
+ "@babel/preset-env"
+ ],
+ "plugins": [["@babel/transform-runtime"]]
+}
diff --git a/frontend/microfrontend/profile/.gitignore b/frontend/microfrontend/profile/.gitignore
new file mode 100644
index 00000000..1f22b9c2
--- /dev/null
+++ b/frontend/microfrontend/profile/.gitignore
@@ -0,0 +1,116 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
diff --git a/frontend/microfrontend/profile/compilation.config.js b/frontend/microfrontend/profile/compilation.config.js
new file mode 100644
index 00000000..505f191b
--- /dev/null
+++ b/frontend/microfrontend/profile/compilation.config.js
@@ -0,0 +1,31 @@
+const printCompilationMessage = (status, port) => {
+ let messageColor, messageType, browserMessage;
+
+ switch (status) {
+ case "success":
+ messageColor = "\x1b[32m";
+ messageType = "Compiled successfully!";
+ browserMessage = "You can now view";
+ break;
+ case "failure":
+ messageColor = "\x1b[31m";
+ messageType = "Compilation Failed!";
+ browserMessage = "You can't now view";
+ break;
+ case "compiling":
+ messageColor = "\x1b[94m";
+ messageType = "Compiling...";
+ browserMessage = "Compiling the";
+ break;
+ }
+
+ console.log(`\n\n
+ ${messageColor}${messageType}\x1b[0m\n
+ ${browserMessage} \x1b[1mRemote\x1b[0m in the browser.
+ ${messageColor}${messageType}\x1b[0m\n
+ \x1b[1mLocal\x1b[0m: http://localhost:\x1b[1m${port}\x1b[0m
+ \x1b[1mLocal\x1b[0m: http://localhost:\x1b[1m${port}\x1b[0m\n\n
+ `);
+};
+
+module.exports = printCompilationMessage;
\ No newline at end of file
diff --git a/frontend/microfrontend/profile/package.json b/frontend/microfrontend/profile/package.json
new file mode 100644
index 00000000..2f282c57
--- /dev/null
+++ b/frontend/microfrontend/profile/package.json
@@ -0,0 +1,38 @@
+{
+ "name": "profile-micro-front",
+ "version": "1.0.0",
+ "scripts": {
+ "build": "webpack --mode production",
+ "build:dev": "webpack --mode development",
+ "build:start": "cd dist && PORT=8082 npx serve",
+ "start": "webpack serve --mode development",
+ "start:live": "webpack serve --mode development --live-reload --hot"
+ },
+ "license": "MIT",
+ "author": {
+ "name": "Ayrat Belyaev",
+ "email": "email@email.com"
+ },
+ "devDependencies": {
+ "@babel/core": "^7.15.8",
+ "@babel/plugin-transform-runtime": "^7.15.8",
+ "@babel/preset-env": "^7.15.8",
+ "@babel/preset-react": "^7.14.5",
+ "autoprefixer": "^10.1.0",
+ "babel-loader": "^8.2.2",
+ "css-loader": "^6.3.0",
+ "html-webpack-plugin": "^5.3.2",
+ "postcss": "^8.2.1",
+ "postcss-loader": "^4.1.0",
+ "style-loader": "^3.3.0",
+ "webpack": "^5.57.1",
+ "webpack-cli": "^4.10.0",
+ "webpack-dev-server": "^4.3.1",
+ "dotenv-webpack": "^8.0.1"
+ },
+ "dependencies": {
+ "@babel/runtime": "^7.13.10",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0"
+ }
+}
\ No newline at end of file
diff --git a/frontend/microfrontend/profile/src/App.jsx b/frontend/microfrontend/profile/src/App.jsx
new file mode 100644
index 00000000..5ee97a70
--- /dev/null
+++ b/frontend/microfrontend/profile/src/App.jsx
@@ -0,0 +1,19 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+
+import "./index.css";
+
+const App = () => (
+
+
Name: profile-micro-front
+
Framework: react
+
Language: JavaScript
+
CSS: Empty CSS
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Войти
+
+
+ Регистрация
+
+
+ )
+}
+
+export default Header;
diff --git a/frontend/microfrontend/src/index.css b/frontend/microfrontend/src/index.css
new file mode 100644
index 00000000..8fb4ffe3
--- /dev/null
+++ b/frontend/microfrontend/src/index.css
@@ -0,0 +1,12 @@
+@import url('./vendor/normalize.css');
+@import url('./vendor/fonts.css');
+@import url('./blocks/page/page.css');
+@import url('./blocks/header/header.css');
+@import url('./blocks/content/content.css');
+@import url('./blocks/footer/footer.css');
+@import url('./blocks/profile/profile.css');
+@import url('./blocks/places/places.css');
+@import url('./blocks/card/card.css');
+@import url('./blocks/popup/popup.css');
+@import url('./blocks/popup/_is-opened/popup_is-opened.css');
+@import url('./blocks/auth-form/auth-form.css');
diff --git a/frontend/microfrontend/src/index.js b/frontend/microfrontend/src/index.js
new file mode 100644
index 00000000..8b0459b8
--- /dev/null
+++ b/frontend/microfrontend/src/index.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './components/App';
+import * as serviceWorker from './serviceWorker';
+import { BrowserRouter } from "react-router-dom";
+
+ReactDOM.render(
+
+
+
+
+ ,
+ document.getElementById('root')
+);
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+serviceWorker.unregister();
diff --git a/frontend/microfrontend/src/logo.svg b/frontend/microfrontend/src/logo.svg
new file mode 100644
index 00000000..6b60c104
--- /dev/null
+++ b/frontend/microfrontend/src/logo.svg
@@ -0,0 +1,7 @@
+
diff --git a/frontend/microfrontend/src/serviceWorker.js b/frontend/microfrontend/src/serviceWorker.js
new file mode 100644
index 00000000..b04b771a
--- /dev/null
+++ b/frontend/microfrontend/src/serviceWorker.js
@@ -0,0 +1,141 @@
+// This optional code is used to register a service worker.
+// register() is not called by default.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on subsequent visits to a page, after all the
+// existing tabs open on the page have been closed, since previously cached
+// resources are updated in the background.
+
+// To learn more about the benefits of this model and instructions on how to
+// opt-in, read https://bit.ly/CRA-PWA
+
+const isLocalhost = Boolean(
+ window.location.hostname === 'localhost' ||
+ // [::1] is the IPv6 localhost address.
+ window.location.hostname === '[::1]' ||
+ // 127.0.0.0/8 are considered localhost for IPv4.
+ window.location.hostname.match(
+ /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+ )
+);
+
+export function register(config) {
+ if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+ // The URL constructor is available in all browsers that support SW.
+ const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
+ if (publicUrl.origin !== window.location.origin) {
+ // Our service worker won't work if PUBLIC_URL is on a different origin
+ // from what our page is served on. This might happen if a CDN is used to
+ // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+ return;
+ }
+
+ window.addEventListener('load', () => {
+ const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+ if (isLocalhost) {
+ // This is running on localhost. Let's check if a service worker still exists or not.
+ checkValidServiceWorker(swUrl, config);
+
+ // Add some additional logging to localhost, pointing developers to the
+ // service worker/PWA documentation.
+ navigator.serviceWorker.ready.then(() => {
+ console.log(
+ 'This web app is being served cache-first by a service ' +
+ 'worker. To learn more, visit https://bit.ly/CRA-PWA'
+ );
+ });
+ } else {
+ // Is not localhost. Just register service worker
+ registerValidSW(swUrl, config);
+ }
+ });
+ }
+}
+
+function registerValidSW(swUrl, config) {
+ navigator.serviceWorker
+ .register(swUrl)
+ .then(registration => {
+ registration.onupdatefound = () => {
+ const installingWorker = registration.installing;
+ if (installingWorker == null) {
+ return;
+ }
+ installingWorker.onstatechange = () => {
+ if (installingWorker.state === 'installed') {
+ if (navigator.serviceWorker.controller) {
+ // At this point, the updated precached content has been fetched,
+ // but the previous service worker will still serve the older
+ // content until all client tabs are closed.
+ console.log(
+ 'New content is available and will be used when all ' +
+ 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
+ );
+
+ // Execute callback
+ if (config && config.onUpdate) {
+ config.onUpdate(registration);
+ }
+ } else {
+ // At this point, everything has been precached.
+ // It's the perfect time to display a
+ // "Content is cached for offline use." message.
+ console.log('Content is cached for offline use.');
+
+ // Execute callback
+ if (config && config.onSuccess) {
+ config.onSuccess(registration);
+ }
+ }
+ }
+ };
+ };
+ })
+ .catch(error => {
+ console.error('Error during service worker registration:', error);
+ });
+}
+
+function checkValidServiceWorker(swUrl, config) {
+ // Check if the service worker can be found. If it can't reload the page.
+ fetch(swUrl, {
+ headers: { 'Service-Worker': 'script' },
+ })
+ .then(response => {
+ // Ensure service worker exists, and that we really are getting a JS file.
+ const contentType = response.headers.get('content-type');
+ if (
+ response.status === 404 ||
+ (contentType != null && contentType.indexOf('javascript') === -1)
+ ) {
+ // No service worker found. Probably a different app. Reload the page.
+ navigator.serviceWorker.ready.then(registration => {
+ registration.unregister().then(() => {
+ window.location.reload();
+ });
+ });
+ } else {
+ // Service worker found. Proceed as normal.
+ registerValidSW(swUrl, config);
+ }
+ })
+ .catch(() => {
+ console.log(
+ 'No internet connection found. App is running in offline mode.'
+ );
+ });
+}
+
+export function unregister() {
+ if ('serviceWorker' in navigator) {
+ navigator.serviceWorker.ready
+ .then(registration => {
+ registration.unregister();
+ })
+ .catch(error => {
+ console.error(error.message);
+ });
+ }
+}
diff --git a/frontend/microfrontend/src/setupTests.js b/frontend/microfrontend/src/setupTests.js
new file mode 100644
index 00000000..74b1a275
--- /dev/null
+++ b/frontend/microfrontend/src/setupTests.js
@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom/extend-expect';
diff --git a/frontend/microfrontend/webpack.config.js b/frontend/microfrontend/webpack.config.js
new file mode 100644
index 00000000..1dfbf303
--- /dev/null
+++ b/frontend/microfrontend/webpack.config.js
@@ -0,0 +1,93 @@
+const HtmlWebPackPlugin = require("html-webpack-plugin");
+const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
+const path = require('path');
+const Dotenv = require('dotenv-webpack');
+
+const deps = require("./package.json").dependencies;
+
+const printCompilationMessage = require('./compilation.config.js');
+
+module.exports = (_, argv) => ({
+ output: {
+ publicPath: "http://localhost:8080/",
+ },
+
+ resolve: {
+ extensions: [".tsx", ".ts", ".jsx", ".js", ".json"],
+ },
+
+ devServer: {
+ port: 8080,
+ historyApiFallback: true,
+ watchFiles: [path.resolve(__dirname, 'src')],
+ onListening: function (devServer) {
+ const port = devServer.server.address().port
+
+ printCompilationMessage('compiling', port)
+
+ devServer.compiler.hooks.done.tap('OutputMessagePlugin', (stats) => {
+ setImmediate(() => {
+ if (stats.hasErrors()) {
+ printCompilationMessage('failure', port)
+ } else {
+ printCompilationMessage('success', port)
+ }
+ })
+ })
+ }
+ },
+
+ module: {
+ rules: [
+ {
+ test: /\.m?js/,
+ type: "javascript/auto",
+ resolve: {
+ fullySpecified: false,
+ },
+ },
+ {
+ test: /\.(css|s[ac]ss)$/i,
+ use: ["style-loader", "css-loader", "postcss-loader"],
+ },
+ {
+ test: /\.(ts|tsx|js|jsx)$/,
+ exclude: /node_modules/,
+ use: {
+ loader: "babel-loader",
+ },
+ },
+ ],
+ },
+
+ plugins: [
+ new ModuleFederationPlugin({
+ // имя корневого приложения
+ name: "root",
+ filename: "remoteEntry.js",
+ // подключение микрофронтов
+ remotes: {
+ 'auth':'auth@http://localhost:8081/remoteEntry.js',
+ 'gallery':'gallery@http://localhost:8082/remoteEntry.js',
+ 'profile':'profile@http://localhost:8083/remoteEntry.js'
+ },
+ exposes: {},
+ // шаренные либы
+ shared: {
+ ...deps,
+ react: {
+ singleton: true,
+ requiredVersion: deps.react,
+ },
+ "react-dom": {
+ singleton: true,
+ requiredVersion: deps["react-dom"],
+ },
+ },
+ }),
+ new HtmlWebPackPlugin({
+ template: "./src/index.html",
+ }),
+ new Dotenv()
+ ],
+});
\ No newline at end of file