Live Dev: видите каждое сохранение на своём телефоне

1Что такое Live Dev#

Live Dev создаёт ПРИЛОЖЕНИЕ ДЛЯ РАЗРАБОТКИ для вашего собственного телефона. Вместо того чтобы упаковывать файлы в APK, приложение загружает их с dev-сервера, запущенного на вашем компьютере, поэтому каждый раз, когда вы сохраняете файл, изменение появляется на телефоне. Без пересборки, без переустановки, без копирования ZIP.

Это настоящая оболочка AppMint, а не вкладка браузера: камера, геолокация, уведомления, реклама, кнопка «Назад», боковое меню и все мосты AppMint работают точно так же, как будут работать в готовом приложении.

Вы собираете приложение один раз. Дальше вы возвращаетесь в AppMint, только когда меняете что-то нативное: разрешение, значок, заставку, ID рекламы.

2Соберите приложение для разработки (один раз)#

1. На главном экране нажмите «Live Dev» (или «Создать APK» → плитка «Live Dev»).
2. Выберите порт вашего сервера разработки. Для популярных инструментов — одно касание: Vite 5173, React / Next 3000, Angular 4200, Vue CLI 8080, Live Server 5500, Python 8000, Astro 4321. Подойдёт любой порт от 1024.
3. Необязательно: стартовая страница вроде /admin/index.html и адрес вашего компьютера. Оставьте адрес пустым: приложение само найдёт ваш компьютер.
4. Задайте имя пакета, заканчивающееся на .dev (например, com.myshop.dev), чтобы потом оно могло стоять рядом с вашим настоящим приложением.
5. На шаге «Доступ» отметьте разрешения, которые хотите проверить (камера, геолокация, уведомления…). Они нативные, поэтому задаются при сборке.
6. Соберите APK и установите его на телефон.

Сборка Live Dev никогда не создаёт пакет для Play (AAB): она работает только рядом с вашим компьютером, поэтому её ни в коем случае нельзя публиковать.

3Запустите сервер разработки так, чтобы телефон мог до него добраться#

По умолчанию большинство dev-серверов слушают только сам компьютер. Добавьте ключ host, чтобы к ним могли подключаться другие устройства в вашей сети Wi-Fi:

• Vite (React, Vue, Svelte, Astro): npm run dev -- --host
• Next.js: npx next dev -H 0.0.0.0
• Angular: ng serve --host 0.0.0.0
• Create React App / Vue CLI: уже слушают сеть

Есть только папка с файлами HTML? Любой из этих способов превращает её в сервер: запустите команду внутри папки:

• npx serve -l 5500
• python -m http.server 8000
• VS Code: установите «Live Server», затем нажмите «Go Live»

Windows один раз спросит, разрешить ли серверу доступ через брандмауэр: отметьте «Частные сети» и разрешите. Если вы нажали «Отмена», телефон не сможет подключиться, пока вы не разрешите Node (или Python) в Безопасность Windows → Брандмауэр → Разрешить работу с приложением.

npm run dev -- --host

4Подключение по Wi-Fi — без кабеля и ничего не нужно устанавливать#

1. Подключите телефон к той же сети Wi-Fi, что и компьютер.
2. Откройте ваше приложение Live Dev.

Это всё. Приложение ищет ваш сервер разработки на выбранном порту, находит ваш компьютер и загружает страницу. В следующий раз оно запомнит этот компьютер. Если сервер работает на другом порту или откликнулись несколько компьютеров, приложение покажет их, и вы нажмёте на свой.

Ничего не найдено? Экран подключения повторяет попытки каждые две секунды и сам открывает страницу, как только ваш сервер станет доступен: запустите сервер и наблюдайте. «Найти мой ПК» также проверяет другие распространённые порты. Вы всегда можете ввести в «Ввести самому» адрес, который Vite выводит в строке «Network:».

Чем это лучше, чем вводить http://192.168.1.5:5173 в приложении-сайте: страница по-прежнему работает как http://localhost:PORT на телефоне (приложение пробрасывает туннель к вашему компьютеру). localhost — это БЕЗОПАСНЫЙ КОНТЕКСТ, поэтому работают камера, микрофон, геолокация, буфер обмена, service worker и passkey. На обычном адресе 192.168… браузерный движок блокирует всё это.

5Подключение по USB — работает совсем без Wi-Fi#

Используйте этот способ, когда компьютер и телефон в разных сетях, в гостевой сети Wi-Fi, где устройства не видят друг друга, или совсем без сети.

1. На телефоне: Настройки → О телефоне → семь раз нажмите «Номер сборки», затем Для разработчиков → включите «Отладка по USB».
2. Подключите телефон к компьютеру и подтвердите запрос «Allow USB debugging».
3. На компьютере выполните команду ниже (с вашим портом). adb входит в Android Studio, либо скачайте «SDK Platform-Tools» от Google: это небольшой ZIP.
4. Откройте своё приложение Live Dev. Оно замечает USB-подключение и использует его раньше Wi-Fi.

