Есть пример создания Mini App на основе вайта?

[scffs]

Всем привет, получалось у кого-нибудь сделать мини апп на вайте (react + vite)?

[SevereCloud]

Привет, в быстром старте описано как создавать приложение на VKUI. Для работы VK Mini Apps дополнительно необходимо добавить вызов VKWebAppInit

Шаг 1

Используем шаблон vite для создания приложения:

# npm
npm create vite@latest
# yarn
yarn create vite
# or pnpm
pnpm create vite

Следуем инструкциям, называем проект, выбираем React и нужный язык

Шаг 2

В папке с проектом устанавливаем VKUI и другие нужные библиотеки

# npm
npm i --save @vkontakte/vkui @vkontakte/icons @vkontakte/vk-bridge
# yarn
yarn add @vkontakte/vkui @vkontakte/icons @vkontakte/vk-bridge
# or pnpm
pnpm add @vkontakte/vkui @vkontakte/icons @vkontakte/vk-bridge

@vkontakte/icons — это наши иконки, которые напрямую используются в некоторых компонентах VKUI.
@vkontakte/vk-bridge необходима для интеграции в клиенты VK (она обеспечит корректные отступы на мобильных устройствах, свайпы, определение темы и тд).

Шаг 3

В файле index.html необходимо добавить тег viewport для корректного отображения интерфейса на безрамочных смартфонах (подробнее см. в статье "The Notch" and CSS).

- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <meta
+   name="viewport"
+   content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, viewport-fit=cover"
+ />

Шаг 4

Собираем базовый app shell для VKUI

// src/main.js

import React from "react";
import ReactDOM from "react-dom/client";
import { AdaptivityProvider, ConfigProvider } from "@vkontakte/vkui";
import bridge from "@vkontakte/vk-bridge";
import App from "./App";
import "@vkontakte/vkui/dist/vkui.css";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <ConfigProvider>
      <AdaptivityProvider>
        <App />
      </AdaptivityProvider>
    </ConfigProvider>
  </React.StrictMode>
);

// src/App.js

import {
  AppRoot,
  SplitLayout,
  SplitCol,
  View,
  Panel,
  PanelHeader,
  Header,
  Group,
  SimpleCell,
} from "@vkontakte/vkui";

function App() {
  return (
    <AppRoot>
      <SplitLayout header={<PanelHeader separator={false} />}>
        <SplitCol autoSpaced>
          <View activePanel="main">
            <Panel id="main">
              <PanelHeader>VKUI</PanelHeader>
              <Group header={<Header mode="secondary">Items</Header>}>
                <SimpleCell>Hello</SimpleCell>
                <SimpleCell>World</SimpleCell>
              </Group>
            </Panel>
          </View>
        </SplitCol>
      </SplitLayout>
    </AppRoot>
  );
}

export default App;

Шаг 5

Для работы VK Mini Apps необходимо добавить вызов VKWebAppInit(например в main.js), иначе приложение будет показывать бесконечную загрузку.

// Init VK  Mini App
bridge.send("VKWebAppInit");

---

По итогу должен получится такой проект

[SevereCloud]

Команды vk-tunnel --port=5173 должно хватить, чтобы запустить туннель.

[scffs]

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

[scffs]

Команды vk-tunnel --port=5173 должно хватить, чтобы запустить туннель.

помогло...спасибо....

[scffs]

С горе пополам сервер поднялся, но в консоли сыпятся ошибки..
При этом в самой ide всё окей

Я, конечно, поищу решение, но буду рад очередной помощи, если это связано с vk tunnel

[scffs]

Починил.
Спасибо огромное, Даниил </3