В этом репозитории представлен пример простейшего фронтенд-сервиса с Vue.js.
Большая часть команд и инструкций написаны для операционных систем Linux и MacOS.
- Node.js v18 – среда исполнения на языке JavaScript/TypeScript
- NPM – консольный менеджер пакетов для установки библиотек (идет в поставке с Node.js)
- Vue.js – фраемворк для разработки фронтенда
- Vite – консольный менеджер для удобства работы с Vue.js
Фронтенд (англ. front end, frontend) — презентационная часть web приложения, её пользовательский интерфейс и связанные с ним компоненты.
В данном примере используется популярный фраемворк Vue.js. Разработка ведется на языке TypeScript.
Для удобства разработки в VS Code создан workspace с преднастроенными командами и рекомендованными расширениями для работы.
Перед началом работы нужно установить зависимости командой
pnpm install
Для локального запуска необходимо выполнить команду
pnpm dev
-
Приложение предполагает, что вы запускаете его из Твой ФФ. Чтобы имитировать запуск из Твой ФФ:
-
Зарегистрируйтесь в тестовой среде «Твой ФФ!» по адресу https://app.test.profcomff.com/auth. Подтвердите аккаунт и войдите в пользователя (при необходимости).
-
Перейдите в панель администрирования https://app.test.profcomff.com/admin.
-
Нажмите кнопку «скопировать параметры приложения».
-
Подставьте полученную строку после адреса вашего приложения в браузере
Код, который обрабатывает данные пользователя из 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
Для работы с данным примером необходимо забрать его к себе на ПК. Для этого нужно:
- (Опционально) Если вы хотите далее опубликовать код на GitHub полезно сначала скопировать репозиторий к себе кнопкой Fork на GitHub. Кнопка доступна в правом верхнем углу страницы репозитория.
- Создайте папку в удобном вам расположении.
- Удобно создать папку на рабочем столе с названием вашего приложения.
- Откройте приложение "Командная строка" или "Терминал", в зависимости от операционной системы.
- Прейдите в папку проекта командой
cd /путь/к/папке
.- Если вы пользователь windows и создали на рабочем столе папку
my_app
, то команда будет выглядеть так:cd %userprofile%/Desktop/my_app
- Если вы пользователь linux или MacOS и создали на рабочем столе папку
my_app
, то команда будет выглядеть сделующим образом:cd ~/Desktop/my_app
- Если вы пользователь windows и создали на рабочем столе папку
- Склонируйте код репозитория к себе на ПК командой
git clone https://github.com/profcomff/app-template.git .
(точка в конце означает скачивание кода в текущую папку). Если вы выполнили пункт 1 используйте в команде ссылку из зеленой кнопки "Code" в правом верхнем углу вашего репозитория. - Откройте код в удобной среде разработки. Рекомендуем использовать VSCode, который можно открыть
из терминала командой
code .
Сборка исходного кода в один пакет производится с помощью Docker. В этом случае создается независимый от операционной системы пакет, который можно без проблем разместить на любом сервере.
Выполните команду make
для сборки приложения. После окончания выполнения этой команды будет создан
новый Docker образ с названием my_app
, который можно запустить командой make run
Коммит в main запускает автоматическую сборку проекта средствами GitHub Actions. Настройки автосборки находятся в файле .github/workflows/build_and_publish.yml.
При создании запроса на слияние, автоматически создаются проверки кода юниттестами и на стили. Следующие тесты будут запущены:
- Проверки стилей
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.