As Node.js developers, we continuously seek ways to build desktop applications using the same frameworks and JavaScript code, and if we can ably do then we can enter into the application developer space directly from a web developer which eventually grants unlimited power. Well here is how can we do this.
In this tutorial, we will use Electron to convert an Express application to the desktop version using just a few lines of code.
Electron is a framework for building cross-platform applications. You can build desktop apps for Mac, Windows, and Linux using the same JavaScript codebase. There are many popular software programs that use Electron, including Visual Studio Code, Facebook, Twitch, and more. With that said, let’s deep dive into building the application.
Also Read: Beginner’s Guide to Using Git and GitHub
Creating an Express App
To build a desktop app from Express, we need first to build an Express application using Node.js (without HTML & CSS). Let’s build a simple single-page application that simply renders a defined message in the browser, then we’ll use Electron and turn it into a desktop app.
Below is the step-by-step process to create an Express app:
Step 1: Create a new folder and switch to it using the Terminal/Command prompt.
mkdir electron-express-demo && cd electron-express-demo
Step 2: Create a new Node.js project using this command. Assuming you have Node installed on your machine.
npm init --y
Step 3: Install the Express module from the Node repository.
npm install --save express
Step 4: Create a new file named app.js and copy/paste the below backend code into it.
const express = require('express');
const app = express();
const router = express.Router();
router.get('/', (req, res) => {
res.send(`
Hello World, Welcome to an Electron app
`);
});
app.use('/', router);
app.listen(process.env.port || 3000);
console.log('Web Server is listening at port ' + (process.env.port || 3000));
Run the Application:
Now, to run this code and test if it’s working properly execute the below command.
node app.js
It should print the following message in the Terminal once the express server is up and running.
Web Server is listening at port 3000
Now, navigate to localhost:3000 to check the app.
Output:
In the output, you can see we successfully build a web app using Node.js Express, let’s move on to convert it to a desktop app.
Using Electron to Convert Express App into Desktop App
Let’s now build an Electron-based desktop app from the existing Express app.
Below is the step-by-step process to convert an express app into a desktop app:
Step 1: To begin with, first, install the electron dependencies. Run this command to install it.
npm install --save-dev electron
Step 2: 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 thing here is that in the below line:
const server = require("./app");
Update the file name based on your project.
And in the line:
mainWindow.loadURL("http://localhost:3000");
Change the URL based on the port at which the server is listening and custom routes.
Step 3: 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"
}
}
Run the Application:
Now, run this command to open your electron application.
npm start
It should open a desktop application similar to this.
Output:
See the app is no longer web-based, it has become a desktop app.
Conclusion
This is how you can transform your Node.js or Express app into a Desktop App easily. There are many other methods, but Electron is an excellent tool that can accomplish this with just a few lines of code, without additional configurations. Implementing Electron for web apps to desktop app conversion can save lots of time and effort. To go deeper into developing web apps with Express, check out the Express Tutorial for Beginners: A Node.js Web Framework. Finally, we hope you found the content useful.
