cloud-file-storage: frontend integration

Author: zhukovsd

content/projects/cloud-file-storage.md

@@ -51,9 +51,10 @@ weight = 6
 
 ## REST API
 
-- Архитектурный стиль - RPC для авторизации и регистрации, REST для всего остального
-- Механизм авторизации - сессии
-- Формат запросов и ответов - JSON, кроме скачивания и аплоада файлов
+- Архитектурный стиль - RPC для авторизации и регистрации, REST для всего остального.
+- Все эндпоинты существуют под общим путём `/api`. Пути ниже относительны его, пример - `/api/auth/sign-up`.
+- Механизм авторизации - сессии.
+- Формат запросов и ответов - JSON, кроме скачивания и аплоада файлов.
 
 ### Ответ в случае ошибки
 
@@ -389,19 +390,35 @@ GET параметр `path` - путь к папке, в которую мы з
 - "Переименовывать" папки. Насколько знаю в S3 нет такой операции, переименование папки по сути представляет собой создание папки под новым именем и перенос туда файлов
 - Удалять файлы
 
-## Upload файлов
+## Фронтенд
 
-Для загрузки файлов необходимо воспользоваться HTML file input - [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file). Распространённый подход оформить это в виде зоны, на которую можно перетягивать файлы из проводника, пример - [https://codepen.io/dcode-software/pen/xxwpLQo](https://codepen.io/dcode-software/pen/xxwpLQo).
+Для проекта написан одностраничный фронтенд на React, спасибо Андрею [@MrShoffen](https://t.me/MrShoffen) - [https://github.com/zhukovsd/cloud-storage-frontend/](https://github.com/zhukovsd/cloud-storage-frontend/).
 
-На уровне HTTP, передача файлов осуществляется с помощью `multipart/form-data`.
+Демо фронтенда с мокнутным API (фронтенд отображает "фейковые" данные) - [https://zhukovsd.github.io/cloud-storage-frontend/files/](https://zhukovsd.github.io/cloud-storage-frontend/files/).
 
-Со стороны Spring Boot необходимо будет реализовать контроллер(ы) для обработки загруженных файлов. Важно иметь в виду, что по-умолчанию лимит на загрузку файлов в Spring Boot равен 10 мегабайтам, но его можно увеличить.
+Основные страницы:
 
-### Загрузка папок
+- Содержимое [корневой папки](https://zhukovsd.github.io/cloud-storage-frontend/files/)
+- Содержимое [вложенной папки](https://zhukovsd.github.io/cloud-storage-frontend/files/mocked_folder1/)
+- Формы регистрации и авторизации доступны через пункт "Выход" в меню заголовка [главной страницы](https://zhukovsd.github.io/cloud-storage-frontend/files/)
 
-File input может быть использован для загрузки либо отдельных файлов, либо папок (если у input установлен атрибут [webkitdirectory](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#webkitdirectory)), но не одновременно.
+### Интеграция фронтенда
 
-Получается, что необходимо иметь 2 input'а - для файлов, и для папок. Возможно, существуют Javascript библиотеки, которые решают этот вопрос и реализуют единый input для обоих случаев.
+Собранное React приложение представляет собой набор статических файлов - [https://github.com/zhukovsd/cloud-storage-frontend/tree/master/dist](https://github.com/zhukovsd/cloud-storage-frontend/tree/master/dist).
+
+Самый простой способ интеграции - добавить эти файлы в Spring Boot проекта.
+
+Необходимо, чтобы точка входа в React приложение (`index.html`) была доступна по корневому адресу в запущенном Spring Boot сервисе. Остальные файлы должны быть доступны по соответствующим относительным путям.
+
+Эндпоинты API при этом будут существовать под общим путём `/api`. Пример - `/api/auth/sign-up`.
+
+#### Альтернативный способ интеграции - Docker
+
+В случае, если есть желание отделить фронтенд от бека, можно раздавать статику React приложения через запущенный в Docker контейнере Nginx:
+
+1. В файле [public/config.js](https://github.com/zhukovsd/cloud-storage-frontend/blob/master/public/config.js) необходимо прописать адрес API бэкенда. Пример - `http://localhost:8080`
+2. Пересобрать Docker образ из Dockerfile
+3. Запустить контейнер вручную или через Docker Compose
 
 ## Тесты