Because Electron is a Node app, we'll need to initialize a npm project. In a more structured project, we would have a src folder that contains all of our code. index.js will be our entry point for our Electron application, which will use index.html to render the GUI. We will also have a package.json file that will be used by npm to manage our dependencies. We will have a folder called app that contains all of our files. Directory Structureīy the end of this tutorial, our app will be in the following directory structure: app

If you see a version number, you're good to go. To test if you've installed Yarn, check the version: yarn -v To install Yarn, run this: npm install -g yarn This step is technically optional because you can just stick to npm if you prefer. We will be using Yarn to manage our dependencies. If you don't have them installed, follow our how to install Node guide.

Here's the Electron app that we will be building: Our Electron app running. In this tutorial, we will learn how to set up Electron, create a basic hello world example, run it on your local machine natively, and try out demos of Electron with Electron Fiddle.

With Electron, you can write native desktop applications in JavaScript, HTML, and CSS and have them run on all major desktop operating systems, such as macOS, Windows, and Linux.Įlectron works by bundling in Chromium, the same rendering engine that powers Chrome, and use the V8 JavaScript engine to run your Node code.Įlectron is essentially a stand-alone Chrome tab that you can build desktop apps in. Created by GitHub, Electron is used by a wide variety of open source and proprietary software projects, including Discord, Slack, Visual Studio Code, and many more.Įlectron is important because it made native desktop applications a lot easier due to its ability to support JavaScript, one of the world's most popular programming languages. Electron is a cross-platform desktop application framework based on web technologies.

Npm create electron app