Stuck? Contact me and I or one of my friends will help you. Search for them if you only want “TL DR” ( Too Long Didn’t Read) highlights. NOTE point out observations that many miss. To point out wisdom and advice from experience. Sentences that begin with PROTIP are a high point of this website Making sense of the flood of material around this subject. So you don’t have to spend as much time as me Like a good music DJ, I’ve carefully arranged the presentation of concepts This is a “deep dive” because all details are presented. That’s why this takes a hands-on approach where you type in commandsĪnd we explain the responses and possible troubleshooting.
You can find the source code of this demo from this GitHub repository.This article aims to enable you to use Electron as 3 use cases:ġ) use apps developed in Electron for Windows, Mac, and Linux desktops If you click on the Open Modal button, a modal window should be opened with the SitePoint website: This is a screenshot of the main window with a button: Now, run your desktop app using the following command: npm run start:electron Open the src/app/ file and add a button, then bind it to the openModal() method: We use the send() method of ipcRenderer to send an openModal message to the main process.
Next, create a main.js file and add the following code: const
Next, navigate to the root of your project and run the following command to install the latest version of Electron from npm as a development dependency: npm install -save-dev of this writing, this command will install Electron v4.1.4. Wait for your project’s files to be generated and dependencies to be installed from npm. If the CLI is installed successfully, navigate to your working directory and create a new Angular project using the following commands: cd ~
If the command fails with the EACCESS error, add sudo before your command in Linux or macOS, or run the command prompt as an administrator in Windows. Open a new terminal and run the following command: npm install -g install the Angular CLI globally on our system. Let’s get started by installing Angular CLI, which is the official tool for creating and working with Angular projects.
In this tutorial, we’ll be using Angular. This means we can use any JavaScript library or framework to build our application. It was initially created for GitHub’s Atom editor, but has since been used to create applications by companies like Microsoft ( Visual Studio Code), Facebook, Slack, and Docker.Įlectron makes use of powerful platforms like Google Chromium and Node.js, but also provides its own set of rich APIs for interacting with the underlying operating system.Įlectron provides a native container that wraps web apps so they look and feel like desktop apps with access to operating system features (similar to Cordova for mobile apps). It’s created and maintained by GitHub and it’s available under the MIT permissive license. In this tutorial we’ll build a cross-platform desktop application with Electron and web technologies such as TypeScript and Angular.Įlectron.js is a popular platform for building cross-platform desktop apps for Windows, Linux and macOS with JavaScript, HTML, and CSS.