ELECTRON APP ICON GENERATOR INSTALL
ELECTRON APP ICON GENERATOR UPDATE
ELECTRON APP ICON GENERATOR CODE

ELECTRON APP ICON GENERATOR UPDATE

Update : Some people criticized me for calling Electron a “native” app. Most importantly, I can see why Electron is such a popular project and why so many companies are choosing to build OS specific apps with it.

I am pretty happy with the final product. More information is available in electron-packager’s documentation. The only thing that would vary between platforms is the icon format.

I have not tried it, but I am sure that it would be just as easy to generate a working app for Windows or Linux. (A reader named Paola suggested that might be a better tool to generate icns).Īlso electron-packager was smart enough to generate an app for the right system (Mac OS in my case). In order to generate the app icon I downloaded a free stopwatch image from and converted it to icns format via. Finally, I just had to move the generated app into the /Applications folder and I was done.įew additional notes. Running this command with npm run build would generate a /simple-stopwatch-darwin-圆4 folder, inside of which I’ll have the generated simple-stopwatch.app. Force over-write the old app on build re-run.

ELECTRON APP ICON GENERATOR CODE

simple-stopwatch -icon=icon/stopwatch.icns -overwrite' Code language: JavaScript ( javascript ) Once installed, I added the following npm script into my package.json file:

ELECTRON APP ICON GENERATOR INSTALL

I installed it via npm install -save-dev electron-packager. I used another repo called Electron Packager to generate an actual app bundle. Please let me know in the comment area if you would like to see a more detailed walk through and I’ll make sure to write one. I believe the code is fairly self explanatory so I am not going to go over it in detail in this post. I noticed that the default electron window was a little too big for my use case, so I modified the mainWindow = new BrowserWindow() line inside main.js file to make it a little smaller. See the Pen stop-watch by Alex ( on CodePen. There you can see the final index.html file, as well as the app.js where I implemented all of the JavaScript logic and style.css file with all of the CSS. I also forked the Electron Quick Start and tracked my development in Simple Stopwatch repo on Github. You can see it bellow running inside Codepen. While other people’s example were great, I wanted to write my own version. As a proof of concept I copy/pasted a random example into the index.html file (making sure to wrap it into proper, and tags) and it just worked. For inspiration I went to codepen.io and searched for stopwatch there. There are a lot of stopwatch examples available online. All I had to do to make the stopwatch app, was to add some HTML, CSS and JavaScript inside the index.html file. So the Electron shell above was just using the content of this index.html file. You can also require other files to run in this process require( './renderer.js') We are using Node.js document.write() ,Ĭhromium document.write() ,Īnd Electron document.write().

Electron app icon generator