"JavaScript developers can’t build anything except web applications." Every time I hear this, my reaction is — Really? 🤔

Many people think JavaScript is limited to just web development, but that’s far from the truth. Trust me, JavaScript is almost everywhere.

In this article, we’ll explore how JavaScript can be used to build desktop applications using Tauri.

For context, Tauri uses Rust under the hood for its backend.

2.Setup tauri in existing React Project.

1. step one install tauri cli

npm install -g @tauri-apps/cli
// or if you prefer using it locally then
npm install --save-dev @tauri-apps/cli

2. Install tauri in your project

npm install @tauri-apps/api  // This lets your React frontend talk to the Tauri backend (eg. for filesystem, dialogs, etc.)
npx tauri init

This will add src-tauri folder and configure everything.

3. To run the tauri app

npm run tauri dev

3. New Tauri App Setup.

If you are starting with the tauri i would recommend you to start it from scratch. this would be easy to understand the setup.

npm create tauri-app@latest

follow the the instructions to setup the ui library, language preference and other necessary things.

1. select the unique identifier for the application. (it’s mostly recommended to put you business domain)

    >> Identifier (com.tauri-app.app)
   

2. select the language for building frontend (UI layer), I recommend to use Typescript/Javascript

    >> Choose which language to use for your frontend
    Rust (Cargo)
    Typescript / Javascript (npm, yarn, pnpm, bun)
    .NET
   

3. select the package manager.

    >> Choose your package manager 
    pnpm
    yarn
    npm
    bun
   

4. select the UI template

    >> Choose your UI template 
    Vanilla
    Vue
    Svelte
    React
    Solid
    Angular
    Preact
   
    >> Choose your UI flavor 
    TypeScript
    JavaScript
   

5. install the libraries from package.json

    cd /project_name
    npm install
   

6. Run development server.

    npm run tauri dev
   

   You’ll now see a new window open with your app running.

   Congratulations! We did it 🤝

4. Communication between UI layer and backend (Rust)

To build the interactive application we need to keep the backend and the UI layer in sync, so for that we get the invoke api from the tauri, where we will create the function with all the logic at rust side and will call it with the help of invoke function from the UI layer using @tauri-apps/api.

1. Create the function at rust side.

use tauri::{App, Manager};

#[tauri::command]
fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
}

fn main() {
    tauri::Builder::default()
        .setup(|app: &mut App| {
            // Optional: do something with app
                let win = app.get_window("main").unwrap(); //This requires Manager because get_window is from the Manager trait.
                win.set_title("New Title").unwrap();
            Ok(())
        })
        .invoke_handler(tauri::generate_handler![greet])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

2. Now we can call the same function from react component

import { useState } from 'react'
import { invoke } from '@tauri-apps/api'

function App() {
  const [name, setName] = useState('')
  const [greeting, setGreeting] = useState('')

  async function greetUser() {
    const msg = await invoke('greet', { name })
    setGreeting(msg)
  }

  return (
    <div>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <button onClick={greetUser}>Greet</button>
      <p>{greeting}</p>
    </div>
  )
}

export default App

This was all to make the communication between frontend and backend.

5. Understanding .Setup( | app | { … })

Understanding .Setup( | app | { … }) block in Tauri is very powerful. It's called right before your Tauri app launches, and it gives you access to the whole native backend (App, windows, plugins etc.).

It’s a lifecycle hook in tauri that runs: after the tauri initializes, but before the app window is shown. This is where you can configure or access window, Register Global State, Communicate with frontend or Use Plugins.

1. Access and Control Windows

    .setup(|app| {
        let win = app.get_window("main").unwrap();
        win.set_title("My App Title").unwrap();
        win.set_always_on_top(true).unwrap();
    })
   
    //You can use all the methods provided by tauri::Window
   

2. Emit Events to Frontend

    // Rust side (Backend)
    let win = app.get_window("main").unwrap();
    win.emit("backend-ready", "Tauri backend initialized").unwrap();
   

    //React side (Frontend)
    //Listen this at react side 
   
    import { listen } from '@tauri-apps/api/event';
    listen('backend-ready', (event) => {
      console.log(event.payload);
    });
   

6. Know More about WebView

We can actually control Webview over here inside setup. we can control closeing of application waking application on start on the machine and lot more. Below is the example of how we can restrict user from closing the window and auto launching application on start of machine.

.setup(|app| {
            let app_handle = app.handle();

            // Show main window on startup
            if let Some(window) = app.get_webview_window("main") {
                if let Err(e) = window.show() {
                    eprintln!("Failed to show window: {}", e);
                }
                if let Err(e) = window.set_focus() {
                    eprintln!("Failed to focus window: {}", e);
                }

                // Prevent window from closing
                window.on_window_event(move |event| {
                    if let tauri::WindowEvent::CloseRequested { api, .. } = event {
                        api.prevent_close();
                        println!("Close prevented - application will continue running");
                    }
                });
            }

            #[cfg(desktop)]
            {
                // Enable autostart if not already enabled
                let autostart_manager = app.autolaunch();
                if let Ok(false) = autostart_manager.is_enabled() {
                    match autostart_manager.enable() {
                        Ok(_) => println!("Autostart enabled successfully."),
                        Err(e) => eprintln!("Failed to enable autostart: {}", e),
                    }
                }
            }

            Ok(())
        })

7. Understanding Event Emmiter.

We will emmit the event at defined interval, and at frontend side we will receive that event and perform the specific task.

//Awaake_interval.rs

use tauri::{AppHandle, Emitter}; 
use std::time::Duration;

#[tauri::command]
pub async fn trigger_sync() -> Result<String, String> {
    Ok("sync_triggered".to_string())
}

pub async fn simple_background_timer(app_handle: AppHandle) {
    let mut interval = tokio::time::interval(Duration::from_secs(30));

    loop {
        interval.tick().await;
        if let Err(e) = app_handle.emit("background_sync_trigger", ()) {
            eprintln!("Failed to emit background_sync_trigger: {}", e);
        }
    }
}

mod awake_interval


pub fn run() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![awake_interval::trigger_sync])
        .setup(|app| {
            let app_handle = app.handle();
            tauri::async_runtime::spawn(awake_interval::simple_background_timer(app_handle.clone()));

            Ok(())
        })
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

