Локальная разработка Vue-приложения для Битрикс24

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

Краткий экскурс в типы приложений

Начнем с того, что глобально для Битрикс24 есть 2 типа приложений - локальные и серверные. Они в свою очередь еще делятся на типы, но нас это сейчас не интересует.

В первом случае, мы загружаем архив с приложением на сервера Битрикса. Такое приложение может использовать только HTML, CSS и JS. Но тем не менее, это удобно, так как не придется хостить приложение у себя.

Второй тип, серверный. В этом случае, вы указываете URL вашего приложения и Битрикс24 подключает его в iframe.

С этим разобрались. Двигаемся дальше.

Создание приложения и настройка для локальной разработки

В нашем случае, при работе с Vue, вполне подходит и первый вариант. Но для отладки мы все же воспользуемся вторым вариантом, чтобы не перезаливать постоянно вручную архив с приложением.

Казалось бы все просто. Создаем приложение, указываем в нем URL http://localhost:8080 и все заработает. Но не все так просто.

Допустим мы создали новый проект через команду:

vue create b24-test

Далее запускаем локальный сервер:

npm run serve

И после перехода в наше приложение, мы наблюдаем следующую картину:

Дело в том, что при открытии iframe, Битрикс отправляет туда авторизационные данные через POST. А наш сервак не может их принять.

Вот мы и подошли к основной проблеме. Есть весьма простое решение. Создаем файл vue.config.js, если он у вас еще не создан и добавляем туда код:

module.exports = {
  publicPath: './',
  devServer: {
    setup (app) {
      app.post('*', (req, res) => {
        res.redirect(req.originalUrl)
      })
    }
  }
}

Этот код говорит локальному серверу перенаправлять все запросы куда надо.

Теперь наше приложение работает как надо и можно удобно вести разработку.

“Деплой” готового приложения

Тут все просто. Собираем приложение через:

npm run build

Архивируем всю папку dist и заливаем архив.

P.S.

Про создание приложений на Vue еще планируются статьи, здесь разобрана лишь маленькая проблема, с которой мне пришлось столкнуться.


Дата публикации: 24.05.2021