Tauri & ReactJS - Creating Modern Desktop Apps (read desc.)

Summary

Видео объясняет, как использовать Taure для создания настольных приложений из веб-приложений, избегая необходимости использования Chromium браузера. Автор показывает процесс настройки Taure на Windows, начиная с установки Microsoft Visual Studio и Node.js. Затем объясняется, как создать новый проект React и интегрировать его с Taure, добавляя необходимые зависимости и настройки. Видео охватывает решение проблем, которые могут возникнуть при установке, и демонстрирует конечный результат - рабочее настольное приложение с иконкой и инсталлятором. Автор делится своими трудностями и надеется, что зрители смогут избежать подобных проблем.

Takeaways

• 🌐 Tarry позволяет использовать веб-приложение на настольном компьютере без браузера, обращаясь к локальным ресурсам.
• 🛠️ Для начала работы с Tarry необходимо установить Microsoft Visual Studio Build Tools или Visual Studio 2022.
• ☕️ Во время установки Visual Studio рекомендуется установить Node.js, если он ещё не установлен.
• 📦 Yarn уже включен в состав Visual Studio, поэтому не требует отдельной установки.
• 🔧 Установка Rust и Cargo, пакетного менеджера, также необходима для работы с Tarry.
• 📁 Создание нового проекта Tarry начинается с создания папки проекта и использования React и других инструментов.
• 🔄 Используя `create-react-app`, можно начать разработку веб-приложения, которое будет использоваться в Tarry.
• 🛑 Необходимо настроить React, чтобы избежать автоматического запуска браузера при старте приложения.
• 🔗 Добавление зависимостей и разрешений для корректной работы приложения с Tarry.
• 🏗️ Используя `yarn towery dove`, можно интегрировать Tarry с существующим проектом и создать установщик.
• 🎉 В результате интеграции Tarry с проектом получается готовая установка с иконкой и без необходимости использовать полноценный браузер.

Q & A

Что такое Tarry и как оно отличается от Electron?

Tarry - это инструмент для создания приложений для настольных систем на основе веб-приложений. В отличие от Electron, который использует полноценный Chromium-браузер, Tarry использует web view в системе, что позволяет уменьшить размер приложения и не перегружать пользователя браузером.

Какие инструменты необходимо установить для начала работы с Tarry на Windows?

Для начала работы с Tarry на Windows необходимо установить Microsoft Visual Studio Build Tools, Node.js и Rust с пакетным менеджером Cargo.

Почему может потребоваться установка Microsoft Visual Studio 2022?

Microsoft Visual Studio 2022 может потребоваться для поддержки последних технологий и функций, которые могут быть необходимы для сборки и разработки приложений с использованием Tarry.

Что такое Yarn и как оно используется в контексте Tarry?

Yarn - это менеджер пакетов, предоставляющий более быструю и надежную работу с зависимостями в проектах. В контексте Tarry, Yarn используется для установки зависимостей и управления проектом.

Как создать новый проект для интеграции с Tarry?

Для создания нового проекта с Tarry, следует сначала создать папку проекта, затем использовать 'create-react-app' для инициализации React-приложения и после этого интегрировать Tarry с помощью команды 'yarn tarry add'.

Что такое 'cross-env' и зачем его устанавливают в проекте?

'cross-env' - это инструмент для установки переменных среды в проектах, который работает на всех платформах. Он устанавливается для того, чтобы избежать проблем с переменными среды и обеспечить кросс-платформенную совместимость.

Почему может потребоваться установка пакета 'cross-env'?

Установка 'cross-env' может быть необходимой для того, чтобы корректно управлять переменными среды и обеспечить работу приложения на различных операционных системах.

Что означает 'yarn build' и какую функцию оно выполняет?

'yarn build' - это команда, которая собирает проект в продакшн-версию. Это включает в себя минификацию кода, оптимизацию ресурсов и другие шаги для подготовки приложения к развертыванию.

Какие проблемы могут возникнуть при интеграции Tarry с существующим проектом?

Возможные проблемы при интеграции Tarry могут включать в себя несовместимость версий зависимостей, проблемы с конфигурацией среды и ошибки в сборке проекта.

Чему научить пользователей интеграция Tarry с веб-приложениями?

Интеграция Tarry с веб-приложениями позволяет пользователям создавать настольные приложения на основе существующих веб-технологий без необходимости использовать полноценный браузер.

Какие дополнительные настройки могут потребоваться для корректной работы Tarry?

Для корректной работы Tarry может потребоваться настройка доступа к локальным ресурсам, настройка иконок приложения и создания инсталлятора для развертывания приложения.

Outlines

00:00

🌟 Интеграция с Tauri на Windows

Этот раздел объясняет, как использовать Tauri для переноса вашего веб-приложения на настольный компьютер. Tauri позволяет использовать локальные ресурсы, не требуя полного браузера, используя Rust для серверной части. Вначале необходимо установить инструменты Microsoft Visual Studio, а затем Node.js, если он еще не установлен. После этого устанавливаются Yarn, Rust и Cargo. Указывается, что необходимо создать новый проект Tauri или интегрировать его в существующий проект. Для этого создается новая папка проекта, например, 'r2d2', и запускается Create React App. Важно добавить необходимые зависимости и разрешения, чтобы React-приложение не сломалось.

