Tauri & ReactJS - Creating Modern Desktop Apps (read desc.)
Summary
TLDRThis 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
đ» 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.
đ ïž 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.
Mindmap
Keywords
đĄTarry
đĄMicrosoft Visual Studio
đĄNode.js
đĄYarn
đĄRust
đĄCargo
đĄReact
đĄCross-env
đĄWebpack
đĄTarry CLI
đĄBuild process
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
Voir Plus de Vidéos Connexes
5.0 / 5 (0 votes)