Пример приложения

В этом репозитории представлен пример простейшего фронтенд-сервиса с Vue.js.
Большая часть команд и инструкций написаны для операционных систем Linux и MacOS.

---

Зависимости

• Node.js v18 или выше – среда исполнения JavaScript/TypeScript
• PNPM – менеджер пакетов (можно использовать NPM, но мы рекомендуем PNPM)
• Vue.js – фреймворк для фронтенда
• Vite – инструмент сборки и локального dev-сервера
• Docker – для сборки и деплоя

---

Frontend разработка на Vue.js

Фронтенд (англ. front end, frontend) — презентационная часть web-приложения, её интерфейс и компоненты.
В примере используется Vue.js и TypeScript.

Начало разработки

Для удобства разработки в VS Code можно использовать workspace с преднастроенными командами и рекомендуемыми расширениями.

1. Установи зависимости: pnpm install
2. Запусти локальный dev-сервер: pnpm dev

Интеграция с ТВОЙ ФФ

Приложение предполагает, что ты запускаешь его из среды «Твой ФФ». Чтобы имитировать запуск:

1. Зарегистрируйся в тестовой среде Твой ФФ!
2. Перейди в панель администрирования: https://app.test.profcomff.com/admin
3. Нажми «скопировать параметры приложения».
4. Запусти серве и перейди по ссылке (обычно localhost:5173), а потом добавь в конце скопированные параметры.
5. Код, который обрабатывает данные пользователя из URL, находится в src/store/profileStore.ts.

Также есть методы для локальной авторизации с тестовым токеном (VITE_TVOI_FF_TOKEN в .env.development):

• await setupDevAdminSession(null); // админская сессия
• await setupDevUserSession(null); // юзерская сессия

Эти методы описаны в /src/store/profileStore.ts. Там же можно описать, какими скоупами будет обладать та или иная сессия -- для этого эти скоупы должны иметься у сессии в Твой ФФ.

Пулл ревесты

• Проверь, что выполняются стили: pnpm check
• Опционально: сложная версия pnpm check:hard
• Заполни шаблон пулл-реквеста: что, как и зачем сделано
• Запроси ревью у члена команды

Инструкции

Клонирование репозитория

1. (Опционально) Сначала можешь сделать Fork репозитория на GitHub.
2. Открой терминал и перейди в папку, в которой будешь создавать папку проекта:
   1. Windows: cd %userprofile%/Desktop/
   2. Linux/MacOS: cd ~/Desktop/
3. Склонируй репозиторий: git clone https://github.com/profcomff/app-template.git my_app, где my_app -- название папки.

Открой код в твоем редакторе -- мы рекомендуем VS Code. Для удобства в проекте есть frontend.code-workspace с настройками и рекомендованными расширенями -- открой этот файл через File > Open workspace from file....

Настройка автоформатирования

1. Открыть файл с расширением .vue.
2. Открыть палитру команд (Help > Show All Commands или Ctrl+Shift+P)
3. Ввести и выбрать Format document with.
4. Выбрать Configure Default Formatter.
5. Выбрать Prettier.

Теперь можно форматировать файлы с помощью Shift+Alt+F. Еще можно настроить автоформатирование при сохранении файла (File > Preferences > Settings, Format on save).

Сборка и запуск приложения

Сборка производится через Docker, что создаёт независимый от ОС пакет.

make       # сборка Docker образа
make run   # запуск контейнера

.env содержит базовый URL API:

VITE_API_BASE_URL=https://api.example.com

CI/CD

Коммит в main запускает автоматическую сборку через GitHub Actions: .github/workflows/build_and_publish.yml

Проверки кода на PR: eslint, prettier, stylelint. Настройки: .github/workflows/checks.yml

Публикация приложения

Можно разместить приложение на любом хостинге с HTTPS. Рекомендуем использовать VPS на Linux с Docker.

Для SSL можно использовать letsencrypt.com или веб-серверы с встроенной поддержкой сертификатов (Traefik, Caddy).

Dockerfile и docker-compose уже настроены для быстрого деплоя с включённым HTTPS.