Electron Alternatives: NodeGUI and React NodeGUI Explained

Unlock the Power of NodeGUI: Building a System Utility Monitor Application

Getting Started with NodeGUI

NodeGUI, an open-source framework, allows developers to build cross-platform native desktop applications using JavaScript and CSS-like styling. Similar to Electron, NodeGUI enables you to run your apps on Mac, Windows, and Linux from a single codebase. However, NodeGUI is powered by Qt5, which provides excellent performance and memory management, but requires the use of Qt5 components instead of HTML.

Building a System Utility Monitor Application

In this article, we’ll explore the NodeGUI framework and the React NodeGUI module by building a system utility monitoring application. Our application will dynamically display an operating system’s CPU, memory, and disk space, as well as additional statistics related to the operating system.

Prerequisites

To follow along with this tutorial, ensure you have the following:

• Node.js installed
• An IDE
• A terminal application (e.g., iTerm2 for Mac and Hyper for Windows)
• Familiarity with TypeScript, React, and CSS

Setting Up Our React Node GUI Project

First, clone the starter application using the following command in your terminal:


npx react-node-gui-starter my-app


Next, install the node-os-utils package, which provides an operating system utility library:


npm install node-os-utils


Application Scripts and Development

The starter application offers several npm scripts that we can run. For development, we’ll run the following command:


npm run dev


This command will launch the application and enable hot reloading.

Globals and Systems Details Helper

Create a globals.ts file in the helpers directory and add the following code:

“`typescript
export const colors = {
primary: ‘#333’,
secondary: ‘#666’,
};

export const labels = {
cpu: ‘CPU Usage’,
memory: ‘Memory Usage’,
disk: ‘Disk Space’,
};
“`

Node-OS-Utils Functions

We’ll use the node-os-utils library to get our system’s information. Create a systemDetails.ts file in the helpers directory and add the following code:

“`typescript
import { os } from ‘node-os-utils’;

const systemDetails = async () => {
const cpuUsage = await os.cpuUsage();
const memoryInfo = await os.memoryInfo();
const diskInfo = await os.diskInfo();

return {
cpuUsage,
memoryInfo,
diskInfo,
};
};

export default systemDetails;
“`

Application Interface and Design

Create a components directory and add the following three component files: InnerContainer.tsx, StatsColumn.tsx, and StatsRow.tsx.

Update the index.tsx file to import the necessary modules and functions:

“`typescript
import React, { useState, useEffect } from ‘eact’;
import { Window, View, Text } from ‘eact-node-gui’;
import { systemDetails } from ‘./helpers/systemDetails’;
import { initialData } from ‘./helpers/initialData’;

const App = () => {
const [data, setData] = useState(initialData);

useEffect(() => {
const updateData = async () => {
const systemInfo = await systemDetails();
setData(systemInfo);
};

updateData();

}, []);

return (


{data.cpuUsage}
{data.memoryInfo}
{data.diskInfo}


);
};
“`

Styling and Components

Update the styleSheet constant in the index.tsx file to add styles for our application:

“css
const styleSheet =
* {
font-family: Arial, sans-serif;
}

Window {
width: 400px;
height: 300px;
background-color: #f0f0f0;
}

View {
flex-direction: column;
align-items: center;
padding: 20px;
}

Text {
font-size: 18px;
margin-bottom: 10px;
}
`;
“`

Add the StatsRow component to the index.tsx file:

“`typescript
import StatsRow from ‘./components/StatsRow’;

const App = () => {
//…

return (







);
};
“`

Finalizing the Application

Update the index.tsx file to add the final touches to our application:

“`typescript
import StatsColumn from ‘./components/StatsColumn’;

const App = () => {
//…

return (







);
};
“`

That’s it! You now have a fully functional system utility monitoring application built with NodeGUI and React.