// App.jsx

import { useCallback, useEffect, useState } from "react";
import { listen } from "@tauri-apps/api/event";

const useBackgroundSync = () => {
  const [count, setCount] = useState(0);

  const performSync = async (syncFunction) => {
    try {
      if (syncFunction) {
        await syncFunction();
      }
    } catch (error) {
      console.error("Sync error:", error);
    }
  };

  const setupBackgroundSync = useCallback((syncFunction) => {
    let unlisten;
    const setupListener = async () => {
      unlisten = await listen("background_sync_trigger", () => {
        console.log("Background sync trigger received");
        setCount((prevCount) => prevCount + 1);
        performSync(syncFunction);
      });
    };

    setupListener();

    return () => {
      if (unlisten) {
        unlisten();
      }
    };
  }, [performSync]);

  return {
    count,
    performSync,
    setupBackgroundSync,
  };
};

export default useBackgroundSync;

8. Network Calls.

We cannot use native fetch or any library just like axios to make the network calls. tauri restricts this to prevent unauthorized or malicious requests. For this tauri gives as http plugin.

This plugin provides a safe bridge for network access in a desktop environment where direct access could pose security risks. Tauri enforces strict security by requiring you to whitelist domains in the tauri.config.json file to prevent unauthorized or malicious requests. Without this, the app will block outgoing requests for safety.

Setup Steps:

1. Install the plugin:

    cargo add tauri-plugin-http
   

2. Add the plugin in lib.rs :

    .plugin(tauri_plugin_http::init())
   

3. Whitelist URLs in default.json: capablities>default.json

    {
      "$schema": "../gen/schemas/desktop-schema.json",
      "identifier": "default",
      "description": "Capability for the main window",
      "windows": ["main"],
      "remote": {
        "urls": [
          "http://localhost:9000",
          "https://base-url/api/v1/**/**/**"
        ]
      },
      "permissions": [
        "core:default",
        {
          "identifier": "http:default",
          "allow": [
            {
              "url": "http://localhost:9000"
            },
            {
              "url": "https://base-url/api/v1/**/**/**"
            }
          ]
        }
      ]
    }
   

npm install @tauri-apps/plugin-http

Now we can use the fetch method from @tauri-apps/plugin-http to make the network call

//action.js

import { fetch } from "@tauri-apps/plugin-http";

export const userLogin = async (formData) => {
  try {
    const BASE_URL = import.meta.env.VITE_BASE_URL;
    const response = await fetch(`${BASE_URL}/auth/login`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        email: formData.email,
        password: formData.password,
      }),
      credentials: "include",
    });
    const data = await response.json();
    return data;
  } catch (error) {
    console.log(error);
    throw error;
  }
};

