#Electron set icon full#
But the reason to isolate the node.js context is that it might pose a severe security risk to make it available on the client because the node modules would give the user full access to the operating system. I had assumed that electron runs the client code on node.js as well, and when I found out it doesn’t, I was frustrated and wondered why it had to be this complex. Therefore, the client code doesn’t understand what require means and also has no access to any node modules, like the fs module.
Only the backend process runs on node.js, and require is only available in the node.js context. Surprise! This is the same error that I got above.Įlectron apps work very similar to server/client connections on the web: the backend (server) is completely isolated from the frontend (client). Now, open up the developer tools of your web browser and type require('fs'). Electron is built on chromium, so like your chrome browser, it creates one renderer process for every window that your app uses and one additional process for the backend, which electron calls the main process. When you started your electron app, you might have noticed that it spawned multiple processes. In the end, it turned out that I didn’t have enough knowledge of how electron apps work to understand what was happening here, so I’ll try to give you a brief overview of the architecture of electron apps.
#Electron set icon how to#
But none of these articles explained how to do this when you are using webpack, so no matter what I tried, it didn’t work. I searched for this error related to electron and stumbled upon different articles explaining how to use native node modules with electron. Uncaught ReferenceError: require is not defined We will also use yarn instead of npm because it’s recommended by some of the packages that we will be using.
#Electron set icon install#
We will use the Vue CLI for setting up the project, so the first step is to install the CLI globally. I’ll assume that you have some knowledge of JavaScript, Vue and Node, but other than that, I’ll try to explain every step along the way. Maybe it can save you part of the frustration that I experienced. In this article, I want to share some of these things. However, in the process, I have learned a lot about the architecture of electron apps and – most importantly – how to fend off the most significant security risks. But the project setup turned out to be much more difficult than I had anticipated because I ran into many errors that I could find very little information about online and which I had to solve through tedious trial-and-error. We edit / recently started my first electron project because I thought it was the quickest way to build a user interface for a desktop app that I was developing. If the default Quasar Icon Set is not dynamically determined (does not depends on cookies for example), then you can: Quasar CLI Way You can however tell Quasar to use some other Icon Set, but if it’s a webfont-based one then be sure to include its icon library in your website/app (see Installing Icon Libraries). Unless configured otherwise, Quasar uses Material Icons webfont as the icon set for its components. There are two types of Quasar Icon Sets: webfont-based and svg-based. Related pages: Installing Icon Libraries and QIcon component.