1 | # Развёртывание проекта для локальной разработки
|
2 |
|
3 | ## Описание технологии
|
4 |
|
5 | Для разработки фронтенда необходим доступ к бэкенду на тестовом стейдже, который хоститься по адресу https://test.staging.directcrm.ru/
|
6 |
|
7 | Все необходимые для работы фронтенда скрипты, которые запрашиваются этим стейджинговым сервером, должны загружаться с локально запущенного вебсервера, куда, в свою очередь, эти скрипты должны пересобираться webpack'ом в процессе разработки.
|
8 |
|
9 | ## Что необходимо сделать перед началом разработки
|
10 |
|
11 | ### Кратко
|
12 |
|
13 | 1. Склонировать репозиторий и установить зависимости
|
14 | 1. Создать папку, в которой будут хоститься скрипты пересобираемые сборщиком
|
15 | 1. Указать сборщику путь в эту папку, а также куда внутри неё раскладывать скрипты
|
16 | 1. Установить и настроить расширение для Google Chrome, которое подменяет запрашиваемые стейджинговым сервером скрипты на локальные
|
17 |
|
18 | ### Подробнее
|
19 |
|
20 | Клонируем репозиторий:
|
21 |
|
22 | ```
|
23 | git clone https://github.com/mindbox-moscow/frontend.git
|
24 | ```
|
25 |
|
26 | Создаём папку, в которой будут хоститься скрипты:
|
27 |
|
28 | ```
|
29 | mkdir frontend-dev-webserver
|
30 | ```
|
31 |
|
32 | В итоге должна получиться структура:
|
33 |
|
34 | ```
|
35 | └── mindbox/ # Рабочая папка
|
36 | ├── frontend/ # Папка репозитория
|
37 | └── frontend-dev-webserver/ # Папка локального вебсервера
|
38 | ```
|
39 |
|
40 | Указываем путь сборщику:
|
41 |
|
42 | В папке репозитория `frontend` находится папка `build`, в ней создаём файл с именем `development-settings.json`. В этой же папке `build` находится файл `csssr-settings.template.json`, копируем его содержание и вставляем во вновь созданный файл `development-settings.json`.
|
43 |
|
44 | В объекте, который содержится в файле `development-settings.json`, есть свойство `"baseDir": "< путь до папки, которую нужно хостить вебсервером на порту 14759 >"`, прописываем тут **абсолютный** путь до ранее созданной папки `frontend-dev-webserver`.
|
45 |
|
46 | > Если вы работаете на Windows, то в `development-settings.json` вам нужно в путях поменять `/` на `\\` для `"localizationDist":`, `"parts": { "administration": ...}` и `"parts": { "directcrm": ...}`. Например `"public/scripts/directcrm/dist"` нужно исправить на `"public\\scripts\\directcrm\\dist"`.
|
47 |
|
48 | Запускаем вебсервер в папке `frontend-dev-webserver` на порту `14759` (на примере `serve`, но можно использовать любой вебсервер):
|
49 |
|
50 | ```
|
51 | serve -l 14759 frontend-dev-webserver
|
52 | ```
|
53 |
|
54 | > Установить `serve` глобально можно так:
|
55 |
|
56 | ```
|
57 | npm i -g serve
|
58 | ```
|
59 |
|
60 | > или так:
|
61 |
|
62 | ```
|
63 | yarn global add serve
|
64 | ```
|
65 |
|
66 | Переходим в папку репозитория и устанавливаем зависимости:
|
67 |
|
68 | ```
|
69 | cd frontend
|
70 | npx -p node@10 npm i
|
71 | ```
|
72 |
|
73 | Заходим и авторизуемся на https://test.staging.directcrm.ru/
|
74 |
|
75 | Устанавливаем расширение для Google Chrome — [Resource Override](https://chrome.google.com/webstore/detail/resource-override/pkoacgokdfckfpndoffpifphamojphii)
|
76 |
|
77 | После установки расширения в DevTools появится вкладка `Overrides`. Это вкладка с настройками расширения.
|
78 |
|
79 | Теперь нужно загрузить в расширение правила подмены, делается это на обозначенной выше вкладке `Overrides -> Options -> Load Rules`. Туда нужно загрузить JSON-файл со следующим содержанием (создайте этот файл):
|
80 |
|
81 | ```json
|
82 | {
|
83 | "v": 1,
|
84 | "data": [
|
85 | {
|
86 | "id": "d1",
|
87 | "matchUrl": "https://test.staging.directcrm.ru/*",
|
88 | "rules": [
|
89 | {
|
90 | "type": "normalOverride",
|
91 | "match": "https://test.staging.directcrm.ru/**/*.js*",
|
92 | "replace": "http://localhost:14759/**/*.js*",
|
93 | "on": true
|
94 | }
|
95 | ],
|
96 | "on": true
|
97 | }
|
98 | ]
|
99 | }
|
100 | ```
|
101 |
|
102 | В папке репозитория запускаем скрипт для разработки:
|
103 |
|
104 | ```
|
105 | npm run start
|
106 | ```
|
107 |
|
108 | Теперь можно работать с фронтендом локально.
|
109 |
|
110 | > Во время разработки, у вас всегда должен быть запущен вебсервер в папке `frontend-dev-webserver`.
|
111 |
|
112 | > Периодически вы будете деавторизованы на https://test.staging.directcrm.ru/, для повторной авторизации вам нужно отключить подмену скриптов в расширении Resource Override (вкаладка Overrides в девтулзах), авторизироваться на https://test.staging.directcrm.ru/ и снова включить подмену скриптов Resource Override.
|