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

Summary

This video script provides a step-by-step guide on integrating a web app with Taurine, a framework that allows web apps to run on desktops using the system's web view instead of a browser. It covers prerequisites like installing Microsoft Visual Studio build tools, Node.js, and Rust, and demonstrates creating a React project, setting up Taurine, and troubleshooting common issues. The tutorial also includes creating a desktop app installer, showcasing Taurine's ease of use and potential for developers.

Takeaways

• 🌐 Tarry is a tool that allows web applications to be used as desktop apps, providing access to local resources without the need for a browser.
• 🛠️ To start with Tarry, you need to install Microsoft Visual Studio's build tools or ensure you have Visual Studio 2022 installed.
• ☕ While the build tools are downloading and installing, it's recommended to have Node.js installed, especially if it's not already present on your system.
• 🔍 Yarn is pre-installed with Node.js, so there's no need to worry about installing it separately.
• 🔧 Rust and Cargo, the Rust package manager, should be installed for Tarry's backend processes.
• 📁 Create a new project folder for integrating with Tarry, especially if starting from scratch with only an index.html file.
• 🔄 Use 'create-react-app' to set up a new project if you're using React and JavaScript, which is a common choice for web applications.
• 🛑 Install 'cross-env' and the CLI to prevent the browser from opening when starting the React app, as Tarry is for desktop apps.
• 📝 Add resolutions to package.json to ensure compatibility and prevent build failures due to unresolved dependencies.
• 🚀 Run 'yarn tarry dove' to initiate the Tarry integration process, which will also create an installer for your app.
• 🎉 The process includes creating an installer with an icon for your desktop application, making it ready for distribution.

Q & A

What is Tarry and how does it differ from Electron?

Tarry is a tool that allows you to convert a web application into a desktop application. Unlike Electron, which uses a Chromium browser, Tarry utilizes the web view of the underlying system, thus not requiring the shipping of a whole browser.

What prerequisites are needed to start working with Tarry on Windows?

To start with Tarry on Windows, you need to install Microsoft Visual Studio Build Tools, ensure Node.js is installed, and have Yarn pre-installed. Additionally, Rust and Cargo, the Rust package manager, should be installed.

Why is Microsoft Visual Studio mentioned in the setup process?

Microsoft Visual Studio is mentioned because it provides the necessary build tools required for the setup process of Tarry on Windows.

What does the speaker suggest doing while waiting for the Visual Studio Build Tools to install?

The speaker suggests using the waiting time to install Node.js if it's not already installed, and to ensure that the installation is run in administrative mode.

Why is it recommended to start a new Tarry project for beginners?

For beginners, starting a new Tarry project is recommended because it provides a simple environment with just an index.html file, allowing them to create a static website that runs as a desktop application without needing to understand JavaScript deeply.

What is the purpose of the 'create-react-app' command mentioned in the script?

The 'create-react-app' command is used to set up a new React project. It's mentioned in the script as part of the process of integrating Tarry with an existing React project.

Why is 'cross-env' installed in the project?

'cross-env' is installed to prevent the browser from opening when starting the React app with Tarry, as it's intended for a desktop environment rather than a web browser.

What does the script suggest to do if the React app installation breaks due to unresolved dependencies?

The script suggests adding resolutions to the package.json file to ensure that the React app doesn't break due to unresolved dependencies.

What is the significance of the 'yarn build' command in the context of Tarry?

The 'yarn build' command is used to compile the project into an output directory. It's important in the context of Tarry as it prepares the web application for conversion into a desktop application.

How does the script describe the final step of creating a Tarry desktop application?

The final step described in the script is running 'yarn tarry dove' to create the desktop application, which also automatically generates an installer for the application.

What is the name of the company mentioned in the script and what role does it play in the context?

The name of the company mentioned is 'Lenerva'. It appears to be the speaker's company, possibly the entity for which the Tarry project is being set up.

Outlines

00:00

💻 Setting Up a Desktop Web App with Tarry

This paragraph introduces Tarry, a tool that allows web applications to run on a desktop without a browser, accessing local resources if needed. It's similar to Electron but uses the system's web view instead of shipping a whole browser. The script mentions using Rust for backend tasks. The setup process for Windows involves installing Microsoft Visual Studio build tools, Node.js, and Rust with Cargo, the package manager. The speaker also discusses the initial steps for integrating Tarry with an existing project, emphasizing the need for a project folder and the creation of a new React project using 'create-react-app'. There's mention of avoiding the automatic opening of a browser during the setup, which is a typical behavior of React applications.

