@vkontakte/create-vk-mini-app

create-vk-mini-app

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

Ключевые особенности

• Cборка с помощью Vite.

• Автоматическое подключение и поддержка последних версий библиотек, необходимых для создания мини-приложений.

• Конфигурация проекта под различные задачи.

• Поддержка TypeScript и JavaScript.

• Интерактивный режим создания проекта.

• Бесплатный хостинг мини-приложения при помощи vk-miniapps-deploy.

Запуск

yarn

yarn create @vkontakte/vk-mini-app [app-dir-name] [params]

npm

npm init @vkontakte/vk-mini-app@latest [app-dir-name] -- [params]

Обратите внимание на двойное тире перед списком параметров. Оно необходимо, это требование npm.

npx

npx @vkontakte/create-vk-mini-app [app-dir-name] [params]

Для Node.js < 18.0.0

Если вы используете более раннюю версию Node.js, чем 18.0.0, то вам нужен пакет create-vk-mini-app версии 1. Чтобы указать номер версии, введите @1 после названия пакета.

npx @vkontakte/create-vk-mini-app@1 [app-dir-name] [options]

Дальнейшие шаги

Команды, упомянутые выше, запускают скрипт создания приложения. Скрипт последовательно попросит вас указать следующие параметры:

• Имя папки для приложения. Если имя папки соответствует требованиям именования npm-пакетов, то это же имя будет указано как название проекта в package.json. Если имя папки не может быть использовано для именования пакета, скрипт попросит вас указать другое имя.

• Язык программирования: TypeScript или JavaScript.

• Структурные шаблоны — набор библиотек, которые будут включены в проект:

  • VKUI+Bridge+Router — рекомендуемый вариант для создания мини-приложений ВКонтакте.

  • VKUI+Bridge

  • VKUI-only — этот вариант не подходит для создания мини-приложений. Используйте его для быстрого создания веб-приложений, использующих библиотеку VKUI.

  Подробнее о шаблонах

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

При запуске вы можете ввести следующие параметры командной строки, чтобы указать характеристики создаваемого приложения.

Все параметры необязательные.

Параметр	Описание
app-dir-name	Имя папки для создаваемого приложения.
--projectName={name}	Имя проекта создаваемого приложения, которое будет указано в package.json. Используется в случае, когда имя папки не соответствует правилам именования npm-пакетов.
--typescript	Создаёт проект на TypeScript. Если этот параметр не указан, то скрипт попросит указать язык при создании приложения.
--template={name} или --t={name}	Структурный шаблон — набор библиотек, которые будут включены в приложение при создании. Возможные значения {name}: vkui-bridge-router vkui-bridge vkui-only

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

Пример 1

yarn create  @vkontakte/vk-mini-app mini-app --typescript --template=vkui-bridge-router

Создаст проект из структурного шаблона VKUI+Bridge+Router на TypeScript в подпапке mini-app текущей папки.

Пример 2

npm init  @vkontakte/vk-mini-app . -- --template=vkapp-bridge-ui

Создаст проект из структурного шаблона VKUI+Bridge. Скрипт запросит имя папки и язык программирования.

Структурные шаблоны

Параметр	Описание
vkui-bridge-router	Проект со следующими включёнными библиотеками: VKUI — Библиотека React-компонентов для создания UI. VK Bridge — Библиотека для взаимодействия с платформой ВКонтакте. vk-mini-apps-router — Библиотека маршрутизации. Совет. Мы рекомендуем именно этот вариант для создания мини-приложений. В проект также подключены другие инструменты и пакеты, которые упрощают создание мини-приложений: vk-miniapps-deploy — размещение файлов мини-приложения на хостинге ВКонтакте. VK Tunnel — доступ к веб-серверу, запущенному на рабочем компьютере, из глобальной сети. Необходимо для отладки. Eruda — консоль разработчика. Используется для отладки. @vkontakte/icons — набор иконок. Vite — сборка приложения. ESLint — проверка синтаксиса и правил кодирования. React и React-DOM — стандартные React-библиотеки.
vkui-bridge	Те же библиотеки и инструменты, что и при использовании vkui-bridge-router, за исключением библиотеки маршрутизации vk-mini-apps-router.
vkapp-only	Проект со следующими библиотеками и инструментами: VKUI @vkontakte/icons React и React-DOM Vite ESLint Этот вариант не подойдёт для создания мини-приложений, так как в нём отсутствует VK Bridge — библиотека, которая необходима для взаимодействия с платформой. Используйте этот вариант для создания веб-приложений, использующих библиотеку VKUI.

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

• Документация VKUI

• Документация vk-mini-apps-router

• Примеры мини-приложений

• Сообщество VK Mini Apps — сообщество разработчиков мини-приложений ВКонтакте

Сотрудничество

Мы рады новым идеям и предложениям по улучшению библиотеки. Если вы хотите расширить примеры или улучшить интерфейс командной строки:

1. Сделайте ответвление (fork) репозитория.

2. Склонируйте репозиторий и установите зависимости, выполнив команду yarn.

3. Внесите изменения в код.

4. Выполните сборку с помощью команды yarn run build.

5. Установите изменённый пакет: yarn link.
   Запустите его, чтобы протестировать изменения: create-vk-mini-app.

6. Отправьте MR нам на проверку.

Changelog

v2.0.10

• Добавили настройки vite для hot-reload @vkontakte/vk-tunnel.