diff --git a/tutorials/tauri/README.md b/tutorials/tauri/README.md index d56382cd..aae6cf78 100644 --- a/tutorials/tauri/README.md +++ b/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 "/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 =>{ +return fetch(dest_api + '/filters?' + new URLSearchParams({title:title}), {method: "GET", credentials: 'include'}) +} +``` +В тэгах : +```tsx + +``` +А так же в `src/App.tsx`: +```tsx +import { dest_root } from "../target_config"; + + +``` +и `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'а и снижает нагрузку.