The translation was generated automatically and may contain mistakes

Module: 4. Development

Lesson 1. Creating and registering a mini-app

The main thing in the lesson

  • Mini-applications are web applications that run and run inside the VKontakte interface. To create them, you can use any modern technologies and web development tools. Authors usually use Node.js.

  • The easiest way is to create a mini-application code from a template create-vk-mini-app . The generated project will include all the necessary libraries.

  • The created mini-application must be registered VKontakte You can do this on the developer portal — dev.vk.ru .

  • The server of the mini-app should be available on the Internet. To make your local web server available, use the VK Tunnel Library : run the application server locally, run VK Tunnel, after creating the tunnel, specify the server address in the mini-application settings.

  • You can run the created application by a direct link, for example https://vk.ru/app12345 . Instead of 12345 Enter the ID from mini-application settings .

  • For constant operation, mini-application files must be placed on the hosting. The easiest way to place them on the hosting of the VKontakte> It is free and supports HTTPS connection. To add files to the hosting VKontakte use vk-mini-apps-deploy .

Command-Line Examples

Creating a project from a template

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

Launch of VK Tunnel

Due to technical work from October 2, 2025, VK Tunnel is not available

When you connect, the service will return an error. For debugging and demonstrating your web applications, we recommend using third-party solutions temporarily.

First, run the mini-application server locally.

?2?The command line npm run start

Потом запустите VK Tunnel. ```Командная строка npm run tunnel

Running a mini-app

''URL to launch https://vk.ru/app12345

— или — ```URL для запуска https://m.vk.ru/app12345

Instead of 12345 Submit your application ID from settings .

Placement of files on the hosting VKontakte

?2?The command line npm run deploy

## Полезные ссылки * [Клиентская часть (исходный код)](https://github.com/VKCOM/vk-mini-apps-course-frontend) * [Серверная часть (исходный код)](https://github.com/VKCOM/vk-mini-apps-course-backend) * [Мини-приложение« Блюдо дня»](https://vk.ru/app51773283) * [Первые шаги (документация мини-приложений)](https://dev.vk.ru/mini-apps/getting-started) * [Пакет create-vk-mini-app](https://dev.vk.ru/mini-apps/getting-started/create-vk-mini-app/) * [Библиотека VK Tunnel](https://dev.vk.ru/libraries/tunnel) * [Хостинг статики для мини-приложений](https://dev.vk.ru/ru/mini-apps/development/hosting/overview) :::course_navigation [← Предыдущий урок](mini-apps/learning/course/4-development) [Следующий урок →](mini-apps/learning/course/4-development/2-vkui) :::