Building a desktop app with JavaScript
Tags: javascript, webdev, beginners, react
Published: 2023-12-20 12:19:18

**GitHub Repo:** [https://github.com/webcrumbs-community/webcrumbs](https://github.com/webcrumbs-community/webcrumbs)

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

![Apps with Electron](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rymkfkwo4o97a6k706ea.png)

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

{% embed https://dev.to/opensourcee/javascript-from-0-to-mastery-the-way-i-would-do-it-today-5d19 %}

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vqovv5qd12tkb9wu408d.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](https://github.com/webcrumbs-community/webcrumbs) 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!

{% cta https://github.com/webcrumbs-community/webcrumbs %}⭐️ Give WebCrumbs a Star! ⭐️ {% endcta %}

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.

```bash
mkdir my-electron-app
cd my-electron-app
```

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

```bash
npm init -y
```

**Install Electron:** Install Electron as a development dependency.

```bash
npm install electron --save-dev
```

---

## 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.

```javascript
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
  win.loadFile('index.html');
  // Or load a remote URL
  // win.loadURL('https://example.com');
}

app.whenReady().then(createWindow);

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

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});
```

---

## 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.

```html
<!DOCTYPE html>
<html>
<head>
  <title>My Electron App</title>
</head>
<body>
  <h1>Hello, Electron!</h1>
  <p>Welcome to your first Electron application.</p>
</body>
</html>
```

---

## Update the Package.json File

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

```json
"main": "main.js",
"scripts": {
  "start": "electron ."
}
```

---

## Running the Application
Now, you can start your Electron application by running:

```bash
npm start
```

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

---

# Next Steps

{% embed https://dev.to/opensourcee/wordpress-for-react-82f %}

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](https://github.com/webcrumbs-community/webcrumbs) or visit the WebCrumbs Community [website](https://webcrumbs.org/) for more information.

---

## Conclusion

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](https://github.com/webcrumbs-community/webcrumbs) ❤️.

{% embed https://dev.to/opensourcee %}