05:00

🚀 Завершение настройки и запуск проекта

Этот раздел продолжает инструкцию по настройке проекта с Tauri. Объясняется, как избежать открытия браузера при запуске приложения, используя Cross-Env для установки переменной 'browser' в значение 'none'. Затем выполняется команда 'yarn build' для сборки проекта. Описывается процесс установки API и завершение настройки. В конце показывается, как создать инсталлятор для приложения, и где найти собранный релиз. Автор делится своими трудностями и надеется, что у других пользователей процесс пройдет гладко.

Transcripts

tarry is what you can use to take your

web app

so your friend and app

and then

use

on a desktop so instead of the browser

your

you now can access the local resources

if you want it to

okay so it's like an electron

but not

a chromium browser so instead of

instead of shipping a whole browser you

just use the web view in the underlying

system which is what this is about and

it uses rust to do that

so

if you want to do some back and stuff

it'll be in rust

anyways let's get started we just go

integrate with towery nope

we gotta do setup for windows

so the first thing you'll need is to

install these microsoft visual studio

sequential build tools go here build it

or if you already have visual studio

2022

you're good

and i already have it and anyways build

it and do not go grab a coffee

because you want to do this other stuff

so while that's downloading and

installing

you want to have node.js installed and

this is if you already have node.js you

don't really need to worry about this

this is only if you don't have node.js

you should do it this way

i remember to

run your

run it in administrative mode

when you're

doing this stuff

after you install nbm

now yarn is already pre-installed so you

don't have to worry about that

rusty

and by worry about that i mean worry

about installing it rusty and cargo

package manager so

yeah install rust

pretty sure you guys already have rust

installed because

you only found out about towering

through rust i didn't really find out

about tarry i don't think you'd find out

about terry from the front end side but

even though they act like you'd find it

through the front-end side

no web view two

the first time i actually read this as

windows 10 not 11

and i did not install it so only install

this if things don't work

which

they do work for me so yeah

because i already haven't edge installed

it's installed by default so i don't

really get why it wouldn't be installed

anyways let's go

to integrate with terry

now what they recommend is starting a

new tarry project no this is if you're a

noob

and you don't know javascript or

anything about javascript

then you do this because then all you

have is an index.html

and you can do whatever you want a

static

a website that runs on a desktop app

so we'll scroll down here and this is

what you need

add tower to existing project

so cd into the project folder and then

we add it but now you're saying wait a

second we don't have a project folder so

what you want to do is create a project

folder

and i've called it r2d2 and i'm using

react and i'm going to be using the

react jack js

so what we want to do is

create react app

okay

so we run that and

since we're already in the project

folder

we do dot

so after we do that

we actually want to add we want to go

through with this but don't just copy

this we actually need some other stuff

because

if you

know anything about react

okay so i'll show you what i mean so if

we start the react app

it'll take some time

but

what happens is

what happens is that

i'll show you guys as soon as

there you go see the browser opens up so

when we're using towery we don't want

the browser to open up because it'll

open up a desktop app

so anyways we go here

and we want to install the cross end

thing

and the cli

and

we can skip this because it'll just be

done here

so we've done this and

we've added these dev dependencies

and the next thing we want to do is add

resolutions

so that the react app doesn't break

and what i mean by this is look at this

it'll break

or it should break because

this did not get

resolved yet

but

yeah

there you go see it didn't install

so it broke and that's what i had

trouble for an hour

not fun man not fun at all

and if we build it it'll work so i'm not

gonna see it it works

so we just do that and

we don't care about finishing it

anyways i think i forgot to mention why

we need

this thing

and

i'll show you as soon as i initialize

the app

but

lenerva is the name of my company

now for the assets it's in source

or

hold up

it could be in build

so we'll come back to that actually

and you know what we'll come back to it

right now

we don't want to forget about it you

know what i mean

so we see here we go we install the api

thing

but let me just

let me just squeeze that in really

quickly

anyways as i was saying cross end okay

so we need it because

we need we don't want to open the

browser so what we do is we run yarn

cross end and then we need to set

browser to none

and after that we can continue with yarn

start

now the same way before we build we need

to say yarn build

and

what yarn build will do is you'll see

here

the build is being built over here so if

we do yarn build right now

just so

it can be cached later on

we can see something there but as that's

building we can continue on our journey

i'll skip this because

i think things are working now

so all we do is run yarn towery dove and

anyways here we go here's the stuff

and

that's pretty good and one more thing

right

we want to do

this

this is the

so i'm just going to do this and then

i'm going to call it a day

it even made the installer for me

how awesome is that

where is this release okay target

release

so

start target

release

r2t2 bro r2t2

man i am

oh it has an icon as well r2t2

yo look at that look at that

so there you go there's getting started

with towery i hope

i covered everything and now you can

just focus on the code

i had a lot of difficulties getting to

this point but i hope

you guys

have had the smoothest ride ever

and don't have to think about the

problems i encountered because i've

encountered a lot

so yeah see ya