DEV Community

OpenSource for WebCrumbs

Posted on • Updated on

Building a desktop app with JavaScript

GitHub Repo:

Ever wondered how Visual Studio Code, Slack and Discord, and many other cool apps, are coded?

Apps with Electron

The answer is: Electron. Often hailed as a revolutionary framework, it empowers JavaScript developers to build cross-platform desktop applications using web technologies.

This framework, combining the power of Node.js and Chromium, offers a unique platform to leverage familiar web development skills for desktop application development.

What is Electron?

Eletron gif

Electron is an open-source framework that allows you to create desktop applications using HTML, CSS, and JavaScript. It's essentially a combination of Chromium (the open-source project behind Google Chrome) and Node.js, packaged together to provide a runtime that lets you build applications for Windows, macOS, and Linux.

Why Electron for JavaScript Developers?

Familiarity with Web Technologies: If you're adept at JavaScript, HTML, and CSS, Electron makes it straightforward to transition those skills to desktop application development.

Cross-Platform Compatibility: Write your code once, and run it on any major operating system. This eliminates the need to learn different technologies for each platform.

Access to Node.js: Electron applications have the ability to access Node.js APIs. This means you can interact with the file system, create native menus, notifications, and much more.

Strong Community and Ecosystem: Being open-source and popular, Electron has a vibrant community. You can find numerous resources, libraries, and tools tailored for Electron development.

Real-World Use Cases

Popular Applications: Some of the most popular desktop applications like Visual Studio Code, Slack, and Discord are built using Electron.

Custom Business Applications: Companies can build internal tools and applications tailored to their specific business needs, leveraging their existing web development expertise.

Support us! 🙏⭐️

By the way, I'm part of the WebCrumbs team, and it would mean a lot if you could check out our no-code solution for Node.js that simplifies web development. Giving us a star would be fantastic.

We're putting in a ton of effort to help devs take their ideas to a live website as quickly and easily as possible (think: effortless plugin and theme integration), and every bit of support is truly appreciated!

⭐️ Give WebCrumbs a Star! ⭐️

Ok. Now, let's dive back into the wonders of Electron.

Potential Drawbacks

Performance and Size: Electron applications can be resource-intensive and larger in size compared to native applications. This is due to the inclusion of Chromium and Node.js in each application.

Security Concerns: As with any framework, there are potential security vulnerabilities, particularly since Electron apps have access to Node.js. Developers need to be vigilant and follow best security practices.

Getting Started with Electron

Setting up the Project

Create a New Directory: Create a new folder for your project and navigate into it.

mkdir my-electron-app
cd my-electron-app
Enter fullscreen mode Exit fullscreen mode

Initialize a Node.js Project: Initialize a new Node.js project.

npm init -y
Enter fullscreen mode Exit fullscreen mode

Install Electron: Install Electron as a development dependency.

npm install electron --save-dev
Enter fullscreen mode Exit fullscreen mode

Writing the Code

Create the Main Script (main.js)

In the project directory, create a file named main.js. This will be the entry point of your Electron application.

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

function createWindow() {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true

  // Load a local HTML file or a web URL
  // Or load a remote URL
  // win.loadURL('');


app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
Enter fullscreen mode Exit fullscreen mode

Create an HTML File (index.html)

Create a file named index.html in the same directory. This file will be displayed in your Electron application window.

<!DOCTYPE html>
  <title>My Electron App</title>
  <h1>Hello, Electron!</h1>
  <p>Welcome to your first Electron application.</p>
Enter fullscreen mode Exit fullscreen mode

Update the Package.json File

In your package.json, modify the "main" script to "main": "main.js" and add a start script under "scripts":

"main": "main.js",
"scripts": {
  "start": "electron ."
Enter fullscreen mode Exit fullscreen mode

Running the Application

Now, you can start your Electron application by running:

npm start
Enter fullscreen mode Exit fullscreen mode

This will open a new Electron window displaying the contents of index.html. Congratulations, you've just created a basic Electron application!

Next Steps

Explore Electron's documentation to learn more about its APIs and capabilities. Experiment with different features like custom menus, notifications, and system interactions. Consider packaging and distributing your Electron app for different platforms.

Community and Contributions

Electron thrives on community contributions. As a JavaScript developer, you can contribute to its growth by participating in discussions, contributing to the codebase, or sharing your own Electron projects.

If you like open source, engage with the node.js community on GitHub at WebCrumbs Community or visit the WebCrumbs Community website for more information.


Electron stands out as a robust framework for JavaScript developers aiming to write a desktop application development without stepping away from the comfort zone of web technologies.

Its ability to leverage web development skills for creating cross-platform desktop applications makes it a valuable tool in a developer's arsenal.

As you embark on your journey with Electron, remember that the real power lies in experimenting, building, and engaging with the community.

Follow me for more!
I usually write about JavaScript, WebDev and Webcrumbs ❤️.

Top comments (12)

iamspathan profile image
Sohail Pathan

Do check Tauri - Recently, this is gaining more attention from developers. We are also using this for one of the new products.

opensourcee profile image

It's legit, Tauri is bringing up a lot of attention. It's on my list!

iamspathan profile image
Sohail Pathan

Happy to read that as well :)

mitch1009 profile image
Mitch Chimwemwe Chanza

I love tauri ot makes life easier to develop secure and lightweight desktop applications .

efpage profile image

If you use the good oldfashioned scripts (No ES6-modules), any html file (with embedded or external Javascript) can be run locally in the browser.

If you manage to run a web server on the fly, this would also work for modern web apps.

matek075 profile image

Not obvious way how we can work with JS. Nice article. Thanks for it

opensourcee profile image

Thanks for reading!

raguay profile image
Richard Guay

Wails is better

I think it’s much easier to use than Tauri and much smaller than Electron or NWjs. But, I do use NWjs for proof of concept builds.

opensourcee profile image

Hi, Richard! Thanks for mentioning the alternatives. It’s really good for those reading this

platoalt profile image

JavaScript is great

opensourcee profile image


dancoral profile image
Dan Coral


Some comments have been hidden by the post's author - find out more