Модуль: 4. Разработка

Урок 1. Создание и регистрация мини-приложения

Главное в уроке

  • •

    Мини-приложения — веб-приложения, которые запускаются и работают внутри интерфейса ВКонтакте. Для их создания можно использовать любые современные технологии и инструменты веб-разработки. Обычно авторы используют Node.js.

  • •

    Проще всего создать код мини-приложения из шаблона create-vk-mini-app. Сгенерированный проект будет включать все необходимые библиотеки.

  • •

    Созданное мини-приложение надо обязательно зарегистрировать ВКонтакте. Сделать это можно на портале для разработчиков — dev.vk.com.

  • •

    Сервер мини-приложения должен быть доступен в интернете. Чтобы сделать доступным ваш локальный веб-сервер, используйте библиотеку VK Tunnel: запустите сервер приложения локально, запустите VK Tunnel, после создания туннеля укажите адрес сервера в настройках мини-приложения.

  • •

    Запустить созданное приложение можно по прямой ссылке, например https://vk.com/app12345. Вместо 12345 укажите идентификатор из настроек мини-приложения.

  • •

    Для постоянной работы файлы мини-приложения надо разместить на хостинге. Проще всего разместить их на хостинге ВКонтакте. Он бесплатный и поддерживает HTTPS-соединение. Для добавления файлов на хостинг ВКонтакте воспользуйтесь библиотекой vk-mini-apps-deploy.

Примеры командной строки

Создание проекта из шаблона

yarn
yarn create @vkontakte/vk-mini-app my-app-name
npm
npx init @vkontakte/vk-mini-app my-app-name
npx
npx @vkontakte/create-vk-mini-app my-app-name

Запуск VK Tunnel

Из-за технических работ с 2 октября 2025 года VK Tunnel недоступен

При подключении сервис вернёт ошибку. Для отладки и демонстрации ваших веб-приложений рекомендуем временно использовать сторонние решения.

Сначала запустите сервер мини-приложения локально.

Командная строка
npm run start

Потом запустите VK Tunnel.

Командная строка
npm run tunnel

Запуск мини-приложения

URL для запуска
https://vk.com/app12345

— или —

URL для запуска
https://m.vk.com/app12345

Вместо 12345 подставьте ID вашего приложения из настроек.

Размещение файлов на хостинге ВКонтакте

Командная строка
npm run deploy

Полезные ссылки

← Предыдущий урок

Следующий урок →