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

В этом репозитории представлен пример простейшего фронтенд-сервиса с Vue.js.

Большая часть команд и инструкций написаны для операционных систем Linux и MacOS.

Зависимости

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

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

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

В данном примере используется популярный фраемворк Vue.js. Разработка ведется на языке TypeScript.

Разработка

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

Перед началом работы нужно установить зависимости командой

pnpm install

Для локального запуска необходимо выполнить команду

pnpm dev

Важные замечания по коду

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

  1. Зарегистрируйтесь в тестовой среде «Твой ФФ!» по адресу https://app.test.profcomff.com/auth. Подтвердите аккаунт и войдите в пользователя (при необходимости).

  2. Перейдите в панель администрирования https://app.test.profcomff.com/admin.

  3. Нажмите кнопку «скопировать параметры приложения».

  4. Подставьте полученную строку после адреса вашего приложения в браузере

  Код, который обрабатывает данные пользователя из URL находится здесь: https://github.com/profcomff/app-template/blob/1070d4370d37529702d7499baeaf145ba4cd9e62/frontend/src/store/profileStore.ts#L15-L28

• ./src/api/user/AuthApi.ts и ./src/api/user/UserdataApi.ts

  в этих файлах хранится код взаимодействия с Auth API и Userdata API, позволяющие получить информацию о текущем пользователе.

• По умолчанию используется тестовая среда для общения с API Твой ФФ! Данное поведение меняется в файле .env: https://github.com/profcomff/app-template/blob/main/frontend/.env

Инструкции

Получение кода на свой компьютер

Для работы с данным примером необходимо забрать его к себе на ПК. Для этого нужно:

1. (Опционально) Если вы хотите далее опубликовать код на GitHub полезно сначала скопировать репозиторий к себе кнопкой Fork на GitHub. Кнопка доступна в правом верхнем углу страницы репозитория.
2. Создайте папку в удобном вам расположении.
   • Удобно создать папку на рабочем столе с названием вашего приложения.
3. Откройте приложение "Командная строка" или "Терминал", в зависимости от операционной системы.
4. Прейдите в папку проекта командой cd /путь/к/папке.
   • Если вы пользователь windows и создали на рабочем столе папку my_app, то команда будет выглядеть так: cd %userprofile%/Desktop/my_app
   • Если вы пользователь linux или MacOS и создали на рабочем столе папку my_app, то команда будет выглядеть сделующим образом: cd ~/Desktop/my_app
5. Склонируйте код репозитория к себе на ПК командой git clone https://github.com/profcomff/app-template.git . (точка в конце означает скачивание кода в текущую папку). Если вы выполнили пункт 1 используйте в команде ссылку из зеленой кнопки "Code" в правом верхнем углу вашего репозитория.
6. Откройте код в удобной среде разработки. Рекомендуем использовать VSCode, который можно открыть из терминала командой code .

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

Сборка исходного кода в один пакет производится с помощью Docker. В этом случае создается независимый от операционной системы пакет, который можно без проблем разместить на любом сервере.

Выполните команду make для сборки приложения. После окончания выполнения этой команды будет создан новый Docker образ с названием my_app, который можно запустить командой make run

Автосборка

Коммит в main запускает автоматическую сборку проекта средствами GitHub Actions. Настройки автосборки находятся в файле .github/workflows/build_and_publish.yml.

Тесты на Pull Request

При создании запроса на слияние, автоматически создаются проверки кода юниттестами и на стили. Следующие тесты будут запущены:

• Проверки стилей eslint, prettier, stylelint на код в папке frontend

Настройки автотестов находятся в файле.github/workflows/checks.yml.

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

На данном этапе вам необходимо разместить приложение на каком-либо хостинге, поддерживающем протокол https.

Для этого подойдет любой VPS сервер, который вы можете найти в интернете. Мы рекомендуем использовать VPS сервера на операционной системе linux, для удобства размещения приложений и компонентов использовать Docker.

Чтобы получить SSL сертификаы для поддержки https можно использовать letsencrypt.com, предоставляющий SSL сертификаты бесплатно. Для удобства работы можно использовать веб сервер с встроенной поддержкой этих сертификатов, например Traefik или Caddy.

Шаблон приложения имеет уже готовые Dockerfile для сборки вашего приложения, файл docker-compose.production.yml с настройками развертывания приложения с Caddy Server и включенным https, а также базой данных PostgreSQL.