58 lines
4.4 KiB
Markdown
58 lines
4.4 KiB
Markdown
|
# Инструкция по запуску и сборке клиента
|
|||
|
|
|
|||
|
|
### Общие сведения.
|
|||
|
|
|
|||
|
|
Клиент приложения ГоNets написан на языке Typescript с использованием фреймворка React. Для более понятного отображения информации была выбрана библиотека ReatFlow, позволяющая легко и просто выстраивать различные графы, схемы, блоки и их связи. Так же, для того, чтобы приложение запускалось как десктопное был выбран метод обёртки собранной (build) версии в облочку Electron.
|
|||
|
|
|
|||
|
|
### Зависимости клиентской части
|
|||
|
|
|
|||
|
|
Далее будет представлен список необходимых npm зависимостей для разработки приложения. Уточню, что необходимы они исключительно во время разработки и сборки, собранная версия работает спокойно без них.
|
|||
|
|
|
|||
|
|
Зависимости при разработки:
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
"dependencies": {
|
|||
|
|
"@iconify/icons-ic": "^1.2.13",
|
|||
|
|
"@iconify/react": "^5.2.0",
|
|||
|
|
"@reduxjs/toolkit": "^2.6.0",
|
|||
|
|
"@xyflow/react": "^12.3.5",
|
|||
|
|
"axios": "^1.7.9",
|
|||
|
|
"react": "^18.3.1",
|
|||
|
|
"react-dom": "^18.3.1",
|
|||
|
|
"react-flow-renderer": "^10.3.17",
|
|||
|
|
"react-redux": "^9.2.0",
|
|||
|
|
"react-router-dom": "^7.0.2",
|
|||
|
|
"styled-components": "^6.1.13",
|
|||
|
|
"zustand": "^5.0.3"
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
"devDependencies": {
|
|||
|
|
"@iconify-json/ic": "^1.2.2",
|
|||
|
|
"@types/react": "^18.0.28",
|
|||
|
|
"@types/react-dom": "^18.0.11",
|
|||
|
|
"@vitejs/plugin-basic-ssl": "^2.0.0",
|
|||
|
|
"@vitejs/plugin-react": "^4.4.1",
|
|||
|
|
"electron": "^34.0.2",
|
|||
|
|
"electron-packager": "^17.1.2",
|
|||
|
|
"esbuild-wasm": "^0.17.12",
|
|||
|
|
"typescript": "^4.9.5",
|
|||
|
|
"vite": "^6.3.4"
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### Запуск и сборка
|
|||
|
|
|
|||
|
|
Для того, чтобы работать с исходным кодом, необходимо склонировать проект с ветки frontend, перейти в директорию `FRONT/DEV/` и выполнить установку зависимостей с помощью `npm install`, возможно потребуется сделать после этого `npm audit --fix` Весь исходный код, находится непосредственно в директории `DEV`, собранная же версия в директории `BUILD`.
|
|||
|
|
|
|||
|
|
Для сборки приложения и обёртки его в электрон необходимо выполнить команду `npm run package`, далее перейти в созданную после команды директорию `dist`, от туда в `gonets-for-linux-64x/resources/app`, здесь нужно выполнить `npm run build`, в появившейся директории `dist` отредактировать файл `index.html`, таким образом, что везде где стоит `/assets` нужно прописать `./assets`. Проверить запуск приложения, можно прописав в терминале `./gonets` из директории `FRONT/DEV/dist/gonets-for-linux-64x`, где и лежит исполняемвый файл.
|
|||
|
|
|
|||
|
|
После удачного билда можно переместить всё содержимое `FRONT/DEV/dist/gonets-for-linux-64x/` в `/FRONT/BUILD`
|
|||
|
|
|
|||
|
|
Дополнительно отмечу, что входной точкой/файлом настройки самого электрона является файл `main.js`
|
|||
|
|
|
|||
|
|
### Замечания для разработки
|
|||
|
|
|
|||
|
|
- В dev режиме можно менять https запросы и wss подключение на http и ws соответственно. Меняется это в файлах:
|
|||
|
|
- /FRONT/DEV/src/api/request.ts - Здесь основные http запросы
|
|||
|
|
- /FRONT/DEV/src/components/workSpace/workModule/networkInterfaces.tsx - Здесь главное WebSocket подключение
|
|||
|
|
- Стоит убедиться, что сервер работает в соответствующем режиме (HTTP или HTTPS), чтобы избежать ошибок подключения
|