{"id":26157218,"url":"https://github.com/profcomff/vuets-template","last_synced_at":"2025-08-19T18:41:54.502Z","repository":{"id":280152003,"uuid":"831693346","full_name":"profcomff/vuets-template","owner":"profcomff","description":null,"archived":false,"fork":false,"pushed_at":"2025-03-12T20:41:35.000Z","size":326,"stargazers_count":4,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-27T22:23:27.862Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/profcomff.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-21T10:50:53.000Z","updated_at":"2025-03-12T20:41:38.000Z","dependencies_parsed_at":"2025-03-01T16:34:27.685Z","dependency_job_id":null,"html_url":"https://github.com/profcomff/vuets-template","commit_stats":null,"previous_names":["profcomff/vuets-template"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/profcomff%2Fvuets-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/profcomff%2Fvuets-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/profcomff%2Fvuets-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/profcomff%2Fvuets-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/profcomff","download_url":"https://codeload.github.com/profcomff/vuets-template/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248852109,"owners_count":21171839,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-03-11T09:58:32.112Z","updated_at":"2025-04-14T08:53:54.230Z","avatar_url":"https://github.com/profcomff.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Пример приложения\n\nВ этом репозитории представлен пример простейшего фронтенд-сервиса с Vue.js.\n\n\n*Большая часть команд и инструкций написаны для операционных систем Linux и MacOS.*\n\n## Зависимости\n- Node.js v18 – среда исполнения на языке JavaScript/TypeScript\n- NPM – консольный менеджер пакетов для установки библиотек (идет в поставке с Node.js)\n- Vue.js – фраемворк для разработки фронтенда\n- Vite – консольный менеджер для удобства работы с Vue.js\n\n## Frontend разработка на Vue.js\n\nФронтенд (англ. front end, frontend) — презентационная часть web приложения, её пользовательский\nинтерфейс и связанные с ним компоненты.\n\nВ данном примере используется популярный фраемворк [Vue.js](https://vuejs.org/). Разработка ведется\nна языке TypeScript.\n\n\n## Разработка\n\nДля удобства разработки в VS Code создан [workspace](../frontend.code-workspace) с преднастроенными\nкомандами и рекомендованными расширениями для работы.\n\nПеред началом работы нужно установить зависимости командой\n```\npnpm install\n```\n\nДля локального запуска необходимо выполнить команду\n```\npnpm dev\n```\n\n\n### Важные замечания по коду\n- Приложение предполагает, что вы запускаете его из Твой ФФ. Чтобы имитировать запуск из Твой ФФ:\n\n    1. Зарегистрируйтесь в тестовой среде «Твой ФФ!» по адресу https://app.test.profcomff.com/auth. Подтвердите аккаунт и войдите в пользователя (при необходимости).\n\n    2. Перейдите в панель администрирования https://app.test.profcomff.com/admin.\n\n    3. Нажмите кнопку «скопировать параметры приложения».\n\n    4. Подставьте полученную строку после адреса вашего приложения в браузере\n\n    Код, который обрабатывает данные пользователя из URL находится здесь: https://github.com/profcomff/app-template/blob/1070d4370d37529702d7499baeaf145ba4cd9e62/frontend/src/store/profileStore.ts#L15-L28\n\n\n- `./src/api/user/AuthApi.ts` и `./src/api/user/UserdataApi.ts`\n\n    в этих файлах хранится код взаимодействия с [Auth API](https://api.profcomff.com/?urls.primaryName=auth)\n    и [Userdata API](https://api.profcomff.com/?urls.primaryName=userdata), позволяющие получить\n    информацию о текущем пользователе.\n\n- По умолчанию используется тестовая среда для общения с API Твой ФФ! Данное поведение меняется в файле `.env`: https://github.com/profcomff/app-template/blob/main/frontend/.env\n\n\n## Инструкции\n### Получение кода на свой компьютер\nДля работы с данным примером необходимо забрать его к себе на ПК. Для этого нужно:\n1. *(Опционально)* Если вы хотите далее опубликовать код на GitHub полезно сначала скопировать\n   репозиторий к себе кнопкой Fork на GitHub. Кнопка доступна в правом верхнем углу\n   [страницы репозитория](https://github.com/profcomff/app-template).\n2. Создайте папку в удобном вам расположении.\n    - *Удобно создать папку на рабочем столе с названием вашего приложения.*\n3. Откройте приложение \"Командная строка\" или \"Терминал\", в зависимости от операционной системы.\n4. Прейдите в папку проекта командой `cd /путь/к/папке`.\n    - Если вы пользователь windows и создали на рабочем столе папку `my_app`, то команда будет\n      выглядеть так: `cd %userprofile%/Desktop/my_app`\n    - Если вы пользователь linux или MacOS и создали на рабочем столе папку `my_app`, то команда\n      будет выглядеть сделующим образом: `cd ~/Desktop/my_app`\n5. Склонируйте код репозитория к себе на ПК командой\n  `git clone https://github.com/profcomff/app-template.git .` (точка в конце означает скачивание\n  кода в текущую папку). Если вы выполнили пункт 1 используйте в команде ссылку из зеленой кнопки\n  \"Code\" в правом верхнем углу вашего репозитория.\n6. Откройте код в удобной среде разработки. Рекомендуем использовать VSCode, который можно открыть\n   из терминала командой `code .`\n\n### Сборка и запуск приложения для публикации\nСборка исходного кода в один пакет производится с помощью Docker. В этом случае создается\nнезависимый от операционной системы пакет, который можно без проблем разместить на любом сервере.\n\nВыполните команду `make` для сборки приложения. После окончания выполнения этой команды будет создан\nновый Docker образ с названием `my_app`, который можно запустить командой `make run`\n\n\n### Автосборка\nКоммит в main запускает автоматическую сборку проекта средствами GitHub Actions. Настройки автосборки находятся в\nфайле [.github/workflows/build_and_publish.yml](.github/workflows/build_and_publish.yml).\n\n### Тесты на Pull Request\nПри создании запроса на слияние, автоматически создаются проверки кода юниттестами и на стили.\nСледующие тесты будут запущены:\n- Проверки стилей `eslint`, `prettier`, `stylelint` на код в папке `frontend`\n\nНастройки автотестов находятся в файле[.github/workflows/checks.yml](.github/workflows/checks.yml).\n\n### Публикация готового приложения\nНа данном этапе вам необходимо разместить приложение на каком-либо хостинге, поддерживающем протокол https.\n\nДля этого подойдет любой VPS сервер, который вы можете найти в интернете. Мы рекомендуем использовать VPS сервера на операционной системе linux, для удобства размещения приложений и компонентов использовать Docker.\n\nЧтобы получить SSL сертификаы для поддержки https можно использовать letsencrypt.com, предоставляющий SSL сертификаты бесплатно. Для удобства работы можно использовать веб сервер с встроенной поддержкой этих сертификатов, например Traefik или Caddy.\n\nШаблон приложения имеет уже готовые [Dockerfile](cicd/Dockerfile) для сборки вашего приложения, файл [docker-compose.production.yml](cicd/docker-compose.production.yml) с настройками развертывания приложения с Caddy Server и включенным https, а также базой данных PostgreSQL.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprofcomff%2Fvuets-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprofcomff%2Fvuets-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprofcomff%2Fvuets-template/lists"}