Build Your First Desktop App with Electron
Electron is a framework for building native desktop apps using the same toolkit as you use for web development. Learn to build or port your first desktop app in minutes!
Electron apps offer the same endless capabilities as web apps — from simple brochure pages, to fully-functional, dynamic applications like the Figma, VS Code, and Discord desktop clients. Electron also has access to the underlying operating system — allowing it to do things like load files, read files, etc. This makes Electron extra powerful.
Pros of Electron
Converting existing web applications into Electron apps is a snap.
Electron utilizes the same languages and a similar setup to the bulk of web development, making it easy to learn and use for most developers.
Cons of Electron:
Space: Electron apps run with Chromium, and they need to have the Chromium OS to run, so they take up a decent amount of space — there’s a flat ~100MB overhead, even for simple apps. For smaller, lightweight apps, another language or runtime environment might be a better choice.
Source code: Because of the way Electron apps are packaged, there are ways for the user to access and manipulate the source code using asar. While this can enable users to make their own custom extensions and additions to applications, it can potentially pose a security threat for your app if you’re not careful.
Without further ado, let’s get started developing with Electron! For the impatient, there is also an Electron Quick Start repo here, which sets up this foundation so you can clone and jump right into your app — but it’s worth knowing how Electron apps are built.
Start by making a new directory for your project, and then installing Electron as a development dependency for it. In your favorite command line interface, (if you don’t know what command line interfaces are, check out this; I’d recommend Terminal for Mac or Git Bash for Windows), you should be able to do this with npm install –save-dev electron .
Note: to develop with Electron, you’ll need Node.js and npm. If you don’t have them installed, please do so with Homebrew or directly from Node; note that npm comes packaged with Node.
Let’s start with package.json. You can run “npm init” to prompt you through creating your package file with the command line, or you can simply write it out in your preferred code editor. The important parts for now are the name, version, and description of your app, as well as the start script — set the first three as you choose (I’ll be making a simple app to convert text between English and Morse Code). If you’re using the command line, set your “main” or “entry point” to “index.js.” Then make sure to set your “start” or “test” script to “electron .” (mind the space). You should have something that looks like this:
<iframe src=”https://medium.com/media/a1e07dbedd0d555e302a573f2218140f” frameborder=0></iframe>
This means you can now run your project with Electron from the command line with npm start— or npm test, if you set your script to be that instead — but first, we need some HTML.
<iframe src=”https://medium.com/media/f7bb5a7a37db152ee7eee0d446548f8f” frameborder=0></iframe>
<iframe src=”https://medium.com/media/6ac5c530bf9d3bc66f6f4547885f12f2” frameborder=0></iframe>
Try running with npm start and you should see your app!
If you see an error, try running npm test — some command prompt tools will set that up as the electron script instead.
The code for your app can be added directly into your index.js file, or to keep your project more organized, written in other files and imported by using require at the top of the index.js. Note that it is difficult to directly alter the UI from background processes like our index.js file; if you want to modify the UI, it is easier to import your JS as a
Once you’re happy with it, your app can be packaged easily using electron-packager. Install electron-packager with npm install electron-packager -g, and then you can package your Electron app for sharing by simply calling electron-packager . on the command line.
And that’s all there is to it! Electron is a great framework for developers with web experience who want to develop native desktop applications. Not only that, but the process of converting a web app into a desktop app with electron is a cinch too. It’s certainly best to rebuild it using your existing source files — but if you want the functionality quick, try replacing win.loadFile(“index.html”); from your index.js file with win.loadURL(“https://sample-website.com”);, and you’ll have a desktop-bootable build instantly. Cheers!
If you enjoyed this tutorial, check us out!
Code Chrysalis is a coding and English school located in the heart of Tokyo. Our programs include a 12-week advanced software engineering bootcamp, a beginner coding course, and an English communication immersive.
See why we are an industry leader in tech education in Japan.
|Follow us on Instagram||YouTube|