Convert Express App into Desktop App

Electron is a framework that a developer can use to build a cross-platform native application using JavaScript. You can use JavaScript to build a desktop application for Windows, Mac, and Linux based systems using the same JavaScript codebase. Electron is used in some of the popular software such as visual studio code, Facebook, Twitch, etc.

In this tutorial, we will use Electron to build a desktop application that uses Express as a framework. We will provide a generic codebase that you can use to transform your existing express based codebase to the desktop application.

Let’s build a simple Express application first.

Building a simple Express app

Create a new folder and switch to it using the Terminal/Command prompt.

mkdir electron-express-demo && cd electron-express-demo

Create a new Node.js project using this command. Assuming you have Node installed in your machine.

npm init --y

Now, install the Express module.

npm install --save express

Create a new file naming app.js and copy/paste this code in it.

const express = require('express');
const app = express();
const router = express.Router();

router.get('/', (req,res) => {
res.send('<h1>Hello World, Welcome to a Electron app</h1>');
});

app.use('/', router);

app.listen(process.env.port || 3000);

console.log('Web Server is listening at port '+ (process.env.port || 3000));

Now, run this code and test if it’s working properly.

node app.js

It should print the following message in the Terminal/Command prompt.

Web Server is listening at port 3000

Now, navigate to localhost:3000 to check the app.

Our app is working as expected. Let’s convert it as an electron based desktop application.

Electron app

To begin with, first, install the electron dependencies. Run this command to install it.

npm install --save-dev electron

Now, create a new file and name it main.js and copy/paste the follwing code in it.

const { app, BrowserWindow } = require("electron");

const server = require("./app");

let mainWindow;

function createWindow() {
mainWindow = new BrowserWindow({
width: 1200,
height: 700,
webPreferences: {
nodeIntegration: true,
},
});

mainWindow.loadURL("http://localhost:3000");
mainWindow.on("closed", function () {
mainWindow = null;
});
}

app.on("ready", createWindow);

app.on("resize", function (e, x, y) {
mainWindow.setSize(x, y);
});

app.on("window-all-closed", function () {
if (process.platform !== "darwin") {
app.quit();
}
});

app.on("activate", function () {
if (mainWindow === null) {
createWindow();
}
});

This is a standard code to create a new Electron application window and load the Express application in the container. The important points to notice is this line:

const server = require("./app");

Update the file name based on your project. The next important code is this line:

mainWindow.loadURL("http://localhost:3000");

Change the URL based on port and custom routes.

Now, add this in a “scripts” object of the package.json file.

"start": "electron main.js"

Your package.json should look like this:

{
"name": "electron-express-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "electron main.js",
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.17.1"
},
"devDependencies": {
"electron": "^10.1.3"
}
}

Now, run this command to open your electron application.

npm start

It should open a desktop application similar to this.