Запустите команду снова после того, как отключите кабель или перезагрузите телефон. При USB переключатель «host» из шага 3 НЕ нужен.

Если на экране подключения написано «USB link is up, but nothing answers on your PC's port» — с кабелем всё в порядке, просто ваш сервер разработки не запущен.

adb reverse tcp:5173 tcp:5173

Скачать SDK Platform-Tools (adb) →

6Кнопка DEV#

Маленькая кнопка DEV находится у края приложения — перетащите её куда угодно. Когда страница выдаёт ошибку, кнопка краснеет и на ней появляется число. Нажмите на неё, чтобы:

• Перезагрузить — всегда загружает свежую копию каждого файла, а не кэшированную.
• Консоль: всё, что пишет ваша страница, ошибки и предупреждения разными цветами, с файлом и строкой (src/App.tsx:42). «Errors» фильтрует, «Copy» копирует весь журнал в буфер обмена, чтобы вставить его в чат или отчёт об ошибке.
• Запуск JavaScript: строка внизу консоли. Введите любое выражение и увидите результат прямо на телефоне. Промисы ожидаются и записываются в журнал.
• Обновление при сохранении: см. следующий шаг.
• Сменить сервер — другой компьютер или другой порт, без пересборки.
• Очистить данные сайта и перезагрузить — удаляет cookie, localStorage и IndexedDB, чтобы проверить первый запуск с чистого листа.
• Сведения о подключении — адрес, USB или Wi-Fi и IP-адрес этого телефона.

Для полных DevTools (элементы, сеть, точки останова) подключите кабель, откройте chrome://inspect в Chrome на компьютере и выберите своё приложение.

7Обновление при сохранении, даже для обычного HTML#

Vite, Next, Angular и webpack сами подставляют ваши изменения на страницу (горячая перезагрузка). Приложение это замечает и не вмешивается.

У обычной папки, которую раздаёт python, 'npx serve' или любой статический сервер, нет горячей перезагрузки: обычно вы сохраняете, а потом каждый раз обновляете страницу жестом. Live Dev делает это за вас: он запоминает, какие файлы загрузила страница, раз в секунду спрашивает ваш сервер, не изменился ли какой-нибудь из них, и обновляет страницу, если да. Изменённый файл .css подставляется на месте без перезагрузки, поэтому при настройке стилей сохраняются позиция прокрутки и введённые в формы данные.

На компьютер ничего устанавливать не нужно. Если захотите управлять вручную, отключите это кнопкой DEV. Пока открыто приложение Live Dev, экран также не гаснет.

8Когда закончите: соберите настоящее приложение#

Приложение Live Dev работает только рядом с вашим компьютером, и отдавать его пользователям нельзя. Когда проект будет готов:

• Проект на фреймворке (Vite, React, Vue…): выполните 'npm run build', заархивируйте папку dist (или весь исходный проект) и соберите в разделе «Создать APK» → «Офлайн ZIP».
• Обычная папка с HTML: упакуйте её в ZIP так, чтобы index.html лежал в корне → Offline ZIP. Всего один файл? Используйте плитку HTML.
• Уже размещено по настоящему адресу https://: «Создать APK» → «Сайт».

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

9Если подключиться не удаётся#

• Wi-Fi: «Ожидание вашего dev-сервера» без конца → сервер слушает только сам компьютер. Перезапустите его с ключом host из шага 3 (Vite выводит строку «Network:», когда всё верно).

• Wi-Fi: по-прежнему ничего → подключение блокирует брандмауэр Windows (шаг 3) или маршрутизатор изолирует устройства (часто в гостевых, офисных и гостиничных сетях Wi-Fi). Используйте USB или включите точку доступа на телефоне и подключите к ней компьютер.

• USB: «adb» не распознаётся → установите Platform-Tools и запустите команду из этой папки. «no devices» → подтвердите запрос на отладку по USB на телефоне или попробуйте другой кабель (многие кабели только заряжают).

• «Порт … занят на этом телефоне» → другое приложение на телефоне использует этот порт. Запустите dev-сервер на другом порту и введите его в «Ввести самому».

• Vite показывает «Blocked request. This host is not allowed» → вы открыли адрес компьютера в обычном браузере или в приложении-сайте. Приложение Live Dev этого никогда не вызывает, потому что всегда обращается к localhost.

• Страница загружается, но запросы к API не проходят → в списке CORS вашего бэкенда должен быть разрешён http://localhost:PORT (в большинстве dev-окружений он уже есть), а адрес API вида http://localhost:4000 означает ТЕЛЕФОН. Пробросьте и этот порт (adb reverse tcp:4000 tcp:4000) или используйте для API адрес компьютера.

• Пустая страница после переключения проектов на том же порту → DEV → Очистить данные сайта и перезагрузить (отвечает старый service worker).