Thank You! 📚

In a recent article, I introduced Dexie.js, a wrapper library for IndexedDB that simplifies working with it. I should have published this article about using IndexedDB with native APIs before the Dexie.js article. Why? Because only when you experience the complexity and pain of writing native IndexedDB queries will you truly appreciate the abstraction Dexie.js provides.

So let’s not dive into Dexie.js again I’ve already discussed it in detail in my earlier post. If you're curious about how Dexie helps simplify things, I recommend reading that article after finishing this one.

Why IndexedDB?

You might wonder: if we have localStorage which is easy to use, why do we need IndexedDB at all?

That’s a fair question but only partially correct. Let's talk about localStorage first:

• localStorage has a limited capacity, usually around 5–10MB.

• Its operations are synchronous, meaning large data inserts or updates can block the UI and make the app unresponsive.

• It’s suitable for small, frequent, and simple data operations.

In contrast, IndexedDB offers:

• Asynchronous operations which means it doesn’t block the main thread.

• Support for structured data stored in object stores (which you can think of as tables).

• Indexed querying, allowing you to query data more efficiently.

• Support for versioning and schema upgrades.

NOTE : WE CAN ONLY INCREMENT THE DATABASE VERSION, IF WE TRY TO DECREMENT THE VERSION THE onerror EVENT WILL TRIGGER.

Let’s Code: Setting Up IndexedDB with Native API

IndexedDB uses an event-driven architecture. So, the sequence in which you write operations doesn’t matter as much as how you handle events.

// Open a database connection
const database = indexedDB.open("MyDatabase", 1); 
// Pass: database name, and version number

step 1 : Create objectStore (Tables) and Indexes.

database.onupgradeneeded = (event) => {
    const db = event.target.result;

    if (!db.objectStoreNames.contains("students")) {
        const store = db.createObjectStore("students", { keyPath: "id" });

        // Indexes: (indexName, keyPath, options)
        store.createIndex("name", "name", { unique: false });
        store.createIndex("email", "email", { unique: true });
    }
};

step 2 : Insert Data

database.onsuccess = (event) => {
    const db = event.target.result;

    const transaction = db.transaction("students", "readwrite");
    const store = transaction.objectStore("students");

    const request = store.add({
        id: 1,
        name: "Viraj Nikam",
        email: "viraj@gmail.com"
    });

    request.onsuccess = (event) => {
        console.log("Data inserted successfully!", event.target.result);
    };

    request.onerror = (event) => {
        console.error("Failed to insert data:", event.target.error);
    };
};

IndexedDB Native API – CRUD Operations

1. Add Data (Create)

const request = store.add({
    id: 1,
    name: "Viraj Nikam",
    email: "viraj@gmail.com"
});

2. Get Data (Read)

a. Get by primary key (id)

const getRequest = store.get(1);

getRequest.onsuccess = (event) => {
    console.log("Record fetched:", event.target.result);
};

getRequest.onerror = (event) => {
    console.error("Error fetching record:", event.target.error);
};

b. Get by Index

const index = store.index("email");
const emailRequest = index.get("viraj@gmail.com");

emailRequest.onsuccess = (event) => {
    console.log("Record fetched by email:", event.target.result);
};

3. Update Data

To update, you first fetch the record, modify it, and then use put() (not add(), since add() will fail if the key already exists):

const getRequest = store.get(1);

getRequest.onsuccess = (event) => {
    const data = event.target.result;
    data.name = "Viraj S. Nikam"; // Updating the name

    const updateRequest = store.put(data);

    updateRequest.onsuccess = () => {
        console.log("Record updated successfully!");
    };
};

4. Delete Data

const deleteRequest = store.delete(1);

deleteRequest.onsuccess = () => {
    console.log("Record deleted successfully!");
};

deleteRequest.onerror = (event) => {
    console.error("Failed to delete record:", event.target.error);
};

Final Execution :

const database = indexedDB.open("MyDatabase", 1) // Here you need to pass name of the database and it's version

// add tables to your db over here at onupgradeneeded
database.onupgradeneeded((evt)=>{
    const dbInstance = evt.target.result;

    if(!dbInstance.objectStoreNames.contains("students")){
            const request = dbInstance.createObjectStore("students", {keyPath : "id"});
            //createIndex used to define the columns, Its necessary to define Indexes because it helps you at time of queries
            request.createIndex("name", "name", {unique : false}) // takes column name, accessar key for that perticular column, and object of the constraints
            request.createIndex("email", "email", {unique : true})
    }
})

