added tauri build

добавил пункты про настройку tauri для существующего проекта с tauri 2.0

tutorials/tauri/README.md

@@ -14,6 +14,11 @@
     * [Шаг 4: Разработка frontend'а](#шаг-4-разработка-frontendа)
     * [Шаг 5: Работа с Tauri API](#шаг-5-работа-с-tauri-api)
     * [Шаг 6: Сборка Tauri приложения](#шаг-6-сборка-tauri-приложения)
+- [Настройка Tauri для существующего react проекта](#настройка-tauri-для-существующего-react-проекта)
+    * [Шаг 1: Инициализация Tauri](#шаг-1-инициализация-tauri)
+    * [Шаг 2: Конфигурация Tauri dev](#шаг-2-конфигурация-tauri-dev)
+    * [Шаг 3: Конфигурация Tauri build](#шаг-3-конфигурация-tauri-build)
+    * [Шаг 4: Подключение к веб-сервису.](#шаг-4-подключение-к-веб-сервису)
 - [Дополнительно: Добавление Middleware для сервера](#дополнительно-добавление-middleware-для-сервера)
     * [Шаг 1: Логирование запросов](#шаг-1-логирование-запросов)
     * [Шаг 2: Установка логгера](#шаг-2-установка-логгера)
@@ -138,7 +143,7 @@ npm create tauri@latest
 
 ### Шаг 2: Конфигурация Tauri приложения
 
-Нужно настроить Tauri приложение в файле `src-tauri/tauri.conf.json`. Этот файл находится в папке src-tauri вашего проекта и позволяет управлять различными настройками такими, как иконки, заголовок окна, настройки безопасности и т.д.
+Нужно настроить Tauri приложение в файле `src-tauri/tauri.conf.json`. Этот файл находится в папке src-Tauri вашего проекта и позволяет управлять различными настройками такими, как иконки, заголовок окна, настройки безопасности и т.д.
 
 Для того чтобы разрешить приложению обращаться к серверу, добавьте конфигурацию в `allowlist` так, чтобы он выглядел следующим образом:
 
@@ -1019,6 +1024,244 @@ tauri build
 
 Это соберет ваше приложение для целевой платформы (например, Windows, macOS, Linux), и вы найдете файлы приложения в папке `src-tauri/target/release/bundle`.
 
+## Настройка Tauri для существующего react проекта
+В данном разделе будет рассматриваться настройка Tauri 2.0 для существующего проекта React, который был настроен для работы с Github Pages, хотя это не является обязательным требованием.
+### Шаг 1: Инициализация Tauri
+Первым шагом необходимо установить все те же инструменты: npm, Node.js, Rust и Cargo. После этого необходимо установить 2 библиотеки: @tauri-apps/api и @tauri-apps/cli:
+```bash
+npm install --save-dev @tauri-apps/api@latest
+npm install --save-dev @tauri-apps/cli@latest
+```
+Опция --save-dev говорит о том что данная библиотека нам нужна для разработки, но не нужна для работы программы (сервера) в нормальном режиме.
+
+После установки библиотек необходимо перейти в файл package.json и указать новый script:
+```json
+"scripts": {
+    "tauri": "tauri",
+  }
+```
+Убедитесь, что у вас была установлена версия Tauri 2.0. Для этого запустите команду:
+```bash
+npm run tauri info
+```
+И найдите версию Tauri среди packages:
+```
+[-] Packages
+    - tauri 🦀: 2.1.0
+```
+После этого мы можем инициализировать проект tauri:
+```bash
+npm run tauri init
+
+? What is your app name? › test_app
+? What should the window title be? › test_app
+? Where are your web assets (HTML/CSS/JS) located, relative to the "<current dir>/src-tauri/tauri.conf.json" file that will be created? › ../build
+? What is the url of your dev server? › http://localhost:3000
+? What is your frontend dev command? › npm run dev
+? What is your frontend build command? · npm run build
+```
+После выполнения данной команды должна появиться папка src-tauri, в которой мы буде работать далее. Файлы, с которыми мы будем работать:
+```
+src-tauri
+│   tauri.conf.json
+│   Cargo.toml
+│
+├───src
+│       lib.rs
+│
+└───capabilities
+        default.json
+```
+Вопросы, на которые вы отвечали при создании Tauri не влияют критично на ваш проект и все параметры, указанные при инициализации, можно найти в `src-tauri/tauri.conf.json` в данных местах:
+```json
+{
+  "productName": "test_app",
+  "build": {
+    "frontendDist": "../build",
+    "devUrl": "http://localhost:3000",
+    "beforeDevCommand": "npm run dev",
+    "beforeBuildCommand": "npm run build"
+  },
+  "app": {
+    "windows": [
+      {
+        "title": "test_app",
+      }
+    ],
+  },
+}
+```
+### Шаг 2: Конфигурация Tauri dev
+приложение Tauri, как и React может работать в двух режимах: Tauri dev и Tauri build. 
+
+Tauri dev работает за счет запуска react сервера и подключению к нему с помощью url, который мы указали как devUrl `src-tauri/tauri.conf.json`. Затем вместо того чтобы открывать вкладку в браузере, Tauri отрисовывает вкладку сайта в нашем приложении.
+
+Это позволяет изменять React сервер в реальном времени и видеть результаты в приложении без его перезапуска. Кроме этого, мы так же получим доступ к режиму разработчика, в котором можно смотреть ошибки, трафик сети, консоль и.т.д. Для получения доступа в нему в открытом приложении Tauri нажмите правой кнопкой мыши по экрану -> проверить.
+
+Для того чтобы Tauri так могло работать необходимо настроить файл `App.tsx` в папке `src`:
+
+```tsx
+import { invoke } from "@tauri-apps/api/core";
+
+function App() {
+  useEffect(()=>{
+    invoke('tauri', {cmd:'create'})
+      .then(() =>{console.log("Tauri launched")})
+      .catch(() =>{console.log("Tauri not launched")})
+    return () =>{
+      invoke('tauri', {cmd:'close'})
+        .then(() =>{console.log("Tauri launched")})
+        .catch(() =>{console.log("Tauri not launched")})
+    }
+  }, [])
+```
+
+Данный код при запуске Tauri будет пытаться создать окно Tauri и подключиться к нему. При этом сайт все еще можно открыть во вкладке браузера, причем выведется сообщение "Tauri not launched".
+
+На данном этапе, если запустить Tauri командой 
+```bash
+npm run tauri dev
+```
+То мы увидим рабочее приложение, которое при правильной настройке проксирования будет получать ответы с сервера.
+
+### Шаг 3: Конфигурация Tauri build
+Для того чтобы Tauri build правильно работал, в самом начале необходимо убедиться что и в React проекте и в Tauri нет ошибок, иначе не получиться создать build.
+
+Tauri build отличается от Tauri dev в нескольких важных местах: При прописывании команды
+```bash
+npm run tauri dev
+```
+Вместо запуска приложения, у вас в каталоге появится папка `src-tauri/target/build`. Данная папка будет содержать исполняемый exe файл вашего приложения. Альтернативно, в папке `bundle` вы сможете найти два разных мастера установки, которые вы можете раздавать другим людям для установки приложения.
+
+Кроме этого, Tauri build работает без использования React сервера и поэтому некоторый функционал, который работает именно за счет существования сервера, как например прокси, не будет работать "из коробки".
+
+Если на данном этапе попытаться запустить Tauri build, то скорее всего вы увидите просто белый экран. Если это так, то сначала проверьте что при запуске приложения в режиме dev нету никаких ошибок, которые могли бы повлиять на работу приложения.
+
+Кроме этого, если вы настраивали React для работы с Guthub Pages, вам необходимо убрать basename из Router в `App.tsx` и base из `vite.config.json`. Эти изменения надо сделать потому что приложение Tauri с одной стороны использует webView, что означает что приложение Tauri на самом деле работает как браузер, встроенный в приложение, который отрисовывает все html страницы по их url. С другой стороны Tauri не запускает React сервер и поэтому base, который мы настроили в `vite.config.ts` ничего не делает (в то время как в react сервере эта опция перенаправляет нас с адреса '/' на адрес, указанный в base).
+
+После исправления выданных ошибок, ваше Tauri приложение должно запуститься в режиме build, но при этом вместо получения данных с сервера, Tauri будет подгружать моки.
+
+### Шаг 4: Подключение к веб-сервису.
+
+Для подключения к веб-сервису необходимо решить 2 проблемы: настройка ip адресов запросов и обход cors.
+
+Во первых, как было сказано выше, Tauri build так как он не запускает http-сервер, не выполняет проксирование запросов. Поэтому, во всех fetch запросах и всех img тэгах необходимо напрямую указать ip адрес веб-сервиса к которому мы обращаемся. Для удобства рекомендуется создать отдельный файл или поле для быстрого изменения данного параметра.
+Пример :
+
+Создадим файл `target_config.ts`:
+```tsx
+const target_tauri = false
+
+export const api_proxy_addr = "http://192.168.0.104:8000"
+export const img_proxy_addr = "http://192.168.0.104:9000"
+export const dest_api = (target_tauri) ? api_proxy_addr : "api"
+export const dest_img =  (target_tauri) ?  img_proxy_addr : "img-proxy"
+export const dest_root = (target_tauri) ? "" : "/image_editing_frontend"
+```
+Данное приложение в зависимости от того, создаем ли мы build для Tauri или нет, меняет несколько констант, которые затем используются в `src/api.tsx`:
+```tsx
+import { dest_api } from "../target_config"
+export const getFiltersByTitle = async (title = ''): Promise<FilterPropWithQueue> =>{
+return  fetch(dest_api + '/filters?' + new URLSearchParams({title:title}), {method: "GET", credentials: 'include'})
+}
+```
+В тэгах <img>:
+```tsx
+<img src={(dest_img + pageData.image) || image_mock}/>
+```
+А так же в `src/App.tsx`:
+```tsx
+import { dest_root } from "../target_config";
+
+<BrowserRouter basename={dest_root}>
+```
+и `vite.config.tsx`:
+```ts
+import {api_proxy_addr, img_proxy_addr, dest_root} from "./target_config"
+export default defineConfig({
+   base:dest_root,
+   server: { 
+       port:3000,
+       proxy: {
+         "/api": {
+           target: api_proxy_addr,
+           changeOrigin: true,
+           rewrite: (path) => path.replace(/^\/api/, "/"),
+         },
+         "/img-proxy": {
+           target: img_proxy_addr,
+           changeOrigin: true,
+           rewrite: (path) => path.replace(/^\/img-proxy/, "/"),
+         },
+       },
+     },
+})
+```
+
+Теперь, если мы запустим Tauri build, то, при условии что firewall был настроен правильно, увидим подгрузку статических ресурсов из Minio. Однако, карточки с услугами все еще не будут отображаться.
+
+Если мы зайдем в консоль нашей машины, на которой запущен веб-сервис, то мы увидим, что запросы до сервера доходят. В чем дело? Проблема заключается в том, что у Tauri по умолчанию все запросы соблюдают политику CORS и поэтому ответы от сервера отвергаются нашим приложением. Для того чтобы это исправить, установим библиотеки tauri-plugin-http и tauri-plugin-cors-fetch. Для этого откроем файл `Cargo.toml` и пропишем:
+```
+tauri-plugin-http = "2"
+tauri-plugin-cors-fetch = "2.1.1"
+```
+Затем необходимо либо обновить зависимости cargo либо просто заново создать Tauri build.
+
+После установки приложений изменим несколько файлов:
+
+`tauri.conf.json`
+```json
+{
+  "plugins": {
+        "http": {
+          "enabled": true
+        }
+    },
+   "app": {
+    "withGlobalTauri": true,
+   }
+}
+```
+`capabilities/default.json`. В "allow" укажите ip адрес вашего веб-сервиса:
+```json
+{
+  "permissions": [
+    "cors-fetch:default",
+    {
+      "identifier": "http:default",
+      "allow": [{ "url": "http://192.168.0.104" }],
+      "deny": []
+    },
+    "core:default",
+    "http:allow-fetch",
+    "http:allow-fetch-read-body",
+    "http:allow-fetch-send"
+  ]
+}
+```
+В `src\lib.rs` Добавьте запуск tauri_plugin_cors_fetch:
+```rs
+#[cfg_attr(mobile, tauri::mobile_entry_point)]
+pub fn run() {
+    tauri::Builder::default()
+        .setup(|app| {
+            if cfg!(debug_assertions) {
+                app.handle().plugin(
+                    tauri_plugin_log::Builder::default()
+                        .level(log::LevelFilter::Info)
+                        .build(),
+                )?;
+            }
+            Ok(())
+        }).plugin(tauri_plugin_cors_fetch::init())
+        .run(tauri::generate_context!())
+        .expect("error while running tauri application");
+}
+```
+
+Все. После добавления данных изменений, при создании Tauri build вы должны увидеть отображение результатов, полученных с веб-сервиса.
+
+
 ## Дополнительно: Добавление Middleware для сервера
 
 Middleware - связующее ПО, которое помогает обмену запросов между приложением и сервером. Оно снижает зависимость от API, позволяет не торопиться с обновлением старого Backend'а и снижает нагрузку.