Basic VK Bridge + VKUI + VK Miniapps Router app
Этот шаблон предоставляет базовый код и настройки для создания мини-приложения внутри ВКонтакте.
В качестве сборщика проекта выступает Vite, подробнее про его конфигурацию и дополнительные плагины можно прочитать здесь и здесь.
Запустите ваш мини апп
yarn startПерейдите на devportal или в управление и создайте новый мини апп.
Вставьте URL на котором работает ваше приложение в настройки, предварительно включив режим разработки.
Теперь можете открыть мини апп, нажав на его иконку.
Список всех созданных вами мини приложений вы сможете найти тут или тут.
Для того чтобы поделиться приложением запущенным на localhost со своими друзьями, вы можете скачать утилиту vk-tunnel и запустить уже подготовленный скрипт из package.json
yarn global add @vkontakte/vk-tunnel
yarn run tunnelПосле чего вы получите ссылку, по которой ваше приложение будет доступно с любого устройства, подробнее про vk-tunnel можно прочитать тут.
Для того чтобы захостить ваше приложение на сервера ВКонтакте нужно зайти в vk-hosting-config.json и указать id вашего приложения. Далее можно запустить уже подготовленный скрипт:
yarn run deployПосле чего, вы получите бессрочную ссылку на ваш мини апп.
Мы подготовили для вас набор пакетов, с которыми вам будет легко начать разрабатывать мини аппы
| Пакет | Назначение |
|---|---|
| vk-bridge | Библиотека для отправки команд и обмена данными с платформой ВКонтакте. |
| VKUI | Библиотека React-компонентов для создания мини-приложений в стиле ВКонтакте. |
| vk-bridge-react | Пакет, который даёт возможность использовать события библиотеки VK Bridge в React-приложениях. |
| vk-mini-apps-router | Библиотека для маршрутизации и навигации в мини-приложениях, созданных с помощью VKUI. |
| icons | Набор иконок для использования в компонентах VKUI. |
| vk-miniapps-deploy | Пакет для размещения файлов мини-приложения на хостинге ВКонтакте. |
| eruda | Консоль для мобильного браузера |
Dev портал разработчиков
Пример мини приложения
Если столкнулись с проблемами