//perform your queries over here
database.onsuccess = (event) => {
    const db = event.target.result;
    const transaction = db.transaction("students", "readwrite");
    const store = transaction.objectStore("students");

    // Add
    const addRequest = store.add({
        id: 2,
        name: "Jane Doe",
        email: "jane@example.com"
    });

    // Read by ID
    const getRequest = store.get(2);
    getRequest.onsuccess = () => console.log("Fetched:", getRequest.result);

    // Update
    getRequest.onsuccess = () => {
        const data = getRequest.result;
        data.name = "Jane D.";
        const updateRequest = store.put(data);
        updateRequest.onsuccess = () => console.log("Updated!");
    };

    // Delete
    const deleteRequest = store.delete(1);
    deleteRequest.onsuccess = () => console.log("Deleted record with ID 1");
};

Wrapping Up.

Working with native IndexedDB can feel a bit messy and confused due to its event-based flow. That’s exactly why libraries like Dexie.js exist to make your life easier.

But understanding the native API is crucial for debugging, customization, and appreciating how much a wrapper is actually helping you.

Thank You !☺️

If you’ve ever worked with IndexedDB, you know it can be a bit painful—lots of boilerplate and a complex API just to do simple things. That’s where Dexie.js comes in. It’s a lightweight wrapper that makes IndexedDB simple, clean, and developer-friendly.

I recently started building an offline-first application, and I needed something more powerful than localStorage and less messy than raw IndexedDB. After exploring a few options, Dexie.js turned out to be the perfect fit.

In this article, I’ll walk you through the basics—setting up a database, performing CRUD operations, and integrating it with React (don’t worry if you’re not into React, the concepts will still make sense).

Why I Chose Dexie.js for Offline Data Management.

Dexie.js is a smart wrapper around IndexedDB that makes working with local databases in JavaScript much easier and cleaner. If you’ve ever tried IndexedDB directly, you know how tricky it can be. Dexie simplifies that headache.

While building an offline-first application, one big challenge is choosing the right way to manage local data. localStorage is too limited, and working directly with IndexedDB feels like wrestling with unnecessary complexity.

Dexie.js—a lightweight and developer-friendly solution that keeps things simple while still giving you the power of IndexedDB under the hood.

Let’s write the code.

First, we need to set up the database instance:

import Dexie from "dexie";

const db = new Dexie('myDatabase');
            db.version(1).stores({
                    user : '++id, name, email, password, roleId',
                    tasks : '++id, title, description, isCompleted, createdAt, updatedAt'
            })

That’s it! This small setup gives you two tables: user and tasks. Now you can start performing different operations without the hassle of raw IndexedDB code.

CRUD Operations with Dexie.js

Below are the most common operations:

import db from 'path-to-db'
//Add Task
const addTaskToDB = async(data)=>{
    await db.tasks.add(data)
}

//Delete Task
const deleteTaskById = async(id)=>{
    await db.tasks.delete(id)
}

//Update Task
const updateTask = async(data)=>{
    await db.tasks.put(data)
}

//Get Task by Id
const getTaskById = async (id)=>{
    return db.tasks.get(id)
}

//Get all Tasks
const getAllTasks = async()=>{
    return db.tasks.toArray();
}

export {addTaskToDB}

Using Dexie in a React Component

Here’s a quick example to show how we can integrate it with React:

import {addTaskToDB} from 'actions'
const MyReactComponent = ()=>{
    const [newTask, setNewTask] = useState({
            title : "",
            description : ""
      });

    const addTask = async()=>{
        await addTaskToDB(newTask);
         globalThis.alert("Task Added")
    }

    const handelTaskInputChange = (evt)=>{
        const {name, value} = evt.target;
        setNewTask((prev)=>({...prev, [name]: value}))
     }


    return(
        <form onSubmit={addTask}>
            <input type='text' onChange={handelTaskInputChange} value={newTask.title}/>
            <input type='text' onChange={handelTaskInputChange} value={newTask.description}>
            <button>Add Task +</button>
        </form>
    )
}

Advance Queries

1. Suppose you need to update specific fields (like name) for multiple rows in a Dexie.js table based on their id. A common real-world scenario is when you have an array of objects, and you want to update the database to reflect new values where the id matches.

   Let’s break this down with an example:

const data = [
  { id: 1, name: "Sarthak" },
  { id: 2, name: "Shubham" },
  { id: 3, name: "Rahul" }
];

