This content originally appeared on Bits and Pieces - Medium and was authored by Fernando Doglio
Meet the new Electron alternative
Did the idea of moving away from JavaScript, HTML and CSS scare you?
Well, for years now we’ve had some alternatives that let us build native applications using these technologies, making our life a lot easier.
In this article, I’m going to share with you one particular tool that caught my eye: Tauri.
This Electron alternative, lets you build desktop applications using the web technologies you know and love.
Today I’ll show you how you can build a simple To-Do app (with added sentiment analysis) using React, yet we’ll be able to distribute it as a native application.
Getting started with Tauri
Setting up the main project is actually quite trivial. Their documentation might scare you a bit if you read all the manual steps, but if this is your first time around, the only thing you have to remember is this command:
sh <(curl https://create.tauri.app/sh) <your app name> --template react --manager npmThat’s all, the script will take care of asking you a few questions,
That simple line will install all you need, making sure it uses the React template and that it works with NPM as the package manager.
You can review their manual setup some other day, today we’re done getting started. Besides, the Tauri docs only cover how to manually get started with Next, but if you look at the docs of the create-tauri-app command, you’ll see you don’t need Next to use plain React.
In my case, I called my app “Tauri-Do”, and it created a bunch of folders and files. For this example, we’re only going to worry about 2 folders:
- src : Here is where our React code will live.
- src-tauri : Here is where we’ll be adding a little bit of Rust code to add a very simple native feature to our application.
Yes, I said “Rust”, Tauri’s back-end, and the reason why we can build a native application (with access to all the native goodness, like window and menu control). Don’t worry though, I’ll add very little Rust, so if you’ve never coded in that language, you won’t get lost.
Now let’s take a look at the app we’ll be building.
Building a desktop version of a To-Do app
I’m going to be building the classic To-Do app, with the added “cherry on top” that the app will perform a quick sentiment analysis on the tasks to determine if they’re “positive”, “negative” or “neutral”.
This is what the app will look like:
I made a big screenshot because the top menu bar is also something we’re going to be adding. The “File” menu that you see there was added as a native feature to this app. It’s not going to do A LOT, but it’ll have an action that when clicked, will move the focus back to the input field on the main window.
So essentially, we’re going to be building a React app that can interact with the OS.
Exciting!
For this, after the initial setup which you should’ve already performed, we’ll use the bootstrap package for styling and the sentiment package for the sentiment analysis bit.
Writing the web UI
Let’s start with what should be the easy part.
Once you’ve run the initial setup command, you should have your project structure ready. At this point in time, we’re going to focus on the src folder. That’s where our web code will live.
To make this easy, I’m going to edit the App.jsx file inside that folder and put this code:
As you can appreciate, this is a basic to-do app code. I’m not storing the tasks anywhere other than inside the component’s state using the useState hook.
The sentiment analysis is done in line 19, and that gives me a number, which I then turn into a string when rendering the list using the getSentimentString function.
Again, nothing too fancy, just a little feature to make the app a bit more interesting.
At this point, you can already run the app with npm run tauri dev and after compiling some code (yes I said compiling), the app will show up on your screen.
But right now, the “app” is nothing more than a watered-down web browser showing your web page.
So let’s interface with the OS.
Adding some Rust “magic”
The Rust API is big, you can do A LOT with it, but for the purposes of an intro tutorial I’m just going to limit myself to adding a native menu item.
For this we’ll go into the src-tauri folder and we’ll open up the src/main.rs file.
You’ll see some code in there already, since the default app that it creates with the setup of the project added some basic interaction as well. Leave everything in there for the time being, let’s not worry too much about it.
Right now our focus should be adding the menu items. For that we’re going to add the following code to the main function:
The first attribute of the CustomMenuItem::new method is the menu item “id”, and the second one is the text that will be shown.
Here we’re creating a “File” menu with two options: “New ToDo” and “Quit”.
We want the “Quit” option to end the program, and for the “New ToDo”, we want to trigger a focus event on the input element. But first, we still need to add this new menu to the program.
We’ll do that by modifying the tauri::Builder line to look like this:
And now if you run the app again, you’ll see the menu there in the top left corner.
Now we have to make those options work somehow. We’ll use “events” for that. Specifically “menu events”.
We’ll use the on_menu_event method like this:
The match statement will help us match the menu item “id” with the event’s id. So for the “quit” item, we simply close the app with std::process::exit(0) . But for the “new” menu item, we’ll trigger a window event. This event will have to be picked up by our UI and there we’ll react accordingly.
The first argument of the emit method is the event’s “id”, and the second is the payload. For this particular event, we don’t need a payload, so we’ll leave it empty.
And that’s all we needed. Now let’s go back to the React section of our app and add the code to listen for our new event.
Listening for Rust events in our React component
We’ll use the listen function from the @tauri-apps/api/event library, which is already installed in the project.
So add this import statement to your App.jsx file:
import {listen} from '@tauri-apps/api/event'And then we’ll setup the event listener when the component is mounted. For that, we’ll simply take advantage of the useEffect hook, like this:
And now, when you click on the “File -> New ToDo” menu item, the input field will gain focus.
Magic!
If you’d like to see the full source code of the app, you can check out this Github repo.
Note that you can also emit events from the web UI to be picked up by Rust. You can read more about events in their official documentation.
Did you like what you read? Consider subscribing to my FREE newsletter where I share my 2 decades’ worth of wisdom in the IT industry with everyone. Join “The Rambling of an old developer” !
Building your app
The only thing we’re missing at this point, is packaging your app for distribution. After all, this is a desktop app, so we should be able to get a binary somehow.
We can do that with the npm run tauri build command. But before that, we need to edit the src-tauri/tauri.conf.json file. There we can edit many properties of the app, like the name with the package.productName property, the icons with the tauri.bundle.icon array and the package identifier with the tauri.bundle.identifier property.
The only mandatory change is the last one, we need to add a unique package id. Once we do that, the build process will run and we’ll get a binary to install.
Keep in mind that at the moment of writing this article, there is no cross-compilation, so if you want to have binaries for macOS and Windows (for example), you’ll have to build it in both systems.
Other than that, your app should be ready now.
Congrats, you’ve built your (hopefully) first desktop app without having to learn a desktop programming language.
With Tauri we were able to directly translate all of our web dev knowledge into the desktop world. And in the process we also gained some superpowers we didn’t have before: the ability to interact with OS-specific features.
While we’ve just scratched the surface of Tauri in this tutorial, we can clearly see the potential this framework provides. I’m really excited to keep trying it out and see how far I can take it before I really need to learn another language.
What about you? Have you tried Tauri already? Or have you tried something similar, like Electron? Share your experience in the comments section!
Build apps with reusable components like Lego
Bit’s open-source tool help 250,000+ devs to build apps with components.
Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.
Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:
→ Micro-Frontends
→ Design System
→ Code-Sharing and reuse
→ Monorepo
Learn more
- How We Build Micro Frontends
- How we Build a Component Design System
- Bit - Component driven development
- 5 Ways to Build a React Monorepo
- How to Create a Composable React App with Bit
How To Build Desktop Apps Using React: A Quick Introduction to Tauri was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Fernando Doglio
Fernando Doglio | Sciencx (2023-02-15T07:16:41+00:00) How To Build Desktop Apps Using React: A Quick Introduction to Tauri. Retrieved from https://www.scien.cx/2023/02/15/how-to-build-desktop-apps-using-react-a-quick-introduction-to-tauri/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.