gonets/FRONT

Клиент приложения ГоNets

Общие сведения

ГоNets - приложение для работы с сетевыми ресурсами в удобном и понятном графическом виде. Данное приложение разделено на серверную и клиентскую часть. Сервер сканирует, обрабатывает и преобразует информацию по сетям в простой и понятный JSON формат, который в свою очередь приходит на клиент, где данные проходят ряд обработок и формируются в графическое отображение.

Клиент приложения Го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