await db.tableName
  .where("id")
  .anyOf(data.map((row) => row.id))
  .modify((record) => {
    const updated = data.find((row) => row.id === record.id);
    if (updated) {
      record.name = updated.name;
    }
  });

Final Thoughts

If you’re tired of the limitations of localStorage or the complexity of IndexedDB, Dexie.js is the perfect middle ground. It’s fast, reliable, and a great tool for building offline-first applications.

I hope this guide helped you get started. If you’ve used Dexie before, share your experience in the comments!

Before I discovered React Hook Form, I realized I was a complete noob when it came to handling form data in React. I used to manage form state and validations using local state variables. While this approach works for simple forms, it quickly becomes messy and hard to scale as your form grows.

To make things more maintainable, I thought of lifting the state to a global level using something like Context API or even a state management library like Redux or Zustand. But that also felt like overkill for just managing form inputs and validations.

Lesson 2: Introduction.

React Hook Form is a lightweight library which uses react hooks to manage the form state and validations. It fits right into your existing react component structure, making it easy to build and manage forms without a lot of extra code.

Lesson 3: let's write and understand the code.

Managing form state usually means keeping track of local state with the useState hook, context api or any other state management library like redux or zustand. React hook form takes care of this by providing you its own context api.

import {useForm, FormProvider} from 'react-hook-form';


const ReactHookFormExample = ()=>{

  const rfhMethods = useForm({
    defaultValues : {
            name: "Jhon doe"
            mobile : 4523652145
        }
    });

  const {register, reset, handelSubmit, formState:{errors}} = rfhMethods;

  const onSubmit = (formData)=>{
    console.log(formData, "FORM_DATA");
    reset();
  }


return (
    <FormProvider {...rfhMethods}>
       <form>
            <div className='user-name'>
                <input type="text" {...register("name")} />
                 {errors.name && <span>{errors.name.message}</span>}
            </div>
            <div className='user-mobile'>
                 <input type="number" {...register("mobile")}>
                  {errors.mobile && <span>{errors.mobile.message}</span>}
            </div>
       </form>
    </FormProvider>
        )
}

In the above example, useForm provides several methods & properties to manage the form:

1. register : a function to register the fields.

2. handelSubmit : a function to handel the form submission.

3. formState : its an object containing the form state with validation errors.

FormProvider is the context provider given to us by react hook form, to handel the form state in the nested components. eg:

const {useFormContext} from 'react-hook-form';

const nestedChildComponent = ()=>{
    const {register} = useFormContext();

return (
        <div className='user-city'>
            <select {...register("city")}>
                <option value='pune'>Pune</option>
                <option value='amdabad'>Amdabad</option>
                <option value='mumbai'>Mumbai</option>
            </select>
        </div>
       )
}

Here, with the useFormContext method you can access all the methods that useForm provides.

Lesson 4 : Traditional Forms in React – Why It's a Struggle

When you're building forms using plain React (also called "traditional forms"), things can quickly get messy. You have to manually handle every input, track changes, validate data, and manage errors — all by yourself. It may sound simple at first, but even a basic form can turn into a lot of boilerplate code.

import React, {useState} from "react";

export default const TraditionalForms = ()=>{
    const [formData, setFormData] = useState({name:"", email:""});
    const [errors, setErrors] = useState({});

    const handelInputChange = (evt)=>{
        const {name, value} = evt?.target;
            setFormData((prev)=>({...prev, [name]: value}))
     }

    const onSubmit = (evt)=>{
        evt.preventDefault();

        const errors = {};
        if(formData.name?.length < 2) errors.name = "name should contain atlist 2 characters";
        if(!/\S+@\S+\.\S+/.test(formData.email)) errors.email = "enter valid email";

        setErrors(errors);

        if(Object.keys(errors).length===0){
            console.log("FORM_DATA", formData);
          }

    };


    return (
        <form onSubmit={onSubmit}>
            <input type='text' name='name' value={formData.name} onChange={handelInputChange} />
            {errors?.name && <span>{errors.name}</span>}

            <input type='email' name='email' value={formData.email} onChange={handelInputChange} />
            {errors?.email && <span>{errors.email}</span>}

            <button type='submit'> Submit </button> //type : "submit" | "button" | "reset" by default to submit
        </form>
           )

If you're just starting out, building forms manually is a great way to learn. But as your project grows, you'll definitely want to use a form library to avoid drowning in state management and validation logic.

Traditional forms teach you the basics — but modern form libraries help you move faster and write cleaner code.