OpenSource for WebCrumbs

Posted on Dec 20, 2023 • Updated on Apr 10

Building a desktop app with JavaScript

#javascript #webdev #beginners #react

GitHub Repo: https://github.com/webcrumbs-community/webcrumbs

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

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

JavaScript From 0 to Mastery: My Personal Playbook for Conquering Web Development

OpenSource ・ Nov 17 '23

#javascript #tutorial #beginners #webdev

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?

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

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

npm init -y

Install Electron: Install Electron as a development dependency.

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.

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.

<!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":

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

Running the Application

Now, you can start your Electron application by running:

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

Let's build WordPress for React together!

OpenSource for WebCrumbs ・ Sep 17 '23

#webdev #react #opensource #javascript

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.

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 ❤️.