@mindbox/frontend/build/LOCAL-DEVELOPMENT-README.md

# Развёртывание проекта для локальной разработки

## Описание технологии

Для разработки фронтенда необходим доступ к бэкенду на тестовом стейдже, который хоститься по адресу https://test.staging.directcrm.ru/

Все необходимые для работы фронтенда скрипты, которые запрашиваются этим стейджинговым сервером, должны загружаться с локально запущенного вебсервера, куда, в свою очередь, эти скрипты должны пересобираться webpack'ом в процессе разработки.

## Что необходимо сделать перед началом разработки

### Кратко

1. Склонировать репозиторий и установить зависимости
1. Создать папку, в которой будут хоститься скрипты пересобираемые сборщиком
1. Указать сборщику путь в эту папку, а также куда внутри неё раскладывать скрипты
1. Установить и настроить расширение для Google Chrome, которое подменяет запрашиваемые стейджинговым сервером скрипты на локальные

### Подробнее

Клонируем репозиторий:

```
git clone https://github.com/mindbox-moscow/frontend.git
```

Создаём папку, в которой будут хоститься скрипты:

```
mkdir frontend-dev-webserver
```

В итоге должна получиться структура:

```
└── mindbox/                    # Рабочая папка
    ├── frontend/               # Папка репозитория
    └── frontend-dev-webserver/ # Папка локального вебсервера
```

Указываем путь сборщику:

В папке репозитория `frontend` находится папка `build`, в ней создаём файл с именем `development-settings.json`. В этой же папке `build` находится файл `csssr-settings.template.json`, копируем его содержание и вставляем во вновь созданный файл `development-settings.json`.

В объекте, который содержится в файле `development-settings.json`, есть свойство `"baseDir": "< путь до папки, которую нужно хостить вебсервером на порту 14759 >"`, прописываем тут **абсолютный** путь до ранее созданной папки `frontend-dev-webserver`.

> Если вы работаете на Windows, то в `development-settings.json` вам нужно в путях поменять `/` на `\\` для `"localizationDist":`, `"parts": { "administration": ...}` и `"parts": { "directcrm": ...}`. Например `"public/scripts/directcrm/dist"` нужно исправить на `"public\\scripts\\directcrm\\dist"`.

Запускаем вебсервер в папке `frontend-dev-webserver` на порту `14759` (на примере `serve`, но можно использовать любой вебсервер):

```
serve -l 14759 frontend-dev-webserver
```

> Установить `serve` глобально можно так:

```
npm i -g serve
```

> или так:

```
yarn global add serve
```

Переходим в папку репозитория и устанавливаем зависимости:

```
cd frontend
npx -p node@10 npm i
```

Заходим и авторизуемся на https://test.staging.directcrm.ru/

Устанавливаем расширение для Google Chrome — [Resource Override](https://chrome.google.com/webstore/detail/resource-override/pkoacgokdfckfpndoffpifphamojphii)

После установки расширения в DevTools появится вкладка `Overrides`. Это вкладка с настройками расширения.

Теперь нужно загрузить в расширение правила подмены, делается это на обозначенной выше вкладке `Overrides -> Options -> Load Rules`. Туда нужно загрузить JSON-файл со следующим содержанием (создайте этот файл):

```json
{
    "v": 1,
    "data": [
        {
            "id": "d1",
            "matchUrl": "https://test.staging.directcrm.ru/*",
            "rules": [
                {
                    "type": "normalOverride",
                    "match": "https://test.staging.directcrm.ru/**/*.js*",
                    "replace": "http://localhost:14759/**/*.js*",
                    "on": true
                }
            ],
            "on": true
        }
    ]
}
```

В папке репозитория запускаем скрипт для разработки:

```
npm run start
```

Теперь можно работать с фронтендом локально.

> Во время разработки, у вас всегда должен быть запущен вебсервер в папке `frontend-dev-webserver`.

> Периодически вы будете деавторизованы на https://test.staging.directcrm.ru/, для повторной авторизации вам нужно отключить подмену скриптов в расширении Resource Override (вкаладка Overrides в девтулзах), авторизироваться на https://test.staging.directcrm.ru/ и снова включить подмену скриптов Resource Override.