05:00

🛠️ Troubleshooting and Building a Tarry Project

The second paragraph delves into troubleshooting the setup of a Tarry project, highlighting a specific issue where the installation process broke due to unresolved dependencies. The speaker advises installing 'cross-env' to prevent the browser from opening, which is not desired in a Tarry project. The process includes running 'yarn cross-env' with the browser set to 'none', followed by 'yarn start'. The speaker also mentions the importance of building the project with 'yarn build' to ensure that it can be cached for later use. The paragraph concludes with the successful creation of a Tarry project, including an installer with an icon, demonstrating a smooth setup process after overcoming initial difficulties.

Keywords

💡Tarry

Tarry is a tool used for creating desktop applications from web applications, allowing them to run outside of a browser environment. It is similar to Electron but does not rely on a Chromium browser, instead using the native web view of the underlying system. In the script, Tarry is the main subject, with the video focusing on setting it up and integrating it with a project.

💡Microsoft Visual Studio

Microsoft Visual Studio is an integrated development environment (IDE) that is essential for the script's setup process. It is used for developing applications with various programming languages. In the video, it is mentioned as a prerequisite for setting up the Tarry environment on Windows.

💡Node.js

Node.js is a JavaScript runtime that allows for server-side JavaScript execution. It is a key component for many web development projects. In the script, Node.js is recommended to be installed as part of the Tarry setup process, especially for those who do not already have it.

💡Yarn

Yarn is a package manager for JavaScript that is used for dependency management in web projects. It is mentioned in the script as being pre-installed, which simplifies the setup process for Tarry, as it is used to install other necessary packages.

💡Rust

Rust is a systems programming language known for its performance and safety. It is used in the script for backend operations within the Tarry framework. The video suggests that the audience likely already has Rust installed, as it is commonly associated with the Tarry project.

💡Cargo

Cargo is Rust's package manager and build system. It is integral to managing Rust projects and is mentioned in the script as a necessary component for the Tarry setup, assuming the audience is familiar with Rust development.

💡React

React is a popular JavaScript library for building user interfaces, particularly single-page applications. In the script, React is used as an example of a front-end technology that can be integrated with Tarry to create a desktop application.

💡Cross-env

Cross-env is a package that allows setting environment variables across different operating systems in a Node.js application. It is mentioned in the script as part of the setup process to ensure that environment variables are set correctly for the Tarry project.

💡Webpack

Webpack is a static module bundler for modern JavaScript applications. It is used in the script to build the project, and it is implied that Webpack configurations are necessary for the Tarry integration to work properly.

💡Tarry CLI

Tarry CLI is the command-line interface for the Tarry tool, which is used to scaffold and manage Tarry projects. In the script, it is mentioned as part of the process to add Tarry to an existing project.

💡Build process

The build process in the context of the script refers to compiling the web application into a format suitable for the Tarry desktop application. It is a crucial step before the application can be run as a desktop app, and the script describes how to initiate this process using 'yarn build'.

Highlights

Tarry is a tool for converting web apps into desktop applications using the local system's web view instead of a browser.

Tarry uses Rust for backend processes, offering an alternative to Electron which relies on Chromium.

To set up Tarry on Windows, Microsoft Visual Studio build tools are required, along with Node.js for JavaScript runtime.

Yarn, a package manager, is pre-installed with Node.js, simplifying the setup process.

Rust and its package manager, Cargo, should be installed for Tarry development.

For troubleshooting, ensure Microsoft Edge is installed as it might be required for Tarry to function properly.

Starting a new Tarry project is recommended for beginners, providing a simple index.html to work with.

For existing projects, Tarry can be added with specific commands in the project directory.

Creating a new project folder and initializing a React app is part of setting up a Tarry project with JavaScript.

Cross-env and the CLI are necessary dev dependencies for a React app to work with Tarry.

Resolutions must be set to prevent build failures in a React app integrated with Tarry.

The build process with 'yarn build' is crucial before running the Tarry application.

Running 'yarn tarry dove' initiates the Tarry development process for the project.

Tarry automatically generates an installer for the desktop application.

The speaker shares their experience of difficulties and hopes for a smoother experience for others.

The final product is a desktop application named 'r2t2' with an icon, showcasing the result of the Tarry setup.

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