How to Convert a Web App into Desktop Software (Windows & Linux) using Electron

Do you have a web-based project—like a School Bell System—created with HTML, CSS, and JavaScript? Running it in a web browser can be annoying because of the address bar, the risk of accidental closing, and the computer going to “sleep” mode.

In this tutorial, I will show you how to convert your web project into a standalone Windows Software (.exe) and a Linux Application using Electron. We will use my “School Bell System” as a practical example.

Why Use Electron?

Electron allows you to wrap your web code into a real desktop application.

• No Address Bar: Looks like professional software.
• Prevent Sleep Mode: Keeps the school bell running all day.
• Offline Ready: No internet required after installation.
• Easy Updates: Edit the schedule without rebuilding the software.
• Cross-Platform: Create versions for Windows 10/11 and Linux (Ubuntu, Mint, etc.) from the same code.

Prerequisites

Before we start, you need to install Node.js on your computer (the one you are building the software on).

1. Go to nodejs.org.
2. Download the LTS Version (Windows Installer).
3. Install it (click Next, Next, Finish).
4. Restart your computer.

Step 1: Prepare Your Project Folder

Create a new folder on your desktop (e.g., MyBellApp) and organize your files exactly like this:

• index.html (Rename your main HTML file to this)
• schedule.js (Your bell schedule logic)
• Sound_Files/ (Folder containing all your .mp3 files)

Tip: Do not use spaces in your folder name. Use MyBellApp instead of My Bell App.

Step 2: Initialize the Project

Open your folder, click the address bar at the top, type cmd, and press Enter. A black command window will open.

Run this command to create the configuration file:

Next, install the Electron tools (this requires internet):

Step 3: Create the Engine (main.js)

We need a script to tell the app how to launch and stay awake. Create a new file named main.js in your folder and paste this code:

Step 4: Configure for Windows & Linux

Open the package.json file (created in Step 2) with Notepad. We need to tell it to use main.js and add build commands for both operating systems.

Replace the file content with this:

Step 5: Build Your Software

For Windows 10/11

Run this command in your terminal:

• Result: A folder named SchoolBellSystem-win32-x64.
• How to Run: Open the folder and double-click SchoolBellSystem.exe.

For Linux (Ubuntu, Mint, etc.)

Run this command in your terminal:

Common Questions & Troubleshooting (Q&A)

Q: I get an error “EBUSY: resource busy or locked” when building. A: This happens if your app is already running in the background. Open Task Manager, end the “SchoolBellSystem” or “Electron” task, close any open folders, and try again.

Q: Can I put the Windows .exe and Linux file in the same folder? A: No. They require different system files (DLLs for Windows, .so files for Linux). Keep them in separate folders, or create a master folder with sub-folders like /Windows and /Linux.

Q: The app opens and immediately closes. A: Check your package.json file. Ensure the line says "main": "main.js". If it says "main": "schedule.js", the app will crash because schedule.js cannot create a window.

Q: Can I delete index.html after creating the EXE? A: No. The EXE is basically a web browser. It still needs index.html to display your interface. Do not delete any files inside the resources folder.

Q: Can I rename the .exe file? A: Yes, you can rename SchoolBellSystem.exe to MyBell.exe. However, never move it out of the folder. To put an icon on your desktop, Right-click the EXE > Send to > Desktop (create shortcut).

Q: Can build the Linux version on a Windows 10 computer without any problems

You can build the Linux version on a Windows 10 computer without any problems. The electron-packager tool is smart enough to create the correct Linux files even while running on Windows.

However, there is one important thing you must do when you copy that folder to the Linux computer:

⚠️ The “Permission” Issue

Because Windows file systems do not use Linux permissions, the main start file (usually named SchoolBellSystem-Linux) often loses its “permission to run” during the copy process.

When you copy the folder to the Linux computer, you likely cannot double-click it immediately.

✅ How to Fix It (On the Linux Computer)

Once you copy the folder to the Linux machine:

1. Open the folder.
2. Right-click the file named SchoolBellSystem-Linux (it will have no extension like .exe).
3. Select Properties.
4. Go to the Permissions tab.
5. Check the box that says “Allow executing file as program” (or “Is Executable”).
6. Close the window.

Now you can double-click it, and it will run perfectly!

Q: How to Remove Login Password (Auto-Login)

This makes the computer go straight to the desktop when you turn it on.

For Ubuntu / Linux Mint:

1. Open your Settings (System Settings).
2. Find the Users settings.
3. Click the Unlock button at the top right (you will need to type your password once).
4. Look for the switch that says “Automatic Login”.
5. Turn it ON.

Now, when you restart the computer, it will not ask for a password.

Q: How to Create a Desktop Shortcut

To put a clickable icon on your Desktop that opens your new Bell System:

1. Right-click on your Desktop and choose Create New Document > Empty Document.
2. Name it: SchoolBell.desktop (Make sure it ends with .desktop).
3. Open this file with a text editor.
4. Paste the code below

Activate the Shortcut:

• Right-click the new SchoolBell.desktop file on your desktop.
• Select Properties > Permissions.
• Check the box “Allow executing file as program”.
• (On Ubuntu, you might also need to right-click the file and select “Allow Launching”).

Q: How to Add to Startup (Auto-Start)

If you want the Bell System to open automatically when the computer turns on:

1. Open your Home Folder.
2. Press Ctrl + H on your keyboard (this reveals hidden folders).
3. Open the folder named .config.
4. Open the folder named autostart. (If it doesn’t exist, create a folder named autostart).
5. Copy the SchoolBell.desktop file you created in Part 2.
6. Paste it inside this autostart folder.

Now, when the computer turns on:

1. It will skip the password (Auto-Login).
2. It will automatically open your School Bell App.

Conclusion

Converting a web app to a desktop EXE is a powerful skill for any ICT student. Now you have a professional School Bell System that is stable, sleep-resistant, and runs on both Windows and Linux computers.

Happy Coding!