Build Blazingly Fast React Desktop Apps with Tauri

power is an awesome alternative to Electro because it allows you to both build fast and secure web-based desktop apps based on Rust so let's take a look at how it works and to now get started we're first of all gonna need to set up rust on our machine which works differently on different operating systems on Mac you'd need to do these two commands right here and when you're done you can say npm create Towery app at latest in your terminal and just go through the prompts so yeah the name is fine we're going to use typescript or JavaScript in our front end we like npm and of course react and we can use typescript don't worry if you just use JavaScript this will work just as fine as well but because Towery is really typesafe anyway we can just use typescript to make everything a bit easier and now if you just take a look we can see here we've already got Atari app and we can now CD into it CD Towery app and do an npm install just like we always would and when that's done then you can just run npm run Towery Dev which will basically spin up everything for you and compile some rest so don't be worried if it takes some time so as you can see we now got a little Tower app right here where we can add a greeting and stuff which is really cool and basically looks like an electron app on first glance but what's really cool is that it uses the built-in browser API from your operating system meaning that you don't have as big files because you don't ship a whole version of Chrome with your app and it shares Resources with other apps using this API meaning that it doesn't take up as much RAM either which is really cool and now let's get into actually modifying this a bit so as you can see we've got two directors here a source directory and a source Tower directory as you can see the source Tower directory basically contains some Rust and the source directory is basically just your front end and in here we already see some cool stuff which is an evoke function and this invoke function can call rust code so as you can see we are invoking the grid function and passing a parameter and if you just take another look at our main.rs file in our source story we can see here is this greeting so basically we are calling rust code and then we can use the return value from it so if we were to do something like add another function called Square that takes in a number so N is a unsigned 32-bit integer and we also return uncensor 32-bit integer and we were to then just go ahead and say end that's how to then we could already call it as long as we go ahead and add it to this little array down here and as you can see every time you change something this Towery window will pop up so if you don't want that to happen then you will need to close the application thirdly fine in my opinion though now let's try this out by adding a bit of state to our app right here so cons num and set num starts as two because we can't square a zero or one and then we just display it down here inside of a little button for example it will basically do what the other function did so basically saying okay we want to set our number and we want to invoke Square with our number and now we see okay this isn't an amazing function fine we can make it async like this and now everything should work just fine so now let's try it out by running our Atari app again and we of course did a little mistake which is that I called it num in here and N in my rust code so if we just change this up real quick and reload then we should see that our code is now working and we can square stuff but if we go too far then we can see that it crashes because rust doesn't handle errors the same way as typescript so you will need to handle your errors if you want this to work properly but on the other hand though rust is a lot faster than typescript so for really complex operations or stuff that interacts with the system you should probably use rust anyway but what's also really cool is that you don't necessarily need to use rust for every bit of functionality that interacts with the system these apis right here for example are just provided by taurine itself and you can already write through text file read from a text file and get the home directory of the user without needing to write any rust code which is really cool and this also has some really tight securities so the other modules that might be nefarious can't interact with the user system if you don't allow it so now let's just try this out by running a little bit of a use effect region and we want to basically persist our state inside of a file so to do that we'll just go ahead and say I want to write text file then I need to add a path and I need to add a string that I want to write and in this case we're just going to Json that stringify an object and that object should contain our number and our name and now we need to get this path right here and the issue with that is that we need the home directory so let's do that real quick const home equals home dear which is an async function so we need to await it meaning that we need to make the use effect asynchronous as well so we'll just make it an async function that calls itself and now what we can do is we can just say the path is home plus our file name for example test1.json and now we could already run this as long as we add the required parameters so num and name and now we can already Try It Out by starting up our app again and we should actually run into an error so let's take a look at what it is so as you can see the path module is not enabled you must enable it in one of its API allow lists and that's what's really cool Towery is secure by default because you need to allow every feature that interacts with the system separately so if you just take a look at our Towery conf.json in a source diary directory we see this allow list and here we can basically Define what level of system access our app has so for example all features are disabled by default the shell cannot be interacted with but it can be opened and what we now want to do is we want to say okay I want to have access to all parts of the path module so I want to be able to get the home directory the app data directory Etc and then I want to be able to interact with the file system to be more specific I want to be able to write files read files and that is the scope of the home directory so I can only write to home test one dot Json so no nefarious apps can interact with any files on the system except for homes test1.json and now if we take another look into our app using inspect element we should see that the error is now gone and if we take a look at my home directory you can see here is the test1.json file and if we just read it out test1.json we can see numbers 2 and name is an empty string so it works just fine which is really cool and if we now wanted to access this data initially then that would of course work as well we can just copy over this user flag right here and instead of writing a file we can of course read a text file just not pass this second parameter right here and then we can just say Okay const content equals a weight read text file and we could for example just console.lock the content for now then we can see that it locked the content of the text file which is exactly what we wanted you will of course need to be a bit careful with race conditions right here because both of these user effects are async now so you might want to do it in one use effect that's of course up to you depending on what your use cases but anyway that's basically how Towery works but it might not be enough to build a proper app you might want something for styling as well so I want to check out this video right here where I'll show you how to use vanilla extract with react which you could just as easily use with this as well

Channel: Niklas Ziermann

Views: 6,417

Keywords: Coding, Programming, HTML, CSS, JS, Tutorial, How to, JavaScript, html5, css3, js, code, coding tutorials, programming, html tutorial, css tutorial, js tutorial, React, react tutorial, niklas ziermann, tauri, tauri react, electron alternative, better than electron

Id: yMTgaI2Egds

Length: 6min 54sec (414 seconds)

Published: Mon Apr 24 2023