Manas Mishra

Posted on Aug 28

A new way to create desktop applications: Tauri + React

#javascript #react #opensource #webdev

Welcome to this article. If you a programmer, you must have heard about electron.js, by using which, whatsapp, slack, skype, discord desktop application has been created. But, then why am I saying that Tauri is a new way to create desktop applications ? Let's look into some of the pros and cons of it.

Electron vs Tauri:

Performance

Tauri is designed to be more lightweight and faster than Electron, as it uses less memory and CPU resources

Security

Tauri is built with security in mind and aims to be more secure than Electron by using a Rust-based native layer instead of a JavaScript-based layer

Size

Tauri apps have smaller binary sizes than Electron apps because it’s using rust instead of javascript and other web technologies

Access to native APIs

Tauri apps have access to more system-level APIs than Electron apps, because of the use of rust

You can have a look at the below table, to compare Tauri and Electron Completely.

But, comparison doesn't make sense, till we jump to the code. So, let's create a basic todo app in both Electron and Tauri in React, and then we can see the comparison in between.

Electron App

To create electron app, use the below command and steps to create the electron app in react.



yarn create vite

1. Project-name: <add a name of the project>
2. Select a framework: select Others
3. Select create-electron-vite
4. Project template: React

Move into the electron project and you can open it in VSCode, and install all the packages



yarn install 
yarn add jotai

NOTE: We are using jotai for state management.

You can start the electron app using the below command



yarn dev

And, you can view an app something like this,

NOTE: As I am using Linux, so headers of the app and the icon are a little different. It will look different for Windows and Mac.

I cleaned everything in the App.tsx, App.css and index.css files, and the application will be blank for me.



import './App.css'

function App() {

  return (
    <>

    </>
  )
}

export default App

Now, Let's start creating the Todo Application.

I created a Components folder and store in the src folder and created two files, one inside the Components folder and one in the store folder.



src
|-- Components
    |-- Input.tsx
    |-- TodoList.tsx
|-- store
    |-- store.ts

Input.tsx: The input component is for the input box where we can type the todo app.

TodoList.tsx: This component will be used to show the list of the todos.

store.ts: This file is being handled to create the global store.



//store.ts
import { atom } from "jotai";

export const inputDataStore = atom<String[]>([])

Here, we are initializing the store using jotai Atom and giving it a type of Array of strings.



// Input.tsx
import { useAtom } from "jotai"
import { inputDataStore } from "../store/store"
import { useState } from "react"

const Input = () => {
  const [_, setData] = useAtom(inputDataStore)
  const [inputData, setInputData] = useState('')


  return (
    <div className="input-container">
        <input type="text" onChange={(e) => {
          setInputData(e.target.value)
        }} />
        <button onClick={() => {
          setData((el) => [...el, inputData])
        }}>
          Add Todo
        </button>
    </div>
  )
}

export default Input

As you can see, in the above code, I created an input box, and a button to add the entered value in the input box to move to the global todo list array.



// TodoList.tsx

import { useAtom } from 'jotai'
import { inputDataStore } from '../store/store'

const TodoList = () => {
  const [data] = useAtom(inputDataStore)

  return (
    <ul>
        {data?.map((item, index) => {
            return (
                <li key={index}>
                    {item}
                </li>
            )
        })}
    </ul>
  )
}

export default TodoList

The above code represents the list of the todo, which has been entered in the Input.tsx file.



// App.tsx
import './App.css'
import Input from './Components/Input'
import TodoList from './Components/TodoList'

function App() {

  return (
    <div className='app-container'>
      <Input />
      <TodoList />
    </div>
  )
}

export default App

Finally, all the components are combined and added to the App.tsx file.

Build the Electron App

To build the electron app, please run the below command.

yarn build

The above command will build the code and also create a folder named, release which has the build of the app to run on a desktop, according to your OS.

As I am running Linux, it created an AppImage for me, for 102.2 MB.

Tauri App

To create the Tauri app, use the below command and steps to create the Tauri app in React.



yarn create tauri-app

1. Project name: <name of the project>
2. Identifier: <project identifier>
3. Choose language: Typescript / Javascript
4. Choose Package Manager: yarn
5. Choose UI template: React
6. Choose UI flavour: Typescript

Now, You can cd into the tauri app, depending on what name you gave to your project.