DEV Community: mandeepsng

Porting an Electron App to Linux: Lessons from My screenshort-app Experience

mandeepsng — Wed, 16 Sep 2026 13:33:54 +0000

I spent today getting an Electron app to run smoothly on Linux, and it turned out to be a mix of small gotchas and straightforward fixes. If you're about to port your own Electron app, here are a few things I learned.

First, the port number. In my rvs-work-inbox app, the default port was fine on macOS but clashed with a service on Linux. I had to change it in the main process config. Lesson: don't assume your port is free across OSes. Check common conflicts early.

Second, the README. I updated screenshort-app's README with Linux install instructions. That sounds trivial, but it forced me to document the exact dependencies and build steps. On Linux, you often need extra system libraries (like libgtk-3 and libnotify) that aren't required on macOS. If you don't write them down, your future self (or your users) will struggle.

Third, testing with Postman. I used it to verify API endpoints that the Electron app hits. On Linux, the app's network stack behaves a bit differently, especially with proxies or self-signed certs. Postman helped me isolate whether issues were in the app or the environment.

Finally, I ran into a phpMyAdmin cookie issue while debugging a local setup. That wasn't directly about Electron, but it reminded me that Linux environments often have stricter cookie and permission settings. Always check your local server config.

Porting isn't glamorous, but it's mostly about being methodical: test each piece, document everything, and don't assume cross-platform behavior. The good news is that Electron's tooling is mature, so most problems have a known fix. Just be ready to read a few forum threads and tweak your configs.

If you're doing a Linux port, start with the port, then the dependencies, then the docs. You'll save yourself a lot of head-scratching.

Fixing a Notification Click Bug in a Tauri + Svelte Desktop App

mandeepsng — Tue, 15 Sep 2026 10:21:12 +0000

Today I finally tracked down a frustrating bug in our office-chat desktop app. When a user clicked a system notification, the app didn't open the right chat thread — or sometimes didn't open at all. It felt like a classic “works on my machine” issue, but it was happening for several users on Windows and macOS.

The app is built with Tauri (Rust backend) and Svelte (frontend). Notifications are triggered from the Rust side using the tauri-plugin-notification API. The click event is supposed to emit a custom event back to the frontend, which then navigates to the relevant conversation.

After digging in, I found two problems:

The event payload was missing the conversation ID. The Rust code was sending a generic notification-clicked event without any data, so the frontend had no idea which thread to open.
Even when the payload was correct, the Svelte listener was attached too late. The notification click could fire before the Svelte app had fully mounted, so the event was lost.

For the first issue, I updated the Rust handler to include the conversation ID in the event payload. That was straightforward — just pass the ID along when creating the notification.

For the second, I moved the event listener registration into the onMount lifecycle of the root component, and also added a small queue in the frontend to buffer any events that arrive before the app is ready. That way, no click is ever dropped.

I also added a quick test with Postman to simulate the notification payload and verify the frontend routing logic. It’s not a full end-to-end test, but it caught a few edge cases.

The fix is now in a PR and I’m waiting for review. It’s a small change, but it makes the app feel much more responsive. If you’re building a Tauri app with notifications, double-check your event payloads and listener timing — those two are easy to overlook.

Implementing a Loading Page State in ReactJS: Enhancing User Experience with Loading Indicators

mandeepsng — Tue, 20 Feb 2024 07:32:37 +0000

In ReactJS, you can create a loading page state to indicate to users that the application is in the process of loading data or performing an operation. Here's a basic example of how you can implement a loading page state in React:

import React, { useState, useEffect } from 'react';

function App() {
  const [loading, setLoading] = useState(true); // State to track loading status

  useEffect(() => {
    // Simulate data loading delay with setTimeout
    const loadData = () => {
      setTimeout(() => {
        setLoading(false); // Set loading state to false after delay
      }, 2000); // Simulated loading time: 2000 milliseconds (2 seconds)
    };

    loadData(); // Call loadData function when component mounts
  }, []); // Empty dependency array to run effect only once on mount

  return (
    <div>
      {loading ? (
        <div>Loading...</div> // Render loading message when loading state is true
      ) : (
        <div>Loaded successfully!</div> // Render content when loading state is false
      )}
    </div>
  );
}

export default App;

In this example:

We use the useState hook to manage the loading state, initializing it as true.
We use the useEffect hook with an empty dependency array to simulate data loading. This effect runs only once when the component mounts.
Inside the useEffect, we simulate a loading delay with setTimeout. After the delay, we update the loading state to false.
In the return statement, we conditionally render a loading message or the content based on the value of the loading state.

You can customize the loading message and loading time according to your requirements. Additionally, you can enhance this example by replacing the simulated loading with actual data fetching or other asynchronous operations.

Node.js: 5 Essential Syntax Examples for Beginners

mandeepsng — Thu, 15 Feb 2024 12:12:16 +0000

Sure, here are five examples of Node.js syntax:

Defining a variable:

   const message = "Hello, World!";

Using built-in modules:

   const fs = require('fs');

Creating a function:

   function greet(name) {
       console.log(`Hello, ${name}!`);
   }

Using arrow function:

   const add = (a, b) => {
       return a + b;
   };

Using asynchronous file reading:

   const fs = require('fs');

   fs.readFile('example.txt', 'utf8', (err, data) => {
       if (err) throw err;
       console.log(data);
   });

These examples demonstrate basic Node.js syntax for variable declaration, module import, function creation, arrow functions, and asynchronous file reading using the fs module.