Для эффективного отслеживания изменений файлов в проекте рекомендуется использовать систему контроля версий GIT. Это позволит сократить время при выпуске обновлений, так как вы сможете легко отслеживать все изменения.

Для удобства рекомендуется создать отдельный репозиторий для папки frontend. Вся дальнейшая инструкция предполагает наличие данного репозитория.

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

Шаг 1. Создание локальной копии файлов

Если вы используете GIT, склонируйте репозиторий (предварительно обновив его при необходимости) на свой компьютер.

Если вы не используете GIT, вам следует скопировать файлы вручную. Это можно сделать с помощью WinSCP.

Запустите программу и создайте новое подключение:

Укажите данные для подключения:

• Имя хоста - домен или IP-адрес сервера

• Имя пользователя - root

• Пароль

В левой панели файлового менеджера создайте папку для проекта, например, site.ru.

Перейдите в папку frontend, которая находится в корне сайта (обычно полный путь: /home/bitrix/www/frontend). Выделите все файлы и папки, кроме папок .nuxt, .nuxt-mobile, .app-updates и node_modules, затем скопируйте их в локальную папку site.ru.

Шаг 2. Установка зависимостей

Запустите Visual Studio Code и откройте проект через File → Open Folder.

Откройте встроенный терминал с помощью Ctrl+` и введите команду:

npm i

Дождитесь завершения процесса установки зависимостей. Ошибок быть не должно, могут возникнуть лишь предупреждения.

Шаг 3. Сборка SPA-приложения

Для сборки SPA-приложения, которое будет использовано Capacitor для сборки мобильного приложения, выполните следующую команду в терминале:

npm run spa

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

Шаг 4. Базовая конфигурация

Откройте файл capacitor.config.json и внесите следующие изменения в соответствии с вашим приложением:

• appId - идентификатор вашего приложения, обычно это перевернутое доменное имя, например, если ваш сайт расположен на домене site.ru, укажите в этом параметре ru.site.app

• appName - название вашего приложения

Другие параметры оставьте без изменений. Блок plugins не трогайте целиком: в нём, кроме прочего, настройки обновления приложения без публикации в магазинах и push-уведомлений.

{
  "appId": "ru.site.app",
  "appName": "МаркетПро",
  "bundledWebRuntime": false,
  "plugins": {
    "SplashScreen": {
      "launchAutoHide": false,
      "androidScaleType": "CENTER_CROP"
    },
    "StatusBar": {
      "style": "LIGHT"
    },
    "SystemBars": {
      "style": "LIGHT"
    },
    "PushNotifications": {
      "presentationOptions": ["badge", "sound", "alert"]
    },
    "LiveUpdate": {
      "readyTimeout": 20000,
      "autoBlockRolledBackBundles": true,
      "autoDeleteBundles": true,
      "autoUpdateStrategy": "none"
    }
  },
  "webDir": "dist",
  "ios": {
    "contentInset": "always"
  }
}

Шаг 5. Замена названия и идентификатора в проекте платформы

Значения, заданные на предыдущем шаге, нужно подставить в сам проект — в папку android или ios, смотря какое приложение собираете. Шаг одинаковый для обеих платформ.

В Visual Studio Code нажмите правой кнопкой мыши на папке платформы и выберите пункт Find in Folder.

В первом поле (Search) введите com.bamboo.app — это исходный идентификатор приложения МаркетПро. Во втором поле (Replace) введите ваш appId из capacitor.config.json. Нажмите значок справа от поля Replace или Ctrl+Alt+Enter.

Тем же способом замените все вхождения слова МаркетПро на ваш appName из capacitor.config.json.

Дальше действия расходятся по платформам: Android и iOS.